Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    linking a list to URLs and openning it to a different frame

    Hi there,

    I am very new at creating webpages but trying to learn it. I am trying to create a webpage in which there is a menu bar at the top. I divided the page into 2 frames, one is the menu and the other frame for the main view of the page. The idea is when you hover at the menu, it will show a list coming down the menu bar, I want the the list to be clickable. Each entry in the list will have a linked URL and when clicked, the webpage of the URL will show up in the frame below it. I have been toying around different ways to make the URL show up, item 1, item 2, item 3 all differently. Item 1 is a test, and it works, when licked, a new window will show up withe the words "Item 1!". Item 2, I am trying to directly open the webpage to the targeted frame. Item 3, I tried indirectly using a function.

    Below is part of the code that shows the list:

    <div id="content header" style="background-color:#F8F8FF;height:40px;width:876px;float:left;">

    <!--first button -->
    <a href="." class="rightmenu" id="FirstButton"><img border="0" src="GeoViews.png" width="150" height="30" longdesc="GeoViews.png" float:left>
    <span>
    <b onClick="alert('Item 1!');">Item 1</b>
    <b onClick="a href="http://www.cnn.com" target="report frame"">Item 2</b>
    <b onClick="functiondisplay();"> Item 3</b>

    </span>
    </a>


    Below is the code of my function:

    <script language="javascript">
    function functiondisplay()
    {
    <a href="http://www.cnn.com" target="report frame">
    </a>
    }
    </script>

    Any help to make the items in the lists linked to URLs and when clicked the webpage will open up at the frame (in this case the frame is called "report frame".

    Thanks,
    Jigzy

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    You don't need JS to do this. And a good thing because what you have is totally wrong. Take some time and go back and study HTML & CSS.
    Item two works. Item one is so you can see the difference in the pointer. Three is dead.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <style type="text/css">
    a{
    	margin-right: 5px;
    	text-decoration:none;
    }
    </style>
    </head>
    <body>
    <div id="content header" style="background-color:#F8F8FF;height:40px;width:876px;float:left;">
    <b onclick="alert('Item 1!');">Item 1</b>
    <b> <a href="http://www.cnn.com" target="here">Item 2</a></b>
    <b> Item 3</b>
    </div>
    <br /><br /><br />
    <iframe name="here" height="900px" width="100%"></iframe>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by jigzy View Post
    Any help to make the items in the lists linked to URLs and when clicked the webpage will open up at the frame (in this case the frame is called "report frame".
    I wasn't aware that iframe names can contain spaces, but, after checking the HTML spec, I found that they can.

    Anyway, here's some code I wrote earlier today and never got around to posting. CNN's website somehow escapes manages to escape the iframe and open a new browser tab after the first time it's opened, so I used a different website instead:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Demo</title>
    		<style>
    			#report_frame { position: absolute; top: 0; left: 50%; right: 0; bottom: 0; -moz-box-sizing: border-box; box-sizing: border-box; width: 50%; height: 100%; border: 0 none currentcolor; border-left: 0.5em solid black; }
    			#alert { position: absolute; top: 0; left: 0; right: 50%; bottom: 0; z-index: 1; margin: auto; width: 8rem; height: 3rem; border: 0.25rem solid black; background-color: yellow; color: black; line-height: 3; text-align: center; cursor: pointer; }
    		</style>
    	</head>
    	<body>
    		<iframe id="report_frame" name="report frame" src="http://example.org/"></iframe>
    		<ul>
    			<li id="item1">Item 1</li>
    			<li id="item2"><a href="http://slashdot.org/" target="report frame">Item 2</a></li>
    			<li id="item3">Item 3</li>
    		</ul>
    		<script>
    			(function () {
    				"use strict";
    				var item1 = document.getElementById("item1");
    				var item3 = document.getElementById("item3");
    				item1.addEventListener("click", function () {
    					var customAlert = document.createElement("p");
    					customAlert.setAttribute("id", "alert");
    					customAlert.textContent = "Item 1!";
    					customAlert.addEventListener("click", function () {
    						this.parentNode.removeChild(this);
    					});
    					document.body.appendChild(customAlert);
    				});
    				item1.style.setProperty("cursor", "pointer");
    				item3.addEventListener("click", function () {
    					document.getElementById("report_frame").setAttribute("src", "http://slashdot.org/");
    				});
    				item3.style.setProperty("cursor", "pointer");
    			})();
    		</script>
    	</body>
    </html>
    Quote Originally Posted by sunfighter View Post
    Code:
    <div id="content header" style="background-color:#F8F8FF;height:40px;width:876px;float:left;">
    <b onclick="alert('Item 1!');">Item 1</b>
    <b> <a href="http://www.cnn.com" target="here">Item 2</a></b>
    <b> Item 3</b>
    </div>
    <br /><br /><br />
    <iframe name="here" height="900px" width="100%"></iframe>
    Semantic issues aside, id attributes can't contain spaces and width and height attributes can only contain (unitless) integers. It looks like the percentage values allowed in HTML4 are now disallowed in HTML5.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    Quote Originally Posted by Arbitrator View Post
    Semantic issues aside, id attributes can't contain spaces and width and height attributes can only contain (unitless) integers. It looks like the percentage values allowed in HTML4 are now disallowed in HTML5.
    Yes, attributes consists of letters, numbers, underscores, hyphens, periods and colons only. Again copy/paste gets one in trouble.

    The px used because I wanted the 100%. I wanted that so I didn't have to figure things out on such an easy problem. Yeah(wish there was an exclamation point with bent over shoulders, I'd use it here).
    Evolution - The non-random survival of random variants.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by sunfighter View Post
    The px used because I wanted the 100%.
    I'd think that'd be unnecessary since the (integer) values are defined to be pixels.

    Quote Originally Posted by sunfighter View Post
    I wanted that so I didn't have to figure things out on such an easy problem. Yeah(wish there was an exclamation point with bent over shoulders, I'd use it here).
    /!!(-_-)!!\
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi there,

    Thanks, for helping me out. To clarify here is what my page look like. The frame is actually defaulted to www.google.com. there is a menu bar on top of the frame with several "buttons". Below are the images. The first image shows when I open the page. There is a menu bar on top - Geographic Views, Demographic Views..etc. The second image shows that when I put my cursor by Geographic Views, a lists will show up - Item 1, Item 2, Item 3. What I want to do is when I click any of the Item, a new page will replace google. In the example code that I had, it will be www.cnn.com.

    Thanks and hope you guys continue to help me.

  • #7
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    opps...I forgot to include the URL for the pics


  • #8
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by jigzy View Post
    What I want to do is when I click any of the Item, a new page will replace google.
    Use <a href="http://example.com/" target="iframe name">Link</a>. As sunfighter said, no JavaScript is required.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #9
    New to the CF scene
    Join Date
    Nov 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi there,

    Thanks, for helping me out. To clarify here is what my page look like. The frame is actually defaulted to www.google.com. there is a menu bar on top of the frame with several "buttons". Below are the images. The first image shows when I open the page. There is a menu bar on top - Geographic Views, Demographic Views..etc. The second image shows that when I put my cursor by Geographic Views, a lists will show up - Item 1, Item 2, Item 3. What I want to do is when I click any of the Item, a new page will replace google. In the example code that I had, it will be www.cnn.com.

    http://www.flickr.com/photos/65438897@N05/
    (the pics shows more what I meant)


    Thanks and hope you guys continue to help me.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •