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.
Related
I'm a designer, have only a slight idea about jQuery. But I love learning :) So I decided to do the below thing myself, and I can't quite get it to work.
My idea is to have a slider with actual slides as next/prev buttons. So I can go to next slide by clicking the actual next slide - the same for previous slide. I guess the picture below shows what I mean.
Desired effect
I've tried to do it this way:
assign a class .main to the main image
assign a class .prev to the partially hidden image on the left
assign a class .next to the partially hidden image on the right
And when I click .next, I change classes .main > .prev, .next > .main, .next +1 > .next.
Now I can do it one step up and it works, the classes change and it works fine. But then when I click the now-.next class, jQuery seems to not recognize it's .next now and responds to it as if it were still the .main class. The updated classes don't respond (the now- .main class still works as .next, as if jQuery was not reading the change).
Here's the HTML:
<div class="view">
<ul>
<li class="left" data-id="1"></li>
<li class="main" data-id="2"></li>
<li class="right" data-id="3"></li>
<li data-id="4"></li>
<li data-id="5"></li>
</ul>
</div>
And the script:
$(".next").click(function(){
$(this).prev().removeClass("main").addClass("prev");
$(this).removeClass("next").addClass("main");
$(this).next().addClass("next");
$(".view ul li:first").animate({marginLeft: '-=57%'});
$(".view ul li.main").animate({marginLeft: '-=15%'});
});
I guess it's toddler talk for you, but perhaps you could help me get it to work. How would you come about the matter? Any ideas?
Big thanks up front!
Cheers!
It is not really toddler talk because there are a few pitfalls you need to be aware of.
First of all, the click handler will not work for the new .next this way.
You need to use
$('body').on('click', 'li.next', function() {
instead to make it work for dynamic content.
Another problem is that you forgot to remove the .prev class
$(".prev").removeClass("prev");
Another small mistake is: $(".view ul li:first").animate({marginLeft: '-=57%'}); which always takes the first element, but after the first slide it should take the .prev instead. (so change it to li.prev).
I guess btw that you use class="prev" instead of left (typo in question).
See the full code here:
http://jsfiddle.net/a8Lf9r68/3/
And as #Mō Iđɍɨɇƶ says, you need some additional code to handle the last and first element clicks. But that depends on what you want, and I see it as outside the scope of the question.
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
If you look at the video here: http://f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.mov - you will see the problem in action. Basically, I have something along the following:
<section id="sidenav">
<h1>TEXT HERE</h1>
<ul>
<li>Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
<li>Tab Four</li>
</ul>
<div id="tab"></div>
</section>
Sidenav is absolutely positioned, like this:
#sidenav {
position: absolute;
top: 200px;
left: 0px;
width: 770px;
padding: 30px 0px 20px;
background: rgba(255, 255, 255, 0.85);
-webkit-transition: left 0.75s ease-in-out;
-webkit-backface-visibility: hidden;
z-index: 10; /* This fixed it. */
}
#sidenav.hidden {
left: -768px;
}
I have the following jQuery:
$("#tab").click(function(){
$("#sidenav").toggleClass("hidden");
});
However, the elements inside of the section aren't keeping up with the animation. Whenever I click, they either lag behind or don't move at all. However, they are just ghosts, I can't click them. When I bring the side nav back out, they usually catch up, but sometimes they are broken until I hover over the <li>'s.
Keep in mind, this only happens in Safari/Chrome on the desktop. Safari on the iPad and Firefox on the desktop are working fine.
Thanks!
Andrew
EDIT WITH FIX:
So apparently adding z-index: 10 (or any z-index) to the sidenav element fixed the problem. Some people were asking for the entirety of my css, so I edited the post to contain it. I'm not sure exactly why z-index fixed this, and I'd love to know why. I'm still offering my bounty to whomever can explain that. Thanks!
So apparently adding z-index: 10 (or any z-index) to the sidenav element fixed the problem. Some people were asking for the entirety of my css, so I edited the post to contain it. I'm not sure exactly why z-index fixed this, and I'd love to know why. I'm still offering my bounty to whomever can explain that. Thanks!
I would prefer to post this as a comment, but since I'm a newbie here, my only option is posting this as an answer. In the video example you posted the hover over the list elements allowed for the display of the arrows, but they did not go away on mouse out. If you are trying to do this purely with css and not have the latent images, you should use hover.
That is detailed in this post:
Using only CSS, show div on hover over <a>
That way, if you hide the arrows as the mouse leaves the list element, there will not be any arrow to stay behind when the list slides off the page to the left.
Sometimes this works: make the parent position:relative its like webkit's version of the old ie haslayout bug.
from the markup you have given it looks like the class"hidden" will also take your 'nav' div with it (it is inside sidenav ) - I imagine that would cause some quirky
As a rule of thumb
markup the content
style up
add the interactions ( click events and behaviours )
THEN add your final interaction candy ( easing etc )
( doing this you should identify which part is causing the problem in the ui )
Fixed it by removing the z-index style from the parent and giving a z-index higher than 0 to the fixed element.
Hope this works with others.
I've seen this question asked several times but haven't seen any answers.
I have a ul that I'm expanding and collapsing using slideToggle() with jquery.
The code is simple:
$('#leftMenu li a.moreLess').click(function() {
$(this).next().slideToggle('normal');
});
With markup of:
<a class="moreLess">Click here to see more</a>
<ul>
<li>something</li>
<li>something else</li>
...
</ul>
I have a button with a class of .moreLess and when it is clicked the list below it should expand or collapse. For some reason in IE 7 all of the content is disappearing once the list is fully expanding. When it collapses, the content appears again until the list is fully closed.
I'm not sure if this is something CSS related, but I was hoping someone might have run into this before.
Thanks in advance for your help!
put a zoom:1 property. it works with position:relative.
FYI the problem was with CSS positioning on the elements inside the UL that is being toggled. Once I removed any relative and/or absolute positioning on those elements, the problem no longer happened.
put
overflow: hidden;
for the div in which you have the content, that gets messed up. Works for me, but still it's and IE bug...
in my case the content loaded with slideToggle was "shifted" down creating 2 empty space (only in IE7)
i solved with this css:
form {
margin: 0;
}
I'm banging my head against the wall with an issue I'm having in IE8. I am using the fadeIn function on jQuery to make the site content fade in. This works perfectly fine in all of the other browsers, but when the fadeIn finishes in IE8 the font anti-aliasing seems to change, causing the text to shift slightly.
You can see the site at http://www.ipulse.biz. The code I'm using to cause the fade in is quite simple, as shown below.
var showContent = function() {
$('#content div:first').fadeIn(1000);
$('#navigation').fadeIn(500);
} // end showContent
The code is called by a setInterval function, if that makes any difference.
As previously explained, this is caused by Cleartype in Internet Explorer- but there is a workaround that will at least make this issue tolerable.
$('#navigation').fadeIn(500, function(){
if ($.browser.msie){this.style.removeAttribute('filter');}
});
That should force IE to clear the transparency and thus render the text normally.
It still isn't pretty, unfortunately.
This is caused by ClearType disappearing in Internet Explorer, which is quite annoying.
http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/
I know my answer comes a bit too late, but how about thinkin' vice-versa?
IE7 / IE8 don't keep anti-alias for Faded text, so, if you have a single color background (e.g. black), you can create an empty div, background-color: #000; position: absolute; display:block; and put it over the text element.
If your request is to have a text FadeIn effect you just have to apply the FadeOut to the "black" layer over it, and vice-versa.
This way the text anti-alias is kept intact.
Sorry for the very late reply, but I had the same problem and was searching for a solution when I came across this topic. I didn't find a working solution in this topic, but I came up with a simple solution that seems to fix the problem perfectly.
In stead of using:
$('.element').fadeIn(500)
use fadeTo and fade to 99%:
$('.element').fadeTo(500, 0.99)
You won't see a difference in the 1% and because it doesn't reach 100% opacity, IE doesn't seem to apply cleartype.
Let me know if this works for anyone else.
it needs to be called after the fade effect is completed (e.g. 500ms after etc.)
I fixed this by adding in the css for the required text
filter:alpha(opacity=99);
this will only effect ie. I still get a small shift in ie7 but it's exceptable.
You can see it working here http://thriive.com.au/
Found a ready solution for that problem.
http://jquery.malsup.com/fadetest.html
I have a solution: Create another DIV on your DOM as an overlay, and execute your fade functions on this DIV only. It will appear as though the content is fading in / out. This approach is also more performant, as you are only fading a single DIV instead of multiple elements. Here is an example:
$('#containeroverlay').width($('#container').width()).height($('#container').height()).fadeIn('normal', function() {
// Step 1: change your content underneath the hidden div
// Step 2: hide the overlay
$('#containeroverlay').fadeOut('normal');
})
I also had problems with transparent PNG's in faded area's, but combining the above JS for removing the filter attribute with a tiny bit of css the image black 'border' was gone while fading.
Is my case it was a element that uses a css-sprite, so i only had to add this to my sprite class in the css:
.sprite{
background-image: url('/images/sprite.png');
background-repeat: no-repeat;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#00FFFFFF,startColorStr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFFFF',startColorStr='#00FFFFFF'); /* IE6 & 7 */
zoom: 1;
}
I'm not using JQuery but I half-solved this issue by using the following CSS:
div
{
opacity: .15;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
}
div:hover
{
opacity: 1;
-ms-filter:"";
}
The fully opaque text is anti-aliased now, but the translucent isn't. It's not a huge issue for the translucent text though.