I have div page and inside that div I have bootstrap multiselect container
<div class="content clearfix">
<ul class="multiselect-container dropdown-menu">
<li> ...</li>
</ul>
</div>
problem is that when there are many list items inside this multiselect element it stays hidden under parent div. How can I dynamically change parent div height as multiselection container element height change?
I tried already with
.content.clearfix {
height:auto;
}
but that doesn't helped
Try JS to set height dynamically as per your multi-list element height. Check if it can help to you. I just put this code inside setTimeout because in case your li elements are taking time to load on page. Please try without setTimeout function first.
$(document).ready(function(){
setTimeout(function(){
var multiselectHeight=$('.multiselect-container').height();
$('.content').height(multiselectHeight);
},1000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content clearfix">
<ul class="multiselect-container dropdown-menu">
<li> ...</li>
</ul>
</div>
Related
Firstly, I need to say that I'm pretty new to jQuery.
I have this situation: http://jsfiddle.net/dVf8m/
I've been wondering if there is a way to do the slideToggle simplier. Now I have two ids on menu elements (#trigger1 and #trigger2) and two ids on the hidden divs (#one and #two). This also results in double jQuery. Is it possible to avoid all the ids and make it simpler?
Another thing is that if I click on both menu elements (First and Second) both divs appear. I want only one of the hidden divs to be visible at one time? How can I force the first div to disappear when the other one is appearing?
Also, if I'd want to use fadeIn/fadeOut in this situation, how to do it when both of them use the .click event?
Change your code to something like below. Have a class for the div and add click listener to it. add any attribute to the div and give the id of the div to be toggled.
<div id="top">
<ul>
<li><span id="trigger1" class="toggler" data-item="item1">First</span></li>
<li><span id="trigger2" class="toggler" data-item="item2">Second</span></li>
<li>Third</li>
</ul>
</div>
<div class="hidden" id="item1">
<ul>
<li>Smthn</li>
<li>Smthn2</li>
<li>Smthn3</li>
</ul>
</div>
<div class="hidden" id="item2">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>...</li>
</ul>
</div>
$(document).ready(function() {
$('.toggler').click(function(e) {
$("#"+$(this).attr("data-item")).slideToggle(500);
});
});
JSFIDDLE
I have a div that I wish to hide using jQuery, only if I'm in a certain category, so I want to base the hiding of the div based on my breadcrumbs. I think I have the jQuery right, but it isn't hiding the div?
<div class="breadcrumbs">
<ul class="nav">
<li>Home</li>
<li>Tshirts</li>
<li>Mens</li>
</ul>
</div>
<div class="hide-me">I want to hide</div>
<script type="text/javascript">
jQuery(window).ready(function(){
if(jQuery('.breadcrumbs ul.nav li:nth-child(2)').text() == "Tshirts"){
jQuery('.hide-me').hide();
}
});
</script>
jQuery('.breadcrumbs ul.nav li:nth-child(2)').text()
Is strange, why are you hardcoding this so much? You're specifically asking for that list, and only if it is within a very specific tree.
It would be easier if you just changed your HTML
<div class="breadcrumbs">
<ul class="nav">
<li>Home</li>
<li id="secondlist">Tshirts</li>
<li>Mens</li>
</ul>
</div>
and then
$("#secondlist").text() == "Tshirts";
Check if
$('.breadcrumbs ul.nav li:nth-child(2)').text()
is really getting the value, I think that is the principal problem.
I'm trying to create a "Slider" wich change the image when hovering over an li element. If you click on the link beneath you can see what i mean.
http://www.ing.nl/particulier/
<div id="infobyimage">
<div class="nav-blocks">
<ul class="nav">
<li> Geschilderd huis</li>
<li> Steiger</li>
<li> Houtrot pillen</li>
</ul>
</div>
<div class="slider">
<ul>
<li><img src="images/DSC00742-slide.png" alt="Geschilderd huis"/></li>
<li><img src="images/DSC00752-slide.png" alt="Geschilderd huis"/></li>
</ul>
In the HTML above you can see that i'm trying to achieve the same as on the link. Can someone please explane how to do this with jquery or just CSS?
Thanks.
You need to do a .hover(function(){//content}); on the element that you want to change for example if you wanted a function for hovering over one element you would do:
$('.element').hover(function(){
$('.another_element').fadeOut(100);
});
This function says that when you hover over a div that has a class of element, it make another div that has a class of another-element .fadeOut() at 100 milliseconds and make the opacity of another-element 0. For this snippet of JQuery to work though you need to add an ajax file
Maybe this will help you Demo
I change the img attribute when I hover particular li i.e.
$("ul li:nth-child(1)").hover(
function () {
$('#changeImage').attr('src','source');
});
I have the following problem: I have an outer div and inner div that i need to change to match dynamically the sizing of my device properties. as you can see I have a click function that pulls the width and height in the title, but need to apply the sizing to the inner div, outer div and iframe at the same time as well as update the background image to match. I have tried some onclick functions for divs but no luck... The Fiddle has the CSS for the basic default view, just need to figure out how to apply on select or click of my select.
http://jsfiddle.net/jZJc3/
`<ul class="nav nav-pills left">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="device">Device</a>
<ul class="dropdown-menu" id="devices">
<li data-deviceid=1>iPad 768x1024h</li>
<li data-deviceid=2>iPhone 5 320x568h</li>
<li data-deviceid=3>iPhone 3-4 320x480h</li>
<li data-deviceid=4>Tablet 600x1024h</li>
</ul>
</li>
</ul>
<div id="iphone"><div id="mobilecontent" class="mobilecontent">
<iframe id="ui_frame" src="http://voicefusion.com/iframe.htm" style="width:320px; height:480px;" class="mobilecontent" frameborder="0"></iframe>
</div>
</div>`
http://jsfiddle.net/W37nF/1/
Using hide class in CSS I was able to do what I needed....
$('select').on('change', function(){
var val = $(this).val();
$('div').hide();
$('.' + val).css('display','block'); }).change();
I have the following HTML:
<ul>
<li class="one">one</li>
<li class="two">two</li>
<li class="three">three</li>
</ul>
<div class="one">
Here's div one
</div>
<div class="two">
Here's div two
</div>
<div class="three">
Here's div three
</div>
<div class="one">
Here's another div one, just for kicks
</div>
Here's what I want to do: when you click on the li class="one", I want to add an "active" class to all divs with class="one". Then when you click on li class="two", it removes the "active" from the first div and puts it on div class="two". I've played around with a few different ways of doing this, but I'm having trouble coming up with an efficient way to do it for all lis and divs (there will eventually be 10 of them).
$('ul a').on('click',function(){
$('.active').removeClass('active');
$('div.'+$(this).text()).addClass('active');
});
Demo: http://jsfiddle.net/9RLa9/
Alternatively, if you want to use the parent class instead of the text of the link to trigger your changes:
$('ul li').on('click',function(){
$('.active').removeClass('active');
$('div.'+$(this).attr('class')).addClass('active');
});