SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why is this javascript breaking my other scripts?

    I'm currently using the following code so that when I hover over my navigation images it fades then in when hovered over.

    Code:
    <script type="text/javascript">$(function() {$(".fade-in").css("opacity","0");$(".fade-in").hover(function () {$(this).stop().animate({opacity: 1.0}, "220");},function () {$(this).stop().animate({opacity: 0}, "2000");});});</script>
    It works fine but when I have any other javascripts, such as a lightbox or image swapper, only one of them works. I want a lightbox script on the page so I need to figure out how to get both scripts working together. Note I'm not java developer, I just copied and pasted the code for my website so it's entirely possible, and probable, that I'm making a fundamental error here.

    Thanks for any help.

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems to be based on exactly where I add the jquery code. For example if I use the following code then the lightbox works but not the fader.

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="design/lightbox/prototype.js"></script>
    <script type="text/javascript" src="design/lightbox/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="design/lightbox/lightbox.js"></script>
    <script type='text/javascript'>$(function() {$(".fade-in").css("opacity","0");$(".fade-in").hover(function () {$(this).stop().animate({opacity: 1.0}, "220");},function () {$(this).stop().animate({opacity: 0}, "2000");});});</script>
    But if I use the following code then the lightbox doesn't work but the fader does.

    Code:
    <script type="text/javascript" src="design/lightbox/prototype.js"></script>
    <script type="text/javascript" src="design/lightbox/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="design/lightbox/lightbox.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script type='text/javascript'>$(function() {$(".fade-in").css("opacity","0");$(".fade-in").hover(function () {$(this).stop().animate({opacity: 1.0}, "220");},function () {$(this).stop().animate({opacity: 0}, "2000");});});</script>
    Anybody know what's happening here?


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
  •