Question

Need to rework rework Float script

Asked by: jeremyBass26

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

This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

  • Plus...
  • 30 Day FREE access, no risk, no obligation
  • Collaborate with the world's top tech experts
  • Unlimited access to our exclusive solution database
  • Never be left without tech help again

Subscribe Now

Asked On
2008-08-04 at 14:31:38ID23620555
Tags

javascript jquery

Topics

JavaScript

,

JavaScript Frameworks

,

Extensible HTML (XHTML)

Participating Experts
3
Points
500
Comments
35

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

  • "The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
  • "Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
  • "Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Screenshot of Experts Exchange Knowledgebase

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Screenshot of an Article

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Screenshot of Experts Exchange Knowledgebase

Access the answers to your technology questions today.

Subscribe Now

30-day free trial. Register in 60 seconds.

What Makes Experts Exchange Unique?

Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.

Trusted by the world's most respected brands.

image of each brand's logo

Faithfully serving IT professionals since 1996.

Experts Exchange Logo

Try it out and discover for yourself.

Subscribe Now

30-day free trial. Register in 60 seconds.

Related Solutions

  1. not floating left correctly in FF
    Why are my store boxes not floating left correctly in FF? http://owndesigns.com/auto4/store.php?category=buffers
  2. floats: right - perfect in FF but assigning exact width to …
    http://cjehost.com/drmohin/index3.php you'll see *hopefully* in ff it looks perfect, in ie - when i assign width: 608px; to the div with the black bg both float:right divs get pushed down
  3. divs float:left positioning
    Hi X-perts, I have the following structure of divs: <div style="width:50%; float:left"><div style="float:left"><img src="images/hewlett_packard/lj1100xi.gif" width="100" height="80" /></div><di...
  4. CSS hover blinking in FF
    Hi, I am trying to show an image when hovering an another one - images are not one on top of the other. It does work in IE7 but it is blinking horribly in FF. Any help or reason why it is doing so will be appreciated. Thank you
  5. Floating divs - float: right displaced below.
    I have tried all possible solutions to this including some given in this same forum, such as adding overflow: auto; and other, but IE7 and IE6 conitnue to show a broken page where the div#text container is displaced below. I've tried changing the width for the containers, I ...

Free Tech Articles

  1. WARNING: 5 Reasons why you should NEVER fix a computer for free.
    It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
  2. SCCM OSD Basic troubleshooting
    SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
  3. Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
    This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
  4. Create a Win7 Gadget
    This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
  5. Outlook continually prompting for username and password
    There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
  6. Backup Exchange 2010 Information Store using Windows Backup
    There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...

Cloud Class Webinars

  1. Avoiding Bugs in Microsoft Access
    Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
  2. Top 10 Best New Features in Visio 2010
    Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
  3. IT Consultant Business Secrets Revealed
    Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
  4. Disaster Recovery and Business Continuity
    Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
  5. Organize Your Visio Diagrams with Containers and Lists
    Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
  6. How to Us Objects, Properties, Events and Methods in Microsoft Access
    Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

Join the Community

Answers

 

by: seeflatPosted on 2008-08-04 at 15:18:08ID: 22156734

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

 

by: seeflatPosted on 2008-08-04 at 15:19:26ID: 22156744

Sorry... type

"You would NOT need  the unique id/title solution"

 

by: jeremyBass26Posted on 2008-08-04 at 15:39:33ID: 22156845

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

 

by: seeflatPosted on 2008-08-04 at 15:46:40ID: 22156890

Example... an extremely rough one, with no error checking, etc.

var elem = e.srcEvent; // or e.target :)

var elemLI = elem.parentNode;

var elemDiv = elemLI.childNodes[1];

elemDiv.style.display = 'block';

 

by: seeflatPosted on 2008-08-04 at 15:47:59ID: 22156901

also, nextSibling is an option

var elemDiv = e.srcEvent.nextSibling;

elemDiv.style.display = 'block';

 

by: jeremyBass26Posted on 2008-08-04 at 15:57:52ID: 22156955

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

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

Any other tips?

thanks again for the help...

 

by: jeremyBass26Posted on 2008-08-04 at 23:28:48ID: 22158563

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>

 

by: RQuadlingPosted on 2008-08-05 at 04:11:50ID: 22159769

As you have jQuery (from the previous question) ...

http://docs.jquery.com/Events_(Guide)

And scroll down to event.target.

This is why we use a cross browser library (I use prototype, you use jQuery).

But $(event.target) is the same in both, so this will give you the element which generated the event.

$(event.target).title will give you the title of the element which you can extract and use to update the floating element.

And then show the floating element

You really should be using the jQuery library to do as much as possible.

 

by: jeremyBass26Posted on 2008-08-05 at 09:27:01ID: 22162542

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>
                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:

Select allOpen in new window

 

by: RQuadlingPosted on 2008-08-06 at 02:07:52ID: 22168274

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.

 

by: James_BombPosted on 2008-08-08 at 12:29:59ID: 22192913

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

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:

Select allOpen in new window

 

by: James_BombPosted on 2008-08-08 at 12:33:09ID: 22192933

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());

 

by: jeremyBass26Posted on 2008-08-08 at 21:10:01ID: 22195011

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();
   });
 
});

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:

Select allOpen in new window

 

by: jeremyBass26Posted on 2008-08-08 at 21:14:20ID: 22195022

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

was spot on... didn't help here like i thought but spot on... thanks

 

by: jeremyBass26Posted on 2008-08-08 at 21:23:34ID: 22195039

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...

 

by: James_BombPosted on 2008-08-09 at 05:26:15ID: 22196066

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.

 

by: jeremyBass26Posted on 2008-08-09 at 06:02:38ID: 22196172

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...

 

by: James_BombPosted on 2008-08-09 at 07:47:44ID: 22196449

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();
});

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:

Select allOpen in new window

 

by: James_BombPosted on 2008-08-09 at 07:52:11ID: 22196468

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.

 

by: jeremyBass26Posted on 2008-08-09 at 23:18:58ID: 22198899

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 

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:

Select allOpen in new window

 

by: James_BombPosted on 2008-08-10 at 05:19:41ID: 22199407

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;
}

 

by: James_BombPosted on 2008-08-10 at 05:36:07ID: 22199431

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>');
});

 

by: jeremyBass26Posted on 2008-08-12 at 19:48:03ID: 22218713

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();
});

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:

Select allOpen in new window

 

by: James_BombPosted on 2008-08-13 at 03:48:41ID: 22220527

  $('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.

 

by: jeremyBass26Posted on 2008-08-13 at 09:07:38ID: 22223101

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();
});

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:

Select allOpen in new window

 

by: James_BombPosted on 2008-08-13 at 10:13:54ID: 22223689

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 -->

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:

Select allOpen in new window

 

by: jeremyBass26Posted on 2008-08-13 at 12:05:38ID: 22224565

Thanks I'll see about this... and get back soon...

 

by: jeremyBass26Posted on 2008-08-13 at 12:36:27ID: 22224838

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...

 

by: James_BombPosted on 2008-08-13 at 15:01:00ID: 22226009

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.

 

by: James_BombPosted on 2008-08-13 at 15:03:14ID: 22226030

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>');
});

 

by: jeremyBass26Posted on 2008-08-13 at 20:35:38ID: 22227626

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>

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:

Select allOpen in new window

 

by: jeremyBass26Posted on 2008-08-13 at 20:54:38ID: 22227670

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?

 

by: James_BombPosted on 2008-08-14 at 10:39:24ID: 22232403

Jeremy,

You will have to look into your css because that's where the errors are. Your script is ok. Just by looking at your javascript and css I spotted an error right away. Search for .whitebox_popup and rename it to whitebox1.

Take a better look at your css, javascript and html. As I said before your pages aren't well organized. Keep all your javascript and css in separate files. Remove all the javascript from within the body, it doesn't belong there.

You are doing an ok job but you have to be more precise. Don't keep changing the whitebox names because you will only make it harder for yourself.

 

by: jeremyBass26Posted on 2008-08-14 at 18:51:15ID: 22235522

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:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23650259.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...

 

by: jeremyBass26Posted on 2008-08-14 at 19:18:09ID: 22235614

Got it... :) thanks everyone for the help...

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){
 
		
 
	
	$("a.tooltip").hover(function(e){	
	var elem = e.target || e.srcEvent; // // or e.srcEvent :)
var elemLI = elem.parentNode;
if (ff){
var elemDiv = elemLI.childNodes[3];
} else {
var elemDiv = elemLI.childNodes[2];
}
 
//alert (elem);
//alert (elemLI);
//alert (elemDiv);
//alert (elemDiv.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("<div>" + elemDiv.innerHTML + "</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(){	
		$(".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");
	});	
 
 
 
 
//// 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">
.cornflex.whitebox {
	display:none;
	position:absolute;
	width:200px;
	z-index:999;
}
ul#DocList {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 25px;
}
</style>

                                              
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:

Select allOpen in new window

20120131-EE-VQP-002

3 Ways to Join

30-Day Free Trial

The Experts

98% positive feedback on 31,087 answers since March 2000. angeliii is a Microsoft Most Valuable Professional for his work with MS SQL Server & Develoment.

He has also proven his knowledge of Visual Basic Programming, PHP Scripting and Oracle Databases.

The Experts

97% positive feedback on 10,752 answers since July 2000. lrmoore has more than 18 years experience in the networking industry.

The six-time Mircosoft MVPs specialties include firewalls, virtual private networking, and network management.

Testimonials

"...and excellent source for support... Kind of like having your very own IT dept." Electriciansnet

Testimonials

"I was apprehensive at signing up at first. However... it has already made my life as an IT administrator much easier." JaCrews

Testimonials

"WOW! You guys have great, active, and knowledgeable people on here." moore50

Business Clients

Business Clients

In the Press

"If you’ve got a question... Experts Exchange can supply an answer.”

In the Press

"...an invaluable aid for both IT professionals and those who require tech support."

In the Press

"where IT professionals provide quick answers on just about any topic"

Business Account Plans

Loading Advertisement...