SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQuery Novice to Ninja and Firefox

    I am on Ch.4 and need some help with the custom lightbox. It works in Safari and Chrome, but not Firefox (3.6.8). I've been floundering on this one for awhile and could use some help with the cross browser struggle.

    Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi kanesaws, welcome to SitePoint!

    Could you post a link to what you have currently, or some code that we could test out? Otherwise there's not much anyone can do.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response.

    This is the JS:

    $(document).ready(function(){
    $('a.lightbox').click(function(e) {
    $('body').css('overflow-y', 'hidden'); // hide scrollbars!

    $('<div id="overlay"></div>')
    .css('top', $(document).scrollTop())
    .css('opacity', '0')
    .animate({'opacity': '0.5'}, 'slow')
    .appendTo('body');

    $('<div id="lightbox"></div>')
    .hide()
    .appendTo('body');

    $('<img />')
    .attr('src', $(this).attr('href'))
    .load(function() {
    positionLightboxImage();
    })
    .click(function() {
    removeLightbox();
    })
    .appendTo('#lightbox');

    return false;;
    });
    });

    function positionLightboxImage() {
    var top = ($(window).height() - $('#lightbox').height()) / 2;
    var left = ($(window).width() - $('#lightbox').width()) / 2;
    console.log("The calculated position is:");
    console.log(top,left);
    $('#lightbox')
    .css({
    'top': top + $(document).scrollTop(),
    'left': left
    })
    .fadeIn();
    console.log('A jQuery selection:');
    console.log($('#lightbox'));
    }

    function removeLightbox() {
    $('#overlay, #lightbox')
    .fadeOut('slow', function() {
    $(this).remove();
    $('body').css('overflow-y', 'auto'); // show scrollbars!
    });
    }


    The HTML that it refers to looks like this:

    <a class="lightbox" href="images/molotov.png">molotov</a>

  4. #4
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everybody please calm down. I figured it out.

    Get rid of: console.log("The calculated position is:");
    console.log(top,left);

    Found the info in the "Novice to Ninja" forum.

    Research before posting. Lesson learned.


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
  •