TamWiki

For a mouse who is a packrat

Technology » Great Example Of A Pop Up Meta Link
a web programming example showing how to make a pop up link

(redirected from Main.GreatExampleOfAPopUpMetaLink)

Next: Maintenance >>

<< Prev: Environments

Up: ^Programming^

On this page... (hide)

Example 1: Use of `onClick to directly call a some javascript with the new window to open
Example 2: Using javascript to modify the behavior of a link element
Example 3: jQuery Example!
Example 4: A jQuery UI example

Pop-up meta links or windows are all the rage. They let you hide away and then expose additional content at the click of a button. The first example is very old school, just tieing the onClick event of the link to a Java Script call to open a window. Very crude and very Web 1.0. The second example is a bit better, using Java Script to add an event handler to a link which opens the window based on the href attribute in the link. The third example goes all the way to Web 2.0 utilizing jQuery to assign the event handlers to the link elements and to cause a hidden <div> to float out in front of the window. Very sexy!

Example 1: Use of `onClick to directly call a some javascript with the new window to open

<A
window.status='status bar text on rollover'
onClick='window.open("url", "name",
"toolbar=no, location=no, directories=no, menubar=no, scrollbars=auto, status=no, RESIZE, width=300, height=300")'
href='javascript:void(0)'
>blah blah</A>

NOTE the use of the javascript:void(0) in the href= to basically do nothing!! cool idea. Example of use:

<p>While it's true that science hasn't yet created a Stepford Society,
it's not for lack of trying. Our age might have once
qualified as a scary Sci-Fi vision: Boomermen assert their
Viagra-pumped sexuality, age-defiant women subject themselves to poison
<A window.status='MetaLink' onClick="window.open('http://www.feedmag.com/html/filter/98.06cruz/98.06cruz_margin4.html',
'margin', 'toolbar=no, location=no, directories=no, menubar=no, scrollbars=auto, status=no, RESIZE, width=300, height=300')"
href="javascript:void(0)">Botox</A>
injections, hyperactive children and neurotic adults get Ritalin to
calm down, and dieters surrender to a gleaming array of liposculpture
devices. If Dr. Plomin and germline genetic engineering prove successful,
the old saying may well become obsolete. There will, in fact, be a
cure for stupidity. Maybe they'll find one for scientific hubris along
the way.</p>

There are better ways to do this with javascript and invisible <div>'s, mouse-over events. See jQuery example below.

Example 2: Using javascript to modify the behavior of a link element

The following uses stock javascript in order to make the links in the container become pop-up links instead of jumping to the page directly.

<style type="text/css">
* {
margin:0px;
padding:0px;
}
#container {
color:#555;
font-size:10pt;
font-family:"Trebuchet MS", Arial, Verdana, Tahoma;
width:630px;
height:530px;
margin-top:-215px;
margin-left:-315px;
margin:20px auto;
}
ul {
list-style-type:none;
}
ul li {
float:left;
margin:10px 3px;
}
ul li a img {
width:200px;
height:150px;
padding:1px;
border:1px solid #999;
}
</style>

First, we add the event listener to the load event of the window. This will cause the openNewWin function to execute once the document is loaded. This is so the function does execute prematurely before there is html to act upon. Note requirement to be compliant with both Firefox and Internet Explorer.

<script type="text/javascript">
/* <[CDATA[ */
window.addEventListener ?
window.addEventListener('load',
function () {
openNewWin();
},
false) // FF
:
window.attachEvent('onload',
function () {
openNewWin();
}); // IE

Here is the function that runs at load time and attaches an event to every <a> element inside container.

function openNewWin() {

Get an array of <a> elements inside the container <div>

var imgA = document.getElementById('container').getElementsByTagName('a');

/* Cycle through each <a> element */

for (var i = 0 ; i < imgA.length; i++) {
/* Assign an event handler to the click event of each <a> element */
imgA[i].onclick = function () {
/* when clicked, the window will open with the url set to
* the href attribute of the given <a> tag */
window.open(this.getAttribute('href'),'mywin','width=500,height=400');
/* negate the remainder of the <a> tags function */
return false;
} // end function
} // end for
} // end openNewWin
/* ]]> */
</script>

Nothing spectacular here, it's all done with CSS and Java Script.

<div id="container">
<ul>
<li><a href="Picture1.jpg"> <img src="Picture1.jpg" alt="MyPics"> </a> </li>
<li><a href="Picture2.jpg"> <img src="Picture2.jpg" alt="MyPics"> </a> </li>
<li><a href="Picture3.jpg"> <img src="Picture3.jpg" alt="MyPics"> </a> </li>
<li><a href="Picture4.jpg"> <img src="Picture4.jpg" alt="MyPics"> </a> </li>
<li><a href="Picture5.jpg"> <img src="Picture5.jpg" alt="MyPics"> </a> </li>
<li><a href="Picture6.jpg"> <img src="Picture6.jpg" alt="MyPics"> </a> </li>
<li><a href="Picture7.jpg"> <img src="Picture7.jpg" alt="MyPics"> </a> </li>
<li><a href="Picture8.jpg"> <img src="Picture8.jpg" alt="MyPics"> </a> </li>
<li><a href="Picture9.jpg"> <img src="Picture9.jpg" alt="MyPics"> </a> </li>
</ul>
</div>

This example is implemented here.

Example 3: jQuery Example!

Same example as above only implemented using jQuery and a pop-up <div>.

<style type="text/css">
* {
margin:0px;
padding:0px;
}
#container {
color:#555;
font-size:10pt;
font-family:"Trebuchet MS", Arial, Verdana, Tahoma;
width:60%;
margin:20px auto;
}
ul {
list-style-type:none;
}
ul li {
float:left;
margin:10px 3px;
}
ul li a img {
width:100px;
height:100px;
padding:1px;
border:1px solid #999;
}

Here we set up the CSS attributes for the viewer <div>. Of note, z-index is set to a very high value to ensure that this <div> always floats on top. We position it absolutely, then set it to be centered in the viewport. Also important is that display:none be set so that the <div> doesn't render immediately upon loading. We want to wait to render it when the user clicks on one of the thumbnails.

Continuing:

#viewer {
z-index: 99;
width: 500px;
height: 500px;
position: absolute;
display: none;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
text-align: center;
background-color: #999900;
}

This sets up the CSS for the <img> tab inside the viewer <div>. Nothing really remarkable here.

#viewer img {
width: 400px;
height: 400px;
margin: auto;
padding: 10px;
border: 1px solid #999;
}
</style>

This is all the jQuery that is needed to render the functionality we want. Much simpler and shorter than the Java Script above!

<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
$(document).ready(function(){

First, tell the viewer to hide. This should already be true, but it's best to make sure.

$("#viewer").hide();

This goes through every <a> tag in container and binds an event handler to the click event of each tag. The event handler changes the viewer's <img> tag src attribute to be that of the <a> tags href attribute, then causes the viewer to appear in a nice sweeping motion.

$("a","#container").click(function(event){
$("img","#viewer").attr("src", $(this).attr("href"));
$("#viewer").show(200);
event.preventDefault();
});

This binds an event to the input button on the viewer <div> that causes the viewer to shrink down and disappear in a nice animation.

$("input:button","#viewer").click(function(){
$("#viewer").hide(200);
});
});
/* ]]> */
</script>

Same container structure as before.

<div id="container">
<ul>
<li><a href="images/Picture1.jpg"> <img src="images/Picture1.jpg" alt="MyPics"/> </a> </li>
<li><a href="images/Picture2.jpg"> <img src="images/Picture2.jpg" alt="MyPics"/> </a> </li>
<li><a href="images/Picture3.jpg"> <img src="images/Picture3.jpg" alt="MyPics"/> </a> </li>
<li><a href="images/Picture4.jpg"> <img src="images/Picture4.jpg" alt="MyPics"/> </a> </li>
<li><a href="images/Picture5.jpg"> <img src="images/Picture5.jpg" alt="MyPics"/> </a> </li>
<li><a href="images/Picture6.jpg"> <img src="images/Picture6.jpg" alt="MyPics"/> </a> </li>
<li><a href="images/Picture7.jpg"> <img src="images/Picture7.jpg" alt="MyPics"/> </a> </li>
<li><a href="images/Picture8.jpg"> <img src="images/Picture8.jpg" alt="MyPics"/> </a> </li>
<li><a href="images/Picture9.jpg"> <img src="images/Picture9.jpg" alt="MyPics"/> </a> </li>
<li><a href="images/Picture10.jpg"> <img src="images/Picture10.jpg" alt="MyPics"/> </a> </li>
</ul>
<div style="clear:both"></div>
</div>

Here is the viewer <div> which is pretty simple, Just an image and a button to display.

<div id="viewer">
<img/>
<br />
<input type="button" name="close" value="Close" />
</div>

A demo of this is available here.

Example 4: A jQuery UI example

Update: From a commenter on facebook, comes the following utilitizing jQueryUI, an extention to jQuery:

Kate wrote:
btw... Including jQueryUI and popups are even simpler.

$( 'button#somebutton' ).click( function() {

$( '<div title="Popup Title">Popup Text</div>' ).dialog( {

buttons: {
'Done' : function() { $( this ).dialog( 'close' ); }
}

} );

} );"

Here below is the example above reworked to use jQuery UI widgets:

First the css:

<style type="text/css">
* {
margin:0px;
padding:0px;
}
#container {
color:#555;
font-size:10pt;
font-family:"Trebuchet MS", Arial, Verdana, Tahoma;
width:60%;
margin:20px auto;
}
ul {
list-style-type:none;
}
ul li {
float:left;
margin:10px 3px;
}
ul li a img {
width:100px;
height:100px;
padding:1px;
border:1px solid #999;
}
</style>

Next, the jQuery to set up the dialog box:

<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
$(document).ready(function(){
$("a","#container").click(function(event){
$("img","#viewer").attr("src", $(this).attr("href"));
$("#viewer").dialog('open');
event.preventDefault();
});

var dialogOpts = {
autoOpen: false,
modal: true,
show: 'fold',
hide: 'fold',
height: 600,
width: 450,
buttons: {"Close" :
function({$(this).dialog('close')}}}
$("#viewer").dialog(dialogOpts);
});
/* ]]> */
</script>

The body of the document is mostly unchanged, except for the viewer <div>:

<div id="viewer" title="Image Viewer">
<p><img/ style="width: 400px; height: 400px; border: 1pt solid #DDD; padding: 10px;"></p>
</div>

An example of this is shown here.

There's not a whole lot of difference between the two jQuery examples, but the it's possibly simpler to use the jQuery UI dialog function as it is styled according to the jquery ui style sheet. jQuery styles can be created and downloaded via the ThemeRoller application on the jQuery UI web site.

So there you have it. Pop-ups in four different flavours. I know which one I'll be using from now on.

Tags:

web development, javascript, pop-ups

Categories: Articles

Recent Changes | Printable View | Page History | Edit Page
Page last modified on April 17, 2012, at 08:59 PM by ImportText ?