How to change the src of an iframe with css
Question
I have this code and idk how to make it so when I click on the items in the "menu" to not redirect to other pages but to change the src of the iframe.. should I change the
Code:
<html>
<head>
<title> First attempt at html/css </title>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#menu {
background-color:#eeeeee;
height:470px;
width:200px;
float:left;
text-align:center;
padding:5px;
}
#content {
float:left;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1> Movies Gallery</h1>
</div>
<div id="menu">
<a href="the_maze_runner.html" style="text-decoration:none"> The Maze Runner </a> <br>
<a href="guardians_of_the_galaxy.html" style="text-decoration:none"> Guardians of The Galaxy </a> <br>
<a href="the_guest.html" style="text-decoration:none"> The Guest </a> <br>
<a href="edge_of_tomorrow.html" style="text-decoration:none"> Edge of Tomorrow </a>
</div>
<div id="content">
<iframe src="the_maze_runner.html" width=1110px height=475px frameborder=0></iframe>
</div>
<div id="footer">
Copyright Andrew.Xd 2014
</div>
</body>
</html>
I'm still a starter in this domain so I really have no idea how should I modify the code to obtain what I intend to.
5 answers
solution1
2 ACCPTED 2014-09-29 14:36:13
You can simply add a target to your menu-items and a name to your iframe, like so:
<a target="frameName" href="the_maze_runner.html" style="text-decoration:none">The Maze Runner</a>
<iframe name="frameName" src="the_maze_runner.html" width=1110px height=475px frameborder=0></iframe>
Or did I missunderstand the question?
solution2
1 2014-09-29 14:31:46
css is a markup language, so you will not be able to do what you want with css.
However, you can give your iframe an id and change the source using javascript. This SO post explains it perfectly, I could not do a better job :p
solution3
0 2014-09-29 14:29:08
If you have jQuery (you should!) then you can do something like this:
function Start() {
$('#menu').click(function (e) {
e.preventDefault();
$('#content').find('iframe').prop('src', "whateverURL");
});
}
$(Start);
Since you want to cancel the href in the <a> tags, why not remove them completely and replace them with <div> tags?
solution4
0 2014-09-29 14:31:17
Its not Css code, its a JS code.
you need to to connect you items to an event listner take the href value on put it on the iframe //jquery on load mathod//
$(function(){
$('#menu a').click(function(e){
e.preventDefault();
$('iframe ').attr('src',$(this).attr('href'));
});
});
solution5
0 2014-09-29 14:31:27
You can't modify properties of DOM elements using css. Use js/jQuery:
$(document).ready(function() { $("#menu a").click(function(e) { e.preventDefault(); //so browser will not follow link. $("#content iframe").attr("src", $(this).attr("href")); }); });
#header { background-color: black; color: white; text-align: center; padding: 5px; } #menu { background-color: #eeeeee; height: 470px; width: 200px; float: left; text-align: center; padding: 5px; } #content { float: left; } #footer { background-color: black; color: white; clear: both; text-align: center; padding: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="header"> <h1> Movies Gallery</h1> </div> <div id="menu"> <a href="the_maze_runner.html" style="text-decoration:none"> The Maze Runner </a> <br> <a href="guardians_of_the_galaxy.html" style="text-decoration:none"> Guardians of The Galaxy </a> <br> <a href="the_guest.html" style="text-decoration:none"> The Guest </a> <br> <a href="edge_of_tomorrow.html" style="text-decoration:none"> Edge of Tomorrow </a> </div> <div id="content"> <iframe src="the_maze_runner.html" style="width:1110px; height:475px" frameborder=0></iframe> </div> <div id="footer"> Copyright Andrew.Xd 2014 </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.