SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slide up and down effect with one link?

    Hi, I just started using the scriptaculous library and I was wondering how would it be possible to make a link or image that when you click it shows the slide down effect revealing the content as well as changing the name of the link or changing an image to show the new state. If you click on the same image or link again it should slide up also changing the image name or link to show the new state.

    At the moment I can only get the link to perform one function, sliding down. Thanks

    Code:
    <a href="#" onclick="Effect.SlideDown('content2', {duration:.5}, {scaleContent:false}); 
    return false;">SlideDown Now!</a>
    
    <div id="content2" style="display: none">
    <div>CONTENT 2</div>
    My First Website YouCritiqueIT.com
    - A unique approach to rating products

  2. #2
    SitePoint Addict iwonder's Avatar
    Join Date
    Feb 2005
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    GFXedit DesignsFree/Custom CSS Designs & Wordpress themes
    Web 2.0 & Me | Personal Blog | IndianWebDevs | AutoPundit |

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,113
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    I'm not sure if Kevin is happy with me offering snippets of his code here, I think it should be fine.
    This is a script from Sitepoint's new book 'Simply Javascript', save this file as core.js and link to it in your page.
    Code javascript:
    var Core = {};
    // W3C DOM 2 Events model
    if (document.addEventListener) {
    	Core.addEventListener = function(target, type, listener) {
    		target.addEventListener(type, listener, false);
    	};
    	Core.removeEventListener = function(target, type, listener) {
    	 target.removeEventListener(type, listener, false);
    	};
    	Core.preventDefault = function(event) {
    	 event.preventDefault();
    	};
    	Core.stopPropagation = function(event) {
    	event.stopPropagation();
    	};
    }
    // Internet Explorer Events model
    else if (document.attachEvent) {
     
    	Core.addEventListener = function(target, type, listener) {
    		if (Core._findListener(target, type, listener) != -1)
    			return;
    		var listener2 = function() 	{
    			var event = window.event;
    			if (Function.prototype.call) {
    				listener.call(target, event);
    			}
    			else {
    				target._currentListener = listener;
    				target._currentListener(event)
    				target._currentListener = null;
    			}
    		};
    		target.attachEvent("on" + type, listener2);
    		var listenerRecord = {
    			target: target,
    			type: type,
    			listener: listener,
    			listener2: listener2
    		};
    		var targetDocument = target.document || target;
    		var targetWindow = targetDocument.parentWindow;
    		var listenerId = "l" + Core._listenerCounter++;
    		if (!targetWindow._allListeners)
    			targetWindow._allListeners = {};
    		targetWindow._allListeners[listenerId] = listenerRecord;
    		if (!target._listeners)
    			target._listeners = [];
    		target._listeners[target._listeners.length] = listenerId;
    		if (!targetWindow._unloadListenerAdded)	{
    			targetWindow._unloadListenerAdded = true;
    			targetWindow.attachEvent("onunload", Core._removeAllListeners);
    		}
    	};
    	Core.removeEventListener = function(target, type, listener)	{
    		var listenerIndex = Core._findListener(target, type, listener);
    		if (listenerIndex == -1)
    			return;
    		var targetDocument = target.document || target;
    		var targetWindow = targetDocument.parentWindow;
    		var listenerId = target._listeners[listenerIndex];
    		var listenerRecord = targetWindow._allListeners[listenerId];
    		target.detachEvent("on" + type, listenerRecord.listener2);
    		target._listeners.splice(listenerIndex, 1);
    		delete targetWindow._allListeners[listenerId];
    	};
    	Core.preventDefault = function(event)	{
    		event.returnValue = false;
    	};
    	Core.stopPropagation = function(event) {
    		event.cancelBubble = true;
    	};
    	Core._findListener = function(target, type, listener)	{
    		var listeners = target._listeners;
    		if (!listeners)
    			return -1;
    		var targetDocument = target.document || target;
    		var targetWindow = targetDocument.parentWindow;
    		for (var i = listeners.length - 1; i >= 0; i--) {
    			var listenerId = listeners[i];
    			var listenerRecord =
    			targetWindow._allListeners[listenerId];
    			if (listenerRecord.type == type && listenerRecord.listener == listener) {
    				return i;
    			}
    		}
    		return -1;
    	};
    	Core._removeAllListeners = function()	{
    		var targetWindow = this;
    		for (id in targetWindow._allListeners) {
    			var listenerRecord = targetWindow._allListeners[id];
    			listenerRecord.target.detachEvent("on" + listenerRecord.type, listenerRecord.listener2);
    			delete targetWindow._allListeners[id];
    		}
    	};
    	Core._listenerCounter = 0;
    }
    These functions allow you to add Event Listeners which are much better than using inline event handlers.
    Code:
    <!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>Untitled Document</title>
    <script type="text/javascript" src="path-to-js/core.js"></script>
    <script type="text/javascript">
    function init() {
    	// Get link element
    	var linky = document.getElementById("slide");
    	// Add click event listener to linky - The element with id="slide"
    	Core.addEventListener(linky, 'click', clickHandler); 
    }
    
    function clickHandler(event) {
    	Effect.SlideDown('content2', {duration:.5}, {scaleContent:false});
    	// You can put other javascript here to change the text..
    
            // Prevent link from redirecting the page.
           Core.preventDefault(event);
    }
    
    // When page is loaded - run init() function
    Core.addEventListener(window, 'load', init);
    </script>
    </head>
    <body>
    <a href="#" id="slide">SlideDown Now!</a>
    </body>
    </html>
    Hopefully the comments in the code will explain what's going on.
    It makes for a much cleaner separation of the 3 layers, content / presentation and behaviour. - HTML / CSS and Javascript.

    Hope it helps,

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for the code and links
    My First Website YouCritiqueIT.com
    - A unique approach to rating products


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •