Comunidad de diseño web y desarrollo en internet online

Ir a ancla y llamar a un iframe

Foros de discusión > CSS y HTML

Citar            
MensajeEscrito el 06 Feb 2014 07:07 pm
Hola a todos,,, he esado buscando la solucion del siguiente problema, a lo mejor alguien conoce un enlace o alguien que me pueda ayudar.

En una hoja html tengo un ancla que me lleva a una parte de esa misma hoja y es donde tengo un iframe, todo bien hasta aqui,,, pero lo que no he logrado hacer es que en ese click que me lleva al ancla tambien al mismo tiempo llame a htm y lo muestre en el iframe. Me explico?

De antemano Gracias por su valiosa ayuda.

Por cer

17 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 06 Feb 2014 08:01 pm

Código HTML :

archivo.html#ancla

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 06 Feb 2014 08:16 pm
Gracias nasho por responder,,, pero eso no es lo que necesito,,, quizas no me exolique bien.

Tengo la hoja, prueba.htm, si? dentro de prueba.htm tengo un "ancla", y a la altura donde esta "ancla" tengo un iframe. (claro, iframe y ancla estan dentro de prueba.htm).

Lo que necesito que al momento de dar click me lleve al "ancla" y al mismo tiempo cargar prueba2.htm en el iframe.

una vez mas Gracias,,,

Por cer

17 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 06 Feb 2014 10:02 pm
mmm podría ser con javascript... usando jquery sería algo como

Código Javascript :

$('#mi_boton2).click(function(){
   $('#el_frame').attr('src','prueba2.html');
   var $ancla = $('#ancla').offset();
   $('html, body').scrollTop($ancla.top);
});

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 06 Feb 2014 10:51 pm
Hola, he colocado el script en el <head> de esta manera.

<script>
$('#mi_boton2).click(function(){
$('#ventana').attr('src','novedades.htm');
var $ancla = $('#punto').offset();
$('html, body').scrollTop($ancla.top);
});
</script>

Pero no se como llamarlos desde el < aref.......> que tengo en el body.

Podrias seguir iluminadome por favor?

Por cer

17 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 07 Feb 2014 03:39 pm
El botón puede ser <a>, <button>, o lo que quieras...

En el código que puse, ese botón tiene un id "mi_boton2"
*por cierto me falto cerrar la comilla $('#mi_boton2')

El mismo código le dice a ese botó que cuando se clickee haga algo... no es necesario agregar nada en href.


*No estoy seguro que cargue el iframe solo cambiando el atributo src.. no he echo pruebas

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 07 Feb 2014 04:55 pm
Cer

¿Agregaste jQuery a tu proyecto? si es así, no necesitas realmente href, aunque es bastante recomendable que uses preventDefault.

Código Javascript :

<script>
$('#mi_boton2).click(function(event){
event.preventDefault();
$('#ventana').attr('src','novedades.htm');
var $ancla = $('#punto').offset();
$('html, body').scrollTop($ancla.top);
});
</script>

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Bastard Operators From Hell

Envíale un mensaje privado    

Webdesigner & Developer, en mis ratos libres bebo café por litros.

firefox
Citar            
MensajeEscrito el 07 Feb 2014 06:08 pm
No pues ahora si ya tengo mas dudas,,, mira asi es como tengo la hoja, y no me esta funcionanado. Garcias por tu ayuda.

<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
$('#mi_boton2').click(function(){
$('#ventana').attr('src','novedades.htm');
var $ancla = $('#punto').offset();
$('html, body').scrollTop($ancla.top);
});
</script>
</head>

<body>
<p><a href="">sdf gsdfg sdfgds</a><br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
<a name="punto">AQUI ES EL PUNTO<br /><br>
<iframe name="ventana" src="bienvenida.htm" width="710" height="401" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0"></iframe><br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br />
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds<br /><br>
sdf gsdfg sdfgds</p>
</body>
</html>

Por cer

17 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 07 Feb 2014 06:13 pm
Debes agregar

Código HTML :

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

antes de insertar <script>.....

mi_boton2, punto y ventana son id's, no name's

no cerraste la etiqueta del link de punto

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 07 Feb 2014 06:15 pm
y usa

[html]
tu código html.. y al final
[/html]

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado    

Web Developer

chrome
Citar            
MensajeEscrito el 07 Feb 2014 06:37 pm
Ya hice lo que me dijiste, pero aun no funciona,,, aqui te dejo los cambios.

Reemplazo las etiquetas
<html></html> por

Código HTML :

 (esto me parece bien raro, pero si tu dices que es asi,,, yo lo hago)

Ya agrege en el <head>:
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

El enlace lo tengo asi:
<a href="" id="mi_boton2">sdf gsdfg sdfgds</a>

ancla esta asi:
<a id="punto">AQUI ES EL PUNTO</a>

iframe quedo asi:
<iframe id="ventana" src="bienvenida.htm" width="710" height="401" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0"></iframe>					

				

					
			
				
Por cer

				

				

										
17 de clabLevel

					

						

						

											

				

				
   

				

					Envíale un mensaje privado      				

					
		

		

			
					
				
			
			
				

					
					
				

				

									

				chrome  
					
		

		
	

	




	

		Citar               	

	

		MensajeEscrito el 07 Feb 2014 06:39 pm
	

	

		
		

			
				

					

												jaja nooo... los corchetes [] cuando publiques código acá

Ve en mis respuestas, está dentro de una caja					

				

					
			
				
Por nasho

				
Claber

				

										
908 de clabLevel

					

						1 tutorial

						

											

				

				
Genero:Masculino   

				

					Envíale un mensaje privado      				

					
		

		

			
					
				
			
			
				

					Web Developer
					
				

				

									

				chrome  
					
		

		
	

	




	

		Citar               	

	

		MensajeEscrito el 07 Feb 2014 06:46 pm
	

	

		
		

			
				

					

												O.K.,,, si ya los pose como me indicaste,,, hice copy-paste y aun asi no funciona. Sorry.					

				

					
			
				
Por cer

				

				

										
17 de clabLevel

					

						

						

											

				

				
   

				

					Envíale un mensaje privado      				

					
		

		

			
					
				
			
			
				

					
					
				

				

									

				chrome  
					
		

		
	

	




	

		Citar               	

	

		MensajeEscrito el 07 Feb 2014 07:00 pm
	

	

		
		

			
				

					

												mmm a mi si me funcionó

http://jsfiddle.net/ge2HY/					

				

					
			
				
Por nasho

				
Claber

				

										
908 de clabLevel

					

						1 tutorial

						

											

				

				
Genero:Masculino   

				

					Envíale un mensaje privado      				

					
		

		

			
					
				
			
			
				

					Web Developer
					
				

				

									

				chrome  
					
		

		
	

	




	

		Citar               	

	

		MensajeEscrito el 07 Feb 2014 07:18 pm
	

	

		
		

			
				

					

												Muchas Gracias!!! ya funciono,,, lo unico que hice para no tener mas errores fue copiar el codigo fuente fuente del resultado. si funciona. Una vez mas Gracias Nasho!  ^^					

				

					
			
				
Por cer

				

				

										
17 de clabLevel

					

						

						

											

				

				
   

				

					Envíale un mensaje privado      				

					
		

		

			
					
				
			
			
				

					
					
				

				

									

				chrome  
					
		

		
	

	







	

	Foros de discusión > CSS y HTML







	

		
    Página 1 de 1

	

	








	

			

	
	
	
	
	
	
	
	



	

		

			 
		

		

					

		

			Cristalab BabyBlue v4 + V4 © 2011 Cristalab

			Powered by ClabEngines v4, HTML5, love and ponies.