JavaScript - Selector Not Hiding And Showing On Click Function

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!

hi, on my site, http://www.jbiddulph.com/john-drag.html when i move the box within the box, the results are only shown when I click on the firebug icon?!

Can someone please help me here? I would like the results to be shown OnMouseUP

thanks

I am trying to create a function that clicks a button within an iframe.

I hope this is all that is needed....
i figured something like this but i know i’m wrong cause it doesn’t work.

function close_it(){
var s = document.getElementById(“messagesBox”);
var go = s.getElementByClassName(“box_title”);
go.click();
return false; }

Here’s the Dom Tree.
<div class="messagesBox" id="messagesBox" style="">
<div style="" class="birdie clearfix">
//The 401 is differant everytime.
<div class="box_blue">
<div class="box_top ">
<a href="#" onclick="message.callNextInContainer($(this));return false"
class="box_title" style"">X</a>

Any help would be much appreciated.

I need to simulate a mouseclick on a hyperlink with a function.
Any idea if this is possible ?

Hi guys

I kinda needed help on jQuery/ javascript..

Here's the test page..

http://development.andrewfopalan.com/devpage/test.html#

what I'm trying to do is like this..

http://trailers.apple.com/trailers/s...bandofmisfits/

the movie box...

so far, I have made the cosmetics.. but the thing I was going to ask was..

when you click on the down arrow.. a popup dropdown list is going to show.. the problem is I am copying the same effect as the one with apple..

when you click outside of the popup dropdown list, the dropdown list should be fading out... but it wouldnt...

I tried using doing.. it like this

Code:

$("#wrap" ).click(function () {
	$(".dropdown").fadeOut();
	
	});

but the problem is.. whenever I click the down arrow button.. it continues to fadeout.. as soon as it fadesin...

how should I do this? please guide me..

everything works just fine.. just this one.. I am really lost.. i

the whole jquery code is in the page sirs... please help me

pretty new to javascript/jquery..

Hi, hope someone can help. doing some work with google maps api. I have a function called codeaddress, this is triggered by a search button.
is there a way to add js to make an automatic click on results after search ?
here is code of function..

Code:

function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
		map.setZoom(10);
      } else {
        alert("City was not found: " + status);
      }
    });
  }

Hi,

I have a DOM click event that creates a <span>. When the user clicks a button, it turns that <span> into a textarea that the user can type a new name in, press enter, and then the span contains the text the user input. Sort of like when you rename a file in Windows Explorer.

Anyway, the code is something like this, and I'm wondering if I can use 'area_el' in this way... right now it's giving me the error that area_el is undefined, even though I define it in the function that contains the Event declaration.

The first part is the Dom stuff to make it all work. It's not stuff I need to mess with, but I'm putting it here in case it's useful.

Code:

var Dom = {
	get: function(el) 
	{
		if (typeof el === 'string')
			return document.getElementById(el);
		else
			return el;
	},
	add: function(el, dest) 
	{
		var el = this.get(el);
		var dest = this.get(dest);
		dest.appendChild(el);
	},
	remove: function(el) 
	{
		var el = this.get(el);
		if(el.parentNode != null)
			el.parentNode.removeChild(el);
	}
};

var Event = {
	add: function() 
	{
		if (window.addEventListener) 
		{
			return function(el, type, fn) 
			{
		  		Dom.get(el).addEventListener(type, fn, false);
			};
	  	} 
		else if (window.attachEvent) 
		{
			return function(el, type, fn) 
			{
		  		var f = function() 
				{
					fn.call(Dom.get(el), window.event);
		  		};
		  		Dom.get(el).attachEvent('on' + type, f);
			};
	  	}
	}()
};

The following code defines what happens when the user clicks submit to create a polygon. I also have some variables:

Code:

var created_area_array = Array();
var createdarea_index = 0;
var number_of_areas_saved=0;
var currently_renaming=false;
  
Event.add(window, 'load', function()
{
	Event.add('SubmitArea', 'click', function() 
	{
		if(polyPoints.length>0)
			add_created_area();
	});	
});

