Interactive HTML underlay with z-index - html

Can we make the following Google Map interactive provided the frame image is showing.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="button" onclick="$('#frame_image').show();" value="Show frame layer">
<input type="button" onclick="$('#frame_image').hide();" value="Hide frame layer">
<br /><br />
<div style="position: absolute; z-index: 1;">
<iframe frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.ca/maps?f=q&source=s_q&hl=en&geocode=&q=55+Avenue+Road,++Toronto,+Ontario+M5R+3L2+Canada&aq=&sll=43.656877,-79.32085&sspn=0.852471,2.113495&ie=UTF8&hq=&hnear=55+Avenue+Rd,+Toronto,+Ontario+M5R+1C6&t=m&z=14&ll=43.67111,-79.395217&output=embed&iwloc=near" ></iframe> <br />
<small>View Larger Map</small>
</div>
<div style="position: absolute; color:red; z-index: 2" id="frame_image">
<img src="http://torontoclinic.awkwardhosting.com/images/frame.gif" />
</div>
Code is also on the following link:
http://jsfiddle.net/pPrZV/
Please let me know if there is any other way via Google Maps API etc.
Thanks

Just apply this style to <iframe> of the google map
<iframe style="border-radius:250px" frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no"...
Working jsFiddle here

Related

YouTube video in iFrame only locally visible

I have embedded a YouTube video in my website like this:
<h2>Some YouTube video:</h2>
<br>
<div style="text-align:center">
<iframe width="420" height="315" src="http://www.youtube.com/embed/zN7VPRoLlzw" frameborder="0" allowfullscreen></iframe><br><br>
<div id="videotip">
<span class="mini"><br>
<img src="../images/tipp.png" alt="" title="" />
SomeText
<br><br>
</span>
</div>
</div>
When I view the htm file locally in my browser, the YouTube video shows up.
However, when I upload the htm file to my webserver and view it, the video area is blank.
Does anybody see which mistake I might have made?
I used this code and it worked for me:
<h2>Some YouTube video:</h2>
<br>
<div style="text-align:center">
<iframe width="420" height="315" src="https://www.youtube.com/embed/zN7VPRoLlzw?ecver=2" frameborder="0" allowfullscreen></iframe><br><br>
<div id="videotip">
<span class="mini"><br>
<img src="../images/tipp.png" alt="" title="" />
SomeText
<br><br>
</span>
</div>
</div>
as you see I did not change anything but the src link, I right click on the video I selected copy embed code and then replace the link in src with it
Hope this helped (:

Disable Dailymotion Share Option

How can i disable/Hide share option on embedded dailymotion?
Blockquote
https://www.dailymotion.com/embed/video/x5hywa
You can disable it via the query string in the URL in the iframe.
--> "sharing-enable=false"
For instance:
<iframe frameborder="0" width="480" height="270"
src="//www.dailymotion.com/embed/video/x5hywa?sharing-enable=false"
allowfullscreen allow="autoplay"></iframe>
Just put that video in an iFrame and you're fine. There's no overlay.
<iframe src="https://www.dailymotion.com/embed/video/x5hywa" style="border:0px #ffffff none;" name="iFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe>
Example: http://jsfiddle.net/ysxf4qt3/

Is there any way to set IFrame's height dynamic?

<div class="LHSChunk" style="width:690px;float:left;">
<div class="DetailComments" runat="server" id="CommentVisible">
<iframe id="iframeComments" runat="server" scrolling="no" frameborder="0" style="width: 700px; height: 400px; visibility: visible;"></iframe>
</div>
</div>
Here I wanted to set my iframe's height as dynamic one based on the page displayed in iframe. For your info I'm using same domain page in iframe.
This helped me,
<script type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight;
}
</script>
in aspx,
<iframe id="iframeComments" runat="server" scrolling="no" frameborder="0" style="width: 690px; visibility: visible;"></iframe>
in aspx.cs,
iframeComments.Attributes.Add("onload", "resizeIframe(this)");
Thanks.

How to view Google drive pdf link in iframe

I need to view pdf file embed with google drive link and view link in iframe.
I have tried following code:
<iframe src="https://drive.google.com/viewerng/viewer?url=https://library.osu.edu/assets/Documents/SEL/QuickConvertWordPDF.pdf" width="400px" height="300px" />
Advance thanks..
Try this..
<iframe src="https://drive.google.com/viewerng/viewer?
url=https://library.osu.edu/assets/Documents/SEL/QuickConvertWordPDF.pdf?
pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="400px" height="300px" />
This works:
<iframe src="https://drive.google.com/file/d/(your file id)/preview?usp=embed_googleplus" style="border: 0; top: 0; left: 0; width: 640; height: 700; position: absolute;" allowfullscreen></iframe>
You can use like this
<iframe src="https://docs.google.com/file/d/(your file id)/preview"></iframe>

Automatic redirect issue in iframe

I have an iframe links within an html page as shown below:
<TABLE border="0" width="900">
<tr valign="top">
<td width="300" ALIGN=center>
<div class="item_list">
link
</div>
</td>
<td width="300" ALIGN=center>
<div class="item_list">
<iframe src = 'http://www.flipkart.com/affiliate/displayWidget?affrid=WRID-137232779171598318' frameborder = 0, height=250, width = 300 > </iframe></a><br>
</div>
</td>
<td width="300" ALIGN=center>
<div class="item_list">
<iframe src = 'http://www.flipkart.com/affiliate/displayWidget?affrid=WRID-137232785207215857' frameborder = 0, height=250, width = 300 > </iframe>
Now when i click within an iframe link , it open the link, but when i click back, it automatically redirect me to that iframe link. Can anyone suggest me what's the problem i'am having?
In your case I would implement my own controls for each iframe. Delegate this work to some buttons on your page instead:
<div id="view_iframe">
<iframe id="viewer" name="viewer" width="100%" height="600" src="some.html">
<p>Your browser does not support iframes.</p>
</iframe>
<input type="button" id="back" class="button" onClick="viewer.history.back();" value="<<" />
<input type="button" id="frwrd" class="button" onClick="viewer.history.forward();" value=">>" />
</div>
note - viewer is iframe id
note that both buttons, are positioned absolutely to align with iframe on page resize.
anyway, here are what the iframe controls for this:
// For an iframe's window
iframe.contentWindow.history.back();
iframe.contentWindow.history.forward();
or
iframe.contentWindow.history.go(-1); // back
iframe.contentWindow.history.go(1); // forward