www.webdeveloper.com
Results 1 to 11 of 11

Thread: [RESOLVED] showing and hiding some div

  1. #1
    Join Date
    Mar 2010
    Posts
    14

    resolved [RESOLVED] showing and hiding some div

    i am having some problem showing and hiding some div
    i want to show the div with the id="universitiesDiv" on one point and the div id="highSchoolsDiv" on another depending on the user choice of selected option.
    Code:
    function Show (titleImg){
    		// the id of the content element from the id of the title element
    	var contentID = titleImg.id.replace (/title/, "content");
    	var contentDiv = document.getElementById (contentID);
    		contentDiv.style.display = "block";
    
    	return false;
    }
    
    function Hide (titleImg){
    		// the id of the content element from the id of the title element
    	var contentID = titleImg.id.replace (/title/, "content");
    	var contentDiv = document.getElementById (contentID);
    
    		contentDiv.style.display = "none";
    
    	return false;
    }
    the functions work fine i have tested them on input type="checkbox" and they work fine
    Code:
    <select name="education" id="education" 
    						onfocus="Show(this.options[this.selectedIndex].value);">
    						<option selected value="00">-الرجاء الاختيار-</option>
    						<option value="highSchoolsDiv">مدرسة ثانوية</option>
    						<option value="universitiesDiv"> كلية </option>
    						<option value="universitiesDiv">درجة البكالوريوس</option>
    						<option value="universitiesDiv">درجة عليا</option>
    						<option value="universitiesDiv">دكتوراه / ما بعد الدكتوراه</option>
    						<option value="07">اسألني فيما بعد</option>
    						</select>
    						</span>
    						</div> 
    						</td></tr></table>
    					</div> 
    					 
    					<div> 
    						<div class="Left"></div>
    						<table class="step2" ><tr><td>
    						<div class="Right"> 
    							<div class="Inner" id="Inner"> 
    								<div id="universitiesDiv" class="Row innerError" style="display:none;"> 
    									<div class="Left">
    									<label for="universities">الجامعة / الكلية</label></div> 
    									<div class="Right"> 
    									<input  type="text" name="universities" id="universities" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_universities();" onblur="blurInput(this); validate_JoinPersonalInfoForm_universities();" size="55"/> 
    
     
    									</div> 
    									 
    									 </td></tr><tr><td>
    								</div> 
    								 
    								<div id="highSchoolsDiv" class="Row innerError" style="display:none;"> 
    									<div class="Left">
    									<label for="high_schools">المدرسة الثانوية</label></div> 
    									<div class="Right"> 
    										<input  type="text" name="high_schools" id="high_schools" class="text" autocomplete="off" onfocus="focusInput(this);" onchange=" validate_JoinPersonalInfoForm_high_schools();" onblur="blurInput(this); validate_JoinPersonalInfoForm_high_schools();" size="55"/> 
     
    									</div> 
    														
    									 
    								</div> 
    							</div> 
    						</div> 
    						</td></tr></table>	
    					</div>
    here is doesn't do nothing i have tried onblur onfocus onchange onselect everything i even tried then in side the option <option onselect... !!!!!
    anyone can help me, that would be great
    thanks

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    The select field calls the Show function only when it gains the focus. Afterwards even when the selection (option) changes nothing would happen unless the focus is moved to another field then back again.
    I would suggest you use the onchange=Show(.....)" instead. You can then have a first option such as <option value="" selected>Make a Selection</option> selected by default.
    That would invite the use to make a selection and in the process have the field trigger the focus event to call the show function.

    Inside the Show function you can add a condition:

    function Show (titleImg){
    // the id of the content element from the id of the title element
    if(titleImg!=""){
    var contentID = titleImg.id.replace (/title/, "content");
    var contentDiv = document.getElementById (contentID);
    contentDiv.style.display = "block";
    }
    else {
    alert("Please make a selection");
    }
    return false;
    }

  3. #3
    Join Date
    Mar 2010
    Posts
    14
    i have tried them all as i said before "here is doesn't do nothing i have tried onblur onfocus onchange onselect..."

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Some errors which make impossible for us to understand what you intend to do:
    Code:
    function Show (titleImg){
    		// the id of the content element from the id of the title element
    	var contentID = titleImg.id.replace (/title/, "content");
    	var contentDiv = document.getElementById (contentID);
    		contentDiv.style.display = "block";
    
    	return false;
    }
    your passed variable titleImg is a string (as it is the reference of the select's value). Now how can a string have an id? Furthermore, the RegExp looks like /title/, but i see no "title" string within your elements ids, nor do I understand why do you want to replace that with the string "content", which is also not to be found...

  5. #5
    Join Date
    Mar 2010
    Posts
    14
    this same function i have used it also for swapping an image also, but so i have tried any thing that is related to that, but when ever i delete this line "var contentID = titleImg.id.replace (/title/, "content");" the function just wont work!!!
    here it is at it was before
    Code:
    function ToggleMaktoba (titleImg){
    		// the id of the content element from the id of the title element
    	var contentID = titleImg.id.replace (/title/, "content");
    	var contentDiv = document.getElementById (contentID);
    	
    	if (contentDiv.style.display == "none") {
    		titleImg.src = "images/collapse.gif";
    		contentDiv.style.display = "block";
    	}
    	else {
    		titleImg.src = "images/expand.gif";
    		contentDiv.style.display = "none";
    	}
    
    	return false;
    }

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Do you know JavaScript? I am afraid that you have copied those functions from another application and now you try to stick them somehow to your document. If you have no idea about what is going on, we will not be able to help you, as we have no common language, thus we can not understand one each other.

  7. #7
    Join Date
    Mar 2010
    Posts
    14
    Quote Originally Posted by Kor View Post
    Do you know JavaScript? I am afraid that you have copied those functions from another application and now you try to stick them somehow to your document. If you have no idea about what is going on, we will not be able to help you, as we have no common language, thus we can not understand one each other.
    i do know javascript but i am not the best at it
    and this function i have used it before, i even modified it and it worked on a radio button but it never seamed to work on select option

  8. #8
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    As Kor mentioned there are things in your functions that we cannot make sense of. We can only take your word for it that they work and obviously they are not in the current context.

    When you are trying to solve a Javascript function taking its variable value from your HTML page, use the alert(..) to echo the input variables and see if the correct values are provided.

    As I said when expecting the using selection to trigger an even from the "select" HTML element, use the "onchange=...." instead. The onfocus only works once when the field actually get the focus.


    Again, use the "alert()" function inside each function to try finding the source of the issue.

  9. #9
    Join Date
    Mar 2010
    Posts
    14

    Exclamation

    this is how i got it to work, but i cant seam to make it hide, i want the div show up and hide depending on the user selection for instance if the user chose the value="highSchoolsDiv" the div with the id="highSchoolsDiv" should be shown, and hidden if not
    if the user chose the value="Inner"" the div with the id="Inner" should be shown, and hidden if not
    the client went to school and university or went to school only.
    and another thing the "div id="highSchoolsDiv"" is not hidden on page load which it should be since it is inside the "div id="Inner" style="display:none;""
    which is hidden on load!!
    Code:
    function ShowHide (titleImg){
        var contentDiv = document.getElementById (titleImg);
        if (contentDiv) {
            contentDiv.style.display = "block";
        }
    	else
    	{
    		contentDiv.style.display = "none";
    	}
        return false;
    }
    Code:
    <div class="Left"><label for="education">التعليم</label> <span class="Required">*</span></div></td><td> 
    <div class="Right"><span class="selectWrapper">
    <select name="education" id="education" 
    onchange="ShowHide(this.options[this.selectedIndex].value);">
    <option selected value="">-الرجاء الاختيار-</option>
    <option value="highSchoolsDiv">مدرسة ثانوية</option>
    <option value="Inner"> كلية </option>
    <option value="Inner">درجة البكالوريوس</option>
    <option value="Inner">درجة عليا</option>
    <option value="Inner">دكتوراه / ما بعد الدكتوراه</option>
    <option value="">اسألني فيما بعد</option>
    </select>
    </span>
    </div> 
    </td></tr></table>
    </div>
    <div> 
    <table class="step2"><tr><td>
    <div class="Right"> 
    <div id="Inner" style="display:none;"> 
    <div id="universitiesDiv" class="Row innerError"> 
    <div class="Left">
    <label for="universities">الجامعة / الكلية</label></div> 
    <div class="Right"> 
    <input  type="text" name="universities" id="universities" class="text" autocomplete="off"  size="55"/> 
    </div> 
    </td></tr><tr><td>
    </div> 
    <div id="highSchoolsDiv" class="Row innerError"> 
    <div class="Left">	<label for="high_schools">المدرسة الثانوية</label></div> 
    <div class="Right"> 
    <input  type="text" name="high_schools" id="high_schools" class="text" autocomplete="off" size="55"/> 
    </div>
    </div> 
    </div> 
    </div> 
    </td></tr>
    </table>

  10. #10
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    function HideAllDivs(){
    var divs=Array('highSchoolsDiv', 'Inner");

    for(i=0; i<divs.length; i++){
    document.getElementById(divs[i]).style.display="none";
    }

    }


    function ShowHide (titleImg){
    HideAllDivs();
    var contentDiv = document.getElementById (titleImg);
    if (contentDiv) {
    contentDiv.style.display = "block";
    }
    else
    {
    contentDiv.style.display = "none";
    }
    return false;
    }
    Last edited by holyhttp; 09-29-2010 at 08:19 PM.

  11. #11
    Join Date
    Mar 2010
    Posts
    14

    resolved thanks

    this is what i have done to it
    Code:
    function HideAllDivs(){
    	var divs=Array('hsd', 'edu');
    	for(i=0; i<divs.length; i++) {
    		document.getElementById(divs[i]).style.display="none";
    	}
    }
    
    function ShowHide (parameter){
    	HideAllDivs();
    	if (parameter == 'edu'){
    		var hsd = document.getElementById ('hsd');
    		if (hsd) {
    			hsd.style.display = "block";
    		}
    	}
    	var contentDiv = document.getElementById (parameter);
    	if (contentDiv) {
    		contentDiv.style.display = "block";
    	}
    	else {
    		contentDiv.style.display = "none";
    	}
    	return false;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles