I have this simple page, navigation isn't working on Firefox or IE, only works on chrome.
I think it have to do with this as when i changed it, it stopped working on Firefox & IE:
// makes the navigation work after all containers have bee hidden
showViaLink($("aside button#navigation a"));
it was originally like that:
// makes the navigation work after all containers have bee hidden
showViaLink($("ul#navigation li a"));
However, I don't want to use ul li, Am i selecting it wrong?
Use this:
<aside id="side">
<div class="navigation">Home </div>
<div class="navigation"> About </div>
<div class="navigation"> Contact </div>
<div class="navigation"> Awards </div>
<div class="navigation"> Links </div>
</aside>
and alter this:
showViaLink($("aside .navigation a"));
In your old code you cant reach the lik, because you always push the button and so you never triggered $(this).click(function()
you just have to add some css and style your own buttons. This generator may be helpfull.
EDIT:
If you want to use die Buttons maybe this works:
<aside id="side">
<div class="navigation" id="#home">Home </div>
<div class="navigation" id="#about"> About </div>
<div class="navigation" id="#contact"> Contact </div>
<div class="navigation" id="#awards"> Awards </div>
<div class="navigation" id="#links"> Links </div>
</aside>
jQuery:
showViaLink($("aside .navigation"));
// shows proper DIV depending on link 'href'
function showViaLink(array)
{
array.each(function(i)
{
$(this).click(function()
{
var target = $(this).attr("id");
$(".container").css("display","none");
$(target).slideDown("slow");
});
});
}
Related
Here's a js fiddle to demonstrate the problem.
I have a fixed position floating/popup dialog on my page that contains a series of tabs using the easytabs jQuery plugin. When the dialog appears, any tab selection causes the webpage (behind the floating dialog) to jump/scroll to a different position on the page.
I've read in other places that forcing the click behavior of the anchor tags in the tab structure to prevent the default behavior will correct this issue, but it doesn't seem to be working for me e.g. assigning a class such as .prevent-default to each tab anchor element and doing:
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
Here's some html:
<h1>Top</h1><button onclick="showTabDialog();">Tabs</button>
<p id="spacer"></p>
<h1>Bottom</h1>
<div id="dialog" class="floating-dialog">
<div id="tabs" class="tab-container">
<ul class="tabs">
<li class="tab">
First
</li>
<li class="tab">
Second
</li>
</ul>
<div id="content-container">
<div id="first" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
<div id="second" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
</div>
</div>
</div>
...and some js:
$(document).ready(function() {
$('#tabs').easytabs({animationSpeed: 'fast'});
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
});
function showTabDialog() {
$('#dialog').fadeIn();
}
$('#tabs').easytabs({animationSpeed: 'fast', updateHash: false});
Demo: http://jsfiddle.net/naa22prw/3/
Another way to do this is to set a minimum height on the tabs container div. `
#tab-container{
min-height: 700px;
}
This means that you can use the updateHash: true so the URL can change each time a tab is clicked.
ref. https://github.com/JangoSteve/jQuery-EasyTabs/issues/40
Script:
$( ".title").mouseenter(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).show();
}).mouseleave(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).hide();
});
Navigation:
<ul class="globalnav">
<li>
<div class="title">Home</div>
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</li>
...
The above code is what I am using right now which does not work in Chrome as intended *I need to hold my click down to view the div. I use mouseover, it does not work properly in IE and FF.
I am also having trouble showing the associated div of the title (on title hover, show specific div) due to the nature of the coding format itself (client given code). Right now, on hovering over a title, it shows the first li's content for "navlinks".
Here's a fiddle to show you
Thanks
Why are you using the index of the .title element, if the other LI's look like that, the which variable will always be 0, and it's not the way to target the right .dropdown ?
Try something more like this
$( ".title").on('mouseenter mouseleave', function(e) {
var dropdown = $(this).closest('li').find('.dropdown').toggle(e.type=='mouseenter');
$('.dropdown').not(dropdown).hide();
});
And if you want the dropdown to be visible while hovering it, place it inside the element that triggers the mouseleave
<li>
<div class="title">
Home
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</div>
</li>
FIDDLE
*EDIT: Here's a link to a staging version of the site: http://staging-site.site44.com/ *
I am extremely new to jquery so I apologize if this question is extremely simple. What I'm trying to do on my website is first when the page is loaded have the content in my #topContent div fade in.
But along with this I'd also like my main navigation to use jquery hashtags to switch up the page content displayed in the #topContent div. I've read up a bit on how to do this in jquery and from what I've read I think I need create page sections within my main html doc that are hidden until a certain nav link is selected - then hide the content that is currently showing and show the content associated with the nav link that was just selected, how close am I?
Here's my attempt so far at doing this...
HTML
<nav id="headerNav">
<ul class="navList">
<li class="navItem">Products</li>
<li id="view-about" class="navItem">About</li>
<li class="navItem">Portfolio</li>
<li class="navItem">Contact</li>
</ul>
</nav>
</div>
</div>
<!-- topMain -->
<div id="topContentWrapper">
<div id="topContent">
<div id="#products">
<h2>Test worked! - products </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="#about">
<h2>Test worked! - about </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="#portfolio">
<h2>Test worked! - Portfolio </h2>
<p>this test just worked sooo hard!</p>
</div>
</div>
</div>
JS
// Fade In Effect
$(document).ready(function() {
$("#topContent").css("display", "none");
$("#topContent").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#topContent").fadeOut(1000);
});
function redirectPage() {
window.location = linkLocation;
}
$("#view-about").click(function(event){
$("#products").fadeOut(1000);
$("#portfolio").fadeOut(1000);
$("#about").fadeIn(1000);
});
});
Ok, this code should work:
$(function(){
$last = null;
$(".navList li a").click(function(){
if ($last != null) $last.fadeOut(1000);
$last = $($(this).attr("href"));
$($(this).attr("href")).fadeIn(2000);
});
});
However, you will need to change your topContent to this:
<div id="topContent">
<div id="products" style="display: none;">
<h2>Test worked! - products </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="about" style="display: none;">
<h2>Test worked! - about </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="portfolio" style="display: none;">
<h2>Test worked! - Portfolio </h2>
<p>this test just worked sooo hard!</p>
</div>
</div>
Reasons:
Firstly, you need your ids to be like this: id="about" and not this: id="#about".
The id specified doesn't need a # in front of it. (Same as how class doesn't need a . when setting a tag with it)
The jQuery code I tested locally, so it should work.
Note:
You may want to automatically have some different content automatically displayed, because right now as it loads it is blank until you click one of the links.
Hope this helped!
Edit:
I suggest you change the code to this:
ids = [ "products", "about", "portfolio" ];
links = [ "Products", "About", "Portfolio" ];
$(function(){
$last = null;
$(".navList li a").click(function(){
New = "#" + ids[links.indexOf($(this).text())];
if ($last != null) $last.fadeOut(1000);
$last = $(New);
$(New).fadeIn(2000);
});
});
Because it will keep all the content constantly in the same place. For this to work, you'll need to change two more sections of your code:
<ul class="navList">
<li class="navItem">Products</li>
<li id="view-about" class="navItem">About</li>
<li class="navItem">Portfolio</li>
<li class="navItem">Contact</li>
</ul>
And:
<div id="topContent">
<div id="products" style="display: none; position: absolute">
<h2>Test worked! - products </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="about" style="display: none; position: absolute">
<h2>Test worked! - about </h2>
<p>this test just worked sooo hard!</p>
</div>
<div id="portfolio" style="display: none; position: absolute">
<h2>Test worked! - Portfolio </h2>
<p>this test just worked sooo hard!</p>
</div>
</div>
That last part was just my suggestion, but do whatever you need to.
Instead of doing this in your a.transition handler:
$("#topContent").fadeOut(1000);
do:
$("#topContent").children().fadeOut(1000);
The issue is that you're actually fading out the higher level item thus the children are no longer visible even if you fade them in.
I've created a simple menu setup whereby all info is on the same page - just most is hidden until that tab is selected. The filter JS I'm using works great for this but for some reason (in CHROME only), when the menu item is clicked (eg, Location, Help), the screen shoots up a few hundred pixels (displays the selected info just fine though). Strangely, this happens only when the page is refreshed and the item is clicked for the first time. After that, everything works great!
Below is the pertinent code but to see it in action, see test site
The JS I'm using for the filter is:
$(document).ready(function() {
$('#nav a').click(function() {
$('#nav a.current').removeClass('current');
$(this).addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','');
$('#content div').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).hide().addClass('hidden');
} else {
$(this).show().removeClass('hidden');
}
});
return false;
});
});
with the HTML menu and info as:
<ul id=nav>
<li>Mission</li>
<li>Location</li>
<li>Help</li>
<li>Vendors</li>
</ul>
<div id=content>
<div class=mission>
<img src="./images/roosters.jpg">
<h2>The Mission</h2>
<p>...</p>
</div>
<div class=location>
<img src="./images/old_market.jpg">
<h2>Our Location</h2>
<p>...</p>
</div>
<div class=help>
<img src="./images/helpers.jpg">
<h2>Get Involved</h2>
<p>...</p>
</div>
<div class=vendors>
<img src="./images/artisans.jpg">
<h2>Our Vendors</h2>
<p>...</p>
</div>
</div>
It's the href="#" in your anchor tags, those are pointing to the top of the page. You probably want to add a preventDefault() to your click handler. Read all about it here.
This question already has answers here:
Keep toggle state on divs using cookie.js after page refresh view jsFiddle
(2 answers)
Closed 9 years ago.
I have a simple code which allows me to toggle betwen two divs which are wraps for two sub navigations (#sub-nav-wrap is the alternative nav). They are fixed to the bottom of the browser :
$(function(){
$('.button').click(function(){
$('#sub-nav-wrapmin').toggle();
$('#sub-nav-wrap').toggle();
});
});
What I wish to do is to keep the state of each div the same as chosen by the user after page refresh and even if the clicks on a new sub-heading the menu will remain the same, rather then resorting to the default state.
The html is this:
<!--- Main Sub Wrap --->
<div id="bottom-wrap">
<!-- Mini Sub Nav -->
<div id="sub-nav-wrapmin" class="snWrap divone">
<div id="sn-contentmin">
<div id="sn-likemin"></div>
<div id="sn-coffeesml"></div>
<div id="sn-sharemin"></div>
<div id="sn-commentsml"></div>
<div id="toggle-barmin">
<div id="sn-sidebrdrmin"></div>
<div class="sn-toggle button"></div>
</div>
<ul class="sn-comicsmin menu">
<li><a class="sn-comics" style="background-position: right top" href="#comic.html">Comic</a></li>
<li><a class="sn-archive" href="#archive.html">Archive</a></li>
<li><a class="sn-vote" href="#vote.html">Vote</a></li>
<li><a class="sn-spotlight" href="#spotlight.html">Spotlight</a></li>
</ul>
</div>
</div>
<!-- Sub Nav -->
<div id="sub-nav-wrap" class="snWrap divtwo">
<div id="sub-nav-container">
<div id="sub-nav-content">
<div id="sn-bnrlft"></div>
<div id="sn-bnrrgt"></div>
<div class="sn-dividelft"></div>
<div class="sn-dividergt"></div>
<div id="sn-likebg"></div>
<div id="sn-coffeebtn">
</div>
<div id="sn-sharebtn"></div>
<div id="sn-commentbtn"></div>
<div id="toggle-bar">
<div id="sn-sidebrdr"></div>
<div class="toggle button"></div>
</div>
</div>
<div id="sub-nav-brdr">
<ul class="sub-nav-comics menu">
<li><a class="comics" style="background-position: right top" href="#comic.html">Comic</a></li>
<li><a class="archive" href="#archive.html">Archive</a></li>
<li><a class="vote" href="#vote.html">Vote</a></li>
<li><a class="spotlight" href="#spotlight.html">Spotlight</a></li>
</ul>
</div>
</div>
</div>
The CSS is this:
#sub-nav-wrap {
display: none;
}
This is my first time asking, and I have been wracking my brains to get this to work using other similar codes from this site, but nothing is working.
Please help...
you're almost done everything right only have written a lot of superfluous :)
$(function(){
if($.cookie('submin_visible') == 'true') {
$('#sub-nav-wrapmin').show();
$('#sub-nav-wrap').hide();
} else {
$('#sub-nav-wrapmin').hide();
$('#sub-nav-wrap').show();
}
$('.button').click(function(){
$('#sub-nav-wrapmin').toggle();
$('#sub-nav-wrap').toggle();
var isVisible = $('#sub-nav-wrapmin').is(':visible').toString();
$.cookie('submin_visible', isVisible);
});
});