I have a website where ALL of my content pages open inside of an iframe.
One of the issue I am having, is when a visitor opens a 2nd page on my site, it opens at the same 'scroll position' as the previous page they were on.
I would like all of my pages to open at the top.
NOTE: I have spent days and hours searching on this site and other sites trying to find something that works. None of the solutions I have found have worked so far.
So... I decided to post my question and a very stripped down example of 3 pages to see if I can get some much needed help with this.
Any help or advice is appreciate.
Here is the 'index' (parent) page:
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0;}
.header{width:100%; height:60px; background-color:blue;}
.header a{vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
#myiframe{width:100%; height:2000px;}
.footer{width:100%; height:60px; background-color:blue; margin-bottom:20px;}
.footer a{vertical-align:middle; line-height:60px; font-family:Arial; font-size:12pt; color:#ffffff;}
</style>
</head>
<body>
<div class="header"><a>This is the Header of the index (parent) page.</a></div>
<iframe id="myiframe" name="myiframe" src="1stPage.html"></iframe>
<div class="footer"><a>Footer</a></div>
</body>
</html>
Here is the 1st 'content' page (including the last failed scroll code):
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0;}
.text{font-family:Arial; font-size:12pt;}
.link{margin-top:1900px;}
</style>
<script>
$(document).ready(function(){
$('html, body').scrollTop(0);
$(window).on('load', function() {
setTimeout(function(){ $('html, body').scrollTop(0);}, 0);
});
});
</script>
</head>
<body>
<div class="text">This is the 1st page in iframe (..and this is 'page postition' "Top" or "0").</div>
<div class="text">Please scroll down to the link to 2nd page.</div>
<div class="link"><a class="text" href="2ndPage.html" target="myiframe">Click here to go to 2nd Page</a></div><br>
<div class="text">This is the 1st page in iframe (..and this is 'page postition' "Bottom" or "X").</div>
</body>
</html>
And finally... the 2nd 'content' page (also including the last failed scroll code):
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0;}
.text{font-family:Arial; font-size:12pt;}
.link{margin-top:1900px;}
</style>
<script>
$(document).ready(function(){
$('html, body').scrollTop(0);
$(window).on('load', function() {
setTimeout(function(){ $('html, body').scrollTop(0);}, 0);
});
});
</script>
</head>
<body>
<div class="text">This is the 2nd page in iframe (..and this is 'page postition' "Top" or "0").</div>
<div class="text">Please scroll down to the link to 2nd page.</div>
<div class="link"><a class="text" href="1stPage.html" target="myiframe">Click here to go back to the 1st Page</a></div><br>
<div class="text">This is the 2nd page in iframe (..and this is 'page postition' "Bottom" or "X").</div>
</body>
</html>
You can do it in the iFrame onload event, as this:
<iframe id="myiframe" name="myiframe" src="1stPage.html" onload="scroll(0,0);"></iframe>
Related
I'm working on a website with a menu fixed on top. At the home page, I have tags that should anchor to id's from other pages on my website. The anchor to these id's work fine, however, the top part of their content stays behind the fixed menu.
I tried to solve it by using JavaScript animate method and adding the menu's height value. This works well when the anchor's destiny id is from the same page. But it doesn't work in my case, because I want to go to an id in another page from the website.
My HTML:
My JavaScript:
<script src="http://localhost/meu_site/js/jquery-3.4.1.min.js"></script>
$('.psi-block-item').click(function() {
var target = $(this).attr("href")
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100)
})
Apparently, when jumping from the home page to another page, it seems to ignore my last js command and just follow the href, keeping part of the content behind the fixed menu.
I already saw some people suggesting to use pseudo css elements and hiding them to make it works, but I was looking for a clean and more professional solution, using only html and javascript.
Thank y'all.
$(document).load(function() {
var target = this.location.href;
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100);
})
i'm not sure, but this should be the logic to work it out...
Most probable the page is reloaded before it can execute the code. Therefore I would suggest that you include a window onload event listener to every page that looks for the hash and then executes your animation.
EDIT:
Please see the answer by #nengak-dakup. His answer looks pretty good.
The implementation would look like this.
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<header>
Link to Page1 - Anchor 1
Link to Page1 - Anchor 2
Link to Page1 - Anchor 3
</header>
</body>
and page1.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page1</title>
<style type="text/css">
header {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background-color: grey;
z-index: 5;
}
.box {
position: relative;
top: 100px;
width: 100%;
height: 800px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).load(function() {
var target = this.location.href;
$("html, body").animate({ scrollTop: $(target).offset().top-100 }, 100);
})
</script>
</head>
<body>
<header>
Back
</header>
<div id="anchor1" class="box" style="background-color: blue"></div>
<div id="anchor2" class="box" style="background-color: green"></div>
<div id="anchor3" class="box" style="background-color: red"></div>
</body>
Let's say my html is setup like this:
<html>
<head>
</head>
<body>
<div id="site_banner">
<img>
</div>
<div id="site_content">
<div id="home_menu"></div>
<div id="home_content"></div>
</div>
</body>
</html>
All I want is my home_content to fill the rest of the view and then any additional content in home_content to be in overflow instead of overflow being in html, so that the site_banner and home_menu are always on screen as the user scrolls down and never disappears.
From what you're saying it sounds like you should be putting the "site banner" and "home menu" in a header tag which means it should be structured like this.
<html>
<head>
</head>
<body>
<header>
<div id="site_banner"><img></div>
<div id="home_menu"></div>
</header>
<div id="site_content">
<div id="home_content"></div>
</div>
</body>
here's a fiddle of it https://jsfiddle.net/Optiq/rx2qn1h9/
Here's the CSS I added to make it stay put
header{
position:fixed; /*this makes it stay in place*/
display:block;
top:0px; /*this bumps it to the very top of the page*/
width:100%;
height:80px;
background-color:red;
}
Using jQuery:
$("#site_content").height($(window).height()-$("#site_banner").height());
$("#home_content").css("overflow-y","auto").height($("#site_content").height()-$("#home_menu").height());
Here's a JSfiddle:
http://jsfiddle.net/h1bcn5p0/
I'm working on a simple HTML/jQuery script.
Right now when i click on the button which is inside the iframe it is changing the iframe's height that is calling the content with the button.
Take a look at the code:
<div id="outerdiv" style="padding:20px;border:2px solid red;">
<iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
Here is the iframe.php content:
<HTML>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<div style="display:block;height:300px;">
<h3>The iframe content</h3>
<button type="button" id="SuperWebF1">Click me to resize the holding Iframe!</button>
</div>
<script type="text/javascript">
$("#SuperWebF1").click(function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
})
</script>
The problem is coming when i try to add this:
<style>
#outerdiv
{
width:400px;
height:300px;
overflow:hidden;
position:relative;
border:2px solid #fff;
}
#inneriframe
{
position:absolute;
width:400px;
height:700px;
border:0px;
}
</style>
<div id="outerdiv" style="padding:20px;border:2px solid red;">
<iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
As you can see i've added a <style> tag where i added CSS for the elements outerdiv and the iframe inerriframe and now when i click on the button it's not chaning the iframe's height.
When i remove the <style>....</style> tags and all the content inside them the script is starting to work again.
Here is the demo: http://beta.sportsdirect.bg/test/
This is the working demo when i have not added the <style></style> tags.
Can you help me set up the CSS for these elements and make the jQuery script works as well ?
Thanks in advance!
The event will not trigger it's function when the document is not fully loaded inside the iframe page.
Instead of:
<script type="text/javascript">
$("#SuperWebF1").click(function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
});
</script>
Use:
<script type="text/javascript">
$(document).ready(function(){
$("#SuperWebF1").on('click',function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
});
});
</script>
For it to listen to the click event when all the .css,.js and whole documents in the page are completely ready.
I hope this will help?
So i created a simple html page :
index.html file:
<html>
<head>
</head>
<body>
<div class="menu">
hello
</div>
<div class="test">
Menu
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
here is the app.js file:
var main = function() {
$('.test').click(function(){
$('body').animate({
left: '500px'
},200);
})
}
$(document).ready(main)
I'm trying to understand what i did wrong , it seems like it should work..
was also tried to download jquery-2.1.1.min.js and to work with it , but still while clicking on the menu , the text is not moving ..
You need to set position css property to body in order to work left.
body{
position:relative;
}
REF : http://api.jquery.com/animate/
I would like to figure out a way to get my image when clicked on to autoplay my media player. I'm a bit new and can't figure out onclick for this matter. I suppose jquery is the way to go. So, Thanks in advanced.
<!DOCTYPE html>
<html><head><style>#leadplayer_video_element_5348CAD9E1F02
<head>
<style>
<style>
position:absolute;
left:8px;
top:8px;
z-index:-1;
}
</style>
</head>
</head>
<body>
<a href="#">
<img src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn2/t1.0-9/1508520_496016637195955_3564444582693127544_n.png" hight="294" width="377" onclick="this.style.display='none';" style="position:absolute;opacity:1.0; z-index:1;"/>
</a>
<!-- LeadPlayer video embed code start [ video: 5348CAD9E1F02 ] -->
<div>
<script type="text/javascript" src="//s3.amazonaws.com/cdn.leadbrite.com/leadplayer/r0034/js/leadplayer.js">
</script>
</div>
<div id="leadplayer_video_element_5348CAD9E1F02" style="width:377px;height:260px">
</div>
<div>
<script type="text/javascript">jQLeadBrite("#leadplayer_video_element_5348CAD9E1F02").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6dHJ1ZSwicG93ZXJlZF9ieSI6dHJ1ZSwicG93ZXJlZF9ieV9saW5rIjoiaHR0cDpcL1wvd3d3LmxlYWRwbGF5ZXIuY29tXC8/dXRtX3NvdXJjZT1kZW1vLXNpdGUmYW1wO3V0bV9tZWRpdW09cG93ZXJlZC1ieS1sb2dvJmFtcDt1dG1fY2FtcGFpZ249TGVhZFBsYXllciAiLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiU1VCTUlUIiwidHh0X3BsYXkiOiJQTEFZIiwidHh0X2VtbCI6IllvdXIgRW1haWwgQWRkcmVzcyIsInR4dF9uYW1lIjoiWW91ciBOYW1lIiwidHh0X2ludmFsaWRfZW1sIjoiUGxlYXNlIGVudGVyIGEgdmFsaWQgZW1haWwiLCJ0eHRfaW52YWxpZF9uYW1lIjoiUGxlYXNlIGVudGVyIHlvdXIgbmFtZSIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMS44IFVubGltaXRlZCIsImlkIjoiNTM0OENBRDlFMUYwMiIsIndpZHRoIjozNzcsImhlaWdodCI6MjYwLCJ0aHVtYm5haWwiOiJodHRwczpcL1wvZmJleHRlcm5hbC1hLmFrYW1haWhkLm5ldFwvc2FmZV9pbWFnZS5waHA/ZD1BUUQ1S0U0R3lkYkotY0Y4JmFtcDt3PTM3NyZhbXA7aD0xOTcmYW1wO3VybD1odHRwJTNBJTJGJTJGcGljcmVkaXJlY3QuY29tJTJGcG9zdCUyRnVwbG9hZHMlMkYxMzk3MDY2MzkyLmpwZWclM0Z2JTNENTkyMTg3NjY1JmFtcDtjZnM9MSIsInRpdGxlIjoiVmlkZXJlZGlyZWN0IFRlc3QgQ29kZSAxIiwiZGVzY3JpcHRpb24iOiJUZXN0IENvZGUiLCJhdXRvcGxheSI6ZmFsc2UsInNob3dfdGltZWxpbmUiOnRydWUsImVuYWJsZV9oZCI6dHJ1ZSwib3B0IjpmYWxzZSwiY3RhIjp7InRpbWUiOjEwLCJidGV4dCI6IkNhbGwgVG8gQWN0aW9uIC0gQ2xpY2sgSGVyZSAiLCJ1cmwiOiJodHRwczpcL1wvd3d3LnBheXBhbC5jb21cL2NnaS1iaW5cL3dlYnNjcj9jbWQ9X3MteGNsaWNrJmFtcDtob3N0ZWRfYnV0dG9uX2lkPURZVUdCRUpHVzg2U0ciLCJhdXRvX2ZvbGxvdyI6ZmFsc2UsIm5ld193aW5kb3ciOnRydWV9LCJ5bSI6IklUWlUwaTlueEdnIn0=");
</script>
</div>
<!-- LeadPlayer video embed code end [ video: 5348CAD9E1F02 ] -->
</body>
</html>
OR... Can anyone find a way to make the pic refresh in the same div using ajax and jquery? Both would be highly appreciated.
Add Jquery Lib in head section
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript">
Try this (Add inside <script>..code..</script>)
$(window).load(function(){
$('a').click(function(){
$('.player').slideToggle();
});
});
DEMO