jQuery question

JavaScript
1

Hi,

I am trying to modify an exiting piece of code I have for an image rotator. I am using Opacity to fade the images in and out but I have a problem with some text that is being rotated also in IE.

$(‘div.rotator ul li:first’).css({opacity:1}); is the line in question and I know I need to add the following

filter: alpha(opacity = 1); zoom:1;

css to make it work properly but when I add it as follows:

$(‘div.rotator ul li:first’).css({opacity:1, filter:alpha(opacity = 1), zoom:1});

it breaks the rotation.

Can someone point me to the correct format for adding the required css ?

Thanks

2

Try this


$('div.rotator ul li:first').css({opacity:1, filter:'alpha(opacity = 1);' zoom:1});

(the difference is between yours and mine is that I’m passing “alpha(opacity = 1)” as a string, whereas you were calling the (non-existent) function “alpha” with parameter 1, resulting in either an error or undefined (probably the error though).

3

jQuery has an auto detection feature for the opacity property, it will detect if your in IE and generate the filter property for you otherwise it will use the normal opacity property. This is all you would need:

$('div.rotator ul li:first').css({opacity:1, zoom:1});
4

Ok so firstly I want to thank you for replying so quickly I tried both posted solutions and ScallioXTX was actually correct but I had to remove the zoom as I had a position for the element already defined.

My problem original problem was that the text was displaying looking “thin” in IE7. So I figured out that it was the filter issue hence my original question.

Now my problem isnt the text, that is fine. It’s that what was once a 6 second display and a 1 second animation is now a 1 second display and a 6 second wait.

Would someone please be kind enough to take a look at this for me, I dont want to have to resort to putting the text in the image ! (which is the point I am reaching)

Thanks

<div class="rotator">
          <ul>
            <li><img src="../Images/image1.jpg" alt="Person Lastname, Position" /><p>“Blah blah blah testimonial 1”</p><p>Person Lastname, Fred Blogs co.<br/>Blah, XX</p></li>
            <li><img src="../Images/image1.jpg" alt="Person Lastname, Position" /><p>“Blah blah blah testimonial 1”</p><p>Person Lastname, Fred Blogs co.<br/>Blah, XX</p></li>
            <li><img src="../Images/image1.jpg" alt="Person Lastname, Position" /><p>“Blah blah blah testimonial 1”</p><p>Person Lastname, Fred Blogs co.<br/>Blah, XX</p></li>
            <li><img src="../Images/image1.jpg" alt="Person Lastname, Position" /><p>“Blah blah blah testimonial 1”</p><p>Person Lastname, Fred Blogs co.<br/>Blah, XX</p></li>
            <li><img src="../Images/image1.jpg" alt="Person Lastname, Position" /><p>“Blah blah blah testimonial 1”</p><p>Person Lastname, Fred Blogs co.<br/>Blah, XX</p></li>
          </ul>
        </div>

The CSS

/* rotator in-page placement */
div.rotator {
	height:344px;
}
/* rotator css */
div.rotator ul li {
	float:left;
	margin-left:0px;
	position:absolute;
	list-style: none;
	background-color:#fff;
}
/* rotator image style */	
div.rotator ul li img {
	padding: 4px;
	background: #FFF;
}
div.rotator ul li.show {
	z-index:500
}

The Script

function theRotator(){
$('div.rotator ul li').css({opacity: 0, filter:'alpha(opacity = 0);'});
$('div.rotator ul li:first').css({opacity: 1, filter:'alpha(opacity = 1);'});
if ($('div.rotator ul li').length > 1) {
setTimeout('rotate()', 6000);
}
}

function rotate() {	
var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));
if ( current.length == 0 ) current = $('div.rotator ul li:first');
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
next.css({opacity: 0, filter:'alpha(opacity = 0);'}).addClass('show').animate({opacity: 1, filter:'alpha(opacity = 1);'}, 1000);
current.animate({opacity: 0, filter:'alpha(opacity = 0);'}, 1000, function(){setTimeout('rotate()', 6000);}).removeClass('show');
};
5

@SgtLegend was right, because jQuery has built in feature detection for the opacity property, it will apply the filter in Internet Explorer because of it’s built-in detection so you don’t have to :slight_smile:

I’ve made a quick JS Fiddle to demo the code working without the filter:‘alpha(opacity = 1);’ being applied.

6

You can check very easily in vanilla javascript for the appropraite opacity style and then apply whichever applies.

Note: - the opacity style ranges from 0-1 and the filter style ranges from 0-100. So to cater for both ranges you can use opacity values from 0-10 and then either divide by 10 or multiple by 10 for the appropriate opacity type.

function setOpacityCSS(curOpac){
                if(typeof(myElem.style.opacity) == 'string'){
                    myElem.style.opacity = curOpac/10;
                } else {
                    myElem.style.filter = 'alpha(opacity=' + curOpac*10 + ')';
                }
            }

where myElem is an object reference to the element whose opacity you want to change.

And in the css you can set a default opacity to cater for any browser.

#someElem {
                display: none;
                filter:alpha(opacity=100);
                opacity: 1;
            }
7

So I admitted defeat due to deadline and added the text to the body of the image. Not the perfect solution but it did the trick. I added alt tags and long desc so I should be covered.

I am still determined to figure out why the jQuery built-in filter isnt working as it should. Aussie John looked to be the closest but when I went to the jsFiddle site he linked to it on rotated to the second image in the list not continually through them all. So I think its closer than it was but still not quite right.

8

Is ditching the jquery an option?

Because you can rotate the images (with or without fading) relatively easily using just plain javascript and with less code.

9

Yes it absolutely is an option. I was starting to think along those same lines myself. I went with the jQuery option as I thought I found what was a reasonably lightweight solution.

Fade in and out was requested by the site owner.

10

Just as an aside, if you’re only using fading, you could simply use jQuery’s built in .fadeIn() and .fadeOut() methods.

I’ve rewritten my original fiddle to use .fadeIn() / .fadeOut() instead http://jsfiddle.net/GeekyJohn/5s5Ht/