HTML+Javascript+CSS3

amaral3d · 21 de novembro de 2012

Ola Pessoal,

Estou fazendo uma pagina em HTML, utilizando AJAX, Javascrit, CSS3 e outros.

Mas esses 3 sao o basico dentro do html.

Bom criei um Menu de botões com CSS3 e HTML, toda alteracao FICA NA MESMA Pagina "index.html".

porém quando clico em um botao 'x' ele escreve logo abaixo do botao o texto...porém se clico no botao 'y', o texto deste sobreescreve em cima ou coloca abaixo do texto anterior. Observação os botões estão na

<div id="info_1">, ja todo tipo de texto ou imagem vai parar na

GOSTARIA DE SABER UMA FUNÇÃO EM JAVASCRIPT SIMPLES ou QUALQUER OUTRA FORMA SIMPLES, PARA LIMPAR o conteudo da div anterior e colocar div -- "<div id="info_02">" --ou seja, sempre que clicar em um botao e requisitar a apresentacao dessa informacao no mesmo html "index.html"


<html>
<head>
    <title>Currículum Vitae</title>
    <script src="javascript/Javascript.js"> </script>
    <link rel="stylesheet" href="css3/style.css" type="text/css" media="all">
</head>
<body>
<div class="example">
    <ul class="nav">
        <li><a href="HTML5_index.html">Home</a></li>                        <!--  OK  -->
        <li><a href="HTML5_CurriculoFinal.html">Currículo</a></li>         <!-- MEXENDOOOOOOOOOOOOOOOOOOOOO   -->
         <li><a href="#">Histórico de Graduação</a> <!-- OK -->
            <ul class="subs">
                <li><a href="#" onclick="output_html('HistoricoGradXML.xml','TodaDisciplina.xsl');"><span></span>Todas Disciplinas</a></li>       <!-- OK -->
                <li><a href="#" onclick="output_html('HistoricoGradXML.xml','DisciplinaMaisImportante.xsl');"><span></span>Mais interessantes</a></li>      <!-- OK -->
                <li><a href="#" onclick="output_html('HistoricoGradXML.xml','DisciplinaMenosImportante.xsl');"><span></span>Menos interessantes</a></li>     <!-- OK -->
            </ul>
        </li>             
        <li><a href="#" onclick="loadXMLAJAXDOC('Curriculo_XML.xml ','1');">Escolaridade</a></li>            <!--  OK  -->
		<li><a href="#" onclick="loadXMLAJAXTXT('TXTAJAX_dadospessoais.txt');">Dados Pessoais</a></li>       <!-- OK -->
	    <li><a href="#">Idiomas</a></li>  <!-- xxxxxxxxxxxx -->
        <li><a href="#" onclick="output_html('Curriculo_XML.xml','ExperienciaProfissional.xsl');">Experiência Profissional</a></li>  <!-- OK  -->
		<li><a href="#">Extra-Curriculares</a>     <!-- OK -->
            <ul class="subs">
                <li><a href="#" onclick="loadXMLAJAXDOC('Curriculo_XML.xml',2);"><span></span>Mini-Curso</a></li>       <!-- OK -->
                <li><a href="#" onclick="loadXMLAJAXDOC('Curriculo_XML.xml',3);"><span></span>Curso</a></li>      <!-- OK -->
            </ul>		
		</li>  
        <li><a href="#" >Questionário</a> </li>        
    </ul>	
</div>

  <div class="dados" id="dados1" ></div>   
[b]'dados' é a classe do css3   e   'dados1' é o 'id' da funcao AJAX ou JavaScript que uso nos botões - para colocar depois nessa div [/b]

[b]funcoes que uso sao os mesmos do site www.w3schools.com[/b]
</body>
</html>

Obrigado pela Ajuda

Amaral3D

DiF · 21 de novembro de 2012

Não entendi muita coisa..

mas pelo que entendi você quer fazer requisiçoes ajax de conteudo dinâmico é isso?

