I'm using themeforest with bootstrap.
When I click in the menu (data-toggle="sidebar"), it refreshes the page preventing me from viewing the menu.
<!-- START MOBILE CONTROLS -->
<div class="container-fluid relative">
<!-- LEFT SIDE -->
<div class="pull-left full-height visible-sm visible-xs">
<!-- START ACTION BAR -->
<div class="header-inner">
<a href="#" class="btn-link toggle-sidebar visible-sm-inline-block visible-xs-inline-block padding-5" data-toggle="sidebar">
<span class="icon-set menu-hambuger"></span>
</a>
</div>
<!-- END ACTION BAR -->
</div>
<div class="pull-center hidden-md hidden-lg">
<div class="header-inner">
<div class="brand inline">
<img src="assets/img/logo.png" alt="logo" data-src="assets/img/logo.png" data-src-retina="assets/img/logo.png" width="78" height="22">
</div>
</div>
</div>
</div>
<!-- END MOBILE CONTROLS -->
In the console, I'm getting the following message:
[Intervention] Unable to preventDefault inside passive event listener
due to target being treated as passive : jquery-3.2.1.min.js:6
And inside jquery, the error is in this part:
preventDefault: function () ... var a = this.originalEvent; ... a.preventDefault(); ...
The error is at: a.preventDefault();
Here's the interesting thing: after several clicks on the menu icon, it shows the menu. That's weird.
Any ideas how to solve this?
Related
I am adding some semantic-ui cards dynamically to a page. These cards have dimmers.
Example from SUI site.
<div class="ui special cards">
<div class="card">
<div class="blurring dimmable image">
<div class="ui dimmer">
<div class="content">
<div class="center">
<div class="ui inverted button">Add Friend</div>
</div>
</div>
</div>
<img src="/images/avatar/large/elliot.jpg">
</div>
<div class="content">
<a class="header">Team Fu</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
</div>
Now, if I add the above content dynamically (using jQuery) - currently, for testing, I am just using a string of the above HTML markup (cards) and calling $("#myDiv").append(cards).
I then need to activate the dimmers using:
$('.special.cards .image').dimmer({
on: 'hover'
});
If I call this after the append, then the dimmers do not work. As I understand it, this needs to be delegated. So I tried:
$("#myDiv").on('click','.special.cards' , function() {
$('.special.cards .image').dimmer({
on: 'hover'
});
});
This works but requires me to first click on a card before the on: hover is activated.
Is there a way to activate the on: hover without the need for a click?
I have an app that display 5 div each containing a specific kind of data.
I would like to be able to show one of the div in a modal so that the user can see the data in bigger size.
This would be trigger by a button placed in the top right corner.
HTML
<div class="ui grid">
<div class="sixteen wide column center aligned">
IRM Website
</div>
<div class="sixteen wide column center aligned mediumBox"> <!-- DIV 1 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" dataset="pluviometre" ng-if="vm.bassins"></map>
</div>
<div class="four wide column smallBox"> <!-- DIV 2 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<img />
</div>
<div class="four wide column smallBox"> <!-- DIV 3 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<img />
</div>
<div class="four wide column smallBox"> <!-- DIV 4 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" ng-if="vm.bassins"></map>
</div>
<div class="four wide column smallBox"> <!-- DIV 5 -->
<button class="circular ui tiny icon right floated basic button"><i class="maximize icon"></i></button>
<map bassins="vm.bassins" ng-if="vm.bassins"></map>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
The modal need this javascript to be shown
$('.ui.modal').modal('show');
The idea is that each button triggers a function inside my controller
vm.maximizeData = function(){
$('.ui.modal').modal('show');
}
But how can I display the correct div inside the modal ?
As your question says you want to show a data of particular clicked element into the modal dynamically.
Use a selector to have parent child for click function
Get the content of respective / closest / next DIV content that you want to show in modal as bigger data.
Set the modal content and then show it.
HTML
<div class="mainBox">
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content</div>
</div>
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content</div>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
Jquery
$(document).ready(function(){
//Button click
$('.mainBox .smallBox .buttonAction').click(function(){
//Get content near to clicked button
var contentToSet = $(this).next('.divContent').html();
//Set the data to be shown in modal
$('.modal').find('.content').html(contentToSet);
//Make modal show
$('.modal').modal('show');
});
});
FYI, This is just an example, you may need to change variable names as per your need.
$(document).ready(function(){
//Button click
$('.buttonAction').click(function(){
//Get content near to clicked button
var contentToSet = $(this).next('div.divContent').html();
console.log(contentToSet);
//Set the data to be shown in modal
$('.modal').find('.content').html(contentToSet);
//Make modal show
//$('.modal').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainBox">
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content1</div>
</div>
<div class="smallBox">
<button class="buttonAction">Button</button>
<div class="divContent">Content2</div>
</div>
</div>
<div class="ui modal"> <!-- The modal -->
<i class="close icon"></i>
<div class="header">Data in modal</div>
<div class="content">
Here is my content
</div>
</div>
I'm new in Semantic-UI and web development and I can't make the popup menu work. Actually I'm trying to create the popup menu example in this page and the document doesn't tell me to run any javascript etc. I've created a jsfiddle here:
https://jsfiddle.net/jhg9df8t/
The code is:
<div class="ui menu">
<a class="browse item">
Browse
<i class="dropdown icon"></i>
</a>
</div>
<div class="ui fluid popup top left transition hidden">
<div class="ui four column relaxed equal height divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colored</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
You would need to initialize the popup as follows.
$('.example .menu .browse').popup({
inline : true,
hoverable: true,
position : 'bottom left',
delay: {
show: 300,
hide: 800
}
});
This is from Popup documentation (.example class element is not included in the code you copied from semantic ui. So if you dont have that element with example class in your code I would suggest updating initialization without it). Refer to it for more information.
http://semantic-ui.com/modules/popup.html#/examples
Also I think you might need to include JS & CSS associated with popup plugin.
If you read carefully here http://semantic-ui.com/collections/menu.html#popup-menu follow the link to popup and see if theres any additional JS and/or CSS for it.
I hope it helps.
I have about 14 related products for each parent product and want the Owl-Carousel slider to function so visitors can scroll thru seeing 4 at a time.
The related products I have set up are rendering nicely except they are listed down the page vertical and not inside the carousel slider.
There is another owl-carousel Slider on this same site on the home page (index.html) which works fine.
The Difference?
This one gets each product detail form Business Catalyst module rendered as:
<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">
the id is different for each product of course.
Here is link if you want to View page source - starts on LINE 289
Link to product parent detail page
To see the module result - Here is some code from ONE product inside the owl-carousel
What can I add to this to make each block of product detail render horizontal?
<section class="section wow fadeInUp">
<h3 class="section-title">Accessories and Related Products</h3>
<div class="owl-carousel home-owl-carousel custom-carousel owl-theme outer-top-xs">
<div class="item item-carousel">
<div class="products">
<div class="product">
<ul class="productfeaturelist">
<li id="catProdTd_9568921" class="productItem">
<!-- product detail -->
<div class="product-image">
<div class="image"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only"><img id="catsproduct_9568921" src="/assets/images/products-sm/FF400-2.jpg?bc_t=jVmrpgtTMrRukibgVCEGpA" alt="Fibre-Metal Headgear-Headgear" border="0" /></a> </div>
<!-- /.image -->
</div>
<!-- /.product-image -->
<div class="product-info text-left">
<h4 class="name"> <a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">Fibre-Metal Headgear-Headgear</a> </h4>
<div class="description"></div>
<div class="product-price"> <strong>$19.50</strong> discountcryo price</div>
<!-- /.product-price -->
</div>
<!-- /.product-info -->
<div class="cart clearfix animate-effect">
<div class="action">
<h4>
<div class="action"><a target="_self" href="/safety-accessories-1/fibre-metal-headgear-headgear-only">SEE DETAIL</a></div>
</h4>
</div>
<!-- /.action -->
</div>
<!-- /.cart clearfix -->
<div class="padd-bottom-20"></div>
<!--/ END product detail -->
</li></ul> </div>
<!-- /.product -->
</div>
<!-- /.products -->
</div>
<!-- /.item item carousel -->
</div>
<!-- /.home-owl-carousel -->
</section>
<!-- /.section -->
Hope this is better to understand?
Thank You
Willz
Problem solved
The trouble was with the Business Catalyst Module productfeaturelist
- here is the module as edited to function correctly in owl-carousel:
{module_productfeaturelist tag="{tag_name}" render="collection" rowCount="99" sortType="Weight" template="/Layouts/OnlineShop/prodFeature.tpl"}
{% comment %} /* OLD */ {module_productfeaturelist,{tag_name},99,weight,_self,true } {% endcomment %}
Try Using:
display: inline-block;
Also have a look Here for tips on creating a grid.
Using both Bootstrap components carousel and popover, I have encountered some conflict. I need to utilize the carousel inside the popover, however they don't play nice together. Is there a reason for this?
Essentially the concept is pretty simple, if you want to login, the form is inside the popover and if you want to register, utilise the carousel inside the popover and slide to register form.
Any Ideas?
Bootply:
HTML:
<div class="login-popover hide">
<div class="row">
<div class="col-md-12">
<div id="login-register" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner"><!-- Wrapper for slides -->
<div class="item active"> <!-- Active is always 1st image-->
Login Content
</div>
<div class="item">
Register Content
</div>
</div>
<!-- Controls for carousel-->
<a class="left carousel-control" href="#login-register" data-slide="prev">
<span class="glyphicon glyphicon-circle-arrow-left"></span>
</a>
<a class="right carousel-control" href="#login-register" data-slide="next">
<span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
</div>
</div>
Javascript:
$('.login-pop').popover({
placement: 'bottom',
container: '.popover-login',
trigger: 'click',
animation: false,
template: '<div class="popover login" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
html: true,
content: function () {
return $(this).next('.login-popover').html();
}
});
It is possible to put bootstrap carousel inside tooltip or popover. Take a look at some examples:
http://codepen.io/_danko/pen/wavmjG
Reason why it does not work in your case is because it (carousel) is not initialized. You can initialize it with something like this:
$('.login-pop').on('shown.bs.popover', function () {
// initialize carousel…
$('.carousel-inner').carousel();
});
After further reading Bootstrap popovers create dynamic content so this is not possible.