JavaScript DHTML/Ajax Layer/Float
Содержание
Drag and drop float window
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Application Menubar Example</title>
<!-- Standard reset and fonts -->
<link rel="stylesheet" type="text/css" href="./build/reset/reset.css">
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css">
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css">
<!-- CSS for Menu -->
<link rel="stylesheet" type="text/css" href="./build/menu/assets/menu.css">
<!-- Page-specific styles -->
<style type="text/css">
body {
background-color:#dfb8df;
}
/* Define a new style for each menubar */
div.yuimenubar {
border-width:1px 0;
border-color:#666;
border-style:solid;
background-color:#ccc;
}
div.yuimenubar div.bd {
border-width:1px 0;
border-color:#ddd;
border-style:solid;
}
div.yuimenubar li.yuimenubaritem {
border-width:0;
border-style:none;
padding:4px 12px;
}
div.yuimenubar li.yuimenubaritem img {
margin:0;
border:0;
height:1px;
width:1px;
}
/* Define a new style for each menu */
div.yuimenu {
border:solid 1px #666;
background-color:#ccc;
}
div.yuimenu div.bd {
border-width:0;
border-style:none;
}
/* Define a new style for each menu item */
div.yuimenu li.yuimenuitem {
padding-top:4px;
padding-bottom:4px;
}
div.yuimenu li.yuimenuitem img {
height:8px;
width:8px;
margin:0 -16px 0 10px;
border:0;
}
div.yuimenu ul {
border:solid 1px #666;
border-width:1px 0 0 0;
}
/* Define a new style for an item"s "selected" state */
div.yuimenu li.selected,
div.yuimenubar li.selected {
background-color:#039;
}
div.yuimenu li.selected a.selected,
div.yuimenubar li.selected a.selected {
text-decoration:none;
}
/* Define a new style for an item"s "disabled" state */
div.yuimenu li.disabled a.disabled,
div.yuimenu li.disabled em.disabled,
div.yuimenubar li.disabled a.disabled {
color:#666;
}
</style>
</head>
<body>
<!-- Namespace source file -->
<script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
<!-- Dependency source files -->
<script type="text/javascript" src="./build/event/event.js"></script>
<script type="text/javascript" src="./build/dom/dom.js"></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="./build/animation/animation.js"></script>
<!-- Container source file -->
<script type="text/javascript" src="./build/container/container.js"></script>
<!-- Menu source file -->
<script type="text/javascript" src="./build/menu/menu.js"></script>
<!-- Page-specific script -->
<script type="text/javascript">
/**
* Constant representing the path to the image to be used for the
* submenu arrow indicator.
* @final
* @type String
*/
YAHOO.widget.MenuBarItem.prototype.SUBMENU_INDICATOR_IMAGE_PATH =
"promo/m/irs/blank.gif";
/**
* Constant representing the path to the image to be used for the
* submenu arrow indicator when a MenuBarItem instance is selected.
* @final
* @type String
*/
YAHOO.widget.MenuBarItem.prototype.SELECTED_SUBMENU_INDICATOR_IMAGE_PATH =
"promo/m/irs/blank.gif";
/**
* Constant representing the path to the image to be used for the
* submenu arrow indicator when a MenuBarItem instance is disabled.
* @final
* @type String
*/
YAHOO.widget.MenuBarItem.prototype.DISABLED_SUBMENU_INDICATOR_IMAGE_PATH =
"promo/m/irs/blank.gif";
// "load" event handler for the window
YAHOO.example.onWindowLoad = function(p_oEvent) {
// "click" event handler for each item in the root MenuBar instance
function onMenuBarItemClick(p_sType, p_aArguments) {
this.parent.hasFocus = true;
var oActiveItem = this.parent.activeItem;
// Hide any other submenus that might be visible
if(oActiveItem && oActiveItem != this) {
this.parent.clearActiveItem();
}
// Select and focus the current MenuItem instance
this.cfg.setProperty("selected", true);
this.focus();
// Show the submenu for this instance
var oSubmenu = this.cfg.getProperty("submenu");
if(oSubmenu) {
if(oSubmenu.cfg.getProperty("visible")) {
oSubmenu.hide();
}
else {
oSubmenu.show();
}
}
}
// "mouseover" event handler for each item in the root MenuBar instance
function onMenuBarItemMouseOver(p_sType, p_aArguments) {
var oActiveItem = this.parent.activeItem;
// Hide any other submenus that might be visible
if(oActiveItem && oActiveItem != this) {
this.parent.clearActiveItem();
}
// Select and focus the current MenuItem instance
this.cfg.setProperty("selected", true);
this.focus();
if(this.parent.hasFocus) {
// Show the submenu for this instance
var oSubmenu = this.cfg.getProperty("submenu");
if(oSubmenu) {
if(oSubmenu.cfg.getProperty("visible")) {
oSubmenu.hide();
}
else {
oSubmenu.show();
}
}
}
}
var oApplicationsMenu = new YAHOO.widget.Menu("applications");
oApplicationsMenu.addItem("Application 1");
oApplicationsMenu.addItem("Application 2");
oApplicationsMenu.addItem("Application 3");
oApplicationsMenu.addItem("Application 3");
var oFileMenu = new YAHOO.widget.Menu("filemenu", { zIndex:2 });
oFileMenu.addItem(new YAHOO.widget.MenuItem("New File", { helptext: "Ctrl + N" } ));
oFileMenu.addItem("New Folder");
oFileMenu.addItem(new YAHOO.widget.MenuItem("Open", { helptext: "Ctrl + O" }));
oFileMenu.addItem(new YAHOO.widget.MenuItem("Open With...", { submenu: oApplicationsMenu }));
oFileMenu.addItem(new YAHOO.widget.MenuItem("Print", { helptext: "Ctrl + P" }));
var oEditMenu = new YAHOO.widget.Menu("edit", { zIndex:2 });
oEditMenu.addItem(new YAHOO.widget.MenuItem("Undo", { helptext: "Ctrl + Z" }));
oEditMenu.addItem(new YAHOO.widget.MenuItem("Redo", { helptext: "Ctrl + Y", disabled: true }));
oEditMenu.addItem(new YAHOO.widget.MenuItem("Cut", { helptext: "Ctrl + X", disabled: true }), 1);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Copy", { helptext: "Ctrl + C", disabled: true }), 1);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Paste", { helptext: "Ctrl + V" }), 1);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Delete", { helptext: "Del", disabled: true }), 1);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Select All", { helptext: "Ctrl + A" }), 2);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Find", { helptext: "Ctrl + F" }), 3);
oEditMenu.addItem(new YAHOO.widget.MenuItem("Find Again", { helptext: "Ctrl + G" }), 3);
var oMenuBar = new YAHOO.widget.MenuBar("menubar");
oMenuBar.addItem(new YAHOO.widget.MenuBarItem("File", { submenu: oFileMenu }));
oMenuBar.addItem(new YAHOO.widget.MenuBarItem("Edit", { submenu: oEditMenu }));
oMenuBar.addItem("View");
oMenuBar.addItem("Favorites");
oMenuBar.addItem("Tools");
oMenuBar.addItem("Tools");
oMenuBar.addItem("Help");
oMenuBar.addItem(new YAHOO.widget.MenuBarItem("Examples Home", { url: "index.html" }));
// Render the MenuBar instance and corresponding submenus
oMenuBar.render(document.body);
/*
Add a "click" and "mouseover" event handler to each item
in the root MenuBar instnace
*/
var i = oMenuBar.getItemGroups()[0].length - 1,
oMenuBarItem;
do {
oMenuBarItem = oMenuBar.getItem(i);
if(oMenuBarItem) {
oMenuBarItem.clickEvent.subscribe(
onMenuBarItemClick,
oMenuBarItem,
true
);
oMenuBarItem.mouseOverEvent.subscribe(
onMenuBarItemMouseOver,
oMenuBarItem,
true
);
}
}
while(i--);
// "click" event handler for the document
function onDocumentClick(p_oEvent) {
var oTarget = YAHOO.util.Event.getTarget(p_oEvent);
if(
oTarget != oMenuBar.element &&
!YAHOO.util.Dom.isAncestor(oMenuBar.element, oTarget)
) {
oMenuBar.hasFocus = false;
if(oMenuBar.activeItem) {
var oSubmenu = oMenuBar.activeItem.cfg.getProperty("submenu");
if(oSubmenu) {
oSubmenu.hide();
}
oMenuBar.clearActiveItem();
oMenuBar.activeItem.blur();
}
}
}
// Add a "click" handler for the document
YAHOO.util.Event.addListener(
document,
"click",
onDocumentClick
);
var oPanel = new YAHOO.widget.SimpleDialog(
"exampleinfo",
{
constraintoviewport: true,
fixedcenter:true,
width:"400px",
zIndex:1
}
);
oPanel.setHeader("Application Menubar Example");
oPanel.setBody("This example demonstrates how to create an application-like menubar using nothing by JavaScript.");
oPanel.render(document.body);
oPanel.show();
}
// Add a "load" handler for the window
YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);
</script>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
floating gallery
<A href="http://www.wbex.ru/Code/JavaScriptDownload/floating_gallery.zip">floating_gallery.zip( 52 k)</a>
1. <A href="/Code/JavaScript/Ajax-Layer/Draganddropfloatwindow.htm">Drag and drop float window</a> <A href="/Code/JavaScript/Ajax-Layer/Draganddropfloatwindow.htm"></a> 2. <A href="/Code/JavaScript/Ajax-Layer/Floatwindowwhenmousein.htm">Float window when mouse in</a> 3. <A href="/Code/JavaScript/Ajax-Layer/OverlayExample.htm">Overlay Example</a> <A href="/Code/JavaScript/Ajax-Layer/OverlayExample.htm"></a> 4. <A href="/Code/JavaScript/Ajax-Layer/OverlayManagerExample.htm">Overlay Manager Example</a> <A href="/Code/JavaScript/Ajax-Layer/OverlayManagerExample.htm"></a>
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 (c) Jason 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.ru)
//\ http://www.bosrup.ru/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.ru/sub/", UNESCAPED,
"Bot A Blog", "http://www.botablog.ru/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.ru/rss?url=", ESCAPED,
"NetNewsWire", "feed:", UNESCAPED,
"NewsGator Online Services", "http://services.newsgator.ru/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.ru/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.innerHeight) location.reload();}
}
if (ie4) {
if ((navigator.userAgent.indexOf("MSIE 5") > 0) || (navigator.userAgent.indexOf("MSIE 6") > 0)) {
if(document.rupatMode && document.rupatMode == "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 (ns4) over = q_frame.document.quickSub
if (ie4) over = q_frame.quickSub.style
if (ns6) over = q_frame.document.getElementById("quickSub");
}
if(!ns4) {
var layerhtml = "<div class=\"qsheader\">" + txtSubscribe + " <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 != null) hideObject(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 (ns4) obj.visibility = "show";
else if (ie4) obj.visibility = "visible";
else if (ns6) obj.style.visibility = "visible";
}
function hideObject(obj) {
if (ns4) obj.visibility = "hide";
else if (ie4) obj.visibility = "hidden";
else if (ns6) obj.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.ru/blog/index.rdf" onmouseout="return timeqs();" onmouseover="return quicksub(this, "http://www.jasonbrome.ru/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">
<style type="text/css"><br>
@import "quicksub.css";<br>
</style><br>
<script type="text/javascript" language="JavaScript" src="quicksub.js"><!-- quickSub (c) Jason Brome --></script>
</font>
<p>
2. Paste the following two lines at the top of your HTML page"s body:
<p>
<font size="-1">
<div id="quickSub" style="position:absolute; visibility:hidden; z-index:1000;" onmouseout="return timeqs();" onmousemove="return delayqs();"></div><br>
</font>
<p>
3. In the link to your feed, include a call to quickSub(this, url) in the onmouseover, and timeqs() in the onmouseout:
<p>
e.g.<br>
<font size="-1">
<a href="http://www.jasonbrome.ru/blog/index.rdf" onmouseout="return timeqs();" onmouseover="return quicksub(this, "http://www.jasonbrome.ru/blog/index.rdf");">My feed</a>
</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 4 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.ru/">www.winksite.ru</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_name) will 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.ru/site/quick_add_logon_form.cfm?partner_name=YOUR_SITE_NAME&feed_url=", ESCAPED,
</code>
<p>
<hr>
© 2003-2005 <a href="http://www.jasonbrome.ru/">Jason Brome</a> - Licensed under the GPL.
</body>
</html>
Overlay Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.Overlay</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/module.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>
<style>
.overlay {
visibility:hidden;
border:1px solid black;
background-color:#FFFFFF;
z-index:10;
padding:5px;
}
</style>
<script language="javascript">
YAHOO.namespace("example.overlay");
YAHOO.example.overlay.overlays = [];
function init() {
// *****************************************************************
// This represents a Overlay already on the page
// *****************************************************************
YAHOO.example.overlay.oPredefined = new YAHOO.widget.Overlay("oPredefined", {visible:true, x:400, y:400} );
YAHOO.example.overlay.oPredefined.render();
// *****************************************************************
// This represents an Overlay completely pre-constructed from code
// *****************************************************************
YAHOO.example.overlay.oDynamic = new YAHOO.widget.Overlay("oDynamic", {visible:true, x:400, y:250} );
YAHOO.example.overlay.oDynamic.setHeader("Completely dynamic overlay");
YAHOO.example.overlay.oDynamic.setBody("I was created completely at runtime!");
YAHOO.example.overlay.oDynamic.render(document.body);
// *****************************************************************
// This represents a overlay with a container, but no body content defined
// *****************************************************************
YAHOO.example.overlay.oChangedAtRuntime = new YAHOO.widget.Overlay("oChangedAtRuntime", {visible:true, x:400, y:300} );
YAHOO.example.overlay.oChangedAtRuntime.setHeader("I was changed at runtime!");
YAHOO.example.overlay.oChangedAtRuntime.setBody("<b>My original markup text was replaced at runtime with this text.</b>");
YAHOO.example.overlay.oChangedAtRuntime.setFooter("The footer was changed too!");
YAHOO.example.overlay.oChangedAtRuntime.render();
// *****************************************************************
var button2 = document.getElementById("btnHide");
button2.onclick = hideAll;
var button3 = document.getElementById("btnShow");
button3.onclick = showAll;
var dd1 = new YAHOO.util.DD(YAHOO.example.overlay.oDynamic.element.id, "module");
dd1.onDrag = function() {
YAHOO.example.overlay.oDynamic.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlay.oDynamic.element);
YAHOO.example.overlay.oDynamic.cfg.setProperty("xy", pos);
}
var dd2 = new YAHOO.util.DD(YAHOO.example.overlay.oPredefined.element.id, "module");
dd2.onDrag = function() {
YAHOO.example.overlay.oPredefined.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlay.oPredefined.element);
YAHOO.example.overlay.oPredefined.cfg.setProperty("xy", pos);
}
var dd3 = new YAHOO.util.DD(YAHOO.example.overlay.oChangedAtRuntime.element.id, "module");
dd3.onDrag = function() {
YAHOO.example.overlay.oChangedAtRuntime.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlay.oChangedAtRuntime.element);
YAHOO.example.overlay.oChangedAtRuntime.cfg.setProperty("xy", pos);
}
YAHOO.example.overlay.overlays["oPredefined"] = YAHOO.example.overlay.oPredefined;
YAHOO.example.overlay.overlays["oDynamic"] = YAHOO.example.overlay.oDynamic;
YAHOO.example.overlay.overlays["oChangedAtRuntime"] = YAHOO.example.overlay.oChangedAtRuntime;
}
function hideAll() {
for (var i in YAHOO.example.overlay.overlays) {
var m = YAHOO.example.overlay.overlays[i];
m.hide();
}
}
function showAll() {
for (var i in YAHOO.example.overlay.overlays) {
var m = YAHOO.example.overlay.overlays[i];
m.show();
}
}
function create() {
var form = document.forms["overlayform"];
// get form values
var id = form["id"].value;
var x = form["x"].value;
var y = form["y"].value;
var header = form["header"].value;
var body = form["body"].value;
var footer = form["footer"].value;
var visible = form["visible"].checked;
var effectArg;
if (form["effect"].selectedIndex > 0) {
var dur = form["duration"].value;
if (! dur) {
dur = 0.5;
} else {
dur = parseFloat(dur);
}
var effect = form["effect"].options[form["effect"].selectedIndex].value;
var effectClass = eval(effect);
effectArg = {
effect:effectClass,
duration:dur
}
}
var width = form["width"].value;
var height = form["height"].value;
var zIndex = form["zIndex"].value;
var constrain = form["constraintoviewport"].checked;
var useIframe = form["iframe"].checked;
var fixedcenter = form["fixedcenter"].checked;
var context = form["context"].value;
var contextArg = new Array();
if (context) {
contextArg[0] = context;
contextArg[1] = form["elementMagnet"].options[form["elementMagnet"].selectedIndex].value;
contextArg[2] = form["contextMagnet"].options[form["contextMagnet"].selectedIndex].value;
}
var args = {};
args.visible = visible;
if (effectArg) {
args.effect = effectArg;
}
if (x) {
args.x = parseInt(x);
}
if (y) {
args.y = parseInt(y);
}
if (width) {
args.width = width;
}
if (height) {
args.height = height;
}
if (zIndex) {
args.zIndex = zIndex;
}
args.constraintoviewport = constrain;
args.iframe = useIframe;
args.fixedcenter = fixedcenter;
if (contextArg.length > 0) {
args.context = contextArg;
} else {
args.context = null;
}
var newMod;
var isNew = true;
if (YAHOO.example.overlay.overlays[id]) {
newMod = YAHOO.example.overlay.overlays[id];
newMod.cfg.applyConfig(args);
isNew = false;
} else {
newMod = new YAHOO.widget.Overlay(id, args);
YAHOO.example.overlay.overlays[id] = newMod;
}
if (header) {
newMod.setHeader(header);
}
if (body) {
newMod.setBody(body);
}
if (footer) {
newMod.setFooter(footer);
}
if (isNew) {
newMod.render(document.body);
} else {
newMod.render();
}
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div class="box">
<div class="hd">
<h1>Overlay Example</h1>
</div>
<div class="bd">
<button id="btnHide">Hide All</button>
<button id="btnShow">Show All</button>
</div>
<p>An Overlay is a <a href="module.html">Module</a> that is positioned to float above document content. It contains no default behavior or styling, but has several properties for manipulating its size and position. Overlay is extended to create subclasses like <a href="tooltip.html">Tooltip</a>, <a href="panel.html">Panel</a>, and <a href="dialog.html">Dialog</a>.</p>
<p>In this example, there are three draggable overlays that are displayed, two of which are already completely or partially marked up, and one which is dynamically created using JavaScript alone.</p>
<p>Each overlay automatically has a hidden IFRAME element wired underneath it when the browser is Internet Explorer, so that the overlays can be positioned above SELECT elements without the SELECT bleeding through. The IFRAME also ensures that the overlay can be positioned above Flash elements easily.</p>
</div>
<select style="display:block">
<option>This is a <select> element, helpul for testing the IFRAME shim</option>
</select>
<div id="oPredefined" style="visibility:hidden;position:absolute">
<div class="hd">Predefined Overlay Header</div>
<div class="bd">I was created using simple predefined markup.</div>
<div class="ft">Predefined Overlay Footer</div>
</div>
<div id="oChangedAtRuntime" style="visibility:hidden;position:absolute">
<div class="hd">Placeholder Header</div>
<div class="bd">This is only placeholder text in the markup.</div>
<div class="ft">Placeholder Footer</div>
</div>
<img id="ctx1" src="./examples/container/img/ctx.gif" />
<form onsubmit="return false" id="overlayform">
<div class="overlayform">
<div class="formheader">
Create / Modify a Dynamic Overlay
</div>
<div class="row header">
<div class="label" style="text-align:center">Property</div><div class="formw">Value</div>
</div>
<div class="row first">
<div class="label">ID</div><div class="formw"><input type="text" name="id" /></div>
</div>
<div class="row first">
<div class="label">Header</div><div class="formw"><textarea name="header"></textarea></div>
</div>
<div class="row first">
<div class="label">Body</div><div class="formw"><textarea name="body"></textarea></div>
</div>
<div class="row first">
<div class="label">Footer</div><div class="formw"><textarea name="footer"></textarea></div>
</div>
<div class="row">
<div class="label">Show/Hide Effect(s)</div><div class="formw"><select name="effect">
<option value="">*none*</option>
<option value="YAHOO.widget.ContainerEffect.FADE">Fade</option>
<option value="YAHOO.widget.ContainerEffect.SLIDE">Slide</option>
</select> Duration: <input type="text" name="duration" style="width:25px"/>s</div>
</div>
<div class="row">
<div class="label">Visible</div><div class="formw"><input type="checkbox" name="visible" value="checkbox" checked="true"/></div>
</div>
<div class="row">
<div class="label">x position</div><div class="formw"><input type="text" name="x" /></div>
</div>
<div class="row">
<div class="label">y position</div><div class="formw"><input type="text" name="y" /></div>
</div>
<div class="row">
<div class="label">width</div><div class="formw"><input type="text" name="width" /></div>
</div>
<div class="row">
<div class="label">height</div><div class="formw"><input type="text" name="height" /></div>
</div>
<div class="row">
<div class="label">z-index</div><div class="formw"><input type="text" name="zIndex" /></div>
</div>
<div class="row">
<div class="label">constrain to viewport</div><div class="formw"><input type="checkbox" name="constraintoviewport" value="checkbox" /></div>
</div>
<div class="row">
<div class="label">fix to center of viewport</div><div class="formw"><input type="checkbox" name="fixedcenter" value="checkbox" /></div>
</div>
<div class="row">
<div class="label">Use iframe shim</div><div class="formw"><input type="checkbox" name="iframe" value="checkbox" /></div>
</div>
<div class="row">
<div class="label">Context element</div><div class="formw">ID:<input type="text" name="context" /></div>
</div>
<div class="row">
<div class="label"> </div>
<div class="formw">
Align overlay"s
<select name="elementMagnet">
<option value="tl">top left</option>
<option value="tr">top right</option>
<option value="bl">bottom left</option>
<option value="br">bottom right</option>
</select>
corner to context element"s
<select name="contextMagnet">
<option value="tl">top left</option>
<option value="tr">top right</option>
<option value="bl">bottom left</option>
<option value="br">bottom right</option>
</select> corner
</div>
</div>
<div class="row last">
<div class="label"></div><div class="formw"><button onclick="create()">create/modify my overlay</button></div>
</div>
</div>
</form>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
Overlay Manager Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.OverlayManager</title>
<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>
<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />
<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>
<style>
.overlay {
visibility:hidden;
border:1px solid black;
background-color:#FFFFFF;
z-index:10;
padding:5px;
}
.overlay.focused {
border:3px solid red;
background-color:yellow;
}
</style>
<script language="javascript">
YAHOO.namespace("example.overlaymanager");
function init() {
// *****************************************************************
// This represents a Overlay already on the page
// *****************************************************************
YAHOO.example.overlaymanager.oPredefined = new YAHOO.widget.Overlay("oPredefined", {visible:true, x:400, y:400} );
YAHOO.example.overlaymanager.oPredefined.render();
// *****************************************************************
// This represents an Overlay completely pre-constructed from code
// *****************************************************************
YAHOO.example.overlaymanager.oDynamic = new YAHOO.widget.Overlay("oDynamic", {visible:true, x:400, y:250} );
YAHOO.example.overlaymanager.oDynamic.setHeader("Completely dynamic overlay");
YAHOO.example.overlaymanager.oDynamic.setBody("I was created completely at runtime!");
YAHOO.example.overlaymanager.oDynamic.render(document.body);
// *****************************************************************
// This represents a overlay with a container, but no body content defined
// *****************************************************************
YAHOO.example.overlaymanager.oChangedAtRuntime = new YAHOO.widget.Overlay("oChangedAtRuntime", {visible:true, x:400, y:300} );
YAHOO.example.overlaymanager.oChangedAtRuntime.setHeader("I was changed at runtime!");
YAHOO.example.overlaymanager.oChangedAtRuntime.setBody("<b>My original markup text was replaced at runtime with this text.</b>");
YAHOO.example.overlaymanager.oChangedAtRuntime.setFooter("The footer was changed too!");
YAHOO.example.overlaymanager.oChangedAtRuntime.render();
// *****************************************************************
YAHOO.example.overlaymanager.mgr = new YAHOO.widget.OverlayManager( { overlays:[YAHOO.example.overlaymanager.oPredefined,YAHOO.example.overlaymanager.oDynamic,YAHOO.example.overlaymanager.oChangedAtRuntime] } );
var button2 = document.getElementById("btnHide");
button2.onclick = hideAll;
var button3 = document.getElementById("btnShow");
button3.onclick = showAll;
var dd1 = new YAHOO.util.DD(YAHOO.example.overlaymanager.oDynamic.element.id, "module");
dd1.onDrag = function() {
YAHOO.example.overlaymanager.oDynamic.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oDynamic.element);
YAHOO.example.overlaymanager.oDynamic.cfg.setProperty("xy", pos);
}
var dd2 = new YAHOO.util.DD(YAHOO.example.overlaymanager.oPredefined.element.id, "module");
dd2.onDrag = function() {
YAHOO.example.overlaymanager.oPredefined.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oPredefined.element);
YAHOO.example.overlaymanager.oPredefined.cfg.setProperty("xy", pos);
}
var dd3 = new YAHOO.util.DD(YAHOO.example.overlaymanager.oChangedAtRuntime.element.id, "module");
dd3.onDrag = function() {
YAHOO.example.overlaymanager.oChangedAtRuntime.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oChangedAtRuntime.element);
YAHOO.example.overlaymanager.oChangedAtRuntime.cfg.setProperty("xy", pos);
}
}
function hideAll() {
YAHOO.example.overlaymanager.mgr.hideAll();
}
function showAll() {
YAHOO.example.overlaymanager.mgr.showAll();
}
function create() {
var form = document.forms["overlayform"];
// get form values
var id = form["id"].value;
var x = form["x"].value;
var y = form["y"].value;
var header = form["header"].value;
var body = form["body"].value;
var footer = form["footer"].value;
var visible = form["visible"].checked;
var effectArg;
if (form["effect"].selectedIndex > 0) {
var dur = form["duration"].value;
if (! dur) {
dur = 0.5;
} else {
dur = parseFloat(dur);
}
var effect = form["effect"].options[form["effect"].selectedIndex].value;
var effectClass = eval(effect);
effectArg = {
effect:effectClass,
duration:dur
}
}
var width = form["width"].value;
var height = form["height"].value;
var zIndex = form["zIndex"].value;
var constrain = form["constraintoviewport"].checked;
var useIframe = form["iframe"].checked;
var fixedcenter = form["fixedcenter"].checked;
var context = form["context"].value;
var contextArg = new Array();
if (context) {
contextArg[0] = context;
contextArg[1] = form["elementMagnet"].options[form["elementMagnet"].selectedIndex].value;
contextArg[2] = form["contextMagnet"].options[form["contextMagnet"].selectedIndex].value;
}
var args = {};
args.visible = visible;
if (effectArg) {
args.effect = effectArg;
}
if (x) {
args.x = parseInt(x);
}
if (y) {
args.y = parseInt(y);
}
if (width) {
args.width = width;
}
if (height) {
args.height = height;
}
if (constrain) {
args.constraintoviewport = true;
}
if (useIframe) {
args.iframe = true;
}
if (fixedcenter) {
args.fixedcenter = true;
}
if (contextArg.length > 0) {
args.context = contextArg;
}
var newMod;
var isNew = true;
if (YAHOO.example.overlaymanager.mgr.find(id)) {
newMod = YAHOO.example.overlaymanager.mgr.find(id);
newMod.cfg.applyConfig(args);
isNew = false;
} else {
newMod = new YAHOO.widget.Overlay(id, args);
YAHOO.example.overlaymanager.mgr.register(newMod);
}
if (header) {
newMod.setHeader(header);
}
if (body) {
newMod.setBody(body);
}
if (footer) {
newMod.setFooter(footer);
}
if (isNew) {
newMod.render(document.body);
} else {
newMod.render();
}
}
YAHOO.util.Event.addListener(window, "load", init);
</script>
</head>
<body>
<div class="box">
<div class="hd">
<h1>OverlayManager Example</h1>
</div>
<div class="bd">
<p>OverlayManager is used to manage the focused state of a collection of Overlay objects. Creating an OverlayManager and registering an Overlay is simple:
<code>mgr = new YAHOO.widget.OverlayManager();<br/>
mgr.register(myOverlay);
</code>
</p>
<p>Note that when you click on an Overlay, the Overlay is highlighted, indicating that it currently has the focus. This is because the OverlayManager keeps track of which of the registered Overlays currently is focused, and ensures that the z-index of that Overlay is the highest.</p>
<button id="btnHide">Hide All</button>
<button id="btnShow">Show All</button>
</div>
<p></p>
</div>
<select style="display:block">
<option>This is a <select> element, helpul for testing the IFRAME shim</option>
</select>
<div id="oPredefined" style="visibility:hidden;position:absolute">
<div class="hd">Predefined Overlay Header</div>
<div class="bd">I was created using simple predefined markup.</div>
<div class="ft">Predefined Overlay Footer</div>
</div>
<div id="oChangedAtRuntime" style="visibility:hidden;position:absolute">
<div class="hd">Placeholder Header</div>
<div class="bd">This is only placeholder text in the markup.</div>
<div class="ft">Placeholder Footer</div>
</div>
<img id="ctx1" src="./examples/container/img/ctx.gif" />
<form onsubmit="return false" id="overlayform">
<div class="overlayform">
<div class="formheader">
Create / Modify a Dynamic Overlay
</div>
<div class="row header">
<div class="label" style="text-align:center">Property</div><div class="formw">Value</div>
</div>
<div class="row first">
<div class="label">ID</div><div class="formw"><input type="text" name="id" /></div>
</div>
<div class="row first">
<div class="label">Header</div><div class="formw"><textarea name="header"></textarea></div>
</div>
<div class="row first">
<div class="label">Body</div><div class="formw"><textarea name="body"></textarea></div>
</div>
<div class="row first">
<div class="label">Footer</div><div class="formw"><textarea name="footer"></textarea></div>
</div>
<div class="row">
<div class="label">Show/Hide Effect(s)</div><div class="formw"><select name="effect">
<option value="">*none*</option>
<option value="YAHOO.widget.ContainerEffect.FADE">Fade</option>
<option value="YAHOO.widget.ContainerEffect.SLIDE">Slide</option>
</select> Duration: <input type="text" name="duration" style="width:25px"/>s</div>
</div>
<div class="row">
<div class="label">Visible</div><div class="formw"><input type="checkbox" name="visible" value="checkbox" checked="true"/></div>
</div>
<div class="row">
<div class="label">x position</div><div class="formw"><input type="text" name="x" /></div>
</div>
<div class="row">
<div class="label">y position</div><div class="formw"><input type="text" name="y" /></div>
</div>
<div class="row">
<div class="label">width</div><div class="formw"><input type="text" name="width" /></div>
</div>
<div class="row">
<div class="label">height</div><div class="formw"><input type="text" name="height" /></div>
</div>
<div class="row">
<div class="label">z-index</div><div class="formw"><input type="text" name="zIndex" /></div>
</div>
<div class="row">
<div class="label">constrain to viewport</div><div class="formw"><input type="checkbox" name="constraintoviewport" value="checkbox" /></div>
</div>
<div class="row">
<div class="label">fix to center of viewport</div><div class="formw"><input type="checkbox" name="fixedcenter" value="checkbox" /></div>
</div>
<div class="row">
<div class="label">Use iframe shim</div><div class="formw"><input type="checkbox" name="iframe" value="checkbox" /></div>
</div>
<div class="row">
<div class="label">Context element</div><div class="formw">ID:<input type="text" name="context" /></div>
</div>
<div class="row">
<div class="label"> </div>
<div class="formw">
Align overlay"s
<select name="elementMagnet">
<option value="tl">top left</option>
<option value="tr">top right</option>
<option value="bl">bottom left</option>
<option value="br">bottom right</option>
</select>
corner to context element"s
<select name="contextMagnet">
<option value="tl">top left</option>
<option value="tr">top right</option>
<option value="bl">bottom left</option>
<option value="br">bottom right</option>
</select> corner
</div>
</div>
<div class="row last">
<div class="label"></div><div class="formw"><button onclick="create()">create/modify my overlay</button></div>
</div>
</div>
</form>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui.zip">yui.zip( 3,714 k)</a>
