iframe and JS function combination - javascript

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 :)

Related

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.

Making this contact form responsive with Javascript

I'm very new to javascript but in mid-level with HTML and CSS.
So here is the issue. I just registered a third party contact form service with Foxyform. They provided a code to paste in the page and upload it. It works fine in desktop views, however when one visits the contact page on different mobile or smaller devices it looks out of space and non-responsive. There is no option to edit it in #media screen within the theme.
Is it possible to make this contact form responsive?
Here are the codes:
HTML:
<a id="foxyform_embed_link_602624" href="http://www.foxyform.com/"></a>
Javascript:
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = "http://www.foxyform.com/js.php?id=602624&sec_hash=54f3ab77bfb&width=350px";
s.parentNode.insertBefore(g, s);
}(document, "script"));
Your contactform provider includes an iframe in your page.
An iframe can not be styled by the website on which is it included as most browser handle it as an own webpage which is embedded in another webpage.
Found a fix with CSS (not jquery/javascript sorry) ( for googleCalendar iframe ) but I used the same concept for foxyForms iframe.
via https://thomas.vanhoutte.be/miniblog/make-google-calendar-iframe-responsive/
html
<div class="responsiveCal">
<iframe src="https://calendar.google.com/calendar/embed? showTitle=0&showDate=0&showPrint=0&showCalendars=0&showTz=0&height=600&wkst=2&hl=nl&bgcolor=%23FFFFFF&src=example.be_cpkbjcpttgb5q0%40group.calendar.google.com&color=%23ffcf03&ctz=Europe%2FBrussels" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>
css
.responsiveCal {
position: relative; padding-bottom: 75%; height: 0; overflow: hidden;
}
.responsiveCal iframe {
position: absolute; top:0; left: 0; width: 100%; height: 100%;
}
It allowed me to place a row within the container as well to use bootstraps responsive classes. Hope this is right, I'm still a beginner please feel free to correct any mistakes I made..

Multiple errors using iFrame on IE9

I have an iframe inside a div in my page like this:
<div id="ModalContato" style="display: none; text-align: center;">
<iframe id="IfrModalContato" frameborder="0" scrolling="yes" src="" style="width: 100%;
height: 100%;"></iframe>
</div>
And in my page there is a button inside a grid that calls this function:
function AbreModalContato() {
$("#IfrModalContato")[0].src = "ContatoModal.aspx?Modal=1&IdContatoPai=" + $("#ctl00_Corpo_HidIdContato").val();
$("#ModalContato").dialog({ modal: true, title: 'Cadastro de contatos', width: 970, height: 570 });
$("#ModalContato").dialog('open');
}
When I click on the button that opens the modal, I get a lot of JS errors like:
'Array' is not defined
'Object' is not defined
'Function' is not defined
On this question there's a guy that seems to have a problem just like mine(mine also happens only with IE9), but as a noob on JS and jQuery I don't know how to adapt my code to what he says.
I tried something like this:
function onShow() {
$("#IfrModalContato").attr("src", "ContatoModal.aspx?Modal=1&IdContatoPai=" + $("#ctl00_Corpo_HidIdContato").val());
$("#ModalContato").dialog({ modal: true, title: 'Cadastro de contatos', width: 970, height: 570 });
$("#ModalContato").dialog('open');
}
But that just won't work for me.
Anyone?
Thank you.
This is only a guess but make sure your not including the same jquery script file in the frame and on the page. IE doesn't like this, which is why I stay clear of iFrames or just use one set of scripts in the parent page which you can use on the iFrame window.

iframes and 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.

Categories

Resources