SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    chrome/safari issue with Orbit slider

    Hello folks! I've been attempting to implement a new jquery slider into my site. I'm sooo close but it seems to have a problem in webkit browsers. Works fine in firefox and ie9

    Here is my site
    This is the slider i'm using

    I think the problem has to do with the noconflict function. The site is built on Magento which uses the prototype library. Added this jQuery.noConflict(); to the end of my jquery file.

    I'm currently calling the plugin like this


    Code:
    <script type="text/javascript">    
    jQuery(document).ready(function($) {
         $('#featured').orbit({
        });	
    
    });
    </script>
    Any help would be greatly appreciated, I am at my wits end.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    My webkit-based web browser gives a 404 error on this file:
    Code:
    http://www.februaryson.com/preview/skin/frontend/default/hellosonar/images/header-bck.png
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul, thanks for the heads up. The CSS was specifying an image that didn't exist so I removed it. Still can't get the slider to work in chrome or safari, any ideas?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    It looks like there are two possible solutions.

    One is to remove the 1px width and height from the featured element.
    Another is to remove the display:hidden from #featured and div.orbit

    The real question has to be though, since it works fine on the creators site, what are you doing on the page in terms of CSS that's causing the problem.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, I'll try that.

    I didn't change anything from the original file I downloaded. My best guess was that it wasn't playing nice with the prototype library

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by februaryson View Post
    Cool, I'll try that.

    I didn't change anything from the original file I downloaded. My best guess was that it wasn't playing nice with the prototype library
    Shall we stop guessing and find out? What happens when the parts that rely on prototype are removed?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So I took out the 1px X 1px from the featured element. It looks correct now, its just not pulling in the images.

    Good call, I'll remove the prototype code and see if the slider works. Unfotunately Magento is based almost totally around prototype so I'll still have to find a way for them to play nicely.

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by februaryson View Post
    So I took out the 1px X 1px from the featured element. It looks correct now, its just not pulling in the images.

    Good call, I'll remove the prototype code and see if the slider works. Unfotunately Magento is based almost totally around prototype so I'll still have to find a way for them to play nicely.
    If you still get the problem when prototype is removed, you then know that it's not what you feared.

    If the problem is fixed though, you now know exactly where to look for an answer.

    Either way, you're closer to a solution.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Paul, I did end up removing the prototype library and it was till broken. That narrows it down a lot. Definitely on my way to a solution.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,676
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by februaryson View Post
    Thanks again Paul, I did end up removing the prototype library and it was till broken. That narrows it down a lot. Definitely on my way to a solution.
    That's great to know. I've taken this opportunity to rename this thread to something that's more related to the issue at hand.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Sep 2011
    Location
    Bishkek, Kyrgyzstan
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had the same problem. I solved it by replacing "$(document).ready(function().." with "$(window).load(function().."

    spent two days before finding this solution though


Tags for this Thread

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
  •