Solved

css border within an empty div tag

Posted on 2009-05-07
13
3,081 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

696 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