SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jcarousel is not working properly at my site

    Hello,
    We have jcarousel on our forum site which rotates automatically. It is vbulleting forum. In fact originally it was working fine with old design and rotating images automatically in horizontal direction with a set of 5 images visible at a time and total 12 images in set.

    But we have upgraded our forum design in last week and I started getting issues with Jcarousel scroller.

    Our site URL is http://newsite.naturalparenting.com.au

    While old site design is still active at
    Parenting Forums - Natural Parenting Forum


    At new design when we implemented jcarousel scroller it is showing only one image in a horizontal row at jscroller and it disappears immediately and after 3-4 min it do reappear again. When I inspected it using firebug I have noticed that other images are coming below vertically not horizontally, really strange. Also I noticed another thing is that it is not updating width at element.style in firebug for UL tag. It is showing fix width 220 px all time. I think due to that all images appearing vertically one after one rather than horizontally.

    It is really very strange issue for me. I have tried all ways to fix it but alas !!!

    Any help would be greatly appreciated.

    Code:
    <style type="text/css">
    .jcarousel-skin-tango .jcarousel-container {
     -moz-border-radius: 0px;
     background: transparent;
     border: 0px solid #CEC8B7;
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl {
     direction: rtl;
    }
    .jcarousel-skin-tango .jcarousel-container-horizontal {
     width: 695px;
     padding: 20px 30px;
    }
    .jcarousel-skin-tango .jcarousel-container-vertical {
     width: 75px;
     height: 220px;
     padding: 40px 20px;
    }
    .jcarousel-skin-tango .jcarousel-clip-horizontal {
     height: 220px;
     margin-left: auto;
     margin-right: auto;
     width: 675px;
    }
    .jcarousel-skin-tango .jcarousel-clip-vertical {
     width:  75px;
     height: 220px;
    }
    .jcarousel-skin-tango .jcarousel-item {
     width: 75px;
     height: 75px;
    }
    .jcarousel-skin-tango .jcarousel-item-horizontal {
     margin-left: 0;
     margin-right: 10px;
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
     margin-left: 10px;
     margin-right: 0;
    }
    .jcarousel-skin-tango .jcarousel-item-vertical {
     margin-bottom: 10px;
    }
    .jcarousel-skin-tango .jcarousel-item-placeholder {
     background: #fff;
     color: #000;
    }
    /**
     *  Horizontal Buttons
     */
    .jcarousel-skin-tango .jcarousel-next-horizontal {
     position: absolute;
     top: 83px;
     right: 5px;
     width: 32px;
     height: 32px;
     cursor: pointer;
    /* background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll right top;*/
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
     left: 5px;
     right: auto;
     background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll right top;
    }
    .jcarousel-skin-tango .jcarousel-next-horizontal:hover {
     background-position: -32px 0;
    }
    .jcarousel-skin-tango .jcarousel-next-horizontal:active {
     background-position: -64px 0;
    }
    .jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
     cursor: default;
     background-position: -96px 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-horizontal {
     position: absolute;
     top: 83px;
     left: 5px;
     width: 31px;
     height: 31px;
     cursor: pointer;
     /*background: transparent url(images/checkout/nivo_nav.png) no-repeat scroll left top;*/
    }
    .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
     left: auto;
     right: 31px;
     /*background-image: url(images/checkout/nivo_nav.png);*/
    }
    .jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
     background-position: -32px 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-horizontal:active {
     background-position: -64px 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
     cursor: default;
     background-position: -96px 0;
    }
    /**
     *  Vertical Buttons
     */
    .jcarousel-skin-tango .jcarousel-next-vertical {
     position: absolute;
     bottom: 5px;
     left: 43px;
     width: 32px;
     height: 32px;
     cursor: pointer;
     background: transparent url(next-vertical.png) no-repeat 0 0;
    }
    .jcarousel-skin-tango .jcarousel-next-vertical:hover {
     background-position: 0 -32px;
    }
    .jcarousel-skin-tango .jcarousel-next-vertical:active {
     background-position: 0 -64px;
    }
    .jcarousel-skin-tango .jcarousel-next-disabled-vertical, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
     cursor: default;
     background-position: 0 -96px;
    }
    .jcarousel-skin-tango .jcarousel-prev-vertical {
     position: absolute;
     top: 5px;
     left: 43px;
     width: 32px;
     height: 32px;
     cursor: pointer;
     background: transparent url(prev-vertical.png) no-repeat 0 0;
    }
    .jcarousel-skin-tango .jcarousel-prev-vertical:hover {
     background-position: 0 -32px;
    }
    .jcarousel-skin-tango .jcarousel-prev-vertical:active {
     background-position: 0 -64px;
    }
    .jcarousel-skin-tango .jcarousel-prev-disabled-vertical, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
     cursor: default;
     background-position: 0 -96px;
    }
    
    #upsell {
    margin-bottom: 10px;
    margin-top: 0;
    text-align: center;
    }
    
    #upsell li {
     border: 0 dashed #CCCCCC;
     float: left;
     height: 220px;
     list-style: none outside none;
     margin: 0 10px 0 0;
     padding: 2px;
     width: 125px;
    }
    </style>  
    <script type="text/javascript" src="/resources/scripts/jquery-1.4.2.min.js"></script>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Hi ninadbe. Welcome to SitePoint.

    I don't see a scroller on your old site (where should we be looking?) and the newsite link doesn't seem to work.

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph thanks for reply.

    Sorry for typo

    Old site URL
    The Pill and cancer

    Just goto any thread below first post there is jcarolusel scroller


    New Site URL

    Parenting Forums - Natural Parenting Forum

    Just goto any thread below first post there is jcarolusel scroller.

    e.g Natural fertility over 40

    Thanks

  4. #4
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone have idea from where it sets width at element.style at jcarolusel ?
    At my site it initially shows width : 1768px at element.style. But when we refresh page it adjust width to 220px automatically which in turn arranging all images vertically.

    Code:
    element.style {
        left: -50px;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: relative;
        top: 0;
        width: 220px;
    }
    Anyone have idea from where this CSS code coming at jcarolusel?


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
  •