I want to keep my table move when I click, for this I try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".next").click(function() {
var position = $(".slide_table").position().left;
var movepos = parseInt(position) - parseInt(450) + 'px';
$('.slide_table').css('margin-left',movepos);
});
});
</script>
Prev
<div class="slide">
<table class="slide_table" style="border:1px solid gray; background:#CCCCCC">
When I click first time it works, So how can I keep it unless the right position is 0 or less than 450.
Thanks for help....
Let's say you want to move 10 px to the right for every click on the button, the code would be:
<script>
$(document).ready(function(){
$(".next").click(function() {
var position = $('.slide_table').css('margin-left');
var movepos = position + 10;
$('.slide_table').css('margin-left',movepos);
});
});
</script>
You don't need to add the string 'px' at the end of the distance to move.
I am not sure if I understand your question correctly but:
If you want to move the table 450px (more) to the right side every time you click on the ".next"-button, then you can do that as follows:
$(document).ready(function(){
$(".next").click(function() {
var posLeft = $('.slide_table').position().left;
var newPosLeft = posLeft - 450;
$('.slide_table').css('left', newPosLeft + 'px');
});
});
Related
I am using a jQuery script for an animated circular progress bar. Right now the progress bar works when the start button is clicked. I want this progress bar to start when the user scrolls to the div id "stats" automatically. How can this be done?
I have made a fiddle to show what I have so far:
https://jsfiddle.net/rpkcw236/9/
jQuery(document).ready(function($){
$('.pie_progress').asPieProgress({
namespace: 'pie_progress',
barsize: '2',
trackcolor: '#ececea',
barcolor: '#e6675f'
});
$('#button_start').on('click', function(){
$('.pie_progress').asPieProgress('start');
});
$('#button_finish').on('click', function(){
$('.pie_progress').asPieProgress('finish');
});
$('#button_go').on('click', function(){
$('.pie_progress').asPieProgress('go',50);
});
$('#button_go_percentage').on('click', function(){
$('.pie_progress').asPieProgress('go','50%');
});
$('#button_stop').on('click', function(){
$('.pie_progress').asPieProgress('stop');
});
$('#button_reset').on('click', function(){
$('.pie_progress').asPieProgress('reset');
});
});
Here is the link to the script I am using:
http://www.jqueryscript.net/loading/Animated-Circle-Progress-Bar-with-jQuery-SVG-asPieProgress.html
You need to break it up into 2 steps:
1) get the distance of the dynamic div from the top.
2) Once you get the top value pass this top value to the code in step2.
Step1: Get the dynamic div position from the top (e.g. #my-dynamic-div)
var $output = $('#output');
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop(),
elementOffset = $('#my-dynamic-div').offset().top,
distance = (elementOffset - scrollTop);
$output.prepend('<p>' + distance + '</p>');
});
OR
E.G: var distance = $("#MyDiv").offset().top
ref: http://jsfiddle.net/Rxs2m/
Step2: Pass the distance value here instead of the hard coded value 350.
flag=true;
$(window).scroll(function() {
st=$(window).scrollTop();
$('#topscroll').html(st)
if(st>350){
if(flag)
$('.pie_progress').asPieProgress('start');
flag=false;
}
});
Good luck & hope this helps.
Try using .scrollTop() , .offset().top Element.getBoundingClientRect() of #progress element, .off()
$(window).on("scroll", function() {
if ($("#progress")[0].getBoundingClientRect().top < 150) {
$('.pie_progress').asPieProgress('start')
$(this).off("scroll")
}
})
jsfiddle https://jsfiddle.net/rpkcw236/29/
How can I make an effect when mouse scrolls to a particular position?
<div id="target">
<!-- some data here -->
</div>
jQuery
var target = $('#target');
if(target.scrollTop() > 10){
alert('');
}
You might have to select the entire HTML document for the scroll function, instead of just one specific div
jQuery
$(document).scroll(function(){
if ($(window).scrollTop() > 10){
// if the current scroll of the window is greater than 10px
alert('');
}
});
You need to put your code inside
$(window).on('scroll', function(){}); which will fire each time the window is scrolled like this:
$(window).on('scroll', function(){
var target = $('#target');
if(target.scrollTop() > 10){
console.log("Scrolled 10px");
alert('');
}
});
Right now I have a div that I am automatically scrolling infinitely:
<script language="javascript">
i = 0
var speed = 1
function scroll() {
i = i + speed
var div = document.getElementById("content")
div.scrollTop = i
if (i > div.scrollHeight - 160) { i = 0 }
t1 = setTimeout("scroll()", 100)
}
</script>
The div that I need to scroll I want to stop scrolling onmouseover, so I have added this code to the div:
<div id="content" value="Pause" onmouseover="clearTimeout(t1)" onmouseout="scroll()">
Here is a link to a jfiddle. The preview there isn't doing what it should, but that's what I have that's working in my project right now.
So far this is working, but the problem is that I want to be able to manually scroll when I hover over this div. Now, the automatic scrolling is stopping, but I can't manually scroll with just the scrollwheel: It reacts the same when it is scrolling as when it is stopped with onmouseover.
Is there a way that I can basically cancel the whole scroll function onmouseover, or write something that just allows using the scrollwheel/scrollbar. as well? It would also be ok to have code to ALWAYS allow using the scrollwheel/scrollbar.
I'm not sure what would be the best way to do it.
Thanks!!
By setting it to scroll the overflow, assuming a fixed height, the scrollbar will pop up and you can scroll manually. Of course you will want to hide the scrollbar again when it resumes autoscrolling so you will need two functions to set the style.
<script language="javascript">
i = 0;
var speed = 1,t1=null;
function startScroll(){
document.getElementById("content").style.overflowY="hidden";
scroll();
}
function stopScroll(){
clearTimeout(t1);
document.getElementById("content").style.overflowY="scroll";
}
function scroll() {
i = i + speed;
var div = document.getElementById("content");
div.scrollTop = i;
if (i > div.scrollHeight - 160) { i = 0; }
t1 = setTimeout("scroll()", 100);
}
</script>
HTML change:
<div id="content" value="Pause" onmouseover="pauseScroll()" onmouseout="startScroll()">
I'm trying to create a function for drag and drop resizing and I have a problem. The script doesn't react to mouse cursor direction changes instantly. If I hold the button down and move cursor right, then left, it will only keep on increasing object's size for a moment.
demo
Javascript:
var re_dragging = false, re_om_x, re_om_y, re_o_x, re_o_y, re_n_x, re_n_y;
function resize(resize_btn){
resize_btn.mousedown(function(e){
e.preventDefault();
e.stopPropagation();
re_dragging = true;
re_om_x = e.pageX;
re_om_y = e.pageY;// origin mouse postion
target_wp = $(e.target).closest('.draggable_wp').find('.draggable_el');
});
$(document).mousemove(function(e){
if(re_dragging){
target_wp.width((e.pageX - re_om_x) + target_wp.width());
}
});
$(document).mouseup(function(e){
re_dragging = false;
});
};
var resize_btn = $('.draggable_btn_resize');
resize(resize_btn);
HTML:
<div class="draggable_wp">
<div class="wp_img">
<img src=""class="draggable_el">
</div>
<div class="btn">
<div class="draggable_btn_resize"></div>
</div>
</div>
You need update re_om_x after reseting width using re_om_x = e.pageX;.
And I add a new variable width, because in target_wp.width((e.pageX - re_om_x) + target_wp.width());, the target_wp.width() will bring in deviation, it is always get a int.
I rewrite mousemove as below:
$(document).mousemove(function (e) {
if (re_dragging) {
target_wp.width((e.pageX - re_om_x) + width);
width = (e.pageX - re_om_x) + width
re_om_x = e.pageX;
}
});
Here is demo. http://jsfiddle.net/U9vre/1/
For simplicity, see the jQuery UI function .resizable(). Just remember that you would then need to add the jqueryui .css and .js scripts to your page. You would then just need to call
$("#some_div_to_resize").resizable();
How does one make an html element not become fixed until it has been scrolled to? So while the user is scrolling it will be in normal position, but it won't go out of the screen after the user has scrolled past it?
Attach a listener to the onscroll event, and if the scrollTop is greater than the element's Y position, set it to position: fixed.
I've used this code before:
http://www.webdeveloperjuice.com/2011/08/07/how-to-fix-element-position-after-some-scroll-using-jquery/
(function($){
$.fn.scrollFixed = function(params){
params = $.extend( {appearAfterDiv: 0, hideBeforeDiv: 0}, params);
var element = $(this);
if(params.appearAfterDiv)
var distanceTop = element.offset().top + $(params.appearAfterDiv).outerHeight(true) + element.outerHeight(true);
else
var distanceTop = element.offset().top;
if(params.hideBeforeDiv)
var bottom = $(params.hideBeforeDiv).offset().top - element.outerHeight(true) - 10;
else
var bottom = 200000;
$(window).scroll(function(){
if( $(window).scrollTop() > distanceTop && $(window).scrollTop() < bottom )
element.css({'position':'fixed', 'top':'5px'});
else
element.css({'position':'static'});
});
};
})(jQuery);
Then just call the elements:
$(document).ready( function(){
$("#scrollingDiv").scrollFixed({appearAfterDiv:'.sidebar p', hideBeforeDiv:'.footer'});
$("#scrollingDiv1").scrollFixed({hideBeforeDiv:'.footer'});
});
Have a look at the jQuery Scrollfollow plugin. I have used this to achieve that effect conveniently.
You simply call it on the element that you want to stay in view:
<script type="text/javascript">
$( '#example' ).scrollFollow();
</script>
Easing, position and other parameters can be configured.