[Resolvido] Problema pegando variavel do php

[Clear 0]

Amigos !!

 

Sou novato no aprendizado de JS e tô tomando uma surra daquelas aqui...rsss

 

Fiz esse script aqui:

 

<script type="text/javascript">
$(function(){


   $("map#mapa area").click(function(){

var pegaclasse = "<?php echo $value['conteudo_id']; ?>";

$('div#preview').hide();	
       $('div.'+pegaclasse).slideDown();

        return false;

   })
})

 

Onde:

 

Tenho uma map com várias areas, que ao clicar, cada área terá a sua respectiva div a ser mostrada.

 

o número de áreas é desconhecido, está vindo de um foreach que eu faço em php, portanto atribui uma id única como classe para cada div que aparecer, é onde entra o $value['conteudo_id'],

 

Minha Map Area

 

<map id="mapa">';

   foreach ($conteudo as $key => $value){

       <area shape="circle" coords="5,5,10" href="javascript:void(0);">
       <img src="area.jpg" usemap="#mapa" style="position:absolute; top:'.$value['mapa_coord_y'].'px;left:'.$value['mapa_coord_x'].'px; width:10px; height:10px;" />

   }

</map>

 

 

Minha div OCULTA,:

 

foreach( $conteudo as $key => $value ) {

<div id="geral">

   <div id="preview" class="'.$value['conteudo_id'].'" style="display:none;">
   conteudo
   </div>

</div>

}

 

 

O fato é,...não funfa....

 

e não tô sabendo identificar se ele não ta conseguindo pegar a variavel do php dentro do JS, ou se to inserindo o a variavel 'pegaclasse' de forma errada....

 

Ou outra bagunça qq que eu tenha feito....rsssss

 

Alguém tem alguma dica que possa me ajudar nesse caso?

 

Abração Pessoal !

[William Bruno 1501]

cara, esses 2 tutoriais podem te ajudar:

 

http://wbruno.com.br/blog/2011/03/12/principio-de-menu-em-abas/

http://wbruno.com.br/blog/2011/06/21/afinal-e-javascript/

[Clear 0]

Grande Bruno...estudando os seus exemplos, fiz alguns ajustes, porém tô empacando na hora de coletar a propriedade class correta.....(não sei é só isso que eu to empacando auaauh)

 

 

 

<script type="text/javascript">
function id( el ){  
       return document.getElementById( el );  
}  
function hide_all(){  
       var divs = id('geral').getElementsById('preview');  
       for( var i=0; i<divs.length; i++ )  
       {  
               divs[i].style.display = 'none'; 
       }  
}  
/* http://www.javascriptkit.com/jsref/event.shtml */  
function disablelink( e ){  
       var evt = window.event || e  
       if (evt.preventDefault) //supports preventDefault?  
               evt.preventDefault()  
       else //IE browser  
               return false  
}  
window.onload = function(){  
       hide_all();  
       var as = id('mapa').getElementsById('idmapa');  
       for( var i=0; i<as.length; i++ )  
       {  
               as[i].onclick = function( e ){  
                       hide_all();  

					var divs2 = id('preview').getProperty('class');
					$('div.'+divs2).show();                 
                       return disablelink( e );  
               }  
       }  
} 
</script>

 

 

<map id="mapa">';

   foreach ($conteudo as $key => $value){

       <area id="idmapa" class="'.$value['conteudo_id'].'" shape="circle" coords="5,5,10" href="javascript:void(0);">
       <img src="area.jpg" usemap="#mapa" style="position:absolute; top:'.$value['mapa_coord_y'].'px;left:'.$value['mapa_coord_x'].'px; width:10px; height:10px;" />

   }

</map>

 

 

foreach( $conteudo as $key => $value ) {

<div id="geral">

   <div id="preview" class="'.$value['conteudo_id'].'">
   conteudo
   </div>

</div>

}

 

Acho que fui descomplicar e acabei me complicando mais auahuaha....

 

Fico no aguardo de mais uma valiosa dica :D

 

Abraço

[William Bruno 1501]

como o seu conteudo está longe doq você quer abrir, você vai ter q trabalhar com algum atributo, assim como fiz com o ID, e o HREF:

 

<a href="#historia">História</a><br />  
               <div id="historia">Conteudo da História</div>

notou q eles tem o mesmo valor ?

 

cada par ? o que clica tem href="#historia" eoq quero abrir, tem id="historia"

 

 

ai eu sei, q qndo clicar no q tem href="#historia", eu sei q tenho que abrir oq tem o id="historia"

 

 

ou seja, a mesma palavra, entendeu ?

essa é a lógica.

 

 

 

no seu caso, você pode fazer numerico:

$i = 1;
foreach( $conteudo as $key => $value ) {

<div id="geral">

   <div id="preview$i" class="'.$value['conteudo_id'].'">
   conteudo
   </div>

</div>
  $i++;
}

ai você terá as divs:

 

id="preview1", id="preview2", id="preview3"..

 

e os disparadores:

href="#preview1", href="#preview2", href="#preview3"..

 

 

dessa forma, você sabe qual conteudo cada disparador tem q abrir.

[Clear 0]

Ahahahah

 

Foi assim mesmo que eu fiz Bruno...tinha captado isso no seu último comentário.

 

E funcionou parcialmente ok..

 

O único problema que me restou, é na função hide_all:

 

function hide_all(){  
       var divs = id('geral').getElementsByTagName('div');  
       for( var i=0; i<divs.length; i++ )  
       {  
               divs[i].style.display = 'none';  
       }  
} 

 

Nela você manda ele atribuir o estilo "display:none;" a todas as divs que ele encontrar dentro de Geral...

 

Isso resolve o problema da div preview, que é a que queremos ocultar e vem logo abaixo da geral....

 

o problema é que dentro da div preview....existem várias outras divs...que também recebem esse atributo.

 

E quando chamamos a div preview e tornamos ela "block", ela paraece vazia, pq todos os divs dentro dela ainda estão "none";

 

Exemplo:

 

<div id="geral">

   <div id="preview" class="'.$value['conteudo_id'].'">

       <div id="conteudo_titulo">Título</div>  <--- Essa div nunca aparecerá.

       <div id="conteudo">conteudo</div>  <--- Essa div nunca aparecerá.

   </div>

</div>

 

Alguma dica?

[William Bruno 1501]

ai você pode fazer assim:

 

 

        for( var i=0; i<divs.length; i++ )  
       {
               if( divs[i].className=='preview' )
                   divs[i].style.display = 'none';  
       }

 

 <div id="preview'.$value['conteudo_id'].'" class="preview">

 

isso pq o ID não pode se repetir. Então você varia ele.

[Clear 0]

Ai ficou jóia Bruno !!!

 

Super obrigado pela ajuda !!!

 

Agora o meu mapa está dinamico....

 

VLw !!!

[Clear 0]

Voltei..ahaha

 

Ainda sobre o mesmo assunto BRuno...

 

fui fazer outro script desses um pouco diferente pra ver se tinha assimilado o conceito...

 

o conceito parece estar ok...mas acho que tem algo errado no código...

 

 <script>
 $(document).ready(function() {
  function id( el ){  
       return document.getElementById( el );  
} 

    var ab = id('geral').getElementsByTagName('div').className = "bloco";  
       for( var i=0; i<ab.length; i++ )  
       { 
			var id_ele = this.attr('id');  
               ab[i].mouseenter = function(){  


                       id( id_ele[1] + "-avanca" ).show("slide", { direction: "left" }, 1000);

               }  

       }  

 });
 </script>

 

 

HTML

 

<div="geral">

$i =0;

foreach ($array as $key => $value) {

       $i++;

   <div id="'.$i.'-avanca" class="bloco2">teste</div>

   <div id="'.$i.'" class="bloco"></div>

}

</div>

 

Abraço !!!

[William Bruno 1501]

você ta usando errado os conceitos da lib jQuery.

 

o seu código está uma mistura..

[Clear 0]

Como sempre o amigo está coberto de razão grande Bruno !!! :D

 

Parei pra rever o código e vi as bananadas que fiz misturando js puro com jquery.

 

Refiz então o código com menos bananadas.....rsss

 

Não é lá essa beleza.....mas agora tá funcionando bem como eu queria.

 

por sinal optei também em utilizar o animate(), dando overflow:hidden na div geral ao invés do show("slide"), pois o show("slide" estava apresentando uma inconsistência muito grande.....as vezes funcionava bem...mas as vezes surtava...

 

Segue:

 

$(document).ready(function() {

  function id( el ){  
       return document.getElementById( el );  
} 


    var ab = id('geral').getElementsByTagName('div');  
       for( var i=0; i<ab.length; i++ )  
       { 



			$(ab[i]).mouseover(function(event){



		    var v_class = this.getAttribute("class"); 

               if ( v_class == "bloco" ) {   

	           var v_id = this.id

                  $("div#"+v_id+"-avanca").stop().animate({'left':'0'},300);

		    }

           });


		$(ab[i]).mouseout(function(event){


		    var v_class2 = this.getAttribute("class"); 

               if ( v_class2 == "lugares_saidas_bloco" ) {   

	           var v_id2 = this.id

                  $("div#"+v_id2+"-avanca").stop().animate({'left':'-400px'},500);


		    }


           });

       }  

 });

 

Mais uma vez muito obrigado pela ajuda !!! :D

 

Abraço