www.webdeveloper.com
Results 1 to 11 of 11

Thread: Looking for the right code

  1. #1
    Join Date
    Sep 2012
    Location
    Long Island, NY
    Posts
    17

    Looking for the right code

    Hello,
    I'm attempting to have an image open in a new window, but for the window to fit the dimensions of the image. I've tried many codes and have looked at many references, but for some reason they just don't work. Maybe someone can provide me a simple solution to this? Thank you!

  2. #2
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    Demo: http://www.sitesupplier.co.uk/tutori...les/KittieKat/

    Code:

    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>
    
    <body>
    
    <img src="test.png" id="test" />
    
    <input type="button" id="button" value="test" />
    
    </body>
    </html>
    
    <script type="text/javascript">
    
    document.getElementById("button").addEventListener("click", test, false);
    
    function test()
    {
    	var width, height;
    	
    	width  = document.getElementById("test").width;
    	height = document.getElementById("test").height;
    
    	console.log(width);
    	console.log(height);
    	
    	window.open("test.html", "Window", "height=" + height + ", width=" + width);
    }
    
    </script>

  3. #3
    Join Date
    Mar 2009
    Posts
    452
    <html>
    <head>
    </head>
    <body style="margin:0; padding: 0;">
    <img src="image.jpg" width="500" height="500" onload="window.resizeTo(this.width,this.height);" />
    </body>
    </html>


    Note: src must point to an existing image file

  4. #4
    Join Date
    Nov 2010
    Posts
    1,031
    it's worth noting that many users turn off pop-up windows. A more reliable approach is to use a hidden div. Also noteworthy is that adding event listeners requires a cross-browser solution for IE<9:

    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>
    <style>
    #thepic{
    display:none;
    position:absolute;  
    top:50%;  
    left:50%;  
    margin:-100px 0 0 -100px;  
    width:200px;  
    height:200px;  
    border:1px solid #9999FF;
    overflow:hidden;
    }
    
    #kitt{
    width:100%;  
    height:auto;
    }
    
    #closebutt{
    float:right;
    font-weight:bold;
    color:white;
    background-color:red; 
    }
    </style>
    </head>
    
    <body>
    <input type="button" id="opbutt" value="open" />
    <div id="thepic">
    <button id="closebutt">X</button>
    <img id="kitt" src='http://www.sitesupplier.co.uk/tutorial_demos/webdeveloper_examples/KittieKat/test.png'/>
    </div>
    
    <script type="text/javascript">
    function openWin(){
    document.getElementById('thepic').style.display="block"
    }
    
    function closeWin(){
    document.getElementById('thepic').style.display="none"
    }
    
    if (window.addEventListener)
    addEvent = function(ob, type, fn ) {
    ob.addEventListener(type, fn, false );
    };
    else if (document.attachEvent)
    addEvent = function(ob, type, fn ) {
    var eProp = type + fn;
    ob['e'+eProp] = fn;
    ob[eProp] = function(){ob['e'+eProp]( window.event );};
    ob.attachEvent( 'on'+type, ob[eProp]);
    };
    
    addEvent(document.getElementById('opbutt'),'click',openWin);
    addEvent(document.getElementById('closebutt'),'click',closeWin);
    </script>
    </body>
    </html>

  5. #5
    Join Date
    Sep 2012
    Location
    Long Island, NY
    Posts
    17
    So, I just put this on the HTML page? Thank you again for all of this!

  6. #6
    Join Date
    Sep 2012
    Location
    Long Island, NY
    Posts
    17
    OK, so I inputted the codes and they all work. Is their a way to make text or an image the link to open in a new window. Or does it have to be a button?

    Thank you all again this is helping me a ton!

  7. #7
    Join Date
    Nov 2010
    Posts
    1,031
    any html element (well, not any, but most) can have an onclick event. Simply give it an id and attach the listener to that id

  8. #8
    Join Date
    Sep 2012
    Location
    Long Island, NY
    Posts
    17
    Ok so it would go here?
    if (window.addEventListener)
    addEvent = function(ob, type, fn ) {
    ob.addEventListener(type, fn, false );
    };

    Or is their somewhere else?

    Thank you!

  9. #9
    Join Date
    Nov 2010
    Posts
    1,031
    no, you have to put the id in the element in your html block:

    Code:
    <img id="button" src="my.jpg" id="toclick" />
    or
    <span id="toclick">click here</span>
    then in your js you would have

    Code:
    addEvent(document.getElementById('toclick'),'click',openWin);
    (the bit in the js depending on which version of the code you went with, of course...)

  10. #10
    Join Date
    Sep 2012
    Location
    Long Island, NY
    Posts
    17
    Awsome I think I finally got it. Thanks for all your help!
    Maybe you can help me with something else real quick?

    I've also been trying to figure out the favicon. Now, I think I have the code right:
    <link rel=”shortcut icon” href=/favicon.ico />
    Obviously no image appears (at least in firefox)
    Am I missing something in the code?

    Again, thanks for all your help!

  11. #11
    Join Date
    Sep 2011
    Location
    Bristol, England, United Kingdom
    Posts
    192
    Favicon:
    Code:
    <link rel="icon" type="image/ico" href="/favicon.ico">

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles