I have setup a responsive menu that on 480px or less the menu will collapse and show a button to click on and cause the menu to drop down. The problem I am having is, the menu will toggle down and immediately toggle back up. It won't stay open. I added a css to the js handler class called .nav-expanded to run after the toggle to allow the full menu to be displayed when opening up the screen to a larger dimension that 480px. If I remove the css from my stylesheet, or the code from the js, when I shrink the page to 480px or less, the new menu shows correctly, I can toggle open then close. However once I toggle close and widen my browser the menu remain hidden unless I refresh the browser.
The page is here http://skeeterz71.com/gothic/
My js code:
jQuery(document).ready(function(){
jQuery(".menu-trigger").click(function(){
jQuery("#first-nav").slideToggle(400, function(){
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
CSS in the stylesheet media query
.nav-expanded{
display:block;
}
You can add this css in your jQuery code:
jQuery(this).toggleClass("nav-expanded").css('display', 'block');
CSS for .nav-expanded is not getting applied since #first-nav styles are overriding it.
To give .nav-expanded the higher specificity add the following
#first-nav.nav-expanded {
display: block;
}
Related
I want to have a menu that is toggable in small screen sizes and always visible on medium sizes upwards.
The behavior should be (basically) exactly like this demo here.
The steps are:
Go to a small screen size (til the body outline is gold)
Check that it's toggable
When the menu is hidden and you get a bigger screen size, the menu should appear
When the menu is not hidden, go to a bigger screen size and it should remain shown
When on a big screen size, and element was hidden, you should see it but when you drag to a smaller size, it should get hidden
When on a big screen size, and element was NOT hidden, you should see it but when you drag to a smaller size, it should get hidden
To achieve this is very easy with:
$(".click").click(function() {
$(".menu").toggleClass("hidden-md-down");
});
My problem now is that I want to animate this show and hide and I can't do it with the class toggle.
So I have to rely on for example slideToggle() and here is where my problem lies, see demo here.
If you now go to a small screen size, hide the menu and make the window size bigger, the menu won't appear because of the hide() function.
I know this could be solve with a $(window).resize but I definitely don't want that solution since it's terrible for performance for such a small feature.
So how can I either have this toggle class with an animation or do it with js without the resize method?
I've put my comment into an answer instead: "For best performance wire your window size check to only the end of the browser resize, not to every stage."
This code works and it only runs .5 sec after the end of the window resize event rather than during (better performance). Run the code full page and squeeze your browser window to see it in action.
Instead of sending the text values #width and #height you can elect to run your menu toggle or deactivate it; I'd do this by removing the js class you're using to activate the menu initially.
And make your menu an unordered list and set it to be inline on desktop and an unbulleted list on mobile using css.
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
var widthReport = $("#width").text($(this).width());
var heightReport = $("#height").text($(this).height());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="width"></div>
<div id="height"></div>
I have this JSFiddle which includes a Bootstrap Accordion embedded inside another Accordion, the issue is that the Chevron to the right does not now behave as expected.
As you can see by the code below, the chevron changes direction when collapse is triggered, however, now it is in an embedded accordion this doesn't appear to be the solution.
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
I usually prefer to do this with CSS - less messy than trying to detect which item opened/closed when you are nesting, or have multiple on a page.
1) Add the class 'collapsed' to your accordion headings if they are closed by default (bootstrap toggles this class, but if you don't have it present when the page loads, it doesn't get added until you open and then close an accordion item).
2) Get rid of the JS and add this CSS:
.panel-heading.collapsed .glyphicon-chevron-down {
transform:rotateX(0deg);
}
.panel-heading .glyphicon-chevron-down {
transition:transform .5s;
transform:rotateX(180deg);
}
If you don't like the flip animation, just get rid of the transition rule, but I like to think it adds a little something.
http://jsfiddle.net/rr7oggLv/6/
I'm currently making an addon for a site, but I stumbled upon a problem:
my addon needs to simulate clicking a div, but the div only appears if you're hovering over another div. I tried
$("#id-1").trigger("mouseover");
$("#id-2").click();
but it doesn't really work because the box instantly dissapears again.
is there any way I can do this?
thanks in advance!
edit: $("#id-2") isn't just made invisible, its no longer there in the elements, they're using some code to delete it and put it back in place when you hover over $("#id-1")
If you have access to the CSS file you can use a hover class to do this, assuming they are siblings (could be modified to work with parent-child relationship) and and that they use display:block and display:hidden to hide/show the hidden element
/* CSS */
elemOne:hover ~ div, .hover ~ div { display:block; } // Applies on hover or if
// hover class
/* jQuery */
$('elemOne').addClass('hover'); // Initialize the hover state
$('elemTwo').trigger('click'); // Click the now-showing element
$('elemOne').removeClass('hover'); // Remove the hover state
Demo
I have created a jQuery UI navigation menu, using the menubar widget. It works how I expected except I would like it to behave slightly differently. As you can see here http://jsfiddle.net/hcharge/DebVr/ the submenu expands out and is positioned relative to the link that was clicked.
I would like it to expand out and stick to the left of the navigation bar, no matter which link was clicked, the submenu will always stay the same width. Like this image...
I've tried setting a position relative to the container and absolutely positioning the submenu, however I think that jQuery UI positioning is overriding this. Any advice would be great, cheers.
Edit: this needs to be done with JS as it has to be clicks and not hover actions that trigger the dropdowns
Why don't you do it all only with CSS?
See http://jsfiddle.net/DebVr/8/
Note: the background is blue in order to see the white borders.
Edit:
If you want some functionality, you can add it later, but I think that the basis should be with CSS.
See my code with some functionality here: http://jsfiddle.net/DebVr/11/
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabindex=index+1;
});
$('#bar1>li>a').focus(
function(){$(this).siblings('ul').show();}
);
$('#bar1>li>a').blur(
function(){$('#bar1>li>ul').hide();}
);
Edit 2:
If you want to hide again the submenu when clicked, use the following code:
var links=$('#bar1>li>a').each(function(index,obj) {
obj.tabIndex=index+1;
});
$('#bar1>li>a').focus(function(){
$(this).siblings('ul').addClass('show');
});
$('#bar1>li>a').mousedown(function(){
$(this).siblings('ul').toggleClass('show');
});
$('#bar1>li>a').blur(function(){
$(this).siblings('ul').removeClass('show');
});
And CSS:
#bar1>li>ul.show{
display:block;
}
See it here: http://jsfiddle.net/DebVr/16/
Edit 3:
In the code above, I replaced obj.tabindex with obj.tabIndex, and updated the jsfiddle.
The problem is that if you click on the submenu, the anchor loses focus and then the submenu dissapears. On Chrome it can be easily fixed setting the focus event to #bar1>li instead of #bar1>li>a, but then the event doesn't work on firefox... I'm working on a solution, but meanwhile you can use http://jsfiddle.net/DebVr/16/.
Edit 4:
Finally, the fixed code: http://jsfiddle.net/DebVr/18/
It works on Chrome, Firefox and IE.
I am trying to implement a javascript toggle effect for my "small" or mobile sized version of a responsive site. I am using my own custom WordPress theme.
I'm trying to use the script from this article: http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-1
The tricky part is that I'm trying to include several divs, not just a single nav. If you look at the site now (which is still under construction), at:
http://66.147.244.81/~assureva/
and reduce your browser window to narrower than 540px, you'll see that I've managed to get my top navbar (smallnav), 2 "login" links, and facebook and LinkedIn icons, all to disappear, and re-appear when pressing the "main menu" button that now appears at the top, to the right of the logo. But I can't seem to add in the last part, which is the 4 links that comprise the main "nav". I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div, but the "smallnav", "logins" and "socialcons" divs all combine as desired in the "mobimenubg" div.
If I go ahead and set the "navbar" div to "display:none" it will disappear but it won't re-appear when I click the "main menu" button.
So I think the answer to ask the javascript to include the "mobimenubg" div AND the "navbar" div (the "navbar div is a container that includes the actual "nav") but I don't know how to write it properly.
Here's the javascript:
<script type="text/javascript">
jQuery(document).ready(function($)
{/* prepend menu icon */
$('#mobimenuwrap').prepend('<div id="menu-icon">Main Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$("#mobimenubg").slideToggle();
$(this).toggleClass("active");
});
});
</script>
Can someone tell me how add the navbar div? Do I add another line after:
$("#mobimenubg").slideToggle();
or can I include it in the parens:
$("#mobimenubg" IN HERE?).slideToggle();
I don't know the conventions -
Help greatly appreciated!!
I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div,
You actually have the right code, but your HTML structure is off. The navbar div is not contained within the mobimenubg div, and that is the problem. Just make sure to nest navbar there, or otherwise I think you can also call the function on the navbar like:
$("#navbar").slideToggle();