dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Changing mouse cursor over a div element

  1. #1
    Join Date
    Dec 2008
    Posts
    3

    Changing mouse cursor over a div element

    Hi!

    I am utterly confused by this problem. After half a day of googling I still can not find an answer to what I am doing wrong. Here it is:

    I am using Opera testing a web page I am making with XHTML 1.1 strict, CSS and javascript. I have a div called "definition". The div is initially minimized (approximatelly one row in height). When clicking anywhere on the div, the div is maximized (increased in size) and to minimize it again, an <a> element has to be clicked. This works fine. The problem is that I want the mouse cursor to be "pointer" over the div when it is minimized, but "default" when the div is maximized. When minimizing this works, as the mouse pointer automatically is located outside the div as the div minimizes, but when maximizing, the mouse cursor is still located within the div, and will not change until the cursor is moved outside the div, and the re-entered into the div. I would like the mouse cursor to change immediatly when clicked.

    In the code below I have omitted code that is not (I hope) relevant to the question.

    The div looks like this:

    <div id="definition" class="definition" title="Click to open" onclick="maximizeDefinitionSquare();">
    <p>Content<br/>
    <a href="javascript:minimizeDefinitionSquare();" >Minimize</a>
    </p>
    </div>

    In the css stylesheet I have:

    div.definition
    {
    position: relative;
    top: 0;
    height: 1.5em;
    width: 39em;
    margin: 2em 1em 0 4em;
    border:1px solid gray;
    padding: 0 1em 0 1em;
    background-color: white;
    overflow: hidden;
    cursor: pointer;
    }

    The javascript looks like this:

    function maximizeDefinitionSquare()
    {
    var el;
    el = document.getElementById("definition");
    if(definitionSquare.isMinimized())
    {
    el.style.cursor = "default";
    el.style.height = "5em";
    el.style.overflow = "auto";
    el.title = "";
    definitionSquare.setMinimized(false);
    }

    }

    function minimizeDefinitionSquare()
    {
    var el;
    el = document.getElementById("definition");
    if(!definitionSquare.isMinimized())
    {
    el.style.height = "1.5em";
    el.style.overflow = "hidden";
    el.style.cursor = "pointer";
    el.title = "Click to open";
    definitionSquare.setMinimized(true);
    }
    }

    A million thanks in advance for any help on this issue!

    Best regards,
    Fredrik

  2. #2
    Join Date
    Feb 2006
    Posts
    198
    use javascript

    <div id="xyz" onmouseover="js_function();">

  3. #3
    Join Date
    Dec 2008
    Posts
    3
    Thank you for the reply!

    I tried using a javascript function attached to the onmouseover event, toggling the style.cursor for the div element between "pointer" and "default", but the same problem remains: I have to move the pointer out of the div block and then back in again for the change to take effect. Any other ideas?

    Best regards,
    Fredrik

  4. #4
    Join Date
    Mar 2007
    Posts
    946
    Can't you do a onmouseover event to change the cursor and then a onmouseout event to change it back or did you already try that?

  5. #5
    Join Date
    Dec 2008
    Posts
    3
    Maybe I dont understand you correctly, but I am trying to change the mouse cursor over the one single div. When I click on the div it changes size, and at this moment I want it to change cursor as I click on it. Therefore the cursor does not pass any div border, and I guess I cannot use onmouseout or onmousein?

    I just dont understand why the onmouseover that changes the style.cursor does not take effect until I exit and then re-enter the div?

    Best regards,
    Fredrik

  6. #6
    Hud4007's Avatar
    Hud4007 is offline »Err«Restoring Link..Done
    Join Date
    Jan 2009
    Posts
    29
    try adding this attribute(not tested)
    HTML Code:
    onmousedown="a=document.getElementById('definition').style;if (a.cursor='pointer') {a.cursor='default'}"
    and add this to the link that minimizes it
    HTML Code:
    onmousedown="a=document.getElementById('definition').style;if (a.cursor='default'){a.cursor='pointer'}"
    you could prob. change it to document.getElementById('definition').style.cursor='default/pointer' for both, just get the defs click to be default and vice versa
    Last edited by Hud4007; 01-12-2009 at 11:01 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles