Arquivos de ‘ JavaScript / Ajax / DHTML ’

Título de Notícia com efeito “Fade” em jQuery 18 November 2008 as 10:17 am de Ted k'

Script simples em JavaScript usando jQuery para fazer efeito de fade em títulos de notícias, veja o exemplo:



  • Campanha incentiva registro civil
  • Carga de petróleo está avaliada em US$ 100 milhões.
  • Alongamento previne lesões na ‘corrida’
  • Obama disputa com Lula preferência no Rio

 

 

Para esse efeito usei um arquivo chamado “mask_news.js”, nele contem todas as informações necessárias para o desenvolvimento do script.

Abrindo esse arquivo você perceberá uma linha para dar tempo ao efeito, constando em segundos:

delay = delay || 3000;

 

Coloquei 3 segundos, mais fica a seu critério aumentar ou diminuir:

Veja o código completo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Título News</title>
<div style="background: #FF9933;">
<style type="text/css">
	#noticias {
		list-style: none;
		font: 12px Arial;
		font-weight: bold;
	}
</style>

<script language="javascript" src="jquery-1.2.6.js"></script>
<script language="javascript" src="mask_news.js"></script>

<script type="text/javascript">
	$(document).ready(
		function() {
			$("#noticias").newsTicker();
			parseSamples();
		}
	);
</script>
</head>
<body>
<ul id="noticias" style="">
  <li>Campanha incentiva registro civil</li>
  <li>Carga de petróleo está avaliada em US$ 100 milhões.</li>
  <li>Alongamento previne lesões na 'corrida'</li>
  <li>Obama disputa com Lula preferência no Rio</li>
</ul>
</body>
</html>

 

Segue abaixo os arquivos para download:
Baixar: jquery-1.2.6.js
Baixar: mask_news.js

+ Comparando Datas com JavaScript Por Ted k' 14 November 2008 as 11:21 am Nenhum comentário 

<script language="javascript">
function checarDatas(){
    var NomeForm = document.Formulario;

    var data_1 = NomeForm.data_01.value;
    var data_2 = NomeForm.data_02.value;
    var Compara01 = parseInt(data_1.split("/")[2].toString() + data_1.split("/")[1].toString() + data_1.split("/")[0].toString());
    var Compara02 = parseInt(data_2.split("/")[2].toString() + data_2.split("/")[1].toString() + data_2.split("/")[0].toString());

    if (Compara01 > Compara02) {
        document.getElementById("resultado").innerHTML = "Data do Campo 01 Maior";
    }
    else {
          document.getElementById("resultado").innerHTML = "Data do Campo 01 Menor";
    }
    return false;
}
</script>
<div id="resultado"></div>
<form method="post" action="Teste.pl" name="Formulario" onsubmit="return checarDatas()">
    campo01: <input type="text" id="data_01" /><br />
    campo02: <input type="text" id="data_02" />
<input type="submit" />
</form>

 

Acesse também a Webly

+ Marcar vários CheckBox com JavaScript Por Ted k' 28 October 2008 as 2:56 pm Nenhum comentário

Código simples para uma grande funcionalidade:

script.js

function marcarCheck() {
	var contaForm = document.Form.elements.length;
	var campo = document.Form;
	var i;

	for (i=0; i<contaForm; i++) {
		if (campo.elements[i].id == "Marcados") {
			campo.elements[i].checked = campo.CheckTodos.checked;
		}
	}

}

 

 

Index.html

<script language="javascript" src="script.js"></script>
<form name="Form">
Marcar Todos: <input type="checkbox" name="CheckTodos" onClick="marcarCheck();" />
<br><br>
1. <input type="checkbox" id="Marcados" /><br>
2. <input type="checkbox" id="Marcados" /><br>
3. <input type="checkbox" id="Marcados" /><br>
4. <input type="checkbox" id="Marcados" /><br>
5. <input type="checkbox" id="Marcados" />
</form>

+ Carregar uma Página dentro de uma DIV com AJAX Por Ted k' 21 October 2008 as 1:50 pm 16 comentários

Carregamento simples de uma página dentro de uma DIV usando AJAX
Primeiro criamos o arquivo onde fazemos a solicitação do browser, para saber se o navegador suporta ou não “Msxml2.XMLHTTP”

ajax.js

function GetXMLHttp() {
if(navigator.appName == "Microsoft Internet Explorer") {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}

var xmlRequest = GetXMLHttp();

 

 

No arquivo “instrucao.js” terá as informações necessárias para fazer a ação

instrucao.js

function abrirPag(valor){
var url = valor;

xmlRequest.open("GET",url,true);
xmlRequest.onreadystatechange = mudancaEstado;
xmlRequest.send(null);

if (xmlRequest.readyState == 1) {
document.getElementById("conteudo_mostrar").innerHTML = "<img src='loader.gif'>";
}

return url;
}

function mudancaEstado(){
if (xmlRequest.readyState == 4){
document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText;
}
}

 

 

Criamos a página Index.html para recerber as informações

Index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carregando Página em DIV / AJAX</title>
<script language="javascript" src="ajax.js"></script>
<script language="javascript" src="instrucao.js"></script>
</head>
<body>
<div id="menu"><a href="#" onclick="abrirPag('Conteudo.html');">Clientes</a></div>
<br><br>
<div id="conteudo_mostrar"></div>
</body>
</html>

 

 

E finalmente criamos a página Conteudo.html que será exibida dentro da DIV “conteudo_mostrar”

Conteudo.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Clientes</title>
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</body>
</html>

Qualquer dúvida postem!!
Abraços!!!!

Posts anteriores