Finally, where the issue is. I define area_el in the function below, and further down I want to pass it to a function within the "rename" click event, but I get an error that area_el is undefined.

Code:

function add_created_area()
{
	number_of_areas_saved++;
	var area_el = document.createElement('span');
	var area_el_remove = document.createElement('span');
	var area_el_rename = document.createElement('span');
	var new_entry = polyPoints;
	var new_entry_array_index = "Area" + (createdarea_index);
	var new_entry_array_name = "Area #" + (createdarea_index+1);
	area_el.innerHTML = '<span class=\"address-text\">' + new_entry_array_name + '</span><br>';
	
	area_el_remove.innerHTML = "<a onMouseOver=\"rollover('address_remove')\" onMouseOut=\"rollout('address_remove')\" style='cursor:pointer;'>" +
	"<img src=\"images/tabs-icons/normal-address_remove.png\" name='address_remove' title='remove' alt='remove'></a>&nbsp;";
	
	area_el_rename.innerHTML = "<a onMouseOver=\"rollover('area_rename')\" onMouseOut=\"rollout('area_rename')\" style='cursor:pointer;'>" +
	"<img src=\"images/tabs-icons/normal-area_rename.png\" name='area_rename' title='rename' alt='rename'></a>&nbsp;";
	
	created_area_array[new_entry_array_index] = new_entry;
	createdarea_index++;
	
	Dom.add(area_el_remove, 'CreatedAreas');
	Dom.add(area_el_rename, 'CreatedAreas');
	Dom.add(area_el, 'CreatedAreas');
	Event.add(area_el, 'click', function(e) 
	{
		if(!currently_renaming)
		{
			polyPoints = [];
			var thePolyPoints = (created_area_array[new_entry_array_index]).toString();
			
			alert(thePolyPoints);
			
			//formatting created_area_array[new_entry_array_index] to store as polygon points in the polyPoints array
			thePolyPoints = thePolyPoints.replace(/[\[\]{}]/g, "");
			thePolyPoints = thePolyPoints.replace(/Location/g, "");
			
			//adding the co-ordinates to the polyPoints array
			thePolyPoints = thePolyPoints.split(",");		
			for(var ctr=0; ctr+1<thePolyPoints.length; ctr+=2)
			{
				var location1 = new Microsoft.Maps.Location(thePolyPoints[ctr],thePolyPoints[ctr+1]);
				polyPoints.push(location1);
			}
			
			var out="";
			for(var i=0; i<polyPoints.length; i++)
			{
				out += polyPoints[i] + " ";
			}
			alert(out);
			
			//creating the polygon and searching...
			if(create_area==true)
			{
				drawPolygon();	
				polygonSearch();
			}
			else if(create_area==false)
			{
				document.getElementById('createarea').innerHTML = "<a id='createarea'><span class='create_area' style='color:blue'><strong>Create Area</strong></span></a>";
				document.getElementById("mapDiv").oncontextmenu = function(){return false}
				MouseUpHandlerId = Microsoft.Maps.Events.addHandler(map, "mouseup",MouseUpHandler);
				MouseDownHandlerId = Microsoft.Maps.Events.addHandler(map, "mousedown",MouseDownHandler);
				MouseMoveHandlerId = Microsoft.Maps.Events.addHandler(map, "mousemove",MouseMoveHandler);
				MouseOverHandlerId = Microsoft.Maps.Events.addHandler(map, "mouseover",MouseOverHandler);
				drawPolygon();	
				polygonSearch();
				create_area=true;
			}			
		}
	});
	Event.add(area_el_remove, 'click', function(e) 
	{
		Dom.remove(this);
		Dom.remove(area_el_rename);
		Dom.remove(area_el);
		if(number_of_areas_saved>1)
			number_of_areas_saved--;
	});
	Event.add(area_el_rename, 'click', function(e) 
	{
		if(!currently_renaming)
		{
			area_el.innerHTML = '<textarea name=\"renaming_area\" id=\"renaming_area\" style=\"width:200px;height:10px;background-color:#DCDCDC; resize:none;font-size:8px;\" onKeyPress=\"return enter_rename(area_el, event)\" maxlength=\"30\"></textarea><br>';
			currently_renaming=true;
		}
	});
	Event.add("createdarea_clear", 'click', function(e)
	{
		Dom.remove(area_el_remove);
		Dom.remove(area_el_rename);
		Dom.remove(area_el);
		created_area_array = [];
		number_of_areas_saved=0;
		createdarea_index=0;
	});
}

