I am looking for a code which can change li image of left side navigation with click. I have 4 options and 8 images but want only one to be activated at one time.
<div class="aside important">
<ul>
<li><img src="../images/about_active.png" alt="" /></li>
<li><img src="../images/advantage.png" alt="" /></li>
<li><img src="../images/partners.png" alt="" /></li>
<li><img src="../images/history.png" alt="" /></li>
</ul>
</div>
I want only one active image at a time. Please help me with a code.
if you use static images, you should use css class instead of img. Its more flexible for future changes.
example:
1) make css like
.nav-but { background: url(yourimg) 0 -20px no-repeat; } // with -20px because its normal bg
2) make second active css like
.nav-but:hover, .active { background: url(yourimg) 0 0px no-repeat; } // 0px as second part of bg used for active and hover
3) if are you using jquery you can add class active like
http://api.jquery.com/addClass/
source for working example
make menu button
button class
Well, you can achive this in two different ways?
You can use javascript to change the image src when an element is clicked (whether the anchor or the list item) depending on your css definitions
Or, you can get rid of the images and use css to style your menu by using the background css property and then use css pseudo classes to change the background image.
I personally prefer the second option because it is a much cleaner approach.
Let me know if it makes sense to you
Leo
Related
Good Day.
I have an element that has two three classes assigned to it. Two are assigned in the html, and one is assigned by jQuery as an active class.
Now I want to specify, in CSS, a hover effect but to the one specific element: The "menuItem first" class...
HTML:
<ul>
<li class="menuItem first"><img src="img/sample_slides/1.png" alt="thumbnail" /></li>
<li class="menuItem"><img src="img/sample_slides/1.png" alt="thumbnail" /></li>
<li class="menuItem"><img src="img/sample_slides/1.png" alt="thumbnail" /></li>
<li class="menuItem"><img src="img/sample_slides/1.png" alt="thumbnail" /></li>
</ul>
CSS:
li.act,li.act:hover{
/* The active state of the thumb */
background:url(img/active_bg2.png) no-repeat;
}
li.act .first, li.act .first:hover{
/* The active state of the thumb - first class only! */
background:url(img/active_bg1.png) no-repeat;
}
I know the css right above is wrong. What is the right annotation?
Remember that the .act class is assigned by jQuery to the active element...
When you say
li.act .first
what you're really saying is "the element with class first inside an <li> element with class act".
If you want to say "the element with both first and act classes, you'd want to write them out without spaces:
li.act.first
Following that, to achieve a hover ruleset for said selector, you can just append the pseudo :hover as always:
li.act.first:hover
you have an extra space in your selector
use
li.act.first, li.act.first:hover{
/* The active state of the thumb - first class only! */
background:url(img/active_bg1.png) no-repeat;
}
selector li.act.first means the li element has both act and first in the class property.
What you have at the moment is setting the same background colour for both states. So instead you would use,,
.first{background-color:#faa;}
.first:hover{background-color:#afa;}
Im using background-color here just as a working example,
http://jsfiddle.net/mshtT/
When you write li class="menuItem first like the way you did in your first li element in HTML, menuItem and first become two separate classes. To apply the hover effect in just one element you can just use the following CSS
.first:hover {
/*the effect you want*/ (eg. Background: #444;)
}
It would only apply to the element that has the first class in it, that is your first element.
This is a follow up to:
fadeOut (on an li) stops working after using addClass on div that wraps the ul
Now that I've scoped it down to a single line of CSS it seems like a good spot to reask the (now) correct question.
This is the line of CSS:
.status-fullscreen .main-slides img.display-full {
position:absolute;
top:0;
left:0;
width:100%;
z-index:350
}
(btw, this "trick" comes from: http://css-tricks.com/perfect-full-page-background-image/ so it's seems pretty legit.)
Pseudo code it applies to:
<div .status-fullscreen>
<div .main-slides>
<ul>
<li><img .display-full /></li>
<li><img .display-full /></li>
<li><img .display-full /></li>
</ul>
</div>
</div>
When the line of CSS is in play and I'm working the .go(index) of the list, fadeOut() stops working as expected. That is, it doesn't work at all. fadeIn works tho' the duration seems to be off. Remove the line and all is well.
What gives?
I'm sure there's another way to produce fullscreen image. NBD. But it would be nice / helpful to understand what cause fadeOut to be eff'ed by what's in this line of CSS. Maybe it's not a bug but it does seem pretty damn odd, yes?
Problem solved. Instead of just using the single line on the image to make it full screen, I also used fixed and height on the and on out to the wrapper (if that makes sense.). In short, in make layer on top consistently defined (I guess) the code stopped confusing jq.
I just noticed in vk.com that the images in your album have fixed width but the height is also fixed but images are cut like in the middle.And if i copy the path to the images and view only them they are not cut.
i make this photo to be more easy to understand
How this is done ?
Their containers have a fixed height with overflow:hidden set.
HTML:
<ul>
<li><img src="//lorempixel.com/100/100/"></li>
<li><img src="//lorempixel.com/100/200/"></li>
<li><img src="//lorempixel.com/100/300/"></li>
<li><img src="//lorempixel.com/100/400/"></li>
</ul>
CSS:
li { float:left; height:100px; overflow:hidden; margin:10px; }
Demo: jsfiddle.net/tbedf
The images can be put in a container div that has a fixed height and then set the container div to overflow: hidden. This will clip any child objects that are larger than the container. The clipping is at display time only, the images themselves remain unchanged.
You can see an example of an image containing div where you can toggle the overflow settings between hidden and visible in this demo: http://jsfiddle.net/jfriend00/npzjn/.
I have this menu:
<ul id="nav">
<li class="level0">Item 1</li>
<li class="level0 parent">
<a><span>Click Me!</span></a>
<div class="submenu">
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</div>
</li>
</ul>
I want the submenu to be hidden when the page is loaded. When the user clicks the parent item, the submenu should appear.
When I use inline CSS like this, everything works fine.
<div class="submenu" style="display:none;">
See this demo: http://jsfiddle.net/zJk6P/ (Click on "Click me" in the bottom right to run the demo.)
When I use external CSS like this, the submenu doesn't appear anymore.
#nav div.submenu{
display: none;
}
See this demo: http://jsfiddle.net/5tNqc/4/
Why is there any difference and how can I get the sliding effect to work with external CSS?
The reason my code didn't work was that Javascript doesn't have access to external CSS style declarations. Only inline styles are accessible trough element.style.
Effect.toggle(element, 'slide'); tries to slide the element down when the element is not displayed, and up when the element is displayed. So when the element is hidden by an external style sheet, Effect.toggle will try to slide the element up, because it simply doesn't "know" the element is already hidden.
The solution is to work with class names. My final solution checks whether the element has a certain class name. When the class name is present, the element is not clicked yet, so the element is slided down and the class name is removed. All next clicks, the element is toggled.
I built and uploaded a small demonstration here: http://i.amniels.com/ext/stackexchange/2011-09/index.html
The difference is that you don't change display to be set to display: block;, which is the standard, and so it gets overridden by the external explicit definition that it should be hidden. If you add another line in the Javascript to add thisDiv.style.display = block;, and remove it at the end of hiding it, it should work just fine.
Update:
So, the reason that it doesn't show up when you have display: none; in your CSS file, is because when the Javascript animation starts, instead of setting display: block; on your div, which would make it visible, it simply removes the display property on the element entirely, so it is still affected by the external CSS.
My suggestion: if you don't want the Javascript to become more difficult, simply leave the style inline, so that it can be removed later by Javascript automatically. If you want to use an external CSS style for it, you could just add a short helper function to your Javascript to change the CSS display property to block whenever it starts, and set it to display: none after the animation is finished.
I have 10 links. I am using a separate sprite sheet for a single link which consist of active, hover and inactive link image. I want to know how can i change the background-postion from javascript. I know how to do this in css but for 10 different links i think javascript will a better option as i can use the same code for every link. Waiting for your suggestions.
you are mistaken: this should be done in CSS, its the fastest to render, even though it takes more initial declarations.
Just make sure your CSS is optimized.
.links{
background:transparent url(sprite.png) 0 0;
}
#link1{
background-position: 0 0;
}
#link1:hover{
background-position: 0 -50px;
}
#link2{
background-position: 100px 0;
}
#link2:hover{
background-position: 100px -50px;
}
And the HTML:
<a class="links" id="link1" href="#">link 1</a>
<a class="links" id="link2" href="#">link 2</a>
If you really, really want to do it in javascript, you're looking for the style() method. See W3Schools on style() and backgroundPosition
The best is to use css, even for multiple images.
If the sizing is the same for the sprites of the 10 links, you can make a rule that is agnostic of the image and just repositions the background image
a.someclass:hover{
background-position:Xpx Ypx;
}
and apply the someclass (or whatever you name it) to all your links...