View Full Version : Please Help Timed Opening Curtains Compatibility

10-30-2012, 05:22 AM
Hello All,

I followed a tutorial on a website for these sliding curtains that were activated by pulling a rope, but I changed it to be timed. I am new to javascript, and am having a problem with compatibility. On mobile devices, the curtains either don't open, or the logo doesn't show up. On windows computers, there are the same issues. If someone can please take a look and help me out, it would be greatly appreciated. Thanks in advance. It uses the Jquery easing 1.3 script.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {

setInterval($(this).blur(), 5000);
setInterval($(this).stop().animate({top: '0px' }, {queue:false, duration:400, easing:'easeOutBounce'}), 5000);
setInterval($(".leftcurtain").stop().animate({width:'60px'}, 4000 ), 5000);
setInterval($(".rightcurtain").stop().animate({width:'60px'},4000 ), 5000);
$curtainopen = false;

if ($curtainopen == false){
$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
$(".rightcurtain").stop().animate({width:'60px'},2000 );
$curtainopen = false;
$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".leftcurtain").stop().animate({width:'50%'}, 2000 );
$(".rightcurtain").stop().animate({width:'51%'}, 2000 );
$curtainopen = false;
return false;

<style type="text/css">
body {
text-align: center;
background: #4f3722 url('img/darkcurtain.jpg') repeat-x;
border: none;
width: 50%;
height: 89%;
top: 0px;
left: 0px;
position: absolute;
z-index: 2;
width: 51%;
height: 89%;
right: 0px;
top: 0px;
position: absolute;
z-index: 3;
.rightcurtain img, .leftcurtain img{
width: 100%;
height: 100%;
margin: 0px auto;
margin-top: 5%;
vertical-align: middle;
height: 25%;
width: 25%;
p {
margin: 0 auto;
color: white;
font-size: 1.5em;
position: absolute;
top: -40px;
left: 70%;
z-index: 4;


<div class="leftcurtain"><img src="img/frontcurtain.jpg"/></div>
<div class="rightcurtain"><img src="img/frontcurtain.jpg"/></div>
<a href="home.html"><img class="logo" src="img/logo.png"/></a>
<p> Essential Artist Group</p>
<br />
<p>Los Angeles California</p>

-Ron A.