How To Trigger Fancybox When User Reaches Certain Div (On Scrolling) - javascript

quick question:
1) I have got the standard Fancybox (V2) setup working and I want it to fire the modal when the user is reading the page and then reaches a certain div (or any other element).
2) So it's not a 'delay', its when the user reaches a certain part of the page.
Can someone throw some coding light on how to do this please? :)
(Note: I AM NOT a programmer, but can handle mediocore js/html/css...)

The easiest way is to check the scroll height versus the height of the element you wish to trigger, then simulate a click on the Fancybox link you want to open.
UPDATE: This fiddle should give you an idea how to do it. http://jsfiddle.net/eKF4f/2/. It is not the most complete example, but should give you a starting point.
This is the part that does the work
$(document).scroll(function () {
if($(document).scrollTop() >= $('#box').offset().top && !fired)
{
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : '1st title'
}]);
}
});
NOTE: As far as UX is concerned, this is generally bad practice. Unless you have a good reason to open a modal, you should not block page content unless the user takes an action that triggers the modal.

Related

Differentiate automatic scroll after refresh from other kinds of scrolling

I have observed that after a refresh, by pressing F5 or even some location.reload();, the browser forces a scroll to the last position it was before the refresh.
The thing is, we track the user's progress across the page, and this "automatic" scroll fires all the checkpoints we have placed all the way to this last position before the refresh.
We are wondering whether is it possible to differ this "automatic" scroll from a scroll made by the user.
For instance, we have lots of:
$(window).scroll(function() {
var windowMax = $(window).scrollTop()+$(window).innerHeight()/2;
if (windowMax > .....)
});
Is there a way to differentiate this two sorts of scrolls?
Edit
Please, see that I don't want to prevent the automatic scroll, I want to differ it.
You can add a ready event listener and immediately check the .scrollTop() after it has been loaded.
var isScrolledAfterRefresh;
$(function() {
isScrolledAfterRefresh = $(window).scrollTop() > 0;
});
You do need to be sure that the rest of your code is executed after the ready event is fired.
This is something embedded in the users browsers. One way to counter it I suppose is to not have scrolling enabled on body or HTML, and have a custom scroll inside an element that is not on the top layer
You could also deffer recording of the scrolling until the page has fulling been rendered and the document completely loaded.
You could use the following to do stuff when the document is ready :
$(document).ready(function(){
// do stuff here
});

Is there a way to make an animated scroll up transition between two different pages?

I am currently designing a website in which I have a first page that shows a language selector, which should take you to the corresponding version of the homepage depending on the chosen language. I would like to animate the transition between these pages so that the 'language selector' page scrolls up and gives way to the appropriate 'homepage'.
I am really new to coding, but I can understand the very basics of jQuery and got some jQuery-based solutions to work, though I haven't succeeded yet in finding a method that fits what I want.
If you have a look at my working website, http://bauti.tk, you'll see the 'language selector' page has a black background. I would like to join that as seamlessly as possible with the black menu bar on top of the 'homepage' as it scrolls.
The way the contents other than the menu in the 'homepage' load is not really important for me. I've seen many solutions based on scrolling through sections of a same webpage, but I guess that won't work for me, as the target webpage depends on the language choice.
Any working solutions are welcome, regardless of their difficulty!
You may want to look into ajax for this solution. Basically load the selected language homepage underneath the landing page upon selection, then scroll down to reveal the loaded content.
Something like:
var lang;
$(".ThumbGroup span").find("a").off("click","a").on({
click: function(e){
e.preventDefault();
if(($(this).attr("id") == "u2008-4") || ($(this).attr("id") == "u2003")){
lang = "cat-home.html"
}else if($(this).attr("id") == "u2009"){
lang = "en-home.html";
}else if($(this).attr("id") == "u2005"){
lang = "zh-home.html";
}
$.get({"http://bauti.tk/"+lang, function(data) {
$("#page").append(data);
//Add scroll effect here using .scroll() method.
//https://api.jquery.com/scroll/
});
}
},"a");
There's some customizing you'll have to do with this code but it could serve as a boilerplate for you.
Keep in mind, however, when using ajax the url will not actually change when you click the links unless you put the necessary code in place to change it.

Trying to get this wordpress theme to scroll to an id when a link is clicked on a different page

Easiest way to explain it is if you have a look at the site - haloespresso.com.au/working/
If you click the "menu" option in the top menu, it scrolls to the menu id #pg-9-4, which is what I want. On the other pages, the menu is slightly different and the same link is changed to link to the home page with #pg-9-4 added to the end of it. The point here is clearly to get the link from another page to open the home page but scroll to the menu part of it. I don't even need it to smooth scroll or anything, just go to that spot. It looks like it does go there for like, one frame, as it's loading, but it keeps jumping to the top. It's simply beyond me to try and figure out what is causing it to lose this basic HTML (afaik) functionality and keep forcing me to the top of the page...
Any help would be really great, as I'm a bit of a noob when it comes to anything other than html/css and simple jquery.
Just append the anchor to the end of the link.
Simply insert a link like:
Link to section on another page
Edit: Just noticed you're not getting this to work. What do your links look like, and what's the HTML with the ID on the target page?
Try this jQuery code:
$(document).ready(function() {
function hashScroll() {
// get URL Hash
var hash = window.location.hash;
// check if hash is set and not empty
if (hash != '') {
// scroll to hash ID after 10ms delay
setTimeout(function() {
$(document).scrollTop( $(hash).offset().top );
}, 10);
// debugging
console.log(hash);
console.log('offset:'+ $(hash).offset().top );
}
}
hashScroll(); // fire hash scroll function
});
Explanation:
This function will capture the URL hash (www.example.com/#hash), checks if it's not empty and then scrolls the page to the element with the ID which matches the hash after 10 ms. The delay is there to make sure browsers don't mess up the loading process.

Keeping the page vertically fixed on an element, when lots of content is revealed above (so causing scroll)

I have a long page with lots of data tables of hidden content.
They are hidden as they are quite repetitive so not all users want to have to scroll past them all the time.
Frequently down the page there is the option to click to open up all of the hidden data tables.
The problem is, if you go half way down the page and click to open up the tables, all of the content being revealed above the current view causes the page to scroll down, meaning the user becomes disorientated as to where they are on the page.
I've mocked up the problem here. If you scroll down to one of the "show more" links nearer the bottom of the page you'll see what i mean.
http://jsfiddle.net/LnubwdzL/
I want the clicked link to remain static under the cursor so that the user knows where they are.
This kind of a solution:
$("a").on('click', function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 2000);
});
... from other questions on SO, doesn't seem to cut it. Even if it ends up in the right place the page still moves about a lot before coming to rest.
If I understand it correctly and as I mentioned in comments, I think you can set the same duration value to both your slideDown(); and your animate() functions, and have them both inside the same click handler.
Your code may then become:
$('a').on('click', function(e){
e.preventDefault();
if($('.hide').length>0){$('html, body').animate({scrollTop:$(this).offset().top},400);}
$('.hide').hide().removeClass('hide').slideDown(400);
});
Hope this helps.
Update #1: Added a check on top of animate() so it does not animate when there is no $('.hide') element present anymore.
Update #2:
Take a look at this resulting fiddle of another experiment. Let me know if this was what you were looking for.
The way this works is:
Upon click of an anchor, offset().top of clicked element is first
stored in a variable named prevOffset.
Current $(window).scrollTop() value is also stored in a variable named
scrollTop.
Then all the .hide elements are temporarily made visible via $('.hide').show();.
Another offset().top of the same clicked element is then stored in a variable named currOffset.
All the .hide elements are made invisible again via $('.hide').hide();.
scrollTop is then animated to a value calculated as: scrollTop+(currOffset-prevOffset).
All $('.hide') elements are animated via slideDown().
JavaScript:
var duration=400,hideElements=null,scrollTop=0,prevOffset=0,currOffset=0;
$('a').on('click',function(e){
e.preventDefault();
hideElements=$('.hide');
if(hideElements.length>0){
scrollTop=$(window).scrollTop();
prevOffset=$(this).offset().top;
hideElements.show();
currOffset=$(this).offset().top;
hideElements.hide();
$('html, body').animate({scrollTop:scrollTop+(currOffset-prevOffset)},duration);
hideElements.removeClass('hide').slideDown(duration);
}
});
Hope this is what you were looking for.

