JavaScript - Customize Popup Ex. Color, Title, Location

Hi
I need to make a vertical menu bar where the sub menu that flies out on the right always starts at the top rather than next to its parent. I used this script
http://www.javascriptkit.com/script/...icalmenu.shtml

at the moment lists look like this (bold is selected option)

1
2 1
3 2
4 3 1

what i want is this to happen

1 1 1
2 2
3 3
4

Alternatively, does anyone know how to get the vertical spry menubar from DW to work in Safari?
To get an idea of what I want, see this working version (not working in Safari though) in Firefox

http://www.photoshopcourselondon.com...0open%202.html

thanks

mikael

i have been trying to edit the below code so i can validate text fields and numeric fields but whenever i try it bypasses all validation and executed the php script.
Can someone please let me know what i'm doing wrong

fld = form.elements['name'];
if ( !isValidText( fld.value ) ) {
msg = 'The name is not valid.';
addValidationField(fld);
addValidationMessage(msg);
}



function isValidText(val) {
var re = /^\s{1,}$/g;
if ((mytext.value.length==0) || (mytext.value==null) || ((mytext.value.search(re)) > -1)) {
return true;
}else {
return false;
}
}


Code:

   
fld = form.elements['email'];
    if ( !isValidEmail( fld.value ) ) {
        msg = 'The email address is not valid.';
        addValidationField(fld);
        addValidationMessage(msg);
    }

the above code calls:
Code:

function isValidEmail(val) {
    var re = /^[\w\+\'\.-]+@[\w\'\.-]+\.[a-zA-Z]{2,}$/;
    // /^[a-z0-9]([a-z0-9_\-\.]*)@([a-z0-9_\-\.]*)(\.[a-z]{2,4}(\.[a-z]{2}){0,2})$/i;
    if (!re.test(val)) {
        return false;
    }
    return true;
}

the entire script is as follows

Code:

/* order form code from dyn-web.com */
// onchange of qty field entry
function getProductTotal(field) {
    clearErrorInfo();
    var form = field.form;
    if (field.value == "") field.value = 0;
    if ( !isPosInt(field.value) ) {
        var msg = 'Please enter a positive integer for quantity.';
        addValidationMessage(msg);
        addValidationField(field)
        displayErrorInfo( form );
        return;
    } else {
        var product = field.name.slice(0, field.name.lastIndexOf("_") ); 
        var price = form.elements[product + "_price"].value;
        var amt = field.value * price;
        form.elements[product + "_tot"].value = formatDecimal(amt);
        doTotals(form);
    }
}

function doTotals(form) {
    var total = 0;
    for (var i=0; PRODUCT_ABBRS[i]; i++) {
        var cur_field = form.elements[ PRODUCT_ABBRS[i] + "_qty" ]; 
        if ( !isPosInt(cur_field.value) ) {
            var msg = 'Please enter a positive integer for quantity.';
            addValidationMessage(msg);
            addValidationField(cur_field)
            displayErrorInfo( form );
            return;
        }
        total += parseFloat(cur_field.value) * parseFloat( form.elements[ PRODUCT_ABBRS[i] + "_price" ].value );
    }
    form.elements['total'].value = formatDecimal(total);
}

function finalCheck(form) {
    clearErrorInfo();
    var msg = '', fld;
    // final check of quantity entries' validity
    for (var i=0; PRODUCT_ABBRS[i]; i++) {
        var cur_field = form.elements[ PRODUCT_ABBRS[i] + "_qty" ]; 
        if ( !isPosInt(cur_field.value) ) {
            msg = 'Please enter a positive integer for quantity.';
            addValidationField(cur_field)
        }
    }
    
    if (msg) { // one msg for qty flds
        addValidationMessage(msg);
    }
    
/////////////////////////////////////////////////////////////////////
//  add check on email and any other required fields here
    fld = form.elements['email'];
    if ( !isValidEmail( fld.value ) ) {
        msg = 'The email address is not valid.';
        addValidationField(fld);
        addValidationMessage(msg);
    }
    
    

//
/////////////////////////////////////////////////////////////////////
    
    if (msg) { // if any error msg's, display and cancel submission
        displayErrorInfo( form );
        return false;
    }
    
    // check if a quantity entered
    if (form.elements['total'].value == 0) {
        msg = "You haven't ordered anything.";
        addValidationMessage(msg);
        displayErrorInfo( form );
        return false;
    }
    return true;
}

function isValidEmail(val) {
    var re = /^[\w\+\'\.-]+@[\w\'\.-]+\.[a-zA-Z]{2,}$/;
    // /^[a-z0-9]([a-z0-9_\-\.]*)@([a-z0-9_\-\.]*)(\.[a-z]{2,4}(\.[a-z]{2}){0,2})$/i;
    if (!re.test(val)) {
        return false;
    }
    return true;
}

// onclick
function checkValue(field) {
    if (field.value == 0) field.value = "";
}

// onblur
function reCheckValue(field) {
    if (field.value == "") field.value = 0;
}

function isPosInt(val) {
    var re = /^\d+$/
    if ( !re.test(val) ) {
        return false;
    }
    return true;
}

// format val to n number of decimal places
// modified version of Danny Goodman's (JS Bible)
function formatDecimal(val, n) {
    n = n || 2;
    var str = "" + Math.round ( parseFloat(val) * Math.pow(10, n) );
    while (str.length <= n) str = "0" + str;
    var pt = str.length - n;
    return str.slice(0,pt) + "." + str.slice(pt);
}

I am looking to use a similar method as facebook chat does, where it alternates between the original title text and 'friendsName has sent you a message!...'

how can I do this ?

Hi,

I'm using the following Javascript code to show a div layer depending on the URL

Code:

<script type="text/javascript">

if (location.href.match(/folder/)) {

document.getElementById("div-layer").style.display="block";

}

</script>

This works perfectly when I visit http://www.domain.com/folder but I do not want it to match any subfolders beneath /folder, for example:

http://www.domain.com/folder/sub-folder
http://www.domain.com/folder/sub-folder2

etc.

Does anyone know how I can modify the code to only match /folder or /folder/ and no subfolders beneath it?

Thank you in advance.

What are the differences between results of these two.


Code:

window.location.hostname

or
Code:

document.location.hostname

Hi,

I'm kinda hoping this is possible but haven't found any reference to it...

I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser.

Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup?

Any assistance would be appreciated. :-)

Hi! New to JS... have been trying to rework this to call additional, independent sets of colors to cycle through (so it would loop thru a set of grays, a set of primary colors, etc). I would use perhaps a different function name in the HTML to call different sets of colors. If this is more complex than I think it is, I think 3 sets would be plenty. Would be hugely grateful for any help, thanks so much in advance. (demo link of script in current state at bottom)


Code:

<html><head><title></title>
<script language=javascript>

colors = ["#cacdca", "#b2b4b2", "#969896", "#7d7f7d", "#ffff00"];

cRGB = [];

function toRGB(color){
   
var rgb = "rgb(" + parseInt(color.substring(1,3), 16) + ", " + parseInt(color.substring(3,5), 16) + ", " + parseInt(color.substring(5,7), 16) + ")";
   
return rgb;
}

for(var i=0; i<colors.length; i++){
cRGB[i] = toRGB(colors[i]);
}

function changeColor(target){

var swapper = navigator.appVersion.indexOf("MSIE")!=-1 ? toRGB(document.getElementById(target).style.backgroundColor) : document.getElementById(target).style.backgroundColor;

var set = false;

var xx;

for(var i=0; i<cRGB.length; i++){

if(swapper == cRGB[i]){   

if(((i+1)) >= cRGB.length){
            
xx = 0;        
}else{
xx = i+1;
}

document.getElementById(target).style.backgroundColor = colors[xx];
		document.getElementById(target).style.backgroundImage.show;

         
set = true;
i=cRGB.length;
}
}
   

set ? null : document.getElementById(target).style.backgroundColor = colors[1];
}

</SCRIPT>

</head>
<body bgcolor="#333333">
<div>
<div id="a1" onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background1.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: none"></div>
<div id=a2 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background2.gif); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div>
<div id=a3 onmouseover=changeColor(this.id);
style="left: 120px; background-image: url(background3.png); width: 180px; background-repeat: no-repeat; position: relative; height: 80px; background-color: #666633"></div></div>

</body>
</html>

Demo:
http://theclutch.com/rollover_color_..._bgndimage.htm

Hi,

I'm faced with a problem trying to set background color under IE7. I have the following Javascript:

Code:

function showLayer793BKColor(id)
{
  var txtObj = document.all(id);
  if (txtObj.style.display == 'none')
  {
       txtObj.style.display = ''
       txtObj.style.backgroundColor 	= 'grey';
  }
}

function hideLayer793BKColor(id)
{
  var txtObj = document.all(id);
  if ( txtObj.style.backgroundColor == 'grey' )
    txtObj.style.display = 'none';
}

These functions are used to show or hide div blocks.
These blocks are, for example, specified in the following way:

Code:

<div id="l_gct5tekst" style="display:none">
	<b>GCT 5. Eerste verkenning problematiek</b>

and, for example,

Code:

<div id="l_Keuze" style="display:none">
	<br/>
	<b>GCT 5</b>
	<br/>
</div>

The whole configuration works smoothly when using IE8. However, when using IE7 I get an error msg like "Invalid value for property". When I use the Color propert iso the BackgroundColor property I get no error anymore but of course I don't have a background color anymore then.

In what way can I specify the use of a background color under IE7 ? Or is just not possible in one way or the other.

Furthermore, what more differences between JS under IE7 and IE8 do I have to take into account ?

Do I also have to rewrite my div block in some way (using some attribs ?) to cope with IE7 ?

Thanks in advance,

Diederick van Elst

Hi there im making a estate agency website for my college assignment and have come across a problem when using windows.location for some reason it is not working

what i want to do is go to a page when searching the right content and then clicking the submit button

so when i type hello for example into the text box i want to get relocated to renting1.html page
but for some reason it is not working i know that the variable is set up right as if i change the content of the if statement to an alert then that works

can anyone spot a problem in my code snipit

<form id="form1" method="post" action="" >

<label>Search House Name:
<input name="Search" type="text" id="Search" size="50" />
</label>

<label>Search
<input type="submit" name="Search2" id="Search2" value="Submit" onclick="testResults()" />
</label>


<script type="text/javascript">
function testResults()
{
var TestVar = form1.Search.value;

if(TestVar=="hello")

window.location = "renting1.html";

else
alert("Invalid");
}

</script>


thanks for any help
dave

Hello
In phase of my deployment I send the user a window from a servlet and inorder to communicate with an applet already loaded in another window in the browser I thought I could set the window.opener.location="${formbean.property}"; and it partly works, it get set, I see the new window flash, but it then executes that url. Two questions?
1. setting the window.opener.location in an onLoad() should not force a post back to the server, correct? I am just trying to keep that window I want up there and set an internal property so I can access the applet in the other window. Trying to make this "synthetically" a child of that page opened with the applet so I can call the applets methods simply.
2. Is there another way for a new browser window to directly access an applet in another page? I could go the route of making a probe applet and hoping they share the same JVM, (JRE1.6.0.25) access it that way. Is/how that the way to do it?

If you go to: http://ocmd.freehostia.com/tbb/

You'll see that when the user presses enter, it goes to another page. Currently, in the scripts part of my page is this:

Code:

    function checkKey()
    {
        if (window.event.keyCode == 13)
        {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'horse.ogg');
audioElement.play();
window.location = "google.html";
		return false;
        }
    }

Notice how I'm trying to play an audio file? Well, I need for the window.location to go after the audio file plays, or alternatively for it to be played after xx milliseconds. Thank-you.

Hi,

I have a requirement of parent and child window.
Onclick of a link on the parent page i am opening a child window with "window.location".
On the child window i am displaying a jsp with the overlap screen on the parent screen using DOJO. After doing all the action on the child page when i am about to close the child window which is having button like cancel,close i am hiding the overlap screen. But my actual concern is when i close the child window, my parent page's scroll bar is scrolling down to the bottom of the page which should not happen and it should be there at the top of the page. How can i acheive this behaviour. Can anyone help me in this.

Thanks in advance

every time i try something it doesn't work for me god why is this javascript so hard to make it work... anyway, i just followed the guidelines to pass values from one page to another using ? and it simply, like always, DOES NOT work

Code:

<HEAD>

...
...

<script type="text/javascript">
<!--
function sendme(){
if (document.form1.question[0].checked == true) { whichone = 1; }
if (document.form1.question[1].checked == true) { whichone = 2; }
if (document.form1.question[2].checked == true) { whichone = 3; }
if (document.form1.question[3].checked == true) { whichone = 4; }
if (document.form1.question[4].checked == true) { whichone = 5; }
if (document.form1.question[5].checked == true) { whichone = 6; }
if (document.form1.question[6].checked == true) { whichone = 7; }
if (document.form1.question[7].checked == true) { whichone = 8; }
myString = qst1 + "=" + whichone;
location.href = "Poll_Jan2010_02.html" + '?' + myString;
}
//-->
</script>
</head>


<body>
<div align="center">
  <p><img src="63/images/poll_logo.jpg" width="655" height="92">
</p>
  <p>&nbsp;</p>
  <h2><u>Question 1</u></h2>
  <p><strong>Bla bla bla bla...</strong></p>
  <form name="form1">
  <table width="60%"  border="0">
    <tr>
      <td><input name="question" type="radio" value="Grill">
        option 1</td>
    </tr>
    <tr>
      <td><input name="question" type="radio" value="Club">
      option 2</td>
    </tr>
    <tr>
      <td><input name="question" type="radio" value="Crepes">
      option 3</td>
    </tr>
    <tr>
      <td><input name="question" type="radio" value="Sandwiches">
      option 4</td>
    </tr>
    <tr>
      <td><input name="question" type="radio" value="Hotdog">
      option 5</td>
    </tr>
    <tr>
      <td><input name="question" type="radio" value="Special">
      option 6</td>
    </tr>
    <tr>
      <td><input name="question" type="radio" value="Refreshments">
      option 7</td>
    </tr>
    <tr>
      <td><input name="question" type="radio" value="Salads">
      option 8</td>
    </tr>
  </table>
  </form>
  <p>
    <a href="#null" class="style2" onclick="sendme();">Continue &gt;</a>
  </p>
</div>
</body>

Can someone tell me how to change the following code so that it will open in a new window? (like target="_blank" in html)

Code:

if (phone_num=="1234")
document.location="http://mysite/formgov/makeadifference.html";

I have searched for hours trying to find a solution and have tried many things, nothing has worked.

The example shown above is just one of many urls that I want to change.

Any help would be appreciated. Maybe this is not possible. I know nothing about javascript.

We list our branches on our webpage, but I want people to be able to search for the nearest ones.

This is the form I built as a place holder... but I'm sure I need a "little something" to go along with it. ha ha ha.

Code:

<form class="login">
		  &nbsp <label class="white"><b>Zip Code</b><br />
		  &nbsp <input name="zip" type="text" maxlength="5" size="10"/>
		  </label>
  	
	    <br /><br />
  
		<label>
    
	    &nbsp <input type="submit" name="submit" id="submit" value="Go!" class="btn" />
	    </label>
		</form>

I would like to sort them in order of closest to furthest (or even just display the top 5)... where would I find something like that?

I seem to be having a difficult time with my searches in google and otherwise.

Anyone have any ideas?