/    Sign up×
Community /Pin to ProfileBookmark

Looking for the right code

Copy linkTweet thisAlerts:
Sep 27.2012

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!

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@George88Sep 27.2012 — Demo: http://www.sitesupplier.co.uk/tutorial_demos/webdeveloper_examples/KittieKat/

Code:

<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;img src="test.png" id="test" /&gt;

&lt;input type="button" id="button" value="test" /&gt;

&lt;/body&gt;
&lt;/html&gt;

&lt;script type="text/javascript"&gt;

document.getElementById("button").addEventListener("click", test, false);

function test()
{
var width, height;

<i> </i>width = document.getElementById("test").width;
<i> </i>height = document.getElementById("test").height;

<i> </i>console.log(width);
<i> </i>console.log(height);

<i> </i>window.open("test.html", "Window", "height=" + height + ", width=" + width);
}

&lt;/script&gt;
Copy linkTweet thisAlerts:
@ZABISep 28.2012 — <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
Copy linkTweet thisAlerts:
@xelawhoSep 28.2012 — 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>
[/CODE]
Copy linkTweet thisAlerts:
@KittieKatauthorOct 01.2012 — So, I just put this on the HTML page? Thank you again for all of this!
Copy linkTweet thisAlerts:
@KittieKatauthorOct 01.2012 — 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!
Copy linkTweet thisAlerts:
@xelawhoOct 01.2012 — 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
Copy linkTweet thisAlerts:
@KittieKatauthorOct 01.2012 — 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!
Copy linkTweet thisAlerts:
@xelawhoOct 01.2012 — 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>[/CODE]

then in your js you would have

[CODE]addEvent(document.getElementById('toclick'),'click',openWin);[/CODE]

(the bit in the js depending on which version of the code you went with, of course...)
Copy linkTweet thisAlerts:
@KittieKatauthorOct 02.2012 — 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=&#8221;shortcut icon&#8221; href=/favicon.ico />

Obviously no image appears (at least in firefox)

Am I missing something in the code?

Again, thanks for all your help!
Copy linkTweet thisAlerts:
@George88Oct 02.2012 — Favicon:
&lt;link rel="icon" type="image/ico" href="/favicon.ico"&gt;
×

Success!

Help @KittieKat spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...