Results 1 to 5 of 5

Thread: Link Floatie Script - display issues with FF and IE8

  1. #1
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Link Floatie Script - display issues with FF and IE8

    1) Script Title: Link Floatie Script

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

    3) Describe problem: I am having some display issues with this script in both Firefox and Internet Explorer. Unfortunately, I'm unable to post links to the website as it is currently in QA. However, I attached screenshots to illustrate the issues that I'm having.

    In FF, the floatie is too far to the left.
    Click image for larger version. 

Name:	firefox_floatie_display_issue.jpg 
Views:	85 
Size:	94.5 KB 
ID:	4938

    In IE, the floatie is too high and cuts off some of the text above it.
    Click image for larger version. 

Name:	ie8_floatie_display_issue.jpg 
Views:	72 
Size:	43.2 KB 
ID:	4939

    Of course, any issue that I'm having in one browser is not occurring in the other.

    Any help you could provide would be much appreciated.

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    594
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    I am not sure much can be offered in the way of help untill you post the page code for people to look at.

    Can you do that?copy and paste the code for this page for someone to work with?
    Thanks,

    Bud

  3. #3
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Js

    Unfortunately, I can't include all of the code because I'm getting errors from DD that I've entered too many characters.

    Here is a sample of what each floatie contains - we have one for each state and territory:

    Code:
    //Washington 
    floattext[52]='<div class="spacer2">&nbsp;</div><div class="regulator"><div class="commish_pic"><img src="images/members_washington.jpg" alt="Mike Kreidler - Commissioner"></div><div class="commish_info"><b>Mike Kreidler</b><br>Commissioner, Washington State Office of the Insurance Commissioner</div></div>'
    And this is the rest of the script:

    Code:
    var floatiewidth="710px" //default width of floatie in px
    var floatieheight="110px" //default height of floatie in px. Set to "" to let floatie content dictate height.
    var floatiebgcolor="#FFF" //default bgcolor of floatie
    var fadespeed=50 //speed of fade (5 or above). Smaller=faster.
    
    var baseopacity=40
    function slowhigh(which2){
    imgobj=which2
    browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
    instantset (baseopacity)
    highlighting=setInterval("gradualfade(imgobj)",fadespeed)
    }
    
    function instantset(degree){
    cleartimer()
    if (browserdetect=="mozilla")
    imgobj.style.MozOpacity=degree/100
    else if (browserdetect=="ie")
    imgobj.filters.alpha.opacity=degree
    }
    
    function cleartimer(){
    if (window.highlighting) clearInterval(highlighting)
    }
    
    function gradualfade(cur2){
    if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
    cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 1)
    else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
    cur2.filters.alpha.opacity+=10
    else if (window.highlighting)
    clearInterval(highlighting)
    }
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function paramexists(what){
    return(typeof what!="undefined" && what!="")
    }
    
    function showfloatie(thetext, e, optbgColor, optWidth, optHeight){
    var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
    var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
    var floatobj=document.getElementById("dhtmlfloatie")
    floatobj.style.left="10px"
    floatobj.style.display="block"
    floatobj.style.backgroundColor=paramexists(optbgColor)? optbgColor : floatiebgcolor
    floatobj.style.width=paramexists(optWidth)? optWidth+"px" : floatiewidth
    floatobj.style.height=paramexists(optHeight)? optHeight+"px" : floatieheight!=""? floatieheight : ""
    floatobj.innerHTML=thetext
    var floatWidth=floatobj.offsetWidth>0? floatobj.offsetWidth : floatobj.style.width
    var floatHeight=floatobj.offsetHeight>0? floatobj.offsetHeight : floatobj.style.width
    var winWidth=document.all&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
    var winHeight=document.all&&!window.opera? ietruebody().clientHeight : window.innerHeight
    e=window.event? window.event : e
    //new code to position in Ie  - false condition for firefox and other browsers
    if (navigator.userAgent.indexOf('MSIE') !=-1){floatobj.style.left=(winWidth/2)-280 /*(larger number moves floating box left)*/ +"px";floatobj.style.top=99 /*(larger number moves floating box down)*/+"px"} 
    	else {floatobj.style.left=(winWidth/2)-280+"px";floatobj.style.top=97+"px"}
    slowhigh(floatobj)
    }
    
    function hidefloatie(){
    var floatobj=document.getElementById("dhtmlfloatie")
    floatobj.style.display="none"
    }

  4. #4
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Css

    Sorry for the multiple posts - just trying to post the code but keep running into character limits.

    This is the CSS that is on the HTML page with the floatie.

    Code:
    <style type="text/css">
    <!--
    body {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 10px;
    }
    td img {
    	display: block;
    }
    .style23 {
    	font-size: 8pt
    }
    .style24 {
    	font-size: 10pt
    }
    .white_text {
    	color: #FFF;
    	padding-top: 0px;
    	margin-top: 19px;
    	font-size: 10pt;
    }
    #dhtmlfloatie {
    	position: fixed;
    	left: -900px;
    	left: -900px;
    	filter:alpha(opacity=10);
    	-moz-opacity:50;
    	padding: 0px;
    	margin: auto;
    	z-index: 100;
    	background-image: url(images/ar_map_popup.jpg);
    	font-size: 8pt;
    	font-family: Arial, Helvetica, sans-serif;
    	background-color: #FFF;
    	text-align: center;
    }
    .nav a:hover{
    	font: 9px Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	text-decoration: underline;
    	color: #FFF;
    }
    a:hover{
    	font: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	text-decoration: underline;
    	color: #003366;
    }
    a {
    	font: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	text-decoration: none;
    	color: #003366;
    }
    .nav a{
    	font: 9px Arial, Helvetica, sans-serif;font-weight: bold;
    	text-decoration: none;
    	color: #003366;
    }
    .regulator {
    	float: left;
    	width: 325px;
    	margin: 15px 0px 0px 0px;
    }
    div#dhtmlfloatie img {
    	padding: 0px;
    	margin: 0px;
    }
    .styleGrayDivider {
    	color: #999999
    }
    .commish_pic {
    	text-align:center;
    	margin: 0px 0px;
    	padding: 2px;
    	margin-top: 0px;
    	float: left;
    	width: 100px;
    }
    .past_member {
    	float:left;
    	background-color:#FFF;
    	font-size: 10pt;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #000000;
    	border: none;
    	text-align: left;
    	width: 230px;
    	margin: 2px 2px 0px 2px;
    	height: 100%;
    	clear: right;
    	font-weight: bold;
    }
    .commish_info {
    	float:left;
    	background-color:#FFF;
    	font-size: 9pt;
    	font-family: Arial, Helvetica, sans-serif;
    	color: #000000;
    	border: none;
    	text-align: left;
    	line-height: 1.2em;
    	width: 200px;
    	margin: 0px 2px 2px 2px;
    	height: 100%;
    }
    .style25 {
    	font-size: 14pt;
    	font-weight: bold;
    }
    .style27 {
    	font-weight: bold
    }
    .spacer2 {
    	width: 50px;
    	float: left;
    }
    .spacer1 {
    	width: 50px;
    	float: left;
    }
    -->
    </style>

  5. #5
    Join Date
    Jan 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Figured it out!

    In case anyone else needed the info, here is the part of the code where you can change the position of the floatie:

    Code:
    //new code to position in Ie  - false condition for firefox and other browsers
    if (navigator.userAgent.indexOf('MSIE') !=-1){floatobj.style.left=(winWidth/2)-280 /*(larger number moves floating box left)*/ +"px";floatobj.style.top=99 /*(larger number moves floating box down)*/+"px"} 
    	else {floatobj.style.left=(winWidth/2)-280+"px";floatobj.style.top=97+"px"}
    slowhigh(floatobj)
    }

Similar Threads

  1. Link Floatie script
    By Bonta-kun1981 in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 12-30-2011, 01:27 PM
  2. Resolved Link Floatie script IE 8 problem
    By Paramasivan in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-25-2011, 02:07 PM
  3. Link Floatie script
    By kharis in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-26-2009, 11:14 PM
  4. Delay link floatie script
    By tomsey11 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-12-2007, 07:42 PM
  5. Link Floatie script
    By bopo119 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-05-2005, 02:06 AM

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
  •