Making <script> appear differently on mobile screens not working?

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&amp;p=oi&amp;m=1127936384253&amp;sit=i9ngc4plb&amp;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!

This code actually works… It will work on my phone when searching on safari, but if the window browser on my computer is small it will not work.

I am not sure how to delete this post… but this is working properly.

Sorry guys

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.