Jump to content

Sliding shelf AJAX help

cursed

By cursed
in Javascript Help

 Share

Recommended Posts

cursed Member

cursed

Posted
Posted
I was reading this article:
http://www.monfx.com/journal/2006/08/01/sliding-ajax-shelf-the-code-behind-the-mask/

and Ive tried it for myself, however, it didnt work :P.

here is my code(the javscript can be found at the website above):
[code]
<html>
<head>
<script type=“text/javascript”

src=“/js/prototype.lite.js”></script>
<script type=“text/javascript” src=“/js/moo.fx.js”></script>
<script type=“text/javascript” src=“/js/moo.fx.pack.js”></script>
<script type=“text/javascript”>
// Initialize the effects
var stretch;

window.onload = function() {
stretch = new fx.Combo(’stretch’, {height: true, opacity: false,
duration: 300});

// Hide them to begin with
stretch.hide();
}
</script>
</head>
<body>
<div id=“stretch”> content </div>
<a href=“javascript:;” onclick=“stretch.toggle();”>Access Shelf</a>
</body>
</html>
[/code]

Link to comment
Share on other sites
ScotDiddle Member

ScotDiddle

Posted
Posted
cursed,

Interesting site you pointed too... I too, could not get it to work, until I noticed I  messed up one of my cut-n-pastes from the site... I failed to include the leading /  (on the first /* comment ) in one of the scripts.

I finally got the following to work  (including the AJAX part) :) (in Firefox... It doesn't work in IE 7  >:(  - No Surprise here...  :o)

Try out these files and let us know...

Regards,

Scot L. Diddle, Richmond VA

Note: All included files displayed, including the called PHP file which executes when the shelf is exposed..

Note:  For the AJAX part to work, I had to get moo.ajax.js from:

http://dev.wp-plugins.org/browser/wpcart/trunk/plugins/shoppingcart/js/moo.ajax.js?rev=6820

the moo.ajax site pointed too no longer carries it; I could not get it to work without the original moo.ajax.js

[b]FILE: slidingAjaxShelf.html: [/b]

[code]

<html>
<head>

  <style>
stretch{
    height: 0;
    overflow: hidden;
  }

  </style>

<script type="text/javascript" src="/javascript/prototype.lite.js"></script>
<script type="text/javascript" src="/javascript/moo.fx.js"></script>
<script type="text/javascript" src="/javascript/moo.fx.pack.js"></script>
<script type="text/javascript" src="/javascript/moo.ajax.js"></script>

<script type="text/javascript">

// Initialize the effects
var stretch;

window.onload = function() {

new ajax ('explode.php',{postBody:'switch=3',update:$('stretch'),
                onComplete: myFunction});

function myFunction(request){
  stretch = new fx.Combo('stretch', {height: true, opacity: false,
  duration: 300});
}

stretch = new fx.Combo('stretch', {height: true, opacity: false,
duration: 300});

// Hide them to begin with
stretch.hide();
}

</script>

</head>

<body>

<div id="stretch"></div>

<a href="javascript:;" onclick="stretch.toggle();">Access Shelf</a>

</body>
</html>

[/code]

[b]FILE:  prototype.lite.js[/b]

[code]
/*  Prototype JavaScript framework
*  (c) 2005 Sam Stephenson <sam@conio.net>
*  Prototype is freely distributable under the terms of an MIT-style license.
*  For details, see the Prototype web site: http://prototype.conio.net/
/*--------------------------------------------------------------------------*/

//note: modified & stripped down version of prototype, to be used with moo.fx by mad4milk (http://moofx.mad4milk.net).

var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

Object.extend = function(destination, source) {
for (property in source) destination[property] = source[property];
return destination;
}

Function.prototype.bind = function(object) {
var __method = this;
return function() {
return __method.apply(object, arguments);
}
}

Function.prototype.bindAsEventListener = function(object) {
var __method = this;
return function(event) {
__method.call(object, event || window.event);
}
}

function $() {
if (arguments.length == 1) return get$(arguments[0]);
var elements = [];
$c(arguments).each(function(el){
elements.push(get$(el));
});
return elements;

function get$(el){
if (typeof el == 'string') el = document.getElementById(el);
return el;
}
}

if (!window.Element) var Element = new Object();

Object.extend(Element, {
remove: function(element) {
element = $(element);
element.parentNode.removeChild(element);
},

hasClassName: function(element, className) {
element = $(element);
if (!element) return;
var hasClass = false;
element.className.split(' ').each(function(cn){
if (cn == className) hasClass = true;
});
return hasClass;
},

addClassName: function(element, className) {
element = $(element);
Element.removeClassName(element, className);
element.className += ' ' + className;
},

removeClassName: function(element, className) {
element = $(element);
if (!element) return;
var newClassName = '';
element.className.split(' ').each(function(cn, i){
if (cn != className){
if (i > 0) newClassName += ' ';
newClassName += cn;
}
});
element.className = newClassName;
},

cleanWhitespace: function(element) {
element = $(element);
$c(element.childNodes).each(function(node){
if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) Element.remove(node);
});
},

find: function(element, what) {
element = $(element)[what];
while (element.nodeType != 1) element = element[what];
return element;
}
});

var Position = {
cumulativeOffset: function(element) {
var valueT = 0, valueL = 0;
do {
valueT += element.offsetTop  || 0;
valueL += element.offsetLeft || 0;
element = element.offsetParent;
} while (element);
return [valueL, valueT];
}
};

document.getElementsByClassName = function(className) {
var children = document.getElementsByTagName('*') || document.all;
var elements = [];
$c(children).each(function(child){
if (Element.hasClassName(child, className)) elements.push(child);
});
return elements;
}

//useful array functions
Array.prototype.iterate = function(func){
for(var i=0;i<this.length;i++) func(this[i], i);
}
if (!Array.prototype.each) Array.prototype.each = Array.prototype.iterate;

function $c(array){
var nArray = [];
for (var i=0;i<array.length;i++) nArray.push(array[i]);
return nArray;
}

[/code]

[b]FILE: moo.fx.js[/b]

[code]

/*
moo.fx, simple effects library built with prototype.js (http://prototype.conio.net).
by Valerio Proietti (http://mad4milk.net) MIT-style LICENSE.
for more info (http://moofx.mad4milk.net).
Sunday, March 05, 2006
v 1.2.3
*/

var fx = new Object();
//base
fx.Base = function(){};
fx.Base.prototype = {
setOptions: function(options) {
this.options = {
duration: 500,
onComplete: '',
transition: fx.sinoidal
}
Object.extend(this.options, options || {});
},

step: function() {
var time  = (new Date).getTime();
if (time >= this.options.duration+this.startTime) {
this.now = this.to;
clearInterval (this.timer);
this.timer = null;
if (this.options.onComplete) setTimeout(this.options.onComplete.bind(this), 10);
}
else {
var Tpos = (time - this.startTime) / (this.options.duration);
this.now = this.options.transition(Tpos) * (this.to-this.from) + this.from;
}
this.increase();
},

custom: function(from, to) {
if (this.timer != null) return;
this.from = from;
this.to = to;
this.startTime = (new Date).getTime();
this.timer = setInterval (this.step.bind(this), 13);
},

hide: function() {
this.now = 0;
this.increase();
},

clearTimer: function() {
clearInterval(this.timer);
this.timer = null;
}
}

//stretchers
fx.Layout = Class.create();
fx.Layout.prototype = Object.extend(new fx.Base(), {
initialize: function(el, options) {
this.el = $(el);
this.el.style.overflow = "hidden";
this.iniWidth = this.el.offsetWidth;
this.iniHeight = this.el.offsetHeight;
this.setOptions(options);
}
});

fx.Height = Class.create();
Object.extend(Object.extend(fx.Height.prototype, fx.Layout.prototype), {
increase: function() {
this.el.style.height = this.now + "px";
},

toggle: function() {
if (this.el.offsetHeight > 0) this.custom(this.el.offsetHeight, 0);
else this.custom(0, this.el.scrollHeight);
}
});

fx.Width = Class.create();
Object.extend(Object.extend(fx.Width.prototype, fx.Layout.prototype), {
increase: function() {
this.el.style.width = this.now + "px";
},

toggle: function(){
if (this.el.offsetWidth > 0) this.custom(this.el.offsetWidth, 0);
else this.custom(0, this.iniWidth);
}
});

//fader
fx.Opacity = Class.create();
fx.Opacity.prototype = Object.extend(new fx.Base(), {
initialize: function(el, options) {
this.el = $(el);
this.now = 1;
this.increase();
this.setOptions(options);
},

increase: function() {
if (this.now == 1 && (/Firefox/.test(navigator.userAgent))) this.now = 0.9999;
this.setOpacity(this.now);
},

setOpacity: function(opacity) {
if (opacity == 0 && this.el.style.visibility != "hidden") this.el.style.visibility = "hidden";
else if (this.el.style.visibility != "visible") this.el.style.visibility = "visible";
if (window.ActiveXObject) this.el.style.filter = "alpha(opacity=" + opacity*100 + ")";
this.el.style.opacity = opacity;
},

toggle: function() {
if (this.now > 0) this.custom(1, 0);
else this.custom(0, 1);
}
});

//transitions
fx.sinoidal = function(pos){
return ((-Math.cos(pos*Math.PI)/2) + 0.5);
//this transition is from script.aculo.us
}
fx.linear = function(pos){
return pos;
}
fx.cubic = function(pos){
return Math.pow(pos, 3);
}
fx.circ = function(pos){
return Math.sqrt(pos);
}


//content
var bustcachevar=0 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadstatustext="<div id='loading'><img src='http://www.monfx.com/wp-content/themes/grass/images/loading.gif' /></div>"

////NO NEED TO EDIT BELOW////////////////////////
var loadedobjects=""
var defaultcontentarray=new Object()
var bustcacheparameter=""

function ajaxpage(url, containerid, targetobj){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
var ullist=targetobj.parentNode.parentNode.getElementsByTagName("li")
for (var i=0; i<ullist.length; i++)
ullist[i].className=""  //deselect all tabs
targetobj.parentNode.className="selected"  //highlight currently clicked on tab
if (url.indexOf("#default")!=-1){ //if simply show default content within container (verus fetch it via ajax)
document.getElementById(containerid).innerHTML=defaultcontentarray[containerid]
return
}
document.getElementById(containerid).innerHTML=loadstatustext
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(revattribute){
if (revattribute!=null && revattribute!=""){ //if "rev" attribute is defined (load external .js or .css files)
var objectlist=revattribute.split(/\s*,\s*/) //split the files and store as array
for (var i=0; i<objectlist.length; i++){
var file=objectlist[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
}

function savedefaultcontent(contentid){// save default ajax tab content
if (typeof defaultcontentarray[contentid]=="undefined") //if default content hasn't already been saved
defaultcontentarray[contentid]=document.getElementById(contentid).innerHTML
}

function startajaxtabs(){
for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
var ulobj=document.getElementById(arguments[i])
var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
for (var x=0; x<ulist.length; x++){ //loop through each LI element
var ulistlink=ulist[x].getElementsByTagName("a")[0]
if (ulistlink.getAttribute("rel")){
var modifiedurl=ulistlink.getAttribute("href").replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/")
ulistlink.setAttribute("href", modifiedurl) //replace URL's root domain with dynamic root domain, for ajax security sake
savedefaultcontent(ulistlink.getAttribute("rel")) //save default ajax tab content
ulistlink.onclick=function(){
ajaxpage(this.getAttribute("href"), this.getAttribute("rel"), this)
loadobjs(this.getAttribute("rev"))
return false
}
if (ulist[x].className=="selected"){
ajaxpage(ulistlink.getAttribute("href"), ulistlink.getAttribute("rel"), ulistlink) //auto load currenly selected tab content
loadobjs(ulistlink.getAttribute("rev")) //auto load any accompanying .js and .css files
}
}
}
}
}

// Initialise the effects
var stretch;

window.onload = function() {
stretch = new fx.Combo('stretch', {height: true, opacity: false, duration: 500});

// Hide them to begin with
stretch.hide();
}
logo= new Image(132,34);
logo.src="http://www.monfx.com/wp-content/themes/grass/images/logotype_h.gif";

[/code]

[b]FILE: moo.fx.pack.js[/b]

[code]

/*
moo.fx pack, effects extensions for moo.fx.
by Valerio Proietti (http://mad4milk.net) MIT-style LICENSE
for more info visit (http://moofx.mad4milk.net).
Friday, April 14, 2006
v 1.2.4
*/

//smooth scroll
fx.Scroll = Class.create();
fx.Scroll.prototype = Object.extend(new fx.Base(), {
initialize: function(options) {
this.setOptions(options);
},

scrollTo: function(el){
var dest = Position.cumulativeOffset($(el))[1];
var client = window.innerHeight || document.documentElement.clientHeight;
var full = document.documentElement.scrollHeight;
var top = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
if (dest+client > full) this.custom(top, dest - client + (full-dest));
else this.custom(top, dest);
},

increase: function(){
window.scrollTo(0, this.now);
}
});

//text size modify, now works with pixels too.
fx.Text = Class.create();
fx.Text.prototype = Object.extend(new fx.Base(), {
initialize: function(el, options) {
this.el = $(el);
this.setOptions(options);
if (!this.options.unit) this.options.unit = "em";
},

increase: function() {
this.el.style.fontSize = this.now + this.options.unit;
}
});

//composition effect: widht/height/opacity
fx.Combo = Class.create();
fx.Combo.prototype = {
setOptions: function(options) {
this.options = {
opacity: true,
height: true,
width: false
}
Object.extend(this.options, options || {});
},

initialize: function(el, options) {
this.el = $(el);
this.setOptions(options);
if (this.options.opacity) {
this.o = new fx.Opacity(el, options);
options.onComplete = null;
}
if (this.options.height) {
this.h = new fx.Height(el, options);
options.onComplete = null;
}
if (this.options.width) this.w = new fx.Width(el, options);
},

toggle: function() { this.checkExec('toggle'); },

hide: function(){ this.checkExec('hide'); },

clearTimer: function(){ this.checkExec('clearTimer'); },

checkExec: function(func){
if (this.o) this.o[func]();
if (this.h) this.h[func]();
if (this.w) this.w[func]();
},

//only if width+height
resizeTo: function(hto, wto) {
if (this.h && this.w) {
this.h.custom(this.el.offsetHeight, this.el.offsetHeight + hto);
this.w.custom(this.el.offsetWidth, this.el.offsetWidth + wto);
}
},

customSize: function(hto, wto) {
if (this.h && this.w) {
this.h.custom(this.el.offsetHeight, hto);
this.w.custom(this.el.offsetWidth, wto);
}
}
}

fx.Accordion = Class.create();
fx.Accordion.prototype = {
setOptions: function(options) {
this.options = {
delay: 100,
opacity: false
}
Object.extend(this.options, options || {});
},

initialize: function(togglers, elements, options) {
this.elements = elements;
this.setOptions(options);
var options = options || '';
this.fxa = [];
if (options && options.onComplete) options.onFinish = options.onComplete;
elements.each(function(el, i){
options.onComplete = function(){
if (el.offsetHeight > 0) el.style.height = '1%';
if (options.onFinish) options.onFinish(el);
}
this.fxa[i] = new fx.Combo(el, options);
this.fxa[i].hide();
}.bind(this));

togglers.each(function(tog, i){
if (typeof tog.onclick == 'function') var exClick = tog.onclick;
tog.onclick = function(){
if (exClick) exClick();
this.showThisHideOpen(elements[i]);
}.bind(this);
}.bind(this));
},

showThisHideOpen: function(toShow){
this.elements.each(function(el, j){
if (el.offsetHeight > 0 && el != toShow) this.clearAndToggle(el, j);
if (el == toShow && toShow.offsetHeight == 0) setTimeout(function(){this.clearAndToggle(toShow, j);}.bind(this), this.options.delay);
}.bind(this));
},

clearAndToggle: function(el, i){
this.fxa[i].clearTimer();
this.fxa[i].toggle();
}
}

var Remember = new Object();
Remember = function(){};
Remember.prototype = {
initialize: function(el, options){
this.el = $(el);
this.days = 365;
this.options = options;
this.effect();
var cookie = this.readCookie();
if (cookie) {
this.fx.now = cookie;
this.fx.increase();
}
},

//cookie functions based on code by Peter-Paul Koch
setCookie: function(value) {
var date = new Date();
date.setTime(date.getTime()+(this.days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
document.cookie = this.el+this.el.id+this.prefix+"="+value+expires+"; path=/";
},

readCookie: function() {
var nameEQ = this.el+this.el.id+this.prefix + "=";
var ca = document.cookie.split(';');
for(var i=0;c=ca[i];i++) {
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return false;
},

custom: function(from, to){
if (this.fx.now != to) {
this.setCookie(to);
this.fx.custom(from, to);
}
}
}

fx.RememberHeight = Class.create();
fx.RememberHeight.prototype = Object.extend(new Remember(), {
effect: function(){
this.fx = new fx.Height(this.el, this.options);
this.prefix = 'height';
},

toggle: function(){
if (this.el.offsetHeight == 0) this.setCookie(this.el.scrollHeight);
else this.setCookie(0);
this.fx.toggle();
},

resize: function(to){
this.setCookie(this.el.offsetHeight+to);
this.fx.custom(this.el.offsetHeight,this.el.offsetHeight+to);
},

hide: function(){
if (!this.readCookie()) {
this.fx.hide();
}
}
});

fx.RememberText = Class.create();
fx.RememberText.prototype = Object.extend(new Remember(), {
effect: function(){
this.fx = new fx.Text(this.el, this.options);
this.prefix = 'text';
}
});

//useful for-replacement
Array.prototype.iterate = function(func){
for(var i=0;i<this.length;i++) func(this[i], i);
}
if (!Array.prototype.each) Array.prototype.each = Array.prototype.iterate;

//Easing Equations (c) 2003 Robert Penner, all rights reserved.
//This work is subject to the terms in http://www.robertpenner.com/easing_terms_of_use.html.

//expo
fx.expoIn = function(pos){
return Math.pow(2, 10 * (pos - 1));
}
fx.expoOut = function(pos){
return (-Math.pow(2, -10 * pos) + 1);
}

//quad
fx.quadIn = function(pos){
return Math.pow(pos, 2);
}
fx.quadOut = function(pos){
return -(pos)*(pos-2);
}

//circ
fx.circOut = function(pos){
return Math.sqrt(1 - Math.pow(pos-1,2));
}
fx.circIn = function(pos){
return -(Math.sqrt(1 - Math.pow(pos, 2)) - 1);
}

//back
fx.backIn = function(pos){
return (pos)*pos*((2.7)*pos - 1.7);
}
fx.backOut = function(pos){
return ((pos-1)*(pos-1)*((2.7)*(pos-1) + 1.7) + 1);
}

//sine
fx.sineOut = function(pos){
return Math.sin(pos * (Math.PI/2));
}
fx.sineIn = function(pos){
return -Math.cos(pos * (Math.PI/2)) + 1;
}
fx.sineInOut = function(pos){
return -(Math.cos(Math.PI*pos) - 1)/2;
}

[/code]

[b]FILE: moo.ajax.js[/b]

[code]

//based on prototype's ajax class
//to be used with prototype.lite, moofx.mad4milk.net.

ajax = Class.create();
ajax.prototype = {
        initialize: function(url, options){
                this.transport = this.getTransport();
                this.postBody = options.postBody || '';
                this.method = options.method || 'post';
                this.onComplete = options.onComplete || null;
                this.update = $(options.update) || null;
                this.request(url);
        },

        request: function(url){
                this.transport.open(this.method, url, true);
                this.transport.onreadystatechange = this.onStateChange.bind(this);
                if (this.method == 'post') {
                        this.transport.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                        if (this.transport.overrideMimeType) this.transport.setRequestHeader('Connection', 'close');
                }
                this.transport.send(this.postBody);
        },

        onStateChange: function(){
                if (this.transport.readyState == 4 && this.transport.status == 200) {
                        if (this.onComplete)
                                setTimeout(function(){this.onComplete(this.transport);}.bind(this), 10);
                        if (this.update)
                                setTimeout(function(){this.update.innerHTML = this.transport.responseText;}.bind(this), 10);
                        this.transport.onreadystatechange = function(){};
                }
        },

        getTransport: function() {
                if (window.ActiveXObject) return new ActiveXObject('Microsoft.XMLHTTP');
                else if (window.XMLHttpRequest) return new XMLHttpRequest();
                else return false;
        }
};

[/code]

[b]FILE: explode.php  ( CALLED SCRIPT during Shelf Expose )[/b]

[code]

<?php

// Example 1
echo "<br />\n";
echo "Usage of PHP explode() built-in Function:\n";
echo "<br />\n";
echo "<br />\n";

echo "<pre>\n";
echo "Example 1";
echo "<br >\n";
echo " if \$pizza ='piece1 piece2 piece3 piece4 piece5 piece6';\n";
echo "<br />\n";
echo "    then: \n";
echo "<br />\n";
echo "            \$pieces = explode(\" \", \$pizza)";
echo "<br />\n";
echo "   produces: \n";
echo "</pre>\n";
echo "<ul><ul><ul><ul><ul><ul>\n";
$pizza  = "piece1 piece2 piece3 piece4 piece5 piece6";
$pieces = explode(" ", $pizza);
echo "\$pices[0] = $pieces[0] <br />\n"; // piece1
echo "\$pices[1] = $pieces[1] <br />\n"; // piece2
echo "\$pices[2] = $pieces[2] <br />\n"; // piece3
echo "\$pices[3] = $pieces[3] <br />\n"; // piece4
echo "\$pices[4] = $pieces[4] <br />\n"; // piece5
echo "\$pices[5] = $pieces[5] <br />\n"; // piece6
echo "</pre>\n";
echo "</ul></ul></ul></ul></ul></ul>\n";

echo "<pre>\n";
echo "Example 2";
echo "<br >\n";
echo " if \$data = 'foo:*:1023:1000::/home/foo:/bin/sh';\n";
echo "<br />\n";
echo "    then: \n";
echo "<br />\n";
echo "            list(\$user, \$pass, \$uid, \$gid, \$gecos, \$home, \$shell) = explode(\":\", \$data);";
echo "<br />\n";
echo "   produces: \n";
echo "<ul><ul><ul><ul><ul><ul>\n";

// Example 2
$data = "foo:*:1023:1000::/home/foo:/bin/sh";
list($user, $pass, $uid, $gid, $gecos, $home, $shell) = explode(":", $data);
echo "\$user =  $user\n"; // foo
echo "\$pass =  $pass<br />\n" ;// *
echo "<br />\n";
echo "</ul></ul></ul></ul></ul></ul>\n";
?>


[/code]
Link to comment
Share on other sites
  • 2 months later...
ScotDiddle Member

ScotDiddle

Posted
Posted
cursed, and Other Ajax Enthusiasts...

    I have had it on my "To Do" list to enable Sliding Ajax Shelves for more than one Div per page...

    I learned a lot about Javascript ( definitely a weak point in my programming arsenal ) while trying to figure out the best way ( hell - any way  ;) )  to accomplish this task. 

    I finally figured out how.

    I present it here for your perusing pleasure...

Scot L. Diddle, Richmond VA



    [b] MultipleSlidingAjaxShelves.html [/b]

[code]

<html>
<head>

  <style>
stretch{
    height: 0;
    overflow: hidden;
  }

  </style>

<script type="text/javascript" src="/javascript/prototype.lite.js"></script>
<script type="text/javascript" src="/javascript/moo.fx.js"></script>
<script type="text/javascript" src="/javascript/moo.fx.pack.js"></script>
<script type="text/javascript" src="/javascript/moo.ajax.js"></script>

<script type="text/javascript">

/**
In order to use javascript looping functions, the PHP programs launched during AJAX processing
all have the same name, but a different suffix.

The same applies to the div names chosen.

**/

// House Keeping

divName = '';
idx = '';

divName = new Array();

divName = new Array();
divName[0]= 'stretch0'; // Need to match the names of the Div's that you want to slide
divName[1]= 'stretch1';
divName[2]= 'stretch2';
divName[3]= 'stretch3';
divName[4]= 'stretch4';
divName[5]= 'stretch5';
divName[6]= 'stretch6';
divName[7]= 'stretch7';
divName[8]= 'stretch8';
divName[9]= 'stretch9'; // Need to define at least as many divNames as there are sliding shelves.
                                // Adding more than you need is acceptable. For this example, I used only 2...

function whichDiv(idx) { // Called when user clicks on Sliding Shelf link

function ajaxNew() {

ajaxObj = new ajax ('explode' + idx + '.php',{postBody:'switch=3',update:$(divName[idx]),onComplete: stretchHide(idx)});

}

ajaxNew();

}

function stretchHide(idx) { // Called when initiating new AJAX class

stretch = new fx.Combo(divName[idx], {height: true, opacity: false,duration: 300});

stretch.toggle();

stretch.hide();

}

// Initialize the effects

window.onload = function() {

function ajaxNew0() {

var divCount = 2 // How many sliding shelves do you have on your page ?

for (idx=0;idx<=divCount;idx++) {

ajaxObj0 = new ajax ('explode' + idx + '.php',{postBody:'switch=3',update:$(divName[idx]),onComplete:stretchHide(idx)});

}

}

ajaxNew0();

}

</script>

</head>

<body>

<div id="stretch0">
    inside Stretch 0
</div>

<!--                                    divName Index          -->
<!--                                    |                      -->
<a href="javascript:;" onclick="whichDiv(0);">Show / Hide Div 0</a>
<br>

<div id="notStretchable">

<p>
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi,
id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id
quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut
et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a
sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat."
</p>

</div>
<br>

<div id="stretch1">
    inside Stretch 1
</div>

<a href="javascript:;" onclick="whichDiv(1);">Show / Hide Div 1</a>

</body>
</html>

[/code]


    [b]explode0.php[/b]

[code]

<?php

// Example 1
echo "<br />\n";
echo "Usage of PHP explode() buuilt-in Function:\n";
echo "<br />\n";
echo "<br />\n";

echo "<pre>\n";
echo "Example 1";
echo "<br >\n";
echo " if \$pizza ='piece1 piece2 piece3 piece4 piece5 piece6';\n";
echo "<br />\n";
echo "    then: \n";
echo "<br />\n";
echo "            \$pieces = explode(\" \", \$pizza)";
echo "<br />\n";
echo "   produces: \n";
echo "</pre>\n";
echo "<ul><ul><ul><ul><ul><ul>\n";
$pizza  = "piece1 piece2 piece3 piece4 piece5 piece6";
$pieces = explode(" ", $pizza);
echo "\$pices[0] = $pieces[0] <br />\n"; // piece1
echo "\$pices[1] = $pieces[1] <br />\n"; // piece2
echo "\$pices[2] = $pieces[2] <br />\n"; // piece3
echo "\$pices[3] = $pieces[3] <br />\n"; // piece4
echo "\$pices[4] = $pieces[4] <br />\n"; // piece5
echo "\$pices[5] = $pieces[5] <br />\n"; // piece6
echo "</pre>\n";
echo "</ul></ul></ul></ul></ul></ul>\n";



?>

[/code]

    [b]explode1.php[/b]

[code]

<?php

echo "<pre>\n";
echo "Example 2";
echo "<br >\n";
echo " if \$data = 'foo:*:1023:1000::/home/foo:/bin/sh';\n";
echo "<br />\n";
echo "    then: \n";
echo "<br />\n";
echo "            list(\$user, \$pass, \$uid, \$gid, \$gecos, \$home, \$shell) = explode(\":\", \$data);";
echo "<br />\n";
echo "   produces: \n";
echo "<ul><ul><ul><ul><ul><ul>\n";

// Example 2
$data = "foo:*:1023:1000::/home/foo:/bin/sh";
list($user, $pass, $uid, $gid, $gecos, $home, $shell) = explode(":", $data);
echo "\$user =  $user\n"; // foo
echo "\$pass =  $pass<br />\n" ;// *
echo "<br />\n";
echo "</ul></ul></ul></ul></ul></ul>\n";


?>

[/code]

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.