Develop Reference

Scroll Div Left and Right on click with JS

I have the following script to scroll a div up and down. I wanted to know if there is a way it can be amended to now go left and right. I did what seemed obvious, which was to change the ele.scrollTop to ele.scrollRight. What would be the correct amendment to the script?
JS Fiddle: http://jsfiddle.net/swQ7J/5/
Original (Top/Bottom) Script:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function() {
var ele = $('#scroll');
var speed = 25, scroll = 5, scrolling;
$('#scroll-up').click(function() {
// Scroll the element up
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() - scroll );
}, speed);
});
$('#scroll-down').click(function() {
// Scroll the element down
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() + scroll );
}, speed);
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
},
mouseleave: function() {
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
}
});
});
</script>

Scroll down to special div

I'm trying to make a simple jQuery plugin that will scroll page down until it reaches special div like a #stopscroll. I got a simple jQuery plugin to stop scroll on special size:
$(window).scroll(checkscroll);
function checkscroll(){
var top = $(window).scrollTop();
if(top > 300){
$('#share_box').fadeOut('slow');
}else{
$('#share_box').fadeIn('slow');
}
}
checkscroll();
How do I make it scroll to a special div instead of scrolling a specified size? I want it to stop scrolling when div #sharebox reach #stopscroll.

I don't know if I understand your question correct but I think I had the same problem a while back. I fixed it like this:
$(document).ready(function() {
/** HIDE MENU **/
$(".menu").css("margin-top", "-88px");
var mustSlideDown = true;
var mustSlideUp = false;
$(window).scroll(function() {
var verschil = ($(window).scrollTop() / 5);
if (verschil > 40 && mustSlideDown) {
$('.menu').animate({'margin-top': '0px' }, {duration: 500, queue: false});
mustSlideDown = false;
mustSlideUp = true;
}
else if (verschil < 40 && mustSlideUp) {
$('.menu').animate({'margin-top': '-88px' }, {duration: 500, queue: false});
mustSlideUp = false;
mustSlideDown = true;
}
});
});

Didn't get much of your English, but maybe you are looking for this-
Window.location='#scollDiv';

How to only run a script if the DIV is in view?

I have a script that I wrote:
jQuery(function($) {
$('.count').countTo({
from: 0,
to: '400',
speed: '3000',
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
}
});
});
I need that script only to run when the container div is visible.
<div class="container">
<div class="count"></div>
</div>
To clarify, the div will always be visible, but when the user scrolls it in to view. Any ideas?
http://www.windycitydigital.net/iconvert/ - Example, at the bottom of the page those counters automatically start. I don't want that script to initiate until the user scrolls into view of them.

Here is an example with the alert activated only when the #mydiv is in view:
This works as you asked. Make sure the window is small so #midiv is not in view from the beginning. And after you scroll down, after the entire #mydiv is visible it will activate the alert from the scroll event.
http://jsfiddle.net/u3eCG/7/
divScroll = $("#mydiv").offset().top + $("#mydiv").height();
$(window).scroll(function(){
lastLineScroll = $("body").scrollTop() + $(window).height();
if (divScroll < lastLineScroll) {
alert("Div is visible");
$(window).unbind("scroll");
}
});

What code shoud hide/show div?For example you can use this code to show div
$('.container').show(0, onContainerVisible);
function onContainerVisible(){
jQuery(function($) {
$('.count').countTo({
from: 0,
to: '400',
speed: '3000',
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
}
});
});
}

if your browser compatibility requirements support it... MutationObserver might be a good candidate here
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

you could do something like this..
function isViewed(selector) {
var viewport = $(window),
item = $(selector);
var viewTop = viewport.scrollTop(),
viewBtm = viewport.scrollTop() + viewport.height(),
itemTop = item.offset().top,
itemBtm = item.offset().top + item.height();
return ((itemTop < viewBtm) && (itemTop > viewTop));
};
var counter = setInterval(function() {countdown()}, 500);
var countdown = function() {
console.log('are you there?');
if(isViewed('#mydiv')) {
clearInterval(counter);
console.log('yes i am here.'); // call countdown here
}
};
here is a jsfiddle to demonstrate
http://jsfiddle.net/pixelchemist/aLT7w/

$(window).resize event not working 100% smoothly

I run the following code on a page (#home) that should smoothly inject a slider or if the page container is under 480px leave the page as is.
I cannot get the resize event to work 100% smoothly.
If I reduce the window the script (js.slide.js) wont get triggered but the content will be loaded in (slide.php). If I continue to reduce the window a little extra it will all work ok.
Could anyone please advise as to how I could get this working smoothly. The code is as follows
$(document).ready(function(){
if ($("#home").length > 0 ){
var homeSlideShow = {
$promoArea: $('#promo-area'),
$currentContent: $('#promo-area').contents(),
$pageContainer: $('.page'),
init: function(){
var hSS = homeSlideShow;
if (hSS.$pageContainer.width() > 480 ){
hSS.setTheSlideShow();
} else{
hSS.$promoArea.html(hSS.$currentContent);
}
},
setTheSlideShow: function(){
var hSS = homeSlideShow;
$.getScript(myscript_wp_vars.temp_dir + '/js/slide.js', function(){
hSS.$promoArea.load(myscript_wp_vars.temp_dir + '/libs/slide.php #c4u-slide',
function(){
var options = {
preloader: false,
nextButton: true,
prevButton: true,
animateStartingFrameIn: true,
transitionThreshold: 250
};
var sequence = $("#sequence").sequence(options).data("sequence"),
$slideShow = $("#c4u-slide");
});
});
}
};
//
// Check page size
//
if (homeSlideShow.$pageContainer.width() > 480 ){
homeSlideShow.setTheSlideShow();
}
//
// On window resize
//
$(window).resize(function() {
homeSlideShow.init();
});
}// END home.length
});//End $(document).ready(function()
Thanks in advance for any assistance or advice.
Cheers
Noel

window.resize event is triggered multiple times, depending of browser's behaviour. I'll suggest you to try this:
var timeoutResize;
$(window).resize(function(){
if(typeof timeoutResize != 'undefined') clearTimeout(timeoutResize);
timeoutResize = setTimeout(function(){homeSlideShow.init();},50);
});

Add looping scroll to my carousel in Prototype-UI

I have a carousel that scrolls fine but when it comes to the end of the content (<li>.</li>) it just stops. I would like it to start again from the beginning.
Here is my code that I have hobbled together as not to good with JavaScript etc..
<script type="text/javascript">
function startscroll() {
x = window.setInterval(function scroll() {
hCarousel.scrollTo(hCarousel.currentIndex() + 3);
},3000);
}
function stopscroll() {
window.clearInterval(x);
}
function runTest() {
hCarousel = new UI.Carousel("horizontal_carousel", {direction: "horizontal"});
startscroll();
$('horizontal_carousel').observe('mouseover', stopscroll);
$('horizontal_carousel').observe('mouseout', startscroll);
}
Event.observe(window, "load", runTest);
</script>
Thanks for any help
Dave.

change this
$('horizontal_carousel').observe('mouseover', stopscroll);
$('horizontal_carousel').observe('mouseout', startscroll);
to
$('horizontal_carousel').onmouseover = function(){
stopscroll();
}
$('horizontal_carousel').onmouseout = function(){
startscroll();
}`