Link to home
Start Free TrialLog in
Avatar of jeremyBass26
jeremyBass26Flag for United States of America

asked on

Need to rework rework Float script

Hello, It was brought to me that the way I took on a float script I wrote may not be a good idea (it is in the title attribute) , it is also not functioning full right all of a sudden... So there is a lot of room to make this better and I'm open to all ideas...

To see it work go to
https://www.sjrmc.org/DoctorDirectory/
(this has the float with out img)

https://www.sjrmc.org/DoctorDirectory/Dir_Hospitalist-Medicine/
(this has the float with the img)

the one with out throws an error in FF of
"e.srcElement has no properties
[Break on this error] var numDoctors = list[e.srcElement.innerHTML];"

so That difinently needs worked out..
My thought here was that it'd look like ??this??
<li>
<a class="tooltip" title="UniqueName"></a>
<div class="UniqueName" style="display:none;">html stuff</div>
</li>

so were the <a> title equals <div> class if hover use float...

I think that may be the best way to approach this.. but ideas and any help here would be great... in the end I want to it work, validate and be cross-browser (thought I may just use separate files and Conditional comments)  Thanks for the help here... and have a great day...
jeremyBass

float.js.txt
float-w-img.js.txt
Avatar of seeflat
seeflat
So FF doesn't use e.srcElement  it uses e.target.
Just test is e.srcElement  is null, and then try e.target.
Cross-browser is usually about checking things like that since the models are often different. Take a look at this for some pointers: http://www.quirksmode.org/js/events_properties.html
As for your approach, looking at the <li><a/><div/></li> code segment, looks sound enough. You would need the unique id/title solution, as the you know that the anchor element is going to be a child of the LI element, and therefore the second child node of the LI element will be the div you want to display.
 
seeflat
Avatar of seeflat
seeflat
Sorry... type
"You would NOT need  the unique id/title solution"
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

e.target was right on...

I also had to do ff2 || ff3 to make it function mostly right... (it's forming oddly in ff)

>>>>>>as the you know that the anchor element is going to be a child of the LI element, and therefore the second child node of the LI element will be the div you want to display.


I sorry could you expian or show an example... I'm still new to scripting, though I'm working on it :)  

I'm also leary of tring to combined the IE7 and FF versions... I understand the point but ... just not enough time behide me to be like duh I can do that... lol...

thanks for the help here...

jeremyBass
SOLUTION
Avatar of seeflat
seeflat
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of seeflat
seeflat
also, nextSibling is an option
var elemDiv = e.srcEvent.nextSibling;
elemDiv.style.display = 'block';
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

?? um.. lost me I think... ??

Um I guess I'll have to pounder that...

Any other tips?

thanks again for the help...
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

Ok may-be I'm being dumb here...

this is what I did (started with IE7)

var elem = e.srcEvent;
var elemLI = elem.parentNode;
var elemDiv = elemLI.childNodes[1];
      $("a.tooltip").hover(function(e){                               
            elemDiv.t = elemDiv.innerHTML;
            elemDiv.innerHTML = "";      
            $("body").append("<div id='tooltip'></div>");
            $("#tooltip")
                  .cornflex('whitebox', {
                  omega: 20,
      image_t: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png',
      image_r: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_r.png',
      image_b: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_b.png',
      image_l: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_l.png',
                  alpha: 12,
                  beta: 18,
                  gamma: 24,
                  delta: 18});
//
//       Get number of doctors... reads off the menu
//       ---------------------
//
      var list =
      {
                  "Anesthesia"              : 9,
         "Cardiology"              : 17,
         "Dentistry"               : 4,
         "Dermatology"             : 1,
         "Emergency Medicine"      : 6,
         "Family Practice"         : 20,
         "Gastroenterology"        : 3,
         "General Surgery"         : 7,
         "Gynecology"              : 5,
         "Hematology"              : 3,
         "Hospitalist Medicine"    : 5,
         "Internal Medicine"       : 10,
         "Invasive Cardiology"     : 1,
         "Nephrology"              : 1,
         "Neurology"               : 4,
         "Neurosurgery"            : 2,
         "Obstetrician"            : 5,
         "Oncology"                : 5,
         "Ophthalmology"           : 5,
         "Oral Surgery"            : 1,
         "Orthopedic Surgery"      : 8,
         "Otolaryngology"          : 2,
         "Pain Management"         : 0,
         "Pathology"               : 5,
         "Pediatrics"              : 8,
         "Plastic Surgery"         : 1,
         "Psychiatry"              : 4,
         "Pulmonology"             : 2,
         "Radiation Oncology"      : 1,
         "Radiology"               : 4,
         "Sleep Medicine"          : 1,
             "Surgery"                 : 6,
         "Surgical Assistant"      : 2,
         "Urology"                 : 4,
         "Wound Care"              : 1
      }
      var numDoctors = list[e.srcElement.innerHTML];
            $('.cornflex.whitebox .t .c').append("<div id='testOfCorn'>"+ elemDiv.t.replace(" 0 ", " " + numDoctors + " ") +"</div>");      
var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
                  
            $(".cornflex.whitebox")      
                  .css("top",(yMouse-25) + "px")
                  .css("left",(xMouse+12) + "px")
                  .fadeIn("fast");
            },
      function(){
            elemDiv.innerHTML = elemDiv.t;            
            $("#testOfCorn").remove();
            $(".cornflex.whitebox").remove();
 
    });      
      $("a.tooltip").mousemove(function(e){
var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
            $(".cornflex.whitebox")
                  .css("top",(yMouse-25) + "px")
                  .css("left",(xMouse+12) + "px");
      });

Didn't work... throw one error but it was at a line with nothing in it... where did I go off at... thanks for the help here...
jeremyBass


of  this is the template <li><a>


<li>
          <a name="staticLink" href="{$items[numloop].link}" class="tooltip" title="" target="_self" onMouseDown="javascript:toggleDiv('hideMe3')">{$items[numloop].title}</a>
          <div style="display:none;">Currently there are :<br/> 0  Doctors in<br/> {$items[numloop].title}</div>
</li>
SOLUTION
Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

lol... sorry RQuadling I total didn't even read that you posted before posting in the other one ... anyways...

so on that line, can we run through an example on this... hoping it'll bring this question closer for me to getting it...

I have <a> all over the site that has
onMouseDown="javascript:toggleDiv('hideMe3')"

