Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How is this done?

    I'm pretty new to web design so i was having troubling isolating the code he used for this.

    http://78d.se/

    What I am reffering to is when you click on the image boxes they expand and show more of an area ...

    Anyone know what this is called?

    Thanks.

  • #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Hi there,

    He used a Javascript framework called mootools

    http://mootools.net/

    I believe this is the code for the "accordion" like effects:
    Code:
    <!--
    		function AccordionInit() {
    			var accTitle = $$('.toggle');
    			var accContent = $$('.toggler');
    			var pwAccordion = new Accordion(
    				accTitle, accContent, {
    					onActive: function(tog){
    						tog.addClass('selected');
    						var accTitleOnOff = new Fx.Styles(tog, {wait: false, duration: 400});
    						accTitleOnOff.start({});},
    					onBackground: function(tog){
    						tog.removeClass('selected');
    						var accTitleOnOff = new Fx.Styles(tog, {wait: false, duration: 400});
    						accTitleOnOff.start({});},
    					alwaysHide: true,
    					start: 'all-closed',
    					duration: 700
    				});}
    		function externalLinks() {
    			if (!document.getElementsByTagName) return;
    				var anchors = document.getElementsByTagName("a");
    				for (var i=0; i<anchors.length; i++) {
    					var anchor = anchors[i];
    					if (anchor.getAttribute("href") &&
    						anchor.getAttribute("rel") == "external")
    						anchor.target = "_blank";
    				}
    			}	
    		window.addEvent('domready', function(){
    			AccordionInit();
    			externalLinks();
    			
    			$$('a img').each(function(img, i) {
    					var a = img.getParent();
    					new ReMooz(img, {
    						url: a.href,
    						positionToCenter: true
    					}).bindToElement();
    			});
    		});
    	//-->
    Regards,

    Drew

    EDIT-I had some time since the accordion effect is way simple with jQuery

    Add this to your head section in your html file:
    Code:
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.accordion.js"></script>
    And for the HTML markup, here is an example:
    Code:
    	<ul id="acorn">
    		<li>
    		<a href="#">Heading 1</a>
    		<p>Van Wilder is not a funny movie, <a href="http://google.com">Tara Reed</a> ruins it!</p></li>
    		<li><a href="#">Heading 2</a>
    		<p>But sometimes I still watch <a href="http://google.com">Tara Reed</a> even though she is dumb.</p></li>
    		<li><a href="#">Heading 2</a>
    		<p>Ah hell, im watching <a href="http://google.com">Van Wilder</a> right now.</p></li>
    		</ul>
    Lastly, fire off the script:
    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	$("ul#acorn").accordion();
    });
    </script>
    Which will give you an accordion effect seen on this quick dummy page I setup: http://drewsscripts.net78.net/jquery/accordion.html

    You can do a lot of cool stuff with the accordion UI and jQuery, check out http://jquery.com and http://docs.jquery.com/UI/Accordion

    Have fun
    Last edited by FWDrew; 11-20-2008 at 12:20 PM. Reason: Added code
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • Users who have thanked FWDrew for this post:

    jake03 (11-20-2008)

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    This sort of behaviour is usually governed by Flash animation or Javascript.

    If new enough to web design, to not know how to recognise these things, then I might suggest perhaps you should be looking at a basic grounding in static page design, before trying to get too advanced with animated presentation.

    Last edited by Doctor_Varney; 11-20-2008 at 12:04 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #4
    New Coder
    Join Date
    Aug 2008
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Doctor_Varney View Post
    This sort of behaviour is usually governed by Flash animation or Javascript.

    If new enough to web design, to not know how to recognise these things, then I might suggest perhaps you should be looking at a basic grounding in static page design, before trying to get too advanced with animated presentation.

    I appreciate your criticism, but I don't believe it's neccesary. I'm doing a web design course and like to step out of the constraints of the course. So in effect, yes, I am learning / learned the things you stated.

    Drew, appreciate your assistance. Thanks.

  • #5
    New Coder
    Join Date
    Aug 2008
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I like the one that you refferenced Drew, however I'm looking for one slightly different.

    I need one with all the content areas collapsed, I can't seen to find an example there that is ...

    Anything else you are aware of?

  • #6
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Quote Originally Posted by jake03 View Post
    I appreciate your criticism, but I don't believe it's neccesary. I'm doing a web design course and like to step out of the constraints of the course. So in effect, yes, I am learning / learned the things you stated.
    It's not critisism, but a suggestion, aimed at someone who claims to be new to coding. I think it's a good thing to be curious as to how something, which is new to you, works. I have come across people who see a script or feature and want to "download, with the hopes of using it" but who do not have the necessary skills to control or modify. Evidently, this would not apply to you. Apologies for any offence caused.

    Last edited by Doctor_Varney; 11-20-2008 at 12:56 PM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #7
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Could be of interest:
    Code:
    <script type="text/javascript" src="http://code.jquery.com/nightlies/jquery-nightly.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    	{
    	$('#wrap a').click(function()
    		{
    		$(this).next().animate({height:'toggle',opacity:'toggle'},'slow');
    		});
    	});
    </script>
    <style type="text/css">
    #wrap img{
    width:350px;
    height:300px;
    clear:both;
    margin:5px;
    }
    #wrap{
    text-align:center;
    padding:10px;
    }
    #wrap div{
    width:400px; 
    border:1px solid #222;
    position:relative;
    float:left;
    margin:5px;
    }
    #wrap p{text-align:left;
    background:#eee;
    margin:0px;
    padding:5px;
    }
    #wrap a{
    display:block;
    width:100px;
    height:50px;
    background:#eee;
    line-height:50px;
    font-weight:bold;
    color:#222;
    position:absolute;
    left:24px;
    top:5px;
    z-index:1;
    }
    </style>
    <div id="wrap">
    	<div>
    	<img src="http://rangana.moonylist.com/images/Picture7.jpg" alt="myimage">
    	<a href="#">Click Me</a>
    	<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 	
    	</p>
    	</div>
    	
    	<div>
    	<img src="http://rangana.moonylist.com/images/Picture8.jpg" alt="myimage">
    	<a href="#">Click Me</a>
    	<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
    Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
    nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. 
    Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, 	
    	</p>
    	</div>
    
    </div>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph


  •  

    Tags for this Thread

    Posting Permissions

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