Develop Reference

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 () {

Bad design to my template type collection twig

i have an entity mapped to other entity entreprise ,with js and jquery i have the chance finally to validate the two forms in one type with data-prototype name
but i can't have an ergonoy form to my entity entreprise how can i fix the problem
<div class="c col-md-4 col-xs-4">
<div class="form-group">
{{ form_rest(form,{ 'attr': {'class': 'form-control'} })}}
</div>
</div>
</form>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{{ asset('bundles/GestionCompte/js/bootstrap.min.css') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
// On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
var $container = $('div#gestion_comptebundle_profil_entreprises');
// On ajoute un lien pour ajouter une nouvelle catégorie
var $lienAjout = $('Ajouter un agent entreprise');
$container.append($lienAjout);
// On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
$lienAjout.click(function(e) {
ajouterEntreprise($container);
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
// On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement
var index = $container.find(':input').length;
// On ajoute un premier champ directement s'il n'en existe pas déjà un (cas d'un nouvel article par exemple).
if (index == 0) {
ajouterEntreprise($container);
} else {
// Pour chaque entreprise déjà existante, on ajoute un lien de suppression
$container.children('div').each(function() {
ajouterLienSuppression($(this));
});
}
// La fonction qui ajoute un formulaire entreprise
function ajouterEntreprise($container) {
// Dans le contenu de l'attribut « data-prototype », on remplace :
// - le texte "__name__" qu'il contient par le numéro du champ
var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'Agent n°' + (index+1)).replace(/__name__/g, index));
// On ajoute au prototype un lien pour pouvoir supprimer la catégorie
ajouterLienSuppression($prototype);
// On ajoute le prototype modifié à la fin de la balise <div>
$container.append($prototype);
// Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
index++;
}
// La fonction qui ajoute un lien de suppression d'une catégorie
function ajouterLienSuppression($prototype) {
// Création du lien
$lienSuppression = $('Supprimer');
// Ajout du lien
$prototype.append($lienSuppression);
// Ajout du listener sur le clic du lien
$lienSuppression.click(function(e) {
$prototype.remove();
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
}
});
</script>
<!-- imbriquation du formulaire logistique-->
<script type="text/javascript">
$(document).ready(function() {
// On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
var $container = $('div#gestion_comptebundle_profil_logistiques');
// On ajoute un lien pour ajouter une nouvelle catégorie
var $lienAjout = $('Ajouter un agent logistique');
$container.append($lienAjout);
// On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
$lienAjout.click(function(e) {
ajouterLogistique($container);
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
// On définit un compteur unique pour nommer les champs qu'on va ajouter dynamiquement
var index = $container.find(':input').length;
// On ajoute un premier champ directement s'il n'en existe pas déjà un (cas d'un nouvel article par exemple).
if (index == 0) {
ajouterLogistique($container);
} else {
// Pour chaque entreprise déjà existante, on ajoute un lien de suppression
$container.children('div').each(function() {
ajouterLienSuppression($(this));
});
}
// La fonction qui ajoute un formulaire Logistique
function ajouterLogistique($container) {
// Dans le contenu de l'attribut « data-prototype », on remplace :
// - le texte "__name__" qu'il contient par le numéro du champ
var $prototype = $($container.attr('data-prototype').replace(/__name__label__/g, 'Agent n°' + (index+1)).replace(/__name__/g, index));
// On ajoute au prototype un lien pour pouvoir supprimer la logistique
ajouterLienSuppression($prototype);
// On ajoute le prototype modifié à la fin de la balise <div>
$container.append($prototype);
// Enfin, on incrémente le compteur pour que le prochain ajout se fasse avec un autre numéro
index++;
}
// La fonction qui ajoute un lien de suppression d'une logistique
function ajouterLienSuppression($prototype) {
// Création du lien
$lienSuppression = $('Supprimer');
// Ajout du lien
$prototype.append($lienSuppression);
// Ajout du listener sur le clic du lien
$lienSuppression.click(function(e) {
$prototype.remove();
e.preventDefault(); // évite qu'un # apparaisse dans l'URL
return false;
});
}
});
</script>
</body>
</html>

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);

use id attribute as reference or variable for tooltip

I am currently using this code .
However the text I wish to display must be in one line, and if there is a apostrophe ( ' ) in the text, it will not work anymore .
imgover(this, 'Text to display')
Is there a way to remplace the second variable of onmouseover by an id of a div so that it will display everything in the div please ?
Here is an example of the div :
<div id ="text1" >
<em><img class="floatLeft" src="images/F9979.jpg" alt="" />
TITRE DU FILM : Man of Steel
<br />
<br />
RESUME :
Film fantastique américain réalisé par Zack Snyder avec Henry Cavill, Amy Adams, Diane Lane
<br />
<br />
DUREE : 2H23
<br />
Un petit garçon découvre qu'il possède des pouvoirs surnaturels et qu'il n'est pas né sur la Terre. Plus tard, il s'engage dans un périple afin de comprendre d'où il vient et pourquoi il a été envoyé sur notre planète. Mais il devra devenir un héros s'il veut sauver le monde de la destruction totale et incarner l'espoir pour toute l'humanité...
</em>
</div>
I would like to remplace 'Text to display' from
imgover(this, 'Text to display')
by what's in the div (text1) so that at the place where there is the div ( tooltip) I will see the text and the image from the div ( text1).

I'm not really sure whether I understood your question properly but this should work. You need to put the value of the id tag of your html element in the parameter of getElementById
<script>
function imgover(img, tip) {
document.getElementById('text1').style.display = 'block';
document.getElementById('text1').innerHTML = tip;
document.getElementById('text1').style.left = img.offsetLeft + 'px';
}
function imgout() {
document.getElementById('text1').style.display = 'none';
}
</script>