PDA

View Full Version : Opening a new webpage inside of a page opened


Kidrockz69
10-11-2006, 06:03 PM
How do you or what is it called when you want a webpage opened in your webpage. Example On mainpage.com click link and instead of a pop up window, it opens a smaller page inside your main page.com . I'm trying to get away from the pop-up window being blocked.

davidj
10-12-2006, 08:43 AM
it sounds like your talking about frames or Iframes

you need to do some research on these methods

chriskq
10-12-2006, 09:07 AM
Yes it sounds like you are talking about Frames.

althou with enuf practice you could do what you want with css and javscript (no frames - which is a massivly good thing)

javascript div toggler sounds like what u need.

cant find a good example at the moment... ill try later on

chriskq
10-12-2006, 09:11 AM
im so nice... ill just wrtie u a very short example and see if u get what it does.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<script type="text/javascript">
<!--
function resettoggle() {
var e = document.getElementById('foo');
e.style.display = 'none';
}


function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>

</head>
<body onLoad="resettoggle()">
Click here to toggle visibility of element #foo (#)
<div id="foo">This is foo</div>
</body>
</body>
</html>

davidj
10-12-2006, 09:12 AM
chriskq is this W3C compliant ?

chriskq
10-12-2006, 12:35 PM
err.. i whipped it up in like 2 mins.. botch job. so no dj.
althou since ur offering you can debug and validate it. :lol:

domedia
10-12-2006, 02:37 PM
-Javascript funtions is exactly the same, this is really all we need :)
-HTML validates
-HTML semantically correct (only use <a> for links)
-Added some style to the elemtns

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
<!--
function resettoggle() {
var e = document.getElementById('foo');
e.style.display = 'none';
}
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
<style type="text/css">
<!--
#click {
cursor: pointer;
cursor: hand;
background: #ccc;
border: 2px outset #ccc;
width: 300px;
text-align: center;
}
#foo {
margin: 10px 0 ;
background: #eee;
border: 1px solid #ddd;
width: 300px;
}
-->
</style>
</head>
<body onLoad="resettoggle()">
<div id="click" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</div>
<div id="foo">This is foo</div>
</body>
</html>