PDA

View Full Version : Press escape anywhere, and link DIV images

postitlord
11-16-2004, 05:22 PM
1. I want to press escape anywhere on the page, and have the content of the text box be selected. Regardless of whichever element on the page has the focus. Is this possible?

1b. I also want to prevent the native behavior of escape deleting the contents of the text box. It seems to happen only at first.

2. When you put in 2300023, I want the image that appears to link to http://www.radioshack.ca/estore/Product.aspx?product=2300023 via a pop-up window. At the moment when you type a number and press enter, simply the image will appear.

I understand very little of DIVs, and have no clue how to attach a link to this. I've marked red where I think it should be made a link.

Live version: http://hosting.mixcat.com/nastajus/display.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Display Picture - DDV DSC SWG too!</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
div {
width:300px;
background:#fff;
border:solid 1px #000;
float:left;
margin:1px;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var url="http://www.radioshack.ca/images/RadioShack/";

function displayPic() {

var pattern=document.forms[0][1].value;
pattern = pattern.replace(".","-");
pattern=trim(pattern); ///delete

var len=pattern.length;
var dash=pattern.indexOf("-");
var gen=0;
var spe=0;

//dash used
if (dash!=-1) {
gen=pattern.substr(0, dash);
spe=pattern.substr(dash+1, len-dash);
if (gen<10){gen=gen*100};
if (gen<100){gen=gen*10};
}

//dash not used
else {
gen=pattern.substr(0, 3);
spe=pattern.substr(3, len);
}

spe=pad(spe,4);

var dir = pattern.substr(0, 2)+"/";

elemD=document.createElement("div");
elemP=document.createElement("p");
elemP.appendChild(document.createTextNode(gen+"-"+spe));
elemI=document.createElement("img");
elemI.setAttribute("src",url+dir+gen+spe+"l.jpg");

elemD.appendChild(elemP);
elemD.appendChild(elemI);
document.body.appendChild(elemD);

//Attempt to link to: http://www.radioshack.ca/estore/Product.aspx?product=2300023

selecttext();
}

function pad(number,length) {
var str = '' + number;
while (str.length < length)
str = '0' + str;
return str;
}

function trim(str) {
return str.replace(/^\s*|\s*$/g,"");
}

function checkKey(e){

if(e && e.which){
e = e;
characterCode = e.which;
}
else{
e = event;
characterCode = e.keyCode;
}

//enter pressed
if(characterCode == 13){
displayPic();
return false;
}

//escape pressed
else if(characterCode == 27){
document.forms[0][1].select()
return false;
}
else{
return true;
}

}

function selecttext() {
document.forms[0][1].select();
}

function hide() {

if(document.body.appendChild(elemD)) {
document.body.removeChild(elemD); /*removes current div only*/
}
}

//]]>
</script>

</head>
<body onload="document.forms[0][1].focus()">
<form action="" onSubmit="return false;">
<fieldset>
<input type="text" onKeyPress="checkKey(event)" />
<input type="button" value="display image" onclick="displayPic()" />
<input type="button" value="hide image" onclick="hide()"/>
</fieldset>
</form>
</body>
</html>Original thread (http://htmlforums.com/showthread.php?s=&threadid=47222) regarding this page's inception.
postitlord
11-18-2004, 02:24 AM
I've resolved 1 and 1b using from here (http://www.htmlforums.com/showthread.php?s=&threadid=35404&highlight=Keypress+anywhere).<body onkeypress="press()">
<SCRIPT language=JavaScript>
<!--
//escape pressed
function press() {
if (event.keyCode==27){
selecttext();
}
}
// -->
</SCRIPT>
</body>
123456789
11-18-2004, 04:56 PM
I don't know how to do it in JavaScript or ASP, but I know that in PHP, you can do this:

index.html
<form action="go.php" method="post">
<input type="text" name="number">
</form>

go.php
<?php
$number = $_POST['number'];
$url = 'http://www.radioshack.ca/estore/Product.aspx?product='.$number;
header("Location: $url");
?>
postitlord
11-18-2004, 11:06 PM
Not quite sure what's supposed to happen, but something's not quite right. Pressing enter in the new field caused the window where I could Open or Save the file to appear. Should I not have Dreamweaver associated with PHP files? Because that's what it opens in.

Not quite understanding what the $post syntax is supposed to do, it doesn't look like this code will modify the pictures that appear on the page into links. As best I can understand this... it's supposed to make a new window appear immediately?

Knowing nothing about PHP, I simply pasted that code into a file called go.php.
postitlord
11-22-2004, 11:55 PM
I dislike bumping threads, but... no other ideas?
hysterio
11-24-2004, 11:52 AM
replace your code between
elemD=document.createElement("div"); //make


and document.body.appendChild(elemD);


with this code:
elemP=document.createElement("p"); //make
elemP.appendChild(document.createTextNode(gen+"-"+spe));

elemA=document.createElement("a");
elemA.setAttribute("href", "http://www.radioshack.ca/estore/Product.aspx?product="+gen+spe);
elemA.setAttribute("target", "_blank");
elemI=document.createElement("img"); //make


elemI.setAttribute("src",url+dir+gen+spe+"l.jpg"); //initialize and solves the image dimensions in I.E

elemA.appendChild(elemI);
elemD.appendChild(elemP);
elemD.appendChild(elemA);



and i guess it does what you want :)
postitlord
11-26-2004, 03:20 AM
I love you! I doubt this is possible, but.
Can the blue-and-purple border that now appears around clickable images be moved so it instead appears around the edge of the entire white box? Failing that, what code do I need to remove the border entirely?
hysterio
11-26-2004, 04:35 AM
Originally posted by postitlord
I love you!

Don't get to emotional :)

Originally posted by postitlord

Can the blue-and-purple border that now appears around clickable images be moved so it instead appears around the edge of the entire white box? Failing that, what code do I need to remove the border entirely?

If you want to move that border to the entire white box, user thinks he can click on the entire box to open the detailed information, but it can't.

you can change in your css:
border:solid 1px #000;
into
border:solid 1px blue;
and you get a blue border around entire white box.

to remove border around image, i believe you can do the following: add this code in your javascript (after the line code where you set your src of the image)

elemI.setAttribute("style", "border:0px;");


hope it works.
postitlord
11-26-2004, 01:26 PM
You know what. I realize making the entire contents of the box clickable is a hazard. Often we will want to copy and paste the number that appears, and clickability will mess that up. So I'll stick with just the images being clickable.

Unfortunately, the code provided does not remove the border around the image. I pasted your line of code after: elemI.setAttribute("src",url+dir+gen+spe+"l.jpg"); but it doesn't make any difference.

Note: The live version has a comment afterwards.
hysterio
11-29-2004, 04:24 AM
oke, didn't test that one, but this one i tested and it works :)

just add border:0px; to your css under img so you get img {
margin:auto;
display:block;
border:0px;
}
postitlord
12-10-2004, 02:22 AM
Again excellent. Another refinement I'd love:

Pop up windows don't always appear full-screen. Can this be remedied?
hysterio
12-10-2004, 05:35 AM
try using this script in stead of the one you already have


<script type="text/javascript">
//<![CDATA[

var url="http://www.radioshack.ca/images/RadioShack/";
var gen=0;
var spe=0;

function displayPic() {

var pattern=document.forms[0][1].value;
pattern = pattern.replace(".","-"); //hardcoded, but simplest at midnight.
///ELIMINATE.. ALL NON-NUMBERS MORE THAN THREE DIGITS BEFORE --. AND MORE THAN FOUR DIGITS AFTER --.
pattern=trim(pattern); ///delete

var len=pattern.length;
var dash=pattern.indexOf("-");

//dash used
if (dash!=-1) {
gen=pattern.substr(0, dash);
spe=pattern.substr(dash+1, len-dash);
if (gen<10){gen=gen*100}; //NEVER NEED. JUST HERE FOR STRUCTURAL INTEGRITY
if (gen<100){gen=gen*10};
}

//dash not used
else {
gen=pattern.substr(0, 3);
spe=pattern.substr(3, len);
}

spe=pad(spe,4);
//alert("dash:"+dash+" len"+len+" gen"+gen+" spe"+spe);

var dir = pattern.substr(0, 2)+"/";
//alert("pattern.substr"+pattern.substr(0, 2)+ " gen.substr(0, 2):" +gen.substr(0, 2));

elemD=document.createElement("div"); //make

elemP=document.createElement("p"); //make
elemP.appendChild(document.createTextNode(gen+"-"+spe));

elemA=document.createElement("a");
elemA.setAttribute("href", "javascript:openWindowMaximized();");
elemI=document.createElement("img"); //make


elemI.setAttribute("src",url+dir+gen+spe+"l.jpg"); //initialize and solves the image dimensions in I.E

elemA.appendChild(elemI);
elemD.appendChild(elemP);
elemD.appendChild(elemA);

document.body.appendChild(elemD);


//Attempt to link to later ex: http://www.radioshack.ca/estore/Product.aspx?product=2300023

selecttext();
}

function pad(number,length) {
var str = '' + number;
while (str.length < length)
str = '0' + str;
return str;
}

function trim(str){
return str.replace(/^\s*|\s*$/g,"");
}

function checkKey(e) {

if(e && e.which){ //if which property of event object is supported (NN4)
e = e;
characterCode = e.which; //character code is contained in NN4's which property
}
else{
e = event;
characterCode = e.keyCode; //character code is contained in IE's keyCode property
}

//enter pressed
if(characterCode == 13){
displayPic();
return false;
}

else{
return true;
}

}

function selecttext() {
document.forms[0][1].select();
}

function hide() {

if(document.body.appendChild(elemD)) {
document.body.removeChild(elemD); /*removes current div only*/
}
}

//escape pressed
function press() {
if (event.keyCode==27){
selecttext();
}
}

function openWindowMaximized() {
var url = "http://www.radioshack.ca/estore/Product.aspx?product="+gen+spe;
var newWindow = window.open(url, '', 'height='+screen.availHeight+',width='+screen.availWidth+',left=0,top=0,directories=no,toolbar=yes,l ocation=yes,menubar=yes,scrollbars=yes,status=yes,resizable=yes');
if (window.focus) {
newWindow.focus();
}
}

//]]>
</script>


hope it works!