Solved

css border within an empty div tag

Posted on 2009-05-07
13
3,078 Views
Last Modified: 2012-05-06
I have read around quite a bit and cant find an answer
I have an empty div tag that gets filled with javascript for a search suggest.
The problem is when there is nothing yet returned the border in the div still exists.. In FF it shows as a point, in IE as a line in both cases in the top left of where the data is filled when it does exist
 There are three relevent code parts
the simple div tag
the javascript
the css

css
.suggest_link {
	background-color: #ffffff;
	padding: 2px 6px 2px 6px;
}
.suggest_link_over {
	background-color: #bbc3d3;	
	text-decoration: underline;
	padding: 2px 6px 2px 6px;
}
#search_suggest {
	position: absolute;
	left: 200px; 
	background-color: #f8f8f9; 
	text-align: left; 
	border: 1px solid #000000;
}
 
code in page
<div id="search_suggest"></div>
 
javascript
				<script language="JavaScript" type="text/javascript">
							var timerId=0;
							var delay=4000;
/*----------------------------Suggest Code-------------------------*/
 
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP");
	} else {
//		alert("Your Browser does not display this page properly!\nIt's about time to upgrade don't you think?");
	}
}
 
//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();
 
//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {
	if (searchReq.readyState == 4 || searchReq.readyState == 0) {
		var str = escape(document.getElementById('txtSearch').value);
		searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
		searchReq.onreadystatechange = handleSearchSuggest; 
		searchReq.send(null);
	}
	clearTimeout(timerId);
	timerId = setTimeout("restartSuggest()",delay);			
}
 
//Called when the AJAX response is returned.
function handleSearchSuggest() {
	if (searchReq.readyState == 4) {
		var ss = document.getElementById('search_suggest')
		ss.innerHTML = '';
		var str = searchReq.responseText.split("\n");
		for(i=0; i < str.length - 1; i++) {
			//Build our element string.  This is cleaner using the DOM, but
			//IE doesn't support dynamically added attributes.
			var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
			suggest += 'onmouseout="javascript:suggestOut(this);" ';
//			suggest += 'onclick="javascript:setSearch(this.innerHTML);" '; ie hates this and it seems to serve no purpose
			suggest += 'class="suggest_link">' + str[i] + '</div>';
			ss.innerHTML += suggest;
		}
	}
}
 
//Mouse over function
function suggestOver(div_value) {
	div_value.className = 'suggest_link_over';
	clearTimeout(timerId);
}
//Mouse out function
function suggestOut(div_value) {
	div_value.className = 'suggest_link';
	clearTimeout(timerId);
	timerId = setTimeout("restartSuggest()",delay);		
}
/*not using this
//Click function
function setSearch(value) {
	document.getElementById('txtSearch').value = value;
	document.getElementById('search_suggest').innerHTML = '';
}
*/
function restartSuggest(){
		document.getElementById('search_suggest').innerHTML = '';
}
/*-------------------------End Suggest Code--------------------------------*/
				
				</script>

Open in new window

0
Comment
Question by:levelninesports
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
13 Comments
 
LVL 7

Expert Comment

by:ycTIN
ID: 24323213
you can use following code to show or hidde div:
document.getElementById('search_suggest').style.display = "none";  //hidden
document.getElementById('search_suggest').style.display = "";     //show
0
 
LVL 10

Expert Comment

by:bugada
ID: 24323283
Using default value in CSS is never a good idea. The correct use is:

document.getElementById('search_suggest').style.display = "none";  //hidden
document.getElementById('search_suggest').style.display = "block";  //show (you can use  "inline" too)
0
 

Author Comment

by:levelninesports
ID: 24327205
Sorry for my javascript ignorance.. but where would the code be inserted and how would it read.. it sounds like you are saying replace
<div id="search_suggest"></div>

with
<script language="JavaScript" type="text/javascript">
document.getElementById('search_suggest').style.display = "none";  //hidden
document.getElementById('search_suggest').style.display = "<div id='search_suggest'></div>";
</script>

arent there some if conditions required in there?

thanks in advance
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 10

Expert Comment

by:bugada
ID: 24327331
I think you just have to modifiy the searchSuggest function as follows, adding this line after the for loop

document.getElementById('search_suggest').style.display = (str.length > 0) ? "block" : "none";

function handleSearchSuggest() {
        if (searchReq.readyState == 4) {
                var ss = document.getElementById('search_suggest')
                ss.innerHTML = '';
                var str = searchReq.responseText.split("\n");
                for(i=0; i < str.length - 1; i++) {
                        //Build our element string.  This is cleaner using the DOM, but
                        //IE doesn't support dynamically added attributes.
                        var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
                        suggest += 'onmouseout="javascript:suggestOut(this);" ';
//                      suggest += 'onclick="javascript:setSearch(this.innerHTML);" '; ie hates this and it seems to serve no purpose
                        suggest += 'class="suggest_link">' + str[i] + '</div>';
                        ss.innerHTML += suggest;
                }
               document.getElementById('search_suggest').style.display = (str.length > 0) ? "block" : "none";
        }
}// JavaScript Document

Open in new window

0
 

Author Comment

by:levelninesports
ID: 24328961
Bugada.. that didnt work but gave me the knowledge to figure out what to do.. it works fine on ie7 and ff let me know if i missed something on other browsers or it can be done cleaner
there were two problems with suggested.. the timing of events wasnt correct and it only got there after a keystroke so on page load the empty div box still displayed
anyway what I came up with was

added a clearBlock function to clear (since I needed to call it 3 times)
called this function after the timeout occured and display came down
also called this after the text to display was generated and proved to be empty (ss.innerHTML = '')
and added the display block everytime key was pressed and before display info wsa generated (this seemed critical)
lastly had to add a clearBlock call when the html was loaded so the blank div tag was not displayed before any of this began

seems to work great

                        <script language="JavaScript" type="text/javascript">
                                          var timerId=0;
                                          var delay=4000;
/*----------------------------Suggest Code-------------------------*/
//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
      if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
      } else if(window.ActiveXObject) {
            return new ActiveXObject("Microsoft.XMLHTTP");
      } else {
//            alert("Your Browser does not display this page properly!\nIt's about time to upgrade don't you think?");
      }
}

function clearBlock(){
            document.getElementById('search_suggest').style.display = "none";            
}

//Our XmlHttpRequest object to get the auto suggest
var searchReq = getXmlHttpRequestObject();

//Called from keyup on the search textbox.
//Starts the AJAX request.
function searchSuggest() {      
      if (searchReq.readyState == 4 || searchReq.readyState == 0) {
            var str = escape(document.getElementById('txtSearch').value);
            searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
            searchReq.onreadystatechange = handleSearchSuggest;
            searchReq.send(null);
      }
      clearTimeout(timerId);
      timerId = setTimeout("restartSuggest()",delay);                  
}

//Called when the AJAX response is returned.
function handleSearchSuggest() {
      if (searchReq.readyState == 4) {
            document.getElementById('search_suggest').style.display = "block";      
            var ss = document.getElementById('search_suggest')
            ss.innerHTML = '';
            var str = searchReq.responseText.split("\n");
            for(i=0; i < str.length - 1; i++) {
                  //Build our element string.  This is cleaner using the DOM, but
                  //IE doesn't support dynamically added attributes.
                  var suggest = '<div onmouseover="javascript:suggestOver(this);" ';
                  suggest += 'onmouseout="javascript:suggestOut(this);" ';
//                  suggest += 'onclick="javascript:setSearch(this.innerHTML);" '; ie hates this and it seems to serve no purpose
                  suggest += 'class="suggest_link">' + str[i] + '</div>';
                  ss.innerHTML += suggest;
            }
      }
}

//Mouse over function
function suggestOver(div_value) {
      div_value.className = 'suggest_link_over';
      clearTimeout(timerId);
}
//Mouse out function
function suggestOut(div_value) {
      div_value.className = 'suggest_link';
      clearTimeout(timerId);
      timerId = setTimeout("restartSuggest()",delay);            
}
/*not using this
//Click function
function setSearch(value) {
      document.getElementById('txtSearch').value = value;
      document.getElementById('search_suggest').innerHTML = '';
}
*/
function restartSuggest(){
            document.getElementById('search_suggest').innerHTML = '';
            clearBlock();            
}
/*-------------------------End Suggest Code--------------------------------*/
                        
                        </script>


<div id="search_suggest"></div>
      <script language="JavaScript" type="text/javascript">clearBlock();</script>
0
 

Author Comment

by:levelninesports
ID: 24329278
One last thing to make it perfect.. right now it clears when the user is not in the text block area for 4 seconds (or whatever i set that too) this is fine but I would also like to clear it if the user clicks outside of the area altogether.
How to do that please.. thanks in advance
0
 
LVL 10

Accepted Solution

by:
bugada earned 500 total points
ID: 24330655
First, I am pleased when an user can figure out its problems and solve them thanks to a my comment (even if a bit wrong).

Then a suggestion: there is a precise scope to insert the clearBlock in a script after the div? If your goal is to hide the box on pageload you can follow two ways:

1) set the the display style to "none" on the object using the "style" attribute, or even better doing it in a css class assigned to that div

2) insert the clearBlock in the onLoad event, paying attention to not overwrite other scripts onload events.
You can do this in two ways: or inserting in the body tag an onLoad="clearBlock" attribute or, following modern unobtrusive javascript, placing in the head tag a window.onload = function(e)  { clearBlock() };

Finally to hide the block when the user clicks outside of the area, use the onBlur event on the element you desire: this event is fired when the element looses the focus.

P.S: avoid javascript: protocol in event handlers.
0
 

Author Comment

by:levelninesports
ID: 24333114
bugada,
added       display: none; to
#search_suggest {


works great.. I dont completely understand why it works.. how the display: none; gets overridden.. it seems like everything is contained within that id which I have now defined as not to display..
anyway thanks on that

on the other part.. I cannot figure out where to put onblur.. i tried addding a division wrapping the displayed box and putting it there no go.. to the div in html no go.. there is an input field that works but then when i try to click anything in the block those links are ignore and it clears
0
 

Author Comment

by:levelninesports
ID: 24333168
sorry didnt work it just moved it.. let me figure this out again
0
 

Author Comment

by:levelninesports
ID: 24333182
too many browser and move frmo test site to reg.. its all good... just need to figure out where to put onblur
0
 

Author Comment

by:levelninesports
ID: 24342093
still trying to figure out how to clear the block when a click occurs outside the block... i know its onblur, but frmo the code above I cant figure out where to put it.. everything else is running great (though making all javascripts work together and work with IE is quite a pain.... seriously IE sucks)
0
 
LVL 4

Expert Comment

by:galadore
ID: 24342146
May not get your last question but the onBlur="clearBlock();" should go right on the block 'txtSearch'.
0
 

Author Comment

by:levelninesports
ID: 24391304
Found this which solved not being able to properly place onblur (when placed in the search_suggest div tag it did nothing)


function hideDiv(e){
var div=document.getElementById('search_suggest');
var target=e?e.target:event.srcElement;
target!=div?div.style.display='none':null;
}
document.onclick=hideDiv


put that in the javascript and it works great any clock outside of the suggest box clears away
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question