Block loading of an iframe while not visible asp.net - javascript

I have a page in a website that has tabs at the top. Each tab when clicked shows a different section. Each section has multiple iframes.
My problem is that when the page with the tabs on it is loaded, it loads slow because it loads all the iframes in all the tabs at once.
I am looking for a way to only load the visible iframes. Is there a way to block the loading of an iframe, such as settings its source when the tab is clicked or an even simpler way to just have it load when visible = true?
Searching the blogs and websites, all i find is why its bad to use iframes and alternatives to iframes. In my case, using iframes is very practical.
Here is an example of one of the tabs HTML, which is inside a div tag:
<div class="single" id="Company_Options">
<fieldset style="margin-top:-10px; border: 1.5px solid #00659c; height:auto;">
<legend style="color:#00659c;font-weight:bold;font-size:20px;" id="Company_Title" runat="server"></legend>
<table style="width:100%; margin-top:-10px; margin-bottom:-30px;">
<tr>
<td style="width:50%;">
<fieldset>
<legend style="color:#00659c;font-weight:bold;font-size:15px;" id="Company_Country_Title" runat="server"></legend>
<iframe id="iframeCountryList" frameborder="0" scrolling="auto" width="100%" height="100%" src="CountriesList.aspx" style=""></iframe>
</fieldset>
</td>
<td style="width:50%;">
<fieldset>
<legend style="color:#00659c;font-weight:bold;font-size:15px;" id="Company_Currencies_Title" runat="server"></legend>
<iframe id="iframeCurrencyList" frameborder="0" scrolling="auto" width="100%" height="100%" src="CurrenciesList.aspx" style=""></iframe>
</fieldset>
</td>
</tr>
<tr>
<td style="width:50%;">
<fieldset>
<legend style="color:#00659c;font-weight:bold;font-size:15px;" id="Company_Departments_Title" runat="server"></legend>
<iframe id="iframeDepartmentList" frameborder="0" scrolling="auto" width="100%" height="100%" src="DepartmentList.aspx" style=""></iframe>
</fieldset>
</td>
<td style="width:50%;">
<fieldset>
<legend style="color:#00659c;font-weight:bold;font-size:15px;" id="Company_Divisions_Title" runat="server"></legend>
<iframe id="iframeDivisionList" frameborder="0" scrolling="auto" width="100%" height="100%" src="DivisionList.aspx" style=""></iframe>
</fieldset>
</td>
</tr>
</table>
</fieldset>
</div>
When the tab is set like this:
Company_Options.Visible = false;
The content of the iframe still loads.
I need something like this pseudo code:
iframeCountryList.Render = false;
iframeCurrencyList.Render = false;
iframeDivisionList.Render = false;
iframeDepartmentList.Render = false;
Company_Options.Visible = false;
Any ideas on how i can block the rendering of an iframe, whether it be in c# in the code behind or on client side javascript? Thanks!

You can create a control for it. Fill attribute like data-src instead of src on initialization. src can be copied from data-src when you need to load iframe content.

Related

html <object data> using a non link to navigate to a page I click on from a page with multiple pages

Right now I have 4 search pages being pulled into one page using a table and the object tag. If I click on a link anywhere with anyone of the search pages I can go to that link.
How can I go to that systems home page by clicking in an area without a link? For instance I can click on anything at Google.com and even insert my cursor into the search area, but I would like to click it so it is the only page on the screen too.
I don't want to lose the functionality of being able to click on links when multiple webpages are up..
<table style="width:100%">
<tr>
<td style="height:800px">
<object data='http://google.com' width='100%' height='100%'>
</object>
</td>
<td style="height:800px">
<object data='http://bing.com' width=100% height='100%'>
<pr>Browser won't retrieve the forecast</pr>
</object>
</td>
</tr>
<tr>
<td style="height:800px">
<object data='http://lycos.com' width=100% height='100%'>
</object>
</td>
<td style="height:800px">
<object data='http://ask.com' width=100% height='100%'>
</object>
</td>
</tr>
</table>
Why is it needed to use object tag? You can store your url in a data attribute by using simply a div and you can add a simple click eventhandler to it. When you click on it just get the stored url from the data and give it to the window.location.

Dropdown form navigation on the same page as another form

I'm looking to create a dropdown menu on our website that will appear on all pages in our navigation and is used to navigate to a set of particular brand pages. This is what I'm using:
<form>
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value" style="font-weight: normal; width: 170px;">
<option value="">Select a brand...</option>
<option value="brand-a.html">A</option>
<option value="brand-b.html">B</option>
</select>
</form>
It works great, however there is a conflict between it and the other form(s) that may show up on the same page of our site (ie., shopping cart page, billing/shipping info). For example, you fill in your billing info, click submit, and an error comes up from our shopping cart - I'm guessing because the brand form above doesn't have an option selected, and it's trying to submit that first.
Is there any way to have both forms on the page?
Please let me know if I can provide any additional details to help resolve this issue.
Thanks!
Simply remove the form encapsulating the select tag. In HTML5 this is valid.
You can use frame to show more than one form in the same page. In the below code, I have shown 3 forms.
<frameset frameborder="0" border="0" bordercolor="#FBE134" framespacing="0" rows="125,*" frameborder = "0" framespacing = "0" border = "0">
<frame frameborder="0" noresize scrolling="no" name="framTop" src="header.php" frameborder="0" marginwidth="0" marginheight="0">
<frameset frameborder="0" cols="170,*">
<frame frameborder="0" name="framLeft" noresize scrolling="no" src="" frameborder="0" marginwidth="0" marginheight="0">
<frame frameborder="0" marginwidth="1" marginheight="1" noresize name="framRight" src="">

