Jump to content

Photo
- - - - -

Ajax Tooltip Version 2.0


  • Please log in to reply
3 replies to this topic

#1 soniderot

soniderot

    Level 4

  • Banned
  • Level
  • 80 points
  • 114 posts
    • Gender:Not Telling

Posted 06 October 2011 - 02:32 PM

news version ajax
CREATE ajax.php
/* Simple AJAX Code-Kit (SACK) v1.6.1 */
 /* ©2005 Gregory Wild-Smith */
 /* www.twilightuniverse.com */
 /* Software licenced under a modified X11 licence,
    see documentation or authors website for more details */
 
 function sack(file) {
     this.xmlhttp = null;
 
     this.resetData = function() {
         this.method = "POST";
           this.queryStringSeparator = "?";
         this.argumentSeparator = "&";
         this.URLString = "";
         this.encodeURIString = true;
           this.execute = false;
           this.element = null;
         this.elementObj = null;
         this.requestFile = file;
         this.vars = new Object();
         this.responseStatus = new Array(2);
       };
 
     this.resetFunctions = function() {
           this.onLoading = function() { };
           this.onLoaded = function() { };
           this.onInteractive = function() { };
           this.onCompletion = function() { };
           this.onError = function() { };
         this.onFail = function() { };
     };
 
     this.reset = function() {
         this.resetFunctions();
         this.resetData();
     };
 
     this.createAJAX = function() {
         try {
             this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e1) {
             try {
                 this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
             } catch (e2) {
                 this.xmlhttp = null;
             }
         }
 
         if (! this.xmlhttp) {
             if (typeof XMLHttpRequest != "undefined") {
                 this.xmlhttp = new XMLHttpRequest();
             } else {
                 this.failed = true;
             }
         }
     };
 
     this.setVar = function(name, value){
         this.vars[name] = Array(value, false);
     };
 
     this.encVar = function(name, value, returnvars) {
         if (true == returnvars) {
             return Array(encodeURIComponent(name), encodeURIComponent(value));
         } else {
             this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
         }
     }
 
     this.processURLString = function(string, encode) {
         encoded = encodeURIComponent(this.argumentSeparator);
         regexp = new RegExp(this.argumentSeparator + "|" + encoded);
         varArray = string.split(regexp);
         for (i = 0; i < varArray.length; i++){
             urlVars = varArray[i].split("=");
             if (true == encode){
                 this.encVar(urlVars[0], urlVars[1]);
             } else {
                 this.setVar(urlVars[0], urlVars[1]);
             }
         }
     }
 
     this.createURLString = function(urlstring) {
         if (this.encodeURIString && this.URLString.length) {
             this.processURLString(this.URLString, true);
         }
 
         if (urlstring) {
             if (this.URLString.length) {
                 this.URLString += this.argumentSeparator + urlstring;
             } else {
                 this.URLString = urlstring;
             }
         }
 
         // prevents caching of URLString
         this.setVar("rndval", new Date().getTime());
 
         urlstringtemp = new Array();
         for (key in this.vars) {
             if (false == this.vars[key][1] && true == this.encodeURIString) {
                 encoded = this.encVar(key, this.vars[key][0], true);
                 delete this.vars[key];
                 this.vars[encoded[0]] = Array(encoded[1], true);
                 key = encoded[0];
             }
 
             urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
         }
         if (urlstring){
             this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
         } else {
             this.URLString += urlstringtemp.join(this.argumentSeparator);
         }
     }
 
     this.runResponse = function() {
         eval(this.response);
     }
 
     this.runAJAX = function(urlstring) {
         if (this.failed) {
             this.onFail();
         } else {
             this.createURLString(urlstring);
             if (this.element) {
                 this.elementObj = document.getElementById(this.element);
             }
             if (this.xmlhttp) {
                 var self = this;
                 if (this.method == "GET") {
                     totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
                     this.xmlhttp.open(this.method, totalurlstring, true);
                 } else {
                     this.xmlhttp.open(this.method, this.requestFile, true);
                     try {
                         this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
                     } catch (e) { }
                 }
 
                 this.xmlhttp.onreadystatechange = function() {
                     switch (self.xmlhttp.readyState) {
                         case 1:
                             self.onLoading();
                             break;
                         case 2:
                             self.onLoaded();
                             break;
                         case 3:
                             self.onInteractive();
                             break;
                         case 4:
                             self.response = self.xmlhttp.responseText;
                             self.responseXML = self.xmlhttp.responseXML;
                             self.responseStatus[0] = self.xmlhttp.status;
                             self.responseStatus[1] = self.xmlhttp.statusText;
 
                             if (self.execute) {
                                 self.runResponse();
                             }
 
                             if (self.elementObj) {
                                 elemNodeName = self.elementObj.nodeName;
                                 elemNodeName = elemNodeName.toLowerCase();
                                 if (elemNodeName == "input"
                                 || elemNodeName == "select"
                                 || elemNodeName == "option"
                                 || elemNodeName == "textarea") {
                                     self.elementObj.value = self.response;
                                 } else {
                                     self.elementObj.innerHTML = self.response;
                                 }
                             }
                             if (self.responseStatus[0] == "200") {
                                 self.onCompletion();
                             } else {
                                 self.onError();
                             }
 
                             self.URLString = "";
                             /* These lines were added by Alf Magne Kalleland ref. info on the sack home page. It prevents memory leakage in IE */
 
                             delete self.xmlhttp['onreadystatechange'];
                             self.xmlhttp=null;
                             self.responseStatus=null;
                             self.response=null;
                             self.responseXML=null;
                                                         
                             break;
                     }
                 };
 
                 this.xmlhttp.send(this.URLString);
             }
         }
     };
 
     this.reset();
     this.createAJAX();
 }

