jQuery Forum

Hi there,

I have created an accorion using simple slideup/slidedow jquery. I have a list of images outside of this accordion. When each image is clicked it opens the accordion tab relating to that image title. This works well.

I now want to scrollTo the accordion item that theimage link has opened. I have done using this little bit of jQuery:

1. $('html, body').animate({ scrollTop: target.offset().top }, 1000);

It work's but only when all the accordion items are closed when you click on the image. If one of the accordion items is already open then the scroll function goes too far or to a random place down the page.

How can I make this scroll to anchor acurate?

1. $('.tab-trigger-mobile').click(function(e) {
              
               e.preventDefault();
               var selectMobileTriggerID = $(this).attr('id');
               $('.accordion__head').removeClass('open');
               $('.accordion__content').slideUp();
              
               $('.accordion__content-' + selectMobileTriggerID).slideDown();
               $('.accordion__head-' + selectMobileTriggerID).addClass('open');
               $('.accordion__content-' + selectMobileTriggerID).ScrollTo();
              
               var target = $('.accordion__content-' + selectMobileTriggerID);
                   window.scrollTo(0, 0);
                   if( target.length ) {
                   event.preventDefault();
                  
                   $('html, body').animate({
                       scrollTop: target.offset().top
                   }, 1000);
               }
              
           });

Above is the full code used. Each image has the class of 'tab-trigger-mobile'.

Thank you

Hi All,

I am working on learning some code and come across this really cool site blocklevel.nl

I have worked out how they done the cool box transitions but the code is in mootools and I use jQuery,

Any ideas how to convert this moo tools code to jQuery?

1. BLOCKLEVEL.Blocks = new Class({
       options: {
           blocks: null
       },
   
       Implements: Options,
       initialize: function(options) {
           this.setOptions(options);
           this.addEvents();
       },
   
       addEvents: function() {
           this.options.blocks.each(function(block, i) {
               block.addEvents({
                   'mouseenter': function() {
                       if(!DOM.IPAD) {
                           this.setActive(i);
                       }
                   }.bind(this),
                   'mouseleave': function() {
                       if(!DOM.IPAD) {
                           this.setInactive(i);
                       }
                   }.bind(this),
                   'click': function(e) {
                       e.stop();
                       if(DOM.IPAD) {
                           this.setActive(i);
                           (function() {
                               this.setInactive(i);
                           }.delay(3000, this));
                       }
                   }.bind(this)
               });
           }.bind(this));
       },
   
       setActive: function(active) {
           if(!$('splash-fullscreen')) {
               this.options.blocks.each(function(block, i) {
                   if(active === i) {
                       block.addClass('hover');
                   } else {
                       block.removeClass('hover');
                   }
               }.bind(this));
           }
       },
   
       setInactive: function(i) {
           this.options.blocks[i].removeClass('hover');
       }
   });
   
   

Hi all,

I am working on a site and need the menu to slide down a content block and then load in the content for that page in to the box.

I found a tutorial which uses ajax to load in the content to the div with the id of 'content' which works well. So feel free to copy the code anyone who needs it.

So I need to know how I can adapt this code to slide down the content box before the content is loaded in to it.

Here is my HTML

1. <header>
            <ul>
                 <li><a href="about.php">about</a></li>
                 <li><a href="gallery.php">gallery</a></li>
                  <li><a href="suppliers.php">suppliers</a></li>
                   <li><a href="contact.php">contact</a></li>
         </ul>
   </header>
              
   <div id="content">
         <p>Home</p>
   </div>

Hello people,

I am trying to figure out how to use Isotope and Wordpress! So far I am quite lost but managed to get a simple page kind of working for Isotope!

I need to know what this line of code does and how it works so I can adapt it to control when the class width2 is added.

