Alice Andrade Design e Histórias » Design e Web

Abas com Scroll costumizado em Javascript

alice — Tue, 31 May 2011 21:26:54 +0000

Para fazer essa aba você precisará de plugins que vc poderá baixar em:
bibliotecas js
linkar no html e utilizar o código javascript abaixo:

  // funcionalidade das abas
  $('.Scrollbar-Container').show();
  $("#tabs a").each(function(){
	var container = $($(this).attr('href'));
	container.find(".Scroller").css({
	  overflow: 'hidden',
	  width: 415
	});
var scroller  = new jsScroller(container.find(".Scroller").get(0), 0, 590)
var scrollbar = new jsScrollbar(container.find(".Scrollbar-Container").get(0), scroller, true);
	$(this).data('scrollbar', scrollbar);
  }).click(function(){
	var container = $($(this).attr('href')),
		scrollbar = $(this).data('scrollbar'),
		y = -(scrollbar._src._y);
 
	$('div.tabs_block').hide();
	$('#tabs a').removeClass('selected');
	$(this).addClass('selected');
	container.show();
	scrollbar.swapContent(container.find('.Container').get(0));
	if (y) scrollbar.scrollTo(0, y);
	return false;
  });
 
  // reset de abas
  $("div.tabs_block").hide();
  $("div.tabs_block:first").show();
  $("#tabs a:first").addClass("selected");

Com o html abaixo:


	
	
        Aba1
	
        Aba2
	
        Aba3
	
	
		
		
			 
			 
			 
			 
			 
			 
			 
			 
				 
				
				
				
				
				
				Lorem Ipsum is simply dummy 
                                 
				
				
				 
				
				 
				 
			 
		
		
		 
		 
		 
		 
		 
		 
			 
			 
				 
				
				
				
				
				
				Lorem Ipsum is simply dummyte
                                	
                                
				
				
				
				 
				 
			 
		
		
			 
			 
			 
			 
			 
			 
		 
			 
				 
				
				
				
				
				
				Lorem Ipsum is simp

E ainda esse css para fazer a âncora das abas

>	
 
/*quando tiver problema em visualizar o scrol no ie7, procure a div com position relative e coloque overflow:hidden....*/
 
Container {
	width:443px;
	height:620px;
	background: #F9F9F9;
 
}
 
.Scroller {
	position: absolute;
 
	overflow: auto;
	width:425px;
 
	height:590px;
	top:15px;
	left :10px;
	background:#f9f9f9;
}
 
.Scroller-Container {
	position: absolute;
	top: 0;
	left: 0;
}
 
.Scrollbar-Container {
	display:none;
	position: absolute;
	top: 0;
	left: 367px;
}
 
.Scrollbar-Up {
	cursor: pointer;
	position: absolute;
	z-index:3;
	left:49px;
	top:15px;
}
 
.Scrollbar-Track {
	width:12px;
	height: 586px;
	position: absolute;
	top: 18px;
	left: 49px;
	background: url("img/palito.png") repeat-y center center;
	z-index:3;
}
 
.Scrollbar-Handle {
	position: absolute;
	left:0;
	width:12px;
	height:30px;
}
 
.Scrollbar-Down {
	cursor: pointer;
	position: absolute;
	top: 595px;
	left:49px;
	z-index:3;
}
 
.tabs_block {
	position:relative;
	overflow: hidden;
	margin:0 0 15px -6px;
	height: 620px;
	width: 443px;
}
 
.Container h3 {
	color:#fff;
	font-size:15px;
	font-family:sans-serif;
	float:left;
	margin:10px 0 0 15px;
}
 
.Container p {
	color:#fff;
	font-size:13px;
	font-family:sans-serif;
	float:left;
	margin:10px 0 0 136px;
}
.Scroller p {
	margin: 0;
	padding: 10px 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
}
.list-comment{
	padding:0;
	margin:0;
}
.list-comment li{
	display:block;
	width:593px;
	list-style:none;
	height:80px;
	margin-left:10px;
}
.list-comment li a{
	width:393px;
	height:80px;
	display:block;
	cursor:pointer;
	text-decoration:none;
	font-family:arial;
	font-weight:bolder;
	font-size:12px;
	float:none;
	padding:0;
	color:#616060;
	border-bottom:1px solid #000;
}
.Scroller .list-comment li a .frase p{
	display:block;
	cursor:pointer;
	text-decoration:none;
	font-family:arial;
	font-weight:bolder;
	font-size:12px;
	float:none;
	padding:0;
	color:#616060;
}
 
.list-comment li a img, .infos_radios{
	display:inline-block;
	zoom: 1; *display: inline; /* Hack for IE6 to emulate display: inline-block; */
	vertical-align:middle;
}
.infos_radios{
	width:360px;
	margin:5px 0 0 7px;
}
img, a{
	border:none;
}
.count-comment{
	display:none;
	background:red;
	width:35px;
	height:22px;
	color:#949699;
	font-size:11px;
	text-decoration:none;
	padding:5px 0 0 24px;
	font-weight:lighter;
	line-height:22px;
}
 
.holder{
	height: 620px;
	width: 437px;
	overflow:hidden;
	clear:left;
	position:relative;
}
.tabs_place .aba1,
.tabs_place .aba2{
	float:left;
	text-align:center;
	width:130px;
	height:30px;
	margin-right:10px;
}
.tabs_place .aba1 em,
.tabs_place .aba2 em ,
.tabs_place .aba3 em{
	display:none;
}
.aba1{
	background:#000;
}
.aba2{
	background:#000;
}
.aba3{
	background:#000;
	width:156px;
	height:30px;
	float:left;
	text-align:center;
	margin-right:10px;
}
/*mudança de estados das abas*/
.aba1.selected{
	background:#cecece;
}
.aba2.selected{
	background:#cecece;
}
.aba3.selected{
	background:#cecece;
	width:156px;
	height:30px;
	float:left;
	text-align:center;
	margin-right:10px;
}
.radios_list{
	height:660px;
}
.holder_bg{
	width:437px;
	overflow:hidden;
	clear:left;
	background:#cecece;
}
.tabs_place{
	float:left;
}
>

E o melhor, essas abas e o scroll custumizado e as abas funcionam e são compatíveis com IE6, IE7, IE8, Chrome, Firefox, Opera.

Pensar é bom, mas não atoa.

alice — Wed, 30 Apr 2008 20:21:48 +0000

Na minha opinião, designer é o cara que veio para unir a beleza e funcionalidade, como nos conta a história.
Então que tal se nós, web designers pensássemos nisso no dia a dia? Talvez seja isso que, de uma maneira não muito agradável, todos os dias os programadores tentam nos sugerir. Viva o bom senso, pensemos na seguinte ordem:
Preciso disso, essa informação é imprecindível para o entendimento do meu site?

Fotos, layout e cores necessárias para que a minha comunicação com o usuário seja completa, armoniosa e rapida. Rápida?

Wait…loading….looooooooading. Ninguem merece! Tinha necessidade dessa ilustração enorme no background?

Gente, o degradê usado nesse fundo só está conseguindo comunicar que o site não é tão interessante assim pra eu ficar um tempão esperando ele carregar, ou ainda que degradê na verdade é uma junção de camadas de cores de transição, divisões que aliás podemos ver claramente. E Então, eu como designer pergunto, PARA QUE?
Não foi para tornar as coisas mais fáceis, unindo beleza e utilidade que nossa profissão foi criada?
Por favor, aquelas bordas arredondadas em excesso muitas vezes o arquivo ficar pesado, contribuindo para que a pessoa que esta querendo simplesmente consultar o conteúdo da página, se irrite e vá embora sem prestigiar o nosso grandioso trabalho que não podemos esquecer que além de tudo é a complementação da mensagem.

Design Gráfico

alice — Sat, 03 Nov 2007 22:13:59 +0000

O Design Gráfico é uma expressão de arte funcional, informativa, onde há a procura pelo equilíbrio entre função e beleza com intuito de passar informação. Nesta profissão nos especializamos na produção de impressos em geral, na projeção de um outdoor, capas de livros, cartazes, folders, etc. O Design Gráfico está em tudo, é toda transmissão de informação visual.Mas cuidamos também da marca de uma empresa, para que esta tenha a cara da empresa, passe o que ela faz só na imagem, transmita a alma do negócio com simplicidade e beleza. A profissão também abrange sinalização de interiores, como hospitais, shoppings, sempre em acordo total com a imagem escolhida para a empresa, a marca. A marca, ou melhor, assinatura visual como é chamada na área, é composta por dois elementos principais: o símbolo e o logotipo. Símbolo é o que vai identificar a empresa visualmente, é desenho que tem a função ser a empresa no âmbito visual. O logotipo, como é chamado na maioria dos livros, é o nome da empresa, o que também não é simples de se fazer, já que a fonte, as cores e a forma, também deve transmitir a alma da empresa. Encontrar o símbolo, fonte, e cores certas, harmonizá-las para a produção da assinatura visual pode decidir a futuro de uma empresa. Olhe ao seu redor, veja se aquele chocolate poderia ter outra assinatura senão a dele, se aquele fast-food seria o mesmo sem aquela marca…

Novos Modelos de Negócios na Internet

Alice Andrade — Fri, 19 Oct 2007 16:49:43 +0000

Programadores e web designers tendem a procurar cada vez mais interagir com o usuário de maneira descomplicada e direta, aplicando isso a sistemas altamente uteis e que tranquilizam e agilizam a vida das pessoas, como locadoras on line, site de compras, restaurantes, bancos, chats, ferramentas de tele conferência que aproximam as pessoas e desenvolvem a economia devido a facilidade, agilidade e segurança encontrada nestes..

Ai temos o aspecto humano…Ontem eu analizava como era gostoso conversar com uma amiga que mora há 2 dias de mim, no meu escritório em casa, e saber das novidades da vida dela…E meus sogros podem conversar com os pais na America Central e do Norte…

Coisa linda, somos nós profissonais de tecnologia desenvolvendo a economia, tranquilizando e aproximando as pessoas…

Na INTERCON desse ano vários desses profissionais estarão juntos discutindo formas de melhorar a produtividade nesse sentido, e o Gilberto Junior será um deles.