Jump to content

Multiple Uses On Same Page

lastlifelost

By lastlifelost
in JavaScript

Recommended Posts

lastlifelost Member

lastlifelost

Posted
Posted

Hello - I'm trying to create a page that will pop up a gallery page. I've made it this far, but my script only works for a single entry on the page. I would like it to work for multiple entries on the same page. Is there an easy way that I could do this? I'm not really much for scripting yet, so step by steps are great...

<script> function CloseWindow() { var popup = document.getElementById("popupdiv") popup.style.display='none' } function showWindow() { var popup = document.getElementById("popupdiv") popup.style.display='block' } </script></head><body><a href="#" onclick="showWindow()">Show Text</a><div id="popupdiv"><div id="subdiv">	  <!-- for formatting purposes  -->Popup gallery image and description content</div></div>

I think that I could make it work if I could find a way to get an iframe to automatically resize an image targeted at it. I had some success with this by writing a separate HTML file, but I'm hoping to keep it a little simpler than that - all on one page, you know?

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Add parameters to the functions:

function CloseWindow(el_id) {   var popup = document.getElementById(el_id);  popup.style.display='none';} function showWindow(el_id) {   var popup = document.getElementById(el_id);   popup.style.display='block';}

Then when you call the functions you can say which ID to use:<a href="#" onclick="showWindow('popupdiv')">Show Text</a>

Link to comment
Share on other sites
lastlifelost Member

lastlifelost

Posted
  • Author
Posted

Thanks for the fast reply! I got it to work no problem. 2 more for you:I'm going to have a lot of images on the site to open up in this little viewer. Right now it's going to eat up a lot of lines (not that it's really a big deal, I just like to take a minimalist approach whenever possible for my coding). Is there a better way to do this? Check out where I'm at now, then multiply that by fifty or so more images at least.Is there a way to make it so the links don't jump back to the top of the page when the link is clicked on? Using the href="#" is fine and dandy when the page is one screen tall, but I'm guessing that it's going to way over that. 

<script> function CloseWindow(el_id) {   var popup = document.getElementById(el_id);  popup.style.display='none';} function showWindow(el_id) {   var popup = document.getElementById(el_id);   popup.style.display='block';}</script></head><body>	<a href="#" onclick="showWindow('popup1')">popup 1</a>	<a href="#" onclick="showWindow('popup2')">popup2</a>	<div class="popupdiv" id="popup1">		<!--		<iframe src="" id="subdiv" name="frame" scrolling="no"></iframe> 		-->		<div id="subdiv">			TEXT FOR POPUP 1 TEXT FOR POPUP 1 TEXT FOR POPUP 1 TEXT FOR POPUP 1 TEXT FOR POPUP 1 TEXT FOR POPUP 1 TEXT FOR POPUP 1 TEXT FOR POPUP 1 <br />			<a href="#" onclick="CloseWindow('popup1')">hide text</a> 		</div>	</div>	<div class="popupdiv" id="popup2">		<!--		<iframe src="" id="subdiv" name="frame" scrolling="no"></iframe> 		-->		<div id="subdiv">			this is popup 2 this is popup 2 this is popup 2 this is popup 2 this is popup 2 this is popup 2 this is popup 2 this is popup 2<br />			<a href="#" onclick="CloseWindow('popup2')">hide text</a> 		</div>	</div></body>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

You could automate that with a server-side script like PHP, but it's probably not worth it trying to automate with Javascript, it's probably best to just write each thing out. You could use PHP to loop through your 50 images and write the code out though, and you would only have to write the PHP loop once. PHP is another topic though. For the time being it's probably best to just duplicate the code for each image, unless you want a pure Javascript gallery.

Is there a way to make it so the links don't jump back to the top of the page
Instead of this:<a href="#"do this:<a href="javascript:void(0);"
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

with this method all do is copy subdiv and contents down for new gallery, change source ref, description text, all 'hide gallery', 'show gallery' link text plus gallery ref no are produce automatically.if javascript is disabled, all the gallery's with descriptions are shown by default.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">body{font-size:70%; font-family:Verdana, Arial, Helvetica, sans-serif;}#wrapper{overflow:hidden;}#popupdiv { overflow:hidden;}.subdiv{margin: 0 5px; padding:5px;}.subdiv a{font-style:normal; color:#0000EE; cursor:pointer;text-decoration:underline; outline: none; line-height: 21px; display:block;}.subdiv iframe { color:#000; text-align:justify;}</style><script type="text/javascript">/*<![CDATA[*//*---->*/var gallery_container, inner_div, showhide_element, link_element;var showstring="Show Gallery"; //set show and hide textvar hidestring="Hidexx Gallery";function setattributes(){gallery_container = document.getElementById("popupdiv");inner_div = gallery_container.getElementsByTagName("div");showhide_element = gallery_container.getElementsByTagName("span");link_element= gallery_container.getElementsByTagName("a");var innerDivTotal = inner_div.length;for(i=0;i<innerDivTotal;i++) { inner_div.setAttribute("id", "divRef"+i); inner_div.setAttribute("onclick", "showhide(this)"); inner_div.onclick = function() { eval("showhide(this)")}; showhide_element.style.display="none"; link_element.innerHTML=showstring+(i+1); }}function showhide(e){showhide_element = e.getElementsByTagName("span");link_element = e.getElementsByTagName("a");var ref_no=link_element[0].innerHTML;if (showhide_element[0].style.display=="none") { ref_no = ref_no.substring(showstring.length,ref_no.length) link_element[0].innerHTML=hidestring+ref_no; showhide_element[0].style.display="block"; }else { ref_no = ref_no.substring(hidestring.length,ref_no.length) link_element[0].innerHTML=showstring+ref_no; showhide_element[0].style.display="none"; }}window.onload=setattributes;/*--*//*]]>*/</script> </head><body><div id="wrapper"><div id="popupdiv"><div class="subdiv"><a href="java script:void(null);"></a><span><iframe src="" name="frame" scrolling="no" width="100%"></iframe>TEXT FOR POPUP 1 TEXT FOR POPUP 1 TEXT FOR POPUP 1 TEXT FOR POPUP 1 TEXT FOR POPUP 1 TEXT FOR POPUP 1 TEXT FOR POPUP 1 TEXT FOR POPUP 1</span></div><div class="subdiv"><a href="java script:void(null);"></a><span><iframe src="" name="frame" scrolling="no" width="100%"></iframe>TEXT FOR POPUP 2 TEXT FOR POPUP 2 TEXT FOR POPUP 2 TEXT FOR POPUP 2 TEXT FOR POPUP 2 TEXT FOR POPUP 2 TEXT FOR POPUP 2 TEXT FOR POPUP 2</span></div><div class="subdiv"><a href="java script:void(null);"></a><span><iframe src="" name="frame" scrolling="no" width="100%"></iframe>TEXT FOR POPUP 3 TEXT FOR POPUP 3 TEXT FOR POPUP 3 TEXT FOR POPUP 3 TEXT FOR POPUP 3 TEXT FOR POPUP 3 TEXT FOR POPUP 3 TEXT FOR POPUP 3</span></div><div class="subdiv"><a href="java script:void(null);"></a><span><iframe src="" name="frame" scrolling="no" width="100%"></iframe> TEXT FOR POPUP 4TEXT FOR POPUP 4 TEXT FOR POPUP 4 TEXT FOR POPUP 4 TEXT FOR POPUP 4 TEXT FOR POPUP 4 TEXT FOR POPUP 4 TEXT FOR POPUP 4</span></div></div></div></body></html>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...