Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Unintentional whitespace around Divs

    Hey everyone,
    I'm writing a scrolling news feeder and I'm running into a problem with spaces in between my divs. Basically I have master holding div that contains all the news elements, when I mouse over the master div, I want it to pause. All that works fine, but when I mouse in between the divs it triggers the event the occur. Here is a simple example of whats happening:
    Code:
    <html>
    	<head>
    		<script type='text/javascript'>
    function check(id){
    	alert(id);
    }
    		</script>
    		<style type='text/css'>
    div{
    	position:relative;
    }
    		</style>
    	</head>
    	<body>
    		<div id='master' style='border:1px solid black; width:60px;' onMouseOver='check(this.id)'>
    			<div id='div1'>Div1</div><div id='div2'>Div2</div>
    		</div>
    	</body>
    </html>
    As you can see, when you mouse in between div1 and div2 it triggers the event function to be called. Is there any way to jam those two divs together so it doesn't call the event?? Thanks for any help!!

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I don't get it. Between the 2 divs there is no space, so that you can not place the mouse between them.
    You can see that more clearly if CSS like:
    Code:
    #div1{
    background:#00CCFF
    }
    #div2{
    background:#FFCC00
    }
    Can you detail, elaborate and clarify your aim?
    Last edited by Kor; 06-15-2010 at 02:02 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    I'm using Firefox 3.6.3, and when I open that page and run my mouse from div1 to div2 inside the master div I get the onMouseOver='check(this.id)' event called.
    I know there's no space in between them, and that why I'm so confused as to why this is happening. Did you run the page and try it?
    Thanks.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Um, but your alert fires onMouseOver on the #master div. When you're mousing over div1 and div2 you're still within #master - that's why it's firing...

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by wrathrowe View Post
    I'm using Firefox 3.6.3, and when I open that page and run my mouse from div1 to div2 inside the master div I get the onMouseOver='check(this.id)' event called.
    Of course. Both divs are nested inside the parent div, they do not cover the parent div.

    What in fact do you want?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey,

    I'd like to be able to roll my mouse from div1 to div2 without the mouseOver event being called.

    (I'm not trying to be a jerk about this or anything, I'm just trying to clearly explain the problem and what I'd like to happen)

    So here's what's happening.. The master div contains another two divs with text in them. Once you mouse over the master div, lets say from the bottom, the function check is called which alerts 'master'. Best kind, that's what I want to happen. So then you have your pointer on the text div2, the cursor changes in to the text selector. So if you move your mouse around on the text, nothing is called, which is good. Now, if you slowly move your mouse from the text div2 up to div1 there's a 1px region when onMouseOver is called for the master div. Is there any way I can jam both of those divs together so that 1px space is not there, and instead of going from div2 -> master -> div1 it goes directly from div2 -> div1, therefore not mousing over master and calling the function check.

    Thanks again for your help.
    Last edited by wrathrowe; 06-15-2010 at 06:17 PM. Reason: to explain the problem exactly


  •  

    Posting Permissions

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