The enter_rename(area_el, event) function that isn't passing in my variable.

Code:

function enter_rename(area_el, event)
{	
	var keyPressed = (event.which) ? event.which : event.keyCode;
	var current_str = document.getElementById("renaming_area").value;
	if(keyPressed == 13)
	{
		if(current_str.length>0)
		{
			if(allSpaces(current_str)==true)
			{
				alert("Please enter a meaningful area name.");
				return false;
			}
			else
			{
				area_el.innerHTML = '<span class=\"address-text\">' + current_str + '</span><br>';
				currently_renaming=false;
				return true;	
			}
		}
		else
			return false;
	}
	else
		return true;
}

Making area_el global does not clear the span elements when I click my "createdarea_clear" button, however when it's local, the function works as expected.

How can I do this? I'm new to JavaScript. I tried messing with While but it just caused lag as it kept looping infinitely.

The problem I think is that I have a variable that changes every time I click the button. The function changes the variable. So it successfully changes the variable once to my likings, then when I click the button (thus running the function) it does nothing.

Here's an example I created to show you

Quote:
<html>
<head>
<script type="text/javascript">
var x = 50;
var y = Math.floor(Math.random()*5);
function test()
{
var a = x+y
document.getElementById("testing").innerHTML=a;
}
</head>
<body>
<p id="testing"></p>
<input type="button" value="asdf" onclick="test()" />
</body>
</html>


So in this case, I need to click the button multiple times in which each time it should add y to x. It only works once and then goes kaput.

Thanks!

I have a question: look at the following html code:
/****html***/
<div class='class1'>text1</div>
<div class='class1'>text2</div>
<div class='class1'>text3</div>
......
/**html***/
If I want to change the background color of the textn by clicking it, what should I do instead of inserting "onclick='someFunction()'" in every div?

Greetings,

I'm looking to add keycode Accessibility to an html + javascript interaction.

It's basically like tic tac toe where a user clicks on a cell (these cells are created by divs) and an 'O' appears in the cell.

I'd like to be able to tab through the cell fields and hit the spacebar to put the 'O' in the focused cell.

Here's an example of the html divs...

[code]
<div class="grid">
<div class="row row-1">
<div class="box true"><div class="inner" tabindex="0" id="orange"></div></div>
<div class="box true"><div class="inner" tabindex="0" id="orange"></div></div>
<div class="box true"><div class="inner" tabindex="0" id="orange"></div></div>
<div class="box"><div class="inner" tabindex="0" id="orange"></div></div>
<div class="clear"></div>
</div>
</div>
[code]

What I'm needing to know is where/what code goes into the .js to set up a keydown event.

Here's the .js being used...

[code]

$(document).ready(function() {
// init
$('#holder .section:first').addClass('current-slide');
$('#nav .btn:first').addClass('current-slide');
$('#holder .section').addClass('noanswer');
$('#holder .section').delay(300).animate({'top':'0px'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
// end init


$('.noanswer .box').hover(function() {
if ($(this).hasClass('selected')) {
$(this).addClass('box-highlight-hover');
} else {
$(this).addClass('box-highlight');
}
}, function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('box-highlight-hover');
} else {
$(this).removeClass('box-highlight');
}
});

// box functions
$('.noanswer .box').live('click',function() {
$(this).addClass('selected');
});


$('.noanswer .selected').live('click',function() {
$(this).removeClass('selected');
$(this).removeClass('box-highlight-hover');
});



// slide animations
$('#nav .mobility-btn').click(function() {
if ($('.section').is(':animated')) {
} else {
$('#nav .btn').removeClass('current-slide');
$(this).addClass('current-slide');
$('.section').css({'z-index':'5'});
$('#mobility').css({'top':'-350px','z-index':'10'});
$('#mobility').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
$('.section').removeClass('current-slide');
$('#mobility').addClass('current-slide');
}
});

$('#nav .vision-btn').click(function() {
if ($('.section').is(':animated')) {
} else {
$('#nav .btn').removeClass('current-slide');
$(this).addClass('current-slide');
$('.section').css({'z-index':'5'});
$('#vision').css({'top':'-350px','z-index':'10'});
$('#vision').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
$('.section').removeClass('current-slide');
$('#vision').addClass('current-slide');
}
});

$('#nav .hearing-btn').click(function() {
if ($('.section').is(':animated')) {
} else {
$('#nav .btn').removeClass('current-slide');
$(this).addClass('current-slide');
$('.section').css({'z-index':'5'});
$('#hearing').css({'top':'-350px','z-index':'10'});
$('#hearing').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
$('.section').removeClass('current-slide');
$('#hearing').addClass('current-slide');
}
});

$('#nav .cognitive-btn').click(function() {
if ($('.section').is(':animated')) {
} else {
$('#nav .btn').removeClass('current-slide');
$(this).addClass('current-slide');
$('.section').css({'z-index':'5'});
$('#cognitive').css({'top':'-350px','z-index':'10'});
$('#cognitive').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
$('.section').removeClass('current-slide');
$('#cognitive').addClass('current-slide');
}
});


// result
$('.answerSubmit').hover(function() {
$(this).addClass('answerSubmitHover');
}, function() {
$(this).removeClass('answerSubmitHover');
});

$('.answerSubmit').live('click',function() {
var parent = $(this).parents('.section');
var scoreParent = $(this).parent('.result');

// Calculate max score
var maxScore = parent.find('.box').length;
// Calculate actual score
var actualScore;
var selectednotTrue = 0;
var selectedCorrect = 0;
var notTrue = 0;
actualScore = parent.find('.box').length;
selectedCorrect = parent.find('.box.selected.true').length;
notTrue = parent.find('.box:not(.true)').length;
selectednotTrue = parent.find('.box.selected:not(.true)').length;

actualScore = notTrue - selectednotTrue + selectedCorrect;


scoreParent.find('.answer').html(actualScore);
scoreParent.find('.outOf').html(maxScore);

$(this).hide();
parent.find('.score').show();
parent.addClass('answer').removeClass('noanswer');
});
});

[code]


Please let me know if I'm unclear or if more code is necessary.
Thanks for any help you can give!

k

Hi all,

Background:

I'm currently working on a landing page which will display the same on both desktop & mobile devices, which is what we "want" for now.
However, we've created an alternate registration page for mobile devices. This page can be accessed by clicking on a specific button, which has a class on it that will determine if the user is on a mobile device or not. If they are not, the normal action will occur, such as a registration popup, built specifically for desktop users.


The problem is:
I'm firstly having to use .remove to take away the class of pbx_ajax which operates the popup, so mobile users aren't affected by the popup and will continue onto the page we specially built for them. However, it seems my script is removing the class straight away, which prevents the popup from working for desktop users. Secondly, the script doesn't actually seem to work, it simply doesn't fire, which begs the question if i've cocked up my class bind.
Code is attached below, please if anyone has any advice, do let me know as i'm at my wits end.

Oh and i'm sure you'll notice, i'm polling for when the jQuery has loaded, as the library is located at the bottom of our site (its a rather large site).


The javascript/jquery
Code:

