PDA

View Full Version : How can I make an internal pop-up window?


laguy03
01-21-2009, 05:28 PM
I'm not even sure if it is considered a pop-up window, but I'm not sure what the proper term is. What I want is for someone to be able to click on a news headline and have the story pop up within the window of the original page and not open up a brand new window (as when you use the _blank code in the a link). Does anyone know what I'm talking about?

Corrosive
01-21-2009, 05:44 PM
I'm not even sure if it is considered a pop-up window, but I'm not sure what the proper term is. What I want is for someone to be able to click on a news headline and have the story pop up within the window of the original page and not open up a brand new window (as when you use the _blank code in the a link). Does anyone know what I'm talking about?

How about thickbox used to display an iframe? Would that do? Example here if you click on customer reviews...

http://www.yotocreative.co.uk/contact.htm

urbanrays
01-21-2009, 05:46 PM
is this what you mean
http://www.pat-burt.com/csspopup.html#

laguy03
01-21-2009, 06:30 PM
Yeah, that's exactly what I wanted. Thank you!

I have another question. I want to be able to have a partial list and then for someone to click a link to reveal the rest of the list. For example, the page would show

1. XXXXX
2. XXXXX
3. XXXXX

Click here for the rest of the list

And then when they click on the 'Click here' link, it will simply reveal the entire list in the same page (no pop-up). How can I go about doing this?

Corrosive
01-21-2009, 06:41 PM
Yeah, that's exactly what I wanted. Thank you!

I have another question. I want to be able to have a partial list and then for someone to click a link to reveal the rest of the list. For example, the page would show

1. XXXXX
2. XXXXX
3. XXXXX

Click here for the rest of the list

And then when they click on the 'Click here' link, it will simply reveal the entire list in the same page (no pop-up). How can I go about doing this?

You could hack this about...

http://plugins.jquery.com/project/accordion

Might work.

laguy03
01-21-2009, 09:19 PM
That's good, but do you know if there is something simpler? I guess what I want is to make the list collapsible. I think that is a little different than that accordian effect.

urbanrays
01-21-2009, 11:33 PM
Coloeagle put something up in another post that might help
Try this link
http://validwebdesigns.com/construction/johnj/

see if that helps

laguy03
01-22-2009, 12:11 AM
Coloeagle put something up in another post that might help
Try this link
http://validwebdesigns.com/construction/johnj/

see if that helps

That is exactly what I wanted. How do I go about doing that on my site?

urbanrays
01-22-2009, 03:16 PM
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function expand (thistag, tag) {
styleObj=document.getElementById(thistag).style;
if (styleObj.display=='none'){
styleObj.display='';
tag.innerHTML = "Click here to remove text";
}
else {
styleObj.display='none';
tag.innerHTML = "Click here to add text";
}
}
</script>
</head>
<body><div id="div1" style="text-decoration:none; cursor:pointer; font-weight:bold" onclick="expand('text1', this);">Click here to remove text</div>
<p id="text1">Well I got it to work with this code here mate.</p>
<p>BLa de bla bla bla</p>
</body>
</html>


Here you go I got it to work just using this off Coloeagles source page

Coloeagle did mention something about wanting $3000 for copyright.:grin:

urbanrays
01-22-2009, 03:19 PM
Oooops suggest you take the smiley out else you may have cross browser issues.
Change it to this
cursor: pointer;
without the space

laguy03
01-22-2009, 06:00 PM
Oooops suggest you take the smiley out else you may have cross browser issues.
Change it to this
cursor: pointer;
without the space

Thanks! That worked perfectly! I appreciate your help!

laguy03
01-22-2009, 06:18 PM
Oooops suggest you take the smiley out else you may have cross browser issues.
Change it to this
cursor: pointer;
without the space

I need to make one slight change. How do I change the go so that I get the opposite effect? The way you wrote the code, you get the expanded list when the page loads and when you click on the 'Click here to remove text' it takes away the list. But what I want is for the 'Click here to add text' to appear when the page loads so that the person looking at the page would need to click on it to see the expanded list.

coloeagle
01-23-2009, 02:57 PM
Place the followin g in the head section of the page.
<script type="text/javascript">
function toggle(element) {
if (document.getElementById(element).style.display == "none") {
document.getElementById(element).style.display = "";
} else {
document.getElementById(element).style.display = "none";
}
}
</script>

Then this where you want the hidden text to appear

<a href="javascript:toggle('hidden')">Show Hidden</a>
<div id="hidden" style="display:none;">
<p>Anything inside this div will be hidden until called to show by clicking &quot;Show Hidden&quot; is clicked.</p>
<p>You can have anything you want hidden even images</p>
</div>

coloeagle
01-23-2009, 03:03 PM
Oooops suggest you take the smiley out else you may have cross browser issues.


Yup, smilies, cute as they are can definitely mess up the browser display if you try putting them where they don't like to go. :mrgreen:


Coloeagle did mention something about wanting $3000 for copyright. :grin: I like your way of thinking :-D Now all I need to do is prove I came up with it first. :confused: