JavaScript - Incapaz de terminar un trabajo

   
Vista:
Imágen de perfil de Francisco

Incapaz de terminar un trabajo

Publicado por Francisco (6 intervenciones) el 30/11/2014 13:24:46
Buenos Dias/Tardes/Noches,


Me piden para un curso algo que soy incapaz de hacer, por mas que lo he intentado.



Modificar el ejemplo de abajo(tb esta adjunto el html) para que se muestre el URL de cada iframe justo encima de la ventana donde se visualiza su contenido.

- Los URLs irán numerados de forma que cada uno lleve delante el string URL_n, siendo n el índice en el array.

- Añadir ademas un cajetín para introducir un número y un botón que borre el URL con el índice introducido cuando se pulse el botón.

Se recomienda utilizar el método splice(…) para eliminar dicho elemento del array y después volver a repintar la lista de iFrames restantes.


Si hay algun valiente (y crack) que sea capaz de realizarlo, le estaria muy agradecido. Así aprenderia a realizarlo

Gracias!


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
 
<style>
 
iframe {
  padding:10px;
  border:5px solid pink;
  background-color:white;
  width:300px;
  height:350px;
}
 
#iframes {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
 
    -webkit-flex-wrap: wrap;
    flex-wrap:wrap;
}
 
#marco {
    background-color: pink;
    padding: 10px;
    margin: 10px;
    border: 3px solid black;
}
</style>
 
<script type="text/javascript" src="zepto.min.js" >
</script>
<script type="text/javascript">
$(function(){
  var urls = ["http://getbootstrap.com","http://vishub.org"];
 
  function mostrar(urls) {
    var i, iframes="";
    for (i=0;  i < urls.length;  ++i) {
      iframes += "<iframe src='" + urls[i] + "'></iframe>";
    }
    $('#iframes').html(iframes);
  };
 
  $("#boton").on('click', function(){
    urls.push($('#nuevo').val());
    mostrar(urls);
  });
 
  mostrar(urls);
});
</script>
</head>
 
<body>
<h3>Ejemplos de diseño responsivo</h3>
 
<input type="text" id="nuevo" value="Nuevo URL" />
<button type="button" id="boton"> Añadir </button>
<p>
<div  id='marco'><div id="iframes" /></div>
 
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Incapaz de terminar un trabajo

Publicado por xve (1596 intervenciones) el 30/11/2014 20:22:46
Hola Francisco, la primera opción de añadir la url encima del iframe, es sencilla... simplemente reemplaza la linea:
1
iframes += "<iframe src='" + urls[i] + "'></iframe>";
por
1
iframes += "<span>"+urls[i]+"<br><iframe src='" + urls[i] + "'></iframe></span>";

Sobre lo otro que comentas, la verdad es que no entiendo muy bien a que te refieres... nos podrias comentar con mas detalle?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Francisco

Incapaz de terminar un trabajo

Publicado por Francisco (6 intervenciones) el 01/12/2014 19:47:19
Hola xve, gracias por por ayudarme con la primera parte de mi trabajo.

Explicandote con mas detalle sobre el resto:

Los URLs irán numerados de forma que cada uno lleve delante el string URL_n, siendo n el índice en el array.

- Añadir ademas un cajetín para introducir un número y un botón que borre el URL con el índice introducido cuando se pulse el botón.

Se recomienda utilizar el método splice(…) para eliminar dicho elemento del array y después volver a repintar la lista de iFrames restantes.


Esta segunda parte, por lo que yo entiendo trata de enumerar los URLS(iframes) que hay y los que vayas añadiendo a
1
var urls = ["http://getbootstrap.com","http://vishub.org"];

y crear un cajetin para que puedas añadir el numero de URL y borrar el susudicho URL(iframe).


Algo que soy del todo incapaz de realizar, por mas que me esfuerzo.

Gracias por vuestro tiempo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Añadir o eliminar elementos de un array

Publicado por xve (1596 intervenciones) el 02/12/2014 08:38:02
Hola Francisco,

para añadir un elemento en el array es tan sencillo como:
1
urls.push("http://www.lawebdelprogramador.com");

Para eliminar un elemento puedes hacer:
1
delete urls[0];
el cual te dejara el primer elemento vació algo así:
1
[undefined,"http://vishub.org"];

o eliminarlo realmente:
1
urls.splice(0,1);
el cual te dejara el array sin el primer elemento:
1
["http://vishub.org"];

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FGlobal_Objects%2FArray%2Fsplice


Es esto exactamente lo que necesitas?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Francisco

Añadir o eliminar elementos de un array

Publicado por Francisco (6 intervenciones) el 03/12/2014 13:57:03
exacto, eso es lo que necesitaba, muchas gracias.
Aunque me falla alguna cosa, el trabajo esta perfectamente desarrollado.
Los problemas que encuentro son mas de no tener el nivel suficientete.
este trabajo que estoy haciendo es muy exigente para el poco tiempo que llevo con el curso, mas partiendo de la base de que es la primera vez que programo y solo llevo 6 semanas de curso.

gracias de nuevo y en breve voy a subir otro problema mas que tengo con otro trabajo más.

saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar