Basically, a hidden div that's shown when a customer clicks on a link. That div displays a php formail that asks the customer questions about the product he/she is interested in.
Here's the code i found online that works great for me using 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>
The css is just simple:
#slidingDiv, #slidingDiv_2{
height:300px;
background-color: #e2e2e2;
padding:20px;
margin-top:10px;
border-bottom:30px solid #000000;
display:none;
}
Here's the external 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);
Now it is my believe that in this code, the form would automatically load, even if not shown. I could be wrong, please correct me if so.
Question, how can i make sure this iframe inside the div would only load when the div is no longer hidden?
No, the iFrame's loading and load detection should not be compromised by setting the display to none. CSS is just for style, it has no ability to affect the DOM. Setting display:none on an <img> (or any of its parents) will prevent it from loading.
The hidden attribute hides the <iframe> element. You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <iframe> is not visible, but maintains its position on the page.
Show activity on this post. One problem we had was that while iframes already do load asynchronously, the main page will not fire OnLoad until the iframe has finished loading too.
Rather than loading the iframe
with its src
attribute, load it instead with a data-src
attribute. For its value, provide the eventual location you'd use when the parent div
becomes visible.
<div class="hidden_element">
<iframe data-src="http://msdn.microsoft.com"></iframe>
</div>
When you show the parent div
, issue a callback that takes the iframe
attribute data-src
, and sets its value to the src
attribute of the iframe
, causing it to load.
// Show our element, then call our callback
$(".hidden_element").show(function(){
// Find the iframes within our newly-visible element
$(this).find("iframe").prop("src", function(){
// Set their src attribute to the value of data-src
return $(this).data("src");
});
});
Demo: http://jsfiddle.net/bLUkk/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With