I've got a little problem.
Here's my fiddle:
[https://jsfiddle.net/ekpgbxrk/][1]
My question is: what's wrong with my code? Point is that I want to scroll site down after clicking button and after another click I want to stop, then to proceed.
I used:
http://www.mediacollege.com/internet/javascript/page/scroll.html
Please help!
The button onclick function is wrong. Change it to whatever function you'd want to call in your JS code.
Also change your JSFiddle's JS setting "Load Type" to "No wrap in - <head>"
Here is updated logic for your code.
var scrolling = false;
var scrollDelay;
function scrollClick() {
if (!scrolling) {
scrolling = true;
startScroll();
} else {
scrolling = false;
stopScroll();
}
}
function startScroll() {
window.scrollBy(0, 50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('startScroll()', 125); // scrolls every 100 milliseconds
}
function stopScroll() {
clearTimeout(scrolldelay);
}
Here is the updated fiddle https://jsfiddle.net/ekpgbxrk/5/
Your code logic is completely wrong.
I have rewrote the logic.
For your reference:
[1]: https://jsfiddle.net/ekpgbxrk/1/
Related
Ehy guys. I have a strange kind of problem. I've created a button to scroll the page to the bottom when the user clicks it, and it works only if I use scroll(0,0), while if I use scrollTo(0,0) (which should work in the same way I guess) doesn't work (the page doesn't scroll, nothing happens). Here is a part of code: this is the function which should scroll to the top after click using scrollTo but which doesn't do anything.
<button id="scrollaInAlto" onClick="scrollInAlto();"
style="background-color:Transparent;border:none;display:none;"></button>
<script>
function scrollInAlto() {
window.scrollTo(0,0); <-- this one doesn't work
//window.scroll(0,0); <-- this one works
}
</script>
The only other thing I have is a small script to show and hide the button which scrolls the page: here it is.
<script>
$(document).ready(function(){
$(window).scroll(function(){
var $temp = $("#scrollaInAlto").scrollTop();
if (document.body.scrollTop > 50) {
$("#scrollaInAlto").show();
} else {
$("#scrollaInAlto").hide();
}
});
});
</script>
Why doesn't scrollTo work properly?
Live site- http://www.uposonghar.com/test/test_popup.html
Reveal popup js page- http://www.uposonghar.com/test/jquery.reveal.js
Due to a lot of code on js page maybe that is not a good option to post all js code here.
I want to add 10 second delay on that popup so if anyone click on link then popup will appears after 10 second. I tried JavaScript settimeout but doesn't work, due to low knowledge of jQuery i don't know how to do that with jquery.
Also popup doesn't appears if i click on on second time, only appears on when i click on first time.
setTimout solves that beautifully.
Try that...
var tmrReveal = null;
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
if (tmrReveal != null)
clearTimeout(tmrReveal);
tmrReveal = setTimeout(
function() {
$('#'+modalLocation).reveal($(this).data());
},10000);
});
Use setTimeout()
setTimeout(function() {
//code goes here
}, 10000);
$('#your-anchor-here').click(
function(){
setTimeout(
function(){
//popup logic here
},10000)
});
I have created a slider that slides from right to left. I am changing margin-right to make the slide work.
As per the requirement, I have a treeview, when user clicks on any node, it opens a sliding dialog with some controls in it. When user clicks on any node, it should first close the previously open dialog and then open the dialog for currently selected node. I am able to make this work when user clicks on the node, the dialog opens, and when user click back again on the same node or the slider-button, the dialog hides. But somehow, the code to hide when user click on any other node doesn't work properly. It moves the slider-button and the dialog away and I don't see anything.
I used the following code:
if($('#slider-button').css("margin-right") == "400px") {
$(sliderDialog).animate({"margin-right": '-=400'});
$('#slider-button').animate({"margin-right": '-=400'});
} else{
$(sliderDialog).animate({"margin-right": '+=400'});
$('#slider-button').animate({"margin-right": '+=400'});
}
I thought, it as simple as finding if the previously selected dialog is different than current than just call the same code that hides the dialog when user clicks on the same node again. ie.
$(sliderDialog).animate({"margin-right": '-=400'});
$('#slider-button').animate({"margin-right": '-=400'});
But, it behaves weird. Anyone, what am I missing here?
Here is my jsFiddle.
Using the DOM and such that you had, I've updated the JS to switch between them after animating back (here is the Fiddle in action):
var sliderDialog = "#dvPriorityDialog"
function slideIt() {
var sliderId = '#' + $('.pollSlider.open').attr('id');
var slideWidth;
if ($('.pollSlider').hasClass('open')) {
slideWidth = $('.pollSlider.open').width();
$('.pollSlider.open').animate({"margin-right": '-=' + slideWidth}, function() {
if (sliderId != sliderDialog) {
slideIt();
}
});
$('#slider-button').animate({"margin-right": '-=' + slideWidth});
$('.pollSlider.open').removeClass('open');
} else {
slideWidth = $(sliderDialog).width();
$(sliderDialog).addClass('open');
$('#slider-button').animate({"margin-right": '+=' + slideWidth});
$(sliderDialog).animate({"margin-right": '+=' + slideWidth});
}
}
function bindControls() {
$('#slider-button').click(function() {
slideIt();
});
$("#liPriority").click(function() {
sliderDialog = "#dvPriorityDialog";
slideIt();
});
$("#liFasting").click(function() {
sliderDialog = "#dvFastingDialog";
slideIt();
});
}
// init;
$(document).ready(function() {
bindControls();
});
Try
$(sliderDialog).stop().animate({"margin-right": '-=400'});
$('#slider-button').stop().animate({"margin-right": '-=400'});
You have multiple problems :
You try to move a same element (#slider-button) in function of two different animations (a panel go left and an other go right). To resolve that, the best option is to add a button to each panel. It will be a lot easier to manage global behavior because you have only one animation by panel.
You don't stop animation when you want to change them. Store your animation in vars and use .stop() function with the first param to true in you case (.stop(true) to stop animation and remove it from queue without finish it).
Your state test is based on your animated css attribute (margin-right). So you alltime have to wait the end of animation to start the new one. To fix that use vars to store your animations state : (var firstPanelLastMove = 'left' // or right ... etc).
Another question on iScroll 4. I have set up a demo in JSFiddle.
I want to scroll the div on mousedown. It should scroll to the end:
continuously;
without any interruption;
with static speed;
Until it reaches the last div, or I do a mouseup in the middle.
Is it possible to achieve this?
Check this fiddle: http://jsfiddle.net/z2YWZ/2/
There is still one problem. It doesn't stop when it reaches the end. iScroll uses CSS translate to do the scrolling and I couldn't find a way to get the current translation form it. Currently looking for a solution for that.
UPDATE
iScroll has a useTransform option, using which we can ask it not use translate and instead use CSS left property for scrolling. This way we'll be easily able to identify whether its the end has been reached (either way). To use, simply set useTransform: false while initing iScroll.
UPDATE 2
Check this fiddle: http://jsfiddle.net/z2YWZ/12/
Can you check this solution:
http://jsfiddle.net/ugeU3/3
html:
<div id="click">Element to click on</div>
js:
jQuery("#click").bind('mousedown', function(){
intInterval=setInterval(function(){
myScroll.scrollTo(25, 0, 800, true);
},30);
});
jQuery("#click").bind('mouseup', function(){
intInterval=window.clearInterval(intInterval);
});
you can change the time values to achieve your speed-preferences.
i hope it helps.
I have modified #techfoobar code and done something like this which both scrolls continously till end on mousedown and moves one div in or out on single click. The code snippet is :
var scrolling=false;
var scrollTimer=-1;
$('#next').bind('mousedown',function () {
scrolling = true;
scrollTimer = setInterval(function () {
scrollDivRight();
}, 100);
return false;
});
$('#next').bind('mouseup',function () {
scrolling = false;
clearInterval(scrollTimer);
return false;
});
$('#next').bind('mouseout',function () { /*For smoother effect and also prevent if any previous delay (eg. 100ms)*/
scrolling = false;
clearInterval(scrollTimer);
return false;
});
scrollDivRight:function(){
if(!scrolling) return false;
myScroll.scrollTo(177, 0, 400, true);
}
Please suggest if there is anything better then this. Ofcourse the issue mentioned by #techfoobar in his answer still remains unsolved.
I'making website which is for all desktop/iPad/iPhone. In one page I have header and footer on the page which will be seen till 5 sec after page load then it will be gone automatically. If We click/touch anywhere on screen it will also like a toggle to show/hide.
And when the header and footer will be seen the area of page will be dim like we see in lightboxes.
http://jsfiddle.net/jitendravyas/yZbTK/2/
The effect I want to exactly like iPad default "Photos" app
I think this is what you are after. On initial page load we fade out after x seconds. If user clicks then we fade in toolbar if hidden, or fade it out if shown. If user fades in toolbar, but doesn't do anything for x seconds we fade it back out.
I updated my answer with some improvements.
http://jsfiddle.net/yZbTK/11/
http://jsfiddle.net/yZbTK/11/show - full screen for iPad
I would assign a class to the controls that you will fade in/out. That way you can gather them quickly and easily. The use of id's to identify them really wasn't very good in my initial code example.
var timer;
var timeVisible = 5000;
timeFadeout();
function timeFadeout() {
timer = setTimeout(function() {
$('.controls').fadeOut();
}, timeVisible );
}
$('html').click(function() {
clearTimeout(timer);
if ($('.controls:visible').length) {
$('.controls').fadeOut();
}
else {
$('.controls').fadeIn();
timeFadeout();
}
});
A short solution is to simply add a click-event to the body and toggle the header and footer on it:
$('body').click(function() {
$('#header').toggle();
$('#footer').toggle();
});
See here also: http://jsfiddle.net/Sgoettschkes/yZbTK/4/
To add the "dim" as you call it you could also make a div box with position absolute and a opacitiy, which is also toggled as above. I played around a bit and created this: http://jsfiddle.net/Sgoettschkes/yZbTK/8/
EDITED:
var countDown=5;
$('body').click(function() {
....
if (countDown < 1) {
...
}
}
var cleanUp = setInterval(function() {
countDown--;
if (countDown < 1) {
...
clearInterval(cleanUp);
}
},1000);
That should do it!