Prevent jquery browser scrolling to top on click - javascript

I have the following script for a thumbnail image viewer. I've named each thumbnail image and large parent image ending in thumb and large, respectively. The script replaces the large image with whatever thumbnail image is clicked on by changing the filepath.
<script>
$('.thumbs').delegate('img','click', function(){
$('.large').attr('src',$(this).attr('src').replace('thumb','large'));
$('.large').hide().fadeIn(500);
});
</script>
Each time a thumbnail is clicked, the page scrolls back to the top. I've tried to prevent this with
return false;
It works, however, then large image won't update. Is there another way to prevent the page from scrolling to the top?
Thanks for your help.

I doesn't seem to be doing that in IE9. Try preventing the default action :
<script>
$('.thumbs').delegate('img','click', function(event){
$('.large').attr('src',$(this).attr('src').replace('thumb','large'));
$('.large').hide().fadeIn(500);
event.preventDefault();
});
</script>

The page does not scroll to the top of page, it scroll to the top of large image because you change the image source.
You can try to disable and hide and fadeIn effects and see if the problem persists.
If the problem persists simply add the following code that the issue is resolved.
<script>
$('.thumbs').delegate('img','click', function(){
var y = window.pageYOffset;
$('.large').attr('src',$(this).attr('src').replace('thumb','large'));
$('.large').hide().fadeIn(500);
window.scrollTo(0, y)
});
</script>
Sorry any english mistake. I'm using google translate.

Where exactly did you place the return false? If you did it at the end, it should have worked. Like this:
<script>
$('.thumbs').delegate('img','click', function(){
$('.large').attr('src',$(this).attr('src').replace('thumb','large'));
$('.large').hide().fadeIn(500);
return false;
});
</script>
You can also use e.preventDefault() to stop the default link action:
<script>
$('.thumbs').delegate('img','click', function(e){
$('.large').attr('src',$(this).attr('src').replace('thumb','large'));
$('.large').hide().fadeIn(500);
e.preventDefault();
return false;
});
</script>

This happens because when you replace large image src, for a moment it dissapears, page got smaller and scrolls are no needed so go up. Try zooming page and then you will see it doesnt happen(ctrl + mouse scroll up).
Just put you large image with DIV with fixes size that does not change:
<div style="height: 490px; width: 490px;float: left;">
<img style="display: block;" class="large" src="images/06_large.png">
</div>

Related

Scroll down one "scroll unit" on click

I want to create a link div which scrolls down on click; like one scroll down of the mouse wheel does or one click down on the arrow of the scroll bar.
Is there a method in CSS or jQuery/JavaScript to do that?
And also several scrolls, like 3 scroll downs?
Thanks for help!
As far as I know, there is no such thing as a scroll unit. This is device dependent.
But to make the window scroll when clicking something is simple with jQuery.
$(function(){
$(".clickScroll").click(function(e) {
document.body.scrollTop += 10;
});
});
This will scroll the view 10 units, of some measure, down on every click.
See this plunker for a full example.
You should try something like:
HTML
<div onclick="myFunction()"></div>
JavaScript
myFunction = function(){
var myVar = $(window).scrollTop();
$(window).scrollTop(myVar+300);
}
MyVar gets your position on the page.
I hope I've been helpful.

How do I apply a browser-position to my code?

Earlier today I asked a question about my webpage being very 'jumpy'.
I've posted a test version of my webpage here: http://armandbakx.nl/
And a codepen can be viewed here: http://codepen.io/anon/pen/GpmQoY
$('img').on('click', show);
$('.overlay').on('click', hide);
function show(){
$('.scroll-container').eq($(this).parent().index()).addClass('show');
$('.content-container').addClass('no-scroll');
$('.overlay').addClass('opacity');
}
function hide() {
$('.scroll-container').removeClass('show');
$('.content-container').removeClass('no-scroll');
$('.overlay').removeClass('opacity');
}
The idea of the page is that you click on an image (in this case a red square), resulting in a hidden container showing, which can be scrolled through, containing more information and images about this image.
However, when you click one of the squares, and the container and overlay show, the other images (squares) move. It was suggested to me that in my show function I should try and keep track of the position my browser was in when this container opened. Then in my hide function, return the browser to that position.
Truth to be told, I am not good with JavaScript AT ALL, so I'm pretty much clueless as to how I should apply this. I'm having more issues with this webpage and I have to fix them fast, hence I'm asking again. Could anybody help me with this?
From what I can tell, your squares are moving around because of the .no-scroll class. If I remove it, everything appears to work correctly.
try this:
$('img').on('click', show);
$('.overlay').on('click', hide);
function show(){
$('.scroll-container').eq($(this).parent().index()).addClass('show');
$('.overlay').addClass('opacity');
}
function hide() {
$('.scroll-container').removeClass('show');
$('.overlay').removeClass('opacity');
}
In your show function, you can retrieve the scroll position before the Text is shown.
scrollHeight = $(document).scrollTop();
In your hide function, set the scroll position to the value you got previously.
$(document).scrollTop( scrollHeight );

Prevent parent page from scrolling when mouse is over embedded iframe in Firefox

...without limiting the scroll inside the iframe or the need to specifically name/tag all scrollable elements.
Imagine google maps widget embedded in parent page. When you zoom in the widget you don't want the parent page to scroll, obviously.
I thought an answer to my previous question solved the problem:
While scrolling inside an iframe, the body doesn't know anything about
what happens there. But when iframe scroller reach the bottom or the
top, it pass scrolling to body.
Cancel the event that propagates from the iframe.
But the solution does not work in Firefox because Firefox will not - by design - propagate events captured by iframe to the parent page, yet strangely it will scroll the parent page. See jsfiddle here.
$('body').bind('mousewheel DOMMouseScroll', onWheel);
function onWheel (e){
if (e.target === iframe)
e.preventDefault();
console.log(e);
}
So, how do I prevent page from scrolling when user zooms content in embedded iframe, in Firefox?
Since it is a bug in Firefox, the workaround is to work directly with the scroll event, instead of the mousewheel / DOMMouseScroll ones.
The way I did: When user enters the mouse over the iframe, I set a flag to true, and when he leaves the mouse out there, I set it back to false.
Then, when user tries to scroll, but the mouse arrow is inside the iframe, I prevent the parent window scrolling. But, unfortunately, you can't prevent the window scrolling with the usual e.preventDefault() method, so we still need another workaround here, forcing the window to scroll exactly to the X and Y positions it was already before.
The full code:
(function(w) {
var s = { insideIframe: false }
$(iframe).mouseenter(function() {
s.insideIframe = true;
s.scrollX = w.scrollX;
s.scrollY = w.scrollY;
}).mouseleave(function() {
s.insideIframe = false;
});
$(document).scroll(function() {
if (s.insideIframe)
w.scrollTo(s.scrollX, s.scrollY);
});
})(window);
I've created an immediately executed function to prevent defining the s variable in the global scope.
Fiddle working: http://jsfiddle.net/qznujqjs/16/
Edit
Since your question was not tagged with jQuery (although inside it, you've showed a code using the library), the solution with vanilla JS is as simple as the above one:
(function(w) {
var s = { insideIframe: false }
iframe.addEventListener('mouseenter', function() {
s.insideIframe = true;
s.scrollX = w.scrollX;
s.scrollY = w.scrollY;
});
iframe.addEventListener('mouseleave', function() {
s.insideIframe = false;
});
document.addEventListener('scroll', function() {
if (s.insideIframe)
w.scrollTo(s.scrollX, s.scrollY);
});
})(window);
Given all the prerequisites, I think the following is the sanest way to make this work in Firefox.
Wrap your iframe with a div which is a little bit shorter to enable vertical scrolling in it:
<div id="wrapper" style="height:190px; width:200px; overflow-y: auto; overflow-x: hidden;">
<iframe id="iframeid" height="200px" width="200px" src="about:blank">
</iframe>
</div>
Now you can center the iframe vertically and re-position it every time
the wrapper receives a scroll event (it will occur when a user tries to scroll away at frame edges):
var topOffset = 3;
wrapper.scrollTop(topOffset);
wrapper.on("scroll", function(e) {
wrapper.scrollTop(topOffset);
});
Combine this with your previous fix for Chrome, and it should cover all major browsers. Here is a working example - http://jsfiddle.net/o2tk05ab/5/
The only outstanding issue will be the visible vertical scrollbar on a wrapper div. There are several ways to go about it, for instance - Hide scroll bar, but still being able to scroll
I think that will solve your problem
it solved mine
var myElem=function(event){
return $(event.toElement).closest('.slimScrollDiv')
}
$(document).mouseover(function(e){
window.isOnSub=myElem(e).length>0
})
$(document).on('mousewheel',function(e){
if(window.isOnSub){
console.log(e.originalEvent.wheelDelta);
if( myElem(e).prop('scrollHeight')-myElem(e).scrollTop()<=myElem(e).height()&&(e.originalEvent.wheelDelta<0)){
e.preventDefault()
}
}
})
replace '.slimScrollDiv' with the element selector you want to
prevent parent scroll while your mouse is on it
http://jsbin.com/cutube/1/edit?html,js,output

using GIF image on scroll of page

How can I animate an image on page scroll in a single page website so that when I scroll to next section it animates? Suppose I am using a closed eye which opens when I scroll to next section.
You can use the libgif library here: https://github.com/buzzfeed/libgif-js
It allows you to start, stop, or advance the gif frame programmatically. Here is an example straight from the source:
<script type="text/javascript" src="./libgif.js"></script>
<img src="./example1_preview.gif" rel:animated_src="./example1.gif" width="360" height="360" rel:auto_play="1" rel:rubbable="1" />
<script type="text/javascript">
$$('img').each(function (img_tag) {
if (/.*\.gif/.test(img_tag.src)) {
var rub = new SuperGif({ gif: img_tag } );
rub.load(function(){
console.log('oh hey, now the gif is loaded');
});
}
});
</script>
You can then use a combination of get_length (the number of frames in the gif), move_to (to go to a specific frame), and onscroll in jQuery/JavaScript to set the frame as the user scrolls your page.
There is also ScrollMagic which specializes in exactly what you are asking. Not sure about gif animations specifically, but they have tons of examples for different element animations.

Make scrollTo make div scroll all the way?

I have a div with only horizontal overflow. With a link outside the div, I'm trying to scroll the div to a certain image (think of a horizontal gallery scrolling to the right).
I used the following javascript. It works fine in the webpage.
However, the DIV containing the gallery is larger than most images. Consequently the browser window will scroll only until the requested div comes in from the right and is now fully on screen, and not one pixel more. However, I would like the div to scroll all the way, so that the image is all the way hugging the left edge of the container.
I hope I'm making sense, I'm not terribly experienced, but I couldn't find an answer to my question online.
$(document).ready(function(){
$('#gimg1').click(function() {
$.scrollTo($('#gimg1link'), 1000);
});
$('#gimg2').click(function() {
$.scrollTo($('#gimg2link'), 1000);
});
$('#gimg3').click(function() {
$.scrollTo($('#gimg3link'), 1000);
});
$('#gimg4').click(function() {
$.scrollTo($('#gimg4link'), 1000);
});
});
<div id="gallery">
<img class="galleryimage" id="gimg1" src="lb1.jpg">
<img class="galleryimage" id="gimg2" src="lb2.jpg">
<img class="galleryimage" id="gimg3" src="lb3.jpg">
<img class="galleryimage" id="gimg4" src="lb4.jpg">
</div>
Image 1
Image 2
Image 3
Image 4
You are using the image and link selectors in your jquery in the wrong order.
$('#gimg1').click(function() {
$.scrollTo($('#gimg1link'), 1000);
});
This snippet means "when the image #gimg1 is clicked, scroll to the position of the link #gimg1link". You want it the other way round: when the link is clicked, scroll to the image.
Reversing those selectors gives you a working slider: jsFiddle
The last image will always stay on the right of the screen, because that's where the document ends and it can't scroll any further. The other images will scroll all the way to the left as long as your document width allows it.
Also, you could optimize your javascript a lot by not copy-pasting the same code but just making it more generic:
$(document).ready(function(){
$('a[id^=gimg]').click(function() { // when a link with an ID starting with "gimg" is clicked
var linkID = $(this).attr('id'); // get the whole id from this link
var imgID = linkID.replace('link', ''); // get the img ID it relates to by removing the 'link' part
$scrollTo( $('#' + imgID), 1000); // scroll to the image this link belongs to
});
});
Now it doesn't matter how many links and images you add, as long as they all use the same naming convention.
Based on this answer i adapted the code to suit your need. It uses the clicked thumbnail index to find the corresponding image left, and set scrollLeft of the viewport to this value.
$('#nav li').click(function(){
var clickedIndex = $(this).index();
var targetElement = $('#viewport ul li').eq(clickedIndex);
var elementPosition = targetElement.position();
$('#viewport').animate({scrollLeft: elementPosition.left},500);
});
Working fiddle: http://jsfiddle.net/Lqvqtwtb/

Categories