Search Results

Search found 11 results on 1 pages for 'serialscroll'.

Page 1/1 | 1 

• issues horizontal scrolling using jQuery.ScrollTo / jQuery.SerialScroll

  - by kapil.israni

  Hi, I am trying to develop auto horizontal scrolling for our website using - jQuery.ScrollTo / jQuery.SerialScroll. I am not sure if this is the best jquery library to do that, but if there's something better, please let me know. Here's the behavior that I want, check out foursquare's "Recent Activity" list. The data that will refresh will come from a ajax request that I make every few seconds using window.setInterval. I am not really a CSS/java script guy so I havent been able to figure out jQuery.SerialScroll. Here's the website - look at the "Live job Feeds" list. Currently the list does refresh the data coming from the ajax call, but I dont see the effect, the animation, in fact I dont even think serialScroll is being used. Right now I am doing a - $('#feed-ticker').prepend(content) to pre-append the newly arrived data. You can do a view source to look at the current code. Any help would be really appreciated. Thanks.

  Read the article

• issues with horizontal scrolling using jQuery.ScrollTo / jQuery.SerialScroll

  - by kapil.israni

  Hi, I am trying to develop auto horizontal scrolling for our website using - jQuery.ScrollTo / jQuery.SerialScroll. I am not sure if this is the best jquery library to do that, but if there's something better, please let me know. Here's the behavior that I want, check out foursquare's "Recent Activity" list. The data that will refresh will come from a ajax request that I make every few seconds using window.setInterval. I am not really a CSS/java script guy so I havent been able to figure out jQuery.SerialScroll. Here's the website - look at the "Live job Feeds" list. Currently the list does refresh the data coming from the ajax call, but I dont see the effect, the animation, in fact I dont even think serialScroll is being used. Right now I am doing a - $('#feed-ticker').prepend(content) to pre-append the newly arrived data. You can do a view source to look at the current code. Any help would be really appreciated. Thanks.

  Read the article

• Help with jquery plugin ScrollTo/SerialScroll with keyboard controls

  - by adamwstl

  I'm having a really hard time implementing the jquery plugin serialScroll/scrollTo with Keyboard arrows. Here's the site: http://www.subrb.com/jstest My JS code is in keyboard.js. I can't get anything to happen at all. Thanks in advance

  Read the article

• Prepending items in serialscroll

  - by Zack

  Hi, I am using serialscroll plugin for jquery by Ariel Flesler. I am trying to make the vertical scroller to have continues loop without reverting back to first item (which is default functionality). To have continues loop of items i tried to append the items which is working fine and able to achieve when i click on "NEXT". However problem seems to be with "Previous" link where i am trying to prepend the items at the top, it is pending the items however changing the visible items. I understand that prepending the items is causing the index of items to change which is normal. So what i am looking for it to keep showing the visible items even when prepending. Please see this URL where i have put the problem i am facing : http://www.resourceskit.com/test/ Please suggest. Thanks

  Read the article

• Having a hard time implementing jquery serialScroll to a website. Need help!

  - by Martin Defatte

  Here's the page I am attempting to implement it on. www.yosoh.com/2010/advertising/beyond/ I have a custom script with figures out the width of all the images, adds it up, then sets the width of that page... I'd like to be able to set the arrows at the top to scroll to the next div (div.portfolioImage). I've followed Ariel Fischer's demo and documentation as best I can... but something keeps escaping me. I've finally gotten some "movement" on page load.. but to tell you the truth, I can't figure out if it's my html structure, css styles, or implementation of serialScroll causing the issue. here's the code for the buttons: <ul id="portfolioNav"> <li><a href="" id="prev">&larr;</a></li> <li><a href="" id="next">&rarr;</a></li> </ul> Here's the script, as it is right now: $('#mainContent').css('overflow', 'hidden'); $('#mainContent').serialScroll({ items:'.portfolioItem', prev:'a#prev', next:'a#next', axis: 'x', duration:1200, force:true, stop:true, lock:false, easing:'easeOutQuart', jump: true });

  Read the article

• Can't get ScrollTo to work with keyboard arrows

  - by adamwstl

  I'm trying to setup the Jquery plugin SerialScroll with Ariel's added keyboard controls. I'm calling these three JS files: serialScroll.js scrollTo.js keyboard.js (the keyboard control snippet) Html I'm trying to manipulate. Want it to jump from ind-photo to ind-photo on arrow left and right. <div id="photos"> <div class="ind-photo"><img src="2.jpg" /></div> <div class="ind-photo"><img src="3.jpg" /></div> </div> I can't get it to work at all. I know there are likely slight things that are going to be off, but this isn't working at all. Thanks in advance.

  Read the article

• <plugin> not a function

  - by bah

  Hi, I've been trying to solve this mystery almost 2 hours, this is giving me a headache. I tried 2 plug-ins already and I'm always getting "* is not a function". My code is exactly like examples so I don't know why it's not working. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>asd</title> <script type="text/javascript" src="jquery.js"></script> <script type='text/javascript' src='serial/jquery.scrollTo'></script> <script type='text/javascript' src='serial/jquery.serialScroll'></script> <script type="text/javascript"> $(document).ready(function(){ $('#slider').serialScroll({ items:'li', offset:-230, //when scrolling to photo, stop 230 before reaching it (from the left) start:1, //as we are centering it, start at the 2nd duration:1200, force:true, stop:true, lock:false, cycle:false, //don't pull back once you reach the end easing:'easeOutQuart', //use this easing equation for a funny effect jump: true //click on the images to scroll to them }); }); </script> </head> <body> <div id="slider"> <ul> <li><img width="500" height="500" src="dummy/dummy.jpg" alt="Css Template Preview" /></li> <li><img width="500" height="500" src="dummy/dummy1.jpg" alt="Css Template Preview" /></li> <li><img width="500" height="500" src="dummy/dummy2.jpg" alt="Css Template Preview" /></li> <li><img width="500" height="500" src="dummy/dummy3.jpg" alt="Css Template Preview" /></li> </ul> </div> </body> </html> I must be missing something essential there because I see nothing what's wrong. I'm using jQuery 1.4.2. and there are plug-ins I've tried - Easy Slider, jQuery serial scroll

  Read the article

• "'0.offsetWidth' is null or not an object" - Coda Slider - Javascript Error Question

  - by bgadoci

  I implemented the Coda Slider tutorial successfully that is located here: http://jqueryfordesigners.com/coda-slider-effect/ The slider works great but I am getting a javascript error that I am not sure how to fix. The error says: '0.offsetWidth' is null or not an object coda-slider.js, line 19 character 3 Not sure how to fix it. Anyone have any ideas? Here is my js and css (don't think I need to upload the HTML but let me know if that helps). JS (coda-slider.js) // when the DOM is ready... $(document).ready(function () { var $panels = $('#slider .scrollContainer > div'); var $container = $('#slider .scrollContainer'); // if false, we'll float all the panels left and fix the width // of the container var horizontal = true; // float the panels left if we're going horizontal if (horizontal) { $panels.css({ 'float' : 'left', 'position' : 'relative' // IE fix to ensure overflow is hidden }); // calculate a new width for the container (so it holds all panels) $container.css('width', $panels[0].offsetWidth * $panels.length); <------line 19 } // collect the scroll object, at the same time apply the hidden overflow // to remove the default scrollbars that will appear var $scroll = $('#slider .scroll').css('overflow', 'hidden'); // apply our left + right buttons $scroll .before('<img class="scrollButtons left" src="/images/layout/navigation/scroll_left.png" />') .after('<img class="scrollButtons right" src="/images/layout/navigation/scroll_right.png" />'); // handle nav selection function selectNav() { $(this) .parents('ul:first') .find('a') .removeClass('selected') .end() .end() .addClass('selected'); } $('#slider .navigation').find('a').click(selectNav); // go find the navigation link that has this target and select the nav function trigger(data) { var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0); selectNav.call(el); } if (window.location.hash) { trigger({ id : window.location.hash.substr(1) }); } else { $('ul.navigation a:first').click(); } // offset is used to move to *exactly* the right place, since I'm using // padding on my example, I need to subtract the amount of padding to // the offset. Try removing this to get a good idea of the effect var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1; var scrollOptions = { target: $scroll, // the element that has the overflow // can be a selector which will be relative to the target items: $panels, navigation: '.navigation a', // selectors are NOT relative to document, i.e. make sure they're unique prev: 'img.left', next: 'img.right', // allow the scroll effect to run both directions axis: 'xy', onAfter: trigger, // our final callback offset: offset, // duration of the sliding effect duration: 500, // easing - can be used with the easing plugin: // http://gsgd.co.uk/sandbox/jquery/easing/ easing: 'swing' }; // apply serialScroll to the slider - we chose this plugin because it // supports// the indexed next and previous scroll along with hooking // in to our navigation. $('#slider').serialScroll(scrollOptions); // now apply localScroll to hook any other arbitrary links to trigger // the effect $.localScroll(scrollOptions); // finally, if the URL has a hash, move the slider in to position, // setting the duration to 1 because I don't want it to scroll in the // very first page load. We don't always need this, but it ensures // the positioning is absolutely spot on when the pages loads. scrollOptions.duration = 1; $.localScroll.hash(scrollOptions); }); CSS #slider { margin-left: 35px; position: relative; width: 875px; } .scroll { position: relative; width: 875px; height: 268px; overflow: auto; /* fix for IE to respect overflow */ background: #FFFFFF scroll 0; } .scrollContainer div.panel { position: relative; height: 210px; width: 875px; /* change to 560px if not using JS to remove rh.scroll */ } .scrollButtons { position: absolute; top: 115px; cursor: pointer; } .scrollButtons.left { left: -20px; } .scrollButtons.right { right: -20px; }

  Read the article

• Need help on Coda slider tabs to move inside an overflow:hidden div

  - by Reden

  I'm not too good at javascript. and hope I can get a bit of help. I'm using Coda Slider 2.0, and have designed it to where the tabs are another slider to the right of the main slider, and each item. Basically like this mootools plugin http://landofcoder.com/demo/mootool/lofslidernews/index2.1.html Problem is the items will not scroll. How do I make the items (or tabs to the right) scroll down as the slider rotates? Otherwise the slider will show the 4th slide but not scroll to the 4th item on the right, but Thanks everyone. Here is the Coda-Slider plugin: // when the DOM is ready... $(document).ready(function () { var $panels = $('#slider .scrollContainer > div'); var $container = $('#slider .scrollContainer'); // if false, we'll float all the panels left and fix the width // of the container var horizontal = true; // float the panels left if we're going horizontal if (horizontal) { $panels.css({ 'float' : 'left', 'position' : 'relative' // IE fix to ensure overflow is hidden }); // calculate a new width for the container (so it holds all panels) $container.css('width', $panels[0].offsetWidth * $panels.length); } // collect the scroll object, at the same time apply the hidden overflow // to remove the default scrollbars that will appear var $scroll = $('#slider .scroll').css('overflow', 'hidden'); // apply our left + right buttons $scroll .before('<img class="scrollButtons left" src="images/scroll_left.png" />') .after('<img class="scrollButtons right" src="images/scroll_right.png" />'); // handle nav selection function selectNav() { $(this) .parents('ul:first') .find('a') .removeClass('selected') .end() .end() .addClass('selected'); } $('#slider .navigation').find('a').click(selectNav); // go find the navigation link that has this target and select the nav function trigger(data) { var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0); selectNav.call(el); } if (window.location.hash) { trigger({ id : window.location.hash.substr(1) }); } else { $('ul.navigation a:first').click(); } // offset is used to move to *exactly* the right place, since I'm using // padding on my example, I need to subtract the amount of padding to // the offset. Try removing this to get a good idea of the effect var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1; var scrollOptions = { target: $scroll, // the element that has the overflow // can be a selector which will be relative to the target items: $panels, navigation: '.navigation a', // selectors are NOT relative to document, i.e. make sure they're unique prev: 'img.left', next: 'img.right', // allow the scroll effect to run both directions axis: 'xy', onAfter: trigger, // our final callback offset: offset, // duration of the sliding effect duration: 500, // easing - can be used with the easing plugin: // http://gsgd.co.uk/sandbox/jquery/easing/ easing: 'swing' }; // apply serialScroll to the slider - we chose this plugin because it // supports// the indexed next and previous scroll along with hooking // in to our navigation. $('#slider').serialScroll(scrollOptions); // now apply localScroll to hook any other arbitrary links to trigger // the effect $.localScroll(scrollOptions); // finally, if the URL has a hash, move the slider in to position, // setting the duration to 1 because I don't want it to scroll in the // very first page load. We don't always need this, but it ensures // the positioning is absolutely spot on when the pages loads. scrollOptions.duration = 1; $.localScroll.hash(scrollOptions); /////////////////////////////////////////////// // autoscroll /////////////////////////////////////////////// // start to automatically cycle the tabs cycleTimer = setInterval(function () { $scroll.trigger('next'); }, 2000); // how many milliseconds, change this to whatever you like // select some trigger elements to stop the auto-cycle var $stopTriggers = $('#slider .navigation').find('a') // tab headers .add('.scroll') // panel itself .add('.stopscroll') // links to the stop class div .add('.navigation') // links to navigation id for tabs .add("a[href^='#']"); // links to a tab // this is the function that will stop the auto-cycle function stopCycle() { // remove the no longer needed stop triggers clearInterval(cycleTimer); // stop the auto-cycle itself $buttons.show(); // show the navigation buttons document.getElementById('stopscroll').style.display='none'; // hide the stop div document.getElementById('startscroll').style.display='block'; // block the start div } // bind stop cycle function to the click event using namespaces $stopTriggers.bind('click.cycle', stopCycle); /////////////////////////////////////////////// // end autoscroll /////////////////////////////////////////////// // edit to start again /////////////////////////////////////////////// // select some trigger elements to stop the auto-cycle var $startTriggers_start = $('#slider .navigation').find('a') // tab headers .add('.startscroll'); // links to the start class div // this is the function that will stop the auto-cycle function startCycle() { // remove the no longer needed stop triggers $buttons.hide(); // show the navigation buttons $scroll.trigger('next'); // directly to the next first cycleTimer = setInterval(function () { // now set timer again $scroll.trigger('next'); }, 5000); // how many milliseconds, change this to whatever you like document.getElementById('stopscroll').style.display='block'; // block the stop div document.getElementById('startscroll').style.display='none'; // hide the start div } // bind stop cycle function to the click event using namespaces $startTriggers_start.bind('click.cycle', startCycle); /////////////////////////////////////////////// // end edit to start /////////////////////////////////////////////// });

  Read the article

• How do I control the direction of the scroll on my coda slider?

  - by lightingwrist

  Hello, I have a coda slider and am unable to determine the direction of the scroll. I have 3 panels that I want to scroll left to right. Sometimes it scrolls left to right, sometimes up and down, and sometimes horizontally. How do I lock it down to go the direction I want? Here is the HTML: <body> <div id="slider_home" class="round_10px"> <ul class="navigation_home"> <li><a href="#scroll_Parents" class="round_10px">Information For Parents</a></li> <li><a href="#scroll_Materials" class="round_10px">Print Materials</a></li> <li><a href="#scroll_Resources" class="round_10px">Online Resources</a></li> </ul> <div id="scroll_bg_home"> <div class="scroll_home"> <div class="scrollContainer_home"> <div class="panel_home" id="scroll_Parents"> content </div> <div class="panel_home" id="scroll_Materials"> content </div> <div class="panel_home" id="scroll_Resources"> content </div> </div> </div> </div> </div> </body> Here is the CSS: #wrapper {width:550px;margin:0px auto;} #intro {padding-bottom:10px;} h2 {margin:0;margin-bottom:14px;padding:0;} #slider {width:631px;margin:10px auto 0px auto;position:relative;} #scroll_bg{height:360px;width:590px;overflow:hidden;position:relative;clear:left;background:#FFFFFF url(images/) no-repeat; margin:0px auto 0px auto} .scroll{ background:transparent; width:550px; height:370px; padding:0px; margin:0px auto; overflow:hidden; } .scrollContainer div.panel {padding:20px 0px;height:330px; width:550px;margin:0px;float:left;} #shade {background:#EDEDEC url(images/shade.jpg) no-repeat 0 0;height:50px;} ul.navigation {list-style:none;margin:0px 0px 0px 23px;padding:0px;padding-bottom:0px;} ul.navigation li {display:inline; margin-right:5px;} ul.navigation li a { background:#FFFFFF;font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#CCCCCC;padding:5px 5px 5px 5px;border:1px #F4F4F4 solid;text-decoration: none;} ul.navigation a:hover { color:#EDEDEC;border:1px #E6E6E6 solid;} ul.navigation a.selected {color:#333333;} ul.navigation a:focus {outline:none;} .scrollButtons {position:absolute;top:150px;cursor:pointer;} .scrollButtons.left {left:-37px;top:20px} .scrollButtons.right {right:-32px;top:20px;} .hide {display:none;} And here is the Jquery includes file: // when the DOM is ready... $(document).ready(function () { var $panels = $('#slider_home .scrollContainer_home > div.panel_home'); var $container = $('#slider_home .scrollContainer_home'); // if true, we'll float all the panels left and fix the width // of the container var horizontal = true; // float the panels left if we're going horizontal if (horizontal) { $panels.css({ 'float' : 'left', 'position' : 'relative' // IE fix to ensure overflow is hidden }); // calculate a new width for the container (so it holds all panels) $container.css('width', $panels[0].offsetWidth * $panels.length); } // collect the scroll object, at the same time apply the hidden overflow // to remove the default scrollbars that will appear var $scroll_bg = $('#scroll_bg_home'); var $scroll = $('#slider_home .scroll_home').css('overflow', 'hidden'); // apply our left + right buttons $scroll_bg .before('<img class="scrollButtons_home left" src="styles/images/BackFlip.jpg" />') .after('<img class="scrollButtons_home right" src="styles/images/flipForward.jpg" />'); // handle nav selection function selectNav() { $(this) .parents('ul:first') .find('a') .removeClass('selected') .end() .end() .addClass('selected'); } $('.navigation_home').find('a').click(selectNav); // go find the navigation link that has this target and select the nav function trigger(data) { var el = $('.navigation_home').find('a[href$="' + data.id + '"]').get(0); selectNav.call(el); } if (window.location.hash) { trigger({ id : window.location.hash.substr(1) }); } else { $('.navigation_home a:first').click(); } // offset is used to move to *exactly* the right place, since I'm using // padding on my example, I need to subtract the amount of padding to // the offset. Try removing this to get a good idea of the effect var offset = parseInt((horizontal ? $container.css('paddingTop') : $container.css('paddingLeft')) || 0) * -1; var scrollOptions = { target: $scroll, // the element that has the overflow // can be a selector which will be relative to the target items: $panels, navigation: '.navigation_home a', // selectors are NOT relative to document, i.e. make sure they're unique prev: 'img.left', next: 'img.right', // allow the scroll effect to run both directions axis: 'xy', onAfter: trigger, // our final callback offset: offset, // duration of the sliding effect duration: 500, // easing - can be used with the easing plugin: // http://gsgd.co.uk/sandbox/jquery/easing/ easing: 'swing' }; // apply serialScroll to the slider - we chose this plugin because it // supports// the indexed next and previous scroll along with hooking // in to our navigation. $('#slider_home').serialScroll(scrollOptions); // now apply localScroll to hook any other arbitrary links to trigger // the effect $.localScroll(scrollOptions); // finally, if the URL has a hash, move the slider in to position, // setting the duration to 1 because I don't want it to scroll in the // very first page load. We don't always need this, but it ensures // the positioning is absolutely spot on when the pages loads. scrollOptions.duration = 1; $.localScroll.hash(scrollOptions); });

  Read the article

• How to determine which element(s) are visible in an overflowed <div>

  - by jjross

  Basically, I'm trying to implement a system that behaves similar to the reading pane that's built into the Google Reader interface. If you haven't seen it, Google Reader presents each article in a separate box and as you scroll it highlights the current box (and marks the article as read). In addition to this, you can move forward or backward in the article list by clicking the previous and next buttons in the UI. I've basically figured out how to do most of the functionality. However, I'm not sure how I can determine which of my divs is currently visible in in the scrollable pane. I have a div that is set to overflow:auto. Inside of this div, there are other divs, each one containing a piece of content. I've used the following jquery plugin to make everything scroll based on a click of the "next" or "previous" button and it works like a charm: http://demos.flesler.com/jquery/serialScroll/ But I can't tell which div has "focus" in the scrollable pane. I'd like to be able to do this for two reasons. I'd like to highlight the item that the user is currently reading (similar to Google Reader). I need to do this regardless of whether or not they used the plugin to get there or used the browser's scroll bar. I need to be able to tell the plugin which item has focus so that my call to scroll to the "next" pane actually uses the currently viewed pane (and not just the previous pane that the plugin scrolled from). I've tried doing some searching but I can't seem to figure out a way to do this. I found lots of ways to scroll to a particular item, but I can't find a way to determine which element is visible in an overflowed div. If I can determine which items are visible, I can (probably) figure out the rest. I'm using jquery if that helps. Thanks!

  Read the article

1