Develop Reference

Is it possible to place bootstrap button and dropdown in different place?

<div class="dropdown" style="position:fixed">
<span class="icon dropdown-toggle" data-toggle="dropdown"></span>
</div>
<ul class="dropdown-menu" style="position:abosolute">
<li id="1"></li>
<li id="2"></li>
</ul>
I need to do something like this. That is icon in one div(fixed) and ul outside the div(absolute position) to make scrollable in page ? If I give within the same div both taking fixed position and dropdown becomes un-scrollable This is not working. How can I achieve this ?

I think the only way to get this working is by creating a Button linked with your Dropdown menu. Almost like in this Bootstrap Example.

Navbar dropdown list auto open and auto close?

I added a dropdown list to the navbar on another site and added the class .open to the list. My intention is as follows: upon load the webpage navbar list contains an img element and opens displaying a promotional offer. So far so good, the page loads and the list drops displaying the ad, and if clicked it then closes.
Ok what I am aiming for is adding a function via jquery or JavaScript or css which will automatically CLOSE the dropdown list after about 5 seconds. I have read that the .open class in bootstraps.min.css is not cleared by default and therefore will remain open unless it is 'clicked' to close it.
<div class="navbar-responsive">
<ul class="nav navbar-nav">
<li class="active">
<li class="open dropdown-menu">
<a href="#" Id="test" class="dropdown-toggle" data- toggle="dropdown"><strong class="caret">
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li>
<img src="image folder/my_ad_image.png"
</li>
</ul>
</li>
</li>
</ul>
</div><!---end nav collapse--->
</div><!---end container--->
</div>>!---end main navbar--->
This above is what I have written. It rests atop an already existing navbar.
Thanks for reading.
If anyone has any suggestion or could point me in the right direction with respect to tying a jquery timeout function to my .open class or id that would be great. So far I have been unable to tie a jquery function or css to my dropdown list
Thanks.

You can use setTimeout() to implement timers in javascript.
The setTimeout() method calls a function or evaluates an expression
after a specified number of milliseconds.
Adapting your code it can be implemented like this:
CSS:
...
<li id="myid" class="open dropdown-menu">
<strong class="caret"></strong>
<ul class="dropdown-menu">
<li>
Click to close.
</li>
<li> ... </li>
</ul>
</li>
...
jScript (assuming you're using jQuery):
$(function() {
setTimeout(function() {
$("#myid").removeClass("open")
}, 5000);
});

change parents div height on childs element height

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>

Click element up the dom with jQuery

I have a menu and I want an element with a class of active, parent element's sibling element to be clicked automatically on page load.
Here is my HTML:
<li class="level1">
<span class="level1 drop-down clicked">Oranges</span>
<ul class="level2" style="display: block;">
<li class="level2">Peel</li>
<li class="level2">Pips</li>
<li class="level2 active">Pegs</li>
</ul>
</li>
I've tried
jQuery('li.level2.active').parent('li.level1').children('span.level1.drop-down').click();
but it does not work. I'm not sure if I'm using the parent & children method's properly.
Although, jQuery("span.drop-down.level1").click(); does work, but it selects all the elements with that class which I would like to avoid.

Try this:
jQuery('li.active').closest('li.level1').find('span.level1.drop-down').trigger('click');

Because the li.level1 is two steps up, you need .parents(), which selects up multiple levels, instead of .parent(), which is only one.
jQuery('li.level2.active').parents('li.level1').children('span.level1.drop-down').click();
^^^^

Hide divs when showing another - jQuery toggle

I'll start with my JSFiddle example:
http://jsfiddle.net/CR5FB/5/
Basically I'm trying to get the same effect as shown on this post (JSFiddle here), however I'm having some trouble implementing it - being as I want to check for multiple div's toggle status rather than simply switching in between two divs. I have tried using the following:
$("#showcreate").click(function() {
if ($(".searchmenu").is(":visible")) {
$(".createmenu").toggle("fast");
$(".searchmenu").toggle("fast");
} else {
$(".createmenu").toggle("fast");
});
(So if the search menu is open, close it and open the create menu but if it's not open, just open the create menu).
I'm not sure if the :visible function applies if I've used $("div").hide() rather than display:none in the css?
Any help on this will be massively appreciated - even a suggestion for another suitable method such as possible jquery accordion etc.?
Thanks alot

Try this please:
HTML:
<div class="actionsmenu" id="actionsmenu">
<div id="navmenu">
<ul id="navmenu">
<li><a href='#' class="tog" data-id="createmenu" id='showcreate'>Create</a></li>
<li><a href='#' class="tog" data-id="searchmenu" id='showsearch'>Search</a></li>
<li><a href='#' class="tog" data-id="settingsmenu" id='showsettings'>Settings</a></li>
<li><a href='#' class="tog" data-id="helpmenu" id='showhelp'>Help</a></li>
<ul>
</div>
</div>
<div class="menu createmenu" id="createmenu">Menu 1</div>
<div class="menu searchmenu" id="searchmenu">Menu 2</div>
<div class="menu settingsmenu" id="settingsmenu">Menu 3</div>
<div class="menu helpmenu" id="helpmenu">
JS:
$(document).ready(function () {
$(".menu").hide();
$(".tog").click(function () {
$(".menu").hide();
$("." + $(this).data('id')).toggle("fast");
});
});
FIDDLE:
http://jsfiddle.net/CR5FB/14/
EDIT:
You have to use some common class for your links and divs if you want to assign them to the same event.
There is you can find better solution as for me: http://jsfiddle.net/CR5FB/19/

Here is a JS fiddle: http://jsfiddle.net/7nGYE/
What you need to do is keep track of the active menu with a CSS class, so when another menu is clicked, you toggle the active menu, remove it as active, then set the new menu as the active div.
In particular, on any menu item click:
$('ul#navmenu a').click(function() {
$('div.active').removeClass('active').toggle('fast');
});
Hide the active menu. Then, on a particular menu item click:
$("#showcreate").click(function () {
$(".createmenu").toggle("fast").addClass('active');
});
add the 'active' CSS class to keep track of it.