I have a dropdown menu:
<div class="buttons">
<div class="dropdown">
<span class="label">File</span><span class="toggle"></span>
<div class="dropdown-slider">
<span class="label">New</span>
<span class="label">Save</span>
</div> <!-- /.dropdown-slider -->
</div> <!-- /.dropdown -->
</div>
And here is js code:
<script>
$(document).ready(function() {
// Toggle the dropdown menu's
$(".dropdown .button, .dropdown button").click(function () {
$(this).parent().find('.dropdown-slider').slideToggle('fast');
$(this).find('span.toggle').toggleClass('active');
return false;
});
});
// Close open dropdown slider by clicking elsewhwere on page
$(document).bind('click', function (e) {
if (e.target.id != $('.dropdown').attr('class')) {
$('.dropdown-slider').slideUp();
$('span.toggle').removeClass('active');
}
});
</script>
If I put the two menus (one above other) I'll get popup menu below the second menu line.
How can I fix it?
Adding z-index:999; to div.dropdown-slider should fix your problem pretty quickly.
Related
I'm trying to have a button in my navbar that will make my sidebar come out when it's clicked.
I've already created the sidebar and its functional, but I want to link the sidebar to a button that is in the navigation menu.
You can Toggle the sidebar element on the navbar button click
For example, this is your navbar
<nav>
<button id="main"> Side</button>
</nav>
And this is your Sidebar
<div id="sidebar" style="display:none;">
</div>
The JS code
<script type="text/javascript">
$(document).ready(function () {
$("#main").click(function () {
$("#sidebar").toggle();
});
});
</script>
I´m using bootstrap3 and I´m trying to create a fixed menu for mobile devices. This menu can have submenu´s and submenu´s can have a lot of content in it. So when you watch the site on mobile phone´s (320x480 eg) and the menu is very long then you can´t scroll in the inner/submenu. In other words if your screen height is too short you can´t see all the menu items because the menu bar is sticked at the top of the screen.
I´ve read a lot of post from github and here + Bootstrap's page, but can´t seem to get it to work. I think that position fixed is the problem?!
I'll try to explain with a fiddle and here below
EDIT: You can view an example here -> example (resize browser and try to hit brands)
HTML
<div id="main-nav-container">
<div class="container">
<div class="row">
<div class="col-md-12 clearfix">
<nav id="main-nav">
<div id="responsive-nav">
<div id="responsive-nav-button">
Menu <span id="responsive-nav-button-icon"></span>
</div><!-- responsive-nav-button -->
<ul class="clearfix responsive-nav">
<li><i class="fa fa-home"></i></li>
<li><span class="menu-button"></span><a title="Camera" href="http://www.webshop.com/nl/camera/">Camera</a>
<ul>
<li><a title="Canon" href="http://www.webshop.com/nl/camera/canon/">Canon</a></li>
<li> like 40 li items more for example </li>
</ul>
</li>
etc...
JQUERY
$(function() {
var sticky_navigation_offset_top = $('#main-nav-container').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#main-nav-container').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#main-nav-container').css({ 'position': 'relative' });
}
};
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
So how can I make the menu so that the with the li items is scrollable so that on smaller screens the whole submenu can be viewed?
I'm migrating to bootstrap 3.0.0 and I'm having issues with an affixed menu to the left: as soon as it becomes affixed (after 10px scroll), its width changes. In this fiddle it gets smaller, in my real site it gets wider and expands on the actual content.
It worked perfectly with bootstrap v2.3.2. After checking it looks like the list items don't play well with the .affix {position: fixed;} that appears.
Any ideas?
SOLUTION: based on the latest comments I have finally added this JS piece which fixes it nicely without having to set a fixed width to the affixed element:
$(function() {
var $affixElement = $('div[data-spy="affix"]');
$affixElement.width($affixElement.parent().width());
});
I had the same problem and fixed with this:
$(window).resize(function () {
$('#category-nav.affix').width($('#content').width());
});
basically in an event of resize I calculate the content div's width and set the width of affixed element to that.
$(window).scroll(function () {
$('#secondary .widget-area.affix').width($('#secondary').width());
});
Here's another version:
$('.sitebar .affix-top').width($('.sitebar .affix-top').width());
$(window).resize(function () {
$('.sitebar .affix').width($('.sitebar .affix-top').width());
});
$(window).scroll(function () {
$('.sitebar .affix').width($('.sitebar .affix-top').width());
});
Here's my version.
var fixAffixWidth = function() {
$('[data-spy="affix"]').each(function() {
$(this).width( $(this).parent().width() );
});
}
fixAffixWidth();
$(window).resize(fixAffixWidth);
CSS
div.affix {
position: fixed !important;
}
had the same problem once (only in BS 2.3.2).
Not an answer, more a hack: I gave the affixed element a width. That sucked, because i had to set width for all resolutions (RWD) and actually the value should be standard column width (e.g. .span4).
Yes: position: fixed takes the element out of the given context (in your case col-md-3).
I use this code to fix the width of the affix.
$(document).on('affixed.bs.affix',function(e){
$('.affix').each(function(){
var elem = $(this);
var parentPanel = $(elem).parent();
var resizeFn = function () {
var parentAffixWidth = $(parentPanel).width();
elem.width(parentAffixWidth);
};
resizeFn();
//$(window).resize(resizeFn);
});
});
The affix get the width of his parent and check that width on every scroll the web. Uncommenting the last line, execute too on resize window event.
I used $('.affix-element').width($('.affix-element-parent').width()).affix()
Works well :)
My solution as well:
$('.menu-card').affix();
$(document).on('affix.bs.affix', '.menu-card', function() {
$(this).width($(this).width());
});
(.menu-card is my sticky div)
I added this for supporting the window resizing:
Let's assume the affix are in a parent div #menu-card-pane.
$(window).resize(function () {
var parentSize = $('#menu-card-pane').width();
$('.affix').each(function() {
var affixPadding = $(this).innerWidth() - $(this).width();
$(this).width(parentSize - affixPadding);
});
});
Here is my HTML
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#committees-navbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Committees</span>
</div>
<div id="committees-navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav nav-stacked" data-spy="affix" data-offset-top="250">
<li class="col-xs-12"><a ng-click="scrollTo('boardCommittee')">BOARD OF DIRECTORS</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('madrasaCommittee')">MADRASATUL JAMALIYAH</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('shababCommittee')">SHABAB</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('bwaCommittee')">BURHANI WOMEN</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('tncCommittee')">TAISEER UN NIKAH</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('fmbCommittee')">FAIZUL MAWAIDUL BURHANIYAH</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('websiteCommittee')">WEBSITE</a></li>
<li class="col-xs-12"><a ng-click="scrollTo('tadfeenCommittee')">TADFEEN</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
And this is my JS fix
$(function () {
var resize = function () {
var sidebarNav = $(".sidebar-nav");
var sidebarNavAffix = $(".sidebar-nav .affix");
if (sidebarNavAffix.length && (sidebarNavAffix.width() !== sidebarNav.width())) {
sidebarNavAffix.width(sidebarNav.width());
}
}
$(window).on({"scroll" : resize, "resize" : resize});
});
I am developing a task in using phonegap and jquerymobile.
How should i do to change the color of a clickable item when i click on them?
I have written the code below:
$(".testbutton").click(function(){
$(".testbutton").css("background-color","yellow");
});
But the background color will only change yellow after i release my mouse on it. I wan it to change to yellow whenever my mouse is clicked on tat item, and recover to its original background color when i release the mouse.
Can anyone please help?
Is this what you're trying to accomplish?
Live Example:
http://jsfiddle.net/A2bd3/16/
CSS:
.task-bg-color {
background-color: yellow;
}
JS:
$('#clickAndHold').mousedown(function() {
$(this).children().addClass('task-bg-color');
$('ul#tasks').listview('refresh');
});
$('#clickAndHold').mouseup(function() {
$(this).children().removeClass('task-bg-color');
$('ul#tasks').listview('refresh');
});
$('#clickAndStick').click(function() {
$(this).children().addClass('task-bg-color');
$('ul#tasks').listview('refresh');
});
$('#clickAndToggle').click(function() {
if ($(this).children().hasClass('task-bg-color')) {
$(this).children().removeClass('task-bg-color');
} else {
$(this).children().addClass('task-bg-color');
}
$('ul#tasks').listview('refresh');
});
HTML:
<div data-role="page" class="type-home">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f" id="tasks">
<li data-role="list-divider">Tasks (Background actions)</li>
<li id="clickAndHold">Click & Hold</li>
<li id="clickAndStick">Click & Stick</li>
<li id="clickAndToggle">Click & Toggle</li>
</ul>
</div>
</div>
I'm using several WordPress loops and jQuery UI Tabs that result in the Main tabs and entry-content div markup below. The WordPress loops generate the "entry-post" markup in each tab div, but I'm not showing the php, as the resulting html markup in each tab div is the important part.
I'm also using a bit of jQuery to independently expand/collapse each entry-content div:
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
What I've found is that each of the entry-content divs keeps their expanded state when switching tabs, i.e. if some of the entry-content divs are expanded in tabone and I switch to tabtwo and then back to tabone, they're still expanded in tabone.
What I need to do is collapse all the entry-content divs in a tab when a tab is changed. Below is the tab init and also the fx to change the tabs.
What do I need to add to this function to collapse all the entry-content divs when a tab is changed?
$(document).ready(function(){
var $tabs= $("#tabs").tabs();
});
$(function() {
$('#tabs').tabs({
fx: { opacity:'toggle' }
});
});
Main tabs and entry-content div markup:
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabone">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabtwo">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabthree">
....
</div></div>
The following code should collapse all .entry-content divs whenever a new tab is selected:
$(document).ready(function() {
var $tabs= $("#tabs").tabs({
fx : {
opacity: 'toggle'
},
select : function(event, ui) {
$(".entry-content").hide();
}
});
});
$("div.post [name^="entry-title"]").hide();
should do what you're wanting when attached next to your fx.
or:
$("#tabs a").click(function () {
$("div.post [name^="entry-title"]").hide();
});
I'm not sure i understand you're question completely. But if you wan't to check whether the tab is triggered or not, try use this:
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
Simplified how you could collapse all divs with class "entry-post", whenever the tab is showed:
$(document).ready(function(){
var $tabs = $("#tabs").tabs({
show: function(){
$('.entry-post').hide();
}
});
});
I'm not a jQuery expert, so here's straight javascript. Might at least help solve the problem...
Since you don't care what tab a div is on (since all divs should be hidden when a tab is changed) you could simply hide all divs on the page every time a tab is changed, regardless of what tab it's on.
var divList = document.getElementsByClassName("entry-content");
for(var divitem in divList){
divitem.style.display = "none";
}
I wish my jQuery was stronger so I could give it in that, but it may help...
Edit:
Just looking at what your example code, I guess something like this in jQuery:
$("#tabs a").click(function() { $(".entry-content").hide(); });
Something that closes all entry-content class divs when any tab is clicked.
You may want to make use of the existing jquery UI tabs library and this will solve a lot of your problems.
http://jqueryui.com/demos/tabs/
Using this will allow you to make a better association between your list items and the divs they are controlling. Add the reference in your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
or download it and remove what you don't need. Add the following to your CSS
.ui-tabs .ui-tabs-hide {
display: none !important;
}
and change your references so they are in keeping with the jqueryUI specification
<div id="tabs">
<ul>
<li>tabone</li>
and then the div ids to match
<div id="tabs-1">
<div class="entry-post">
this should make the association. You can then add the controlling behaviour so it should read
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
and that will do away with the need to store the array of divs
you can then bind a function to the tabselect event which will hide the divs you want to collapse
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
your code should then read:
<head>
<title>Collapse Divs</title>
<style type="text/css">
.ui-tabs .ui-tabs-hide {
display: none !important;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500);
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabs-1">
<div class="entry-post">
...
<h1 class="entry-title">Title 3.3</h1>
<div class="entry-content">Lorem ipsum...</div>
</div>
</div>
</body>