Scroll to Specific Div not working in Fancy box Popup - javascript

I have a Fancy Box Popup , it has a long page which scrolls, but I want it to scroll up to the header Div on top of that popup when i click on Go to top button. How can i force it to scroll.
Here is my code for scrolling :
<script>
$('#goTop').click(function (){
$('html, body').animate({scrollTop:$(".wrap").offset().top}, 750);
return false;
});
</script>
Why is it not scrolling, there are no errors in console , plus i have used the code on normal page , it works there . but it doesnot works in fancy box. Any solution ?
Here is the Image of my Popup :

You need to scroll the actual modal window, not the document's <body>.
$('#goTop').click(function (){
$(this).closest('.fancybox-inner').animate({scrollTop: 0}, 750);
return false;
});
Where fancybox-inner is the class given to the fancybox which has a fixed height and CSS overflow-y: scroll.

$('.fancybox-overlay').animate({
scrollTop: $('.fancybox-overlay').scrollTop() + $("#div").offset().top
});

Related

Trigger 2 events on href? Scroll to top, then load

I have a question, I would like to trigger a specific event in javascript or jquery on a webpage. The page has an animation effect during page loads (the screen and content splits in two and slides open revealing the next content). This works fine when the content on the page fits and doesn't need to be scrolled. However when content needs to be scrolled, the effect doesn't look as good. Is there anyway to trigger an href to scroll back to the top of the page and THEN load the href link/target? In basic terms something like "on click scroll to top and then load link" Any help would be great! Thanks
One could use jquerys animate to scroll to the top, then if that finished redirect:
$("a").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow", ()=> location.href = this.href );
return false;
});
try it

scrollTop animation caused white flash of screen

I have a fixed menu at the top of my screen with 4 option, each option when clicked will scroll to a section within the page. The code I am using is as follows:
$("#click1").click(function (){
$('html, body').animate({scrollTop: $("#sec1").offset().top}, 1000);
});
The scroll works as expected but when I click the options I get a flash of a white page. Has one else seen this and know any solution. Not sure if it's caused by the fixed menu element on the page.
I had this issue before. Try this:
$("#click1").click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $("#sec1").offset().top}, 1000);
});
Here is the jQuery API: http://api.jquery.com/event.preventdefault/

Javascript to make div appear after scroll is showing on page load?

I input this code (which I pulled from this answer: Make a div appear when scrolling past a certain point of a page) to make a div appear when the user scrolls down on the page.
The problem is: The div appears as soon as the page loads, and disappears when the user scrolls, and then reappears when they scroll > 700.
How do I get the div to not show up at the beginning of the page load?
Thanks!
<script>
// Get the headers position from the top of the page, plus its own height
var startY = 700;
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.scroll-up').slideDown();
}else{
$('.scroll-up').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
</script>
In your CSS set display:none property for the div you don't want to show on page load
Instead of slideUp() and slideDown()
you can use, fadeIn() and fadeOut() or slidetoggle();

trying to make a div slide down and up from top of page using - top positioning and jquery animate upon click

basically when a user clicks the .selector element the div .dropDown should slide up -100px and when they click again it should slide down to top: 0px.
$(document).ready(function(){
var orig = $(".dropDown").outerHeight(); // 104
var top = $(".dropDown").css("top");
if(top == "0px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "-100px"}, 400,
function(){
var top = $(".dropDown").css("top");
alert(top);
})
})
}
// else{
// $(".selector").on("click", function(e){
// $(".dropDown").animate({top : "0px"}, 400);
// $("body").css({"background-color" : "green"})
// })
// }
if($(".dropDown").css("top") == "-100px"){
$(".selector").on("click", function(e){
$(".dropDown").animate({top : "0px"}, 400);
$("body").css({"background-color" : "green"})
})
}
});
logic: if the dropDown div's top position is zero that means that the div is open(visible). when the user clicks the button to hide the dropDown div the div goes to -100px(hidden). then if the user wants to see the div again they click the button and the div goes back down to top: 0.
Im having problem when the top is at -100px and when i click the button the dropdown doesnt slide down. please help with that. Thanks.
while I was setting up the jsfiddle I realised that what I have so far works in FF but not in chrome. that is weird to me, if you can help me solve that problem too that would be also great.
You can achieve this by laying out your div as it should appear while expanded, and set display:none, but take the clickable tab out as a child element so that it is always visible. Then you can simplify your javascript quite a bit by using slideToggle. The 300 value just specifies how fast you want it to slide.
Example:
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});
});
updated jsFiddle
Edit
Maintaining the border at this point is just styling, you can add a container div that holds your Information tab, and just give that a top-border. Here is a further updated jsFiddle.

Position Fancybox 2 to the Top of Viewport

I am using Fancybox 2. I would like it positioned to the top of the viewport.
I tried the following code:
$(".fancybox").fancybox({
topRatio:0
});
This positions fancybox to the top of the page, not the viewport. This works if a person isn't scrolling down the page, however, when a person starts to scroll down the page fancybox is out of the screen.
Screenshot of Fancybox when scrolled:
I have Fancybox in an iframe and wonder if that may be part of the problem?
How do I get Fancybox to always stay within the viewport?
UPDATE
In attempting to get this to work it would be best if it opens outside of the iFrame. I attempted the following code:
$( ".fancybox" ).click(function(e){
parent.$.fancybox({
href: this.href
});
return false;
});
and
$( ".fancybox" ).click(function(){
parent.$.fancybox();
return false;
});
In both cases it doesn't work and there are no errors.
How do I get this to work?

Categories

Resources