Jump to content

Disappearing div


Jay@TastefulTitles.com
 Share

Recommended Posts

When user enters something in search field, my onChange function opens a screen-size window that blurs everything showing, and a div containing the response in the middle of the screen. When I run it in DreamWeaver CS5 on my MacBook, it works fine. When I run it in Safari, the new divs flash on the screen, then disappear.

Running in the Safari debugger, I can step through the code that toggles the display of the new div, and it appears as it should. As soon as I step out of the toggle function, returning to the calling onChange command, it disappears without a trace. The relevant code is below. The function called by the entry field (function catFilter) ends with the call to function toggle(name), and everything seems fine through there.

As I said, in DreamWeaver it doesn't disappear, making me think the problem may not be in my code. Can anyone suggest a method to find out why it disappears?  

 

#shade { 
	text-align:center; 
	width:100%; 
	height:100%; 
	position:fixed;
	z-index:60;			<-- ensures shade div is above everything but menu -->
	top:0; 
	left:0; 
	background:rgba(200,200,200,.8);		<-- light gray; 80% opaque -->
	display:none;		<-- this is the default until a value is entered in the search field -->
}

<div id="shade" onClick="filterClick(event)" class="w3-container">
      <div class="w3-content w3-card-4 w3-white" style="width:340px; margin:auto; margin-top:6vh" >
         <header class="w3-content tt-header">
            <h5 id="catHead" >Browse our catalog </h5>
         </header>
         <div id="catalog" class="w3-content" style="max-height:60vh; padding-bottom:6px; overflow-Y:scroll"> 
            <!-- CATALOG ENTRIES ARE ADDED HERE BY JAVASCRIPT--> 
         </div>
      </div>
  </div>


      <form>
         <input class="w3-input" onChange="catFilter(this.value)" type="text" placeholder="Search: Composer & Title" style="width:320px; text-align:center; display:inline-block">
      </form>

function toggle(name) {
	var x = document.getElementById(name);
	var s = getComputedStyle(x);
	if(s.display=="block") {x.style.display = "none"} 
	else {x.style.display="block"}
}

 

Link to comment
Share on other sites

Running in Dreamweaver never produce the result you expect, that's why you should get it to run through an browser outside of dreamweaver. You probably are getting getComputedStyle() of all possible multiple styles applied BUT! You are not using  getPropertyValue("display") to get actual property display value

https://www.w3schools.com/jsref/jsref_getcomputedstyle.asp

Did you not get a error in developers console regarding this? Accessed by (F12) on pc anyway.

Edited by dsonesuk
Link to comment
Share on other sites

No, this generates no errors. It simply reloads (or at least redraws) the page on leaving the function.

I'm not understanding your point about getComputedStyle(). It returns the value used in drawing the display, which is what is required. The toggle() function has worked perfectly since changing to getComputedStyle(). It is after leaving that function, with the divs properly drawn, that I'm getting the redraw.

 

Link to comment
Share on other sites

OK! This sounds very much like your form is quickly submitting to itself, if a user presses enter within a input it is treated as a submission of a form. It seems very strange to see onChange event for a text input? Usually I would use one of the keypress events, onchange usually triggers after the element loses focus after value changes like checkbox, radio and select form elements, so this maybe the problem using onchange on text input.

Link to comment
Share on other sites

I switched getPropertyValue() for getComputedStyle(), which seems to have been forcing the redraw. It works just as well, but gives the same results—it still flashes, then redraws.

FWIW, I can display div shade (and its catalog div) using a dropdown menu item to call the same toggle function, and there is no problem. The toggle function is also used to display the menu, and to close it after drawing shade.

If it would help to see what I've described, you may do so at TastefulTitles.com/NewIndex.html. To see how it's supposed to work, show the full catalog using the dropdown menu in the UL corner. (To hide the catalog, click anywhere outside it.)

To see the problem, scroll down to the search field and enter "Mozart" or "Mahler", or another name you saw in the full catalog.

If I eliminate the onchange(catFilter()) call, and replace it with onchange(toggle("shade")), the problem still exists. If I put an alert() after that, the alert gets shown before the div is drawn. After the alert is dismissed, the shade div is drawn, and then immediately erased as the screen redraws. 

Link to comment
Share on other sites

After several hours of trying one thing and another, I finally hit on something that worked, and it seems to be in line with what you just posted: I removed the <form></form> tags enclosing the search field. I don't know whether any of my other changes had any effect, but now it is working exactly as intended. Thanks for your suggestions!

Edited by Jay@TastefulTitles.com
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...