Results 1 to 3 of 3

Thread: Gray div area but scroll back up!

  1. #1
    Join Date
    May 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Gray div area but scroll back up!

    Hi,

    I would like to prevent my link not to scroll back to the top right after I click the link to gray a div

    here is a test file :

    Code:
    <html>
    <head>
    <style type="text/css">
    p {
    margin-bottom: 300px;
    }
    #dark {
    width: 1px;
    height: 1px;
    opacity:.50;
    background-color: black;
    z-index:10;
    display : none;
    position: absolute;
    }
    </style>
    <script type="text/javascript">
    function BlackOut(targetDiv, theDarker) {
    document.getElementById(theDarker).style.display = "block";
    document.getElementById(theDarker).style.height = document.getElementById(targetDiv).offsetHeight+'px';
    document.getElementById(theDarker).style.width = document.getElementById(targetDiv).offsetWidth+'px';
    document.getElementById(theDarker).style.top = document.getElementById(targetDiv).offsetTop+'px';
    document.getElementById(theDarker).style.left = document.getElementById(targetDiv).offsetLeft+'px';
    }
    </script>
    </head>
    <body>
    <h1>This is my test page</h1>
    <p>Paragraph, let's skip some text</p>
    <p>Once more</p>
    <div id="dark"></div>
    <div id="mydiv">my div <a href="#" onClick="BlackOut('mydiv', 'dark')">click to darken</a></div>
    <p>.</p>
    </body>
    </html>
    any suggestions?

    Dorian -from France
    Last edited by dodoecchi; 05-15-2009 at 10:26 AM. Reason: added [code] tags

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Code:
    <html>
    <head>
    <style type="text/css">
    p {
    margin-bottom: 300px;
    }
    #dark {
    width: 1px;
    height: 1px;
    opacity:.50;
    background-color: black;
    z-index:10;
    display : none;
    position: absolute;
    }
    </style>
    <script type="text/javascript">
    function BlackOut(targetDiv, theDarker) {
    var obj1=document.getElementById(theDarker),obj2=document.getElementById(targetDiv)
    obj1.style.display = "block";
    obj1.style.height = obj2.offsetHeight+'px';
    obj1.style.width = obj2.offsetWidth+'px';
    obj1.style.top = obj2.offsetTop+'px';
    obj1.style.left = obj2.offsetLeft+'px';
    }
    </script>
    </head>
    <body>
    <h1>This is my test page</h1>
    <p>Paragraph, let's skip some text</p>
    <p>Once more</p>
    <div id="dark"></div>
    <div id="mydiv">my div <a href="#" onClick="BlackOut('mydiv', 'dark'); return false;">click to darken</a></div>
    <p>.</p>
    </body>
    </html>

  3. #3
    Join Date
    May 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks, that's working

    href="javascript:;" also works, after more research

    Dorian

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
  •