HTML5 + CSS3 question!

[Joey-]

http://i45.tinypic.com/pyezt.png

So basically, the image above is just a rough layout of a site I am attempting to create.
I want to know if it is possible to produce a cascading affect(effect?), where, when the black boxes, or icons as they would be, are clicked it causes the video and its info to collapse into one line showing only the name of the song and the artist, and vice-versa, where instead of collapsing it would expand, showing the video and its complimentary info right next to it.

If this is possible, could you please share how to do this with me? +REP for answers!

Thaaankkk yooooouuu in advance.

1/4th​.

Edited by efq (Forum Moderator): Threads merged because you had two threads that are about the same topic.

[Recursion]

You'd have to use Javascript for this, sorry I can't be of more help, I'm terrible when it comes to JS :P

[Mentor]

By the sounds of it your just after a show-hide (or possibly accordion if you want to limit it to one panel open at a time).

If you have jquery and lay the showhides out somthing like this:


<div class='showhide'><div class='title'>Some information</div><div class='content' style='display:none;'> More stuff, video etc<div> </div>

You could just use somthing like


$('.showhide .title').click(function(e){ var t = $(this).parent().find('.content'); if(t.css('display')=='none'){t.css('display','bloc k')}else{t.css('display','none');} }

(please note i just free wrote the above so there are probably a few typos etc)

[Joey-]

By the sounds of it your just after a show-hide (or possibly accordion if you want to limit it to one panel open at a time).

If you have jquery and lay the showhides out somthing like this:


<div class='showhide'><div class='title'>Some information</div><div class='content' style='display:none;'> More stuff, video etc<div> </div>

You could just use somthing like


$('.showhide .title').click(function(e){ var t = $(this).parent().find('.content'); if(t.css('display')=='none'){t.css('display','bloc k')}else{t.css('display','none');} }

(please note i just free wrote the above so there are probably a few typos etc)

This accordion affect that you speak of is actually exactly what I am looking for. Would this script above work for this affect?

Also, since I have no experience in JS myself, I would simply place the code in a separate file titled blahblahblah.js and the html you gave above would then link it to the page?

Thanks for the help! +REP'd!

EDIT: Also, what text editing programs for Windows would you recommend? I'm not too fond of Notepad++.

[Mentor]

Hello,

If you want to go with the accordion, I suspect your best bet is just to use jQuery UI to do the heavy lifting for you. It includes some demos as wel as examples on how to use it. (Essentally you just reference the jQuery & jQuery UI files in your page and call the methods it suggests)

http://docs.jquery.com/UI/Accordion

In terms of text editor, if you don't mind the nag screen Sublime Text 2 is pretty awesome http://www.sublimetext.com/ : The actual cost is a little pricey, although it is a lifetime / all equipment licence & you do get unlimited use for free with the trial :)

[Joey-]

Hello,

If you want to go with the accordion, I suspect your best bet is just to use jQuery UI to do the heavy lifting for you. It includes some demos as wel as examples on how to use it. (Essentally you just reference the jQuery & jQuery UI files in your page and call the methods it suggests)

http://docs.jquery.com/UI/Accordion

In terms of text editor, if you don't mind the nag screen Sublime Text 2 is pretty awesome http://www.sublimetext.com/ : The actual cost is a little pricey, although it is a lifetime / all equipment licence & you do get unlimited use for free with the trial :)

Thank you so much! Works perfectly other than the fact that the clickable bar it creates is the width of the page. Would that be fixed after the CSS is applied to the div?

[Joey-]

Merge posts please.

Another question @Mentor,
any tips on the customization of the accordion script's layout? Such as background color/transparency?
Thanks again!

[Joey-]

I'm also having trouble aligning divs side-by-side. Looks impossible to me right now. I used to know how to do it until I got a job. D:
Halp!

[Joey-]

I'm also having trouble aligning divs side-by-side. Looks impossible to me right now. I used to know how to do it until I got a job. D:
Take a look at this "demo", if you would: jewvey.webs.com
I'm trying to position the div/table that's below the video, to the right of the video. And the same with the ul at the top, I'd like to position it to the right of the placeholder logo as well.
Halp!

[Joey-]

DEMO (http://www.jewvey.webs.com/)

On the demo site above, I have created a ul and I am trying to create a hover effect over each of the links individually. Unfortunately, the technique I was taught is not working, which is the

#nav li a: link {
}
#nav li a: visited {
}
#nav li a: hover {
}
#nav li a: active {
}
technique.
Could someone please take a look at my code and tell me what it is I am doing wrong?
+REP for help.

P.S.: Sorry for the noob coding questions. I didn't learn much code before I stopped completely. It's hard to just pick back up when I barely learned anything in the first place. :p

1/4th

[Joey-]

NEVERMIND! Resolved. :)
Instead of selecting each a for the buttons, simply selecting their id and applying the styles to it, fixes the issue! :D
For example:


#nav_home, #nav_home:link, #nav_home:visited {
display: block-inline;
float: left;
background: url(imgs/home_button.png);
width: 81px;
height: 28px; }

#nav_home:hover, #nav_home:active {
display: block;
float: left;
background: url(imgs/home_hover.png);
width: 81px;
height: 21px; }