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="">
Related
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.
I learnt from this post (Making an iframe responsive) that make an iframe responsive by adding a container with a class around the iframe, for instance,
<div class="intrinsic-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
</div>
Is there possible to embed <iframe>...</iframe> directly in my posts (without using <div>...</div>)? And I tried these solutions, but all of them don't work.
PS: I use two columns layout in WordPress. The ratio of video can be 16:9 (from YouTube), 4:3 (from Tencent), etc. Here is a temporary demo.
If you can use viewport units that is doable without an extra wrapper element.
Full page width:
iframe {
width: 100vw;
height: 56.25vw; /*16:9*/
}
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
Half page width:
iframe {
width: 50vw;
height: 28.125vw; /*16:9*/
}
<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>
The key here is the height and width ratio you want to keep. I took the liberty of using jQuery instead of javascript to do this. The code triggers upon clicking the button. It calculates the width and height ratio of the iframe and adapts both to your needs (in this case I assumed you wanted it to fill the containers width).
You'll probably want to loop through all videos if you have multiple on one page and run the code on window resizing and page-loading.
Here is the JSFiddle
Hope it helps :)
html
<iframe id="iframe" width="640" height="360" src="https://www.youtube.com/embed/4SDVkdcO8ts" frameborder="0" allowfullscreen></iframe>
<button id="button" style="float: left">Click me!</button>
jQuery
$(document).ready(function(){
$("button").click(function(){
var ratio = $("#iframe").height() / $("#iframe").width();
$("#iframe").width("100%");
var newWidth = $("#iframe").width();
$("#iframe").width(newWidth);
$("#iframe").height(newWidth*ratio);
$("button").text("resize the window and click me again!");
});
});
Use bootstrap class to make iframe responsive.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" allowfullscreen
src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" >
</iframe>
</div>
This is my ad code:
<iframe style="display:block !important" frameborder=0 marginwidth=0 marginheight=0 scrolling=no width=120 height=600 allowtransparency=true src="//s.ato.mx/p.html#id=2225&size=120x600"></iframe>
My website is in WordPress.
I would like to add this code as floating on left-side and right-side of my website with close button.
I want to wrap an href around a vimeo or youtube video and prevent the default playback click events of the embed and just go to the href. Does anyone know how to do this?
<a href="http://tumblr.com" target="_blank" class="linkwrap">
<iframe width="420" height="315" src="https://www.youtube.com/embed/5Xbs60BMeRU" frameborder="0" allowfullscreen></iframe>
</a>
html
<a href="http://tumblr.com" target="_blank" class="linkwrap">
<div class="blocker"></div>
<iframe width="420" height="315" src="https://www.youtube.com/embed/5Xbs60BMeRU" frameborder="0" allowfullscreen></iframe>
</a>
css
.linkwrap { position:relative; display:inline-block; }
.blocker { position:absolute; height:100%; width:100%; z-index:1; background:rgba(255,0,0,0.5); }
.linkwrap iframe { z-index: 2; }
jsfiddle - here
Use a div as overlay and surround it with your a tag. Read this article to see how to implement the div and using opaque for youtube: https://stackoverflow.com/a/4788044/4375900
I think with this info you should be possible to do what you want to do.
For cross browser support use this:
<div style="position:relative;">
<iframe width="420" height="315" src="https://www.youtube.com/embed/5Xbs60BMeRU" frameborder="0"></iframe>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png" width="420px" height="315px">
</div>
I feel like it's worth mentionning that in my case, adding pointer-events: none on the iFrame allowed the link to work with a structure looking like this
<div>
<a href="#test">
<iframe [ATTRIBUTES]></iframe>
</a>
</div>
How is it possible to fix the height issue of Google Trend charts dynamically.
For an example take a look on the output of following code.
<iframe width="600" height="320" src="http://www.google.com/trends/fetchComponent?hl=en-US&q=css-showcase&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=600&h=320" style="border: none;"></iframe>
<hr>
first contents
<hr>
<iframe width="600" height="320" src="http://www.google.com/trends/fetchComponent?hl=en-US&q=html5&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=600&h=320" style="border: none;"></iframe>
<hr>
second contents
on jsFiddle: http://jsfiddle.net/yzw8Y/
i didn't test it, but this could work.
function autoResize(id)
{
var newheight;
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
document.getElementById(id).height=newheight + "px";
}
<iframe id="frame1" onload="autoResize('frame1')" ... >
set id for iframe
and in jquery set height
$('#idval').css('height','800px');