Float window when mouse in : Float « Ajax Layer « JavaScript DHTML

JavaScript DHTML
1. Ajax Layer
2. Data Type
3. Date Time
4. Development
5. Document
6. Dojo toolkit
7. Event
8. Event onMethod
9. Ext JS
10. Form Control
11. GUI Components
12. HTML
13. Javascript Collections
14. Javascript Objects
15. Javascript Properties
16. jQuery
17. Language Basics
18. Mochkit
19. Mootools
20. Node Operation
21. Object Oriented
22. Page Components
23. Rico
24. Scriptaculous
25. Security
26. SmartClient
27. Style Layout
28. Table
29. Utilities
30. Window Browser
31. YUI Library
Java
Java Tutorial
Java Source Code / Java Documentation
Java Open Source
Jar File Download
Java Articles
Java Products
Java by API
Photoshop Tutorials
Maya Tutorials
Flash Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
C# / C Sharp
C# / CSharp Tutorial
C# / CSharp Open Source
ASP.Net
ASP.NET Tutorial
JavaScript Tutorial
JavaScript Reference
HTML / CSS
HTML CSS Reference
C / ANSI-C
C Tutorial
C++
C++ Tutorial
Ruby
PHP
Python
Python Tutorial
Python Open Source
SQL Server / T-SQL
SQL Server / T-SQL Tutorial
Oracle PL / SQL
Oracle PL/SQL Tutorial
PostgreSQL
SQL / MySQL
MySQL Tutorial
VB.Net
VB.Net Tutorial
Flash / Flex / ActionScript
VBA / Excel / Access / Word
XML
XML Tutorial
Microsoft Office PowerPoint 2007 Tutorial
Microsoft Office Excel 2007 Tutorial
Microsoft Office Word 2007 Tutorial
JavaScript DHTML » Ajax Layer » Float 
Float window when mouse in
 
<!-- An extremely simple example of the usage of quickSub -->
<!-- Jason Brome - jason@methodize.org -->
<!-- http://www.methodize.org/quicksub -->
<html>
<head>
  <style type="text/css">
    /* quickSub Style Sheet */
/* www.methodize.org/quicksub/ */

#quickSub {
  position: absolute;
  font: normal 7pt verdana;
  border: 1px solid #000066;
  visibility: hidden;
  z-index: 1000;
  width: 160px;
}

/* header - contains title and window closer ([x])  */
#quickSub .qsheader {
  background-color: #006699;
  color: #FFFFFF;
  font: bold 7pt verdana;
  padding: 2px 2px 2px 3px;
  border-bottom: 1px solid #000066;
}

#quickSub .qsheader a {
  margin-left: 3px;
  color: #FFFFFF;
  text-decoration: none;
}

/* content - contains aggregator and newsreader links */
#quickSub .qscontent {
  background-color: #EEEEEE;
  color: #000000;
  padding: 1px 3px 2px 2px;
  font: normal 7pt verdana;
}

#quickSub a {
  margin-left: 3px;
  text-decoration: none;
  font: normal 7pt verdana;
}

#quickSub a:hover {
  text-decoration: underline;
}

#quickSub .qscontent a:visited color: #800080}
#quickSub .qscontent a:link color: #0000ff; }
#quickSub .qsfooterWhat a:visited color: #800080}
#quickSub .qsfooterWhat a:link color: #0000ff; }

/* footerWhat - contains 'What Is This?' link */
#quickSub .qsfooterWhat {
  background-color: #EEEEEE;
  text-align: right;
  padding: 1px 3px 2px 3px;
  font: 7pt verdana;
}

/* footer - contains quickSub link */
#quickSub .qsfooter {
  background-color: #006699;
  color: #FFFFFF;
  text-align: right;
  font: 7pt verdana;
  padding: 2px 2px 2px 3px;
  border-bottom: 1px solid #000066;
}

