I have a simple question yet it's not working out. See this html:
<div id="viewer">
<ul class="tj_gallery">
<li><img src="images/projecten/main/chicane.png" alt="" width="280" height="178" />01</li>
</ul>
</div>
The a.abhover is absolutely positioned inside the relative li. The a.abhover has display:none; in CSS. If I hover one li (it's a long list!) the a.abhover should fadeIn # 1000ms. Right now this is working, but only for every single one of those li's. See my jQuery code:
$(".tj_gallery li").hover(function(){
$(".tj_gallery li a.abhover").stop(true,true).fadeIn("fast");
}, function(){
$(".tj_gallery li a.abhover").stop(true,true).fadeOut("fast");
});
Adding $(this, ".tj_gallery li a.abhover") or $(".tj_gallery li a.abhover", this) doesn't help (it breaks it).
$(".tj_gallery li").hover(function(){
$("a.abhover", this).stop(true,true).fadeIn("fast");
}, function(){
$("a.abhover", this).stop(true,true).fadeOut("fast");
});
Related
i am trying to make a navigation bar for a webpage with sliding jquery panels. i want a small triangle under the button to appear when it is clicked and the arrow under the button corresponding with the previous page disapperas.
my HTML is:
<div id="navbar">
<div id="navbar_div">
<div class="navbar_container">
<ul id="nav" class="sf-menu">
<li class="bttn1 clicked" class="bttn1">Home<span class="subheading">Welcome to our page!</span></li>
<li class="bttn2 notclicked">About Us<span class="subheading">About the website and what it does</span></li>
</ul>
</div>
</div>
</div>
my css is:
#nav > li.clicked {
background: url(../images/menu-arrow.png) no-repeat center bottom;
}
my script is in the head of the page for button 2 click is:
function bttn2click () {
$("li.clicked").removeclass("clicked");
$("li.bttn2").addclass('clicked');
$("li.bttn2").removeclass("notclicked");
}
i don't know what i am meant to do. when i click buttons nothing happens (except for the links) i am aiming to change the class to match the clicked css class but it doesn't seem to work!
addClass and removeClass are case sensitive. jQuery does not have addclass or removeclass functions.
Use a jQuery event handler
<li class="bttn1 clicked" class="bttn1">Home<span class="subheading">Welcome to our page!</span></li>
then
jQuery(function () {
$('#nav li').click(function () {
$("#nav li.clicked").removeClass("clicked");
$(this).addClass('clicked').removeClass("notclicked");
})
})
Why yours is not working because the bttn2click is unaware about which li is clicked(along with the issues with method name)
Demo: Fiddle
I am using JS to show/hide divs via clicking on the side nav with jquery functions fadeIn() and fadeOut(). The problem I run into is as one div fades out, the next is fading in simultaneously. Also, if I click the link for the div that is already shown, it fades out and fades in again. I'm not sure if an IF statement would be the best approach to do two fixes:
1. Let shown div fully fadeOut before next starts to fadeIn.
2. Currently shown div will not fadeOut/In if same link is clicked.
Here is what I have thus far (without my broken attempt at an IF statement):
http://jsfiddle.net/k55Cw/1/
HTML:
<div class="container">
<header>
<ul class="sidenav">
<li><h2><a data-region="nav-1" href="#">About</a></h2></li>
<li><h2><a data-region="nav-2" href="#">Services</a></h2></li>
<li><h2><a data-region="nav-3" href="#">Team</a></h2></li>
<li><h2><a data-region="nav-4" href="#">News</a></h2></li>
<li><h2><a data-region="nav-5" href="#">Contact</a></h2></li>
</ul>
</header>
<div id="nav-1" class="infozone"><p>Hello I'm box 1.</p></div>
<div id="nav-2" class="infozone"><p>Hello I'm box 2.</p></div>
<div id="nav-3" class="infozone"><p>Hello I'm box 3.</p></div>
<div id="nav-4" class="infozone"><p>Hello I'm box 4.</p></div>
<div id="nav-5" class="infozone"><p>Hello I'm box 5.</p></div>
</div>
CSS:
.infozone{
float:left;
height:400px;
width:800px;
background-color: #000;
display:none;
}
JS:
$(document).ready(function() {
$('.sidenav a').click(function(){
$('.infozone').fadeOut(850);
var region = $(this).attr('data-region');
$('#' + region).fadeIn(850);
});
});
to chain the animations put the fadeIn inside the callback for fadeOut, and to cancel the function if it's currently shown, check if the div is already visible.
I've also had to add a check to see if the current .infozone div is visible - or else the fadeOut applies to hidden elements too, and the callback fires multiple times:
$(document).ready(function() {
$('.sidenav a').click(function(){
var region = $(this).attr('data-region');
var $region = $('#' + region);
if ($region.is(':visible')) return;
var $infozone = $('.infozone:visible');
if ($infozone.length === 0) {
$region.fadeIn(850);
} else {
$infozone.fadeOut(850, function() {
$region.fadeIn(850);
});
}
});
});
You could something like that:
html
This make you page works when javascript is disabled:
<header>
<ul class="sidenav">
<li><h2>About</h2></li>
<li><h2>Services</h2></li>
<li><h2>Team</h2></li>
<li><h2>News</h2></li>
<li><h2>Contact</h2></li>
</ul>
</header>
note that the href point to the id you want to show. This will works also for screen reader if you want to make your page accessible.
javascript. I have not tested it, you might have to fix few things, but the idea is there
$(document).ready(function() {
$('.sidenav a').click(function(e){
var href = $(this).attr('href');
// prevent default
e.preventDefault();
// prevent clicked twice
if(!$(this).hasClass('active'){
$('.sidenav a').removeClass('active');
$(this).addClass('active'){
$('.infozone').fadeOut(850);
$(href.substring(1)).fadeIn(850);
}
});
You should also consider adding some ARIA attributes and roles attributes.
I have this html code
<ul>
<li><img src="path_to_image1"><span>some text</span></li>
<li><img src="path_to_image2"><span>some text</span></li>
<li><img src="path_to_image3"><span>some text</span></li>
</ul>
Images are of different width.
I need to set width of SPAN element to be equal as IMG width.
Here is the code that I wrote by looking over the StackOverflow board.
$(document).ready(function() {
$("ul li a").each(function() {
var theWidth = $(this).find("img").width();
$("ul li a span").width(theWidth);
});
});
Now this code returns only width of the last image.
What to change so I can have width of span element same as img?
Thanks
$('ul li img').each(function() {
var imgWidth = $(this).width();
$(this).next('span').css({'width': imgWidth});
});
You just need to correct one line:
$("ul li a span").width(theWidth);
Replace with:
$(this).find('span').width(theWidth);
the answer is in your own code, almost..
$(this).find("span").width(theWidth);
Replace this line
$("ul li a span").width(theWidth);
with
$(this).find('span').width(theWidth);
Explanation: the line $("ul li a span").width(theWidth); sets the width for all three span elements.
The 'each' loop runs 3 times.
The first time it sets all three spans to the width of the first image.
The second time it sets all three spans to the width of the second image.
...
Can you just set the widths of the <li>'s to the same width as the image and set the <span> as display: block;
The spans will then be as wide as their contain (the <li>) and it saves you a little extra jquery trying to dig down to span level.
Also, to help speed up your jquery selector simply add an id to the list and target that instead of trying to match ul li a...; now all you have to do is match #widths.
Example
<ul id="widths">
<li><img src="path_to_image1"><span>some text</span></li>
<li><img src="path_to_image2"><span>some text</span></li>
<li><img src="path_to_image3"><span>some text</span></li>
</ul>
$(document).ready(function() {
$('#widths img').each(function() {
var imgWidth = $(this).width();
$(this).next('span').css({'width': imgWidth});
});
});
There are many ways around this, this worked for me though.
$(document).ready(function () {
$("ul li a img").each(function (index) {
$(this).next().width($(this).width()).css("display", "block");
});
});
i have a Nav wherein i'm attempting to use jQuery's addClass method to set the link color of the last clicked link. problem is then i have to use removeClass on all other links in the Nav. that's what i'm having trouble with.
I have written the code in a naive way, but know this is not good programming. below is the code with style sheet ref.
jQuery('#shop-nav').click(function(){
jQuery("#shop-nav").addClass("clicked");
jQuery("#art-nav").removeClass("clicked");
jQuery("#obj-nav").removeClass("clicked");
jQuery("#acc-nav").removeClass("clicked");
});
jQuery('#art-nav').click(function(){
jQuery("#art-nav").addClass("clicked");
jQuery("#shop-nav").removeClass("clicked");
jQuery("#obj-nav").removeClass("clicked");
jQuery("#acc-nav").removeClass("clicked");
});
etc. etc!
the HTML is
<div id="nav-cell-1" class="grid f-cell nav-cell">
<ul id="main-nav" class="nav clearfix">
<li>Shop
<ul id="shop-cats">
<li>Art</li>
<li>•</li>
<li>Objects</li>
<li>•</li>
<li>Accessories</li>
</ul>
</li>
</ul>
</div>
CSS:
a:link, a:visited {color:#cfb199;text-decoration:none} /* official this color:#9d9fa1; work color: #222*/
a:active, a:hover {color:#9d9fa1;text-decoration:none} /* old color:#9d9fa1; */ /* official color:#cfb199; work color: #f00*/
a:link.clicked, a:visited.clicked {color:green;text-decoration:underline}
a demo site is here:
http://www.tomcarden.net/birdycitynav/partial-nav-demo.html
I did solve part of the problem by using the this reference, but this do not include the .removeClass part.
jQuery('#shop-cats>li>a').click(function(){
jQuery(this).addClass("clicked");
});
Or this one works more like your site:
$('.nav a').click(function(){
$('.nav a').removeClass('clicked');
$(this).toggleClass('clicked');
});
test it here:
http://www.jsfiddle.net/mjYq3/18/
Try this to toggle the class:
var navs = jQuery('#shop-nav,#art-nav, #obj-nav, #acc-nav');
navs.click(function(){
navs.removeClass("clicked");
$(this).addClass("clicked");
});
Untested
jQuery('#shop-cats>li>a').click(function(){
$this = jQuery(this);
$this.parent().children('a').removeClass('clicked');
$this.addClass("clicked");
});
You can first remove all the clicked classes then add it back to just the one that was clicked.
jQuery('#shop-cats>li>a').click(function(){
jQuery('#shop-cats>li>a').removeClass("clicked")
jQuery(this).addClass("clicked");
});
This should work:
$('#main-nav a').click(function() {
$('#main-nav a').not(this).removeClass('clicked');
$(this).addClass('clicked');
});
On the basis that you apparently want to do this for all links that are descendents of #main-nav, and not just those that are in the inner <ul> list.
I have a project that uses drop-down menus that are nested ul's, like so:
<ul id="nav">
<li id="thome" class="navtab">
HOME
<ul id="subnav_home" class="submenu">
<li>Dashboard</li>
<li>SMS</li>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
Using jQuery, I've added a .hover() to the .navtab li that .show()s the .submenu ul. The problem is that when the cursor moves into the new ul, the .hover()-out for the .navtab fires, .hide()ing the sub-menu, despite the fact that I have the height of the li so that it entirely wraps the .submenu ul.
I've tried adding a delay to the .hide(), but if you pass your cursor over the navtab bar quickly, you get all of the sub-menus at once.
Any solutions for me? Here's the relevant JavaScript. The hide() function is identical to .show() except that it shrinks the height and hides the ul (obviously).
$('.navtab').hover(
function(){
tabShowSubnav($(this).attr('id'));
},
function(){
tabHideSubnav($(this).attr('id'));
});
function tabShowSubnav(menu){
var sb = '#' + menu + ' > .submenu';
var tb = '#' + menu;
$('.navtab').each(function(){
if (!$(this).hasClass('current_page')){
$(tb).addClass('nav_hover');
}
});
$(tb).css('height','239px');
$(sb).show();
}
$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('current_page').addClass("nav_hover");
},
function() {
});
$(".submenu").mouseout(function(){
$(this).hide();
});
$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('.current_page').addClass("nav_hover");
},
function() {
$(this).children(".submenu").hide();
});
This worked for me.
I finally had to go with the jQuery plugin hoverIntent, that ignores children for the purpose of mouseout.