So going through that page link you posted... I thought I should end up with :
 $("a").click(function(event) {
  toggleDiv('hideMe3')
});
to replace the onMouseDown... at least it seemed... am I even close? (this didn't work)
thanks again for the help...
jeremyBass




for you refrence this is the toggleDiv script.. (it's slated to be worked on but were it is now...)
jeremyBass
<script language="JavaScript"  type="text/javascript">
var req=null;
function GetXmlHttpObject()
{
var xmlHttp=null;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
return xmlHttp;
} 
function startLoad(source,divid) { 
    req = GetXmlHttpObject();
    if( req )
    {
    	req.open('GET', source, true); 
    	req.onreadystatechange=function(){ finishLoad(divid); };
    	req.send(null); 
    }
} 
function finishLoad(divid) { 
    if (req.readyState==4) {   // request is done 
                if (req.status==200) { // "OK"
                 //alert("Site  Status 200")
				 toggleDiv(divid);
				 
            } else{
            //alert("Site  Status NOT 200")
            }
    } 
}
 
function toggleDiv(divid){
    var prefix = '';
    if (window.event.ctrlKey) {
         document.test.control.value = 'true';
      }else{
         if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
          }else{
      document.getElementById(divid).style.display = 'none';
   		 }
      }
 
}
//-->
</script>

Open in new window

Avatar of Richard Quadling
Richard Quadling
Flag of United Kingdom of Great Britain and Northern Ireland image
It is all about building a sensible structure.

If it was me, I would ...

1 = Have 1 DIV which is part of the main HTML page but starts off with style="display:none;"
2 = All <a> where you want the div to operate, add a class="magicDiv". You don't need a CSS class, just the tag needs to exist.
3 = Using unobtrusive JS ...

$$('magicDiv').observe('mouseover', showDiv).observe('mouseout', hideDiv);

That is enough to add the mouseover/mouseout to every <a> with a magicDiv class.


showDiv and hideDiv have the same signature ...


function xxxxDiv(ev) {
}


and $(ev.target) will contain the element which triggered the mouse action.

Now you can extract the data you want from (  $(ev.target).title ) and assign it to the div as you want. Then $('magicDiv').show() or .hide() as you need.

Avatar of James_Bomb
James_Bomb
Flag of Netherlands image
Jeremy,

Below I added a snippet of code. The first part

// Toggle hideMe3 when a link is clicked
$('a').click(function(){
   $('div#hideMe3').toggle();
});

adds the onclick event to every link element on the page. I can't see the reason why you would add an onclick event to every link but this is the way it works best. You don't need the toggleDiv since you are using jquery. See http://docs.jquery.com/Effects/toggle.

The second part adds the popup to the links with tooltip class. You have to understand that the cornflex script encapsulates the tooltip div. So you have to hide and show the cornflex div to hide and show the popup. Thats why you have to replace the css of #tooltip with .whitebox that I added to the bottom of the script.

Hope this will help you.
$(document).ready(function(){
   // Toggle hideMe3 when a link is clicked
   $('a').click(function(){
      $('div#hideMe3').toggle();
   });
	
   // Show and hide popup on hover and leave
   $("body").append("<div id='tooltip'></div>");
   $("#tooltip").cornflex('whitebox', {
      omega: 20,
      image_t: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png',
      image_r: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_r.png',
      image_b: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_b.png',
      image_l: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_l.png',
      alpha: 12,
      beta: 18,
      gamma: 24,
      delta: 18
   });
	
   var list = {
      "Anesthesia"              : 9,
      "Cardiology"              : 17,
      "Dentistry"               : 4,
      "Dermatology"             : 1,
      "Emergency Medicine"      : 6,
      "Family Practice"         : 20,
      "Gastroenterology"        : 3,
      "General Surgery"         : 7,
      "Gynecology"              : 5,
      "Hematology"              : 3,
      "Hospitalist Medicine"    : 5,
      "Internal Medicine"       : 10,
      "Invasive Cardiology"     : 1,
      "Nephrology"              : 1,
      "Neurology"               : 4,
      "Neurosurgery"            : 2,
      "Obstetrician"            : 5,
      "Oncology"                : 5,
      "Ophthalmology"           : 5,
      "Oral Surgery"            : 1,
      "Orthopedic Surgery"      : 8,
      "Otolaryngology"          : 2,
      "Pain Management"         : 0,
      "Pathology"               : 5,
      "Pediatrics"              : 8,
      "Plastic Surgery"         : 1,
      "Psychiatry"              : 4,
      "Pulmonology"             : 2,
      "Radiation Oncology"      : 1,
      "Radiology"               : 4,
      "Sleep Medicine"          : 1,
      "Surgery"                 : 6,
      "Surgical Assistant"      : 2,
      "Urology"                 : 4,
      "Wound Care"              : 1
   }
	
   $('a.tooltip').hover(
      function(e){
	var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
	var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
 
	var numDoctors = list[$(this).text()];
	// Only show the tooltip if the key exists in the array
         if(numDoctors){
            $('div#tooltip').text("Currently there are :<br/> " + numDoctors +" Doctors in<br/> Surgical Assistant");
            $(".cornflex")      
	      .css("top",(yMouse-25) + "px")
	      .css("left",(xMouse+12) + "px")
	      .fadeIn("fast")
	   .end();
	}
      },
      function(e){
         $(".cornflex").fadeOut("fast");
      }
   );
	
   $("a.tooltip").mousemove(function(e){
      var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
      var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
 
      $(".cornflex.whitebox")
         .css("top",(yMouse-25) + "px")
         .css("left",(xMouse+12) + "px")
      .end();
   });
 
});
 
<style type="text/css">
.whitebox {
	display:none;
	position:absolute;
	width:200px;
}
</style

Open in new window

Avatar of James_Bomb
James_Bomb
Flag of Netherlands image
Sorry typo.

$('div#tooltip').text("Currently there are :<br/> " + numDoctors +" Doctors in<br/> Surgical Assistant");

Should be

$('div#tooltip').text("Currently there are :<br/> " + numDoctors +" Doctors in<br/>" + $(this).text());
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

James_Bomb
that is more on the lines as I was thinking... the implementation was not right but spot on with the idea...

only one thing, well two,
the really issue... the toottip is blink some times....

and the minor  \n and <br/> are not respected... they just print to as text...

any ideas on this... Thanks every one for the help here...
jeremyBass


here is the mostly working code..

$(document).ready(function(){
   // Toggle hideMe3 when a link is clicked
 
	
   // Show and hide popup on hover and leave
   $("body").append("<div id='tooltip'></div>");
   $("#tooltip").cornflex('whitebox', {
      omega: 20,
      image_t: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png',
      image_r: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_r.png',
      image_b: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_b.png',
      image_l: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_l.png',
      alpha: 12,
      beta: 18,
      gamma: 24,
      delta: 18
   });
	
   var list = {
      "Anesthesia"              : 9,
      "Cardiology"              : 17,
      "Dentistry"               : 4,
      "Dermatology"             : 1,
      "Emergency Medicine"      : 6,
      "Family Practice"         : 20,
      "Gastroenterology"        : 3,
      "General Surgery"         : 7,
      "Gynecology"              : 5,
      "Hematology"              : 3,
      "Hospitalist Medicine"    : 5,
      "Internal Medicine"       : 10,
      "Invasive Cardiology"     : 1,
      "Nephrology"              : 1,
      "Neurology"               : 4,
      "Neurosurgery"            : 2,
      "Obstetrician"            : 5,
      "Oncology"                : 5,
      "Ophthalmology"           : 5,
      "Oral Surgery"            : 1,
      "Orthopedic Surgery"      : 8,
      "Otolaryngology"          : 2,
      "Pain Management"         : 0,
      "Pathology"               : 5,
      "Pediatrics"              : 8,
      "Plastic Surgery"         : 1,
      "Psychiatry"              : 4,
      "Pulmonology"             : 2,
      "Radiation Oncology"      : 1,
      "Radiology"               : 4,
      "Sleep Medicine"          : 1,
      "Surgery"                 : 6,
      "Surgical Assistant"      : 2,
      "Urology"                 : 4,
      "Wound Care"              : 1
   }
 
   $('a.tooltip').hover(
      function(e){
	var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
	var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
 
 
            	var numDoctors = list[$(this).text()];
	// Only show the tooltip if the key exists in the array
         if(numDoctors){
            $('.cornflex.whitebox .t .c').text("Currently there are : \n"  + numDoctors +" Doctors in  \n" + $(this).text());
            $(".whitebox")   
			
	      .css("top",(yMouse-25) + "px")
	      .css("left",(xMouse+12) + "px")
	      .fadeIn("slow")
	   .end();
	}
      },
      function(e){
         $(".whitebox").fadeOut("slow").end();
   });
 
   $("a.tooltip").mousemove(function(e){
      var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
      var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
 
      $(".cornflex.whitebox")
         .css("top",(yMouse-25) + "px")
         .css("left",(xMouse+12) + "px")
      .end();
   });
 
});

Open in new window

Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

oh and
   $('a').click(function(){
      $('div#hideMe3').toggle();
   });

was spot on... didn't help here like i thought but spot on... thanks
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

James_Bomb
Shot I got all worked up for this... but your solution does not work with
float-w-img.js.txt
the reason why is the img needs to be out putted from
{if file_exists($image)}<img src='{root_url}/{$image}' title='{$items[numloop].title}' alt='{$items[numloop].title}' style='padding-right:30px; margin-top:10px;' /><br/>{/if}{if $items[numloop].centerlocation == true}<span class='loca'>{$items[numloop].centerlocation}</span>{/if}<br/>
        {$items[numloop].title},<br/> {$items[numloop].nametitle}

but I can't do that to a js file... 99% sure on that...

so how would I work from may-be pulling the stuff out of a div like this may-be?

<div class="tooltiptext" style="display:none;">
{if file_exists($image)}<img src='{root_url}/{$image}' title='{$items[numloop].title}' alt='{$items[numloop].title}' style='padding-right:30px; margin-top:10px;' /><br/>{/if}{if $items[numloop].centerlocation == true}<span class='loca'>{$items[numloop].centerlocation}</span>{/if}<br/>
        {$items[numloop].title},<br/> {$items[numloop].nametitle}
</div>

thanks for the help here...
Avatar of James_Bomb
James_Bomb
Flag of Netherlands image
Jeremy,

Could you explain to me what the difference is between float.js and float_w_img.js?

I just took a look at your scripts and webpages and you first have to correct some errors.

For instance

$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<div id='tooltip'></div>");
......
......

You have to raplace the $("body").append("<div id='tooltip'></div>"); to the $(document).ready(). On mouseover you show it ($('div#tooltip').fadeIn("fast")) and on mouseout you hide it($('div#tooltip').fadeOut("fast")). That way it's far more efficient then to add and remove it each time.

Second
Why are you testing to see if the browser is mozilla or IE? I don 't see how that is going to help. Try removing it and see what happens.

Third
My line
$('div#tooltip').text("Currently there are :<br/> " + numDoctors +" Doctors in<br/> Surgical Assistant");
indeed doesn't work in IE. You can replace this with
$('div#tooltip').html("Currently there are :<br/> " + numDoctors +" Doctors in<br/> Surgical Assistant");

Fourth
You may solve the blinking by adding display: block to the a.tooltip in your css.  

Fifth
It looks to me if you took parts of my script and pasted them into your script. Could you try to paste my script into your float.js and use it as a base work on. I think your script is getting to complicated and it's easy to lose the overview. You have to keep it clean.

All in all I think you are making it to difficult for yourself. There's a lot going on in the source of the web pages and I think it would be wise to organize it a littlebit. There are snippets of code everywhere and that doesn't make it easier. Keep all of your code in separate js-files and your css in separate css-files. That way you always know where your code is.

One last question: Why are all your pages ssl protected since your login is on a separate page? Your pages would be much faster it you removed the ssl from the pages where it isn't needed.
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

Basicly right now, for this rev.
>float.js-reads the menu to find the number of doctors...
>float_w_img.js- doesn't

the spilt is temporary... for my testing and learning...  but the was not the point of my comment on the use of the img in the float ... the point of concern is that I have to put the image in the title (which most everyone seems to frown on) or in a hidden div, and pull from there... so might as well do the other (w/o img) the same way so that they can be "unspilt"...

>>>Why are you testing to see if the browser is mozilla or IE?
I know I did but that is happenstance of the need to test IE6 or IE7... I was going to combine IE7 and FF2 FF3 as their is suppose to be a middle ground... but IE6 ... well it doesn't handle png as I'm sure you know, so this is the alt ( the jquery.corner.js)

>>>It looks to me if you took parts of my script and pasted them into your script
quite the opposite... pasted you cold and the big one disapared... your view for the structure was a little off... so I workd backwards towards what I know works but is not that great...  

>>>>>>>>>>>>>All in all I think you are making it to difficult for yourself. There's a lot going on in the source of the web pages and I think it would be wise to organize it a littlebit. .....  .That way you always know where your code is.

thou I'd agree I've made it hard to make grad leaps for my self here... It's only the out put code that is messy (for now as I've worked on it all over the night more) but it is super organized on the back... just working one side then the other...

Heck tonight I brought the dead download from 500kb to 280kb... (staged prediction oriented)

Empty Cache       
      9.6K      1      HTML/Text
      82.6K      4      Flash Objects
      49.6K      8      JavaScript Files
      31.6K      4      Stylesheet Files
      83.1K      11      CSS Images
       32.2K      7      Images
289.0K      Total size
35      HTTP requests
      
 Primed Cache
      9.6K      1      HTML/Text
      21.2K      1      Stylesheet File
      0.0K      1      CSS Image
30.8K      Total size
3      HTTP requests


I know I have a grip of a ways to go.... but I'm working on it...


>>>>>One last question: Why are all your pages ssl protected since your login is on a separate page?

Right now to work in line with the intranet... it will not stay this way.... just a band-aid to work with the set up for now, the intranet is out of my control...


I'm hearing what your are saying... and mostly it all is inline with what is planed or in progress... well thanks for the help here... hope to knock this one down and get to finishing up...
Avatar of James_Bomb
James_Bomb
Flag of Netherlands image
Jeremy,

The code below works with the images. It's a different concept because the divs, that become the tooltip, are already present in the source code.

Hope this will get you further.
// First select all tooltips and let cornflex do his thing
$(".tooltiptext")
   .cornflex('whitebox', {
      omega: 20,
      image_t: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png',	    
      image_r: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_r.png',
      image_b: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_b.png',
      image_l: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_l.png',
      alpha: 12,
      beta: 18,
      gamma: 24,
      delta: 18})
   .css({display: 'block'}); //Show .tooltiptext because it has to show up in the tooltip itself
	
   $('a.tooltip').hover(
      function(e){
	var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
	var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
	
         // Show whitebox by getting the first sibiling after the link that fired the hover event
         $(this)
            .next('.whitebox')      
	   .css("top",(yMouse-25) + "px")
	   .css("left",(xMouse+12) + "px")
	   .fadeIn("fast")
	.end();
      },
      function(e){
	// Hide whitebox
         $(this)
	   .next('.whitebox') 
	   .fadeOut("fast")
	.end();
      }
);
	
$("a.tooltip").mousemove(function(e){
   var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
   var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
   $(".cornflex.whitebox")
      .css("top",(yMouse-25) + "px")
      .css("left",(xMouse+12) + "px")
   .end();
});

Open in new window

Avatar of James_Bomb
James_Bomb
Flag of Netherlands image
You're having problems with float_w_img.js because you forget to unhide the tooltiptext class. The tooltiptext class stays hidden and then you only see the bottom of the tooltip on hover.
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

Ok this is what your script out puts(in code area)...  not working there.... it show all the cornflex stuff inline ... untill I hover and then it's nothing ever... thats it...

is there a way do to something more like this
 this.tooltip = function(){
$("a.tooltip").hover(function(e){      
            var TThtml = $(".tooltiptext").innerHTML;
            $("body").append("<div id='tooltip'></div>");
            $("#tooltip")
                  .cornflex('whitebox', {
                  omega: 20,
      image_t: 'https://www.sjrmc.org/Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png',
      image_r: 'https://www.sjrmc.org/Scripts/RoundedBoxes/wA/whitebox_withARROW_r.png',
      image_b: 'https://www.sjrmc.org/Scripts/RoundedBoxes/wA/whitebox_withARROW_b.png',
      image_l: 'https://www.sjrmc.org/Scripts/RoundedBoxes/wA/whitebox_withARROW_l.png',
                  alpha: 12,
                  beta: 18,
                  gamma: 24,
                  delta: 18});
            $('.cornflex.whitebox .t .c').append("" + TThtml + "");
                  
var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
                  
            $(".cornflex.whitebox")      
                  .css("top",(yMouse-25*10) + "px")
                  .css("left",(xMouse+12) + "px")
                  .fadeIn("fast");
    },
      function(){            
            $(".cornflex.whitebox").remove();
    });      
      $("a.tooltip").mousemove(function(e){
var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
            $(".cornflex.whitebox")
                  .css("top",(yMouse-25) + "px")
                  .css("left",(xMouse+12) + "px");
      });      
};
$(document).ready(function(){
      tooltip();
});

this is not working either but the short is that it creat the tootip as needed and wraps them then  shows them while flosting them at the mouse xy....

I'm spit balling try to work this out... thanks for the help here...
jeremyBass
<li>\n \n \n \n <a name="staticLink" href="https://www.sjrmc.org/DoctorDirectory/Dir_Internal-Medicine/patricia-a-brady-md/" class="tooltip" title="" target="_self">Patricia A. Brady, MD</a>\n
  <div style="padding: 0pt 38px 44px 0pt; display: none; top: 643px; left: 719px;" class="cornflex whitebox">
    <div style="background-image: url(Scripts/RoundedBoxes/whitebox_2_t.png);" class="t">
      <div style="padding-top: 12px; padding-left: 18px; position: relative; top: 10px; left: 10px;" class="c">
        <div class="tooltiptext" style="display: none;">\n<br>
          \n Patricia A. Brady,<br>
          MD\n</div>
      </div>
    </div>
    <div style="width: 38px; bottom: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_r.png);" class="r"></div>
    <div style="width: 38px; height: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_b.png);" class="b"></div>
    <div style="height: 44px; right: 38px; background-image: url(Scripts/RoundedBoxes/whitebox_2_l.png);" class="l"></div>
    <div style="width: 38px; bottom: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_r.png);" class="r"></div>
    <div style="width: 38px; height: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_b.png);" class="b"></div>
    <div style="height: 44px; right: 38px; background-image: url(Scripts/RoundedBoxes/whitebox_2_l.png);" class="l"></div>
    <div style="width: 38px; bottom: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_r.png);" class="r"></div>
    <div style="width: 38px; height: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_b.png);" class="b"></div>
    <div style="height: 44px; right: 38px; background-image: url(Scripts/RoundedBoxes/whitebox_2_l.png);" class="l"></div>
    <div style="width: 38px; bottom: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_r.png);" class="r"></div>
    <div style="width: 38px; height: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_b.png);" class="b"></div>
    <div style="height: 44px; right: 38px; background-image: url(Scripts/RoundedBoxes/whitebox_2_l.png);" class="l"></div>
    <div style="width: 38px; bottom: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_r.png);" class="r"></div>
    <div style="width: 38px; height: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_b.png);" class="b"></div>
    <div style="height: 44px; right: 38px; background-image: url(Scripts/RoundedBoxes/whitebox_2_l.png);" class="l"></div>
    <div style="width: 38px; bottom: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_r.png);" class="r"></div>
    <div style="width: 38px; height: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_b.png);" class="b"></div>
    <div style="height: 44px; right: 38px; background-image: url(Scripts/RoundedBoxes/whitebox_2_l.png);" class="l"></div>
    <div style="width: 38px; bottom: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_r.png);" class="r"></div>
    <div style="width: 38px; height: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_b.png);" class="b"></div>
    <div style="height: 44px; right: 38px; background-image: url(Scripts/RoundedBoxes/whitebox_2_l.png);" class="l"></div>
    <div style="width: 38px; bottom: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_r.png);" class="r"></div>
    <div style="width: 38px; height: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_b.png);" class="b"></div>
    <div style="height: 44px; right: 38px; background-image: url(Scripts/RoundedBoxes/whitebox_2_l.png);" class="l"></div>
    <div style="width: 38px; bottom: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_r.png);" class="r"></div>
    <div style="width: 38px; height: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_b.png);" class="b"></div>
    <div style="height: 44px; right: 38px; background-image: url(Scripts/RoundedBoxes/whitebox_2_l.png);" class="l"></div>
    <div style="width: 38px; bottom: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_r.png);" class="r"></div>
    <div style="width: 38px; height: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_b.png);" class="b"></div>
    <div style="height: 44px; right: 38px; background-image: url(Scripts/RoundedBoxes/whitebox_2_l.png);" class="l"></div>
  </div>
  \n\n </li>
\n\n
<li>\n \n \n \n

Open in new window

Avatar of James_Bomb
James_Bomb
Flag of Netherlands image
Jeremy,

Your css is wrong. div.whitebox should be positioned absolute not div#tooltip. You have to understand that the whitebox is the actual popup.

Replace

#tooltip {
   background:#F7F5D1 none repeat scroll 0% 0%;
   border:1px solid #333333;
   color:#333333;
   display:none;
   padding:2px 5px;
   position:absolute;
   width:300px;
}

with

#tooltip {
   background:#F7F5D1 none repeat scroll 0% 0%;
   border:1px solid #333333;
   color:#333333;
   padding:2px 5px;
}

.whitebox {
   display:none;
   position:absolute;
   width:300px;
}
Avatar of James_Bomb
James_Bomb
Flag of Netherlands image
I had a look at the output and I figured out why so much classes of r, b and l are being added. There is an error in the jquery.cornflex.js.

Replace

$(this).each(function(){
   $(this).wrap('<div class="cornflex ' + settings.boxname + '"><div class="t"><div class="c"></div></div></div>');
   $('.cornflex.' + settings.boxname).append('<div class="r"></div><div class="b"></div><div class="l"></div>');
});

with

$(this).each(function(){
   $(this).wrap('<div class="cornflex ' + settings.boxname + '"><div class="t"><div class="c"></div></div></div>');
   $(this).parent().parent().parent().append('<div class="r"></div><div class="b"></div><div class="l"></div>');
});
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

Hello, sorry I wanted to work this as much as I could before I came back... so this is what is the deal...
$(this).each(function(){
   $(this).wrap('<div class="cornflex ' + settings.boxname + '"><div class="t"><div class="c"></div></div></div>');
   $(this).parent().parent().parent().append('<div class="r"></div><div class="b"></div><div class="l"></div>');
});

was spot on... worked great...

as far as using you script version and the suggested CSS rules... it's not going well... this is where I'm at... the code below had some response... in IE if you zoom to like 30% or so you can see the float... the float is not showing up at all in FF and in IE it is also picking up the .cornflex from it's parent... not really sure where to go from here... I work backwards from yours to get this far (showing up when zoomed out)  any ideas on where to go from here? Thanks for the help here... have a great one today...
jeremyBass

Side note: I felt it up to veiw since it seems stable... 

<style type="text/css">
<!--
#tooltip {
   background:#F7F5D1 none repeat scroll 0% 0%;
   border:1px solid #333333;
   color:#333333;
   padding:2px 5px;
}
 
.whitebox1 {
   display:none;
   position:absolute;
   width:300px;
 
}
-->
</style>
 
 
 this.tooltip = function(){
 
// First select all tooltips and let cornflex do his thing
$(".tooltiptext")
   .cornflex('whitebox1', {
      omega: 20,
      image_t: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png',	    
      image_r: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_r.png',
      image_b: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_b.png',
      image_l: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_l.png',
      alpha: 12,
      beta: 18,
      gamma: 24,
      delta: 18})
   .css({display: 'block'}); //Show .tooltiptext because it has to show up in the tooltip itself
	
   $('a.tooltip').hover(
      function(e){
	var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
	var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
	
         // Show whitebox by getting the first sibiling after the link that fired the hover event
         $(this)
            .next('.cornflex whitebox1')      
	   .css("top",(yMouse-25) + "px")
	   .css("left",(xMouse+12) + "px")
	   .fadeIn("fast")
	.end();
      },
      function(e){
	// Hide whitebox
         $(this)
	   .next('.cornflex whitebox1') 
	   .fadeOut("fast")
	.end();
      }
);
	
$("a.tooltip").mousemove(function(e){
   var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
   var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
   $(".cornflex whitebox1")
      .css("top",(yMouse-25) + "px")
      .css("left",(xMouse+12) + "px")
   .end();
});
 
};
$(document).ready(function(){
	tooltip();
});

Open in new window

Avatar of James_Bomb
James_Bomb
Flag of Netherlands image
  $('a.tooltip').hover(
      function(e){
      var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
      var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
      
         // Show whitebox by getting the first sibiling after the link that fired the hover event
         $(this)
            .next('.cornflex whitebox1')      
         .css("top",(yMouse-25) + "px")
         .css("left",(xMouse+12) + "px")
         .fadeIn("fast")
      .end();
      },
      function(e){
      // Hide whitebox
         $(this)
         .next('.cornflex whitebox1')
         .fadeOut("fast")
      .end();
      }
);

Should be

   $('a.tooltip').hover(
      function(e){
      var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
      var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
      
         // Show whitebox by getting the first sibiling after the link that fired the hover event
         $(this)
            .next('.whitebox1')      
         .css("top",(yMouse-25) + "px")
         .css("left",(xMouse+12) + "px")
         .fadeIn("fast")
      .end();
      },
      function(e){
      // Hide whitebox
         $(this)
         .next('.whitebox1')
         .fadeOut("fast")
      .end();
      }
);

And

$("a.tooltip").mousemove(function(e){
   var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
   var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
   $(".cornflex whitebox1")
      .css("top",(yMouse-25) + "px")
      .css("left",(xMouse+12) + "px")
   .end();
});
 
Should be

$("a.tooltip").mousemove(function(e){
   var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
   var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
   $(this)
      .next(".whitebox1")
      .css("top",(yMouse-25) + "px")
      .css("left",(xMouse+12) + "px")
   .end();
});

I use $(this).next('.whitebox1') because there are more divs with the class whitebox1. By using $(this) you are sure to move the right whitebox1.
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

Ithis still haveing the same problem... in show up only when zoomed out, inside the big div not above everything, with the big green cornflex not the one in the script...  little lost here... here is a sample of the dom


<div class="category_items">
<!--[if gte IE 7]><!-->

<script language="JavaScript" type="text/javascript">$(document).ready(function(){  
                $("#cornflex1").cornflex('whitebox_Dira', {
        omega: 20,
        image_t: 'Scripts/RoundedBoxes/whitebox_2_t.png',
        image_r: 'Scripts/RoundedBoxes/whitebox_2_r.png',
        image_b: 'Scripts/RoundedBoxes/whitebox_2_b.png',
        image_l: 'Scripts/RoundedBoxes/whitebox_2_l.png',
        alpha: 12,
        beta: 18,
        gamma: 24,
        delta: 18
                });
});
</script>
<div style="padding: 0pt 38px 44px 0pt;" class="cornflex whitebox_Dira" id="cornflex whitebox_Dira"><div style="background-image: url(Scripts/RoundedBoxes/whitebox_2_t.png);" class="t"><div style="padding-top: 12px; padding-left: 18px; position: relative; top: 10px; left: 10px;" class="c"><div id="cornflex1">
<!--<![endif]-->
<!--[if lte IE 6]>
<div class="Round" id="box1">
<![endif]-->
          <span style="float: right;">Return to: <a href="https://www.sjrmc.org/DoctorDirectory/" title="Start Here To Get The Right Help From The Right Doctor.">Find a Doctor</a><br>
</span><h3 style="margin-top: -10px; font-size: 18px;">Doctors</h3>
        <ul id="DocList">             <li>
 
 
         
          <a name="staticLink" href="https://www.sjrmc.org/DoctorDirectory/Dir_Hospitalist-Medicine/william-c-dir/" class="tooltip" title="" target="_self">William C. Dir, MD</a>
<div style="padding: 0pt 38px 44px 0pt;" class="cornflex whitebox1" id="cornflex whitebox1"><div style="background-image: url(Scripts/RoundedBoxes/whitebox_2_t.png);" class="t"><div style="padding-top: 12px; padding-left: 18px; position: relative; top: 10px; left: 10px;" class="c"><div style="display: block;" class="tooltiptext">
<span class="loca">St. Joseph Regional Medical Center</span><br>
        William C. Dir,<br> MD
</div></div></div><div style="width: 38px; bottom: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_r.png);" class="r"></div><div style="width: 38px; height: 44px; background-image: url(Scripts/RoundedBoxes/whitebox_2_b.png);" class="b"></div><div style="height: 44px; right: 38px; background-image: url(Scripts/RoundedBoxes/whitebox_2_l.png);" class="l"></div></div>

            </li>



As you can see the  .tooltiptext  is getting wraped by the wrong one... not sure why... any ideas?

this.tooltip = function(){
 
var agent= navigator.userAgent.toLowerCase();
var ver = parseInt(navigator.appVersion);
 
var ie = agent.indexOf("msie")>=0;
var ie6=ie && agent.indexOf("msie 6")>=0;
var ie7=ie && agent.indexOf("msie 7")>=0;
 
var ff=!ie && agent.indexOf("mozilla")>=0;
var ff2=ff && ver==4;
var ff3=ff && ver==5;
 
if (ff2 || ff3 || ie7){
// First select all tooltips and let cornflex do his thing
$(".tooltiptext")
   .cornflex('whitebox1', {
      omega: 20,
      image_t: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png',	    
      image_r: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_r.png',
      image_b: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_b.png',
      image_l: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_l.png',
      alpha: 12,
      beta: 18,
      gamma: 24,
      delta: 18})
   .css({display: 'block'}); //Show .tooltiptext because it has to show up in the tooltip itself
	
  $('a.tooltip').hover(
      function(e){
      var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
      var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
      
         // Show whitebox by getting the first sibiling after the link that fired the hover event
         $(this)
            .next('.whitebox1')      
         .css("top",(yMouse-25) + "px")
         .css("left",(xMouse+12) + "px")
         .fadeIn("fast")
      .end();
      },
      function(e){
      // Hide whitebox
         $(this)
         .next('.whitebox1') 
         .fadeOut("fast")
      .end();
      }
);
 
	
$("a.tooltip").mousemove(function(e){
   var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
   var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
   $(this)
      .next(".whitebox1")
      .css("top",(yMouse-25) + "px")
      .css("left",(xMouse+12) + "px")
   .end();
});
 
}else{
	$(".tooltiptext").css({display: 'none'});
}
};
// starting the script on page load
$(document).ready(function(){
	tooltip();
});

Open in new window

Avatar of James_Bomb
James_Bomb
Flag of Netherlands image
Jeremy,

