How to change iframe pages without the parent page changing with external links using CSS
Tags: html,css,iframe
Problem :
I'm working on a webpage where I need to be able to click on buttons that change iframes with in a parent page. I thought this would be a simple task but no matter what I do, the button keeps opening a new window rather than opening the page inside the iframe. The page looks perfect and the iframe loads up but when I click the button in the parent window to change the page it opens in a new tab. Here is the complete code I'm using (minus the changed webpage names) if someone could point out what I'm doing wrong please.
<head>
<style>
body
{
background-image:url(bg4.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:top;
background-size:100%;
}
p.pos_fixed
{
position:fixed;
top:98px;
right:298px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stupid webpage that dont work</title>
</head>
<body>
<p class="pos_fixed">
<iframe id="MSL" src="http://www.yahoo.com" width="975" height="800">
</iframe>
<center>
<a href="http://www.google.com" target="MSL">
<img src="MSL.jpg" alt="MSL" width="42" height="42"></a>
</center>
</p>
</body>
</html>
Solution :
In order for your link to target the iframe, you must add the "name" attribute to such frame, nothing to do with "id"
<iframe id="MSL" name="MSL" src="http://www.yahoo.com" width="975" height="800">
</iframe>
Also, your DOM structure is very bad, you should not nest iFrames inside paragraphs. In short, the target attribute in anchor elements need to match the name attribute in the iFrame unless it is a reserved one such as "_blank", "_self", "_parent", or "_top".
CSS Howto..
Floating and clearing .ItemNumberResult should move it below the image and let the other content stay up on the right. .ItemNumberResult{ background-color: #2D2D29; color: #DFECE6; margin-bottom: 50px; margin-top: 10px; width:...
If //td/div[../a[@name]] works for you, then the following should also work : //td[a/@name]/div This way you don't need to go back and forth -or rather down and up-. For a...
You can set background-image with JQuery and use background-size: cover; on property div $('.property').each(function() { var background = $(this).data('background'); $(this).css('background-image', 'url('+background+')'); }); .property { border: 3px solid white; box-shadow: 0px...
If I read your post correctly, I think you're trying to make the content narrower keeping the nav bar to the full width.... then I suggest changing the following <div...
There are a few problems here. First, you have #toTop set to display: none, so it will never be shown, with any background. Second, you seem to be trying to...
Applying a class like .resize below to your images should do what you want... .resize { max-width: 100px; max-height: 100px; } Example: http://jsfiddle.net/rU5qK/...
Put the grid-view and update progress html within a wrapper div. Position div relatively and position the update progress absolutely at center. See this jsfiddle that I have set up:...
You can try something like this: /* HTML sample */ <div class="Screenshot" style="background-image: url(http://lorempixel.com/1200/1200/sports/)"></div> <div class="Screenshot" style="background-image: url(http://lorempixel.com/1200/1200/sports/)"></div> /* CSS */ .Screenshot { overflow: hidden;...
have you tried adding "a" to the CSS #imagetrans img, #container > div img a { position:absolute; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition:...
try this .ui-icon-calendar { background-image: <your URL> !important; background-position: center center !important; width: 16px; height: 16px; } ...
Instead of $('#cssmenu li').removeClass('active');, use $(this).closest('#cssmenu').find('li').removeClass('active'); Similarly instead of $('#cssmenu ul ul:visible').slideUp('normal');, use $(this).closest('#cssmenu').find('ul ul:visible').slideUp('normal'); By using it like this one accordion menu will not interfere with...
In Emmet.sublime-settings you have to update disable_tab_abbreviations_for_scopes property: add source.css to disable Tab trigger completely in CSS. Also, if you’re on ST2, you may want to take a look at...
The idea is to use css transitions, I've created a fiddle with your code, tweaked a little bit and added the transitions that the example you've provided uses, you should...
@Bmaster Hey man, I fiddled around and finally found what I think is what you're asking for... take a look: http://jsfiddle.net/2pXpN/ The hardest part for me was getting the text...
Fully customizable: http://jsfiddle.net/5MMc9/8/ html: <div class="entry-meta"> <time class="entry-date" datetime="2011-09-16T09:59:48+00:00" pubdate=""> <div class="date-day">16</div> <div class="container"> <div class="date-month">Sep</div> <div...
Do you mean show the circumference like this? ul { list-style: none; margin: 0; padding: 0; } li { width: 100px; height: 100px; border-radius: 100px; border: 5px solid #c00; }...
Use this CSS instead: .body-menu ul ul.second-level { position:absolute; left:10px; top:30px; } And add a second-level class to all the uls that are immediately nested after the first level items...
You must create link on MyFontBold.otf . Italic, bold, medium, semibold, thin it's different files of font. Example @font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; src: local('PT Sans'),...
You can try to use the following // place hidden test div var $testDiv = $("<div style='display:none'></div>"); $testDiv.addClass("grid_height").appendTo("body"); // I hope you will grid_height from correct media // alternatively you...
The main.css is placed under assets folder. Just remove the main.css and use yours instead. Or you can use custom.css to override the main.css. Just include the custom.css in your...
If you change the display: inline; to float: left; then you will achieve your desired effect. You will need to add the image height to your header div to allow...
Remove the table and replace with <div style='width:45%'> <?php do{ ?> <img style='float:left;class='example' src="images/<?php echo $row_getresult['image_name']; ?>.png"/> <?php } while ($row_getamenityaccommodation = mysql_fetch_assoc($getamenityaccommodation)); ?> </div> or for a more...
Working jsFiddle Demo You must change a little your markup: <div class="box"> <div class="image"><img src="http://placekitten.com/250/250" /></div> <div class="text"> Hello World </div> <a href="#"></a> </div> And in CSS: .box { position:...
The clip-path is relative new and could be prone to errors (didn't work for me in Aurora). For a stable result I would suggest just using canvas' clip() method (you...
Bare minimum code (not optimized, polished, loved, given an education, or otherwise treated kindly): $('a.boldhim').click(function () { $('a.boldthislink').addClass('current'); }); $('a.unboldhim').click(function () { $('a.boldthislink').removeClass('current'); }); Make sure you're calling it inside...
var $j = jQuery.noConflict(); $j(document).ready(function () { $j("#Button1").click(function () { var textbox = document.getElementById("TextBox1").value; if (textbox.trim().length == 0) $j("#TextBox1").addClass('TextBox1Error'); }); }); Example: http://jsfiddle.net/trevordowdle/fv8d5/ As for hitting enter in the search...
Updated: This JS Fiddle-Updated simulates that comic page in the example but in simpler way. The javascript code contains comments lines to explain how it works, for the CSS most...
Is not very clear what you are trying to do, but i understand that is something like transition: left 1s; or transition: transform 1s; and when you press your button...
Use this in your css: #srch-term { width: 800px; } You can change the width to whatever you'd like....
Please try this: Remove all you css and add only .pic{ width:100%; } .pic img{ width:100%; } .text{ margin-top:10px; } DEMO The way you are positioning your HTML element is...