...

View Full Version : How is this done?



jake03
11-20-2008, 10:51 AM
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.

FWDrew
11-20-2008, 12:00 PM
Hi there,

He used a Javascript framework called mootools

http://mootools.net/

I believe this is the code for the "accordion" like effects:

<!--
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 (http://jquery.com)

Add this to your head section in your html file:


<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:

<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:

<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 :)

Doctor_Varney
11-20-2008, 12:01 PM
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.

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

jake03
11-20-2008, 12:22 PM
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.

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

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.

jake03
11-20-2008, 12:34 PM
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?

Doctor_Varney
11-20-2008, 12:43 PM
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.

http://i183.photobucket.com/albums/x103/Doctor_Varney/signature.gif

rangana
11-20-2008, 01:01 PM
Could be of interest:


<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum