WordPress PHP load a simple div on scroll
in my case, I need to load the map only when people scroll to it, don't need to be there or loaded all the time only if someone scroll to it is on the end of the page
this is the code
?><iframe width="100%" height="400" id="gmap_canvas" src="https://maps.google.com/maps?q=<?php echo do_shortcode( '[SLUG]' ); ?>&t=&z=11&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><br><style>.mapouter{position:relative;text-align:right;height:400px;width:100%;}</style><?
what is the best way to load this block on the scroll ?
load 300px before getting to it.
thank you
Related
I'd like to know if i can refer to a particular tag (in our example H1) via the link directed (Src) in an Iframe.
For the example the link http://www.marketwatch.com/story/what-the-fed-raising-rates-would-mean-for-your-credit-cards-and-bank-accounts-2016-12-14
I'd like to know if i can refer to a the first H1 in the link below ("How the Fed rate hike will impact millions of Americans") The main goal is to see the Article directly.
<iframe id="iFrame1" scrolling="no" src="http://www.marketwatch.com/story/what-the-fed-raising-rates-would-mean-for-your-credit-cards-and-bank-accounts-2016-12-14#H1" style="overflow: scroll; -webkit-overflow-scrolling: touch;" sandbox=""></iframe>
What do i mean by 'refer to the h1 tag'? I mean that I want to scroll the iframe down to that element.
The idea is to directly to a specific TAG (H1ׂ) without ID or CLASS (At All articles in all the world sites have only one H1).
Assuming that you mean you want the iframe to scroll down to the h1 tag you can add a fragment to the URL which matches the id attribute of the required element. In this case it's #article-headline. Try this:
<iframe id="iFrame1" scrolling="no" src="http://www.marketwatch.com/story/what-the-fed-raising-rates-would-mean-for-your-credit-cards-and-bank-accounts-2016-12-14#article-headline" style="overflow: scroll; -webkit-overflow-scrolling: touch;" sandbox=""></iframe>
I am using an iFrame to show google-map, but it is not working.
If I paste the URL into the browser, then it is showing the exact location.
I don't know why it is not working.
My HTML code:
<div><iframe src="<?php echo $uni['GoogleMapLink'];?>" width="97%" height="50%" frameborder="0" style="border:1px solid #ccc;"></iframe></div>
<?php echo $uni['GoogleMapLink'];?> is https://www.google.co.in/maps/place/Birmingham+City+University/#52.517047,-1.897309,17z/data=!3m1!4b1!4m2!3m1!1s0x4870b
The output in the browser is:
<div><iframe src="https://www.google.co.in/maps/place/Birmingham+City+University/#52.517047,-1.897309,17z/data=!3m1!4b1!4m2!3m1!1s0x4870bcf7bed14f49:0x783aa84ea9692f19" width="97%" height="50%" frameborder="0" style="border:1px solid #ccc;"></iframe></div>
You are not allowed to display that URL in an iframe. If I create a fiddle containing your code:
<div><iframe src="https://www.google.co.in/maps/place/Birmingham+City+University/#52.517047,-1.897309,17z/data=!3m1!4b1!4m2!3m1!1s0x4870b" width="97%" height="50%" frameborder="0" style="border:1px solid #ccc;"></iframe></div>
and look in the javascript console, I see:
Refused to display 'https://www.google.co.in/maps/place/Birmingham+City+University/#52.517047,-1.897309,17z/data=!3m1!4b1!4m2!3m1!1s0x4870b' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
You should look at the Embed API or use Google's tools to create a map you can put on your page.
I have used iframe for view multiple image with in the frame and I want to hide the Horizontal Scroll Bar. I Have used following code snippet.
<div class="framepart">
<iframe src="http://docs.google.com/gview?url=http://www.puthuvannam.com/vendors/sample/documents/<?php echo $res['name'];?>&embedded=true" style="width:600px; height:500px;overflow-y:hidden;" scrolling="no" style="overflow:hidden" frameborder="0">
</iframe>
</div>
<iframe src="" scrolling="no"></iframe>
iframe { overflow:hidden; }
scrolling="no" will work in IE10, Chrome 25 and Opera 12.12.
However the <iframe> scrolling attribute is not supported in HTML5, even though most browsers understand it.
See this article to learn more on scrolling.
I think I found the problem.
I changed the src of the <iframe> to http://docs.google.com/gview?url=http://www.google.com/&embedded=true (http://jsfiddle.net/U8JCj/2/).
By inspecting this in Developer Tools, it can be seen that it is not the <iframe> that has an overflow, but the inner <div id="content-pane"> which has overflow: auto. As this is internal to Google Docs, it is not a style you can change, and therefore there is no solution to this (while using Google Docs).
I was trying to set a dynamic height to an iframe but it always fail; I'm looking for an iframe alternative that retrieves contents from webpage and display it in the holder page with dynamic height. Any suggestions?
Add this to your <head> section
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe name="Stack" src="http://stackoverflow.com/" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
search for responsive Iframe on google. There are a lot of tutorials and examples out there.
height:100%; will be an important keyword
Im integrating a simple chatbox application into my site, which is simply added by iframeing chat.php
I dont have a static place to put this on the webpage, and I want to load the iframe on top of the site's content on the top right (with ajax), which would remain visible unless I X it out at the top.
Auto-triggering the chatbox to load between page loads once its enabled (by checking the session that it wrote when the chatbox was first enabled) would also be nice.
I use the jquery framework, but Im not that proficient at it. Site is written in php.
What I was thinking is this
I have an empty div with id chatbox. When someone clicks a link to see the chatbox, it loads chat.php inside that div in an iframe, and adds a class to the div that would position the div in the top right corner.
<style type="text/css">
#chatFrame {
display: none;
width: 300px;
height: 200px;
/* some more styles */
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#activator').click(function() {
$('#chatFrame').html('<iframe border="0" frameborder="0" width="100%" height="100%" src="chat.php"></iframe>').show();
});
});
</script>
open chat
<div id="chatFrame"></div>
A simple and very neat solution : use PrettyPhoto (or any other lightbox style) plugin.
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
I like PrettyPhoto for it's simple look and so far I had no problem with it.
The code can be as simple as this :
Google.com
The website has all the details.