Ajax Updates

Posted by education training on Wednesday, November 18, 2009

Ajax Updates

Bubble Tooltips : Javascript

Posted: 18 Nov 2009 02:31 PM PST

Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page. Before we begin, here it is the example: just roll over any link to see them in action. They operate this way:

A check for DOM support is performed
If found, the title and href attributes of links are extracted from the page and they’re injected into a DOM structure
When the mouse is rolled over a link, the related tooltip (styled with CSS) is displayed
Installation and customization of Bubble Tooltips is quite easy. They are composed mainly of four parts:
1)JavaScript:

 function enableTooltips(id){ var links,i,h; if(!document.getElementById || !document.getElementsByTagName) return; AddCss(); h=document.createElement("span"); h.id="btc"; h.setAttribute("id","btc"); h.style.position="absolute"; document.getElementsByTagName("body")[0].appendChild(h); if(id==null) links=document.getElementsByTagName("a"); else links=document.getElementById(id).getElementsByTagName("a"); for(i=0;i<links .length;i++){     Prepare(links[i]);     } }  function Prepare(el){ var tooltip,t,b,s,l; t=el.getAttribute("title"); if(t==null || t.length==0) t="link:"; el.removeAttribute("title"); tooltip=CreateEl("span","tooltip"); s=CreateEl("span","top"); s.appendChild(document.createTextNode(t)); tooltip.appendChild(s); b=CreateEl("b","bottom"); l=el.getAttribute("href"); if(l.length>28) l=l.substr(0,25)+"..."; b.appendChild(document.createTextNode(l)); tooltip.appendChild(b); setOpacity(tooltip); el.tooltip=tooltip; el.onmouseover=showTooltip; el.onmouseout=hideTooltip; el.onmousemove=Locate; }  function showTooltip(e){ document.getElementById("btc").appendChild(this.tooltip); Locate(e); }  function hideTooltip(e){ var d=document.getElementById("btc"); if(d.childNodes.length>0) d.removeChild(d.firstChild); }  function setOpacity(el){ el.style.filter="alpha(opacity:95)"; el.style.KHTMLOpacity="0.95"; el.style.MozOpacity="0.95"; el.style.opacity="0.95"; }  function CreateEl(t,c){ var x=document.createElement(t); x.className=c; x.style.display="block"; return(x); }  function AddCss(){ var l=CreateEl("link"); l.setAttribute("type","text/css"); l.setAttribute("rel","stylesheet"); l.setAttribute("href","bt.css"); l.setAttribute("media","screen"); document.getElementsByTagName("head")[0].appendChild(l); }  function Locate(e){ var posx=0,posy=0; if(e==null) e=window.event; if(e.pageX || e.pageY){     posx=e.pageX; posy=e.pageY;     } else if(e.clientX || e.clientY){     if(document.documentElement.scrollTop){         posx=e.clientX+document.documentElement.scrollLeft;         posy=e.clientY+document.documentElement.scrollTop;         }     else{         posx=e.clientX+document.body.scrollLeft;         posy=e.clientY+document.body.scrollTop;         }     } document.getElementById("btc").style.top=(posy+10)+"px"; document.getElementById("btc").style.left=(posx-20)+"px"; }

2)CSS

 .tooltip{ width: 200px; color:#000; font:lighter 11px/1.3 Arial,sans-serif; text-decoration:none;text-align:center}  .tooltip span.top{padding: 30px 8px 0;     background: url(bt.gif) no-repeat top}  .tooltip b.bottom{padding:3px 8px 15px;color: #548912;     background: url(bt.gif) no-repeat bottom}

3) A single image in gif format for their graphics
The javascript, the CSS and the image just have to be copied in the same directory of the page and with the default presentation don’t need changes. The lines that should be inserted in the head section are the following:

 <script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips()}; </script>