The main line of code that is confusing me is: if ( number % 7 % 2 === 1 ) {

Also this means I need to add a class of .number with a number inside to make some blocks a different size. Is there a way to add random classes and keep the isotope working? I am seeking a result like this.

1. $(function(){ var $container = $('#container'); // add randomish size classes - $container.find('.item').each(function(){ var $this = $(this), number = parseInt( $this.find('.number').text(), 10 ); if ( number % 7 % 2 === 1 ) { $this.addClass('width2'); } if ( number % 3 === 0 ) { $this.addClass('height2'); } }); $container.isotope({ itemSelector: '.item', masonry : { columnWidth: 240 } }); });

Hi All,

I am using this plugin for a carousel that shows more info on the items once the button is clicked.

I need to change the size of the image container as its too wide for my image. However when I change the size of .ca-item it then means my ca-content-wrapper is too short! Even after I set ca-content to a larger width.

Any ideas?

I don't have anything online as working on local host but here is my css and the html is as the plugin original.

1. /* Circular Content Carousel Style */
   .ca-container{
       position:relative;
       margin:25px auto 20px auto;
       width:855px;
       height:450px;
   }
   .ca-wrapper{
       width:100%;
       height:100%;
       display:block;
       position:relative;
   }
   .ca-item
   {
       position:relative;
       float:left;
       width:200px;
       height:100%;
       text-align:center;
   }
   .ca-item-main{
       /*padding:20px;*/
       position:absolute;
       width:200px;
       top:0px;
       left:0px;
       right:0px;
       bottom:0px;
       background:#fff;
       overflow:hidden;
   }
   .ca-more
   {
       position: absolute;
       bottom: 10px;
       right:0px;
       padding:4px 15px;
       font-weight:bold;
       background: #ccbda2;
       text-align:center;
       color: white;
       font-family: "Georgia","Times New Roman",serif;
       font-style:italic;
       text-shadow:1px 1px 1px #897c63;
   }
   .ca-close
   {
       position:absolute;
       top:10px;
       right:10px;
       background:#fff url(../img/shop/redwine/cross.png) no-repeat center center;
       width:27px;
       height:27px;
       text-indent:-9000px;
       outline:none;
       -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
       -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
       box-shadow:1px 1px 2px rgba(0,0,0,0.2);
       opacity:0.7;
   }
   .ca-close:hover{
       opacity:1.0;
   }
   
   .ca-icon{
       width:104px;
       height:427px;
       position:relative;
       margin:0 auto;
       background:transparent url(../images/animal1.png) no-repeat center center;
   }
   
   .ca-content-wrapper{
       background:#b0ccc6;
       position:absolute;
       width:0; /* expands to width of the wrapper minus 1 element */
       height:440px;
       top:5px;
       text-align:left;
       z-index:10000;
       overflow:hidden;
   }
   .ca-content{
       width:595px;
       overflow:hidden;
       background:#f00;
       z-index:100;
   }
   
   .ca-nav span{
       width:25px;
       height:38px;
       background:transparent url(../img/shop/redwine/arrows.png) no-repeat top left;
       position:absolute;
       top:50%;
       margin-top:-19px;
       left:-40px;
       text-indent:-9000px;
       opacity:0.7;
       cursor:pointer;
       z-index:100;
   }
   .ca-nav span.ca-nav-next{
       background-position:top right;
       left:auto;
       right:-40px;
   }
   .ca-nav span:hover{
       opacity:1.0;
   }
   

Hi all,

I have created a slideshow which shows 3 images in a row and then slides them across the screen.

Trouble is in safari it does not load. It's a bit random the reaction safari has so hard to explain. No site up yet its just a test on my localhost.

Here is the code and if you could help me add some code to pre-load the images before the slideshow starts that may just fix it!

Thank you in advance for taking the time to look :)

1. $(function($){   
   
       var sliderWidth = 0;
       var imageWidth = $('#image-slider img:first').width();
       var count = 0;
       var imageCount = 0;
       var imageLeft = 0;
       resizeOverlay();
       repositionImages();
      
       setInterval(function(){
           $('a.move-right').trigger('click');
       },6000)
      
       $('#image-slider img').each(function(){
           sliderWidth = sliderWidth + $(this).width();
   //        $(this).addClass('move-'+count);
       //    count++;
       });
   
       $('#image-slider').width(sliderWidth);
      
       function resizeOverlay() {
           var overlayWidth = ($(window).width() - 950) / 2;
           $('#left-overlay, #right-overlay').css({
               'opacity':'0.5',
               'width':overlayWidth
           });
       }
      
       function repositionImages() {
           imageLeft = 950 - (($(window).width() - 950) / 2);
           $('#image-slider img').css('left','-'+imageLeft+'px');
       }
   
       $('a.move-left').click(function(){
           if($('#image-slider img:not(":animated")').length != 0) {
               $('#image-slider img:first').addClass('move-0');
               firstImage = $('#image-slider').children('img.move-0').clone();
               $('#image-slider').width(sliderWidth+imageWidth);
               $('#image-slider').append(firstImage);
               $('#image-slider img').animate({'left':'-='+imageWidth}, 500 ,function(){
                   $('#image-slider img:last').removeClass('move-0');
                   $('#image-slider').children('img.move-0').remove();
                   $('#image-slider img').css('left','-'+imageLeft+'px');
                   $('.move-0').removeClass('move-0');
               })
           }
           return false;
       });
   
       $('a.move-right').click(function(){
           if($('#image-slider img:not(":animated")').length != 0) {
               $('#image-slider img:last').addClass('move-5');
               firstImage = $('#image-slider').children('img.move-5').clone();
               $('#image-slider').width(sliderWidth+imageWidth);
               $('#image-slider').prepend(firstImage);
               $('#image-slider img').css('left','-'+(imageLeft+imageWidth)+'px');
               $('#image-slider img').animate({'left':'+='+imageWidth}, 500 ,function(){
                   $('#image-slider img:first').removeClass('move-5');
                   $('#image-slider').children('img.move-5').remove();
                   $('#image-slider img').css('left','-'+imageLeft+'px');
                   $('.move-5').removeClass('move-5');
               })
           }
           return false;
       });
      
       $(window).resize(function(){
           repositionImages();
           resizeOverlay();
       })
   
   /* END OF SCRIPT */
   })
   

The HTML:

1. <div id="image-container">
                   <div id="left-overlay">&nbsp;</div>
                   <div id="right-overlay">&nbsp;</div>
                   <div id="button-holder">
                       <a href="#" class="move-left">Move Left</a>
                       <a href="#" class="move-right">Move Right</a>
                   </div>
                   <div id="image-slider">
                       <img src="img/slideshow/slide1.jpg" alt="Image 01" />
                       <img src="img/slideshow/slide2.jpg" alt="Image 02" />
                       <img src="img/slideshow/slide3.jpg" alt="Image 03" />
                   </div>
               </div>
   

I have two jquery plugins running.

JQuery tools and slimbox a lightbox plugin

1. <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> <script src="js/libs/slimbox2.js"></script>
   

One creates an overlay (jquerytools)

1. <li><a href="#" class="library" rel="#overtwo"></a></li> <div class="simple_overlay" id="overtwo"> <p>Contents of my overlay</p> </div>

This runs the overlay:

1. $("a[rel]").overlay();

The other created a lightwindow (simple2.js)

1. <a href="img/slideshow/slide1.png" class="gallery" rel="lightbox"></a> <a href="img/slideshow/slide2.png" class="gallery" rel="lightbox"></a>

This runs the lightwindow

1. // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED) if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) { jQuery(function($) { $("a[rel^='lightbox']").slimbox({ overlayOpacity: 0.6, loop: "true" }, null, function(el) { return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); }); }); }

Both work individually but not on the same page due to both plugins using the re attribute. Firebug comes back with this ewrror:

uncaught exception: Could not find Overlay: lightbox

How can I overcome this issue?

Hi all,

I am new to JQM and using it to create a responsive website. All works fine but I get a black box with blue text saying loading each time I click to another page.

I tried adding this to the top of my js page and still the loading message is show. I am using the latest version of JQM.

1. $(document).bind("mobileinit", function(){
           $.mobile.pageLoading(true);
       });

Hi there,

I am new to JQM and have a couple of questions.

I have created a responsive website using CSS3 media queries. Then I have added another menu and put my pages inside this div:-

1. <div tabindex="0" data-role="page" data-theme="f" >
       <a data-theme="a" href="#" class="showMenu menuBtn ui-btn-left ui-btn ui-btn-corner-all ui-shadow ui-btn-up-a"><span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"></a>
2. <!-- All my page content -->
3. <div>

This works but my desktop version is acting strange re the navigation. JQM classes have been added to my desktop menu and a loading screen appears when I click through the nav.

How can I only use JQM when the site is viewed on a mobile device?

Thank you,