Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 41
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post

    Help with jQuery Carousel?

    I'm hoping someone can help me with a jQuery carousel (jQueryMyCarousel http://www.enova-tech.net/eng/lab/jmycarousel/3). Let me start with I'm somewhat of a noob with JS. Now to add to things, I'm trying to add this carousel to an existing page where I already have a working jQuery tab UI, but for some reason I can't get the carousel to work. To add to it, I'm working within a CMS that I don't have a ton of control over (and I know they have errors within their markup that I can't control) so I've had to reference the jQuery JS and CSS a bit differently, which worked fine for my tabs, but the carousel still doesn't want to come to together (I can't get the images to show in a horizontal fashion like they are supposed to and the left/ right arrows don't show). Can someone PLEASE help me? Here's my code:

    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
    <script type="text/javascript">// <![CDATA[
      $(document).ready(function() {  
    
    $("#tabs").tabs(); 
    
    $('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" mce_href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />').appendTo($('head')); 
    });
    // ]]></script>
    <script src="JMyCarousel.js" type="text/javascript">// <![CDATA[
       $(function() {  
            $(".JMyCarousel").jMyCarousel({  
                visible: '100%',  
                eltByElt: true  
            });  
        });  
    $('<link href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" mce_href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" rel="stylesheet" type="text/css" />').appendTo($('head')); 
    });
    // ]]></script>
    <span class="pageCenterTitle">Welcome to Missouri German Shepherd Rescue!</span>&nbsp;&nbsp;&nbsp; <strong>Check out some of our special featured dogs:</strong> 
    <table style="width: 715px; height: 100%;" border="0" cellpadding="5">
    <tbody>
    <tr>
    <td rowspan="3" width="559">
    <table style="width: 100%; height: 100%;" border="0" cellpadding="5">
    <tbody>
    <tr>
    <td width="545">
    <div id="tabs" style="width: 500px;">
    <ul>
    <li><a href="#fragment-1">DeeDee</a></li>
    <li><a href="#fragment-2">Missy</a></li>
    <li><a href="#fragment-3">Sampson</a></li>
    <li><a href="#fragment-4">Roco</a></li>
    </ul>
    <div id="fragment-1">
    <h2>DeeDee</h2>
    <table style="width: 100%;" border="0" cellpadding="5">
    <tbody>
    <tr>
    <td width="80%" height="100%" valign="top">
    <p><strong>Female | approx. 1 year 4 months<a href="/animals/detail?AnimalID=3164913"><img style="border: 0pt none;" title="DeeDee" src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nutsflscqao.jpg" alt="DeeDee" hspace="5" vspace="5" width="165" height="216" align="right" /></a><br /><br /> </strong>Poetry in motion!</p>
    <p>DeeDee is an absolutely beautiful sleek black girl with lots of energy to   burn! She'd be a great dog for an active family who is willing to give her   the love, attention, discipline and daily exercise she needs.&nbsp;&nbsp;&nbsp; <a href="/animals/detail?AnimalID=3164913">Learn More About DeeDee</a></p>
    <table style="width: 206px; height: 62px;" border="0" cellpadding="2">
    <tbody>
    <tr>
    <td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&amp;FormID=1410&amp;ContactsFormsID="><span>Adoption Application</span></a></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
    </div>
    <div id="fragment-2">
    <h2>Missy</h2>
    <table style="width: 100%;" border="0" cellpadding="5">
    <tbody>
    <tr>
    <td width="80%" height="100%" valign="top">
    <p><strong>Female | approx. 6 year 2 months<a href="animals/detail?AnimalID=3136834"><img style="border: 0pt none;" title="Missy" src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nbqnubuw20m.jpg" alt="Missy" hspace="5" vspace="5" width="165" height="216" align="right" /></a><br /><br /> </strong>Complete sweetheart!</p>
    <p>Missy is such a sweet girl who was fortunate enough to avoid a tragic end.  She is calm, loving and very well behaved.  Missy is a complete lovebug who simply wants to snuggle with you.<a href="/animals/detail?AnimalID=3136834">Learn More About Missy</a></p>
    <table style="width: 206px; height: 62px;" border="0" cellpadding="2">
    <tbody>
    <tr>
    <td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&amp;FormID=1410&amp;ContactsFormsID="><span>Adoption Application</span></a></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
    </div>
    <div id="fragment-3">
    <h2>Sampson</h2>
    <table style="width: 100%; height: 100%;" border="0" cellpadding="5">
    <tbody>
    <tr>
    <td width="80%" height="100%" valign="top">
    <p><strong>Male | approx. 4-5 years<a href="/animals/detail?AnimalID=2950199"><img style="border: 0pt none;" title="Sampson" src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nagekpw1vin.jpg" alt="Sampson" hspace="5" vspace="5" width="142" height="215" align="right" /></a></strong></p>
    <p>Big, stunning&nbsp;bi-color boy&nbsp;who thinks he's a puppy!</p>
    <p><strong>SAMPSON</strong>&nbsp;was also dumped by a puppy mill and had spent his entire life&nbsp;confined to a tiny crate 24/7.&nbsp;&nbsp;He's a stunning bi-color GSD, and a wonderfully sweet&nbsp;fellow who's learned that life is good for a change.&nbsp; He LOVES running around in the play yard, likes soft stuffed toys&nbsp;(jumps and twirls&nbsp;in the air&nbsp;with them) and loves his walks, playtime, attention, the sun, the fresh air.&nbsp;&nbsp;With a little patience and training, he'll be a WOW!-ser of a&nbsp;companion!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="/animals/detail?AnimalID=2950199">Learn More About Sampson</a></p>
    <table style="width: 207px; height: 62px;" border="0" cellpadding="2">
    <tbody>
    <tr>
    <td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&amp;FormID=1410&amp;ContactsFormsID="><span>Adoption Application</span></a></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
    </div>
    <div id="fragment-4">
    <h2>Roco</h2>
    <table style="width: 100%;" border="0" cellpadding="2">
    <tbody>
    <tr>
    <td width="100%" height="100%" valign="top">
    <p><strong>Male | approx. 4 years</strong><a href="/animals/detail?AnimalID=2875674"><img style="border: 0pt none;" title="Roco" src="http://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nvoaek3ewjl.jpg" alt="Roco" hspace="5" vspace="5" width="164" height="215" align="right" /></a></p>
    <p>A classic beauty and a serious GSD!</p>
    <p><strong>ROCO </strong>is a classic black and tan GSD with amazing potential! He'd love an active owner who is willing to give him the love, attention, discipline and daily exercise he needs.&nbsp; Roco is a serious dog and needs an experienced owner.&nbsp; He's adores&nbsp;men (a true&nbsp;man's dog)&nbsp;and gets along with women who are strong leaders.&nbsp;&nbsp;He gets along with many other dogs, especially females and submissive dogs.&nbsp;&nbsp;&nbsp;<a href="/animals/detail?AnimalID=1765783">Learn More About Roco</a></p>
    <table style="width: 204px; height: 62px;" border="0" cellpadding="2">
    <tbody>
    <tr>
    <td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&amp;FormID=1410&amp;ContactsFormsID="><span>Adoption Application</span></a></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
    </div>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    <td width="130" align="center" valign="top">
    <p><strong>Other Ways To Help:</strong></p>
    </td>
    </tr>
    <tr>
    <td align="center" valign="top">
    <table style="width: 100%;" border="0" cellpadding="2">
    <tbody>
    <tr>
    <td valign="top"><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/info/donate"><span>Donate</span></a> <br /><br /></td>
    </tr>
    <tr>
    <td valign="top"><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/user/login?refererPageID=72&amp;keyID=1411&amp;referer=/forms/form_edit.phpQu8FormID=1411"><span>Foster</span></a><br /><br /></td>
    </tr>
    <tr>
    <td valign="top"><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/user/login?refererPageID=72&amp;keyID=1413&amp;referer=/forms/form_edit.phpQu8FormID=1413"><span>Volunteer</span></a> <br /><br /></td>
    </tr>
    </tbody>
    </table>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </td>
    </tr>
    <tr>
    <td align="center" valign="top">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2">
    <table style="width: 100%;" border="0" cellpadding="10">
    <tbody>
    <tr>
    <td style="background-repeat: no-repeat;" colspan="2" align="center" valign="top" background="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nkl7yepcvoi.gif">
    <p><span style="color: #000000;"><strong>&nbsp;&nbsp; Our Favorite Success Stories!</strong></span></p>
    <div class="JMyCarousel" style="overflow: hidden; position: relative; z-index: 2; left: 0px; width: 90%; height: 175px;"><input class="next" style="opacity: 0.6; z-index: 200; position: absolute; right: 0px; top: 30px;" type="button" /> <input class="prev" style="opacity: 0.6; z-index: 200; position: absolute; left: 0px; top: 30px;" type="Button" /> 
    <ul style="overflow: hidden; float: left; display: inline;">
    <a class="thickbox" style="overflow: hidden; float: left;" title="Pete Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nucm5y5yiz9.jpg" alt="" width="200" height="150" /></a>
    <li style="overflow: hidden; float: left; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Ralph (previously Taylor) With His New Family" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152njvjhdrkdgj.jpg" alt="" width="200" height="150" /></a></li>
    <li style="overflow: hidden; float: left; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Roz Getting Ready For A Car Ride" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nsos6uemx0d.jpg" alt="" width="200" height="150" /></a></li>
    <li style="overflow: hidden; float: left; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Sid (aka Zed) Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nbamtbhmn5m.jpg" alt="" width="200" height="150" /></a></li>
    <li style="overflow: hidden; float: left; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Pete and Sid Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152njhkiyyv9gx.jpg" alt="" width="200" height="150" /></a></li>
    </ul>
    </div>
    <h3><span style="font-size: 10pt;"><a href="http://mogsrescue.rescuegroups.org/animals/stories">Read all of our success stories now!</a></span></h3>
    </td>
    </tr>
    <tr>
    <td style="background-repeat: no-repeat;" width="50%" valign="top" background="http://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152n9dsekpcbtx.gif">
    <p><span style="color: #000000;"><strong>The MOGS Team In Action!</strong></span></p>
    <p><span style="font-size: 10pt;"><span style="color: #000000;">Sure a good amount       of our time is<br />devoted to rescuing and rehoming <br />these fantastic dogs.&nbsp; But       it doesn't <br />stop there!</span></span>&nbsp; <a href="/info/display?PageID=10303"><span style="font-size: 10pt;">Read More</span></a><span style="font-size: 10pt;"><br /> <br /> </span></p>
    </td>
    <td style="background-repeat: no-repeat;" width="50%" background="http://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nprimq50hbh.gif">
    <p><span style="color: #000000;"><strong>Is a German Shepherd Right For you?</strong><br /><br /><span style="font-size: 10pt;">A German Shepherd can make<br />a great family addition. But <br />before you bring one in your<br />home, be sure it's the right dog <br />for you.</span></span><span style="font-size: 10pt;"> <a href="http://mogsrescue.rescuegroups.org/info/display?PageID=9955&amp;popup=Yes">Read More</a></span></p>
    <p>&nbsp;</p>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <div>{SaD300x160d/}</div>
    And if you prefer to look at it on the page it's at http://mogsrescue.rescuegroups.org/i...9909&popup=Yes
    Last edited by AChicken9; 04-23-2011 at 09:08 PM.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    <script src="JMyCarousel.js" type="text/javascript">// <![CDATA[
       $(function() {  
            $(".JMyCarousel").jMyCarousel({  
                visible: '100%',  
                eltByElt: true  
            });  
        });  
    $('<link href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" mce_href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" rel="stylesheet" type="text/css" />').appendTo($('head')); 
    });
    // ]]></script>
    These should be two separate <script> items; one to load the library and one for the code:
    Code:
    <script src="JMyCarousel.js" type="text/javascript"></script>
    <script type="text/javascript">
    // <![CDATA[
       $(function() {  
            $(".JMyCarousel").jMyCarousel({  
                visible: '100%',  
                eltByElt: true  
            });  
        });  
    $('<link href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" mce_href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" rel="stylesheet" type="text/css" />').appendTo($('head')); 
    });
    // ]]></script>

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    Thanks I updated that, but it still doesn't seem to load my images in 1 line horizontally... It seems like it's really close, but loads my 4 images as more of a 2x2 grid vs. 1x4 if that makes any sense? Any other thoughts?

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Syntax error in the following:
    Code:
    <script src="JMyCarousel.js" type="text/javascript"></script>
    <script type="text/javascript">
    // <![CDATA[
       $(function() {  
            $(".JMyCarousel").jMyCarousel({  
                visible: '100%',  
                eltByElt: true  
            });  
        });  << delete this line
    $('<link href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" mce_href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" rel="stylesheet" type="text/css" />').appendTo($('head')); 
    }); << or it might be better to delete this instead
    // ]]></script>
    Oops! Soz.
    Last edited by AndrewGSW; 04-23-2011 at 11:25 PM. Reason: Alternative

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The previous syntax error probably prevented the css file from loading.

    If this doesn't fully resolve, then I notice you have applied style attributes including float:left, overflow:hidden etc. These may not be required as the carousel css and JS may be sufficient. I would temporarily remove these style attributes and then, perhaps, add them back in bit by bit.

  • #6
    New Coder
    Join Date
    Jan 2011
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    Thanks but still no luck...GRRR!

    I'm thinking it has something to do with referencing the actual jMyQuery.JS file... but here's my problem, I only have one generic "files" tool within the CMS that I can access... which doesn't work to reference. Is there another way? Shouldn't I be able to reference the .JS file from Enova's site, much like I did the CSS? i.e.

    Code:
    $('<link href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" mce_href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" rel="stylesheet" type="text/css" />').appendTo($('head'));
    Or like this?

    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
    Last edited by AChicken9; 04-24-2011 at 12:02 AM.

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    So you were using
    Code:
    <script src="JMyCarousel.js" type="text/javascript">
    but don't have the .js file stored locally????

    Yes you can (and need to!) use one of the methods you mention. Visit their site to find the correct location of the .js file.

    Added: how did you expect it to find the .js file??
    Last edited by AndrewGSW; 04-24-2011 at 12:16 AM. Reason: Must just say

  • #8
    New Coder
    Join Date
    Jan 2011
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    Well I did, but I must have reverted back to an old version of it when I was messing with it... I've put in the reference to the JS file.... and removed the float: left attributes...

    Now at least they are in a linear fashion, but how do I limit them to the constraints of the carousel so they aren't breaking my page (i.e. in FireFox especially)?

    Sorry for being so dense, I REALLY appreciate your help!

    http://mogsrescue.rescuegroups.org/i...9909&popup=Yes

    And for what it's worth, here's my code now:

    Code:
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
    <script type="text/javascript">// <![CDATA[
      $(document).ready(function() {  
    
    $("#tabs").tabs(); 
    
    $('<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" mce_href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />').appendTo($('head')); 
    });
    // ]]></script>
    <script src="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.min.js" type="text/javascript"></script>
    <script type="text/javascript">// <![CDATA[
       $(function() {  
            $(".JMyCarousel").jMyCarousel({  
                visible: '100%',  
                eltByElt: true  
            });  
    	});
    $('<link href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" mce_href="http://www.enova-tech.net/files/jMyCarousel/jMyCarousel.css" rel="stylesheet" type="text/css" />').appendTo($('head'));
    // ]]></script>
    <span class="pageCenterTitle">Welcome to Missouri German Shepherd Rescue!</span>&nbsp;&nbsp;&nbsp; <strong>Check out some of our special featured dogs:</strong> 
    <table style="width: 715px; height: 100%;" border="0" cellpadding="5">
    <tbody>
    <tr>
    <td rowspan="3" width="559">
    <table style="width: 60%; height: 100%;" border="0" cellpadding="5">
    <tbody>
    <tr>
    <td width="808">
    <div id="tabs" style="width: 500px;">
    <ul>
    <li><a href="#fragment-1">DeeDee</a></li>
    <li><a href="#fragment-2">Missy</a></li>
    <li><a href="#fragment-3">Sampson</a></li>
    <li><a href="#fragment-4">Roco</a></li>
    </ul>
    <div id="fragment-1">
    <h2>DeeDee</h2>
    <table style="width: 90%;" border="0" cellpadding="5">
    <tbody>
    <tr>
    <td width="80%" height="100%" valign="top">
    <p><strong>Female | approx. 1 year 4 months<a href="/animals/detail?AnimalID=3164913"><img style="border: 0pt none;" title="DeeDee" src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nutsflscqao.jpg" alt="DeeDee" hspace="5" vspace="5" width="165" height="216" align="right" /></a><br /><br /> </strong>Poetry in motion!</p>
    <p>DeeDee is an absolutely beautiful sleek black girl with lots of energy to   burn! She'd be a great dog for an active family who is willing to give her   the love, attention, discipline and daily exercise she needs.&nbsp;&nbsp;&nbsp; <a href="/animals/detail?AnimalID=3164913">Learn More About DeeDee</a></p>
    <table style="width: 206px; height: 62px;" border="0" cellpadding="2">
    <tbody>
    <tr>
    <td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&amp;FormID=1410&amp;ContactsFormsID="><span>Adoption Application</span></a></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
    </div>
    <div id="fragment-2">
    <h2>Missy</h2>
    <table style="width: 90%;" border="0" cellpadding="5">
    <tbody>
    <tr>
    <td width="80%" height="100%" valign="top">
    <p><strong>Female | approx. 6 year 2 months<a href="animals/detail?AnimalID=3136834"><img style="border: 0pt none;" title="Missy" src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nbqnubuw20m.jpg" alt="Missy" hspace="5" vspace="5" width="165" height="216" align="right" /></a><br /><br /> </strong>Complete sweetheart!</p>
    <p>Missy is such a sweet girl who was fortunate enough to avoid a tragic end.  She is calm, loving and very well behaved.  Missy is a complete lovebug who simply wants to snuggle with you.<a href="/animals/detail?AnimalID=3136834">Learn More About Missy</a></p>
    <table style="width: 206px; height: 62px;" border="0" cellpadding="2">
    <tbody>
    <tr>
    <td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&amp;FormID=1410&amp;ContactsFormsID="><span>Adoption Application</span></a></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
    </div>
    <div id="fragment-3">
    <h2>Sampson</h2>
    <table style="width: 90%; height: 100%;" border="0" cellpadding="5">
    <tbody>
    <tr>
    <td width="80%" height="100%" valign="top">
    <p><strong>Male | approx. 4-5 years<a href="/animals/detail?AnimalID=2950199"><img style="border: 0pt none;" title="Sampson" src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nagekpw1vin.jpg" alt="Sampson" hspace="5" vspace="5" width="142" height="215" align="right" /></a></strong></p>
    <p>Big, stunning&nbsp;bi-color boy&nbsp;who thinks he's a puppy!</p>
    <p><strong>SAMPSON</strong>&nbsp;was also dumped by a puppy mill and had spent his entire life&nbsp;confined to a tiny crate 24/7.&nbsp;&nbsp;He's a stunning bi-color GSD, and a wonderfully sweet&nbsp;fellow who's learned that life is good for a change.&nbsp; He LOVES running around in the play yard, likes soft stuffed toys&nbsp;(jumps and twirls&nbsp;in the air&nbsp;with them) and loves his walks, playtime, attention, the sun, the fresh air.&nbsp;&nbsp;With a little patience and training, he'll be a WOW!-ser of a&nbsp;companion!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="/animals/detail?AnimalID=2950199">Learn More About Sampson</a></p>
    <table style="width: 207px; height: 62px;" border="0" cellpadding="2">
    <tbody>
    <tr>
    <td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&amp;FormID=1410&amp;ContactsFormsID="><span>Adoption Application</span></a></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
    </div>
    <div id="fragment-4">
    <h2>Roco</h2>
    <table style="width: 90%;" border="0" cellpadding="2">
    <tbody>
    <tr>
    <td width="80%" height="100%" valign="top">
    <p><strong>Male | approx. 4 years</strong><a href="/animals/detail?AnimalID=2875674"><img style="border: 0pt none;" title="Roco" src="http://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nvoaek3ewjl.jpg" alt="Roco" hspace="5" vspace="5" width="164" height="215" align="right" /></a></p>
    <p>A classic beauty and a serious GSD!</p>
    <p><strong>ROCO </strong>is a classic black and tan GSD with amazing potential! He'd love an active owner who is willing to give him the love, attention, discipline and daily exercise he needs.&nbsp; Roco is a serious dog and needs an experienced owner.&nbsp; He's adores&nbsp;men (a true&nbsp;man's dog)&nbsp;and gets along with women who are strong leaders.&nbsp;&nbsp;He gets along with many other dogs, especially females and submissive dogs.&nbsp;&nbsp;&nbsp;<a href="/animals/detail?AnimalID=1765783">Learn More About Roco</a></p>
    <table style="width: 204px; height: 62px;" border="0" cellpadding="2">
    <tbody>
    <tr>
    <td><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/forms/comment?New=&amp;FormID=1410&amp;ContactsFormsID="><span>Adoption Application</span></a></td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    <h4><a href="/animals/browse">Browse all of our available dogs</a></h4>
    </div>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    <td width="130" align="center" valign="top">
    <p><strong>Other Ways To Help:</strong></p>
    </td>
    </tr>
    <tr>
    <td align="center" valign="top">
    <table style="width: 100%;" border="0" cellpadding="2">
    <tbody>
    <tr>
    <td align="center" valign="top"><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/info/donate"><span>Donate</span></a> <br /><br /></td>
    </tr>
    <tr>
    <td align="center" valign="top"><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/user/login?refererPageID=72&amp;keyID=1411&amp;referer=/forms/form_edit.phpQu8FormID=1411"><span>Foster</span></a><br /><br /></td>
    </tr>
    <tr>
    <td align="center" valign="top"><a class="Bigbutton" onclick="this.blur();" href="http://mogsrescue.rescuegroups.org/user/login?refererPageID=72&amp;keyID=1413&amp;referer=/forms/form_edit.phpQu8FormID=1413"><span>Volunteer</span></a> <br /><br /></td>
    </tr>
    </tbody>
    </table>
    <p><br /> {SaD160x160/}</p>
    <p>&nbsp;</p>
    </td>
    </tr>
    <tr>
    <td align="center" valign="top">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2">
    <table style="width: 100%;" border="0" cellpadding="10">
    <tbody>
    <tr>
    <td style="background-repeat: no-repeat;" colspan="2" align="center" valign="top" background="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nqv2mqyarm4.gif">
    <p><span style="color: #000000;"><strong>&nbsp;&nbsp; Our Favorite Success Stories!</strong></span></p>
    <div class="JMyCarousel" style="overflow: hidden; position: relative; z-index: 2; left: 0px; width: 75%; height: 175px;"><input class="next" style="opacity: 0.6; z-index: 200; position: absolute; right: 0px; top: 30px;" type="button" /> <input class="prev" style="opacity: 0.6; z-index: 200; position: absolute; left: 0px; top: 30px;" type="Button" /> 
    <ul style="overflow: hidden; float: left; display: inline;">
    <a class="thickbox" style="overflow: hidden;" title="Pete Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nucm5y5yiz9.jpg" alt="" width="200" height="150" /></a>
    <li style="overflow: hidden; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Ralph (previously Taylor) With His New Family" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152njvjhdrkdgj.jpg" alt="" width="200" height="150" /></a></li>
    <li style="overflow: hidden; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Roz Getting Ready For A Car Ride" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nsos6uemx0d.jpg" alt="" width="200" height="150" /></a></li>
    <li style="overflow: hidden; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Sid (aka Zed) Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nbamtbhmn5m.jpg" alt="" width="200" height="150" /></a></li>
    <li style="overflow: hidden; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Pete and Sid Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152njhkiyyv9gx.jpg" alt="" width="200" height="150" /></a></li>
    </ul>
    </div>
    <h3><span style="font-size: 10pt;"><a href="http://mogsrescue.rescuegroups.org/animals/stories">Read all of our success stories now!</a></span></h3>
    </td>
    </tr>
    <tr>
    <td style="background-repeat: no-repeat;" width="50%" valign="top" background="http://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152n9dsekpcbtx.gif">
    <p><span style="color: #000000;"><strong>The MOGS Team In Action!</strong></span></p>
    <p><span style="font-size: 10pt;"><span style="color: #000000;">Sure a good amount       of our time is<br />devoted to rescuing and rehoming <br />these fantastic dogs.&nbsp; But       it doesn't <br />stop there!</span></span>&nbsp; <a href="/info/display?PageID=10303"><span style="font-size: 10pt;">Read More</span></a><span style="font-size: 10pt;"><br /> <br /> </span></p>
    </td>
    <td style="background-repeat: no-repeat;" width="50%" background="http://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nprimq50hbh.gif">
    <p><span style="color: #000000;"><strong>Is a German Shepherd Right For you?</strong><br /><br /><span style="font-size: 10pt;">A German Shepherd can make<br />a great family addition. But <br />before you bring one in your<br />home, be sure it's the right dog <br />for you.</span></span><span style="font-size: 10pt;"> <a href="http://mogsrescue.rescuegroups.org/info/display?PageID=9955&amp;popup=Yes">Read More</a></span></p>
    <p>&nbsp;</p>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    Last edited by AChicken9; 04-24-2011 at 12:33 AM.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    When I look at your page the width of the carousel div and its contained ul is huge (2448px). Try changing the width of the div from 75% to a pixel size (500px ?).

    Added: Yeah, 500px looks good

    and you have two next and prev buttons - best to have one of each.
    Last edited by AndrewGSW; 04-24-2011 at 12:52 AM. Reason: Works

  • #10
    New Coder
    Join Date
    Jan 2011
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    Hmm, I dropped it down to 550 but it was still huge, dropped it down to even 300 and it's still off the page... What the heck?

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    width: 500px; <<<

  • #12
    New Coder
    Join Date
    Jan 2011
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    I did include the "px"... here it's even set to 200px and no such luck.

    Code:
    <div class="JMyCarousel" style="overflow: hidden; position: relative; z-index: 2; left: 0px; width: 200px; height: 175px;"><input class="next" style="opacity: 0.6; z-index: 200; position: absolute; right: 0px; top: 30px;" type="button" /> <input class="prev" style="opacity: 0.6; z-index: 200; position: absolute; left: 0px; top: 30px;" type="Button" /> 
    <ul style="overflow: hidden; float: left; display: inline;">
    <a class="thickbox" style="overflow: hidden;" title="Pete Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nucm5y5yiz9.jpg" alt="" width="200" height="150" /></a>
    <li style="overflow: hidden; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Ralph (previously Taylor) With His New Family" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152njvjhdrkdgj.jpg" alt="" width="200" height="150" /></a></li>
    <li style="overflow: hidden; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Roz Getting Ready For A Car Ride" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nsos6uemx0d.jpg" alt="" width="200" height="150" /></a></li>
    <li style="overflow: hidden; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Sid (aka Zed) Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152nbamtbhmn5m.jpg" alt="" width="200" height="150" /></a></li>
    <li style="overflow: hidden; display: inline;"> <a class="thickbox" style="overflow: hidden; float: left;" title="Pete and Sid Enjoying A Day At The Lake" href=" "> <img src="https://d1ihe8iurr5ss7.cloudfront.net/webpages/s2152njhkiyyv9gx.jpg" alt="" width="200" height="150" /></a></li>
    </ul>
    </div>
    <h3><span style="font-size: 10pt;"><a href="http://mogsrescue.rescuegroups.org/animals/stories">Read all of our success stories now!</a></span></h3>
    </td>
    </tr>
    What am I missing?
    Last edited by AChicken9; 04-24-2011 at 01:03 AM.

  • #13
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    It works if I amend it on the client-side by setting the width of the div to 500px - see attachment.
    Is the width okay if you disable the carousel js and css? In which case it's the carousel which is changing your styles.
    If not, then there must be (?) something else over-writing your width setting.
    Attached Thumbnails Attached Thumbnails Help with jQuery Carousel?-doggy1.jpg  

  • Users who have thanked AndrewGSW for this post:

    AChicken9 (04-24-2011)

  • #14
    New Coder
    Join Date
    Jan 2011
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post
    Thanks, sorry had to hop off line... if I disable the CSS/ JS my carousel goes back to displaying as a list (single column) vs. horizontal. I think you're right that there is another width/ style conflicting though...

    It's weird, because I update the width, then save the page via the CMS, but when I look at the code client side, my width change doesn't seem to be there (i.e. it's still at 100% even though I changed it to 500px). Even when I go back in an edit the page via the CMS it says 500px, but anytime I look at it client side, say in Firebug it says 100%. If I change it client side to 500px it works.

    I just can't figure out what's conflicting with it....
    Last edited by AChicken9; 04-24-2011 at 04:19 PM.

  • #15
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    It would be best to ensure that your pages are all saved (and uploaded) as the most recent versions. Hopefully in your CMS there is a magic button to 'Update All Pages'. Perhaps add a comment (or something..) to the page or css and check that it's present on the client-side.

    It's best to do this first, otherwise you might spend a lot of time looking for an issue that isn't there


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •