Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 149

Loader

28-10-2010 12:39

Galera estou com dúvidas sobre um código que peguei em um site gringo.
É um loader, ele carrega o site mostrando uma barra de progresso.

Ele é formado por 2 documentos javascript que são chamados na página que queremos o seu efeito.

O que acontece é que roda legal nos navegadores mesno é claro no IE.
Não entendo praticamente nada de javascript e não consegui resolver o problema.
Queria ver se vocês podem me ajudar?

loader1.js
var boxText = "Aguarde ... carregando imagens!"; // dialog box message var boxFont = "bold 12px Arial,Helvetica"; // dialog box font (CSS spec: "style size family") var boxFontColor = "#89064E"; // dialog box font color var boxWidth = 250; // dialog box width (pixels) var boxHeight = 100; // dialog box height (pixels) var boxBGColor = "#FFD2E9"; // dialog box background color var boxBorder = "none"; // dialog box border (CSS spec: "size style color") var barLength = 200; // progress bar length (pixels) var barHeight = 15; // progress bar height (pixels) var barColor = "#89064E"; // progress bar color var barBGColor = "#FFD2E9"; // progress bar background color var fadeInSpeed = 20; // content fade-in speed (0 - 30; 0 = no fading)* var contentOpacity = 20; // content opacity during loading (0 - 100)* var safari = (navigator.userAgent.indexOf('Safari') != -1) ? true : false; if((document.all || document.getElementById) && !safari) { document.write('<style> .clsBox { ' + 'position:absolute; top:50%; left:50%; ' + 'width:' + boxWidth + 'px; ' + 'height:' + boxHeight + 'px; ' + 'margin-top:-' + Math.round(boxHeight / 2) + 'px; ' + 'margin-left:-' + Math.round(boxWidth / 2) + 'px; ' + (boxBGColor ? 'background-color:' + boxBGColor + '; ' : '') + (boxBorder ? 'border:' + boxBorder + '; ' : '') + 'z-index:69; ' + '} .clsBarBG { ' + 'width:' + (barLength + 4) + 'px; ' + 'height:' + (barHeight + 4) + 'px; ' + 'background-color:' + barBGColor + '; ' + 'border-top:1px solid black; border-left:1px solid black; ' + 'border-bottom:1px solid silver; border-right:1px solid silver; ' + 'margin:0px; padding:0px; ' + 'text-align: left; ' + '} .clsBar { ' + 'width:0px; height:' + barHeight + 'px; ' + 'background-color:' + barColor + '; ' + 'border-top:1px solid silver; border-left:1px solid silver; ' + 'border-bottom:1px solid black; border-right:1px solid black; ' + 'margin:1px; padding:0px; ' + 'font-size:1px; ' + '} .clsText { ' + 'font:' + boxFont + '; ' + 'color:' + boxFontColor + '; ' + '} </style> ' + '<div id="divBox" class="clsBox">' + '<table border=0 cellspacing=0 cellpadding=0><tr>' + '<td width=' + boxWidth + ' height=' + boxHeight + ' align=center>' + (boxText ? '<p class="clsText" align=center>' + boxText + '</p>' : '') + '<table border=0 cellspacing=0 cellpadding=0><tr><td width=' + barLength + '>' + '<div id="divBarBG" class="clsBarBG"><div id="divBar" class="clsBar"></div></div>' + '</td></tr></table>' + '</td></tr></table></div>' + '<div id="Content" style="width:100%; visibility:hidden">'); }

loader2.js
function LOADER() { this.bar, this.iv, this.timer; this.imgAll = 0; this.opacity = contentOpacity; this.opName = ''; this.getObj = function(id) { var obj; if(document.getElementById) obj = document.getElementById(id); else if(document.all) obj = document.all[id]; return obj; } this.hasOpacity = function(obj) { if(obj) { if(typeof(obj.style.opacity) != 'undefined') return 'opacity'; if(typeof(obj.style.MozOpacity) != 'undefined') return 'MozOpacity'; if(typeof(obj.style.KhtmlOpacity) != 'undefined') return 'KhtmlOpacity'; if(typeof(obj.style.filter) != 'undefined') return 'filter'; } return false; } this.setOpacity = function(obj, opacity) { if(obj && !document.layers) { if(this.opName == 'filter') { obj.style.filter = 'alpha(opacity=' + opacity + ')'; } else if(this.opName) { obj.style[this.opName] = opacity / 100; } } } this.fadeIn = function(id) { var obj = this.getObj(id); if(obj) { if(document.all) obj.style.position = 'absolute'; obj.style.visibility = 'visible'; if(fadeInSpeed && this.opacity < 100) { this.opacity += fadeInSpeed; if(this.opacity > 100) this.opacity = 100; this.setOpacity(obj, this.opacity); if(this.timer) clearTimeout(this.timer); this.timer = setTimeout("loader.fadeIn('" + id + "')", 1); } else { this.opacity = 100; this.setOpacity(obj, 100); } } } this.setBar = function() { if(this.imgAll < document.images.length) this.imgAll = document.images.length; for(var i = cnt = 0; i < this.imgAll; i++) { if(document.images[i] && document.images[i].complete) cnt++; else if(document.images[i].complete == null) cnt++; } var mul = barLength / this.imgAll; var len = Math.round(cnt * mul); if(len > barLength) len = barLength; this.bar.style.width = len + 'px'; window.status = cnt + ' / ' + this.imgAll; if(cnt >= this.imgAll) { if(this.iv) clearInterval(this.iv); setTimeout('loader.loaded()', 100); } } this.init = function() { var content = this.getObj('Content'); this.opName = this.hasOpacity(content); if(contentOpacity < 0) contentOpacity = 0; else if(contentOpacity > 100) contentOpacity = 100; this.setOpacity(content, contentOpacity); if(contentOpacity == 100 || (this.opName && contentOpacity)) { content.style.visibility = 'visible'; } this.bar = this.getObj('divBar'); if(document.images && document.images.length) { if(this.iv) clearInterval(this.iv); this.iv = setInterval('loader.setBar()', 100); } else this.loaded(); } this.loaded = function() { window.status = ''; this.fadeIn('Content'); var obj = this.getObj('divBox'); obj.style.visibility = 'hidden'; } } if((document.all || document.getElementById) && !safari) { document.write('</div>'); var loader = new LOADER(); loader.init(); }

Minha página.
<?php session_start(); if(!isset($_SESSION["cliente"]["LOGIN"])) { echo "<script type = 'text/javascript'>location.href = 'index.php?link=15'</script>"; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet"m type="text/css" href="estilos/estilos.css"/> <title></title> <script language="javascript" src="loader1.js"></script> <script type="text/javascript" src="efeitogaleria.js"></script> <script type="text/javascript" src="lightbox2.04/js/prototype.js"></script> <script type="text/javascript" src="lightbox2.04/js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="lightbox2.04/js/lightbox.js"></script> <link rel="stylesheet" href="lightbox2.04/css/lightbox.css" type="text/css" media="screen" /> </head> <body> <div id="content"> <span class="contentE"></span> <div id="anterior"> <?php $dir="image/anterior"; $open = opendir("$dir"); while($ler = readdir($open)){ if (substr($ler,-4) == ".jpg") { echo "<a href=".$dir."/".$ler." title=".$ler." alt=".$ler." rel=lightbox[roadtrip]> <img class = panel src=".$dir."/".$ler." title=".$ler." alt=".$ler."></a>"; } } ?> </div> <a href="index.php?link=2"><img src="image/colecao.gif" alt="colecao" class="colecaoanterior"/></a> <span class="contentD"></span> </div> <script language="javascript" src="loader2.js"></script> </body> </html>

Abraço.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17520
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Loader

28-10-2010 13:12

Testei aqui e o script funcionou no IE, o único problema é que se não tem todas as imagens no documento ele trava a barra de carregamento.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 149

Loader

28-10-2010 14:30

Pois é. Não entendi essa travada. No Firefox, opera, safari funciona certinho. Fica tudo com opacidade inclusive as imagens. Já no IE trava a barra e as imagens não ficam com opacidade.
Será que não é alguma incompatibilidade com o prototype ou com o outro que forma da galeria.
até mais.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17520
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Loader

28-10-2010 16:10

Essa travada só acontece se alguma figura não existir, pelo que ví. E a opacidade está ok aqui, tanto no IE 8 quanto no FF. Também pode ser incompatibilidade. Faça um teste, tirando a linha da biblioteca. Verifique também se todas as imagens chamadas existem realmente.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 149

Loader

29-10-2010 12:57

Bah cara. Não sei o que fazer aqui. Se eu tiro o prototype, funciona certinho aqui pra mim. Se mantenho trava a barra.
até mais.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17520
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Loader

29-10-2010 12:58

Tenta buscar o mesmo efeito que precisa usando o jQuery, pode dar certo.
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 149

Loader

05-11-2010 19:30

A saída que encontrei para utilizar o script, foi substituir o lightbox pelo trickbox. Funcionou como eu queria.
Abraço.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17520
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Loader

06-11-2010 16:33

Boa.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado