I have a code that I am using that I found in someones thread on here for making a pop up on page load with an iframe code. You’ll see in the code how the width and height of the code is set. I need those numbers set differently on mobile devices.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<!-- class="hidden-xs" class="visible-xs" -->
<script>
$(window).load( function(){
var seconds = 1,
i = setInterval(countDown, 1000);
//https://visitor.r20.constantcontact.com/d.jsp?llr=6hx5dp9ab&p=oi&m=1127936384253&sit=i9ngc4plb&f=36016555-62a9-492a-8bd1-5464e87534ef
function openColorBox(){
if ( $(window).width() > 480) {
//Add your javascript for large screens here
$.colorbox({iframe:true, width:"70%", height:"70%", href:"https://visitor.r20.constantcontact.com/manage/optin?v=001J9uemz3fdGQ9vE5MxSQGh4C-wx8M9-9PtrlOkOPS7A6sBcnKmkwJNFfhBvEHESw4vGZ7EnC9s_wIOP8f60gEbV0dZjmvxZ2qHN57uGbD0i0zT5PkDcQhKpdK2l2blWmIB1KV88aNPQSrjsjjIhtwLVkvDGuD67MOE9CYK7hy59Y%3D"});
}
else {
//Add your javascript for small screens here
$.colorbox({iframe:true, width:"95%", height:"95%", href:"https://visitor.r20.constantcontact.com/manage/optin?v=001J9uemz3fdGQ9vE5MxSQGh4C-wx8M9-9PtrlOkOPS7A6sBcnKmkwJNFfhBvEHESw4vGZ7EnC9s_wIOP8f60gEbV0dZjmvxZ2qHN57uGbD0i0zT5PkDcQhKpdK2l2blWmIB1KV88aNPQSrjsjjIhtwLVkvDGuD67MOE9CYK7hy59Y%3D"});
}
}
function countDown(){
seconds--;
$("#seconds").text(seconds);
if (seconds === 0){
openColorBox();
clearInterval(i);
}
}
})
</script>
You’ll see I have commented out: class=“hidden-xs” class=“visible-xs” – Those are two classes that we have added in our css to hide and make visible different content based on smaller screens but you can’t use classes in scripts. This is the code that we have and thought it would work, but the small screen codes never activates.
ANY help or direction in this would be very helpful!