I have two textarea with approx. the same information how to make that if user scroll one than automatically another is scrolled. (textareas of same width)
I am thinking of onscroll event, but how to measure height?
P.S. I am using tinyMCE, if this info can help or change answer/approach.
Here is a start on how to do that, check my fiddle: http://jsfiddle.net/shahe_masoyan/2enVx/3/
$('#firstTextArea').on("scroll" , function (){
var sctop = $(this).scrollTop();
$('#secondTextArea').scrollTop(sctop);
});
you can do so using the scroll function
$(document.getElementById("txt1")).scroll(function(){
$(document.getElementById("txt2")).scrollTop($(this).scrollTop());
})
http://jsfiddle.net/GXaGD/
Related
I have a lot of pictures on my page. and I want to do some javascript and PHP processing when the user scrolls down to each image. I have come up with the follwing:
$(window).scroll(function(){
hT = $('.Picture-1A:eq(3)').offset().top,
hH = $('.Picture-1A:eq(3)').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if ((wS >= (hT+hH-wH))){
alert('you have scrolled to the h1!');
}
});
The above example only works if I reach to a certain image. And I want to do something when the scroll reach an image. I want to get it's ID and process that in PHP using AJAX.
Let's assume that the following are the images:
<div class="Picture-1A"></div>
<div class="Picture-1A"></div>
<div class="Picture-1A"></div>
What I want to do is add 1 impression to the image that has appeared on the window. and I want to do that using AJAX every time the user scrolls down the page.
That's it
Update:
I have found a great library thanks to Eugenio Enko. and here is how it's done:
Include the library code in your project after jQuery:
If you want it to trigger for each image, then use each like so:
$('.Picture-1A').each(function() {
$(this).waypoint(function(direction){
alert($(this).html());
});
});
But I am having trouble getting the html of $(".Picture-1A").html() using this it returns undefiend
Here you can view an example using the old waypoint:
http://codepen.io/eugenioenko/pen/qZMqOW
$(document).ready(function(){
$('.spfx-scroll-p').waypoint(function(){
alert('scrolled');
},{offset:'90%'});
});
There are two libraries I know that could help you with that:
http://imakewebthings.com/waypoints/
http://scrollmagic.io/
The second one is more complete and has much more option, but for what you need, it seems that waypoint should work well enough.
best regards.
I'm designing a responsive website and am using media queries to handle the responsiveness. However along with the CSS I want to disable certain jQuery click functions at a certain window width.
Right now I can do this successfully on page load but I want to also be able to do it assuming the user resized the window.
(paragraph 3) So for example if the user starts off with a really big window on his/her computer and he/she resizes it to be a very small window he/she should not be able to activate the click functions anymore. Conversely if a user starts off with a very small window on his/her computer and resizes it to be very big he/she should be able to activate the click functions.
I have tried multiple solutions but none seem to work.
Basically I want to make some clickable objects not clickable anymore or at least have them click and do nothing at a certain window width.
Simply checking at page load and no other time makes it so that what should happen in paragraph 3 doesn't happen.
$(document).ready(function(){
if($(window).width() > 992){
$('#portclick').click(function(){
$('#pagecont').slideToggle(500);
$('#icons').slideToggle(500);
})}})
$(document).ready(function(){
if($(window).width() > 992){
$('#name').click(function(){
$('#projects').slideToggle(500);
})}})
I tried remove the id attribute that I'm using to call the function on at certain window widths and readd them at the width but this doesn't seem to work either. Removing the id doesn't seem to disable to click function at all.
And my most recent solution which comes the closest is just to bind the click function to window resize. So far this works but it is extremely buggy so when you get to a width where the click function works and you try clicking it will do the toggle function about 100 times before it stops. But it does sustain the condition described in paragraph 3.
$(document).ready(function() {
$(window).resize();
});
$(window).resize(function(){
if($(window).width() > 992){
$('#portclick').click(function(){
$('#pagecont').slideToggle(500);
$('#icons').slideToggle(500);
})}
else return})
$(window).resize(function(){
if($(window).width() > 992){
$('#name').click(function(){
$('#projects').slideToggle(500);
})}
else return})
Does anybody have an idea for a working solution that would work flawlessly like css media queries do? I don't think this is that complicated of a problem to work around so I'm hoping for some good answers! Thank you guys so much in advance!
Several problems here. First, resize fires almost constantly while the window is moving, so don't actually trigger anything on that. Second, you should only bind your event handlers once (or if you must bind more than once, make sure you clear out the old ones.) You can simplify thusly:
$(document).ready(function() {
var isLargeWindow;
$(window).on('resize', function() {
isLargeWindow = $(this).width() > 992;
});
$('#whatever').on('click', function(e) {
if (isLargeWindow)
// do large window stuff
else
// do small window stuff
});
});
My simplest way of doing that is not using the resize event at all just attach
the click event and add an early return term if the window size doesn't suite your needs.
Example code:
$('#portclick').click(function(){
winWidth = $(window).width();
/* You can add an height value too */
winHeight = $(window).height();
if ( winWidth < 992 ) return;
/* Youe Code Executes */
});
If you want the if statement to be called after the resize has happened then do something like this:
http://jsfiddle.net/sLk5ro6c/1/
$(window).resize(function (e) {
window.resizeEvt;
$(window).resize(function () {
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function () {
doneresizing();
}, 250);
});
});
function doneresizing() {
if ($(window).width() > 500) {
// DO SOMETHING HERE
alert('example');
}
}
This way the code won't be called every time during the resizing of the window
I load my content per $.get and "follow" the new appended data per javascript-auto-scrolling. Now I want to disable autoscrolling if the user "scrolls manually", but the following scroll-to-bottom function also triggers the Jquery .scroll()-function - so it disables itsef.
if(self.testelem.hasClass("active")){
$(document).scrollTop($(document).height());
}
How can I receive a mouse-wheel event or prevent scrollTop to trigger the .scroll()-function? I also tried to set a Timeout to block while scrollTop is working, but this isn't a great solution and has a few drawbacks.
Any suggestions?
EDIT :
My current code:
I use the button #stb (scroll to bottom) and the class .active to to turn it off/on.
$.get("url", function(data){
//do something
if(self.testelem.hasClass("active")){
$(document).scrollTop($(document).height());
}
});
$(document).scroll(function(){
jQuery('html,body').queue([]).stop(); //try this
//$("#stb").parent().removeClass("active");
});
ps: Yes, I know. There are a few quite similar questions. I read them, but they differ in important points.
To stop a scrollTo event on user-interruption mid-scroll try this:
$(document).scroll(function(){
jQuery('html,body').queue([]).stop(); //try this
//jQuery.scrollTo.window().queue([]).stop(); //failing that try this
});
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.
My problem is a bit off the cuff here, so I'll try to explain this best I can.
I have a text area, having css of #object{overflow:hidden;resize:none;}. I am trying to prevent it from spawning scroll bar while also resizing itself. This textarea is synced with an external script's console meaning it updates. By default however, it will stay at the top unless you highlight text, dragging off to the bottom of the element. This would be the only way to scroll down other than with arrow keys, naturally.
Programmatically, is there any way to keep the text area down to the bottom upon updating? It would be nice to have it auto-scroll to accommodate its use case.
You can do it by javascript. Set the scrollTop property of text area with scrollHeight property like below:
document.getElementById("textarea").scrollTop = document.getElementById("textarea").scrollHeight
By using jQuery, you can find out when the content of the textarea changes using:
$("#object").change(function() {
scrollToBottom();
});
And scroll to the bottom using:
function scrollToBottom() {
$('#object').scrollTop($('#object')[0].scrollHeight);
}
Scroll code taken from jquerybyexample.blogspot.com.
Using Javascript
var textarea = document.getElementById('textarea_id');
textarea.scrollTop = textarea.scrollHeight;
Using Jquery
$('#textarea_id').scrollTop($('#textarea_id')[0].scrollHeight);
Generic JQuery Plugin
Here a generic jquery plugin for scrollBottom of any element:
$.fn.scrollBottom = function() {
return $(this).scrollTop($(this)[0].scrollHeight);
};
usage:
$("#logfile").val( $("#logfile").val() + "this is new line test\n" ).scrollBottom();
function checkTextareaHeight(){
var textarea = document.getElementById("yourTextArea");
if(textarea.selectionStart == textarea.selectionEnd) {
textarea.scrollTop = textarea.scrollHeight;
}
}
Call this function every time when the contents of the textarea are changed. If you cannot edit the external influence, periodically activate this function using setInterval.