Stop Iframe page from redirecting

http://kenzshop.com/lightbox/
User types url in input field, and clicks "Go To" button. Page should just view in iframe. But when typing in a url like espn.com the clicking button, page will momentarily display, then the whole page (kenzshop.com/lightbox) will redirect to espn.com.
Also, when I try yahoo.com in the iframe, nothing at all happens. Is something mis-coded here? Or just something within those sites not allowing them to be viewed in iframes?
Also, not sure if it is ok to ask this in same thread, but is there a way of the user clicking the Enter Button on the keyboard creating the same effect as having to click the "Go To" button?
<script type="text/javascript">
<!--//
function urlink(iframe,src){
document.getElementById(iframe).src = src;
}
//-->
</script>
< / head>
<div style="background-image: url('https://s3.amazonaws.com/cloud-host.mobi/preview- iphone4g.png'); width: 327px; height: 730px; padding: 135px 28px 0px 33px; background-repeat: no-repeat;">
<form>
<div style="position:relative; top:9px; left:2px;"><input style="float:left;"type="text" size="40" value="http://" name="url">
<input type="button" onclick="urlink('I1',this.form.url.value)" value="Go To"></div>
</form>
<iframe id="I1" src="" style="height: 489px; width: 327px;" frameborder="0" marginwidth="0" scrolling="yes" width="320" height="240"></iframe>
</div>
Thanks!!
Ken
espn.com probably has some JavaScript to break itself out of an iframe. I'm afraid there's not much you can do there. Most sites do not have this, though.
For the enter button, use a <form> tag with the action parameter. Wrap it around your <input> box.
See http://www.w3schools.com/tags/tag_form.asp for examples.

How to capture an all event from a iframe to other iframe

I want to capture all event from an iframe and what ever event happen to an ifram i want to execute the same event to the other iframe how can i achieve this , please show me the way .
Here is my iframes.
<table border="1" width="100%" height="100%">
<tr>
<th><iframe width="100%" height="100%"src="http://google.com"></iframe></th>
<th><iframe width="100%" height="100%"src="http://google.com"></iframe></th>
</tr>
</table>
You can't do this because the Same Origin Policy will deny you all access to external iframes.

How can I absolutely position jQuery draggables and still make them move correctly for droppable to work? (a problem just with IE)

I've read lots of articles and tried everything I can think of, but I can't manage all three: position a draggable object, make it move correctly and get the droppable object to recognize it. When I change the code, I manage every time to do one or two of them, but never all of them together, and I need them all.
Here is some code:
In the .aspx:
<table id="tblAll" border="1" style="margin:0; padding:0;">
<tr dir="ltr" id="trAreas">
<td id="tdAreas" colspan="2"><asp:Xml ID="xmlAreas" runat="server" /></td>
</tr>
<tr id="trMain">
<td id="tdButtons" style="width:75px;">
<div id="droppable">
<asp:Image ID="imgTrash" ImageUrl="~/Images/Trash.png" runat="server" />
</div>
</td>
<td id="tdMain" runat="server">
<asp:Panel ID="divMain" Width="700px" Height="400px" runat="server" CssClass="MainBackground"></asp:Panel>
<asp:Xml ID="xmlAreaTables" runat="server" />
</td>
</tr>
</table>
In the xsl file, where I bring the elementes from the DB and postion them on the page:
<xsl:for-each select="Tables/Table">
<div class="test" id="divTable_{#ObjectID}" style="position: absolute; top:{#RowID}px; right:{#ColID}px;">
<img id="img_{#ObjectID}" src="{#ImageURL}"/>
</div>
<input type="hidden" id="hidTypeID_{#ObjectID}" value="{#ObjectTypeID}" />
</xsl:for-each>
And last the .js file:
$(document).ready(function() {
$(".test").draggable({});
$("#droppable").droppable({
drop: function(event, ui)
{
alert("fgsdfgtd");
}
});
});
I've tried also:
<xsl:for-each select="Tables/Table">
<div class="test" style="position: absolute;">
<div class="test1" id="divTable_{#ObjectID}" style="top:{#RowID}px; right:{#ColID}px;">
<img id="img_{#ObjectID}" src="{#ImageURL}"/>
<input type="hidden" id="hidTypeID_{#ObjectID}" value="{#ObjectTypeID}" />
</div>
</div>
</xsl:for-each>
And that is the closest one yet, but that is putting all the elements in one place in the top right corner of the main div, from there i can do any thing i want, but the problem is that they are not positioned in the original places and that is a huge problem (i did alert on the style for each one and they still getting the right position but not showing in the right place)...
I've tried many versions of div and where to put the style="position: absolute;" and the position of the elements. I need to bring them from the DB and position them dynamically on the page and I need them to drag freely (not just up an down one the same line) and to be recognized when being dropped to the trash. What am i doing wrong?
Solved the problem....
Again, dir="rtl" was the problem....IE8 doesn't like RTL too much i guess, i had (and probably will have) lots of problems with that....:-)

Categories

Resources