JavaScript - Showing And Hiding Some Div

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 All,

I am new to this forum and to web development,
I am trying to hide div based on conditions..

This is the scenario:
the div should never appear again for that user, until i write another server side message.

lets say i write a message today saying " we are really sorry, but the website will be don for one hour today"

and you login today, the message will be displayed, when you click close its closed, it wont appear again for you, until i post another message,

but each message would have an expiration date, if i post a message which would be displayed to every user, i should decide how long i want it displayed, maybe 24 hrs, so in 24 hrs the message should no longer display.


Please help me out on this...I need a solution fast...

Thanks

hello all...just joined up...very anxious to get my website improved with some of your kind help

i have this current JS running, but Im having some little issues i thought someone here could help me out with.

I want the background color to be #0f3559. But whenever I add this to the script it disables the buttons I have included.

Also, I would like to have just one "Show/Hide" button that does both functions rather than 2 seperate.

can anyone take a look? THANKS.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<html lang='en'>
<head>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>ESPN SCORELINE</title>
<script type="text/javascript">
function setVisibility(theId, visibility) {
document.getElementById( theId ).style.visibility = visibility; }
function setDisplay(theId, display) {
document.getElementById( theId ).style.display = display; }
</script>
</head>
<body>
<input type="button" value="show" onclick="setVisibility('scoreline', 'visible'); ">
<input type="button" value="hide" onclick="setVisibility('scoreline', 'hidden'); ">
</body>
<iframe src="http://espn.go.com/bottomline/espnewsbottomlinebasic.html" width="1000" height="45" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" style="visibility:hidden;" alt="scoreline" id="scoreline"></iframe>
</html>

Hi, I wondering if anyone can help:

I've got rows of divs in this manner

<div class="row">This is row 1 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 1</p></div>
<div class="row">This is row 2 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 2</p></div>
<div class="row">This is row 3 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 3</p></div>
<div class="row">This is row 4 <a href="click">click here to show more</a></div>
<div class="hidden row"><p> hidden text for row 4</p></div>

I wish to have some javascript to toggle the hidden row for its corresponding link.

Please can someone help point me to an example if available. Any help will be greatly appreciated

This might not be as simple as the title suggests. It may be a CSS problem, please say so if you know it to be and I will move it to the correct forum.

Now for the question,

Please visit:

http://danielrhyshardy.com/header/demo.html

I am using the jquery plugin supersized to create a carousel of images in the background of the page. As you will see though, as the transition starts, the second image is visible. I only want it to be visible when it indeed starts to overlap the current image. (i.e when the bench image overlaps the trees etc)

Here is the CSS:

Code:

* { margin:0; padding:0; }
body { background:#111; height:100%; }
	img{ border:none; }
	
	
	
	#supersized { position:absolute; left:0; top:0; overflow:hidden; z-index:-999; height:50%; width:100%; }
		#supersized img{ width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
			#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
			#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }			/*Quality*/
		
		#supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:50%; background:#111; display:block; }
			#supersized a.prevslide { z-index:-20; }
			#supersized a.activeslide { z-index:-10; }
			#supersized a.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:50%; }
			#supersized a.prevslide img, #supersized a.activeslide img{ display:inline; }

Thanks guys

Dan

Hi,
Would someone here please help me with this script. I know I am a complete hack at this, but I need to get it to work. Your help is appreciated.

As you can see, based on the if statement, I need to leave the Div element below hidden, or un-hide it.

I know the first part works. The second part (after "else" ) is where I am having the problem.
Code:

<td>
<script type="text/javascript">
if ([fieldXX]==1)   
 {
 document.write("<a href='page1.asp?itemid=1234'><img src='images/btn-choose.gif' border='0' alt='choose button'</a>"); 
 } 
else
 {  
    var id = 'hide-buy-btn';
    var item = document.getElementById(id); 
 if (item) {
 item.className=(item.className=='hidden')?'unhidden':'hidden';
 }
 }
</script>

<div id="hide-buy-btn" class="hidden">
x
xother button code
x						
</div>
</td>

Hi guys, I am working with a plugin calld Hashslider which is a fairly simple div slider.

Here is the code for startrs Code:

// hashslider v0.9 by manuel huegel, copyright 2010
// mgoys.com


$(document).ready(function(){
					   
//get width and height of the wrapper and give it to the UL	
	var wrapperwidth = $('#slider').width() *  $('#slider ul > li').size();
	$('#slider ul').css('width', wrapperwidth);
	var wrapperheight = $('#slider').height();
	$('#slider ul').css('height', wrapperheight);	
						   
						   
//set my li width
	var width = $('#slider').width();
	$('#slider ul li').css('width', width);

//set my counter vars
	var counter = $('#slider ul > li').size();
	var decount = 1;
	var autocount = 1;
	
//create my number navigation
	var createNum = 1;
	$('#numbers li:first-child').html(createNum).addClass('activenum').attr('id', 'id1');
	while ( createNum != counter) {
	$('#numbers li:last-child').after('<li>  </li>');
	createNum++;
	$('#numbers li:last-child').html(createNum);
	$('#numbers li:last-child').attr('id', 'id' + createNum);
	}
	
//get my number-width (number navigation should always be centered)
	var numwidth = $('#numbers li:first-child').width() * $('#numbers li').size();
	$('#numbers').css('width', numwidth);


	
//slide the button to the next item
function goNext() {
	if ( decount != counter) {
	$('#slider ul').animate({ left: '-=' + $('#slider').width() }, 400, 'swing', function() { });
	$('.activenum').removeClass('activenum').next().addClass('activenum');
	decount++;
	window.location.hash = decount;
	}
}

function goBack() {
	if ( decount != 1) {
	$('#slider ul').animate({ left: '+=' + $('#slider').width() }, 400, 'swing', function() { });
	$('.activenum').removeClass('activenum').prev().addClass('activenum');
	decount--;
	window.location.hash = decount;
	}
}

//make the number clickable
$("#numbers li").click(function() { 
	//$('#info4').html( $(this).html() ); 
	var clickednum = $(this).html() * - $('#slider').width() + $('#slider').width();
	//$('#info4').html( clickednum );
	$('#slider ul').animate({ left: clickednum }, 400, 'swing', function() { });
	$('.activenum').removeClass('activenum');
	$(this).addClass('activenum');
	decount = $(this).html();
	window.location.hash = $(this).html();	
});


//thaths the hash-shizzle
if ( window.location.hash != '') {
//get hash, scroll to position
	var hashnum = window.location.hash.substr(1) * - $('#slider').width() + $('#slider').width();
	$('#slider ul').animate({ left: hashnum }, 0, function() { });
//set counters to position
	decount = window.location.hash.substr(1);
	$('.activenum').removeClass('activenum');
	var hashname = window.location.hash.substr(1);
	$('#id' + hashname).addClass('activenum');
}
	
//get my clickers
$("#right").click(function() { goNext(); });	
$("#left").click(function() { goBack(); });	


//get mousewheel function
$("#slider ul").mousewheel(function(event, delta) { if (delta > 0) { goBack();	event.stopPropagation();event.preventDefault(); } });
$("#slider ul").mousewheel(function(event, delta) { if (delta < 0) { goNext();  event.stopPropagation();event.preventDefault();	} });







});

As you will see the current code loops through all of the slides, and when it reaches the last (or first) the previous and next links become unclickable. I would like to go a stage further than this and make them dissapear entirely.

I don't know how to do this or even to start, I dont even know what function to edit.

Please help guys.

Thanks in advance

Dan

OK, I've been working on this for quite some time now, and have it working, almost. lol. Hopefully someone here can lend a fresh pair of eyes to what I'm doing wrong (bare in mind, I don't know javascript very well at all). I'm creating a simple faq page for my site, but there's a lot of questions, so instead of lumping it all in at once, I'm using divs to store answers in that hide and reappear as my guests click on a question they want to see an answer too. ok, heres the basics of the code I'm using so far:

Code:

<script type="text/javascript">
function showit(boxName) 
	{
	theBox = document.getElementById(boxName);
	theBox.className = "boxVisible";
	}
</script>
<script type="text/javascript">
function hideit(boxName) 
	{
	theBox = document.getElementById(boxName);
	theBox.className = "boxHidden";
	}
</script>

That, is in the head section of my page. Then for the links and such I have:

Code:

<div><a href="link.html" onclick="showit('s11'); hideit('s12'); hideit('s13'); hideit('s14'); hideit('s15'); hideit('s16'); return false;">Do you shoot in color, or black and white?</a></div>
	<div id="s11">
		&nbsp;&nbsp;&nbsp;&nbsp; We shoot in color.&nbsp; 
		Color prints can be printed in black and white and come out perfectly 
		just as though they were shot in black and white.&nbsp; However if you 
		shoot in black and white, you can't print it in color.&nbsp; For this 
		reason we shoot all of our images in full color.
	</div>

obviously there are more questions that that, but I don't want to fill this screen with all of them either.

Ok, heres what its doing, when you click on the first question, no problem, the answer opens right up, appears where it should be, everythings great, except, that its also following the link and leaving the page. I get to a 404 error telling me that link.html does not exist on my server. So, apparently the

Code:

return false

isnt working.... what do I need to do here, I'm now lost...

OH, I should include the CSS I'm using for these DIV's so you can see what the javascript is calling on for them:

Code:

.boxVisible 
	{
	display: block;
	position:relative;
	left:25px;
	width:755px;
	overflow:auto;
	}
.boxHidden 
	{
	display: none;
	}

Thanks to ANYONE that can help out!

I don't mean for this to be an advertisement, and if its not allowed by all means I'll remove it from this post, but if you want to see my exact code that I'm using, you'll find the page I'm working on at http://www.smmahoney.com/index.php?page=faq

Hi,

If I want to hide a title / heading if a field below is not filled in, what would be the js for that?

I have an "Attachments" h2 heading and three following fields for the client to add up to three attachments. But if none are filled in I want the h2 heading to not display.

This is what I have so far:

var attachment1 ='{tag_attachment 1}'
var attachment2 ='{tag_attachment 2}'
var attachment3 ='{tag_attachment 3}'

===
if(attachment1 == '') {
document.getElementById('attachment1').style.display = 'none';
}

if(attachment2 == '') {
document.getElementById('attachment2').style.display = 'none';
}

if(attachment3 == '') {
document.getElementById('attachment3').style.display = 'none';
}

===
<div id="attachments">
<h2>Attachments</h2>
<p>{tag_attachment 1}<br />
{tag_attachment 2}<br />
{tag_attachment 3}</p>
</div>


This should take care of the three fields, but how do I tie in the heading too?

Thank you!

Hi all,

I have some javascript that when a link is clicked hides the div and when it is clicked again shows the div... what I want to do is reverse that, so it is intially hidden. I have tried changing the display none to different parts but it always shows on load:
Code:

function toggleDiv (divid) {
	if (document.getElementById (divid).style.display == 'none') {
		document.getElementById (divid).style.display = 'block';
	} else {
		document.getElementById (divid).style.display = 'none';
	}
}

Code:

<a href="javascript:;" class="showmorelink" onmousedown="toggleDiv('checks');">Safeguarding</a>

Can anyone advise?

Many thanks,

Greens85

Hi,

I got a table with hundreds of rows...and I want the user to be able to hide a single one by clicking on the table row.

How can I do this without typing in hundreds of ids like 1,2,3,4,5... Since you can't get elements by class and ids have to unique I'm not sure how to do this. Also the order of the rows will change when they get updated so it would end up being a mess of unordered ids.

Thanks.

I have this simple checkbox menu
http://myresearchfinder.com/dev/checktest.html

If you check the cancer box a div will appear. If you check lung, another menu pops up. If you check colon nothing appears because it's behind the lung div. I am aware of z-index. But because a person may go back and forth between menus I need a way to make sure the appropriate div is always on top. Any ideas?

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 am using a jquery gallery slideshow on my homepage and I am having an issue where the images loaded before the dom is loaded causing the images to display in an ugly stack.

I combated this a bit by setting a height on the div and setting the overflow to hidden. however you can still see the unstyled stack of images within the small div for a couple of seconds before the page is loaded.

the code to start the javascript is:

Code:

<script type="text/javascript">
	$(document).ready(function(){		
	$('#photos45').galleryView({
		panel_width: 980,
		panel_height: 300,
		gallery_width: 980,
		gallery_height: 900,
		frame_width: 120,
		frame_height: 50,
		pause_on_hover: true,
		nav_theme: 'light'
	});
	});
</script>

and the html is:

Code:

 <div style="height:360px; overflow:hidden; " >
 <ul id="photos45">
 <li><img src="../site_files/banners/cush.jpg" alt="Baffin Cush"/></a></li>

  <li><img src="../site_files/banners/coveralls.jpg" alt="Big Al Coveralls"/></li>

 <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li>
 
 <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li>
 </ul>
  

</div>

I have a feeling that this has something to do with the .ready function maybe it should be something else? You can see this in action he

http://bit.ly/8QRXWU

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.