pulldown apartir de uma lista

HTML

<a title=”Mi Lista” onclick=”show_list(); return false;” href=”#”>
<img src=”pulldown.gif” width=”200″ height=”20″ alt=”” />

</a>
<div style=”visibility: hidden;” id=”myList” onmouseover=”show_list()” onmouseout=”hide_list()”>
<ul>
<li> <a title=”InfectedFX” href=”http://infectedfx.net/”>InfectedFX</a> </li>
<li> <a title=”KonceptoRadio” href=”http://konceptoradio.com/”>KonceptoRadio</a> </li>
<li> <a title=”Cinexcepcion” href=”http://cinexcepcion.com/”>Cinexcepci&oacute;n</a> </li>

<li> <a title=”Go2torials” href=”http://go2torials.com/”>Go2torials</a> </li>
<li> <a title=”Spiga” href=”http://spiga.com.mx/”>Spiga</a> </li>
</ul>
<p class=”close”>
<a title=”cerrar…” onclick=”hide_list(); return false;” href=”#”>cerrar</a>

</p>
</div>
</div>

JavaScript

<script type=”text/javascript”>
function show_list () { document.getElementById(”myList”).style.visibility = “visible”; }
function hide_list () { document.getElementById(”myList”).style.visibility = “hidden”; }
</script>

CSS

<style type=”text/css” media=”screen”>
body {
margin: 0px;
padding: 0px;
background-color: #FFF;
font: 69% Verdana, Arial, Helvetica, sans-serif;
}

a {outline:none; text-decoration:none;}

/* POSICION */

#pulldown {
margin:10%;
}

#pulldown img{border:none;}

/* LISTA */

#myList {
background-color: #fff;
border: 1px solid #dfdfdf;
display: block;
margin: 1px 0px 0px 0px;
padding: 0;
width: 200px;
}

#myList ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#myList ul li a {
display: block;
width: 190px;
padding:3px;
margin: 2px auto 4px auto;
border-bottom:1px solid #EEE;
}

#myList ul li a:link,
#myList ul li a:visited{
background-color:#FFFFFF;
color: #a80000;
}
#myList ul li a:hover {
background-color: #F7F7F7;
color: #000000;
}

/* BOTON CERRAR */
.close {margin:0px;}

.close a{
text-align:center;
display:block;
font-weight:bold;
padding:3px 0px;
}

.close a:link,
.close a:visited{
background-color:#EEE;
color:#333;
}

.close a:hover{
background-color:#990000;
color:#FFF;
}
</style>

http://kraudio.com.br/home/post/73-pulldown-apartir-de-uma-lista.html

slides com javascript

Um ótimo recurso, segue abaixo

HTML

<!– CONTENEDOR –>
<div id=”slides_content”>
<!– LISTADO DE ITEMS –>
<ul class=”buttons”>
<li><a id=”current” href=”javascript:void(0)” onclick=”change(0,this);”>Slide 01</a></li><li><a href=”javascript:void(0)” onclick=”change(520,this);”>Slide 02</a></li>
<li><a href=”javascript:void(0)” onclick=”change(1040,this);”>Slide 03</a></li>
<li><a href=”javascript:void(0)” onclick=”change(1560,this);”>Slide 04</a></li>
</ul>

<!– ELEMENTOS –>
<div id=”elementos” style=”width:2100px; margin:0 0 0 0;”>
<!– SLIDE 01 –>

<div class=”slide 1″>
<h2>Title Content Slide 01</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque consequat tincidunt libero. Aenean euismod. Aenean tempus. Praesent purus dui, aliquam congue, aliquam eget, mattis vitae, libero. Integer sagittis magna quis mi. Donec iaculis odio vel purus. Morbi erat. Nam et libero. Proin eleifend elit quis enim. Vivamus sagittis nibh nec tellus. Donec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
<p>Cras scelerisque mi auctor orci. Nullam laoreet. Sed gravida. Donec tellus arcu, hendrerit eu, fermentum consequat, accumsan at, dui. Sed a ipsum. Praesent sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu massa vitae nibh dictum mollis. Aliquam viverra. Suspendisse id enim. Mauris lobortis ante nec tellus. Aliquam interdum nisi vel nisl. Integer congue augue. Sed justo. Donec dui mi, imperdiet non, molestie sit amet, tristique ut, dui. Donec interdum elit ac nisl. Sed vitae lacus sed pede molestie placerat. Aenean faucibus consectetuer pede. </p>
</div>
<!– SLIDE 02 –>
<div class=”slide 2″>

<h2>Title Content Slide 02</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque consequat tincidunt libero. Aenean euismod. Aenean tempus. Praesent purus dui, aliquam congue, aliquam eget, mattis vitae, libero. Integer sagittis magna quis mi. Donec iaculis odio vel purus. Morbi erat. Nam et libero. Proin eleifend elit quis enim. Vivamus sagittis nibh nec tellus. Donec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
</div>
<!– SLIDE 03 –>
<div class=”slide 3″>
<h2>Title Content Slide 03</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque consequat tincidunt libero. Aenean euismod. Aenean tempus. Praesent purus dui, aliquam congue, aliquam eget, mattis vitae, libero. Integer sagittis magna quis mi. Donec iaculis odio vel purus. Morbi erat. Nam et libero. Proin eleifend elit quis enim. Vivamus sagittis nibh nec tellus. Donec lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>

<p>Cras scelerisque mi auctor orci. Nullam laoreet. Sed gravida. Donec tellus arcu, hendrerit eu, fermentum consequat, accumsan at, dui. Sed a ipsum. Praesent sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu massa vitae nibh dictum mollis. Aliquam viverra. Suspendisse id enim. Mauris lobortis ante nec tellus. Aliquam interdum nisi vel nisl. Integer congue augue. Sed justo. Donec dui mi, imperdiet non, molestie sit amet, tristique ut, dui. Donec interdum elit ac nisl. Sed vitae lacus sed pede molestie placerat. Aenean faucibus consectetuer pede. </p>
</div>
<!– SLIDE 05 –>
<div class=”slide 4″>
<h2>Title Content Slide 04</h2>
<p>Cras scelerisque mi auctor orci. Nullam laoreet. Sed gravida. Donec tellus arcu, hendrerit eu, fermentum consequat, accumsan at, dui. Sed a ipsum. Praesent sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed eu massa vitae nibh dictum mollis. Aliquam viverra. Suspendisse id enim. Mauris lobortis ante nec tellus. Aliquam interdum nisi vel nisl. Integer congue augue. Sed justo. Donec dui mi, imperdiet non, molestie sit amet, tristique ut, dui. Donec interdum elit ac nisl. Sed vitae lacus sed pede molestie placerat. Aenean faucibus consectetuer pede. </p>
</div>

</div>
<!– TERMINA ELEMENTOS –>
</div>
<!– TERMINA EL CONTENDOR –>

JavaScript

/*//////////////////////////////////////////////////////////
/////////////Codigo original: Azer Koçulu//////////////////
/////////////Modificado: Infected-FX//////////////////////
/////////////////www.infectedfx.net//////////////////////
///////////////////////////////////////////////////////*/

function change(x,item)
{
document.getElementById(”current”).id = “”;
item.id = “current”;
if((x * (-1))<(getElementPosition(”elementos”).left – 10)){
distance = (x + getElementPosition(”elementos”).left) / 5;
start = getElementPosition(”elementos”).left;
for(i=0; i<=distance; i++){
setTimeout(”document.getElementById(”elementos”).style.margin = ”0 -” + ((start * (-1)) + (i*5)) + “px””, i*5);
if(i==distance){
setTimeout(”document.getElementById(”elementos”).style.margin = ”0 -” + x + “px””, i*5);
}
}
}else if((x * (-1))>(getElementPosition(”elementos”).left)){
distance = ((x + getElementPosition(”elementos”).left) / 5) * (-1);
start = getElementPosition(”elementos”).left;
for(i=0; i<=distance; i++){
setTimeout(”document.getElementById(”elementos”).style.margin = ”0 -” + ((start * (-1)) – (i*5)) + “px””, i*5);
if(i==distance)
setTimeout(”document.getElementById(”elementos”).style.margin = ”0 -” + x + “px””, i*5);
}
}
}

function getElementPosition(object){
var position = new Object;
position.left = parseInt(document.getElementById(object).style.marginLeft)
position.top = parseInt(document.getElementById(object).style.marginTop)
return position;
}

CSS

/*///////////////////
///// SLIDES JS /////
///////////////////*/

/* GENERALES*/

body {
font:12px Arial, Helvetica, sans-serif;
color:#818181;
}

a {
outline:none;
text-decoration:none;
}

a:link,
a:visited {color:#006699;}
a:hover {color:#00CCFF;}

.center {text-align:center;}

/* CONTENIDO GLOBAL*/
#slides_content {
width:520px; /* ANCHO DEL CONTENEDOR*/
overflow:hidden;
margin:auto;
}

/* HEADERS */
#slides_content h2 {
font:24px Arial;
letter-spacing:-1px;
font-weight:bold;
margin:5px;
color:#FF6600;
}

/* SLIDE */
#slides_content .slide {
float:left;
width:500px; /* ANCHO DE CADA SLIDE */
height:300px; /* ALTURA DE CADA SLIDE */
padding:10px;
border-top:5px solid #7596B7;
}

/* LISTA DE ITEMS */
.buttons{
text-align:center;
width:500px; /* ANCHO DEL MENU */
clear:both;
display:block;
list-style:none;
white-space: nowrap;
padding:0px;
margin:0px 0px 0px 0px;
}

.buttons li{
display: inline;
list-style-type: none;
}

.buttons li a{
text-align:center;
margin:0px 3px 0px 0px;
padding:8px 14px;
line-height:31px;
}

.buttons li a:link,
.buttons li a:visited{
background-color:#B5CADF; color:#000;
}

.buttons li a:hover{
color:#FFFF00;
background-color:#7596B7;
}

.buttons li a#current{
background-color:#7596B7;
color:#FFF;
}

Exemplo

Fonte: http://www.infectedfx.net/

http://kraudio.com.br/home/post/74-slides-com-javascript.html

8 dicas para estudar com qualidade

Bom, acreditos que a maioria tem a mesma dificuldade que eu, estudar sozinho. Ontem navegando atrás de sei lá do que, achei um artigo escrito pelo Daniel que é muito interessante, segue um trecho:

• Defina seu objetivo: este é um dos passos mais importantes. É necessário definir qual é o seu objetivo, ou seja, aonde você quer chegar. Estudar para um concurso público, para uma certificação, para a faculdade, etc. Em um mundo onde as informações aparecem cada vez mais depressa é normal em alguns momentos querermos fazer tudo ao mesmo tempo. Porém esta não é uma boa idéia. No momento que não definimos objetivos, ou seja, não definimos aonde queremos chegar, corremos o risco de não chegar a lugar nenhum. Em outras palavras: Cuidado com o excesso de informação!
• Trace um plano: é necessário definir um plano de estudos para que tudo não corra por água abaixo. De nada adianta ter um objetivo se você não tem a organização para atingi-lo. Determine o total de horas de estudo que serão necessárias e determine quantas horas por dia serão destinadas ao estudo. Aqui cabe uma recomendação importante: seja determinado, não deixe de estudar nenhum dia. Apenas adie os estudos se tiver um compromisso inadiável. Caso não estude durante um dia, tente compensar o período perdido em outro dia assim que possível, para que seu plano não fique prejudicado.
• Prepare o terreno: defina o local que será utilizado. Procure usar um local que seja tranqüilo, de preferência sem o trânsito de pessoas. Pode ser usado o quarto, sala, cozinha ou qualquer outro local que você se sinta bem. Quem mora só leva certa vantagem. Quem mora com outras pessoas (pai, mãe, esposo ou esposa) deve buscar um local reservado e explicar que estará estudando durante determinado período para não ser interrompido. Nada de escutar música ou deixar a televisão ligada. Outros barulhos no ambiente podem somente atrapalhar nos estudos.
• Separe o material: para evitar pausas desnecessárias deixe todo o material necessário separado e próximo a você antes de começar. Livros, apostilas, anotações, dicionários e cadernos e qualquer outro material que seja uma importante fonte de consulta. Caso seu material esteja digitalizado (armazenado no computador) procure organizar tudo através de pastas separadas por assuntos.
• Cuidado com os ladrões de tempo: os grandes vilões dos estudos com certeza são os ladrões de tempo. Os ladrões mais conhecidos são a Internet, televisão, rádio e jogos. São vilões porque costumam tomar muito tempo de quem está estudando. Procure ter bom senso. Se estiver pesquisando sobre algum assunto na Internet, não ceda a tentação de dar uma olhada na sua caixa de entrada ou no seu site de notícias favorito. Aqui temos que ter muita determinação. Deixe para relaxar após os estudos.
• Faça pausas: tocar direto os estudos não é uma boa. Estudar por duas horas seguidas ou mais pode trazer sérios problemas. Procure fazer pausas de pelo menos cinco minutos a cada hora pelo menos. Estas pausas são muito importantes. Com elas damos uma respirada e um descanso para nosso tão requisitado cérebro. Saia da frente do computador, tome uma água, converse com alguém, mas sem se distrair muito ou fazer uma pausa muito longa.
• Faça grupos de estudo: se tiver amigos que estejam estudando para o mesmo objetivo procure fazer grupos de estudo. Vocês podem se reunir uma vez por semana, por exemplo, para troca de idéias e tira-dúvidas. Caso fique complicado reunir a turma toda crie um grupo de estudos por e-mail mesmo. Usem o grupo para troca de informações e material de estudos. Recomendo a utilização do bom e velho Google para criação de um grupo.
• Celebre suas conquistas: sempre que conseguir atingir um determinado objetivo, como passar em uma prova na faculdade ou conseguir uma certificação, trate de celebrar! Conte a novidade para seus amigos próximos, colegas de trabalho, parentes e seu marido ou esposa. Tenho certeza que se a pessoa gosta realmente de você ficará muito feliz e irá lhe dar os parabéns. Isto é muito bom, pois o reconhecimento é sempre bem vindo além de ser uma tremenda massagem no “ego”. E, além disso, esta troca irá lhe dar muito mais gás e motivação para correr atrás de outros objetivos.

Artigo completo

http://kraudio.com.br/home/post/25-8-dicas-para-estudar-com-qualidade.html