JavaScript - Showing And Hiding Layers With Javascript And Css (help)

Hey guys..... I've built a tool where users can search for something & the results show up in a select list as selectable options..... sometimes the results can take a few seconds to load depending on how many results there are... so I was attempting to show some "Results are loading" text when they search, & then hide it when they are displayed.

However for some reason it's not working correctly...... both commands don't appear to work until the select list options have loaded & hence rendering them redundant.... I have tried putting them inside separate functions but no change in the behavior.

What basically happens is I press the button to search & it searches & once the results show up so does the loading text.... however if I include the hide text command then the text doesn't show at all as it's hidden as soon as it's shown.

Here is the code I am using..

PHP Code:
function searchCats(text) {
    
    // Set URL for ajax request
    var url = 'search_cats.php?search_text='+text;
    
    // Set up element we're modifying
    var results = document.getElementById('cat_list');
    
    // Trim string
    text.replace(/^ss*/, '').replace(/ss*$/, '');
    
    if (text.length < 3) {
        alert('Please enter a search string more than 2 characters.');
        return;
    }
    
    // Send the request, giving it an anonymous function that acts as the oncomplete event
    
    ajaxRequest(url, (function(ajaxResponse) {

        /* Deal with results */
    
        // First we remove all current childs
    
        while(results.hasChildNodes()) {
            while (results.childNodes.length >= 1) {
                results.removeChild(results.firstChild);  
            } 
        }
    
        if (ajaxResponse == '') {    
        
            // Display no results text
            document.getElementById('no_results').style.display='block';
        
        } else {
        
            // Hide no results text
            document.getElementById('no_results').style.display='none';
        
            // Display loading text
            document.getElementById('loading_results').style.display='block';        
        
            // Check for occurence of cat seperator (if not there then we know we only have one results)
            var sep_found = ajaxResponse.indexOf('!@!');
        
            if (sep_found === -1) { // One result only
            
                // Seperate ID & cat name
                var parts = ajaxResponse.split('^@^');
            
                // Create option element
                var option = document.createElement('option');
            
                // Add attribute
                option.setAttribute('value', parts[0]);
            
                // Create text node
                var textNode = document.createTextNode(parts[1]);
            
                // Append text node to option element
                option.appendChild(textNode);
            
                // Now append option element to select list
                results.appendChild(option);
            
            } else {
            
                // Seperate cat data
                var cats = ajaxResponse.split('!@!');
                
                // Loop through cat data
            
                for(i = 0; i < cats.length; i++) {
                
                    // Seperate ID & cat name
                    var parts = cats[i].split('^@^');
            
                    // Create option element
                    var option = document.createElement('option');
            
                    // Add attribute
                    option.setAttribute('value', parts[0]);
            
                    // Create text node
                    var textNode = document.createTextNode(parts[1]);
            
                    // Append text node to option element
                    option.appendChild(textNode);
            
                    // Now append option element to select list
                    results.appendChild(option);                
                
                }
            
            }          
        
        }

    })); 

    // Hide loading text
    document.getElementById('loading_results').style.display='none';

} 


Thanks guys!

Hello to all. I am a new to the forum and new to Javascript, so please be gentle. I have a web page in which I am using a script to toggle between div tags. I learned how to set it up for only a few divs, but want to use more than 10+ div tags with the corresponding buttons on the side. When I set it up with 11 buttons, the 10th button does not work, but all of the single digit buttons do. (The 11th button is going to be a hyperlink eventually.) Here is the code for anyone who can help:

<code>
<script language="javascript" type="text/javascript">
function Button(obj)
{
var cls = obj.className;

if(cls!='Btn_Selected')
{
if(cls=='Btn')
{
cls = 'Btn_Highlight';
}
else
{
cls = 'Btn';
}
}

obj.className = cls;
}

function select(obj)
{
for (var x = 1; x <= 10; x++)
{
document.getElementById("Button"+x).className = 'Btn';
document.getElementById("Content"+x).style.display = 'none';
}

obj.className='Btn_Selected';
var tmp = obj.id;
var num = tmp.substr(tmp.length-1);
document.getElementById("Content"+num).style.display = 'block';
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</code>

Hopefully I was clear with what I am looking to achieve. If I need to attach additional code or a link to the web page, let me know. Any help would be greatly appreciated. Thanks All in advance, ScottoNM

Hello,

Could anyone help me? I'm looking for a script that remembers, re-sets, and can set to the previous
state the show or hide behavior of a layer upon return to the page.

I have an image gallery that's in 3 categories: wedding, bridal shower and save-the-dates. When viewing an image in the bridal shower or save-the date galleries and I press on the link I created titled "Back to Gallery" it does not return me back to the Bridal Shower or Save-the-dates gallery (whichever I'm in) it returns me to the main Invitations gallery page. So bascially I'm looking for a script that will write to a cookie what layers are shown and what are hidden so when you return it reads the cookie and displays the last layers you had showing before leaving the page.

I have a store that sells certain products. When you add a product to the cart and go to view your cart you can estimate shipping costs. It will list different shipping methods and the cost to ship them. However, there is one shipping method called "Request a Quote" that has a price value of 0.01. This can confuse customers because they sometimes think that the shipping is only $0.01 when it really isn't. So I want to just remove this value, but still list pricing for all the other shipping methods.

I know I can just do this using CSS and setting the display to none. But am having trouble getting it to work.

Here is the link to the shopping cart page: Folding Chairs and Tables.com - Shopping Cart

If you add a product and run the 'estimate shipping and tax' you will see what I'm talking about. How can I remove this value? Any help would be really appreciated.

Here is a picture of what the table looks like when you calculate the estimate shipping costs:


Thank You

I am trying to make an order form I am working on accessible for users who have javascript turned off in their browser, and to do this I would like to hide a div if JS is disabled.

Searching the Web has led me to think that styling the div to not display is the way forward and then using JS to display it. It is the JS bit I am struggling with!

The div in question is a set of radio buttons to allow a purchaser to choose how many gift memberships they want to buy:

Code:

<div id="giftmember-buttons" style="display:none";>
<h2 class="threepeaksform">How many gift memberships do you wish to purchase?</h2>
<fieldset class="threepeaksform">
<legend>Please select the number of people you are buying a gift membership for using the buttons below.</legend>
<div class="generalcontactform-group">
<label>1</label><input name="numbergift" type="radio" value="1" checked="checked" onClick="showhidefields(this.value)" />
<label>2</label><input name="numbergift" type="radio" value="2" onClick="showhidefields(this.value);"/>
<label>3</label><input name="numbergift" type="radio" value="3" onClick="showhidefields(this.value);"/>
<label>4</label><input name="numbergift" type="radio" value="4" onClick="showhidefields(this.value);"/>
</fieldset>
</div>
<br />
</div>

I have used a JS switch function lower down the page but that relies on onClick to make it work, I want the above div to display as the page loads - would I do this with the switch function and onLoad applied to the body to make the div display when JS is on?

The full page is at: http://yd97.peak1.titaninternet.co.u...sform-gift.htm

Thanks for any help.

Cheers

Stu

I am in the progress of building a new website; the layout and stuff is already done for the most part, but I am having a problem with the two order forms on my website. Well not the forms themselves, more with how they appear (and disappear).

Like stated I have 2 forms on my website. When coming to my website they should be hidden (standard). When someone wants to order they press the link for order form A or form B.

From here I am running into several problems.

Problem #1
I want each form only to appear when they click on a link.
For example; when a person clicks on link 1 form A appears. If they click on link 2 form B appears.

Problem #2
If form A appears and they click on link 2, than form A should disappear and form B should be visible and the other way around.

Problem #3
Is it possible to load a page within the DIV for example I want form B to include extra-info.php. Is this possible?

If I understand correctly the above would be possible with Javascript and with the use of hidden DIV's. But I really don't know much about Javascript to pull this of myself.

Anyone in here who can help me out and provide me with a working example?

I would be very grateful...

If something is not clear, please do no hesitate to ask me...

I want to hide my JavaScript but when I checked the FAQ of this forum, I saw that it said that it isn't possible.

But how did worldometers.info did it? Because I cant find the JavaScript source.

I am really new to coding and am trying to include a flowchart that I have created on my site. There is a series of 5 questions with 2 possible answers for each question. Can anyone help me with some coding that would let me show only the first question and based on how they answer that, the flow chart would open up to the second question and once they answer the second question, it opens up to the third question and so on?

Hi I'm making a php/html page and using javascript to keep a count for me.

Code:

<script type="text/javascript">
			var i=0;
			}</script>

.
.
.

<form action="index.php" method="GET">
					<input name="game_button"  id="guess1" type = "submit" name="1" value="1" style="height: 50; width: 50; font-size: 16" onClick = "i=i+1;"/>	</form>

<input type="button" onClick = "alert(i);"/>

The last button is just a test button, which will tell me what the value of "i" is, but I'm not getting anything when I cllick that button.
However if I change the onClick from alert(i), to alert('i') it will alert me a string, so I know the javascript is working. Any ideas?

Hi all. Can someone tell me why I can select both HTML AND another radio button, but when I unselect, and select a # of 1 through 4, I can switch between the radio buttons, but I can't if I select HTML first?

Also, what's wrong w/ this code?

Code:

<html>
<head>
<title>Webpage Teacher - V 1.0</title>
</head>
<body>
<script>
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
	if(!radioObj)
		return;
	var radioLength = radioObj.length;
	if(radioLength == undefined) {
		radioObj.checked = (radioObj.value == newValue.toString());
		return;
	}
	for(var i = 0; i < radioLength; i++) {
		radioObj[i].checked = false;
		if(radioObj[i].value == newValue.toString()) {
			radioObj[i].checked = true;
		}
	}
}
function getCheckedValue(radioObj) {
	if(!radioObj)
		return "";
	var radioLength = radioObj.length;
	if(radioLength == undefined)
		if(radioObj.checked)
			return radioObj.value;
		else
			return "";
	for(var i = 0; i < radioLength; i++) {
		if(radioObj[i].checked) {
			return radioObj[i].value;
		}
	}
	return "";
}
</script>
<form name="radioExampleForm" method="get" action="">
<p>
<label for="code1"><input type="radio" value="HTML" name="code" id="code1"> HTML</label>
&nbsp;<label for="number0"><input type="radio" value="0" name="number" id="number0"> Zero</label>
&nbsp;<label for="number1"><input type="radio" value="1" name="number" id="number1"> One</label>
&nbsp;<label for="number2"><input type="radio" value="2" name="number" id="number2"> Two</label>
&nbsp;<label for="number3"><input type="radio" value="3" name="number" id="number3"> Three</label>
&nbsp;<label for="number4"><input type="radio" value="4" name="number" id="number4"> Four</label>
</p>
<p>
<script>
var thevar='';
if(document.forms['radioExampleForm'].elements['number']){
thevar='number';
}else{
thevar='code';
}
document.write(''
+'<input type="button" onclick="alert(\'Checked value is: '+getCheckedValue(document.forms[\'radioExampleForm\'].elements[\''+thevar+'\']));" value="Show Checked Value">');
</script>
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['code'], 'HTML');" value="Set Checked to HTML">
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '1');" value="Set Checked to One">
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '2');" value="Set Checked to Two"> 
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '3');" value="Set Checked to Three">
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '4');" value="Set Checked to Four">
&nbsp;<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], ''),setCheckedValue(document.forms['radioExampleForm'].elements['code'],'');" value="Uncheck All">
</p>
</form>
</body>
</html>

I simply want it to display the Check Value button and detect 2 different id's for 2 different radio buttons (which is 'code' and 'number')

Thanks!

I have a javascript banner on my site which is working perfectly. however if the user goes to my domain without www. infront of the address the banner is non existent. I'm pretty sure there should be some kind of option for this on my hosts control panel but I can't find anything on it however. (bluehost)

or is there something else that must be done?

Thanks for any help.

Hello guys!
I have a jquery fancybox that pop's up on exit (using onbeforeunload), now i want it to show only once so i tried doing it with cookies but i just can get it to work. this is my script so far hope you can help me with this, Thanks!
Code:

<script type="text/javascript">
	function PopIt() 
	{
		if (document.cookie.length == 0)
		{
			var exdate=new Date();
			exdate.setDate(exdate.getDate()+7);
			document.cookie="cook=yes" + ";expires="+exdate.toUTCString();

			$("a#trigger").trigger('click');
			window.onbeforeunload = UnPopIt;
			return "Before you leave:\nPlease take a few seconds to answer 2 questions\nso we can better assist you and others in the future. \nThanks!"; 				
		}
	}
	
	function UnPopIt()  { /* nothing to return */ } 
 
	$(document).ready(function() {
		window.onbeforeunload = PopIt;
 
		$("a#trigger").fancybox({
			'hideOnContentClick': false,
			'showCloseButton': true
		});
 
		$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
	});	
</script>

HI so sorry to bother you with what seems to be a simple problem i am just getting back into my coding and i can not see what i am doing wrong. i have my folder with index page in named "tester_fixed.html" and then a folder for images where i have place header1 header 2 and header 3 . i downloaded a script from http://www.javascriptkit.com/script/...bleslide.shtml
and edited my images in and i think i mucked up as they are not showing. please could you tell me what i am doing wrong and point me in the right direction.
Many thanks
Bec
the code:
Code:

<script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['images/header1.jpeg', '', '']
ultimateshow[1]=['images/header2.jpeg', 'http://www.dynamicdrive.com', '_new']
ultimateshow[2]=['images/header3.jpeg', 'http://www.codingforums.com', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth="240px" //set to width of LARGEST image in your slideshow
var slideheight="940px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>

<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>

thanks

Hello everyone,

I am trying to make a canvas element display an image with some text on using canvas.drawImage and canvas.fillText. Only problem is my code is generating a very odd and hard to debug error.

Thanks in advance,

Alex

Code(JS):
Code:

function runstuff() {
	canvasthing = document.getElementById('1');
	context = canvasthing.getContext('2d');
	purple = new Image();
	purple.src = 'img/buttonpurple.png';
	purple.onload = function() {
    context.drawImage('purple', 0, 0);
	};
	context.font = '16px Vani';
	context.textBaseline = 'top';
	context.fillText('Test', 26, 24);
}

Code(html):
Code:

<!doctype html>
<html lang="en">
	<head>
		<title>POB.G</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css">
		<script type="text/javascript" src="script.js">
		</script>
	</head>
	<body onload="runstuff()">
	<canvas id="1" width="127" height="128"></canvas>
	</body>
</html>

Error:
Code:

Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]"  nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"  location: "JS frame :: file:///C:/Users/*BlahBlahBlah/script.js :: <TOP_LEVEL> :: line 7"  data: no]

Hi there

I've just completed a lovely slideshow script on my homepage. It works great in Firefox, but doesn't display at all in IE.

It's on a live test page he
http://www.modern-wedding-ideas.co.uk/index2.html

I'm sure I'm just missing something really simple. Any help would be greatly appreciated.

Also, this is a copy and paste job: I'm a newbie to javascript! So please be gentle.

Many thanks
Nicola