jQuery scrolling issues with scrollTop

I am having 2 issues with scrolling, i figured it would just be easier to ask them both in one post.
Before I ask, below is my jQuery code im having issues with.
$("a").click(function() {
if(this.hash){
$("#main").animate({
scrollTop : $("h3[name="+this.hash.substr(1)+"]").position().top - 120
},2000,"easeOutExpo");
}
});
Situation: What I have going on in my page is basically i have a side menu with a couple lists. Each item in each list links to a anchor in my main div section, or my 'content' section. When a list item is clicked, the code above runs and it scrolls to one of the anchors.
Issue 1: When i click on a item in one of the lists, it scrolls down to a anchor which works just fine. But when that same item is clicked again, the main area scrolls back up to the top of the div. My thought to fix this was to check the current 'scrolled to' location of the div, and then not allow the code to run again if the location hadn't changed since the first click but i couldn't get that to work. Any suggestions on how to fix this issue?
Issue 2: Again as stated above, when i click on a item in a list it scrolls down to a anchor. What i then want to be able to to is click on a different list item and have it scroll to that position. The problem is when i click on a different list item, it scrolls to some random position in the main div, positions i haven't even anchored yet. Can anyone explain how I can make it so i can scroll from anchor to anchor?
Note: Please respond by having issue 1 or issue 2 above your explanation so i know which one your referring to. Thanks
EDIT: Thanks to Roko's help i got it working. For future viewers here is the fiddle of a working demo: http://jsfiddle.net/TsUcc/3/ and below is what the finally jquery code looks like
$("a").click(function( e ) {
e.preventDefault();
if(this.hash){
var target = '#'+ this.hash.substr(1);
var destination = $(target).offset().top - 10;
$('#main').stop().animate({
scrollTop : '+=' + destination
}, 1000);
}
});
LIVE DEMO
ISSUE 1:
you probably use something like: goto and you did not prevented the browser default behavior which is simply done by passing the event to the click handler like:
$("a").click(function( e ) {
e.preventDefault();
// .....
});
ISSUE 2
The HTMLelement position you're using is just a passive position of an element relative to it's positioned parent element.
which means that an element can have a position of ie: 30 even if it's at the bottom of your page.
To fix that use
offset().top
Also worth reading: https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect
ISSUE 3
H3 elements are not supposed to have a name attribute.
Use an ID for that purpose.
Why?
if you have a nice web and you have some sexy stuff at the bottom of your page, I can send a link to my friend by referencing your web page and the ID in a link like:
example.com#bottomLady
and he'll get immediately my thoughts without the need to scroll your page all the way down.

Categories