Solved

css border within an empty div tag

Posted on 2009-05-07
13
3,073 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
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
 
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

757 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now