POderia por gentileza postar seu código que faz a requisição ajax?

amaral3d · 21 de novembro de 2012

REEDITADO....

espero ter esclarecido para me ajudar..........abraço

Não entendi muita coisa..
mas pelo que entendi você quer fazer requisiçoes ajax de conteudo dinâmico é isso?

POderia por gentileza postar seu código que faz a requisição ajax?

DiF · 21 de novembro de 2012

Bom, seu código está sujo demais.. e alem disso faltou o mais importante.. o conteudo do javascript.js ( que o que controla suas requisições ajax) note que provavelmente deve estar usando javascript puro. seria melhor utilizar o jquery para requisiçoes ajax.

recomendo que limpe ele e use jquery com a função load()

exemplo de uso:


<script   src="jquery-1.8.1.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function(){
    var conteudo = $('#insere');
    $('#menu a').click(function(event){  
    event.preventDefault();
    switch(this.id){  
        case 'l1':  
            conteudo.load('arquivo.html');  
            break;  
        case 'l2':   
            conteudo.load('arquivo2.hml');  
            break;  

    }  
});

</script>

html:


 <div id="menu">
   <a id="l1" href="#">LInk 1</a>
   <a id="l2" href="#">LInk 2</a>
   <div id="insere"></div>
</div>

como pode ver a função load() tem como objetivo inserir o conteudo de um arquivo em algum lugar.

amaral3d · 21 de novembro de 2012

Valeu

Vou conferir..........

abrax

Achei uma solução para meu problema !!!!

Agora as informações sempre começam no topo da página.


    // Removing all children from an element
       var element = document.getElementById("dados1");
       while (element.firstChild)
       {
         element.removeChild(element.firstChild);
       }

... Porém o que acontece agora é só um deslocamento... da DIV anterior com a atual

DiF · 21 de novembro de 2012

Não tem como lhe ajudar se não postar o código que controla as requisições.

obs: não poste o html. apenas o JS

Você está usando o js puro ou a dica que passei com a facilidade com jquery?

amaral3d · 22 de novembro de 2012

Sua dica é bem mais limpa...mas entendo pouco do funcionamento do jquery e ate do javascript.

E como tempo ta curto...para entrega do trabalhooo...estou me atentando a que ja conheco....

bom segue codigo .js


// Funcao que Carrega XML e XSL
	function loadXMLDoc(input)
	{
		if (window.XMLHttpRequest)
		  {
		  xhttp=new XMLHttpRequest();
		  }else{
				xhttp=new ActiveXObject("Microsoft.XMLHTTP");
			   }
		xhttp.open("GET",input,false);
		xhttp.send("");
		return xhttp.responseXML;
	}
//--------------------------------------------------------------------------
	function output_html(input_xml,input_xsl)
	{

	// Removing all children from an element
       var element = document.getElementById("dados1");
       while (element.firstChild) 
	   {
         element.removeChild(element.firstChild);
       }

		xml=loadXMLDoc(input_xml);
		xsl=loadXMLDoc(input_xsl);
		// code for IE
		if (window.ActiveXObject)
		  {
		  ex=xml.transformNode(xsl);
		  document.getElementById("dados1").innerHTML=ex;
		  }else{// code for Mozilla, Firefox, Opera, etc.
				 if (document.implementation && document.implementation.createDocument)
				   {
					 xsltProcessor=new XSLTProcessor();
					 xsltProcessor.importStylesheet(xsl);
					 resultDocument = xsltProcessor.transformToFragment(xml,document);
					 document.getElementById("dados1").appendChild(resultDocument);
				   }
			  }
	}

Unica coisa que acontece agora é que a div anterior agora limpa continua, ja as informações atuais ficam no topo como queria, q acontece é so uma pequeno deslocamento entre as divs atual e anterior - porque uso css3 para criar um campo com bordas para por as informações...assim essas bordas sobrepoem.