SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    Any idea why small gallery.js not compatible with jQuery 1.8.2 Must use version 1.4.4

    Any idea why my small gallery.js is not compatible with jQuery 1.8.2? I have to use jQuery version 1.4.4 for it to work. I would like to use the latest. Any obvious reasons to you js pros?

    Code JavaScript:
    /* Gallery JS */
    var gallery = function() {
    var current = 1;
    var total = $('#photos b').length;
    $('#photos b').hide();
    $('#pic1').fadeIn('slow');
    $('#number').html('1 of ' + total );
    setHeight(1)
     
    $('#first').click(function(){
    var prev  = 1;
    if (current != 1) {
    $('#pic' + current).fadeOut('slow');
    setHeight(prev)
    $('#pic' + prev).fadeIn('slow');
    current = 1;
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
     
    $('#previous').click(function(){
    var prev  = current - 1;
    if (prev < 1) prev = 1;
    if (current != 1) {
    $('#pic' + current).fadeOut('slow');
    $('#pic' + prev).fadeIn('slow');
    current = prev;
    setHeight(current)
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
     
    $('#next').click(function(){
    var next = current + 1;
    if (next > total) next = total;
    if (current != total) {
    $('#pic' + current).fadeOut('slow');
    $('#pic' + next).fadeIn('slow');
    current = next;
    setHeight(current)
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
     
    $('#last').click(function(){
    var next  = total;
    if (current != total) {
    $('#pic' + current).fadeOut('slow');
    $('#pic' + next).fadeIn('slow');
    current = total;
    setHeight(current)
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
     
    function setHeight(current) {}}
     
    /* fire gallery */
    $(document).ready(function(){
    gallery();    
    });

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    For anybody that has knowledge in these matters I can supply the webpage in question if that helps.

  3. #3
    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)
    Hey

    A link to the web page might be helpful. I ran this code with both jQuery 1.4.4 and 1.8.2 and didn't have any problems, so there might be something else going on.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Cool. Thank you. I'm my site it opens in fancybox. Here is the plain html page with jquery 1.4.4 and gallery.js. http://goo.gl/EP9E3. It works as is. If I use jquery 1.8.2 it doesn't.

  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)
    I noticed that when I open up the Fancybox on the about page I get a JavaScript error.

    I saved the aboutphotos page locally and tested with both 1.4.4 and 1.8.2 and it worked fine. Does it fail for you when you run it standalone as well, or only when it's inside Fancybox?
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Wow that was hard. It works different in all three testing scenarios - local via dreamweaver - local via wamp - and online. I believe I narrowed down the problem to two scripts that are also on the page. Both need to be removed in order for the gallery.js to work with jquery 1.8.3. Smooth scroll. Replacing that with the newer version fixes half of it. But the other half - this...

    document.getElementById("loading").innerHTML = "Loading...";

    Loads before jquery 1.8.3 and breaks it. Or breaks the gallery.js. If I move it below jquery then it works again. But I need it to load before jquery. So, what do you think? Any obvious reason why that you know of that that one line would conflict?

    FYI - for testing all my scripts are in combined.js. It's on all the other pages. Therefore catched when the gallery is called via fancybox. Which is why I would prefer to use it verses loading a new jquery on gallery call. Thanks!

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    PS... I dont need this js line document.getElementById("loading").innerHTML = "Loading..."; on this page. I guess I found the pit falls of combining all your js. So if if I could disable it somehow with a little js it would be much less than another jquery to download. Can I somehow disable it on this page? Or make jquery not conflict with it?

  8. #8
    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 EricWatson View Post
    PS... I dont need this js line document.getElementById("loading").innerHTML = "Loading..."; on this page. I guess I found the pit falls of combining all your js. So if if I could disable it somehow with a little js it would be much less than another jquery to download. Can I somehow disable it on this page? Or make jquery not conflict with it?
    It's totally possible to safeguard this so it only runs when the loading div is present. We just need to add a quick if-statement to check

    Code javascript:
    var loadingDiv = document.getElementById("loading"); // will be null if it doesn't exist
    if (loadingDiv) {
      loadingDiv.innerHTML = "Loading ...";
    }
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Good thinking! Awesome I will put that in tommorrow morning and let you know how it goes. Thank you sir!

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Arg. That was irritating. So I switched everything out and thought I was good to go. But no. Now IE7/8 sort of work with the newest jquery. They switch the pics but they both do a bad flicker during each transition. Going back a pic does not suffer from the bad flicker. So I'm hoping to a trained eye you can spot the problem. I tried some febel z-index things in the css but it had no effect. I set up a test page here with all the problematic js. Can you spot the problem? Thanks! http://goo.gl/ZQ961

  11. #11
    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 EricWatson View Post
    Arg. That was irritating. So I switched everything out and thought I was good to go. But no. Now IE7/8 sort of work with the newest jquery. They switch the pics but they both do a bad flicker during each transition. Going back a pic does not suffer from the bad flicker. So I'm hoping to a trained eye you can spot the problem. I tried some febel z-index things in the css but it had no effect. I set up a test page here with all the problematic js. Can you spot the problem? Thanks! http://goo.gl/ZQ961
    I don't have a native IE7 and 8 to test with and didn't see the issue in IE9 while switched to IE7/8 modes.

    However, I do have one suggestion that might help, in your "next" click handler, you could fade in the next pic and simply hide the "current" pic when it is finished fading in. This might reduce the flicker as you're only trying to animate 1 element in that position.

    Code javascript:
    $('#next').click(function(){
        var next = current + 1;
        if (next > total){
            next = total;
        }
     
        if (current !== total) {
            $('#pic' + next).fadeIn('slow', function(){ 
                $('#pic' + current).hide(); //hide the current pic after the next one is shown
            });
            current = next;
            setHeight(current);
            $('#number').html(current + ' of ' + total);
        }
     
        return false;
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks but no luck. If I replace the next block

    Code:
    $('#next').click(function(){
    var next = current + 1;
    if (next > total) next = total;
    if (current != total) {
    $('#pic' + current).fadeOut('slow');
    $('#pic' + next).fadeIn('slow');
    current = next;
    setHeight(current)
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
    with your code I get a script error http://www.visibilityinherit.com/projects/error.JPG. If I add it after the next block I get the same error.

    Code:
    $('#next').click(function(){
    var next = current + 1;
    if (next > total) next = total;
    if (current != total) {
    $('#pic' + current).fadeOut('slow');
    $('#pic' + next).fadeIn('slow');
    current = next;
    setHeight(current)
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
    
    $('#next').click(function(){
        var next = current + 1;
        if (next > total){
            next = total;
        }
     
        if (current !== total) {
            $('#pic' + next).fadeIn('slow', function(){ 
                $('#pic' + current).hide(); //hide the current pic after the next one is shown
            });
            current = next;
            setHeight(current);
            $('#number').html(current + ' of ' + total);
        }
     
        return false;
    });

  13. #13
    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 EricWatson View Post
    with your code I get a script error http://www.visibilityinherit.com/projects/error.JPG. If I add it after the next block I get the same error.
    Hmm, I just did a quick test and it would probably be better if the remainder of that code after the fadeIn would also be in the callback.
    Code:
    $('#next').click(function(){
        var next = current + 1;
        if (next > total){
            next = total;
        }
     
        if (current !== total) {
            $('#pic' + next).fadeIn('slow', function(){ 
                $('#pic' + current).hide(); //hide the current pic after the next one is shown
    
                current = next;
                setHeight(current);
                $('#number').html(current + ' of ' + total);
            });
        }
     
        return false;
    });
    Also, make sure that you only attach 1 event handler, i.e. if you use one of these blocks to test, make sure the other is commented out.

    Did you get a chance to see if that error occurred in a modern browser too? Internet Explorer's error messages aren't usually the easiest to interpret
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,630
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your continuied help. So I forgot. Doesnt work locally. Testing online I dont get the error but it unfortunatly makes the fliker worse. Sort of like two flickers. The only way I could get it to work was to use your first code. Here is what I used...

    Code JavaScript:
    var gallery = function() {
    var current = 1;
    var total = $('#photos b').length;
    $('#photos b').hide();
    $('#pic1').fadeIn('slow');
    $('#number').html('1 of ' + total );
    setHeight(1)
     
    $('#first').click(function(){
    var prev  = 1;
    if (current != 1) {
    $('#pic' + current).fadeOut('slow');
    setHeight(prev)
    $('#pic' + prev).fadeIn('slow');
    current = 1;
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
     
    $('#previous').click(function(){
    var prev  = current - 1;
    if (prev < 1) prev = 1;
    if (current != 1) {
    $('#pic' + current).fadeOut('slow');
    $('#pic' + prev).fadeIn('slow');
    current = prev;
    setHeight(current)
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
     
    $('#next').click(function(){
        var next = current + 1;
        if (next > total){
            next = total;
        }
     
        if (current !== total) {
            $('#pic' + next).fadeIn('slow', function(){ 
                $('#pic' + current).hide(); //hide the current pic after the next one is shown
            });
            current = next;
            setHeight(current);
            $('#number').html(current + ' of ' + total);
        }
     
        return false;
    });
     
    $('#last').click(function(){
    var next  = total;
    if (current != total) {
    $('#pic' + current).fadeOut('slow');
    $('#pic' + next).fadeIn('slow');
    current = total;
    setHeight(current)
    $('#number').html(current + ' of ' + total)
    }
    return false;
    });
     
    function setHeight(current) {}}
     
    /* fire gallery */
    $(document).ready(function(){
    gallery();    
    });

    again here is the test page with the original non working code. http://goo.gl/EP9E3


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
  •