#quickSub .qsfooter a {
  color: #FFFFFF;
  text-decoration: none;
}
  </style>
  <script type="text/javascript" language="JavaScript">
  <!-- quickSub (cJason Brome -->
//\//////////////////////////////////////////////////////////////////////////////////
//\  quickSub 0.3.5
//\  Copyright Jason Brome 2003-2005. All rights reserved.
//\
//\  By Jason Brome (jason@methodize.org).  Last modified 2005-05-30
//\  http://www.methodize.org/quicksub/
//\
//\  Inspired by the overLIB script by Erik Bosrup (erik@bosrup.com)
//\  http://www.bosrup.com/web/overlib/
//\
//\  This program is free software; you can redistribute it and/or
//\  modify it under the terms of the GNU General Public License
//\  as published by the Free Software Foundation; either version 2
//\  of the License, or (at your option) any later version.
//\
//\  This program is distributed in the hope that it will be useful,
//\  but WITHOUT ANY WARRANTY; without even the implied warranty of
//\  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
//\  GNU General Public License for more details.
//\
//\  You should have received a copy of the GNU General Public License
//\  along with this program; if not, write to the Free Software
//\  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.
//\
//\  Revision History
//\  0.3.5 Added FeedDemon, Moved Fyuze, Syndirella to Others...

var ESCAPED = 1;
var UNESCAPED = 2;

var aggregators = new Array
  "AmphetaDesk""http://127.0.0.1:8888/index.html?add_url=", ESCAPED,
  "Awasu""http://127.0.0.1:2604/subscribe?url=", ESCAPED,
  "Bloglines""http://www.bloglines.com/sub/", UNESCAPED,
  "Bot A Blog""http://www.botablog.com/botthisblog.php?blog=", ESCAPED,
  "BottomFeeder""http://127.0.0.1:8666/btf?rss=", ESCAPED,
  "FeedDemon""feed:", UNESCAPED,
  "Headline Viewer""http://127.0.0.1:8900/add_provider?url=", ESCAPED,
  "mobilerss""http://www.mobilerss.net/fastfeed.php?url=", ESCAPED,
  "My Yahoo!""http://add.my.yahoo.com/rss?url=", ESCAPED,
  "NetNewsWire""feed:", UNESCAPED,
  "NewsGator Online Services""http://services.newsgator.com/subscriber/subext.aspx?url=", ESCAPED,
  "NewsMonster""newsmonster-subscription:", UNESCAPED,
  "NewzCrawler""feed:", UNESCAPED,
  "nntp//rss""http://127.0.0.1:7810/?action=addform&URL=", ESCAPED,
  "Python Desktop Server""http://127.0.0.1:4334/aggregator/add_redir?url=", ESCAPED,
  "Radio UserLand""http://127.0.0.1:5335/system/pages/subscriptions?url=", ESCAPED,
  "RSS Bandit""feed:", UNESCAPED,
  "SharpReader""http://127.0.0.1:5335/system/pages/subscriptions?url=", ESCAPED,
  "Shrook""feed:", UNESCAPED,
  "Vox Lite""feed:", UNESCAPED,
  "Wildgrape""http://127.0.0.1:8888/NewsDesk.html?add_url=", ESCAPED,
  "WINKsite""http://winksite.com/site/quick_add_logon_form.cfm?partner_name=&feed_url=", ESCAPED,
  "WinRSS""rss://addrss/", ESCAPED,
  "Others...""http://www.methodize.org/quicksub/subscribe.php?url=", ESCAPED
);

var txtSubscribe = 'Subscribe to this feed:';
var txtContentHeader = 'Newsreader/Aggregator:';
var txtWhatIsThis = 'What is this?';
var txtVersion = "0.3.5";

// Color and font settings for Netscape 4 (CSS Style Sheet used for modern browsers)
var q_hdrfont = 'Verdana';
var q_hdrsize = '1';
var q_hdrcolor = '#FFFFFF';
var q_bgcolor = '#006699';
var q_contentfont = 'Verdana';
var q_contentsize = '1';
var q_contentbgcolor = '#EEEEEE';

// Internal vars
var q_frame = self;
var over = null;
var oTimer;

// Determine browser type
var ns4 = (navigator.appName == 'Netscape' && parseInt(navigator.appVersion== 4);
var ns6 = (document.getElementById)true:false;
var ie4 = (document.all)true:false;
if (ie4) {
  var docRoot = 'document.body';
}

if (ns4) {
  var oW = window.innerWidth;
  var oH = window.innerHeight;
  window.onresize = function () {if (oW!=window.innerWidth||oH!=window.innerHeightlocation.reload();}
}

if (ie4) {
  if ((navigator.userAgent.indexOf('MSIE 5') 0|| (navigator.userAgent.indexOf('MSIE 6') 0)) {
    if(document.compatMode && document.compatMode == 'CSS1Compat') {
      docRoot = 'document.documentElement';
    }
  }
  if (ns6) {
    ns6 = false;
  }
}

// quicksub(url)
// Loads parameters into global runtime variables.
function quicksub(oLink, originalUrl) {

  if (oTimer) {
    clearTimeout(oTimer);
  }

  var url = escape(originalUrl);

  var text = '<b>' + txtContentHeader + '</b><br>';
  for(var iCount = 0; iCount < aggregators.length; iCount +=3) {
    text += ('<a href=\''
      + aggregators[iCount + 1
      (aggregators[iCount + 2== ESCAPED ? url : originalUrl)
      + '\'>'
      + aggregators[iCount]
      '</a><br>');
  }

  if ( (ns4|| (ie4|| (ns6) ) {
    q_frame = self;
    if (ns4over = q_frame.document.quickSub
    if (ie4over = q_frame.quickSub.style
    if (ns6over = q_frame.document.getElementById("quickSub");
  }
  
  if(!ns4) {
    var layerhtml = '<div class=\'qsheader\'>' + txtSubscribe + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<A HREF=\"javascript:return closeqs();\" onMouseOver=\"return closeqs();\">[<b>x</b>]</A></div>'
      + '<div class=\'qscontent\'>' + text + '</div>'
      + '<div class=\'qsfooterWhat\'><a class=\'quicksub\' target=\'quickSub\' href=\'http://www.methodize.org/quicksub/whatisthis.html\' onclick=\'return closeqs();\'>[' + txtWhatIsThis + ']</a></div>'
      + '<div class=\'qsfooter\'><a class="quicksub" target="quickSub" href=\'http://www.methodize.org/quicksub/\' onclick=\'return closeqs();\'>quickSub ' + txtVersion + '</a></div>';
  } else {
    var closing = "<TD ALIGN=RIGHT><A HREF=\"javascript:return closeqs();\" onMouseOver=\"return closeqs();\"><FONT COLOR=\""+q_hdrcolor+"\" FACE=\""+q_hdrfont+"\" SIZE=\""+q_hdrsize+"\">[<b>x</b>]</FONT></A></TD>";
    var layerhtml = "<TABLE BORDER=0 CELLPADDING=1 CELLSPACING=0 BGCOLOR=\'"+q_bgcolor+"\'><TR><TD>"
      +"<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD>"
      +"<B><FONT COLOR=\""+q_hdrcolor+"\" FACE=\""+q_hdrfont+"\" SIZE=\""+q_hdrsize+"\">" + txtSubscribe + "</FONT></B></TD>"+closing+"</TR></TABLE>"
      +"<TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=\'"+ q_contentbgcolor + "\'\">"
      +"<TR><TD VALIGN=TOP><FONT FACE=\""+q_contentfont+"\" SIZE=\""+q_contentsize+"\">"+text+"</FONT></TD></TR>"
      +"<TR><TD VALIGN=TOP ALIGN=RIGHT><FONT FACE=\""+q_contentfont+"\" SIZE=\""+q_contentsize+"\"><a target=\'quickSub\' href=\'http://www.methodize.org/quicksub/whatisthis.html\' onclick=\'return closeqs();\'>[" + txtWhatIsThis + "]</a></FONT></TD></TR>"
      +"</TABLE>"
      +"<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD ALIGN=RIGHT>"
      +"<B><a target='quickSub' href=\'http://www.methodize.org/quicksub/\' onclick=\'return closeqs();\'><FONT COLOR=\""+q_hdrcolor+"\" FACE=\""+q_hdrfont+"\" SIZE=\""+q_hdrsize+"\">quickSub " + txtVersion + "</FONT></a></TD></TR></TABLE>"
      +"</TD></TR></TABLE>";
  }
  layerWrite(layerhtml);
  placeLayer(oLink);
  showObject(over);
  
  return true;
}

function closeqs() {
  if (over != nullhideObject(over);
  return true;
}

function placeLayer(oLink) {
  var placeX, placeY, iOffset, aPosition;
  
  aPosition = findPosition(oLink);
  placeX = eval(aPosition[0]);
  placeY = eval(aPosition[1]) 16;

  if ( (ns4|| (ie4) ) {
    over.left = (ie4 ? placeX + 'px' : placeX);
    over.top = (ie4 ? placeY + 'px' : placeY);
  else if (ns6) {
    over.style.left = placeX + "px";
    over.style.top = placeY + "px";
  }
}

function layerWrite(txt) {
  if (ns4) {
    var lyr = q_frame.document.quickSub.document
    lyr.write(txt)
    lyr.close()
  else if (ie4) {
    q_frame.document.all["quickSub"].innerHTML = txt
  else if (ns6) {
    range = q_frame.document.createRange();
    range.setStartBefore(over);
    domfrag = range.createContextualFragment(txt);
    while (over.hasChildNodes()) {
      over.removeChild(over.lastChild);
    }
    over.appendChild(domfrag);
  }
}

function showObject(obj) {
  if (ns4obj.visibility = "show";
  else if (ie4obj.visibility = "visible";
  else if (ns6obj.style.visibility = "visible";
}

function hideObject(obj) {
  if (ns4obj.visibility = "hide";
  else if (ie4obj.visibility = "hidden";
  else if (ns6obj.style.visibility = "hidden";
}

function findPosition (oLink) {
  if (oLink.offsetParent) {
    for (var iPosX = 0, iPosY = 0; oLink.offsetParent; oLink = oLink.offsetParent) {
      iPosX += oLink.offsetLeft;
      iPosY += oLink.offsetTop;
    }
    return [iPosX, iPosY];
  else {
    return [oLink.x, oLink.y];
  }
}

function timeqs () {
  if(!ns4) {
    var iDelay = 500;

    if (oTimer) {
      clearTimeout(oTimer);
    }

    if ((ns4 && over.visibility != 'hide') ||
      (ie4 && over.visibility != 'hidden') ||
      (ns6 && over.style.visibility != 'hidden')) {
      oTimer = setTimeout(hideqs, iDelay);
    }
  }
}

function hideqs () {
  if (oTimer) {
    clearTimeout(oTimer);
  }

  closeqs();
}

function delayqs () {
  if (oTimer) {
    clearTimeout(oTimer);
  }
}  
  
  </script> 
</head>
<body>
<div id="quickSub" style="position:absolute; visibility:hidden; z-index:1000;" onmouseout="return timeqs();" onmousemove="return delayqs();"></div>

<b>quickSub</b> (<a href="http://www.methodize.org/quicksub/">http://www.methodize.org/quicksub/</a>)
<p>
<hr>
<p>
Example:<p>
<a href="http://www.jasonbrome.com/blog/index.rdf" onmouseout='return timeqs();' onmouseover="return quicksub(this, 'http://www.jasonbrome.com/blog/index.rdf');">Syndicate this site (XML)</a>
<p>
<hr>
<p><b><a name="Docs">Documentation:</a></b></p>
How to use quickSub:<p>
1. Paste the following CSS import and JavaScript reference in the head of your HTML page:
<p>
<font size="-1">
&lt;style type="text/css"&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;@import "quicksub.css";<br>
&lt;/style&gt;<br>
&lt;script type="text/javascript" language="JavaScript" src="quicksub.js"&gt;&lt;!-- quickSub (cJason Brome --&gt;&lt;/script&gt;
</font>
<p>
2. Paste the following two lines at the top of your HTML page's body:
<p>
<font size="-1">
&lt;div id="quickSub" style="position:absolute; visibility:hidden; z-index:1000;" onmouseout="return timeqs();" onmousemove="return delayqs();"&gt;&lt;/div&gt;<br>
</font>
<p>
3. In the link to your feed, include a call to quickSub(this, urlin the onmouseover, and timeqs() in the onmouseout:
<p>
e.g.<br>
<font size="-1">
&lt;a href="http://www.jasonbrome.com/blog/index.rdf" onmouseout="return timeqs();" onmouseover="return quicksub(this, 'http://www.jasonbrome.com/blog/index.rdf');">My feed&lt;/a&gt;
</font>
<p>
4. Upload your updated HTML page, along with quicksub.css and quicksub.js - and, voila -   
easy subscribing for your readers!
<p>
If you want to customize quickSub's look and feel, just take a look at quicksub.css.  For Netscape browsers, the fonts and colors are defined near the top of the quicksub.js file.
<p>
<hr>
<p><b>Specific aggregator/newsreader customization:</b></p>
WINKsite (<a href="http://www.winksite.com/">www.winksite.com</a>)
<p>
The subscription URL for WINKsite includes an optional partner_name parameter.  If specified, when the subscribing user goes to 
the WINKsite quick add process, cancel buttons will appear on each of the quick add steps and a customized 
"Logout and Return to ______" button (where ______ is the partner_namewill appear when the quick add process is complete.
This button logs the user out and returns them to the page that referred the user to the first page of the WINKsite quick add process.
<p>
To set the partner_name parameter value, edit the WINKsite URL found in quicksub.js:
<p>
<code>
  "WINKsite""http://winksite.com/site/quick_add_logon_form.cfm?partner_name=YOUR_SITE_NAME&feed_url=", ESCAPED,
</code>
<p>
<hr>
&copy; 2003-2005 <a href="http://www.jasonbrome.com/">Jason Brome</a> - Licensed under the GPL.
</body>
</html>

           
         
  
Related examples in the same category
1. Drag and drop float window
2. Overlay Example
3. Overlay Manager Example
4. floating gallery
www.java2java.com | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.