Change content

Par NdinhC, il y a 10 ans

Javascript

Bonjour, déjà, désolé pour mon manque de sémantique adaptée.. je "code" à l'instinct malheureusement, je n'ai pas le temps de tout apprendre.

Je souhaite solliciter votre aide pour un petit script, je veux modifier la taille et le style d'une iframe quand je clique sur un bouton. :

<iframe id="..." src="..." XXX="..." width="..." height="..." style="..."></iframe>

Je sais que je peux ajouter par exemple du contenue à mon src="..." comme ça :

$('#monbouton').on('click', function (ev) { $('#X ou Y')[0].src += 'contenu à ajouter';

J'imagine que je peux donc ajouter un nouveau style au style comme ça ? :

$('#monbouton').on('click', function (ev) { $('#X ou Y')[0].style += 'nouveau style';

et j'aimerai savoir comment je peux ajouter directement un élément dans l'iframe et pas juste modifier une valeur.
Je pensais donc à ça :

$('#monbouton').on('click', function (ev) { $('#X ou Y')[0].Nouvel_Element += 'sa valeur';

Mon code est-il correct, adapté ? Et dans ce cas la, comment puis-je completement effacer le contenu du src=".." et pas juste ajouter du contenu à la fin ?
Merci beaucoup :)

13 réponses

kwik, il y a 10 ans

Salut

Pour changer un attribut, si je me trompe pas il faut utiliser la fonction attr par exemple pour mon modifier le href d'un lien un truc du genre :

$('#ton-element').attr('href', 'ton-lien');

Je raconte peut être des conneries, si c'est le cas je m'en escuse, je debute dans le "dev web". Je ne pas plus t'aider, désolé, tu devrais attendre une réponse d'une personne qui en est compétente

Defy, il y a 10 ans

pour le js tu utilise jquery alors pourquoi ne pas utiliser tous jQuery?

pour le href @kwik a raison

tu fait par exemple

$('#monbouton').on('click', function (ev) { $('#X ou Y')[0].style += 'nouveau style';

alors que tu peut faire

$('#monbouton').on('click', function (ev) { $('#X ou Y')[0].css({ heigth: 30 + "px", widht: 30 + "px" //etc.... });

pour l'ajout d'element tu peut utiliser le append ou appendTo
un truc dans le genre

var monElem = $('<div></div>'); var img = 'lien/de/mo,/img': monEleme.text('si tu veut lui rajouter un texte'); monElem.attr('src', img); $('#monbouton').on('click', function (ev) { $('#X ou Y')[0].append(monElem); }
NdinhC, il y a 10 ans

Merci à vous deux, c'est parfaitement ce que je recherchais, et Defy, belle anticipation, je venais d'y penser et j'ai vu ta réponse au moment de créer un nouveau sujet sur la manipulation de style. Grand merci ! :)

Defy, il y a 10 ans

De rien on est la pour ca ;-)

NdinhC, il y a 10 ans

Je n'arrive pas à faire fonctionner le script, il doit me manquer une base flagrante mais que je ne vois pas.. voici mon script :

<script> // Video theatre_in : quand theatre_in est pressé, change la css : $('#theatre_in').on('click', function (ev) { $('#video')[0].css({ height: 30 + "100%"; width: 30 + "80%"; text-align: 30 + "left"; // Le chat est aussi affecté par une nouvelle css $('#chat')[0].css({ height: 30 + "100%"; width: 30 + "20%"; float: 30 + "right"; }); // Video theatre_out : quand theatre_out est pressé, remet la css initiale $('#theatre_out').on('click', function (ev) { $('#video')[0].css({ height: 30 + "470px"; width: 30 + "839px"; text-align: 30 + "center"; // Le chat reprend ses dimmensions initiales $('#chat')[0].css({ height: 30 + "470px"; width: 30 + "300px"; float: 30 + ""; //comment supprimer le float ? }); // Overlay quand theatre_in est pressé : affiche le bouton theatre_out $( "#theatre_in" ).click(function() { $( ".overlay" ).addClass ('overlay-open'); }); // Overlay quand theatre_out est pressé : ce dernier disparait $( "#theatre_out" ).click(function() { $( ".overlay" ).removeClass ( 'overlay-open' ); }); </script>

Et coté HTML :

<div class="livevideo"> <iframe id="video" src="osef" allowfullscreen width="839" height="470" style="text-align: center;border:none;"></iframe> <iframe id="chat" src="osef" scrolling="no" style="border:none;height:470px;width:300px;"></iframe> </div> <div class="chatlink"> <a href="#" class="button hvr-radial-in" id="theatre_in">Mode Théâtre</a> </div> <div class="overlay overlay-data"> <img id="theatre_out" src="img/exittheatremode.png" class="hvr-shrink overlay-close margin1" alt="sortir-mode-theatre"> </div>

Trouverez-vous les erreurs ?

Defy, il y a 10 ans

c'est quoi les 30 que tu as rajouté un peut partous? height: 30 + "100%";

NdinhC, il y a 10 ans

Salut Defy, c'etait comme ca dans ton code, j'ai pas osé y toucher du coup ^^ Quelle est la syntaxe exacte ?

Defy, il y a 10 ans

sans le 30 ^^ height: "100%";

NdinhC, il y a 10 ans

Ca ne fonctionne malheureusement toujours pas :/ Voici le script, il doit manquer quelque chose devant le height: + "100%"; je ne sais pas, ou bien après, dedans ... voici le script :

<script> // Video theatre_in : quand theatre_in est pressé, change la css : $('#theatre_in').on('click', function (ev) { $('#video')[0].css({ height: + "100%"; width: + "80%"; text-align: + "left"; // Le chat est aussi affecté par une nouvelle css $('#chat')[0].css({ height: + "100%"; width: + "20%"; float: + "right"; }); // Video theatre_out : quand theatre_out est pressé, remet la css initiale $('#theatre_out').on('click', function (ev) { $('#video')[0].css({ height: + "470px" width: + "839px" text-align: + "center" // Le chat reprend ses dimmensions initiales $('#chat')[0].css({ height: + "470px" width: + "300px" float: + "" //comment supprimer le float ? }); // Overlay quand theatre_in est pressé : affiche le bouton theatre_out $( "#theatre_in" ).click(function() { $( ".overlay" ).addClass ('overlay-open'); }); // Overlay quand theatre_out est pressé : ce dernier disparait $( "#theatre_out" ).click(function() { $( ".overlay" ).removeClass ( 'overlay-open' ); }); </script>

Merci d'avance à celui ou celle qui me trouvera la solution :)

Defy, il y a 10 ans

non mais faut enlever le plus partous, je me suis mal exprimé dsl.

height: "100%";
NdinhC, il y a 10 ans

Ça ne fonctionne toujours pas :/ Je suis désolé

Defy, il y a 10 ans

pourquoi tu as un 0 devant ton $(#video) ?

NdinhC, il y a 10 ans

Je suis parti du code que tu m'a donné pour faire le script et il était dedans. Peux-tu poster directement la constructio du script avec la syntaxe exacte ?