Develop Reference

Copying all HTML contents from one div to another using jQuery

This question may seem as a duplicate one, but I cannot seem to find a solution for my problem.
I am fetching content from external websites using the iFramely API. Which works for almost all requested websites.
However, if I try to fetch for example a post from Reddit and display this in a sort of custom made 'preview box' the requested iFrame get rendered correctly, so far so good.
When I try to copy the HTML content of the 'preview box' in order to append it to another div using jQuery. It does not copy all HTML elements.
Complete function
$('#btn-add-extern-snippet').click(function() {
let embed_preview_container = $('#embed-preview');
let embed_target_number = $('#embed-target-number');
let target_number = $(embed_target_number).val();
$('.embed-no-' + target_number).html($(embed_preview_container).html());
...
});
I've tried the jQuery functions:
clone $('.embed-no-' + target_number).html($(embed_preview_container).clone());
html $('.embed-no-' + target_number).html($(embed_preview_container).html());
contents $('.embed-no-' + target_number).html($(embed_preview_container).contents());
using append $('.embed-no-' + target_number).append($(embed_preview_container).html());
But all of these functions do not seem the copy the full "innerHTML" of the mentioned 'preview box' (see pictures below).
The copied HTML content inside the 'other div' with an empty body & head.
The actual content in side the 'preview box'.
I must note here that this only seems to be te case for Reddit related content. It works for example with Soundcloud/Spotify/Bandcamp.
PS. I am using jQuery version 3.3.1

Code sample below:-
$("#copyToDiv").append($("#copyFromDiv").html());
Thanks

you can try this.
$('#copy').click(function(){
$('#div2').html($('#div1').html());
});
#div1{
background:green;
}
#div2{
background:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='copy'>Copy</button>
<div id='div1'>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.
</p>
<div>
<h2>Lorem Ipsum</h2>
<p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles
</p>
</div>
<div id='div2'></div>

Alright, so I've found the solution/workaround to my own problem. Instead of copying the contents of the 'preview box', I stored the fetched HTML in a temporary variable, and appended the contents of this variable inside an 'another div' (this works).
Noteworthy, something strange that occurred to me while debugging is that the browser (in this case Chrome), does not render/display HTML correctly (see picture) (note the empty iFrame).
This is exactly what .html() copied. So long story short the following code worked for me:
// temporary variable for storing html.
let currentSnippet = '';
$('#btn-add-extern-snippet').click(function() {
let embed_preview_container = $('#embed-preview');
let embed_target_number = $('#embed-target-number');
let target_number = $(embed_target_number).val();
$('.embed-no-' + target_number).html(currentSnippet);
...
});

Show multiple divs on button click

Firstly i would say sorry because my english isn't so good but i will try my best.
So i will explain you my problem, i would like to show all my divs when the users click on a button. It's really complicate for me becase there is a lot of id. It's like a drop menu.
My code :
$("#content_caract_1").hide();
$("#content_caract_2").hide();
$("#content_caract_3").hide();
$("#content_caract_4").hide();
$('#btnd').click(function() { // Au clic sur un élément
$(".forbutton").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1').click(function() { // Au clic sur un élément
$("#content_caract_1").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis').click(function() { // Au clic sur un élément
$("#content_caract_1bis").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis2').click(function() { // Au clic sur un élément
$("#content_caract_1bis2").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis3').click(function() { // Au clic sur un élément
$("#content_caract_1bis3").toggle(400); // chache ou affiche a une vitesse constante (400)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnp" value="Tout plié">
<input type="button" id="btnd" value="Tout déplié">
<div id="caract1">
<h2>Etape 1 : Les enjeux et le parcours</h2>
</div>
<div class="forbutton">
<div id="content_caract_1">
<p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis
ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>
<div id="caract1bis">
1.1 Enjeux du programme Appolo</br>
</div>
<div id="content_caract_1bis">
<p>test</p>
</div>
<div id="caract1bis2">
1.2 Retour d'experience</br>
</div>
<div id="content_caract_1bis2">
<p>test</p>
</div>
<div id="caract1bis3">
1.3 Votre parcours
</div>
<div id="content_caract_1bis3">
<p>test</p>
</div>
</div>
</div>
There is 4 block like this, i would like to click on the button et show all the things inside the block.
Thanks to you had read me ! If you need more precision, im here to answer.
Thanks
Nico

You could assign a class to everything you need to be "toggable"
<div class="toggable">
one
</div>
<div class="toggable">
two
</div>
<button id="hide-stuff">
toggle
</button>
Then catch the all in one call like this
$('#hide-stuff').click(function() {
$('.toggable').toggle();
})

You are toggling your parent div on button click and hiding all its children on page load. Just toggle parent div on page load.
<script>
$(".forbutton").hide();
//$("#content_caract_1").hide();
//$("#content_caract_2").hide();
//$("#content_caract_3").hide();
//$("#content_caract_4").hide();
$('#btnd').click( function() { // Au clic sur un élément
$(".forbutton").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$('#caract1').click( function() { // Au clic sur un élément
$("#content_caract_1").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$('#caract1bis').click( function() { // Au clic sur un élément
$("#content_caract_1bis").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$('#caract1bis2').click( function() { // Au clic sur un élément
$("#content_caract_1bis2").toggle(400);// chache ou affiche a une vitesse constante (400)
});
$('#caract1bis3').click( function() { // Au clic sur un élément
$("#content_caract_1bis3").toggle(400);// chache ou affiche a une vitesse constante (400)
});

$("#content_caract_1").find("div").hide();
$('#btnp').click( function() { // Au clic sur un élément
$("#content_caract_1").find("div").show();// chache ou affiche a une vitesse constante (400)
});
$('#btnd').click( function() { // Au clic sur un élément
$("#content_caract_1").find("div").hide();// chache ou affiche a une vitesse constante (400)
});

jQuery - How to start a script when the scroll reaches the block?

I'm using a jQuery "homemade" script (that I found here) and I'de like to start this one when the scroll reaches the tab block (the blue and grey block at the end of the page).
Here is a live version
My HTML :
<section id="Block" class="container-fluid block">
<div class="row accordeon">
<div class="blue">
<ul class="nav nav-tabs" id="myTab">
<li class="active">1 - Déposez un projet appel d’offre et recevez en moyenne 10 devis</li>
<li>2 - Comparez les devis et négociez librement</li>
<li>3 - Choississez le prestataire que vous voulez, quand vous voulez</li>
<li>4 - Payez le prestataire par le moyen de votre choix</li>
<li>5 - Evaluez le prestataire sur Codeur.com</li>
</ul>
</div>
<div class="gray">
<div class="tab-content">
<div class="tab-pane active" id="deposer">
<h4 class="text-left">1 - Déposez un projet appel d’offre et recevez en moyenne 10 devis</h4>
<p>Sans même vous inscrire, vous publiez votre projet. Il correspond à un appel d'offres auquel les prestataires vont répondre. C'est gratuit et l'inscription se fait automatiquement et simultanément.</p>
<p>Une fois le projet publié sur Codeur, les prestataires concernés sont avertis. Vous n'avez rien d'autre à faire. Vous recevez rapidement des devis gratuits qui seront classés sous la description de votre projet.</p>
<p>En savoir plus sur le dépot de projet :</p>
<ul class="unstyled">
<li><a class="shake" href="#">Comment créer mon projet ?<i class="icon-arrow"></i></a></li>
<li><a class="shake" href="#">Comment bien décrire mon projet ?<i class="icon-arrow"></i></a></li>
</ul>
</div>
<div class="tab-pane" id="comparer">
<h4 class="text-left">2 - Comparez les devis et négociez librement</h4>
<p>Comparez les devis et discutez avec leurs prestataires par messagerie privée, par messagerie instantanée ou par téléphone (si vous le souhaitez). Vous pouvez aussi modifier votre projet et donner des précisions aux prestataires. Vous négociez librement et mettez les prestataires en concurrence pour obtenir les meilleurs prix et délais et les meilleures prestations.</p>
<p>En savoir plus sur :</p>
<ul class="unstyled">
<li><a class="shake" href="#">Comment inviter un prestataire à faire une offre sur mon projet ?<i class="icon-arrow"></i></a></li>
<li><a class="shake" href="#">Comment utiliser la messagerie ?<i class="icon-arrow"></i></a></li>
</ul>
</div>
<div class="tab-pane" id="choisir">
<h4 class="text-left">3 - Choississez le prestataire que vous voulez, quand vous voulez</h4>
<p>C'est vous qui décidez quand et si vous sélectionnez un prestataire. Vous sélectionnez la personne que vous voulez. C'est très simple, il vous suffit de le sélectionner à partir de la fiche de votre projet.</p>
<p>Choisir un prestataire sur Codeur vous permettra de l'évaluer à l'issue de sa prestation. Vous pouvez aussi demander, avant de commencer le projet, de signer un devis en bonne et due forme.</p>
<ul class="unstyled">
<li><a class="shake" href="#">Comment choisir un prestataire pour réaliser mon projet ?<i class="icon-arrow"></i></a></li>
<li><a class="shake" href="#">Pourquoi attribuer un projet sur Codeur.com est il plus sûr ?<i class="icon-arrow"></i></a></li>
</ul>
</div>
<div class="tab-pane" id="payer">
<h4>4 - Payez le prestataire par le moyen de votre choix</h4>
<p>C'est vous qui décidez comment vous réglez votre prestataire. Vous discutez avec lui du moyen de paiement qui vous convient à tous les deux. Pour plus de sécurité, vous pouvez bloquer le paiement sur Codeur Tasks en début de projet, et vous libérez le paiement par étape : à chaque étape réalisée correspond un paiement. Cela permet d'éviter la plupart des litiges.</p>
</div>
<div class="tab-pane" id="evaluer">
<h4>5 - Evaluez le prestataire sur Codeur.com</h4>
<p>Dès la fin du projet, vous pouvez évaluer le prestataire. Votre évaluation sera publiée sur le site et si elle est positive, aidera le prestataire à trouver de nouveaux projets. Le prestataire pourra également vous évaluer et ainsi renforcer votre réputation sur Codeur.com pour trouver un prestataire lors de la publication d'un prochain projet.</p>
</div>
</div>
</div>
</div>
</section>
My script for scrolling :
<!-- Show anim on Scroll -->
<script>
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.ShowMe').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},500);
}
});
});
});
</script>
My script for the tab animation :
<!-- Tabs -->
<script>
var tabChange = function () {
var tabs = $('.nav-tabs > li');
var active = tabs.filter('.active');
var next = active.next('li').length ? active.next('li').find('a') : tabs.filter(':first-child').find('a');
// Use the Bootsrap tab show method
next.tab('show');
};
// Tab Cycle function
var tabCycle = setInterval(tabChange, 5000);
// Tab click event handler
$('a').on('click', function (e) {
e.preventDefault();
// Stop the cycle
clearInterval(tabCycle);
// Show the clicked tabs associated tab-pane
$(this).tab('show');
// Start the cycle again in a predefined amount of time
setTimeout(function () {
//tabCycle = setInterval(tabChange, 5000);
}, 15000);
});
</script>

I think first off all you need to check if the object is within your screen after you scroll. If you reach the object then check with an if statement if the object is visible and then you should execute your code.
Look at this DEMO and see the whole JS function.
JS
$(window).scroll(function() {
if (checkVisible($('#tester'))) {
alert("Visible!!! Paste your code in this if function!")
} else {
// do nothing
}
});
In your case would that be:
$(window).scroll(function() {
if (checkVisible($('#tester'))) {
var tabChange = function () {
var tabs = $('.nav-tabs > li');
var active = tabs.filter('.active');
var next = active.next('li').length ? active.next('li').find('a') : tabs.filter(':first-child').find('a');
// Use the Bootsrap tab show method
next.tab('show');
};
// Tab Cycle function
var tabCycle = setInterval(tabChange, 5000);
// Tab click event handler
$('a').on('click', function (e) {
e.preventDefault();
// Stop the cycle
clearInterval(tabCycle);
// Show the clicked tabs associated tab-pane
$(this).tab('show');
// Start the cycle again in a predefined amount of time
setTimeout(function () {
//tabCycle = setInterval(tabChange, 5000);
}, 15000);
});
} else {
// do nothing
}
});
Hope this helps!
---EDIT:
To solve that the function is called multiple times you need to unbind the scroll event.
Add this to your code: $(window).off('scroll');
$(window).on('scroll', function() {
if (checkVisible($('#Block'))) {
$(window).off('scroll'); # add this
var tabChange = function () {

how to retrieve a value by clicking and retrieve the id?

I want to make a function that allows me by clicking on the square with the id of colors, in return me id = " retours_couleurs " the sentence containing the colors contained in the table in php files, sorry for my english i'm french
this is my html code
<fieldset class="appel">
<code>
Un clic simple sur le carré bleu appelle le contenu du fichier couleurs.php, en transmettant en paramètre l'ID de ce carré. La réponse du fichier appelé devra s'afficher dans l'espace prévu à cet effet (id="retour_couleurs").
</code>
</fieldset>
<br />
<fieldset class="appel">
<div class="carre-couleurs">
<div class="carre" id="jaune"></div>
<div class="carre" id="rouge"></div>
<div class="carre" id="bleu"></div>
<div class="carre" id="vert"></div>
<div class="clear"></div>
</div>
<br />
<br />
<fieldset class="retour">
<legend>Contenu du fichier</legend>
<div id="retour_couleurs"></div>
</fieldset>
</fieldset>
this is my ajax function
function appel_contenue_couleur(){
var cM = new XMLHttpRequest();
cM.open("POST","fichiers/couleurs.php",true);
cM.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var couleur = this.id;
var retour_couleurs = document.getElementById('retour_couleurs');
cM.send("retour= "+couleur);
cM.onreadystatechange = function (){
if (cM.readyState == 4 && cM.status == 200)
{
retour_couleurs.innerHTML=cM.responseText;
}
}}
and this is my php code
$_couleurs = array("jaune", "rouge", "bleu", "vert");
$_citations = array(
"L’herbe est toujours plus verte ailleurs",
"La terre est bleue comme une orange",
"Le ciel est un oeuf, la terre en est le jaune",
"Mieux vaut rester rouge cinq minutes que jaune toute la vie",
"C'était un moustique snob. Il ne buvait que du sang bleu"
);
$couleurs = $_POST['retour'];
if (in_array($couleurs,$_couleurs)){
for ($i=0;$i<count($_citations);$i++){
if (in_array ($couleurs,$_citations[$i])){
echo $_citations[$i];
}
}
}

If I understood your problem correctly, you're not getting any output from the AJAX request. That's probably because you're using the wrong PHP function to check if a sentence contains a certain word.
Try with this one:
if (stripos($_citations[$i], $couleurs) !== false) {
echo $_citations[$i];
}
I used stripos because you probably don't want to make a case sensitive check.

Complete code:
Javascript:
function appel_contenue_couleur(obj){
var cM = new XMLHttpRequest();
cM.open("POST","colors.php",true);
cM.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var couleur = obj.id;
var retour_couleurs = document.getElementById('retour_couleurs');
cM.send("retour= "+couleur);
cM.onreadystatechange = function (){
if (cM.readyState == 4 && cM.status == 200)
{
retour_couleurs.innerHTML=cM.responseText;
}
}}
HTML:
<div class="carre-couleurs">
<div class="carre" id="jaune" onclick="appel_contenue_couleur(this);">1111111</div>
<div class="carre" id="rouge" onclick="appel_contenue_couleur(this);">222222222</div>
<div class="carre" id="bleu" onclick="appel_contenue_couleur(this);">33333333</div>
<div class="carre" id="vert" onclick="appel_contenue_couleur(this);">444444444444</div>
<div class="clear"></div>
</div>
PHP:
$colors = array("jaune", "rouge", "bleu", "vert");
$citations = array(
"L’herbe est toujours plus verte ailleurs",
"La terre est bleue comme une orange",
"Le ciel est un oeuf, la terre en est le jaune",
"Mieux vaut rester rouge cinq minutes que jaune toute la vie",
"C'était un moustique snob. Il ne buvait que du sang bleu"
);
$color = trim($_POST['retour']);
//echo $color;
if (in_array($color,$colors)){
for($i=0;$i<count($citations);$i++) {
if(stripos($citations[$i],$color)!==false) {
echo $citations[$i].'<br>';
}
}
}
It is working, 100%, it's tested. Just change links, if needed.

how to add a caption to a jquery gallery

I'm using a hand made jquery gallery based on this tutorial : http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html
I've made a plugin of this gallery to use it several time in a same page.
From here, no real problem. My question is, how to add a text caption with this plugin. I've tried lots of things without finding a solution.
Here is the jquery gallery code :
jQuery(function($){
// définition du plugin
$.fn.ben_galerie = function(options) {
// définition des paramètres par défaut
var defaults = {
activeClass: "active",
activeTitle: "Photo en cours de visualisation",
loaderTitle: "Chargement en cours",
loaderImage: "/ben/images/loader.gif"
};
// mélange des paramètres fournis et des paramètres par défaut
var settings = $.extend(defaults, options);
function initGallery(ul)
{
var thumbLinks = $(this).find("a"), //référence toutes les vignettes cliquables dans un tableau
firstThumbLink = thumbLinks.eq(0), //et extrait le premier élément
//listeLinks = $(this).find("li"),
highlight = function(elt){
thumbLinks.removeClass(settings.activeClass).removeAttr("title"); //supression de l'attribut title
elt.addClass(settings.activeClass).attr("title",settings.activeTitle); //ajout du nouvel attribut title pour l'image en cours de visualisation
},
loader = $(document.createElement("img")).attr({ //chargement des parametres du loader
alt: settings.loaderTitle,
title: settings.loaderTitle,
src: settings.loaderImage
});
highlight(firstThumbLink);
var imgViewer = $(document.createElement("p")).attr("class","viewer") //creation d'un paragraphe qui fera office de récepteur pour les images grand format
.append(
$(document.createElement("img")).attr({ //extraire le contenu de l'attribut href de la première vignette photo
alt: "",
src: firstThumbLink.attr("href") //et le renseigner en tant que valeur de l'attribut src d'un nouvel objet image créé
})
);
$(this).after(imgViewer);
var bigPic = imgViewer.children("img");
thumbLinks //fonction qui sera déclenchée au clic sur chaque élément ciblé
.click(function(e){
e.preventDefault(); //annule l'événement par défaut lors du clic sur le lien
var $this = $(this), //$(this) = vignette cliquée et stocké dans $this pour ne pas parcourir pls fois le DOM
target = $this.attr("href");
if (bigPic.attr("src") == target) return;
highlight($this);
imgViewer.html(loader);
bigPic
.load(function(){
imgViewer.html($(this).fadeIn(250));
alert(caption);
})
.attr("src",target);
});
}
$(this).each(initGallery);
// interface fluide
return $(this);
};
// utilisation du plugin
$(document).ready(function() {
$(".thumbs").ben_galerie({
activeClass: "ssg_active",
activeTitle: "ben galerie : Photo en cours de visualisation",
loaderTitle: "ben galerie : Chargement en cours",
loaderImage: "images/loader.gif"
});
});
});
And here is a part of the html associated :
<div id="bloc_page">
<div id="contenu">
<div class="item">
<div class="galerie">
<div class="thumbs">
<div class="mini">
<li> <img alt="Description illus 1" src="images/galerie/illus/small/mini1.jpg" /></li>
<li> <img alt="Description illus 2" src="images/galerie/illus/small/mini2.jpg" /></li>
</div></div></div></div></div>
I'm thinking of using the title or the alt attribute, but I don't known how :/
Any tips or ideas will be fantastic.
Thanks guys !

you should use the alt attribute for the caption put it into a variable and call that variable in a caption element from you gallery. for example something like this
caption = $('img').attr("alt").text();
$('.whatever you call your caption element').text(caption);