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.

joram · Accepted Answer · 2014-09-29 14:44:06Z

3

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?

edited Sep 29, 2014 at 14:44

answered Sep 29, 2014 at 14:36

joram

1537 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:57:41Z

1

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

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Sep 29, 2014 at 14:31

starvator

1,0172 gold badges12 silver badges27 bronze badges

Comments

frenchie · Accepted Answer · 2014-09-29 14:29:08Z

0

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?

answered Sep 29, 2014 at 14:29

frenchie

52.3k117 gold badges321 silver badges532 bronze badges

3 Comments

collab-with-tushar-raj Over a year ago

Firstly , this question is not marked under jQuery and title itself says that this question needs 'CSS' efforts .

frenchie Over a year ago

@TusharRaj: well then show us how to do it in CSS:)

collab-with-tushar-raj Over a year ago

well might be it is not . But you must mention there so that the questioner knows that it can't be done in the way he is asking . You were not clear , sorry to say :)

Justinas · Accepted Answer · 2014-09-29 14:31:27Z

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>

Idan Magled · Accepted Answer · 2014-09-29 14:32:31Z

0

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'));
         });
    });

edited Sep 29, 2014 at 14:32

answered Sep 29, 2014 at 14:31

Idan Magled

2,2161 gold badge24 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to change the src of an iframe with css

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related