//$(document).ready(function() {
	//Global function that will detect what device the page is being viewed on
	function globalDetectDevice() {
		var deviceIphone = "iphone";
		var deviceIpod = "ipod";
		
		//Initialize our user agent string to lower case.
		var uagent = navigator.userAgent.toLowerCase();
		
		
		//**************************
		// Detects if the current device is an iPhone or iPod Touch.
		function DetectDevice()
		{
		    if (DetectIphone()) {
		    	window.location = "/landing/register/mobile" ;
		    }
		    else if (DetectIpod()) {
		    	window.location = "/landing/register/mobile" ;
		    }
		    else {
		    	return false;
		    }
		}
	}
	
	//Binding the above function to a class, that we can then attach to any clickable element
	//As jQuery is at the bottom of page, we poll the function until jQuery has loaded, once loaded, we clear the polling using clearTimout
	var bindTimer = setInterval(function() {
	    if ("undefined" != typeof jQuery && globalDetectDevice) {
	        $('.detectDevice').removeClass('pbx_ajax').bind('click', DetectDevice);
	        clearTimeout(bindTimer);
	    }
	}, 50);
//}

the html button
Code:

<a class="detectDevice pbx_ajax" title="Join Free" href="?cat=popup&amp;action=open&amp;settings=pbx_popup_register">~graphic("btn-get-started-prints-LP")</a>

thanks for any help

Just want to say thanks in advance for all of those who can help me out with this.

Here is the page I'm working on: http://jackradetsky.com/recent_work.html

As you will see there are only two pictures on there now. I want the left table cell to have an up arrow and a down arrow below those pictures where the user can scroll (down and up) and see other pictures, which when clicked on will show a larger image to the right. It's setup now as you will see for the larger image to appear to the right. It's just not setup for this scroll function where the user can click on an up arrow or down arrow to make the users see the other pictures in the table cell. Also this section should not have a scrollbar show up when the pictures are being scrolled down to see. I'm not sure on how to proceed with this. Thank you for the help in advance. I appreciate it.

-Brian

Can anyone tell me what I have done wrong here? I have the following html code

Code:

<div id='group1'>
  <tr class='time'>
    <td colspan='3' name='1262815200'></td>
  </tr>
					
  <tr>
    <td class='timeleft group1' name='1262815200' colspan='3'></td>
  </tr>	

  <tr class='game'>
    <td><input type='radio' name='G1' value='NYJ'>NYJ</td>
    <td><input type='radio' name='G1' value='BUF'>BUF</td>
    <td><select name='G1P' class='points' tabindex = '1'></select></td>
  </tr>	

</div>

and when I use the selector $('#group1 input) it does not select anything (namely the inputs in this code). But when I use the selector $('div input') it will select them (and more on the page which I don't want). Is anyone able to see what I have done wrong? I've tried everything I can think of in terms of testing, and I have narrowed it down to the selector. Thanks.

I have a series of hand-made arrays each of which has many elements, eg
Code:

var BlobI  = new Array("id1","id2","id4",..."id32");
var Blob2  = new Array("id1","id3","id5",.."id31");

and I have a script (with much help, some time back) which makes the elements change style, with the changes happening successively, element by element:
Code:

function noBlob (arrayA,visibility,current)  { 
	var arrayB=(typeof arrayA == 'string')? arrayA.split(',') : arrayA; 
	var blob = document.getElementById(arrayB[current]);
		blob.style.visibility = visibility; 
		if (current != arrayB.length - 1) { 
    		current++; 
    		setTimeout(function() {noBlob(arrayB, visibility, current)},100) }}

If I could get rid of all the ids (400+), both in the html and in the arrays, the whole thing would be much lighter. In theory, because of the way the elements in the arrays are arranged, I could use different iterations of the nth-child() selector to round up the elements of each array.

What I'm not clear about is this: there are several stand-alone selector engines, eg, Sly and Yass. They look as if they need to be used in conjunction with some more extensive js library, but I just want to combine the arrays the engine would return with my existing script.

Is this possible? eg, if using YASS (http://yass.webo.in/), something like:
Code:

var newBlob1 = _('div.BLOBS':nth-child(1))
var newBlob2 = _('div.BLOBS':nth-child(2))

Has any one experience with either engine?