SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onblur problem in firefox.

    Hello, I am having problem with onblur event with firefox. What I'm trying to do is to make div id "options-dropdown" disappear when it is onblur.

    Here is the code:

    Javascript:
    Code:
    function popup() {
    hp = document.getElementById("options-dropdown");
    hp.style.display = "block";
    setTimeout("document.getElementById(+hp+).focus();",1);
    }
    
    function hidepopup(id)
    {
    hp = document.getElementById(id);
    hp.style.display = "none";
    }
    HTML:
    Code:
    <div id="options" onclick="popup()"></div>
    		<div id="options-dropdown" onblur="this.style.display='none';">
    			<div class="top"></div>
    			<div class="op-content" >
    				<h2>Text</h2>
    				<ul class="none">
    					<li class="first"><strong>Standard</strong></li>
    					<li class="second"><strong>Widescreen</strong></li>
    					<li class="third"><strong>Text</strong></li>
    				</ul>
    				<ul class="striped">
    					<li class="first"><a href="#"></a></li>
    					<li class="second"><a href="#"></a></li>
    					<li class="third"><a href="#"></a></li>
    				</ul>
    				<ul class="none">
    					<li class="first"><a href="#"></a></li>
    					<li class="second"><a href="#"></a></li>
    					<li class="third"><a href="#"></a></li>
    				</ul>
    				<ul class="striped">
    					<li class="first"><a href="#"></a></li>
    					<li class="second"><a href="#"></a></li>
    					<li class="third"><a href="#"></a></li>
    				</ul>
    				<ul class="none">
    					<li class="first"><a href="#"></a></li>
    					<li class="second"><a href="#"></a></li>
    					<li class="third"><a href="#"></a></li>
    				</ul>
    				<ul class="striped">
    					<li class="first"><a href="#"></a></li>
    					<li class="second"><a href="#"></a></li>
    					<li class="third"><a href="#"></a></li>
    				</ul>
    				<p class="two"><a class="close" href="javascript:hidepopup('options-dropdown')">Close Window</a></p>
    			</div>
    		</div>
    Could someone help me please?

  2. #2
    SitePoint Evangelist
    Join Date
    Apr 2008
    Location
    Dublin, Ireland
    Posts
    461
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Pretty sure the onblur event is not supported on divs in FF.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The standards say that onblur and onfocus are only valid for form elements and <a> tags. Where they work anywhere else at all it is non-standard and browser specific.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a way to make it work for div elements?

    I wrote this with jQuery, but no luck

    Code:
    function popup(id) {
    hp = document.getElementById(id);
    hp.style.display = "block";
    $(document).click(function(){
    		if (typeof(popup) == 'function' && $(this).attr('id') == 'options-dropdown') {
    			$("div#options-dropdown").css({ display: "none" });
    		}
    });
    }


Bookmarks

Posting Permissions

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