Arquivo da categoria: JavaScript/Afins

Função JavaScript que truncar/cortar string e coloca “…” no final

	//Funcao js para truncar/cortar string e jogar "..." no final de acordo com o tamanho/size desejado
	//@param str: string do texto pra truncar/cortar. Deve ter o tamanho minimo para comportar os 3 caracteres "..."
	//@param size: tamanho da string antes dos "..."
	function doTruncarStr(str, size){
		if (str==undefined || str=='undefined' || str =='' || size==undefined || size=='undefined' || size ==''){
			return str;
		}
		
		var shortText = str;
		if(str.length >= size+3){
			shortText = str.substring(0, size).concat('...');
		}
		return shortText;
	}	
	

Exemplo de uso e saída:

	
	
	doTruncarStr('a',3);//retorna "a" pq a string não tem tamanho minino (3)
	
	doTruncarStr('curto',3);//retorna "curto" pq a string não tem tamanho minino (3)
	
	doTruncarStr('textos',3);//retorna "tex..."
	
	doTruncarStr('Estah string blablabla',19);//retorna "Estah string blabla..."
	
	doTruncarStr('',3);//retorna ""
	
	doTruncarStr('vida loka',0);//retorna ""
	
	doTruncarStr('loka',1);//retorna "l..."
	

Flw

Anúncios

Deixe um comentário

Arquivado em JavaScript/Afins

jQuery – efeito zebra com mouse hover na lista de elementos

script (não esquecer o import do jQuery):


/*
 * pre-requisito: import do jquery antes deste js.
 * 
 * */
var oldColor = '';
jQuery(document).ready(function() {	
	$('.zebra:even').css('background-color', '#ffffff');//faz o efeito da zebra nas linhas
	
	/*efeito hover ao passar pela linha*/
	$('.zebra').hover(function(){
		oldColor = $(this).css('background-color');
		$(this).attr('oldColor',oldColor);//seto atributo p/ funcionar em todos os navegadores
		$(this).css('background-color', '#81b9da');	//seta a cor do mouseover da linha
	},function(){
		$(this).css('background-color', $(this).attr('oldColor'));//restaura cor original na saida do evento
	});
});

adicione o class fake “zebra” na tag da linha:

<tr class="zebra">
   <td width="25%">linha</td>
</tr>

exemplo rodando http://www.ricardospinoza.xpg.com.br/exemplos/exemploZebra.html

Referência:
Api jQuery http://api.jquery.com/hover/

Deixe um comentário

Arquivado em HTML, JavaScript/Afins, jQuery

JavaScript – exemplo – jQuery check all boxes

Função JavaScript (jQuery) que faz check e uncheck de todos os campos checkbox da página.

Importante: não esqueça de fazer o include do jquery na página.

<!-- import maroto direto do site do jquery. recomendo FORTEMENTE vc baixar e usar localmente -->
<script language="javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>

A função:

/**
* Js Função JavaScript que faz check e uncheck de todos os campos checkbox da página.
*/
function checkedOrUnCheckedAll(field) {				
	if (field.checked){//se o checkbox estiver checkado eh true
		//"input[type=checkbox]" eh o seletor do jquery, diz pro jquery procurar campos de input aonde o type eh checkbox
		$("input[type=checkbox]").attr('checked', true);//marca all check
	}else {
		$("input[type=checkbox]").attr('checked', false);//desmarca all check
	}
}

Forma de uso:

<input type="checkbox" name="allCB" onclick="checkedOrUnCheckedAll(this);" /> <b>marca/desmarca Todos</b>

Exemplo rodando na web:
http://ricardospinoza.xpg.com.br/exemplos/exemploCheckBoxAll.html

Referências:
http://iknowkungfoo.com/blog/index.cfm/2008/7/9/Check-All-Checkboxes-with-JQuery

site Oficial do jQuery http://jquery.com/

Deixe um comentário

Arquivado em Browser, JavaScript/Afins, jQuery

Javascript – Abrir janela popup centralizada

Função javascript para centralizar janela de popup na tela do usuário.

Javascript:

/**
* Abre popup centralizado.
* url - local da página pra exibição no popup
* w - width largura do popup
* h - height  altura do poup
*/
function abrirPopup(url,w,h) {
var newW = w + 100;
var newH = h + 100;
var left = (screen.width-newW)/2;
var top = (screen.height-newH)/2;
var newwindow = window.open(url, 'name', 'width='+newW+',height='+newH+',left='+left+',top='+top);
newwindow.resizeTo(newW, newH);

//posiciona o popup no centro da tela
newwindow.moveTo(left, top);
newwindow.focus();
return false;
}

Agora basta fazer a chamada da função por exemplo em um link:

<a href="#" onclick="return abrirPopup('http://www.google.com.br', 500, 400)">Google</a>

Exemplo rodando http://www.ricardospinoza.xpg.com.br/exemplos/popup_centralizado.html

[]s

9 Comentários

Arquivado em HTML, JavaScript/Afins

Exemplo de javascript contador de caracteres

A função java-script abaixo efetua a contagem de caracteres de um campo textarea (poderia ser um input text, ok?).

function contador(evt){
	//tratamento event p/ diversos browsers
	evt = evt || window.event;
	var targ = evt.target || evt.srcElement;
	if (targ.nodeType == 3) // defeat Safari bug
	targ = targ.parentNode
	//##end event
			
	//antigo codigo
	//document.forms[0].caracteres.value=document.forms[0].texto.value.length
				
	//[update] novo - sugestão no comments - Dicas de Excel
	//agora está generico. ser houver mais de um textarea, o js atende.
	document.forms[0].caracteres.value=targ.value.length
}

A função contador()  é acionada pelos eventos  onkeydown onkeyup do campo “texto” do form.

<!--antigo
<TEXTAREA onkeydown=contador() onkeyup=contador() name=texto></TEXTAREA>
-->
<!--[update] novo - sugestão no comments - Dicas de Excel-->
<TEXTAREA onkeydown=contador(event) onkeyup=contador(event) name=texto></TEXTAREA>

Desta forma, capturamos o tamanho da string informada pela propriedade value.length. e atribuímos o tamanho no  campo input pra exibir para o usuário.

Veja o exemplo rodando em ContadorDeCaracteres.htm

7 Comentários

Arquivado em Browser, HTML, JavaScript/Afins

JQuery – exemplos de uso – combo-box

Salve,

JQuery é um biblioteca Java-Script que facilita mto a vida do desenvolvedor web. Este post expoem exemplos pontuais para manipular combo-box html com JQuery.

//retorna o valor referente posição selecionada do combo.
//lembrando que a primeira posição inicia em zero
$("#idDoSeuComboBox").attr("selectedIndex")

//posiciona o seleted da combo no indice indicado
//neste exemplo o nro zero posiciona na primeira posição da combo
$("#idDoSeuComboBox").attr('selectedIndex', 0);

// posiciona no value correspondente
$('select').val('1'); //se sua combo tiver value="1" vai selecionar

//posiciona pelo texto correspondente
$('select').val('Two'); //se sua combo o texto="Two" vai selecionar

//retorna o texto do value especificado
$("#idDoSeuComboBox option[value='2']").text()

//retorna o texto referente ao item selecionado na combo
$("#idDoSeuComboBox option:selected").text();
//ou
$("#idDoSeuComboBox :selected").text();

//recupera o value corrente da combo
$("#idDoSeuComboBox").val();

//recupera o segundo option de seu select (combo) - thiagobfiorenza comments
$("#idDoSeuComboBox").eq(2);

Se vc souber alguém exemplo não abordado aqui. sinta a vontade pra postar o comentários do post 🙂

4 Comentários

Arquivado em JavaScript/Afins

Como ler e escrever arquivos e listar drives com JavaScript

Os dois primeiros exemplos usam ActiveX, ou seja, rodam apenas no Internet Explorer, o ultimo roda em qualquer browser.
No link de referência ao final do post os caras usam extensão pra fazer o mesmo sem ActiveX.

Usando JavaScript para escrever um arquivo (usa ActiveX):

function WriteFile()
{
   var fso  = new ActiveXObject("Scripting.FileSystemObject");
   var fh = fso.CreateTextFile("c:\\Test.txt", true);
   fh.WriteLine("Some text goes here...");
   fh.Close();
}
//chamada da função
 WriteFile();

Listando drives disponíveis na sua máquina (usa ActiveX):

function ShowAvailableDrives()
{
    document.write(GetDriveList());
}

function GetDriveList()
{
 var fso, s, n, e, x;
 fso = new ActiveXObject("Scripting.FileSystemObject");
 e = new Enumerator(fso.Drives);
 s = "";
 do
 {
   x = e.item();
   s = s + x.DriveLetter;
   s += ":-    ";
   if (x.DriveType == 3)     n = x.ShareName;
   else if (x.IsReady)     n = x.VolumeName;
   else                     n = "[Drive not ready]";
   s += n + "<br>";
   e.moveNext();
 }  while (!e.atEnd());
 
 return(s);
}
//chamada da função
ShowAvailableDrives();

Usando JavaScript para ler arquivos (NÃO usa ActiveX):

<!--
var srcFrame;
//External content into a layer
function loadOuter(doc) {
 srcFrame = document.getElementById("hiddenContent");
 srcFrame.src = doc;
 // workaround for missing onLoad event in IFRAME for NN6
 if (!srcFrame.onload) {
  setTimeout("transferHTML()", 1000)
 }
}

function transferHTML(){
 srcContent='';
 if (srcFrame.contentDocument){
  srcContent=srcFrame.contentDocument.getElementsByTagName("BODY")[0].innerHTML;
 }
 else if (srcFrame.contentWindow){
  srcContent=srcFrame.contentWindow.document.body.innerHTML;
 }
 document.getElementById("outerDisplay").innerHTML = srcContent
}


var DocAry=new Array('Test.txt','Test2.txt');

function SelectList(v){
 if (v>0){
  loadOuter(DocAry[v-1]);
 }
}
//uso
//
//<INPUT TYPE="button" VALUE="Test.txt" onClick="loadOuter('Test.txt')" >
//<INPUT TYPE="button" VALUE="Test2.txt" onClick="loadOuter('Test2.txt')" >
//

Para rodar o exemplo de leitura crie os arquivos Test.txt e Test2.txt no mesmo diretório da página html do exemplo:

Test.txt
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Test2.txt
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17

Quem quiser contribuir com outros exemplos de ler, escrever e listar diretórios compativeis com os demais navegadores, posta ai que atualizo no post e crédito a devida autoria 🙂

Referências:
How to read and write files in JavaScript. http://www.c-point.com/JavaScript/articles/file_access_with_JavaScript.htm acessado em 23/08/2011
vwphillips. Codingforuns. http://www.codingforums.com/showthread.php?t=647 acessado em 23/08/2011

Deixe um comentário

Arquivado em JavaScript/Afins