JavaScript - Custom Pop Up Box Help

Ok,
I have what I think is a javascript question (correct me if Im wrong).

I designed a custom form in DreamWeaver but can't get it to work. Im thinking I need to add some javascript to work.

Heres my form code at the moment:
Code:

<form id="search-form" action="" method="post" enctype="multipart/form-data">
						<fieldset>
							<div class="search-form">					
								<input type="text" name="search" value="Type Keyword Here" onBlur="if(this.value=='') this.value='Type Keyword Here'" onFocus="if(this.value =='Type Keyword Here' ) this.value=''" />
								<a href="#" onClick="document.getElementById('search-form').submit()">Search</a>
                              						
							</div>
						</fieldset>
					</form>

What I want to do is have the user type in something, click on search, and then show up the results on another page named results.


What do I need to do?

Hi all.

I'm developing After Effects scripts using their Extendscript language - essentially just Javascript with various extensions.

I've defined a class, called ScriptSetting, which handles reading and writing of user settings to a prefs file.

For example I create a ScriptSetting variable as follows:
Code:

var mySetting = new ScriptSetting("myScript", "thisSettingKey", 200);

This calls the ScriptSetting constructor function:
Code:

function ScriptSetting(sectionName, keyName, defaultValue) {
	this.sectionName = sectionName;
		
	// Store the type of this setting for conversion later
	this.defaultType = defaultValue.constructor;
	
	// Convert any type to a string value for storing
	defaultValue = defaultValue.toString();
	
	this.keyName = keyName;
	if(!app.settings.haveSetting(this.sectionName, this.keyName)) {
		this.value = defaultValue;
		this.saveSetting();
	} else
		this.value = this.getSetting();
}

This calls some of Extendscript's built-in functions, like app.settings.haveSetting()

This all works fine - I can then later access mySetting's value with, for example alert(mySetting.value) since I've defined value as part of the class constructor function.

However what I'd ideally like to do, if at all possible is to lose the .value part and just be able to access the setting value directly from the setting variable, so in this case alert(mySetting). At the moment, this will just return object Object. Naturally this is because mySetting is an instance of the ScriptSetting object. But I wondered if you can spoof this with a different type (i.e. Array or Number) when accessing it as part of a statement e.g. if(mySetting == 200) { // do something } but still retain all its prototyped methods, e.g.

Code:

mySetting = 300;
mySetting.saveSetting();

Is this possible in Javascript? It's not a deal-breaker - I just want to make my code a bit more readable.

Many thanks in advance,

Christian

Hi,
I want to build a custom calendar using javascript.
On load of page for which date schedule are there, it should show dark black dot at left-top corner of particular date for current month.
There are 3 button below the calendar as prev mnth,create schedule,next mnth.
when prev is clicked it should works same as on load for previous month, similarly for next mnth.

Pls help its urgent.

Thanks

http://becompleteamerica.com/index.p...tact&Itemid=80

It works awesome in all browsers but IE 7 & 8. The custom "alert" is actually a dialog box, with a background fader underneath it, kind of like lightbox.

Any ideas why IE doesn't play nice? Thx

I wanted a custom look for my list menu.
Here is what I came up with...
http://schrene.web44.net/List-Menu.html
I created it using divs with text overflow to get the scroll bar.
Here is my code
Code:

<div id="colorList">
<center>
<div class="mySelect" onClick="myFunction()">Abalone</div>
<div class="mySelect" onClick="myFunction()">Acorn</div>
<div class="mySelect" onClick="myFunction()">Adobe</div>
<div class="mySelect" onClick="myFunction()">Allspice</div>
<div class="mySelect" onClick="myFunction()">Antarctica</div>
<div class="mySelect" onClick="myFunction()">Anthracite</div>
<div class="mySelect" onClick="myFunction()">Aqualite</div>
<div class="mySelect" onClick="myFunction()">Arctic Blueberry</div>
<div class="mySelect" onClick="myFunction()">Arctic Ice</div>
<div class="mySelect" onClick="myFunction()">Arctic Lime</div>
<div class="mySelect" onClick="myFunction()">Cilantro</div>
<div class="mySelect" onClick="myFunction()">Cinnabar</div>
<div class="mySelect" onClick="myFunction()">Clam Shell</div>
<div class="mySelect" onClick="myFunction()">Clove</div>
<div class="mySelect" onClick="myFunction()">Cobalt</div>
<div class="mySelect" onClick="myFunction()">Cocoa Brown</div>
<div class="mySelect" onClick="myFunction()">Concrete</div>
<div class="mySelect" onClick="myFunction()">Copperite</div>
<div class="mySelect" onClick="myFunction()">Cottage Lane</div>
<div class="mySelect" onClick="myFunction()">Designer White</div>
<div class="mySelect" onClick="myFunction()">Doeskin</div>
<div class="mySelect" onClick="myFunction()">Dove</div>
<div class="mySelect" onClick="myFunction()">Earth</div>
</center>
</div>

It worked great but it loses the scroll bar on iPhone.
I want something that works for mobile web as well as traditional..
Does anybody have any ideas how to create a list menu like this???
Any help would greatly be appreciated

I am building a custom slideshow that is pulling data from an xml sheet to create each "Slide" each slide consists of several elements on the xml sheet. I have javascript currently putting together the correct information and creating a new div for each "slide". What I need is to display the first div(slide) and then hit a next button to get to display the next div(slide). Below the first set of code is a snapshot of code simply to illustrate that it is creating the correct divs. Those divs all have content in them I just took the code from firebug.



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>
<body>
<div id="page-wrap">
<button id="nextButton2">next('div')</button>
<button id="prevButton2">prev('div')</button>
<div id="start" style="background: none repeat scroll 0% 0% red;"></div>
<div id="link_Babbling Brook" class="art">
<div id="link_Botany 101" class="art">
<div id="link_Cracking Up" class="art">
<div id="link_Eclipse" class="art">
<div id="link_Equinox" class="art">
<div id="link_Foliage Fluoresced" class="art">
<div id="link_In Vein" class="art">
<div id="link_Microscopic" class="art">
<div id="link_Pickup Sticks" class="art">
<div id="link_Relief" class="art">
<div id="link_Rhubarb" class="art">
<div id="link_Snow Dyed Shibori" class="art">
<div id="link_Symmetry" class="art">
<div id="link_Undulations" class="art">
<div id="link_Willow Mist" class="art">
<div id="link_Wired" class="art">
</div>
</body>
</html>

Javascript code

Code:

if (window.XMLHttpRequest)
	{// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
$(document).ready(function () {
	$.ajax({
		type: "GET",
		url: "sites.xml",
		dataType: "xml",
		success: function (xml) {
			$(xml).find('art').each(function () {
				var id = $(this).attr('id');
				var name = $(this).find('name').text();
				var full = $(this).find('large').text();
				var detail = $(this).find('detail').text();
				var thumb = $(this).find('thumb').text();
				var category = $(this).find('category').text();
				var dimensions = $(this).find('dimensions').text();
				var description = $(this).find('description').text();
				var detailthumb = '<img src= " ' + thumb + ' " />';
                var detailfull = '<iframe name= "portfolio ' + name + ' " src=" ' + detail + ' " iframe/>';
				var large = '<iframe height="482px" width="786px" class="image-frame" name= "portfolio ' + name + ' " src= " ' + full + ' " />';
                $('<div class="art" id="link_' + name +'"></div>').html('<div id="portfolio-content" class="' + name +'"><div class="thumb"><a href= " ' + detail + ' " target= "portfolio ' + name + ' ">' + detailthumb + '<br/></a>(Click for Detail)</div><div class="image">' + large + "</div><div class='text'><h1>" + name + "</h1>" + category + "<br/>" + dimensions + "<br/>" + description + "</div></div>").appendTo('#page-wrap');
			});
			     
     var $currElement = $("#start");
    $currElement.css("background", "red");
 
      $("#nextButton2").click(function () {
 
	  if(!$currElement.next('div').length){
	  	alert("No element found!");
		return false;	
	  }
 
	  $currElement = $currElement.next('div');
 
      $("div,p").css("background", "");
      $currElement.css("background", "red");
      });
      
           var $currElement = $("#start");
    $currElement.css("background", "red");
 
      $("#prevButton2").click(function () {
 
	  if(!$currElement.prev('div').length){
	  	alert("No element found!");
		return false;	
	  }
 
	  $currElement = $currElement.prev('div');
 
      $("div,p").css("background", "");
      $currElement.css("background", "red");
    });
		}
	});
});

Im currently running out of ideas of how else to attack this. This page will be navigated to by clicking on a thumbnail that will then open that particular element. How do I also get it to open to the correct element in the xml sheet. PLEASE HELP

I'm trying to understand how a custom object can call a function within itself. Say I have something like this:

Code:

function functiontest()
{
    
    this.prop1 = '',
    this.prop2 = '',
    this.options = {initiallevels:0},
    this.prop3 = '/blah',
    this.prop4 = true,

    this.function4 = function(x)
    {
        console.log(x)
    },
    
    this.init = function(options)
    {
        this.uid=options.uid
        this.t=options.target
        
        document.getElementById(this.t).addEventListener('click',function(){this.uid.function4(this.t)},false)
        
    }
}

myfun1=new functiontest
myfun1.init({uid:'myfun1',target:'target1'})

myfun2=new functiontest
myfun2.init({uid:'myfun2',target:'target2'})

And the html:

Code:

<html>
<head></head>
<body>

<div id="target1">T1</div>
<br>
<div id="target2">T2</div>

</body>
</html>

I don't know what to put in the part in bold to set the click event listener and have it call function4 within the functiontest object. I've tried a bunch of different things and nothing worked. Please help, thanks!

Hi I have been looking to create custom buttons in an alert box I would like them to say Go and Cancel instead of OK and cancel


Code:

    onClick="if(confirm('Would you like to continue?'))

I have a script that almost does what I need: a simple counter that counts inmigrants remmittences to their home countries.

Counting starts at 150,000,000,000 and it increments by 35,000 every one minute.

The following scripts does the job done but it does not record in a continious manner, it resets each time the page is visited:

Here is the code: ( I hope I get some help to make it: no reseting in each page visit)

--------------------------------------------------
<html>

<head>

<script language="javascript" type="text/javascript">
<!--

var startCount = 150000000000;
var addPerMin = 35000;

function ProcessCounter() {
document.getElementById('cnt').innerHTML = addCommas(String(cnt++));
setTimeout('ProcessCounter()', SetTimeOutPeriod);
}

function PutSpan() {
document.write('<span id="cnt"></span>');
}

function addCommas(nStr) {
var rgx = /(\d+)(\d{3})/;
while (rgx.test(nStr)) {
nStr = nStr.replace(rgx, '$1' + ',' + '$2');
}
return nStr;
}

var cnt = startCount;
var SetTimeOutPeriod = Math.floor((1000 * 60) / addPerMin);
function displayCounter() {
PutSpan();
ProcessCounter();
}

//-->
</script>

</head>


<body
<font size="30">
<script language="javascript" type="text/javascript">javascript:displayCounter();</script>
</font>

</body>

I'm hoping someone can help me out on this. I know that the input "file" type can't be customized very well using css, so I figured I might try to make my own with javascript. The only problem is, I don't know too much about javascript. So can someone please point me in the right direction on how to make my own custom file upload box in javascript that works the same way as the default one works (so I don't have to edit my PHP coding). Thank you so much!

Also, heres something I'd like to achieve:


The box I'd like to create is at the top, while the default one is at the bottom.

Hi all,

The question is hopefully relatively simple. if I have an object say
Code:

[
var SampleObject = function(id){
  SampleObject.id = id;
  SampleObject.age= 22;
}

Is there a way to create an event that triggers every time the age member value changes?

Thanks
Ollie.

Hi there I'm trying to use custom events in jQuery to emulate a keyup event. Basically the main keyup event would trigger multiple custom events that emulate keyup events. That way I can bind and unbind these events to/from the DOM without unbinding other events that may be attached to the main keyup event. Here's a non-working example, any explanation as to why this doesn't work would be greatly appreciated!

Ps. I think the problem is because the keyCode from the keyup event is not passed to the the trigger, but I don't know how to make that work.
Code:

var flag = 0;
$(document).bind("keyup", function(e) {
    if(flag) {
        $(this).trigger("customkeyup1");
    } else {
        $(this).trigger("customkeyup2");
    }
}).bind("customkeyup1", function(e) {
	if(e.keyCode == 13){
    	     alert('customkeyup1');
	     $(document).unbind("customkeyup1");
	}
}).bind("customkeyup2", function(e) {
	if(e.keyCode == 13){
    	     alert('customkeyup2');
	}
}); 

$("#foo").click(function() {
    flag = flag == 1 ? 0 : 1;
});

Hello,

I am trying to make a custom select menu. Here is what I have so far: http://mikewgd.com/wp-content/portfo...custom-select/ Im just stuck at getting the <li> to become selected and etc...

I am using this as reference: http://v2.easy-designs.net/articles/replaceSelect/ -- Im not using there script exactly Im doing it a different way. Im doing it more as a dropdown menu

Code:

<ul class="select">
    <li class="selected">
        cheese
        <ul class="drop">
            <li>milk</li>
            <li>bread</li>
            <li class="selected">cheese</li>
            <li>pickles</li>
            <li>salsa</li>
        </ul>
    </li>
</ul>

I am working on a custom accordion. A type 2 accordion works but type 1 and 3 don't work. Does anyone know how to correct this syntax?

Also, if you see any ways to make this code better, please post your fixes in this post
Code:

/*
To use these, insert your content between a div tag.
For example:
<div id="2011" style="display: none">
This is the content in the accordion
</div>
You can have as many of these on the page as you wish but they all must have a different div tag.
You will be creating a different button for each div tag. To make an item display on page load, change that div tag display from "none" to "inline".

For the button that toggles the accordion:
<a href="javascript:accordion('2011', '2', eventyear)">2011</a>

Here is what all of these variables do:
1. Id of the div tag you want to toggle
2. The type of accordion you want
3. Only needed if it is a type 1 or 2 accordion, this refers to an array of all of the other div id's in the accordion.

If you are using a type 1 or 2 array, create a array under the arrays comment of all of the div id's in your accordion.

Types:
1 = One open at a time. Open and close
2 = One open at a time. Open no close
3 = No limit. Open and close. 3 doesn't use an array
*/

//Arrays;
var eventyear=new Array("2011","2010","2009");
var months=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

function accordion(click,type,array) {
var click = document.getElementById(click);
if ((click.style.display = "inline") && ((type == "1") || (type == "3"))) {
	click.style.display = "none";
} else if ((click.style.display = "none") && ((type == "1") || (type == "2"))) {
	var c;
	for(c in array) {
		document.getElementById(array[c]).style.display = "none";
	}
	click.style.display = "inline";
} else if ((click.style.display = "none") && (type == "3")) {
	click.style.display = "inline";
}}

Currently we have an implementation of Lightbox (not sure which version) on our site that aids in the process of a voting system. I wasn't around when it was created, and after creating a new version of the site, have no idea how to re-integrate it so I was hoping some seasoned JS people out there can help me.

Now what happens is that people go to the voting page where the list is populated with entries from a mysql db. The names are clickable and, when clicked, a lightbox should show up with the information about the person and have a vote and close button. The vote button, when pressed, should tick a single vote back in the mysql db, and then take them to a "Thank you for voting, here are the current top 10" type page. That's the overall function.

Here's what information I do have so far:
In the root directory there's a folder named templates Inside of that, there's a folder called Lightbox inside of Lightbox, there are 3 folders [css, images, and js] The *.js folder has [builder.js, effects.js, lightbox.js, prototype.js and scriptaculous.js] inside
When clicking on a name, however, it just takes me to the image as if it's directly linked instead of opening up the Lightbox. So I need some help getting this to work.