Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please Help Timed Opening Curtains Compatibility

    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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>EAG</title>
    <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;

    $(".rope").click(function(){
    $(this).blur();
    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;
    }else{
    $(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;
    });

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

    </style>
    </head>

    <body>
    <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>
    </body>
    </html>


    -Ron A.
    Attached Thumbnails Attached Thumbnails Please Help Timed Opening Curtains Compatibility-darkcurtain.jpg   Please Help Timed Opening Curtains Compatibility-frontcurtain.jpg   Please Help Timed Opening Curtains Compatibility-logo.png  


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •