iframes and javascript - javascript

I have a simple webpage that used a include html file as the left navigation. Here is the code for each button:
<tr><td id="tdIndex" onmouseout="javascript:DoMouseOut(this)" onmouseover="javascript:DoMouseOver(this)"
class="menuDefault" onclick="javascript:NavPage('All_Rooms_Today.html');">All Rooms Overview</td></tr>
Here is the iFrame code on the parent page:
<iframe src="All_Rooms_Today.html" style="width: 100%; height: 500px" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0">
</iframe>
I need to write the javascript function navpage to populate the iframe.
Any help will be appreciated.

No need for JavaScript.
All Rooms Overview
<iframe name="name_of_frame" …>
You can almost certainly replace all the mouseover/out stuff with:
#some_container a {
display: block;
}
#some_container a:hover {
background: foo;
color: bar;
}
If you can't, then you should certainly remove the string javascript: as there is no use in having a label at that point (if you think it means "This is JavaScript", then you're wrong, for intrinsic event attributes you do that with a meta element).
For that matter, frames are a pain for bookmarking and for search engines (among other things). You're already using includes, you should probably keep using them and have proper pages including the navigation instead of framed pages.

Related

iframe and JS function combination

I am currently trying to make a full iframe web-based game to avoid page refresh.
I have this function in JS that works perfect:
function changeUrl(){
var site = "modules/news/news.php";
document.getElementsByName('game_frame')[0].src = site;
}
This is my HTML:
News
<iframe frameBorder="0" style="height: width: 100%; height: 650px; visibility: visible; color: white;" allowtransparency="true" class="content" name="game_frame">
</iframe
But I would like to fetch a value through the function so that I don't have to repeat the code for every page.
I was trying this but I can't get it to work:
function changeUrl(siteName){
var site = "modules/".siteName."/".siteName.".php";
document.getElementsByName('game_frame')[0].src = site;
}
I have tried for about 2 days to fix this but can't seem to find the solution. I might be googling wrong ofc. Thanks in advance for answers :)

How do I embed a part of a webpage with a certain name attribute within my webpage?

There's a webpage. Let's call it Example.html. I can not control/change this webpage but I want to embed a particular portion of it in my webpage.
The Example.html webpage has an HTML code that looks something like this:
<!--[stuff I don't want]-->
<form action="/example/index.pl" method="post" enctype="multipart/form-data" name="windyNights">
<!--[stuff I want!]-->
<\form>
<!--[stuff I don't want]-->
So how do I include the stuff I want in my webpage without including that stuff I don't need? is there a way to use the name attribute to isolate it somehow?
You can use iframe and a specific id of that particular div that you want to show and set the height and width of the iframe according to your target div.
see the example:
#project_summary {
width: 600px;
height: 220px;
padding: 15px 10px;
background:black;
}
<iframe id="project_summary" src="https://towkir.github.io/projectindex/projects.html#rsp" scrolling="no" frameborder="0"></iframe>
visit the link in the iframe separately to understand what is going on.
You can try
$('#target-div').load('http://www.example.com/Example.html form[name="windyNights"]');

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.

fb-like plugin - Execute code after facebook plugins are loaded

I have included the fb-like plugin in a website that shows tooltips when the mouse is over any elements that have a title property.
The issue is that the facebook plugin adds a title attribute to the iframe, which is loaded after, and I can't seem to find a way to remove it.
The facebook plugin code:
<div class="fb-like" data-href="facebook.com/saekthmey"; data-layout="standard" data-action="recommend" data-show-faces="true" data-share="true"></div>
It generates:
<iframe class="" src="http://www.facebook.com/v2.3/plugins/like.php?action=recommend&app_id=1098294926865015&channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F1ldYU13brY_.js%3Fversion%3D41%23cb%3Df1931e415abd1ea%26domain%3Dlocalhost%26origin%3Dhttp%253A%252F%252Flocalhost%253A3000%252Ff37c5673a2d1dae%26relation%3Dparent.parent&container_width=294&href=https%3A%2F%2Fwww.facebook.com%2Fsaekthmey&layout=standard&locale=fr_FR&sdk=joey&share=true&show_faces=true" style="border: medium none; visibility: visible; width: 450px; height: 57px;" title="fb:like Facebook Social Plugin" scrolling="no" allowfullscreen="true" allowtransparency="true" name="f305ebf93e709ca" frameborder="0" height="1000px" width="1000px"></iframe>
I assume there is something like this somewhere in the website $('*[title]).tooltip() but I am not going to remove it anyway.
In other words, I need to execute code after the plugin is loaded.
I found this: Facebook like box load event jquery but it did not work.

iframe.scrollTo() doesn't work for Excel/PowerPoint documents on iPad

I want to implement custom scrolling of iframe content for iPad. My solution is the following. I have iframe:
<div id="scroller" style="height: 300px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" width="100%" name="iframe" src="1.pdf" />
</div>
And in javascript code I use:
top.frames['iframe'].scrollTo(x,y);
It works perfectly for pdf documents, but not for Excel and Power Point documents.
Does anyone have any suggestions?
It's not possible to show a worddocument or excel directly/correctly inside an Iframe.
You could use Google documents viewer/drive to present the documents with.
Check http://docs.google.com/viewer and https://drive.google.com/
But if it's possible, I would stick with PDF's

Categories

Resources