Results 1 to 9 of 9

Thread: Fade-in Slideshow: dynamic sizing/centering && jQuery.noConflict() conflict

  1. #1
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default Fade-in Slideshow: dynamic sizing/centering && jQuery.noConflict() conflict

    1) Script Title: Ultimate fade-in slideshow v2.0

    2) Script URL (on DD): fade-in slideshow

    3) Describe problem: Two issues. First:

    It seems that the function "jQuery.noConflict()" on line 15 of the script is causing some sort of jQuery conflict. ( ??? )

    When I set everything up as directed, I got no slideshow. Nothing at all, not even errors. I spent quite some time trying to solve it, until I realized that no scripts using jQuery were functioning at all.

    Commenting out the "jQuery.noConflict()" line seems to have solved the problem. The slideshow works, all the other jQuery items on my page work. Has anyone else experienced this problem? What is up?? Thanks.

    Edit: Second issue resolved. I had to change the banner background to an x-repeatable image, then made the whole banner about 800px and wrapped the slideshow in a second div using the background image alone. Thanks, guys.


    I'm using this script to display a site banner. Originally, the banner image was displayed statically as the background of an empty <div> : This allowed me to set the width of the div to 100% and center the image, effectively creating a banner that is centered and has a dynamic width identical to the width of the browser window.

    Now that I'm using the slideshow, the banner is left-aligned and quite a bit larger than most browser windows (the images are about 1400px). This means that the banner is no longer centered and also forces a horizontal scrollbar, which I really don't want.

    I was wondering if anyone had some great idea about how to solve that one... I'm kind of at a loss.

    Thanks a bunch, guys!
    Last edited by traq; 09-14-2009 at 07:26 PM.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,878
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    For the first issue, what other jQuery script is on your page that ceases to work with jQuery.noconflict()? This can happen depending on how the other script accesses the $() function of jQuery, though the issue is something that should be corrected in the script itself, and isn't a problem with noconflict() per say.

    For the second issue, I'm not sure I understand entirely your set up. In general though, the script does center the image within the slide if the slideshow's overall dimensions exceed that of the shown image.
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    traq (09-15-2009)

  4. #3
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    The page also uses DDsmoothmenu and a little fade-in-on-mouseover script. All three scripts worked separately, but together were not working at all - like they weren't even installed. I was systematically removing stuff to see what went wrong, and the slideshow seemed to be the key. With jQuery.noConflict() commented out, everything seems to work again.

    As for the second issue, don't worry, I've figured it out. It wasn't a problem with the script anyway, just an issue of creative implementation!
    But in case you were interested:

    Originally:
    I had a banner for my page, about 1500px wide (so it would cover most screen widths). The banner was basically a wide background with the featured graphic in about 500px in the center.

    In order to keep the banner centered regardless of browser width, I had it set as the background image in a 100% width div:
    Code:
    #banner{
    width: 100%;
    height: 250px;
    margin: 0 auto;
    background: url('image,jpg') no-repeat center center;
    ...
    }
    When I changed the static banner image into a slideshow, the images were left-justified (because they were wider than the browser width) and forced the page past 100% width, resulting in horizontal scrollbars.

    My solution was to change the the background of the banner to something x-tileable and make the featured part of the graphic separate, only about 750px wide. This way, I could put them in the slideshow and center it above a static background. Kinda hard to explain succinctly, but you can see it here.
    Code:
    #banner{  //this div wraps around #bannerslides
    height: 250px;
    width: 100%;
    margin-top: 110px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background: url('bannerX.jpg') repeat-x center center;  //this is the repeatable BG image
    }
    #bannerslides{  //slideshow loads in this div
    // images are 750px x 250px and blend into background of #banner div above
    margin: 0 auto;
    text-align: center;
    }
    Last edited by traq; 09-15-2009 at 05:29 AM.

  5. #4
    Join Date
    Aug 2004
    Posts
    9,878
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    As far as DD Smooth Menu, putting it on the same page as Fade In Slideshow works for me. Since both scripts reference the jQuery library, the former an older 1.2.6 version, did you remember to remove that from the page when both scripts are present:

    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    A sample page with both running would be:


    Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="fadeslideshow.js">
    
    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    
    
    var mygallery2=new fadeSlideShow({
    	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "always",
    	togglerid: "fadeshow2toggler"
    })
    
    </script>
    
    
    <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
    <link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />
    
    <script type="text/javascript" src="ddsmoothmenu.js">
    
    /***********************************************
    * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    </script>
    
    <script type="text/javascript">
    
    ddsmoothmenu.init({
    	mainmenuid: "smoothmenu1", //menu DIV id
    	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
    	classname: 'ddsmoothmenu', //class added to menu's outer DIV
    	//customtheme: ["#1c5a80", "#18374a"],
    	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })
    
    ddsmoothmenu.init({
    	mainmenuid: "smoothmenu2", //Menu DIV id
    	orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
    	classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
    	//customtheme: ["#804000", "#482400"],
    	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
    })
    
    </script>
    
    <body>
    
    <div id="fadeshow1"></div>
    
    <br />
    
    <div id="fadeshow2"></div>
    
    <div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
    <a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a>  <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>
    </div>
    
    
    <h2>Example 1</h2>
    
    <div id="smoothmenu1" class="ddsmoothmenu">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Item 1</a></li>
    <li><a href="#">Folder 0</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#">Folder 1</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Folder 3.1.1</a>
    		<ul>
        		<li><a href="#">Sub Item 3.1.1.1</a></li>
        		<li><a href="#">Sub Item 3.1.1.2</a></li>
        		<li><a href="#">Sub Item 3.1.1.3</a></li>
        		<li><a href="#">Sub Item 3.1.1.4</a></li>
        		<li><a href="#">Sub Item 3.1.1.5</a></li>
    		</ul>
        </li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
      </ul>
    </li>
    <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
    </ul>
    <br style="clear: left" />
    </div>
    
    
    <h2 style="margin-top:200px">Example 2</h2>
    
    <div id="smoothmenu2" class="ddsmoothmenu-v">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Item 1</a></li>
    <li><a href="#">Folder 0</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#">Folder 1</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Folder 2</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Folder 3.1.1</a>
    		<ul>
        		<li><a href="#">Sub Item 3.1.1.1</a></li>
        		<li><a href="#">Sub Item 3.1.1.2</a></li>
        		<li><a href="#">Sub Item 3.1.1.3</a></li>
        		<li><a href="#">Sub Item 3.1.1.4</a></li>
        		<li><a href="#">Sub Item 3.1.1.5</a></li>
    		</ul>
        </li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
      </ul>
    </li>
    <li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
    </ul>
    <br style="clear: left" />
    </div>
    DD Admin

  6. #5
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    Yes, I only link to jQuery 1.3.2.

    I have found it works with jQuery.noConflict() without the fade-in script. Can you see any possible cause/workaround (I'm don't have much experience with jQuery)?
    Code:
    $(document).ready(function(){
      $(".fade").fadeTo("fast", 0.7);
      $(".fade").hover(function(){
        $(this).fadeTo("fast", 1);
      });
      $(".fade").mouseleave(function(){
        $(this).fadeTo("fast", 0.7);
      });
    });
    Also, how much of an issue do you think this might be? It seemed to be working fine, so is there any downside to not using noConflict()?
    thanks!

  7. #6
    Join Date
    Aug 2004
    Posts
    9,878
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    Hmm the two scripts running on the same page and with noconflict() enabled works for me as mentioned actually. Have you tried removing any other script other than these two to narrow down the issue?

    Also, how much of an issue do you think this might be? It seemed to be working fine, so is there any downside to not using noConflict()?
    noconflict() is only useful when your page contains scripts that use other libraries such as Prototype that also make use of "$" as a function. If your page doesn't utilize these scripts, then it's not an issue.
    DD Admin

  8. The Following User Says Thank You to ddadmin For This Useful Post:

    traq (09-17-2009)

  9. #7
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by ddadmin View Post
    Hmm the two scripts running on the same page and with noconflict() enabled works for me as mentioned actually. Have you tried removing any other script other than these two to narrow down the issue?
    Do you mean the slideshow and the fade-in? Or the sildeshow and the smoothmenu? I have tried all script combinations now, and it is the fade-in script that conflicts. it runs with the smoothmenu, but not the slideshow (with noConflict() enabled).
    Quote Originally Posted by ddadmin View Post
    noconflict() is only useful when your page contains scripts that use other libraries such as Prototype that also make use of "$" as a function. If your page doesn't utilize these scripts, then it's not an issue.
    The page in question does not, but I do use several prototype scripts regularly in various projects. Is there something about the syntax that noConflict() picks up? Do you know of a way to avoid the unintended conflict?

    Thanks much!

  10. #8
    Join Date
    Aug 2004
    Posts
    9,878
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    Do you mean the slideshow and the fade-in? Or the sildeshow and the smoothmenu? I have tried all script combinations now, and it is the fade-in script that conflicts. it runs with the smoothmenu, but not the slideshow (with noConflict() enabled).

    Well the fade in is the slideshow, or Fade In Slideshow (heh). So in other words, I'm referring to the Fade In Slideshow and Smooth Menu running on the same page, with noconflict() kept in, which works for me.If you save the above sample page I posted inside the code box below, it should run for you as well...
    DD Admin

  11. #9
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    I'm sorry; by "fade-in" I meant the mouseover script I mentioned above (this one:
    Code:
    $(document).ready(function(){
      $(".fade").fadeTo("fast", 0.7);
      $(".fade").hover(function(){
        $(this).fadeTo("fast", 1);
      });
      $(".fade").mouseleave(function(){
        $(this).fadeTo("fast", 0.7);
      });
    });
    ), not the slideshow. I'm really sorry for the mixup. It never crossed my mind that it would be confusing to refer to it that way.

    To clarify, yes, the two DD scripts (fade-in slideshow & smoothmenu) work fine together.

    It is something in the mouseover fade-in-&-out script that conflicts with noConflict(). I know it's not a DD script, but if you (or anyone else!) happens to see the cause of the conflict, I was hoping to figure out a solution.

    Again, thanks for all the help so far!

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
  •