Ir para conteúdo
Fórum Script Brasil

Lucas Ramos

Membros
  • Total de itens

    8
  • Registro em

  • Última visita

Sobre Lucas Ramos

Lucas Ramos's Achievements

0

Reputação

  1. Essa parte do CSS não deu certo...Por favor,tem como deixar pronto? E eu acho que a parte do JS vai contar também...
  2. Apareceu isso : http://i49.tinypic.com/2q8sw9k.png Porém já tinha feito algo parecido... Na TAB abaixo mostrou o conteúdo,ok,mas os botões dela continua com o mesmo problema,mostrando o conteúdo na primeira. Fora que não mostrou o background do content esse maior. Eu fiz assim: <ul id="tabs"> <li><a href="#" name="tab1">One</a></li> <li><a href="#" name="tab2">Two</a></li> </ul> <div id="content"> <div id="tab1">...</div> <div id="tab2">...</div> </div> <ul id="tabs"> <li><a href="#" name="tab1">One</a></li> <li><a href="#" name="tab2">Two</a></li> </ul> <div id="content2"> <div id="tab3">...</div> <div id="tab4">...</div> </div> É desse jeito mesmo?
  3. Pronto,aqui está a foto: Se você reparar,essas duas TABs estão na área de postagem,OK. Agora repare que elas tem 2 botões (one e two). No botão 1 da primeira TAB,tem um determinado conteúdo e no segundo botão dela (two) ,tem outro conteúdo oculto,que só aparece quando o botão two é clicado.(funciona normalmente) Agora tem outra TAB abaixo,e note que ela está vazia,sem conteúdo,tanto no botão one como no two. Caso eu clicar no botão two dessa TAB abaixo,ao invés de mostrar o conteúdo nela,mostra o conteúdo do botão two da TAB acima. E caso eu clicar depois no botão one,ao invés de aparecer o conteúdo nela,aparece o conteúdo do botão one da TAB acima. OU SEJA,O botão da TAB abaixo,serve basicamente pra mostrar os conteúdos da TAB acima,pra você entender melhor tanto faz eu clicar no botão da TAB acima,quanto nos botões da TAB abaixo,pois o conteúdo só vai aparecer na TAB acima. É só esse o problema. O que eu queria,era que Cada TAB mostrasse seu conteúdo separadamente.
  4. Bom,realmente o problema é com o ID mesmo... Aqui estão os códigos originais: CSS #tabs{ overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; } #tabs li{ float: left; margin: 0 .5em 0 0; } #tabs a{ position: relative; background: #ddd; background-image: linear-gradient(to bottom, #fff, #ddd); padding: .7em 3.5em; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255,255,255,.8); border-radius: 5px 0 0 0; box-shadow: 0 2px 2px rgba(0,0,0,.4); } #tabs a:hover, #tabs a:hover::after, #tabs a:focus, #tabs a:focus::after{ background: #fff; } #tabs a:focus{ outline: 0; } #tabs a::after{ content:''; position:absolute; z-index: 1; top: 0; right: -.5em; bottom: 0; width: 1em; background: #ddd; background-image: linear-gradient(to bottom, #fff, #ddd); box-shadow: 2px 2px 2px rgba(0,0,0,.4); transform: skew(10deg); border-radius: 0 5px 0 0; } #tabs #current a, #tabs #current a::after{ background: #fff; z-index: 3; } #content { background: #fff; padding: 2em; height: 220px; position: relative; z-index: 2; border-radius: 0 5px 5px 5px; box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5); } Jquery <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script> $(document).ready(function() { $("#content div").hide(); // Initially hide all content $("#tabs li:first").attr("id","current"); // Activate first tab $("#content div:first").fadeIn(); // Show first tab content $('#tabs a').click(function(e) { e.preventDefault(); if ($(this).closest("li").attr("id") == "current"){ //detection for current tab return } else{ $("#content div").hide(); //Hide all content $("#tabs li").attr("id",""); //Reset id's $(this).parent().attr("id","current"); // Activate this $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab } }); }); </script> Bom,agora pra transformar isso em class? Creio que seja esse o problema... Aqui é o site onde peguei os códigos: http://www.red-team-design.com/css3-jquery-folder-tabs
  5. É que tipo essas duas Tabs se ''unem'' daí,só aparece o conteúdo da primeira,e na segunda não aparece conteúdo apenas os botões. E quando clico em algum botão da tab abaixo,por exemplo botão 2, na tab de cima também vai pro botão 2 (caso esteja no 1) e assim por diante. Elas não funcionam de maneira separada.
  6. Eu quero separar totalmente duas tabs (para que ambas trabalhem de forma diferente) em uma postagem (Blogger - HTML) ,mas não consigo,quando vou conferir,é como se elas fossem uma só. Código original: <ul id="tabs"> <li><a href="#" name="tab1">One</a></li> <li><a href="#" name="tab2">Two</a></li> <li><a href="#" name="tab3">Three</a></li> <li><a href="#" name="tab4">Four</a></li> </ul> <div id="content"> <div id="tab1">...</div> <div id="tab2">...</div> <div id="tab3">...</div> <div id="tab4">...</div> </div> Daí,na parte de criar postagem HTML,eu apenas acrescento o mesmo código,só mudo o texto. Ficando assim: <ul id="tabs"> <li><a href="#" name="tab1">One</a></li> <li><a href="#" name="tab2">Two</a></li> <li><a href="#" name="tab3">Three</a></li> <li><a href="#" name="tab4">Four</a></li> </ul> <div id="content"> <div id="tab1">...</div> <div id="tab2">...</div> <div id="tab3">...</div> <div id="tab4">...</div> </div> <ul id="tabs"> <li><a href="#" name="tab1">One</a></li> <li><a href="#" name="tab2">Two</a></li> <li><a href="#" name="tab3">Three</a></li> <li><a href="#" name="tab4">Four</a></li> </ul> <div id="content"> <div id="tab1">...</div> <div id="tab2">...</div> <div id="tab3">...</div> <div id="tab4">...</div> </div>
  7. No blog onde quero instalar ele, não funciona,porém,em outro blog sim (perfeitamente).Não sei se é algum conflito.Tentei de todas as formas acabar,mas não deu certo. O código Original é esse: #toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:51px; height:51px; border:none; text-indent:-999px; background:url(http://3.bp.blogspot.com/-ZaFk139_d7Q/ThWy56hQTtI/AAAAAAAAEtc/i7lYDE7NQRY/s1600/ui.totop.png) no-repeat left top; } #toTopHover { background:url(http://3.bp.blogspot.com/-ZaFk139_d7Q/ThWy56hQTtI/AAAAAAAAEtc/i7lYDE7NQRY/s1600/ui.totop.png) no-repeat left -51px; width:51px; height:51px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } #toTop:active, #toTop:focus { outline:none; } ]]></b:skin> <script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/> <script src='http://suyb.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/> <script src='http://suyb.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { /* var defaults = { containerID: 'moccaUItoTop', // fading element id containerHoverClass: 'moccaUIhover', // fading element hover class scrollSpeed: 1200, easingType: 'linear' }; */ $().UItoTop({ easingType: 'easeOutQuart' }); }); </script> </head>
  8. Não entendo muito de HTML... Quero saber como soprepor uma imagem(png) em um Slide. Exatamente desse jeito: http://img405.imageshack.us/img405/6302/jjjv.png Onde a Imagem da TV forma uma espécie de Borda no slide. -Esse é o Código do Slide <style type='text/css'> #myGallery { width: 100% !important; height: 320px !important; } </style> <script type='text/javascript'> function startGallery() { var myGallery = new gallery($('myGallery'), { timed: true }); } window.addEvent('domready',startGallery); </script> <div id='myGallery'> <div class='imageElement'> <h3>Universo</h3> <p/> <a class='open' href='URL do Post' title=''/> <img alt='Universo' class='full' src='http://img684.imageshack.us/img684/7818/73113mainac750027earth.jpg'/> <img alt='' class='thumbnail' src='http://img684.imageshack.us/img684/7818/73113mainac750027earth.jpg'/> </div> <div class='imageElement'> <h3>Antropologia</h3> <p/> <a class='open' href='URL do Post' title='Read More'/> <img alt='Titulo da Imagem' class='full' src='https://lh4.googleusercontent.com/-Y3MKCJeUcuM/T6L_I-x2sgI/AAAAAAAAAfY/J1Gp_pD1uWk/s640/OgAAACDAE-_vEoHO3HVso1qos0NuFLrelmd09D1W1Kasrd8FzvbRAq1JaxSVilFCsJDBxedzPbriIItLwgDZms3rmvsAm1T1ULzDZZteI8uN1BgmsOUni3IcPboX.jpg '/> <img alt='Titulo da Imagem' class='thumbnail' src='https://lh4.googleusercontent.com/-Y3MKCJeUcuM/T6L_I-x2sgI/AAAAAAAAAfY/J1Gp_pD1uWk/s640/OgAAACDAE-_vEoHO3HVso1qos0NuFLrelmd09D1W1Kasrd8FzvbRAq1JaxSVilFCsJDBxedzPbriIItLwgDZms3rmvsAm1T1ULzDZZteI8uN1BgmsOUni3IcPboX.jpg'/> </div> <div class='imageElement'> <h3>Tecnologia</h3> <p/> <a class='open' href='URL do Post' title='Read More'/> <img alt='Titulo da Imagem' class='full' src='http://img651.imageshack.us/img651/4641/3d02.jpg'/> <img alt='Titulo da Imagem' class='thumbnail' src='http://img651.imageshack.us/img651/4641/3d02.jpg'/> </div> <div class='imageElement'> <h3>Bizarro</h3> <p/> <a class='open' href='URL do Post' title='Read More'/> <img alt='Titulo da Imagem' class='full' src='http://img151.imageshack.us/img151/2131/eyeball1.jpg'/> <img alt='Titulo da Imagem' class='thumbnail' src='http://img442.imageshack.us/img442/5428/uuuyy.jpg'/> </div> <div class='imageElement'> <h3>Curiosidades</h3> <p/> <a class='open' href='URL do Post' title='Read More'/> <img alt='Titulo da Imagem' class='full' src='http://img827.imageshack.us/img827/6703/gaiabymuratsuyurd4379ty.jpg'/> <img alt='Titulo da Imagem' class='thumbnail' src='http://img827.imageshack.us/img827/6703/gaiabymuratsuyurd4379ty.jpg'/> </div> <div class='imageElement'> <h3>E muito mais!</h3> <p/> <a class='open' href='URL do Post' title='Read More'/> <img alt='Titulo da Imagem' class='full' src='http://img826.imageshack.us/img826/2910/neuronsfiring.jpg'/> <img alt='Titulo da Imagem' class='thumbnail' src='http://img826.imageshack.us/img826/2910/neuronsfiring.jpg'/> </div> </div> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/> </b:section> </div> Obrigado!
×
×
  • Criar Novo...