Multiple errors using iFrame on IE9 - javascript

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.

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"]');

Force Image Load on Lazy Load XT

Any idea how to Force Image Load of specific div of Lazy Load XT jQuery plugin ?
I mean data-src="" image will load automatically after page load without page scroll or viewport.
This plugin only loads images on the following events load orientationchange resize scroll.
But cannot find any documentation showing how to achieve this.
HTML:
<div class="specific">
<img data-src="/images/post-image.jpg">
</div>
Note: I cannot manually change img attribute data-src="" to src=""
I don't know a way for Layz Load XT. But I think that is a pretty neat functionality, so I updated my own plugin, jQuery Lazy, for this. Maybe this helps you too. It's available since version 1.7.4.
Below I made you an example. Just use the public function force to load specific elements, ignoring the viewport.
// create lazy instance
var instance = $(".lazy").lazy({
chainable: false,
autoDestroy: false,
// below just for demonstration
bind: "event",
appendScroll: null
});
// just for demonstration
$("body")
.append('<img class="lazy test1" src="" data-src="//dummyimage.com/150x100/&text=1">')
.append('<img class="lazy test2" src="" data-src="//dummyimage.com/150x100/&text=2">');
instance.addItems(".lazy");
// load only 'img' with class '.test1'
instance.force(".test1");
img {
width: 150px;
height: 100px;
margin: 5px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.lazy/1.7.4/jquery.lazy.min.js"></script>

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

Categories

Resources