www.webdeveloper.com
Results 1 to 5 of 5

Thread: Pop Up Note displays off the screen

  1. #1
    Join Date
    Aug 2005
    Posts
    278

    Pop Up Note displays off the screen

    I have a link on my web pages that when hovered over displays some text in the form of a pop-up. However, some screens have a horizontal scroll on them, which means my pop-up has some text being displayed off the screen to the right.

    Here is my code:

    Code:
    function ShowPopUp()
    {
    	var PopUpNote = document.getElementById('divPopUpNotes');
    	PopUpNote.style.left = event.screenX;
    	PopUpNote.style.top = event.screenY - event.clientY;
    	PopUpNote.style.visibility='visible';
    }
    How do I get the right portion of the pop-up to stay on the screen, and not display off the screen with a horizontal scrolling page?

  2. #2
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    sounds like a CSS issue.

    perhaps show the code for #divPopUpNotes?

  3. #3
    Join Date
    Jun 2011
    Posts
    1

    Did you get solution to this issue

    I am getting the same issue.
    I cannot postion the popupnote after scrolling.

    if you scroll popupnotes position is messed up.

  4. #4
    Join Date
    Aug 2005
    Posts
    278
    Sorry for the extremely late response on this, must have fell off my rader / missed the email subscriptions.

    Here is the relevant css code:

    Code:
    #divPopUpNotes
    {
         position: absolute;
         top: 0px;
         left: 0px;
         background: #ffc;
         padding: 10px; 
         border: 1px solid #000;
         z-index: 1;
         visibility: hidden;
         font: 11px "Verdana";
         color: #000;
    }
    
    .divPopUpNotes
    {
         position: absolute;
         top: 0px;
         left: 0px;
         background: #ffc;
         padding: 10px; 
         border: 1px solid #000;
         z-index: 1;
         visibility: hidden;
         font: 11px "Verdana";
         color: #000;
    }

  5. #5
    Join Date
    Aug 2005
    Posts
    278
    Actually, I have this resolved. The CSS code above coupled with the following javascript code works correctly.

    Code:
    function ShowPopUp(element)
    {
    	var PopUpNote = document.getElementById(element);
    	PopUpNote.style.left = event.offsetX + 150;
    	PopUpNote.style.right = 500;
    	PopUpNote.style.top = event.offsetY;
    	PopUpNote.style.visibility='visible';
    }

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