Trigger Back to Top Function from within iFrame - javascript

I've been searching a lot for the solution to this and can't figure it out. Tried a lot of methods I've seen but none seen to work.
Here is what I wanna do:
I have a main page with a navigation menu on its side, and all the content is loaded on iFrame. I wan't to know when the iFrame content was scrolled down to enable or disable Back to Top Button and also send the iFrame content back to top when clicking the button.
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
I've found this code but it is made to work on the current page you're on. I've tried a lot with document.parent, parent, trigger(), but nothing seen to work. I could paste this code on all pages that will load on the iFrame but what I want is to place the back to top button on a static button menu that I have on the top of the content so it can be seen from wherever part of the text you are.
Thanks!

Have you tried inserting this script in the iframe head? btw its parent.document not document.parent.

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
button = document.getElementById('topButton');
button.style.display = "block";
}
});
function toTop(){
document.getElementById('iframeContainer').scrollTop = 0;
}
and just hide the button. once the bottom is reached it should change the style to block and make it visible. Call the toTop() function with your newly visible button.

Related

div content on scrolled bottom html javascript

i want to ask about div content scroll listener (not page).
so I have an html code where the appearance of the web design resembles a native application. what I want to do is how do I detect if the user has scrolled down the content div? not a page because my web page for him is only silent, but the one that moves in the div. my div code is something like this
<div class="product-list-item">
//product card
//product card
</div>
and when i scroll like this
I want to see other products using ajax when it reaches the bottom of the div, for now I
still using the manual button to load other products.
I've used this code but it's not working.
<script>
$(window).scroll(function() {
if($(window).scrollTop() == $(document).height() - $(window).height()) {
// ajax call get data from server and append to the div
}
});
</script>
does anyone have a solution for this? Thank you in advance.
Assuming you have this:
<div class="product-list-item" id="target">
//product card
//product card
</div>
You can use this script to check if you reached your target div:
<script>
$(window).scroll(function() {
if ($(this).scrollTop()+$(this).height() >= $('#target').position().top) {
console.log('Target Reached');
}
});
</script>
You can use this approach to only execute the code once , once it has reached the target div
<script>
let isReached = false;
$(window).scroll(function() {
if ($(this).scrollTop()+$(this).height() >= $('#ftr').position().top && isReached == false) {
isReached = true;
//ajax call
}
});
</script>

Bootstrap navbar collapse on scroll

I'm using bootstrap grayscale theme for my project and It has a navbar that collapses on scroll, or if I go to a link that's on the same page (#download etc.)
The problem is when I go to anchor link from some other page, than navbar doesn't collapse until I scroll.
I guess the solution is in adding the line in java script, but I really don't know what to add since I don't know java. :-(
// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
Please, help. :) :-*
You need to run the check when the page loads as well as when the window is scrolled, you can do that without duplicating any code by putting the logic that checks the offset of the page in a function and running it from both document ready and window scroll.
$(document).ready(function() {
// Put your offset checking in a function
function checkOffset() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
}
else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
}
// Run it when the page loads
checkOffset();
// Run function when scrolling
$(window).scroll(function() {
checkOffset();
});
});
Edit:
I believe you could shorten this even more by replace the checkOffset function with the following:
// Put your offset checking in a function
function checkOffset() {
$(".navbar-fixed-top").toggleClass("top-nav-collapse", $(".navbar").offset().top > 50);
}
I haven't tested this, but as long as the second parameter in toggleClass returns a boolean it'll either add or remove the class depending on the offset of the page without needing an if statement.
You can also use :
$(document).ready(function() {
function checkOffset() {
$(".navbar").removeClass("show");
}
// Run function when scrolling
$(window).scroll(function() {
checkOffset();
});
// Run function on Clicking
$(window).click(function() {
checkOffset();
});
});
This will help with navbar collapse on mobile devices.
You should be able to do something as simple as this..
$('.navbar-collapse ul li a').click(function() {
/* always close responsive nav after click */
$('.navbar-toggle:visible').click();
});
Here's an example of use
It's not Java, it's JavaScript which is easily added to your html page using script tags.

Button link to different ID with scroll

I'm trying to make a single down arrow that jumps to the next ID on the page as you scroll down. I don't really know JavaScript so I'm trying to keep it as simple as possible. I thought, as there are only a few sections, that I could just hide and display different divs with arrows that have different targets. I used two different codes to arrive at this, but doesn't seem to be working. Any ideas?
<script type="text/javascript">
$(window).scroll(function(){
if($(window).scrollTop() >= 800) {
var elem = document.getElementById("arrow");
elem.setAttribute("style","display:none;");
} else {
elem.setAttribute("style","display:inline;");
}
});
</script>
I'm not sure I understand exactly what you want to do, but your code can be simplified a bit by taking advantage of the shortcuts that jQuery provides.
//When the document is ready...
$(function(){
//Select the arrow just once
var arrow = $("#arrow");
//Attach a scroll event to the window
$(window).scroll(function(){
//See what the scroll position is
var scrollPos = document.body.scrollTop;
//When the document has scrolled to a certain point or more, hide the arrow.
//Otherwise, show it.
if(scrollPos >= 800){
arrow.hide();
} else {
arrow.show();
}
});
});
Here's a brief demo of it in action: http://jsfiddle.net/Bt35Q/

nicescroll not scrolling when hidden div is shown

I'm trying to use nicescroll on my website and it's working everywhere except on one page where I have a hidden div. Basically, I have a link that when clicked displays some content that was hidden on the page before. The problem - after clicking the link and showing the content it overflows and is not visible and not scrollable. Nicescroll isn't working for some reason.
Both work on their own on the page - meaning - if I take out the nicescroll code and keep the show/hide div code then I can click on the link and the page will become longer and a regular scroll bar will appear and I can scroll down to the bottom of the content.
Conversely, if I take out the show/hide code (just making the content shown at the load of the page) and leave in the nicescroll code then the page will load as a long page and the nicescroll bar will show up and work just fine.
I just can't get them to work together. I assume it has something to do with the page not needing to be scrollable when it first loads and when nicescroll is originally called so it just says "I don't need to work for this page" and then gives up. So, I've tried copying what looks to me like the "nicescroll startup code"
<script>
$(document).ready(function() {
$("#right").niceScroll();
});
</script>
into the function that is called when the show/hide link is clicked hoping that would "restart" it but that didn't work either.
The show/hide functions looks like this:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
with the actual div section of the page looking like this:
-Show Stuff
<div id="example" class="more">
<p>
"Stuff here"
</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">-Hide Stuff-</a></p>
</div>
Everything is wrapped in a div with id="right" which is why the nicescroll script applies it to #right (which, again, works fine when I don't have the show/hide functionality.)
Any ideas?
I don't know what it is the correct solution but works fine after my div shows up and I call method:
$("#myHiddenDiv").getNiceScroll().onResize();
First off all move the inline onclick to the docready. If nicescroll is attached to the #right container you can try the following:
// cache container:
var $right = $('#right');
// use .on() jquery on container:
$right.on('click', '.showLink', function(e){
e.preventDefault()
$right.find('#example').show();
// resize nicescroll
$right.getNiceScroll().show().resize();
}).on('click', '.hideLink',function(e){
e.preventDefault();
$right.find('#example').hide();
// also hide nicescroll:
$right.getNiceScroll.hide();
});

Clicking on anchor takes me to the bottom instead of restoring the previous position

I am kind of really stuck with this problem. Any help will great.
I am clicking on a link which expand the content and when i am cliking on a hide button, instead of taking me to the Expand link, it takes me to the bottom.I have already tried such options like onclick="fun() return false" and href=javascrpit:void(0), but not could help.
PLease refer http://jsfiddle.net/BdsyJ/ this link and click on "How do I maximize battery life" and at the bottom you will get a hide button which should take the control back to the Click it rather than placing the page at the bottom.
Thank you guys.
I changed your ReverseDisplay() method to this and it works nicely:
function ReverseDisplay(d) {
$("#" + d).toggle();
$('html, body').animate({
scrollTop: $("#" + d).prev().offset().top
}, 100);
}
here's a working example:
http://jsfiddle.net/hunter/BdsyJ/5/
In case you were wondering; YES your HTML is invalid. <li> elements should not have <div> siblings.
You're at the bottom of the page because you have hidden so much content. Two things I would update in your code:
cache the element look up so you only do it once and and
scroll the page to the top after you close it using scrollTo(0,0) or
something more complex if you need to scroll back to the exact
element you toggled.
Code:
function ReverseDisplay(d) {
var el = document.getElementById(d);
el.style.display = (el.style.display == "none")?"block":"none";
}

Categories