SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    new to jQuery sliders and carousels; site gets completly garbled when java is off

    www.urlgone.com/b665d1/

    Hi everyone,

    As I wrote in the summary, I've had some success getting my site to look like I want it w/ the help of jQuery, but I've found that when java is turned off in the browser, things get messed up, particularly jCarousel lite.

    Does anyone have any suggestions on changes I can make to keep this site functional in these circumstances?

    Thanks


    code for the 1st carousel in index.php (best sellers):
    Code:
    <div id="newDemo">
    <div class="carousel main">
                <a href="#" class="prev2">&nbsp</a>
            
    <div class="new">
            <ul>
    <li>...</li>
         ...
         ...
    <li>...</li>
            </ul>
    </div>
    <a href="#" class="next2">&nbsp</a>
                <div class="clear"></div> 
               </div>
               </div>
    <script type="text/javascript">
    $(function() {
        $(".new").jCarouselLite({
            btnNext: ".next2",
            btnPrev: ".prev2",
            visible: 4
        });
    });
    </script>
    stylesheet entries for the 1st instance of the carousel (best sellers):
    Code:
    /*_____________________________________________ Start - Projects - jCarouselLiteDemo _____________________________________________*/
    
    #jCarouselLiteDemo .carousel  {
        padding: 10px 0 0 0;
        margin: 0 0 20px 10px;
        position: relative;     
        }
    
    #jCarouselLiteDemo .main {
            margin-left: 0px;
        }
    
    #jCarouselLiteDemo .carousel button { /*Don't remove this. we still use this for individual demos. only the front pages use images as of now*/
            float: left;
        }              
    
    #jCarouselLiteDemo .carousel a.prev, #jCarouselLiteDemo .carousel a.next {
            display: block;
            float: left;
            width: 30px;
            height: 143px;
            text-decoration: none;
            background: url("/images/home_page/imageNavLeft.gif") left 60px no-repeat;
        }
    
    #jCarouselLiteDemo .carousel a.next {
            background: url("/images/home_page/imageNavRight.gif") right 60px no-repeat;
        }
    
    #jCarouselLiteDemo .carousel a.next:hover {
            background-image: url("/images/home_page/imageNavRightHover.gif");
        }
    
    #jCarouselLiteDemo .carousel a.prev:hover {
            background-image: url("/images/home_page/imageNavLeftHover.gif");
        }    
    
    #jCarouselLiteDemo .carousel a:hover, #jCarouselLiteDemo .carousel a:active {
            border: none;
            outline: none;
        }                 
    
    #jCarouselLiteDemo .carousel .jCarouselLite {
            border: 0px solid black;
            float: left;
            background-color: #ffffff;
            /* Needed for rendering without flicker */
            position: relative;
            visibility: hidden;
            left: -5000px;
        }
    
    #jCarouselLiteDemo .carousel ul {
            margin: 0;
            }
    
    #jCarouselLiteDemo .carousel li img, 
    #jCarouselLiteDemo .carousel li p {
            background-color: #fff;
            width: 156px;
            height: 118px;
            margin: 0px 10px 0px 10px;
            }      
    
    
    
    #jCarouselLiteDemo .imageSlider li img, 
    #jCarouselLiteDemo .imageSlider li p, 
    #jCarouselLiteDemo .imageSliderExt li img , 
    #jCarouselLiteDemo .imageSliderExt li p {
            width: 400px;
            height: 300px;
    }         
    
    #jCarouselLiteDemo a img {
      border:0px solid #072B8A;
      margin: 0px 0px 0px 0px;
      vertical-align: top;
      }
      
    #jCarouselLiteDemo a:hover img {
      border:0px solid #95B3D7
      }
    
    /*_____________________________________________ End - Projects - jCarouselLiteDemo _____________________________________________*/

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by longhorn1999 View Post
    Air Purifiers | HEPA Air Purifier | Air Purifier Filters at Air Purifier NationI've found that when java is turned off in the browser, things get messed up, particularly jCarousel lite.
    Hssss!!! The name of the language is JavaScript, not Java. They are both completely different and unrelated programming languages.

    The demo page for jCarousel lite doesn't look all that useful too when JavaScript is disabled either.
    You may want to look for another carousel where their demo page doesn't look as munted when javascript is disabled.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doh! Java is not JavaScript. I should've known that but I'll be sure not to forget.

    Of course I also should have checked to see how jCarousel Lite deprecates (if I'm using that term correctly here) on the demo page. Thanks Paul.

    I just hope regular jCarousel fares better...


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
  •