Est-il possible de ne pas charger un iframe caché dans un div, jusqu'à ce que la div s'affiche?
Fondamentalement, un div caché qui apparaît lorsqu'un client clique sur un lien. Div affiche un php formulaire de contact qui pose les questions des clients sur le produit qu'il/elle est intéressé.
Voici le code que j'ai trouvé en ligne qui fonctionne très bien pour moi à l'aide de jquery:
<script type="text/javascript">
$(document).ready(function(){
$('.show_hide').showHide({
speed: 500, //speed you want the toggle to happen
easing: '', //the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI
changeText: 1, //if you dont want the button text to change, set this to 0
showText: 'REQUEST A QUOTE',//the button text to show when a div is closed
hideText: 'CLOSE' //the button text to show when a div is open
});
});
</script>
Le css est tout simple:
#slidingDiv, #slidingDiv_2{
height:300px;
background-color: #e2e2e2;
padding:20px;
margin-top:10px;
border-bottom:30px solid #000000;
display:none;
}
Voici l'externe java script:
(function ($) {
$.fn.showHide = function (options) {
//default vars for the plugin
var defaults = {
speed: 1000,
easing: '',
changeText: 0,
showText: 'Show',
hideText: 'Hide'
};
var options = $.extend(defaults, options);
$(this).click(function () {
$('.toggleDiv').slideUp(options.speed, options.easing);
//this var stores which button you've clicked
var toggleClick = $(this);
//this reads the rel attribute of the button to determine which div id to toggle
var toggleDiv = $(this).attr('rel');
//here we toggle show/hide the correct div at the right speed and using which easing effect
$(toggleDiv).slideToggle(options.speed, options.easing, function() {
//this only fires once the animation is completed
if(options.changeText==1){
$(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText);
}
});
return false;
});
};
})(jQuery);
Maintenant c'est à mon avis que dans ce code, le formulaire de charger automatiquement, même s'il ne figure pas. J'ai peut-être tort, s'il vous plaît corrigez-moi si.
Question, comment puis-je m'assurer que cette iframe à l'intérieur de la div serait seulement de la charge quand la div n'est plus caché?
OriginalL'auteur riseagainst | 2012-11-18
Vous devez vous connecter pour publier un commentaire.
Plutôt que de charger le
iframe
avec sessrc
attribut, le charger à la place avec undata-src
attribut. Pour sa valeur, de fournir l'emplacement final que vous souhaitez utiliser lorsque le parentdiv
devient visible.Lorsque vous vous montrez le parent
div
, d'émettre un rappel qui prend laiframe
attributdata-src
, et définit sa valeur à lasrc
attribut de laiframe
, l'amenant à se charger.Démo: http://jsfiddle.net/bLUkk/
Beau travail monsieur! Beaucoup apprécié! @Jonathan Sampson
OriginalL'auteur Sampson