Very crazy javascript inssue

By pedrocernausan on 20 Jan 2010 at 13:40 UTC
Hello!
I make a template content and put some lines of javascript. When I run the content, the javascript don´t work... but when I crop the code and put the SAME code again via FireBug, this scipt start normally!
Anybody know what happend? Any sugestions are apreciated!
Thanks!
Comments

Post your code

matt_harrold commented 20 January 2010 at 14:25
It is impossible to do anything but speculate without looking at the code.
I guess it's because your code isn't being called, but why is difficult to guess.
Code

pedrocernausan commented 20 January 2010 at 14:36
Ok. Just to say, I adapt the javascript JQuery to work with Mootools (other scripts works...).
Here:
<!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" lang="pt-br" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Case Casado | Revitech</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="/nowhere/misc/favicon.ico" type="image/x-icon" />
<style type="text/css" media="all">@import "/nowhere/modules/cck/content.css";</style>
<style type="text/css" media="all">@import "/nowhere/modules/node/node.css";</style>
<style type="text/css" media="all">@import "/nowhere/modules/simplenews/simplenews.css";</style>
<style type="text/css" media="all">@import "/nowhere/modules/system/defaults.css";</style>

<style type="text/css" media="all">@import "/nowhere/modules/system/system.css";</style>
<style type="text/css" media="all">@import "/nowhere/modules/user/user.css";</style>
<style type="text/css" media="all">@import "/nowhere/modules/panels/css/panels.css";</style>
<style type="text/css" media="all">@import "/nowhere/themes/revitech/style.css";</style>
<!--CSS para corrigir bugs do IE7 e IE6-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="/nowhere/themes/revitech/ie-hacks.css" type="text/css" media="all" />
<![endif]-->
<!--CSS para corrigir bugs somente do IE7-->
<!--[if IE 7]>
<link rel="stylesheet" href="/nowhere/themes/revitech/ie7-hacks.css" type="text/css" media="all" />
<![endif]-->
<!--CSS para corrigir bugs somente do IE6-->
<!--[if IE 6]>
<link rel="stylesheet" href="/nowhere/themes/revitech/ie6-hacks.css" type="text/css" media="all" />
<![endif]-->
<script type="text/javascript" src="/nowhere/misc/jquery.js"></script>
<script type="text/javascript" src="/nowhere/misc/drupal.js"></script>

<script type="text/javascript" src="/nowhere/modules/jquery_update/compat.js"></script>
<script type="text/javascript" src="/nowhere/modules/panels/js/panels.js"></script>
<link type="image/x-icon" href="/nowhere/themes/revitech/img/favicon.ico" rel="shortcut icon" />
<script type="text/javascript" src="/nowhere/themes/revitech/js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="/nowhere/themes/revitech/js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="/nowhere/themes/revitech/js/tips.js"></script>
<script type="text/javascript" src="/nowhere/themes/revitech/js/byslidemenu-1.1.js"></script>
</head>
<body 
class="amarelo"

>
    <!--Messages -->

        <!--FIM-->
<!--in�cio do wrapper-->
<div class="wrapper clearfix">
  <!--in�cio do topo-->
  <div id="topo" class="col-16 clearfix">
    <div id="ferramentas" class="clearfix">

<ul class="menu">
<li class="leaf"><a href="/nowhere/sitemap" title="Mostra o mapa do site com RSS.">Mapa do Site</a></li>
<li class="leaf"><a href="/nowhere/cadastre-se">Cadastre-se</a></li>
<li class="leaf"><a href="/nowhere/contato">Contato</a></li>

</ul>
<form action="/nowhere/cases/case-casado"  accept-charset="UTF-8" method="post" id="search-block-form">
<div><div class="container-inline"><label for="search_block_form_keys">Busca</label> <div class="form-item" id="edit-search-block-form-keys-wrapper">
 <input type="text" maxlength="128" name="search_block_form_keys" id="edit-search-block-form-keys"  size="15" value="" title="Digite as os termos da busca." class="form-text" />
</div>
<input type="submit" name="op" id="edit-submit" value="Pesquisar"  class="form-submit" />
<input type="hidden" name="form_token" id="edit-search-block-form-form-token" value="8e55d655ebcd2fcf0576862887c59756"  />
<input type="hidden" name="form_id" id="edit-search-block-form" value="search_block_form"  />
</div>
</div></form>
    </div>
    <h1><a href="/nowhere/" title="Revitech">Revitech</a></h1>

    <!--in�cio do menu-->
    <ul class="" id="menu"><li  class="first menu-1-1-2"><a href="/nowhere/empresa/perfil" title="A empresa" class="menu-1-1-2">A Empresa</a></li>
<li  class="menu-1-2-2"><a href="/nowhere/cases" title="Cases" class="menu-1-2-2">Cases</a></li>
<li  class="menu-1-3-2"><a href="/nowhere/destaques" title="Destaques" class="menu-1-3-2">Destaques</a></li>
<li  class="menu-1-4-2"><a href="/nowhere/representantes" title="Representantes" class="menu-1-4-2">Representantes</a></li>
<li  class="last menu-1-5-2"><a href="/nowhere/sustentabilidade" title="Sustentabilidade" class="menu-1-5-2">Sustentabilidade</a></li>
</ul>    <!--fim do menu-->
  </div>

  <!--fim do topo-->
      <!--in�cio do breadcrumb-->
  <div id="breadcrumb" class="col-16 clearfix">
    <p class="aEsq"> Voc&ecirc; est&aacute; em:&nbsp;<a href="/nowhere/">Início</a></p>
        <!--início do menu-produtos-->

<ul id="menu-produtos">
      <span class="aEsq">Produtos:&nbsp;</span>
      <li class="pisos"><a class="tips tip1" title="Pisos;;Lorem ipsum dolor sit amet, morbi laoreet sem elit urna donec, suspendisse velit luctus dui tellus" href="/nowhere/segmento/pisos">Pisos</a></li>
      <li class="revestimentos"><a class="tips tip2" href="/nowhere/segmento/revestimentos" title="Revestimentos;;Lorem ipsum dolor sit amet, morbi laoreet sem elit urna donec, suspendisse velit luctus dui tellus">Revestimentos</a></li>
      <li class="acessorios"><a class="tips tip3" href="/nowhere/segmento/acessórios" title="Acessórios;;Lorem ipsum dolor sit amet, morbi laoreet sem elit urna donec, suspendisse velit luctus dui tellus">Acessórios</a></li>
      <li class="instalacao"><a class="tips tip4" href="/nowhere/segmento/produtos-para-instalação" title="Produtos para Instalação;;Lorem ipsum dolor sit amet, morbi laoreet sem elit urna donec, suspendisse velit luctus dui tellus">Produtos para Instalação</a></li>
      <li class="manutencao"><a class="tips tip5" href="/nowhere/segmento/manutenção-e-limpeza" title="Manutenção e Limpeza;;Lorem ipsum dolor sit amet, morbi laoreet sem elit urna donec, suspendisse velit luctus dui tellus">Manutenção e Limpeza</a></li>

    </ul>	<!--fim do menu-produtos-->

  </div>
  <!--fim do breadcrumb-->
      <!--in�cio do submenu-->
  <div class="col-4" id="lateral">
      
<ul class="menu">
<li class="collapsed"><a href="/nowhere/node/add">Adicionar Conteúdo</a></li>

</ul>

<ul class="menu">
<li class="leaf"><a href="/nowhere/cases/armstrong">Armstrong</a></li>
<li class="leaf"><a href="/nowhere/cases/bolon">Bolon</a></li>
<li class="leaf"><a href="/nowhere/cases/desso">Desso</a></li>
<li class="leaf"><a href="/nowhere/cases/revitech">Revitech</a></li>

</ul>

<ul class="menu">
<li class="leaf"><a href="/nowhere/users/drupaler">Minha conta</a></li>

<li class="collapsed"><a href="/nowhere/admin">Administrar</a></li>
<li class="leaf"><a href="/nowhere/logout">Sair</a></li>

</ul>
    </div>    <!--fim do submenu-->

  <!--in�cio do principal-->
  <div id="principal" class="clearfix">
          <!--in�cio do texto-->
        	<div class="texto col-12">

             
    <h3 class="title">Case Casado</h3>
    <div class="tabs"><ul class="tabs primary">
<li class="active"><a href="/nowhere/cases/case-casado" class="active">Ver</a></li>
<li><a href="/nowhere/node/139/edit">Editar</a></li>
</ul>
</div>
        <script type="text/javascript" src="/nowhere/themes/revitech/js/noobSlide.js"></script>
  <div class="node">
        <span class="submitted"></span>

    <div class="content">    <!--início do texto-->
    <div id="foto" class="col-8" align="center">
		<img src="/nowhere/themes/revitech/img/spinner.gif" alt="loading" class="loading" width="24" height="24" />
	</div>

    <div class="texto col-4">
      <p><strong>Marca:</strong> <a href="/nowhere/cases/Desso">Desso</a><br />

        <strong>Produto:</strong> <a href="/nowhere/produto/piso-pisado">Piso Pisado</a><br />
        <strong>Local:</strong> Local Local<br />
        <strong>Ano:</strong> 2012<br />
        		<strong>Arquiteto:</strong> Oscar NieMano<br />        <strong>Características:</strong> Caracterioso</p>

    </div>

<div id="menu-de-thumbs" class="clearfix"><div id="mask"><div id="box"><p class="col-2 thumb nounder"><a href="../files/2.png" title="Clique para ampliar" class="item" id="first" ><span></span><img src="../files/2.png" width="86px" height="86px" /></a></p><p class="col-2 thumb nounder"><a href="../files/1.png" title="Clique para ampliar" class="item"><span></span><img src="../files/1.png" width="86px" height="86px" /></a></p><p class="col-2 thumb nounder"><a href="../files/piso-1_0.jpg" title="Clique para ampliar" class="item"><span></span><img src="../files/piso-1_0.jpg" width="86px" height="86px" /></a></p><p class="col-2 thumb nounder"><a href="../files/produto02_0.jpg" title="Clique para ampliar" class="item"><span></span><img src="../files/produto02_0.jpg" width="86px" height="86px" /></a></p><p class="col-2 thumb nounder"><a href="../files/produto03_4.jpg" title="Clique para ampliar" class="item"><span></span><img src="../files/produto03_4.jpg" width="86px" height="86px" /></a></p><p class="col-2 thumb nounder"><a href="../files/produto01_1.jpg" title="Clique para ampliar" class="item"><span></span><img src="../files/produto01_1.jpg" width="86px" height="86px" /></a></p></div></div><div id="botoes" class="col-12"><span id="next" style="display:none;">Próximas</span><span id="prev" style="display:none;">Anteriores</span></div>
<script type="text/javascript">
/* Menu Cores */
window.addEvent('domready',function(){
	var nS1 = new noobSlide({
			box: $('box'),
			items: [0],
			size: 720,
			autoPlay: false,
			interval: 5000,
			fxOptions: {
				duration: 1000,
				transition: Fx.Transitions.Quad.easeInOut,
				wait: false
			},
			addButtons: {
				previous: $('prev'),
				next: $('next')
			}
		});
/*ESQUEMA DAS FOTOS*/
		var pos = 0;
		var offset = 462;	// HOW MUCH TO SLIDE WITH EACH CLICK
		var currentslide = 1;	// CURRENT SLIDE IS THE FIRST SLIDE
		var inspector = $('foto');	// WHERE THE LARGE IMAGES WILL BE PLACE	
		var fx = new Fx.Morph(inspector, {duration: 300, transition: Fx.Transitions.Sine.easeOut});
 		var fx2 = new Fx.Morph(inspector, {duration: 200, transition: Fx.Transitions.Sine.easeOut});

		$$('.item').each(function(item){ 
			item.addEvent('click', function(e) { 
				e = new Event(e).stop();
				fx2.start({ 
					'opacity' : 0													
				}).chain(function(){
					
					inspector.empty();		// Empty Stage
					var loadimg = '/nowhere/themes/revitech/img/spinner.gif';	   // Reference to load gif
					var load = new Element('img', { 'src': loadimg, 'class': 'loading' }).inject(inspector); 
					fx2.start({ 'opacity' : 1 });
					var largeImage = new Element('img', { 'src': item.href }); // create large image
					
					/* When the large image is loaded, fade out, fade in with new image */
					//largeImage.onload = function(){  // While this line of code causes the images to load/transition in smoothly, it cause IE to stop working
						fx.start({ 
							'opacity' : 0													
						}).chain(function(){
							inspector.empty();	           				// empty stage
							var description = item.getElement('span');	// see if there is a description
							
							if(description)					   
								
									
							largeImage.inject(inspector); // insert new image
							fx.start({'opacity': 1});	 // then bring opacity of elements back to visible				
						});
					//};
					
				});
			});
		});


		// INSERT THE INITAL IMAGE - LIKE ABOVE
		inspector.empty();
		var description = $('first').getElement('span');
		var largeImage = new Element('img', {'src': $('first').href}).inject(inspector);

});

</script></div>
    </div>
</div>
   </div>


   
  <!--fim do principal-->

  <!--in�cio do rodape-->
  <div id="rodape" class="col-16">
    <p class="aEsq">
<p>© 2010 Revitech - Todos os direitos reservados<br />
Rua Pascal, 1353 - Campo Belo - CEP: 04616-004 - São Paulo - SP • Fone: 11 5090 1320 • Email: <a href="mailto:revitechpisos@revitechpisos.com.br">revitechpisos@revitechpisos.com.br</a></p>
</p>
    <div class="aDir"><a href="http://www.navigators.com.br/" title="Powered by Navigators"><img src="/nowhere/themes/revitech/img/navigators.png" alt="Powered By Navigators" /></a></div>
  </div>
  <!--fim do rodape-->

</div>
<!--fim do wrapper-->
</div>
</body>
</html>
Thanks!
drupal natively includes

sovarn commented 20 January 2010 at 14:45
drupal natively includes jquery. So the two libraries may clash. google 'mootools no conflict' or something.
Best would be just to use the native jquery library only.
Yes, I know. I make this

pedrocernausan commented 20 January 2010 at 15:25
Yes, I know. I make this change on drupal javascripts. Other script very similar works... :/
Very crazy javascript inssue

Comments

Post your code

Code

drupal natively includes

Yes, I know. I make this

New forum topics

News items

Our community

Documentation

Drupal code base

Governance of community