Copy the content of the attached code in a new file and start it up in Firefox or IE. You will see that the tooltips are working perfectly. The javascript is copied from your last post. Your javascript is ok don't change it. I think your css is wrong somewhere. Check the whitebox, cornflex and tooltiptext classes and ids.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://dev.pnumb.com/svn/cornflex/trunk/css/cornflex-common.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.pnumb.com/svn/cornflex/trunk/includes/jquery.cornflex.js"></script>
<script type="text/javascript">
//<![CDATA[
this.tooltip = function(){
 
var agent= navigator.userAgent.toLowerCase();
var ver = parseInt(navigator.appVersion);
 
var ie = agent.indexOf("msie")>=0;
var ie6=ie && agent.indexOf("msie 6")>=0;
var ie7=ie && agent.indexOf("msie 7")>=0;
 
var ff=!ie && agent.indexOf("mozilla")>=0;
var ff2=ff && ver==4;
var ff3=ff && ver==5;
 
if (ff2 || ff3 || ie7){
// First select all tooltips and let cornflex do his thing
$(".tooltiptext")
   .cornflex('whitebox1', {
      omega: 20,
      image_t: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png',	    
      image_r: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_r.png',
      image_b: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_b.png',
      image_l: 'https://www.sjrmc.org/Core/Scripts/RoundedBoxes/wA/whitebox_withARROW_l.png',
      alpha: 12,
      beta: 18,
      gamma: 24,
      delta: 18})
   .css({display: 'block'}); //Show .tooltiptext because it has to show up in the tooltip itself
	
  $('a.tooltip').hover(
      function(e){
      var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
      var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
      
         // Show whitebox by getting the first sibiling after the link that fired the hover event
         $(this)
            .next('.whitebox1')      
         .css("top",(yMouse-25) + "px")
         .css("left",(xMouse+12) + "px")
         .fadeIn("fast")
      .end();
      },
      function(e){
      // Hide whitebox
         $(this)
         .next('.whitebox1') 
         .fadeOut("fast")
      .end();
      }
);
 
	
$("a.tooltip").mousemove(function(e){
   var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
   var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
   $(this)
      .next(".whitebox1")
      .css("top",(yMouse-25) + "px")
      .css("left",(xMouse+12) + "px")
   .end();
});
 
}else{
	$(".tooltiptext").css({display: 'none'});
}
};
// starting the script on page load
$(document).ready(function(){
	tooltip();
});
//]]>
</script>
<style type="text/css">
.whitebox1 {
	display:none;
	position:absolute;
	width:200px;
}
</style>
</head>
<body>
<h3>Doctors</h3>
<ul id="DocList">
  <li> <a name="staticLink" href="https://www.sjrmc.org/DoctorDirectory/Dir_Hospitalist-Medicine/william-c-dir/" class="tooltip" title="" target="_self" >William C. Dir, MD</a>
    <div class="tooltiptext" style="display:none;"> <span class='loca'>St. Joseph Regional Medical Center</span><br />
      William C. Dir,<br />
      MD </div>
  </li>
  <li> <a name="staticLink" href="https://www.sjrmc.org/DoctorDirectory/Dir_Hospitalist-Medicine/jeff-harris-md/" class="tooltip" title="" target="_self" >Jeff Harris, MD</a>
    <div class="tooltiptext" style="display:none;"> <span class='loca'>St. Joseph Regional Medical Center</span><br />
      Jeff Harris,<br />
      MD </div>
  </li>
  <li> <a name="staticLink" href="https://www.sjrmc.org/DoctorDirectory/Dir_Hospitalist-Medicine/barbara-kammer-md/" class="tooltip" title="" target="_self" >Barbara Kammer, MD</a>
    <div class="tooltiptext" style="display:none;"> <img src='https://www.sjrmc.org/uploads/images/catalog/barbara-kammer-md_t_1_100_1.jpg' title='Barbara Kammer' alt='Barbara Kammer' style='padding-right:30px; margin-top:10px;' /><br/>
      <span class='loca'>St. Joseph Regional Medical Center</span><br />
      Barbara Kammer,<br />
      MD </div>
  </li>
  <li> <a name="staticLink" href="https://www.sjrmc.org/DoctorDirectory/Dir_Hospitalist-Medicine/michael-c-minick-md/" class="tooltip" title="" target="_self" >Michael C. Minick, MD</a>
    <div class="tooltiptext" style="display:none;"> <span class='loca'>St. Joseph Regional Medical Center</span><br />
      Michael C. Minick,<br />
      MD </div>
  </li>
  <li> <a name="staticLink" href="https://www.sjrmc.org/DoctorDirectory/Dir_Hospitalist-Medicine/thomas-r-strobel-md/" class="tooltip" title="" target="_self" >Thomas R. Strobel, MD</a>
    <div class="tooltiptext" style="display:none;"> <span class='loca'>St. Joseph Regional Medical Center</span><br />
      Thomas R. Strobel,<br />
      MD </div>
  </li>
</ul>
</body>
</html>
<!-- 6.472237 / 420 -->

Open in new window

Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

Thanks I'll see about this... and get back soon...
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

Ok I think I pined down were the issue is starts...

go to https://www.sjrmc.org/test.html

this is more line with what is happening... It's because the nesting is the issue... I solved this in the first gen of the script (the ones at the top)... but I'm not sure as to how to fix it with your version... any ideas... thanks... I know we are close now...
Avatar of James_Bomb
James_Bomb
Flag of Netherlands image
Well we are getting close now.

Try the following:

Add the following css
ul#DocList{
   margin: 15px 0 0 0;
}

And change in cornflex-common.css (line: 26)
.cornflex .c {
    overflow:hidden;
    z-index:1;
}

to

.cornflex .c {
    z-index:1;
}

That should do it.
Avatar of James_Bomb
James_Bomb
Flag of Netherlands image
Oh and don't forget

Replace

$(this).each(function(){
   $(this).wrap('<div class="cornflex ' + settings.boxname + '"><div class="t"><div class="c"></div></div></div>');
   $('.cornflex.' + settings.boxname).append('<div class="r"></div><div class="b"></div><div class="l"></div>');
});

with

$(this).each(function(){
   $(this).wrap('<div class="cornflex ' + settings.boxname + '"><div class="t"><div class="c"></div></div></div>');
   $(this).parent().parent().parent().append('<div class="r"></div><div class="b"></div><div class="l"></div>');
});
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

Cool it's getting them... I made a few changes to try to over come some minor issues... but the one I can't seem to solve is the tooltip inherenting the .cornflex from the <div id="cornflex1">... they should be white... ie pulling the Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png  not the Scripts/RoundedBoxes/whitebox_2_t.png of the <div id="cornflex1">.... hope that makes sense... tryed a few ways... but this is the most stable to date...

thanks again...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="Scripts/jquery-1.2.6.js"></script>
<link rel="stylesheet" href="Scripts/cornflex-common.css" type="text/css" />
<script type="text/javascript" src="Scripts/jquery.cornflex.js"></script>
 
 
<script type="text/javascript">
//<![CDATA[
this.tooltip = function(){
 
var agent= navigator.userAgent.toLowerCase();
var ver = parseInt(navigator.appVersion);
 
var ie = agent.indexOf("msie")>=0;
var ie6=ie && agent.indexOf("msie 6")>=0;
var ie7=ie && agent.indexOf("msie 7")>=0;
 
var ff=!ie && agent.indexOf("mozilla")>=0;
var ff2=ff && ver==4;
var ff3=ff && ver==5;
 
if (ff2 || ff3 || ie7){
// First select all tooltips and let cornflex do his thing
$(".tooltiptext")
   .cornflex('whitebox_popup', {
      omega: 20,
      image_t: 'Scripts/RoundedBoxes/wA/whitebox_withARROW_t.png',	    
      image_r: 'Scripts/RoundedBoxes/wA/whitebox_withARROW_r.png',
      image_b: 'Scripts/RoundedBoxes/wA/whitebox_withARROW_b.png',
      image_l: 'Scripts/RoundedBoxes/wA/whitebox_withARROW_l.png',
      alpha: 12,
      beta: 18,
      gamma: 24,
      delta: 18})
   .css({display: 'block'}); //Show .tooltiptext because it has to show up in the tooltip itself
	
  $('a.tooltip').hover(
      function(e){
      var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
      var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
      
         // Show whitebox by getting the first sibiling after the link that fired the hover event
         $(this)
            .next('.whitebox_popup')      
         .css("top",(yMouse-25) + "px")
         .css("left",(xMouse+12) + "px")
         .fadeIn("fast")
      .end();
      },
      function(e){
      // Hide whitebox
         $(this)
         .next('.whitebox_popup') 
         .fadeOut("fast")
      .end();
      }
);
 
	
$("a.tooltip").mousemove(function(e){
   var xMouse = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
   var yMouse = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); 
   $(this)
      .next(".whitebox_popup")
      .css("top",(yMouse-65) + "px")
      .css("left",(xMouse+0) + "px")
   .end();
});
 
}else{
	$(".tooltiptext").css({display: 'none'});
}
};
// starting the script on page load
$(document).ready(function(){
tooltip();
});
 
//]]>
</script>
<style type="text/css">
.whitebox_popup {
	display:none;
	position:absolute;
	width:200px;
	z-index:999;
}
ul#DocList{
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 25px;
}
 
</style>
</head>
<body>
<h3>Doctors</h3>
<div class="category_items">
<!--[if gte IE 7]><!-->
<script language="JavaScript"  type="text/javascript">$(document).ready(function(){  
                $("#cornflex1").cornflex('whitebox_Dira', {
        omega: 20,
        image_t: 'Scripts/RoundedBoxes/whitebox_2_t.png',
        image_r: 'Scripts/RoundedBoxes/whitebox_2_r.png',
        image_b: 'Scripts/RoundedBoxes/whitebox_2_b.png',
        image_l: 'Scripts/RoundedBoxes/whitebox_2_l.png',
        alpha: 12,
        beta: 18,
        gamma: 24,
        delta: 18
                });
});
</script>
<div id="cornflex1">
<!--<![endif]-->
<!--[if lte IE 6]>
<div class="Round" id="box1">
<![endif]--> 
 
 
 
<ul id="DocList">
  <li> <a name="staticLink" href="https://www.sjrmc.org/DoctorDirectory/Dir_Hospitalist-Medicine/william-c-dir/" class="tooltip" title="" target="_self" >William C. Dir, MD</a>
    <div class="tooltiptext" style="display:none;"> <span class='loca'>St. Joseph Regional Medical Center</span><br />
      William C. Dir,<br />
      MD </div>
  </li>
  <li> <a name="staticLink" href="https://www.sjrmc.org/DoctorDirectory/Dir_Hospitalist-Medicine/jeff-harris-md/" class="tooltip" title="" target="_self" >Jeff Harris, MD</a>
    <div class="tooltiptext" style="display:none;"> <span class='loca'>St. Joseph Regional Medical Center</span><br />
      Jeff Harris,<br />
      MD </div>
  </li>
  <li> <a name="staticLink" href="https://www.sjrmc.org/DoctorDirectory/Dir_Hospitalist-Medicine/barbara-kammer-md/" class="tooltip" title="" target="_self" >Barbara Kammer, MD</a>
    <div class="tooltiptext" style="display:none;"> <img src='https://www.sjrmc.org/uploads/images/catalog/barbara-kammer-md_t_1_100_1.jpg' title='Barbara Kammer' alt='Barbara Kammer' style='padding-right:30px; margin-top:10px;' /><br/>
      <span class='loca'>St. Joseph Regional Medical Center</span><br />
      Barbara Kammer,<br />
      MD </div>
  </li>
  <li> <a name="staticLink" href="https://www.sjrmc.org/DoctorDirectory/Dir_Hospitalist-Medicine/michael-c-minick-md/" class="tooltip" title="" target="_self" >Michael C. Minick, MD</a>
    <div class="tooltiptext" style="display:none;"> <span class='loca'>St. Joseph Regional Medical Center</span><br />
      Michael C. Minick,<br />
      MD </div>
  </li>
  <li> <a name="staticLink" href="https://www.sjrmc.org/DoctorDirectory/Dir_Hospitalist-Medicine/thomas-r-strobel-md/" class="tooltip" title="" target="_self" >Thomas R. Strobel, MD</a>
    <div class="tooltiptext" style="display:none;"> <span class='loca'>St. Joseph Regional Medical Center</span><br />
      Thomas R. Strobel,<br />
      MD </div>
  </li>
</ul>
<!--[if lte IE 6]>
<span style="clear:both;">&nbsp;</span>
<br/><br/><br/><br/><br/><br/>
<span style="clear:both;">&nbsp;</span>
<![endif]--> 
</div>
</div>
<div style="clear:right;"></div>
 
</body>
</html>

Open in new window

Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

also       overflow:hidden;, by taking that out... in the real version it clapses the <div id="cornflex1">.... the text was there but the div was acting like it wasn't... the float?
SOLUTION
Avatar of James_Bomb
James_Bomb
Flag of Netherlands image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image

ASKER

Well, let's try something else if we could... Working from my mostly working script and fix that... as it does everything right execpt the innerHTML thing...

check this question:
https://www.experts-exchange.com/questions/23650259/trying-to-target-div-based-on-a-in-FF.html
with fixing that part only... all will work again as it did from the <a> title.


 $(this).parent().parent().parent().append
is working well...

check the test page(https://www.sjrmc.org/test.html)... you'll see that everything I was talking about... Thanks for the help...
ASKER CERTIFIED SOLUTION
Avatar of jeremyBass26
jeremyBass26
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial