Iframe inside modal not scrolled to the top when opened - javascript

I have an iframe inside a modal but when I open the model the iframe in it is not showing the beginning of the page but the middle.
<iframe name="finance" id="finance" src="https://www.elbtools.com/secure/apply.php?elbt=1459262273170" frameborder="0" border="0" cellspacing="0" style="width:100%; height: 700px;"></iframe>
This is my codepen. Thanks.

A quick solution (edited codepen) is to append "#" at the end of your iframe src.
src="https://www.elbtools.com/secure/apply.php?elbt=1459262273170#"
Hope you can modify it until you find better solution.

Related

change css dynamically according to size of parent iframe

My partner sites embed my website using an iframe. I recently change my website and it is now longer than what my partner sites have allocated in their iframe (and they have all set scrolling=no.
Given that I can't change my partner sites, I am trying to change my own site now so that everything still works. I noticed that I can add <div style='width:325px;height:400px;overflow:scroll'> as long as width and height is the same as the parent iframe.
Is there a way I can dynamically obtain width and height of parent iframe so that I can apply it onto my own site? Or can I use viewport to determine how big the parent container is?
<iframe srcdoc="
<html><body>
<div style='width:325px;height:400px;overflow:scroll'>
<h1>Hello,<b>world1</b>.</h1><br /><h1>Hello,<b>world2</b>.</h1><br /><h1>Hello,<b>world3</b>.</h1><br /><h1>Hello,<b>world4</b>.</h1><br /><h1>Hello,<b>world5</b>.</h1><br /><h1>Hello,<b>world6</b>.</h1><br /><h1>Hello,<b>world7</b>.</h1><br /><h1>Hello,<b>world8</b>.</h1><br />
</div></body></html>"
scrolling="no" width=325px height=400px>
</iframe>
You can use viewport width and height: width:100vw height:100vh
Snippet:
<iframe srcdoc="
<html><body>
<div style='width:100vw;height:100vh;overflow:scroll'>
<h1>Hello,<b>world1</b>.</h1><br /><h1>Hello,<b>world2</b>.</h1><br /><h1>Hello,<b>world3</b>.</h1><br /><h1>Hello,<b>world4</b>.</h1><br /><h1>Hello,<b>world5</b>.</h1><br /><h1>Hello,<b>world6</b>.</h1><br /><h1>Hello,<b>world7</b>.</h1><br /><h1>Hello,<b>world8</b>.</h1><br />
</div></body></html>"
scrolling="no" width=325px height=400px>
</iframe>

Creating a Map inside Iframe based on an Address using mapquest

This was the code I used to display map iframe:
<iframe
src="#("http://media.littlecaesars.com/store/mapdev.html?address="+Model.StoreInfo.StoreInfo[0].ShortAddress.City +", "+ Model.StoreInfo.StoreInfo[0].ShortAddress.State +" "+ Model.StoreInfo.StoreInfo[0].ShortAddress.Zip)"
style="width: 100%; height: 400px"
></iframe>
OR
<iframe
src="#("http://media.littlecaesars.com/store/mapdev.html?address=Troy,Michigan 48083")"
style="width: 100%; height: 400px"
></iframe>`
but this was making map to zoom out completely like below.
I suspect there is wrong with this "#( since I tried without this by using a static address which was showing me exact position. Since I was trying Variable address based on input parameters I was suppose to use "#(. Could someone help on this.
[Note: This code was written in cshtml page]
That iframe seems to work fine, so it's probably something wrong with the cshtml.
<iframe
src="http://media.littlecaesars.com/store/mapdev.html?address=Troy,Michigan%2048083"
style="width: 100%; height: 100%;">
</iframe
Try right-clicking on your iframe and selecting "inspect element". Scroll up until you find the iframe and see what it says in src.

hide scrollbars iFrame child website

Using Colorbox jquery plugin, I use the iFrame popup class to display websites. Usually this works just fine, except when the website I am opening has larger than normal width. If that happens, The website will show horizontal scrollbars.
Here is the Colorbox code I use in my <Head>
<script>
$(document).ready(function(){
$(".iframe").colorbox({iframe:true, width:"100%", height:"90%", scrolling: false});
</script>
Here is the link I use to open website
<a class="iframe" href="client.php?id=<?php echo $rows['id']; ?>&Client Name=<?php echo $rows['client_name'] ?>">
If the website that opens is pretty standard dimensions, there will be no scrollbars or anything which is perfect. If the website it opens is very wide, it will show scrollbars and look bad. I would like to hide the scrollbars no matter what.
Here is an Example
Is there any to hide scrollbar in this situation? I tried inspecting with chrome, but when I try adding a Overflow: hidden to IFRAME element, it does NOT hide.
You can do it like this:
<iframe src="https://css-tricks.com" width="100" height="100" style="overflow-y: hidden;" seamless="seamless" scrolling="no"></iframe>
add style="overflow-y: hidden;" seamless="seamless" scrolling="no" to your <iframe>
See fiddle example: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/27/

How to set height and width of object tag so that no scrollbars appear

I am trying to display a webpage inside a div using object tag of html. I have tried loading it inside a div but since the host name of that webpage differes, it gives CORS error.
Also tried iframe but it requires scrolling='no' to remove scrollbars. So, I decided to use object tag after referring https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object. I am able to remove the scroll bars if I specify fixed height and width in pixels. However, I want to decide this dynamically based on screen resolution to avaoid scrollbars appearing for any devices/browsers.
How can I achieve this? Below is my code snippet.
<div style="width: 100%; overflow:hidden;">
<!-- Main content goes here -->
<object type="text/html" data="<%=url%>" style="overflow: auto;" align="middle" standby="Loading ..." id="py-content"> </object>
</div>
I really appreciate any help on this.

Youtube video shows on click of image

I've looked at a few implementations of this and so far none have worked so I'm resorting to posting. The concept is: a placeholder image which once clicked changes into the video and autoplays.
Current HTML:
<div id="ytvideo" style="display:none;">
<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="/wp-content/uploads/2013/10/placeholder.jpg" width="940" height="548" />
Current JS:
jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","www.youtube.com/embed/[myvidid]?autoplay=1");
jQuery("#ytvideo").attr('src', jQuery("#ytvideo", parent).attr('src') + '?autoplay=1');
});
I've looked at trying to reload the iframe but that doesn't seem to work.
Any ideas?
MARKED: FIXED
You forgot the protocol - www.youtube.com/… would link to folder on the server.
With protocol it works fine – I’d suggest creating the whole iframe dynamically though, because with an empty src attribute at the beginning it would load the same page it is embedded in.
<div id="ytvideo" style="display:none;"></div>
<!-- replaced your image with a span here for fiddle -->
<span id="homevideo" data-vidid="mbOEknbi4gQ">click me</span>
$(document).on('click','#homevideo',function(e){
$('#homevideo').hide();
$('#ytvideo').html('<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen src="http://www.youtube.com/embed/'+$(this).attr("data-vidid")+'?autoplay=1"></iframe>').show();
});
http://jsfiddle.net/HuVqm/
As discussed in one of the comments, you can get both the img and the video from the api.
This would be good if you didn't want to maintain the image, just wanted it to pull through from YouTube. (However I am not sure that YT provide an image as large as 939 so in your case you might still want to use your own image). I have put in a random channel name 'RIDEChannel' feel free to change that with your channel name.
<div id="vid"></div>
$.getJSON("http://gdata.youtube.com/feeds/api/users/RIDEChannel/uploads?max-results=1&v=2.1&alt=jsonc&callback=?", function (myvid) {
var vid = $("#vid");
$.each(myvid.data.items, function (i, item) {
vid.append("<img width='300' height='250' src='" + item.thumbnail.hqDefault + "'>");
$(document).on("click", "#vid img", function (event) {
vid.append("<iframe width='300' height='250' src='http://www.youtube.com/embed/" + item.id + "?autoplay=1' frameborder='0'></iframe>");
$(this).hide();
});
});
});
So the problem laid with the youtube url missing the http:// prefix and also for the fact that the iframe name was the same as the div it was enclosed in. (How silly of me) Thus it was attaching the SRC to the div, not the iframe.
Working DEMO
Try this,
First you cannot have same id for more than one elements <div id="ytvideo" and <iframe id="ytvideo"
[myvidid] in http://www.youtube.com/embed/[myvidid]?autoplay=1 should be replaced with the id of the video
html
<div id="ytvideo1" style="display:none;">
<iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="http://thefabweb.com/wp-content/uploads/2012/12/6191814472_fa47c79b67_b-900x600.jpg" width="940" height="548" data-vid='DBNYwxDZ_pA'/>
code
jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo1').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","http://www.youtube.com/embed/"+$(this).data('vid')+"?autoplay=1");
});
If you have more than 1 video, it could be useful to store the url to the video in the html and use a class instead of an id.
Also, if you put the preview image into the background, behind the video, it will stay there until the iframe has loaded, reducing that "flickering" effect when clicked.
I also restructured the markup a bit to reduce redundancy, here I specify the size of the video and the video id only once.
Also, you should use jQuery's .one('click') instead of .click(), since you want that event listener removed after it has fired the first time.
html:
<div class="ytvideo"
data-video="73sgatbknvo"
style="width:939px; height:528px; background-image:url(http://lorempixel.com/939/528/)">
<div class="seo">
Have a meaningful description of the video here
</div>
</div>
CSS:
.ytvideo {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
}
.ytvideo iframe {
border-style: none;
height: 100%;
width: 100%;
}
.ytvideo .seo {
display: none;
}
jQuery:
$('.ytvideo[data-video]').one('click', function() {
$(this).html('<iframe allowfullscreen src="//www.youtube.com/embed/'+$(this).data("video")+'?autoplay=1"></iframe>');
});
If you want to support browsers with no script support, you'd have to add a "noscript" element in the .ytvideo div that already contains the iframe.
fiddle:
http://jsfiddle.net/6ARc7/

Categories

Resources