CREATE ajax-dynamic-content.js
/************************************************************************************************************
 Ajax dynamic content
 Copyright (C) 2006  DTHMLGoodies.com, Alf Magne Kalleland
 
 This library is free software; you can redistribute it and/or
 modify it under the terms of the GNU Lesser General Public
 License as published by the Free Software Foundation; either
 version 2.1 of the License, or (at your option) any later version.
 
 This library 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
 Lesser General Public License for more details.
 
 You should have received a copy of the GNU Lesser General Public
 License along with this library; if not, write to the Free Software
 Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
 
 Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
 written by Alf Magne Kalleland.
 
 Alf Magne Kalleland, 2006
 Owner of DHTMLgoodies.com
 
 
 ************************************************************************************************************/    
 
 var enableCache = true;
 var jsCache = new Array();
 
 var dynamicContent_ajaxObjects = new Array();
 
 function ajax_showContent(divId,ajaxIndex,url,callbackOnComplete)
 {
     var targetObj = document.getElementById(divId);
     targetObj.innerHTML = dynamicContent_ajaxObjects[ajaxIndex].response;
     if(enableCache){
         jsCache[url] =     dynamicContent_ajaxObjects[ajaxIndex].response;
     }
     dynamicContent_ajaxObjects[ajaxIndex] = false;
     
     ajax_parseJs(targetObj);
     
     if(callbackOnComplete) {
         executeCallback(callbackOnComplete);
     }
 }
 
 function executeCallback(callbackString) {
     if(callbackString.indexOf('(')==-1) {
         callbackString = callbackString + '()';
     }
     try{
         eval(callbackString);
     }catch(e){
 
     }
     
     
 }
 
 function ajax_loadContent(divId,url,callbackOnComplete)
 {
     if(enableCache && jsCache[url]){
         document.getElementById(divId).innerHTML = jsCache[url];
         ajax_parseJs(document.getElementById(divId))
         evaluateCss(document.getElementById(divId))
         if(callbackOnComplete) {
             executeCallback(callbackOnComplete);
         }        
         return;
     }
     
     var ajaxIndex = dynamicContent_ajaxObjects.length;
     document.getElementById(divId).innerHTML = 'Loading content - please wait';
     dynamicContent_ajaxObjects[ajaxIndex] = new sack();
     
     if(url.indexOf('?')>=0){
         dynamicContent_ajaxObjects[ajaxIndex].method='GET';
         var string = url.substring(url.indexOf('?'));
         url = url.replace(string,'');
         string = string.replace('?','');
         var items = string.split(/&/g);
         for(var no=0;no<items.length;no++){
             var tokens = items[no].split('=');
             if(tokens.length==2){
                 dynamicContent_ajaxObjects[ajaxIndex].setVar(tokens[0],tokens[1]);
             }    
         }    
         url = url.replace(string,'');
     }
 
     
     dynamicContent_ajaxObjects[ajaxIndex].requestFile = url;    // Specifying which file to get
     dynamicContent_ajaxObjects[ajaxIndex].onCompletion = function(){ ajax_showContent(divId,ajaxIndex,url,callbackOnComplete); };    // Specify function that will be executed after file has been found
     dynamicContent_ajaxObjects[ajaxIndex].runAJAX();        // Execute AJAX function    
     
     
 }
 
 function ajax_parseJs(obj)
 {
     var scriptTags = obj.getElementsByTagName('SCRIPT');
     var string = '';
     var jsCode = '';
     for(var no=0;no<scriptTags.length;no++){    
         if(scriptTags[no].src){
             var head = document.getElementsByTagName("head")[0];
             var scriptObj = document.createElement("script");
     
             scriptObj.setAttribute("type", "text/javascript");
             scriptObj.setAttribute("src", scriptTags[no].src);      
         }else{
             if(navigator.userAgent.toLowerCase().indexOf('opera')>=0){
                 jsCode = jsCode + scriptTags[no].text + '\n';
             }
             else
                 jsCode = jsCode + scriptTags[no].innerHTML;    
         }
         
     }
 
     if(jsCode)ajax_installScript(jsCode);
 }
 
 
 function ajax_installScript(script)
 {        
     if (!script)
         return;        
     if (window.execScript){            
         window.execScript(script)
     }else if(window.jQuery && jQuery.browser.safari){ // safari detection in jQuery
         window.setTimeout(script,0);
     }else{            
         window.setTimeout( script, 0 );
     } 
 }    
     
     
 function evaluateCss(obj)
 {
     var cssTags = obj.getElementsByTagName('STYLE');
     var head = document.getElementsByTagName('HEAD')[0];
     for(var no=0;no<cssTags.length;no++){
         head.appendChild(cssTags[no]);
     }    
 }

CREATE ajax-tooltip.js
/************************************************************************************************************
     @fileoverview
     Ajax tooltip
     Copyright (C) 2006  Alf Magne Kalleland(post@dhtmlgoodies.com)
     
     This library is free software; you can redistribute it and/or
     modify it under the terms of the GNU Lesser General Public
     License as published by the Free Software Foundation; either
     version 2.1 of the License, or (at your option) any later version.
     
     This library 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
     Lesser General Public License for more details.
     
     You should have received a copy of the GNU Lesser General Public
     License along with this library; if not, write to the Free Software
     Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
     
     
     www.dhtmlgoodies.com 
     Alf Magne Kalleland
 
 ************************************************************************************************************/
 
 /* Custom variables */
 
 /* Offset position of tooltip */
 var x_offset_tooltip = 5;
 var y_offset_tooltip = 0;
 
 /* Don't change anything below here */
 
 
 var ajax_tooltipObj = false;
 var ajax_tooltipObj_iframe = false;
 
 var ajax_tooltip_MSIE = false;
 if(navigator.userAgent.indexOf('MSIE')>=0)ajax_tooltip_MSIE=true;
 
 
 
 var currentTooltipObject = false;
 
 function ajax_showTooltip(e,externalFile,inputObj)
 {
     currentTooltipObject = inputObj;
     //window.onresize = function(e) { ajax_positionTooltip(e); } ;
    if(document.all)e = event;
 
    
     if(!ajax_tooltipObj)    /* Tooltip div not created yet ? */
     {
         ajax_tooltipObj = document.createElement('DIV');
         ajax_tooltipObj.style.position = 'absolute';
         ajax_tooltipObj.id = 'ajax_tooltipObj';        
         
         document.body.appendChild(ajax_tooltipObj);
 
         
         var leftDiv = document.createElement('DIV');    /* Create arrow div */
         leftDiv.className='ajax_tooltip_arrow';
         leftDiv.id = 'ajax_tooltip_arrow';
         ajax_tooltipObj.appendChild(leftDiv);
         
         var contentDiv = document.createElement('DIV'); /* Create tooltip content div */
         contentDiv.className = 'ajax_tooltip_content';
         ajax_tooltipObj.appendChild(contentDiv);
         contentDiv.id = 'ajax_tooltip_content';
         contentDiv.style.marginBottom = '15px';
         
         // Creating button div
         var buttonDiv = document.createElement('DIV');
         buttonDiv.style.cssText = 'position:absolute;left:50%;bottom:20px;text-align:center;background-color:#FFF;font-size:0.8em;height:15px;z-index:10000000';
         buttonDiv.innerHTML = '<a href="#" onclick="ajax_hideTooltip();return false">Close</a>';
         ajax_tooltipObj.appendChild(buttonDiv);
 
         if(ajax_tooltip_MSIE){    /* Create iframe object for MSIE in order to make the tooltip cover select boxes */
             ajax_tooltipObj.style.cursor = 'move';
             ajax_tooltipObj_iframe = document.createElement('<IFRAME frameborder="0">');
             ajax_tooltipObj_iframe.style.position = 'absolute';
             ajax_tooltipObj_iframe.border='0';
             ajax_tooltipObj_iframe.frameborder=0;
             ajax_tooltipObj_iframe.style.backgroundColor='#FFF';
             ajax_tooltipObj_iframe.src = 'about:blank';
             contentDiv.appendChild(ajax_tooltipObj_iframe);
             ajax_tooltipObj_iframe.style.left = '0px';
             ajax_tooltipObj_iframe.style.top = '0px';
         }        
     }
     // Find position of tooltip
     ajax_tooltipObj.style.display='block';
     ajax_loadContent('ajax_tooltip_content',externalFile);
     if(ajax_tooltip_MSIE){
         ajax_tooltipObj_iframe.style.width = ajax_tooltipObj.clientWidth + 'px';
         ajax_tooltipObj_iframe.style.height = ajax_tooltipObj.clientHeight + 'px';
     }
 
     
     ajax_positionTooltip(e,inputObj); 
 }
 
 function ajax_positionTooltip(e,inputObj)
 {
     if(!inputObj)inputObj=currentTooltipObject;
     if(inputObj){
         var leftPos = (ajaxTooltip_getLeftPos(inputObj) + inputObj.offsetWidth);
         var topPos = ajaxTooltip_getTopPos(inputObj);
     }else{        
        var leftPos = e.clientX;
        var topPos = e.clientY;
     }
    var tooltipWidth = document.getElementById('ajax_tooltip_content').offsetWidth +  document.getElementById('ajax_tooltip_arrow').offsetWidth;
    ajax_tooltipObj.style.left = leftPos + 'px';
    ajax_tooltipObj.style.top = topPos + 'px';   
 } 
 
 function ajax_hideTooltip()
 {
     ajax_tooltipObj.style.display='none';
 }
 
 function ajaxTooltip_getTopPos(inputObj)
 {        
   var returnValue = inputObj.offsetTop;
   while((inputObj = inputObj.offsetParent) != null){
       if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
   }
   return returnValue;
 }
 
 function ajaxTooltip_getLeftPos(inputObj)
 {
   var returnValue = inputObj.offsetLeft;
   while((inputObj = inputObj.offsetParent) != null){
       if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
   }
   return returnValue;
 }

CREATE ajax-tooltip.css:
/* CSS only needed for the demo */
 
 body,html{
     margin:0px;
     padding:0px;
     text-align:center;
     background-color: #E2EBED;
     font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
     line-height: 130%;
     text-align:center;
     height:100%;
     width:100%;
 }
 
 
 #mainContainer{
     width:630px;
     border-left:1px solid #317082;    
     border-right:1px solid #317082;    
     margin:0 auto;    /* Center align content, equivalent to margin-left:auto;margin-right:auto; */
     text-align:left;    /* Override inherited text-align:center from the body tag */
     background-color:#FFF;
     height:100%;
 }
 
 #menuColumn{
     width:160px;
     float:left;
     padding:5px;
     font-size:0.9em;
 }
 #mainContent{
     width:440px;
     float:left;    
 }
 
 .oddRow{
     background-color:#FFF;
 }
 .evenRow{
     background-color:#EEE;
 }
 
 .productTable{
     border:3px double #000;
 }
 h3{
     margin-top:0px;
 }
 
 
 /* End css for the demo */
 
 /* CSS needed for the script */
 
 #ajax_tooltipObj{
     z-index:1000000;
     text-align:left;
 }
 #ajax_tooltipObj div{
     position:relative;
 }
 
 /* If you don't want the arrow - Just set the width of this div to 1 or something like that and drop the background selectors from the CSS below */
 
 #ajax_tooltipObj .ajax_tooltip_arrow{    /* Left div for the small arrow */
     background-image:url('../images/arrow.gif');
     width:20px;
     position:absolute;
     left:0px;
     top:0px;
     background-repeat:no-repeat;
     background-position:center left;
     z-index:1000005;
     height:60px;
 }
 
 #ajax_tooltipObj .ajax_tooltip_content{
     border:2px solid #317082;    /* Border width */
     left:18px;    /* Same as border thickness */
     top:0px;
     position:absolute;
     width:150px;    /* Width of tooltip content */
     height:200px;    /* Height of tooltip content */
     background-color:#FFF;    /* Background color */
     padding:5px;    /* Space between border and content */
     font-size:0.8em;    /* Font size of content */
     overflow:auto;    /* Hide overflow content */
     z-index:1000001;
 }

CREATE ajax-tooltip-demo.css
/* CSS only needed for the demo */
 
 body,html{
     margin:0px;
     padding:0px;
     text-align:center;
     background-color: #E2EBED;
     font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
     line-height: 130%;
     text-align:center;
     height:100%;
     width:100%;
 }
 
 
 #mainContainer{
     width:630px;
     border-left:1px solid #317082;    
     border-right:1px solid #317082;    
     margin:0 auto;    /* Center align content, equivalent to margin-left:auto;margin-right:auto; */
     text-align:left;    /* Override inherited text-align:center from the body tag */
     background-color:#FFF;
     height:100%;
 }
 
 #menuColumn{
     width:160px;
     float:left;
     padding:5px;
     font-size:0.9em;
 }
 #mainContent{
     width:440px;
     float:left;    
 }
 
 .oddRow{
     background-color:#FFF;
 }
 .evenRow{
     background-color:#EEE;
 }
 
 .productTable{
     border:3px double #000;
 }
 h3{
     margin-top:0px;
 }
 
 
 /* End css for the demo */


JS AND CSS IS IT FILE /
PASTE ON HEADER:
     <script type="text/javascript" src="js/ajax-dynamic-content.js"></script>
     <script type="text/javascript" src="js/ajax.js"></script>
     <script type="text/javascript" src="js/ajax-tooltip.js"></script>
 
 <link rel="stylesheet" href="css/ajax-tooltip.css" media="screen" type="text/css">
     <link rel="stylesheet" href="css/ajax-tooltip-demo.css" media="screen" type="text/css">
 

DEMO PASTE ON HOME, USER_HOME, PROFILE, ETC:
 <table width="100%" class="productTable">
             <thead>
                 <th>Product</th>
                 <th>Info</th>
             </thead>
             <tbody>
                 <tr class="oddRow">
                     <td>JS Calendar</td>
                     <td><a href="#" onmouseover="ajax_showTooltip(window.event,'http://www.dhtmlgoodies.com/scripts/ajax-tooltip/demo-pages/js-calendar.html',this);return false" onmouseout="ajax_hideTooltip()">Info</a></td>    
                 </tr>
                 <tr class="evenRow">
                     <td>Dragable boxes</td>
                     <td><a href="#" onmouseover="ajax_showTooltip(window.event,'http://www.dhtmlgoodies.com/scripts/ajax-tooltip/demo-pages/dragable-boxes.html',this);return false" onmouseout="ajax_hideTooltip()">Info</a></td>                
                 </tr>
                 <tr class="oddRow">
                     <td>Ajax tooltip</td>
                     <td><a href="#" onmouseover="ajax_showTooltip(window.event,'http://www.dhtmlgoodies.com/scripts/ajax-tooltip/demo-pages/ajax-tooltip.html',this);return false" onmouseout="ajax_hideTooltip()">Info</a></td>                
                 </tr>
             </tbody>
         </table>

CHAGE AFTER EVENT URL

Download codes here is!!

DEMO ONLINE , PLEASE JOIN OR SIGNUP ON MY PAGE:

http://chido2.k-braz.com/


REPUTATION 3O OR MORE PLEASE XD

Posted Image


Edited by soniderot, 06 October 2011 - 02:38 PM.


#2 2plus1

2plus1

    Level 2

  • Banned
  • Level
  • 5 points
  • 42 posts

Posted 06 October 2011 - 06:43 PM

how to use it in SE 4.1.7

#3 soniderot

soniderot

    Level 4

  • Banned
  • Level
  • 80 points
  • 114 posts
    • Gender:Not Telling

Posted 06 October 2011 - 06:53 PM

iqual no problems in others versions , paste the code

#4 erismarketers

erismarketers

    Level 2

  • Members
  • Level
  • 10 points
  • 36 posts
    • Gender:Male
    • Software:SE 4.8.x

Posted 06 November 2015 - 03:32 PM

I want to try this.... Thanks....






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users


All the resources listed here are just for testing purpose and they shouldn't be used at any commercial environment without a valid license.
Those are for users who wants to try them before buy. Help the developer to build it better by purchasing them from original authors.