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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    dynamic image generation for javascript pop on

    thanks in advance for any help given.

    I am working on a css/javascript coding, to allow a clicked thumbnail to open up a div window, gray out the background and display the image with a close box.

    The problem I'm having is I can get the div to open, gray out the background, and get the close button to reset everything but I cannot get the image tag to work properly. If there were only 1 image to worry about I could hard-code it, but with multiple images to work with, I don't know where I need to put the code:

    index3.html

    Code:
    <!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=utf-8" />
    <title>Untitled Document</title>
    </head>
    <link rel="stylesheet" type="text/css" href="stylesheet/index3.css" />
    <script type="text/javascript" src="javascript/index3.js"></script>
    <body>
    
    
    <div id="overlay"></div>
    <div id="popup">
    	<br />
        <input type="button" value="close" onclick="popclose();" />
    </div>
    
    <a href="javascript:popup('tapir')"><img src="tapir.jpg" /></a>
    <a href="javascript:popup('shark')"><img src="shark.jpg" /></a>
    <a href="javascript:popup('arma')"><img src="arma.jpg" /></a>
    </body>
    </html>
    index3.css

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    #pop-open{
    		display:		block;
    		margin:			200px auto 0 auto;
    }
    
    #overlay, #popup {
    		display:		none;
    		position:		absolute;
    }
    
    #overlay {
    		top:			0px;
    		left:			0px;
    		width:			100%;
    		height:			100%;
    		background:		#000000;
    		opacity:		0.5;
    		-ms-filter:		"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    		filter:			alpha(opacity=50);
    		-moz-opacity:	0.50;
    		z-index:		14;
    }
    
    #popup {
    		top:			80px;
    		left:			80px;
    		width:			320px;
    		height:			200px;
    		line-height:	100px;
    		text-align:		center;
    		background:		#cccccc;
    		border:			1px solid #999999;
    		z-index:		15;
    }
    index3.js

    Code:
    /*function popup(artpic) {
    	document.getElementById('overlay').style.display = 'block';
    	document.getElementById('popup').style.display = 'block';
    }*/
    
    function popclose() {
    	document.getElementById('overlay').style.display = 'none';
    	document.getElementById('popup').style.display = 'none';
    }
    
    
    
    function popup(artpic) {
    	imgName = "" + artpic + ".jpg"
    	
    	
    	document.getElementById('overlay').style.display = 'block';
    	document.getElementById('popup').style.display = 'block';
    	<!--document.getElementById('popup').write('<img src = "imgName">');-->
    	<!--artpic.document.write('<a href="javascript:self.close()">close</a>');-->
    	
    }

    note the commented script in the js file is simply because, I'm the type that comments things out until I get things working, then I go back and clean up a file.

    I tried to use the document.write similar to what you can do with a javascript popup, but either I'm not targeting the div correctly or there is something else I don't know in order to target it.

    should mention I'm not formally trained in javascript, I just learn by trying to do something until I hit a roadblock...such as this one haha.

    once again, thanks for any help.


    hosted the files for view

    http://www.wargarden.net/tutorials/j...on/index3.html

    click on one of the images and you see what I'm talking about, just need the appropriate image to appear in the box, tapir for tapir, shark for shark, etc...

    thanks again
    Last edited by wargarden; 05-24-2009 at 11:33 PM. Reason: add url for view

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Why not K.I.S.S.???

    Code:
    function popup(name)
    {
        document.getElementById("popimg").src = name + ".jpg";
        document.getElementById('overlay').style.display = 'block';
        document.getElementById('popup').style.display = 'block';
    }
    
    and then:
    
    <div id="popup">
        <img id="popimg" alt="popup image" />
        <br />
        <input type="button" value="close" onclick="popclose();" />
    </div>
    Don't create tags dynamically unless you really need to. There's nothing wrong with an <img> tag with no src= used as a placeholder.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    first, thanks for the help. Tried the changes you implemented, so that my .js file looks like this:

    Code:
    function popclose() {
    	document.getElementById('overlay').style.display = 'none';
    	document.getElementById('popup').style.display = 'none';
    }
    
    
    
    function popup(artpic) {
    		
    	document.getElementByID("popimg").src = artpic + ".jpg";
    	document.getElementById('overlay').style.display = 'block';
    	document.getElementById('popup').style.display = 'block';
    	
    	<!--imgName = "" + artpic + ".jpg"-->
    	<!--document.getElementById('popup').write('<img src = "imgName">');-->
    	<!--artpic.document.write('<a href="javascript:self.close()">close</a>');-->
    	
    }
    and the body of the html looks like this:

    Code:
    <body>
    
    
    <div id="overlay"></div>
    <div id="popup">
    	<img id="popimg" alt="popup image" />
    	<br />
        <input type="button" value="close" onclick="popclose();" />
    </div>
    
    <a href="javascript:popup('tapir')"><img src="tapir.jpg" /></a>
    <a href="javascript:popup('shark')"><img src="shark.jpg" /></a>
    <a href="javascript:popup('arma')"><img src="arma.jpg" /></a>
    </body>
    as seen here: http://www.wargarden.net/tutorials/j...on/index3.html

    but the document.getElementByID('popimg').src = artpic + ".jpg"; line in the .js file is breaking the code and causing an error. If I comment it out , it'll open up the new window with a broken image tag, but left in, the pop on does not appear at all.

    going to continue to work on this.

    EDIT:by reversing the placement of the popimg line, I get the grey block to show up, it's just not seeing the image.

    Code:
    function popup(artpic) {
    		
    	document.getElementById('overlay').style.display = 'block';
    	document.getElementById('popup').style.display = 'block';
    	document.getElementByID("popimg").src = artpic + ".jpg";
    	
    	<!--imgName = "" + artpic + ".jpg"-->
    	<!--document.getElementById('popup').write('<img src = "imgName">');-->
    	<!--artpic.document.write('<a href="javascript:self.close()">close</a>');-->
    	
    }
    Last edited by wargarden; 05-25-2009 at 10:47 PM. Reason: errata update

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Look really really really closely at your JavaScript code:
    Code:
    function popup(artpic) {
    		
    	document.getElementById('overlay').style.display = 'block';
    	document.getElementById('popup').style.display = 'block';
    	document.getElementByID("popimg").src = artpic + ".jpg";
    }
    If you would turn on debugging or at least look at the error messages you are getting you would see the problem.

    Here, let's emphasize the difference:
    Code:
    	document.getElementById('popup').style.display = 'block';
    	document.getElementByID("popimg").src = artpic + ".jpg";
    JavaScript is case sensitive. Might I *strongly* suggest that you start using a Debugger when working with JavaScript? The most usable is probably Firebug, used with FireFox, but even the MS debugger is better than none at all.

    Good luck!

  • Users who have thanked Old Pedant for this post:

    wargarden (05-26-2009)

  • #5
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    that was it, thank you Old Pedant


  •  

    Posting Permissions

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