I have a navigation bar that grows in width when it is hovered over.
Here's an example:
http://jsfiddle.net/Gsj27/822/
Now, if for example I have a home button in the area that the hover effect applies to, when it is clicked and the home page is loaded the result is as follows:
The page is loaded with the navigation area in default size (small width), and after an instance it increases in width, as per the hover effect, when the hover effect "kicks in".
The Question
How to make the page load with the hover effect keeping its state right before a hyperlink is clicked? So in my example, if the home button is clicked then load home page with the hover effect already active (since home button is on navbar area so hover effect will necessarily be on). But if a hyperlink elsewhere (e.g. gray area in my example) is clicked then load page with hover effect off.
I think this can be achieved using js toggleClass? Something like
$(document).ready(function(){
if(/* hover effect was on */) {
$('nav').toggleClass('hovered');
}
})
You can save status in url:
<a href="?active=true">
if(window.location.href.indexOf('active=true') > 0) {
$('.nav').addClass('hovered');
}
Code: http://jsfiddle.net/Gsj27/824/
Demo: http://fiddle.jshell.net/Gsj27/824/show/
You can also use hash(#) to save status.
Related
I have a Scrollspy nav sidebar generated by the contents of the main page. Scrollspy is working fine when I click any of the navigation links, and the nav is correctly updating the links as Active while scrolling through the document.
Because my sidebar is so large, I've set the max height of the column to the viewports' height. I'm trying to keep the Active Scrollspy link centered in the sidebar column using the activate.bs.scrollspy event.
$(window).on('activate.bs.scrollspy', function(event){
var $scrollSpyNavWrap = $scrollspyNav.children("div:first");
var $scrollSpyNavActiveLink = $scrollspyNav.find(".active:first");
$scrollSpyNavWrap.scrollTop($scrollSpyNavWrap.scrollTop() + $scrollSpyNavActiveLink.position().top - $scrollSpyNavWrap.height()/2 + $scrollSpyNavActiveLink.height()/2);
});
Adding the code above works when scrolling through the page. The links are correctly updating with the Active class, and the sidebar is keeping the Active link in the center of the sidebar nav.
However, this code blocks the Scrollspy from working correctly when clicking any of the links in the sidebar. If one is clicked, the page starts to scroll, the moment the next section is reached the activate.bs.scrollspy is triggered again and stops the animation. So at most I can go up or down one section.
I searched through the activate.bs.scrollspy event and cannot find anything to check to see if it was a click event versus a scroll event.
I'm making a website where I have a navbar on top, and when I hover my mouse over 1 of the nav-items, a sub-nav drops down, but now I have a javascript / ajax function on my nav-item when I click the nav-item, it shows another html page in my subnav, like this:
Home
Is it possible to get the function in the 'href' part also work when I only hover the link? So when I hover a nav-item, the sub-nav with the included html subnav drops down.
In html5 you can attach another javascript to mouseover event:
Home
Note: remove javascript word now, because this argument itself is a javascript function. You add only javascript to events, basically. href is different, it is an address in normal case.
I try to alter the background image for every Joomla menu page I got (example.com/joomla/index.php/page1, .../index.php/page2, and so on.
So I created this jQuery function that changes the bg image on click of a menu button.
$('#page1').on('click', function() {
$('#background').css('background-image','url(http://example.com/joomla/templates/template/images/page1.jpg)'); })
The background actually changes for a second, but as soon page1 finished loading, the standard (page0) bg is shown.
I want to revert back to the initially active tab when the user moves the mouse away from the menu.
I have a left top-level menu that changes the active tab on hover, using data-options="is_hover:true"
When hovering over any of the tabs, it displays the second-level menu in place of the main content (which is displayed in a tab, which is displayed by default on page load).
I want the default content tab to display whenever the mouse leaves the 1st or 2nd level menu area.
Alternatively, I can make other elements detect the mouse hover and use JS to command the initial tag to be active. However I cannot find any documentation on what the JS should say, eg:
$( ".detect" ).hover(function() {
$( SET TAB1 TO ACTIVE PLEASE
});
In the end what I did was put the default content out of the tab an into its own div (where the tabs would go).
I then made none of the tabs active by default in CSS.
Then I used JS to deactivate any active tabs on hover of any element with class "detect":
$( ".detect" ).hover(function() {
$(".content.active").removeClass( "active" );
$("li.active").removeClass( "active" );
});
I'm making a simple slide down mobile menu, and I want it to move the whole site down 275px so it can have room for the mobile menu. Make your browser width small, until you can see the list icon at the top right. Then, click it. You'll notice the whole site (everything in the globe class) is moved down 275 pixels via -webkit-animation (Im a jquery noob). You should also notice the ease of the animation; in contrast to the abrupt movement when you press it again. If you keep toggling the icon you'll see the difference. I want the globe class to toggle that css animation some how; so when you toggle the icon, it will gingerly transition from 275px to 0px.
$("#mobile").click(function () { // when icon is clicked, do the following:
$("#m-nav").slideToggle(300); // side down the navigation
$("#globe").toggleClass("translation"); // slide down the whole site 275px
});
Here is the fiddle:: http://jsfiddle.net/7V5W5/3/
You don't have reverse animation added in code: http://jsfiddle.net/7V5W5/13/
$("#mobile").click(function () {
$("#m-nav").slideToggle(300);
if ($('#globe').hasClass('translation')) {
$("#globe").removeClass("translation").addClass("translation-reverse");
} else {
$("#globe").removeClass("translation-reverse").addClass("translation");
}
});