Web Developer's Virtual Library: Encyclopedia of Web Design Tutorials, Articles and Discussions


WDVL Newsletter

Active Server Pages
JSP/Java Servlets
Microsoft SQL Server
Daily Backup
Dedicated Servers
Streaming Audio/Video
24-hour Support    

jobs.webdeveloper.com

Hiermenus


e-commerce
Partner With Us















Developer Channel
FlashKit.com
JavaScript.com
JavaScriptSource
Developer Jobs
ScriptSearch
StreamingMediaWorld
Web Developer's Journal
Web Developer's Virtual Library
WebDeveloper.com
Webreference
Web Hosts
XMLfiles.com

internet.com
IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers


JavaScript

I want a user to be able to click on a link to automatically add the current page to his favorites (bookmarks).

<script language="JavaScript" type="text/javascript">
<!--
var bookmarkurl=document.location
var bookmarktitle=document.title
var hi=navigator.appName 
var hi2=navigator.appVersion
function addbookmark(){
if (hi.indexOf("Microsoft Internet Explorer")>-1){ 
if (hi2 < 4.0) { alert("You are using a version of
internet explorer that support's this code");
}
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
} else { 
alert("We have detected that you are using Netscape
Navigator or a browser that is not compatible with
this feature\nYou will now be tranferred to a standard
browser compatability page");
location.href="nspage.html";
}
}
//-->
</script>

How does one make a new page load after a form has been submitted?

You can adjust this script to suit your needs:

<script language="JavaScript">
var msg ="You can use JavaScript to create 
messages which ask questions. Tell me you agree 
with me!";
function confirmit(){
if(confirm(msg)==true){document.newsubmit.submit();}
else alert('Sorry, you can\'t play with us and 
have to leave right now!');
}
</script>
<title></title>
</head>
<body>
<form method="post" 
action="http://www.yourdomain.com/cgi-bin/doit.cgi"
name="newsubmit">
<input type=text name="save" size=35> 
<B>Name for File</b><br>
<input type=file name="uploadf" size=35 
><br>
<input type=radio onClick="confirmit();return 
false" name="doit"> Submit It Right Now!
<input type=radio onClick="alert('okay, we didn\'t 
want it anyway!')" name="doit"> 
I'd rather not!
</form>

What is the code to have an image, when clicked, close the window the user is currently in?

Here's a quick and easy method:

<a href="#" onclick="self.close()">
<img src="image.gif" border=0></a>

or for a non-proprietary method, try this:

<a href="javascript:self.close()">
<img src="bla.gif" border=0></a>

I've seen how to do a mouseover for graphics and how to use arrays for multiple usage, but can anybody tell me how to setup a mouseover for text. I have to be blind. I have yet to find it in a book and it would seem so simple from what I've read. As of yet I have not made it work.

Unlike graphics, to get text to change onmouseover is coded differently for Nav and IE. For Nav you have to make the text a link so it can trigger the mouseover event where IE doesn't require the text to be anchored. The script below has been changed to work off the mouseover event. I usually use it with an onClick handler...set up a few links that change the text in the div tag when clicked. The script sets up the hide/show for both browsers. IE can read Navs div but Nav won't read IEs div.

<SCRIPT LANGUAGE="JavaScript">
function showInfo(name) {
var viewthis = getHandle(name);
if (document.layers)
viewthis.visibility = "show";
if (document.all)
viewthis.visibility = "visible";
}

function hideInfo(name) {
var viewthis = getHandle(name);
if (document.layers)
viewthis.visibility = "hide";
if (document.all)
viewthis.visibility = "hidden";
}

function getHandle(name) {
if (document.layers)
return(document.layers[name]);
if (document.all) {
var theblock = 
eval('document.all.' + name + '.style');
return(theblock);
}
}
</SCRIPT>

<!--ie-->
<div id=myTextBlock1 style="width:80; 
height:20; position:absolute;" 
onmouseover="hideInfo('myTextBlock1'),
showInfo('myTextBlock2')">Hello World</div>

<div id=myTextBlock2 style="width:80; 
height:20; background-color:#cccccc; 
position:absolute;" 
onmouseout="hideInfo('myTextBlock2'),
showInfo('myTextBlock1')">Hello again...</div>

<!--nav & ie-->
<div id=myTextBlock1 style="width:80; 
height:20; background-color:#cccccc; 
position:absolute;">
<a href="javascript:void()" 
onmouseover="hideInfo('myTextBlock1'),
showInfo('myTextBlock2')">Hello World</a>
</div>

<div id=myTextBlock2 style="width:80; 
height:20; background-color:#cccccc; 
position:absolute;">
<a href="javascript:void()" 
onmouseout="hideInfo('myTextBlock2'),
showInfo('myTextBlock1')">Hello 
again...</a></div>

How you can have an area on a web page where images change after a default number of seconds? I've seen this 'slide show' effect before, so I know it can be done (I want to achieve it in HTML and/or JavaScript).

Microsoft PowerPoint 2000 lets you export a presentation as an HTML/JavaScript slideshow. As an alternative, you could create a framed site and use the meta refresh in the frame you want to slide-show. Using this code in the slide-show frame:

<META HTTP-EQUIV="Refresh" CONTENT="n,URL="nextslide.htm">

(where n=# of seconds the current page should be displayed and "nextslide.htm" is the next page in the slide show.) You'd want to create an html page for each of the 'slides' and set up the meta tag on each page to refresh to the next one in the series. Then, the last page would loop back to slide 1. Alternatively, you could use the following JavaScript:

<SCRIPT LANGUAGE="JavaScript">
<!--
function transfer() {
setTimeout('location.href="yourname.html"',3000);
}
// -->
</SCRIPT>

Where the 3000 is the delay in milliseconds - change it to the time you require. And then put the function in the <BODY> tag using the onLoad function i.e.

<body onLoad="transfer()">

I like to use the onLoad function so that the delay time starts from when the image is fully loaded - choose what you like. You can similarly do the same thing with frames; just specify the frame name e.g. "location.framename.href". Another method for gen3+ browsers would use the following JavaScript method:

<img src=3D"image1.gif" name=3D"rotate">

<script language=3D"javascript">
function rotateImages() {
setTimeout("document.rotate.src =3D 'image2.gif'",1000); 
setTimeout("document.rotate.src =3D 'image3.gif'",2000);
setTimeout("document.rotate.src =3D 'image4.gif'",3000);
setTimeout("document.rotate.src =3D 'image5.gif'",4000);
setTimeout("document.rotate.src =3D 'image6.gif'",5000);

// keep adding if you need more images

setTimeout("loopRotation()",10000); //   10 seconds
}
function loopRotation() {
rotateImages();
}
rotateImages()
</script>

Does anyone have any dynamic html code to open a new window with a controlled size, no navigation, or location...without having to access the <head>? I've been tasked with coming up with a solution on an e-commerce page that is created with Orgitecture and we cannot access the head. We can dump any HTML within the body, but cannot access anything else.

Here's the easiest way to do just that. The script can be anywhere on the page:

<SCRIPT LANGUAGE="JavaScript">
<!--
function openit(sURL){
newwindow=open(sURL,"newwin","scrollbars=no,
toolbar=no,directories=no,menubar=no,resizable=no,
status=no,width=200,height=200");
}
-->
</SCRIPT>

<a href="smallpage.html" target="_new"
onClick="openit('smallpage.html'); return false;">
Small Page</A>
	

You can control the appearance of the windows, i.e. menus, toolbars, status bar, etc. by adding or omitting those parameters from the open() function.



Up to => Home / WDVL / Forum




Jupiter Online Media: internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info


Legal Notices, Licensing, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers