SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: jQuery question

  1. #1
    SitePoint Enthusiast dmj1973's Avatar
    Join Date
    Feb 2007
    Location
    Somewhere between Geek and Total Geek
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation jQuery question

    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. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,903
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    Try this

    Code javascript:
    $('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).
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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:


    Code JavaScript:
    $('div.rotator ul li:first').css({opacity:1, zoom:1});
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  4. #4
    SitePoint Enthusiast dmj1973's Avatar
    Join Date
    Feb 2007
    Location
    Somewhere between Geek and Total Geek
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Still have a problem ...

    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

    Code:
    <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. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dmj1973 View Post
    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.
    @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

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

    http://jsfiddle.net/GeekyJohn/tthED/
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    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.

    Code:
    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.

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

  7. #7
    SitePoint Enthusiast dmj1973's Avatar
    Join Date
    Feb 2007
    Location
    Somewhere between Geek and Total Geek
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    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. #9
    SitePoint Enthusiast dmj1973's Avatar
    Join Date
    Feb 2007
    Location
    Somewhere between Geek and Total Geek
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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/
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •