Results 1 to 6 of 6

Thread: Pop up box in differnt locations across browers

  1. #1
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Pop up box in differnt locations across browers

    1) Script Title: Drop down/ Overlapping Content script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lapcontent.htm

    3) Describe problem: The pop up box of content is appearing in different places in different browsers. I have not changed "position:absolute" but when I try to add "top" and "left" amounts, there is no change. If I add "margin" amounts, I can shift the box, but it is not consistent across browsers. On a Mac, in FF the box is just below the logo (perfect), in Safari and Chrome, the box is over the Stanford logo and a little to the left.

    The page is: stowecommunications.com/test/experience.html and the pop-up happens when you click on the Stanford University logo.

    Is there a way to code for the different browsers? Or some way to specify the position of the pop up box?

    Here is my code on the div with the pop up content:
    <div id="subcontent2" style="position:absolute; visibility: hidden; background-color: #fff; border:#C0C0C0 medium solid; width: 400px; height: 140px; padding: 10px;top: 100px;">

    It is positioned "left-bottom" in the java script.

    Many thanks in advance for any suggestions!

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    11

    Default

    You can target Safari and Chrome specifically in CSS: http://paulirish.com/2009/browser-specific-css-hacks/
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,791
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    try these changes in red

    Code:
    	show:function(anchorobj, subobj, e){
    		if (!this.isContained(anchorobj, e) || (e && e.type=="click")){
    			var e=window.event || e
    			if (e.type=="click" && subobj.style.visibility=="visible"){
    				subobj.style.visibility="hidden"
    				return
    			}
                var p=this.pos(anchorobj);
    			var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 //calculate user added horizontal offset
    			var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight //calculate user added vertical offset
    			subobj.style.left=p[0] + horizontaloffset + "px"
    			subobj.style.top=p[1]+verticaloffset+"px"
    			subobj.style.clip=(subobj.dropposition[1]=="top")? "rect(auto auto auto 0)" : "rect(0 auto 0 0)" //hide drop down box initially via clipping
    			subobj.style.visibility="visible"
    			subobj.startTime=new Date().getTime()
    			subobj.contentheight=parseInt(subobj.offsetHeight)
    			if (typeof window["hidetimer_"+subobj.id]!="undefined") //clear timer that hides drop down box?
    				clearTimeout(window["hidetimer_"+subobj.id])
    			this.slideengine(subobj, (subobj.dropposition[1]=="top")? "up" : "down")
    		}
    	},
    
     pos:function(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     },
    
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    If the problem is what I think it is, you just need to make the trigger display: inline-block:

    Code:
    <a style="display: inline-block;" href="http://www.stowecommunications.com/test/experience.html" id="centeroceansolutions" rel="subcontent2"><img src="images/stanford-logo.png" alt="Stanford University logo" width="190" height="88" border="0" /><a/>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, all! I will try these suggestions and report back!

  6. #6
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok, it's fixed! I moved the pop-up div outside of the wrapper div, just because that makes more sense anyway. But what fixed it is adding style="display: inline-block;" to the anchor link. I love it when it's so simple! Many thanks!

Similar Threads

  1. Replies: 1
    Last Post: 05-24-2011, 11:35 PM
  2. Web site won't open in IE, but fine in other browers
    By KDAngel in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-18-2009, 11:06 PM
  3. I need a script to show differnt content at different times of the day.
    By dannyboyoh in forum Looking for such a script or service
    Replies: 1
    Last Post: 03-04-2008, 02:28 AM
  4. I'm looking for a script that loads differently for differnt browsers...
    By tivaelydoc in forum Looking for such a script or service
    Replies: 2
    Last Post: 07-04-2007, 05:13 AM
  5. Replies: 2
    Last Post: 11-15-2006, 05:16 PM

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
  •