A very important note: the CSS for the tooltips, named bt.css is added dynamically by javascript only if the browser is found to be DOM-capable. If you’re going to modify the file, just be sure to keep its name.

 <script type="text/javascript" src="BubbleTooltips.js"></script> <script type="text/javascript"> window.onload=function(){enableTooltips("content")}; </script>

On the third line I’ve put in bold the only part that should be modified to fit your needs – it is the id (between quotes) of the element that will contain tooltip-powered links.

Now let’s look more closely at how tooltips works. A sort of invisible markup is added to the page with the aid of the DOM when the mouse rolls over a link. The generated markup is like this:

 <span class="tooltip"> <span class="top">title of the link</span> <b class="bottom">url of the link, max 30 chars</b> </span>

Each of these span and b element are by default rendered block-level, and the tooltip is positioned by javascript according to the mouse position. The rest of the CSS is fairly simple and uses a single image:

 .tooltip,.tooltip *{display:block} /*added by javascript*/   .tooltip{ width: 200px; color:#000;     font:lighter 11px/1.3 Arial,sans-serif;     text-decoration:none;text-align:center}  .tooltip span.top{padding: 30px 8px 0;     background: url(bt.gif) no-repeat top}  .tooltip b.bottom{padding:3px 8px 15px;color: #548912;     background: url(bt.gif) no-repeat bottom}

For your convenience, I’ve prepared a small page with a permanent tooltip in the markup so it would be easier customize the apperence with CSS. When you’re done, just be sure to name the CSS file “bt.css”. Another thing to notice is that a light bit of transparency is added to the tooltips by javascript: it works in IE from 5.5 on, Firefox and Safari.


Demo: http://web-graphics.com/mtarchive/BubbleTooltips.html
Download: http://web-graphics.com/mtarchive/BubbleTooltips.zip
Source: http://web-graphics.com/

Related Listings:

  1. Style Your Websites Tooltips With Prototip Now it's very easy to creat complex tooltips. Here is...
  2. Boxover – Javascript/DHTML Tooltips BoxOver uses javascript / DHTML to show tooltips on a...
  3. CSS Tooltips Avoid cross-browser javascript when you can use css to make...

ArtViper’s mooHorizonSlider – Ajax Slider

Posted: 18 Nov 2009 02:15 PM PST

This little slider class is build with the mootools framework 1.11. You can define various things:

single image movement left / right
multiple movement left / right
scroll speed
image container
image size

In conjunction with the needed CSS style for the scroller, it creates an easy to use image slider. The slider class can be adjusted to fit your needs perfectly – imageWidth, imageCount, scrollRanges etc.

Check out the source of this page to see how it is implemented. You can also use this line of code, adjust it to your needs, copy the CSS to your file and get it going:

 var p = new avScroll({container:'innerScroller', imgWidth:233, scrollRange:24, leftHandle:'leftClicker',rightHandle:'rightScroller', rw:'leftFF', ff:'rightFF', speed:700});



Demo: www.artviper.net/mooHorizonSlider
Download: http://www.artviper.net/mooHorizonSlider/mooHorizonSlider.rar
Source: a href=”www.artviper.net/mooHorizonSlider” target=”_blank”>www.artviper.net/mooHorizonSlider

Related Listings:

  1. Form input slider using Ajax The color_functions.js file is just needed for the examples in...
  2. Ajax Date Slider Script, Pick dates with simple slide bar by dragging it over the time line This element enables you to pick dates with a simple...
  3. Mootools Slider With Two Knobs A double pinned slider with two knobs, minimum and maximum...

MOOSLIDE – AJAX Content Slide

Posted: 18 Nov 2009 02:08 PM PST

Additional functions added for mootols 1.2 version:

autoCloseDelay – define when the box should automatically disappear
closeBtn: ‘element’ – define an element which closes the actual
slide
mooSlide is an ajax replacement for the common lightbox found on many pages.

It can hold any type of content, from html, over images to flash. The dropdown can be slid into view from top of the page as well as from the bottom, and can also be used to create nice looking login panels, like on our page here.

Based on the mootools framework, this script is sleak, fast and can be used more than once on a page through its object orientated programming code.

INSTALLATION STEPS
Open the page you want mooSlide to be used. Now add these lines to the head section of your site:

 <head> <script language="javascript" type="text/ecmascript" src="js/mootools12.js"></script> <script language="javascript" type="text/ecmascript" src="js/mooslide12.js"></script> <link href="css/socializer.css" rel="stylesheet" type="text/css" /> </head>

Now add a link to your document which will be used to slide in | out the mooSlide. Give it an ID, this id is used later on to identify the link.

Now define a

container with the content you want to slide in. Give it an ID too. ( in this sample we use ‘test’ as id for the div )

To create a mooSlide you will need to add the following code to your document, right before the closing body tag.

ADDING THE BOX

 <script language="javascript" type="text/ecmascript">  var px = new mooSlide2({  slideSpeed: 1700, fadeSpeed: 500, toggler:'toggle', content:'test', height:250, removeOnClick: true, opacity:'1', effects:Fx.Transitions.Bounce.easeOut, executeFunction:'sayGoodbye()', from:'top', loadExternal:'test.html' });  </script>

JAVASCRIPT VARIABLES
slideSpeed:
This is a value in ms and determines how long the effect of sliding in will take.
fadeSpeed:
This is a value in ms and determines how long the effect of dissolving the box will take.
toggler:
defines the link (id) that is used to slide in | out the box
content:
this is the id of the container div with the contents that will slide in
height:
defines the height of the mooSlide box in px
removeOnClick:
boolean, (0|1) defines if the box is fading out when clicked
opacity:
float value, (0,0 to 1,0) defines the opacity of the box and its contents
executeFunction:
defines a function to execute when sliding out. Optional.
from:
(bottom|top) defines from which direction the slide box comes into view
loadExternal:
(file) specifies if the contents of the box should come from an external file.
closeBtn:
defines an element that you can use to close the slider
autoCloseDelay:
(ms) define the millseconds after the slide should disappear automatically

MORE INFORMATION
To execute the box on page load, you can use the function run()
(i.e. if you defined a mooSlide with px = new mooSlide(…, just add px.run(); to your doument)

This script has been tested in Firefox 2|3, IE6/IE7, Opera 9.2 and Safari for Windows 3.2. If you find any bugs, please drop a mail at admin[at]artviper.net


Download: http://www.artviper.net/download/mooSlide2-moo12.rar
Source: http://www.artviper.net/

Related Listings:

  1. AJAX Feed API Slide Show Control This afternoon we extended the AJAX Feed API with a...
  2. Slide Puzzle in JavaScript So I finally decided to try out one of these...
  3. Slide In Help Panel A “help panel” will slide in from the left or...

Family Tree PHP 0.3.7

Posted: 18 Nov 2009 01:56 PM PST

Improvements:

The homepage can contain a list of bookmarked persons, events, notes, multimedia, sources, pedigrees, etc.
Editable text on contact page.
Better support for non-western characters.
Better feedback when uploading and importing a Gedcom.

Emails can be send via mail(), SMTP, sendmail, or qmail.
Sorting and listing of all extra pages can be set via 1 form.
Citations are shown on source pages.
Privacy filter is used for citations.
Breadcrumbs can be styled in template.
Approve email is send when a new user is approved immediately.
Bug fixes:

Captcha did not work when PHP was in safe mode.


Download: http://www.familytreephp.com/wp-content/uploads/2009/03/familytreephp_lang_en_0_3_7.zip
Source: http://www.myajaxscripts.com

Related Listings:

  1. Jquery Draggable Ajax Tree Sitemap There are a handful of javascript libraries and plugins available...
  2. Ajax Fancy Captcha – jQuery Plugin Ajax Fancy Captcha is a jQuery plugin that helps you...
  3. jQuery File Tree Overview jQuery File Tree is a configurable, AJAX file browser...

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.