Solved

Curtain JS Effect !

Posted on 2013-06-20
13
2,254 Views
Last Modified: 2013-06-24
Hi Experts,

I'm looking for create a Site in jquery effect like as sample site of http://www.filizaltinturk.com/.

In my site header and footer should be fixed possition, center part only need  curtain js effect. I had attached in my sample Layout page..

Plz guide me, how create that jquery sliding effect?
curtain.png
0
Comment
Question by:codeoxygen
  • 5
  • 4
  • 2
  • +2
13 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39262430
Hi codeoxygen,

Honestly, that is an awful effect. It's really annoying and doesn't work smoothly.

I could probably write a script that is a little smoother, but I would urge you to reconsider.

:)

Koza.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39262441
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39262939
Wow the link you posted is pure trash. It looks like it was written by a 10-year old.

The one Gary posted is professional and well written.

The filizaltinturk junk has 48 HTML validation errors including many that are structural.

The one Gary posted is clean with the exception of a couple of minor technical flaws.

I can never understand why someone would see crap like filizaltinturk and want to try and duplicate that garbage.

If you must do some Geewhiz nonsense then use what Gary post as a starting point.

Cd&
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 39269745
You can google for curtain effect that would be much better you could develop it on your own then copying it from that site
0
 

Author Comment

by:codeoxygen
ID: 39270437
Thanks for reply to all.

I'm using this link code :http://effinroot.eiremedia.netdna-cdn.com/repo/plugins/menu-nav/curtain/index.html

I had attached in my code. In my layout using menu1, menu2, menu3, menu4 tabs.. i got a error of when clicking menu tabs, page one time goes correct position, another time not going well,,. what mistake i did? plz help me..
base.css
curtain.css
curtain.js
index.html
blizzard.png
eiffel-2.jpg
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 39270640
i just removed the below div tag and it worked.
have not checked the js file to understand the relation ship between this <div> tag.
Hope your issue gets resolved by this


<div class="photos-inner">asas
                <ul class="step-list">
                    <li class="step">
                        <img src="img/stepbystep/1.jpg" alt="">
                    </li>
                    <li class="step">
                        <img src="img/stepbystep/2.jpg" alt="">
                    </li>
                    <li class="step">
                        <img src="img/stepbystep/3.jpg" alt="">
                    </li>
                    <li class="step">
                        <img src="img/stepbystep/4.jpg" alt="">
                    </li>
                    <li class="step">
                        <img src="img/stepbystep/5.jpg" alt="">
                    </li>
                    <li class="step">
                        <img src="img/stepbystep/6.jpg" alt="">
                    </li>
                    <li class="step">
                        <img src="img/stepbystep/7.jpg" alt="">
                    </li>
                    <li class="step">
                        <img src="img/stepbystep/8.jpg" alt="">
                    </li>
                </ul>
            </div>
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:codeoxygen
ID: 39270700
I removed that div tag part, but i got same problem when clicking menu tabs..
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 39270758
You have missed class="curtain-links"

<li class="active link selected link-active"><a href="#section-1" class="curtain-links">Menu 1</a></li>
      <li class="link"><a href="#section-2" class="curtain-links">Menu 2</a></li>
      <li class="link"><a href="#section-3" class="curtain-links">Menu 3</a></li>
      <li class="link"><a href="#section-4" class="curtain-links">Menu 4</a></li>
0
 

Author Comment

by:codeoxygen
ID: 39270798
i inserted that (curtain-links), but i got a same prb..

Menu links going correctly section# id wise.. but one time working, another time not working... this type of error i have getting in my code.
0
 
LVL 15

Accepted Solution

by:
Insoftservice earned 500 total points
ID: 39270855
i have skipped css part .

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>lovetomarry</title>
    <meta name="author" content="Victor Coulon">
    <meta name="description" content="live streaming,channel live streaming,sony tv,love to marry, ">
    <meta name="keyword" content="live streaming,channel , streaming,sony tv,love to marry,shaadi ">
    <link rel="stylesheet" href="curtain.css">
    <link rel="stylesheet" href="base.css">
</head>
<style type="text/css">
#header-outer
{
      position:fixed;
      top:0px;
      z-index:9999999999;
      width:100%;
      color:#ffffff;
      background-color:#00F;
}
#header-outer a
{
      color:#FFF;
}
#footer
{
      position:fixed;
      bottom:0px;
      z-index:9999999999;
      width:100%;
      height:300px;
}
.menu
{
      position:fixed;
      bottom:340px;
      z-index:99999999999999;
      height:40px;
      width:100px;
}
.curtains
{
      margin-top:200px;
}
.clear
{
      clear:both;
}
</style>
<body>
<!--header outer-->
<div id="header-outer">
<div class="main-menu menu-link">
    <ul>
   
      <li class="active link selected link-active"><a href="#section-1" class="curtain-links">Menu 1</a></li>
      <li class="link"><a href="#section-2" class="curtain-links">Menu 2</a></li>
      <li class="link"><a href="#section-3" class="curtain-links">Menu 3</a></li>
      <li class="link"><a href="#section-4" class="curtain-links">Menu 4</a></li>
     
    </ul>
  </div>
  <!--end main menu-->
</div>
<div class="clear"></div>
<!--end header outer-->
<ol class="curtains">
    <!--<li id="section-1" class="cover" data-parallax-background="-.05">-->
    <li id="section-1" >
        <header data-fade="550" data-slow-scroll="3">
            <h1>lovetomarry</h1>
            <h2>an easy to use scrolling plugin</h2>
                  <div>
                  
                   Libra monthly horoscope
      

Career

There is also a possibility to travel long distance on government expenses. Film, Television related professionals shall be benefited. Politician might face opposition in this month, says . Your expenses shall be more. Over work might affect your health, but you continue with full zeal. You mean business and get things done with efficiency and speed. You shall focus on property inheritance, new acquisitions. You might gain huge profit on your landed property.

Money

New projects, new business opportunities and new resources of income will be generated during this period. This month will bring material prosperity in so many ways. Natives will be benefited by immovable and ancestral property, quotes . The source of income will also increase with additional source of income besides normal business. Those who are aspiring for financial gains will get it, says .

Love

Be proactive if you’re single. Ask friends to set you up, attend get together and keep an open mind. Singles can find this time to be most appropriate for finding a suitable love partner or a matrimonial alliance for themselves. Persons would invest staunch trust of their loved, and would be booming in articulating their feelings. There might be people who would not change their operation, but you require not be disheartened, as you would definitely forgather success at the end, quotes .

Overall

Social interaction and work will make the new mix. You negotiate or deal with coworkers and members of the public will work in your favor, quotes . Be practical for work purposes as you sort out what you want from others. Be ready to deal with go-getting individuals, males in particular. This month will soak the natives with luck, success and prosperity. Elders and parents will be extremely supportive. A new romantic partner is also hidden in the horizon.
                  
                  </div>
        </header>
    </li>
    <li id="section-2">
        <article>
            <h4>What's lovetomarry menu 2?</h4>
            <hr>
            <p>This plugin allows you to create a web page with multiple fixed panels that unroll
            with an amusing effect. Exactly like a curtain rises.</p>
            <p>To navigate, you can use your keyboard instead the scrollbar or your mousewheel to navigate
            into the document. But that's not all, there is more features!<br>
            You can scroll into this document to view some of them.</p>
            <h4>How it's works?</h4>
            <hr>
            <p>You can find all instructions about the plugin on the <a href="#">github page</a>.</p>
            <p></p>
            <p>Feel free to fork the project on <a href="#">github</a> or ping me on
            <a href="#">twitter</a> for any comments.</p>
            <p></p>
            <p class="align-center">
               <a href="#" class="button">download</a>
               <a href="#" class="button">instructions</a>
            </p>
        </article>
    </li>
    <li id="section-3">
        <section class="photos">
            <div class="fixed">
                <h4>Here's a fixed title menu3</h4>
                <p>With a small fixed text.</p>
                <p>Oh, and you can see my last selected Instagram pictures on the left.</p>
            </div>
           
        </section>
    </li>
    <li id="section-4">
        <section class="download">
            <h1>Interested?</h1>
            <a href="#"> Libra yearly horoscope

LIBRA 2013 HOROSCOPE

Profession:

This year brings growth, achievements and throughout success. You may improve your skills, work methods or approach to daily activities. You may also attend an online or part time course. An exciting job offer, recognition or promotion is possible. You could also be benefited through freelancing, social networking and creative work.

The second half will be favorable for financial planning. Your productivity will more likely come and your thinking will be crystal-clear about finances. You may fearlessly champion an idea or use social media to promote a project which could bring a new income-generating opportunity, a job offer, a promotion, or a chance to start building an idea into something tangible will be there. </a>
        </section>
    </li>
</ol>
<ul class="menu">

    <li><button href="#up">&#8593;</button></li>

    <li><button href="#down">&#8595;</button></li>

</ul>
<div class="clear"></div>
<!--foooter-->
<div id="footer">
<h1>Footer</h1>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="curtain.js"></script>
<script>
    $(function(){
       $('.curtains').curtain({
           scrollSpeed: 300,
           controls: '.menu',
           curtainLinks: '.curtain-links',
           nextSlide: function(){
            console.log("ok");
           }
       });
    });
</script>
</body>
</html>
0
 

Author Comment

by:codeoxygen
ID: 39270889
Working good, really great !
0
 
LVL 58

Expert Comment

by:Gary
ID: 39271228
You give all the points and accepted answer to someone who's first suggestion was search Google and then has just copied the code from the link and changed the content.
0
 
LVL 15

Expert Comment

by:Insoftservice
ID: 39272366
i hope @GaryC123 client had got the solution for the problem he had been facing.
He had downloaded fresh curtain js pack and had tried to integrate it, but he failed to do so.
And i had helped him to integrate it.
If you could please check the code what has been pasted.
I had even provided him the reason why even the copy pasted code which he had tried failed.
Answer does not rely only on the copy pasted code, but it rely how & where you had pasted it. Please check my previous comments where i had clearly mention the section the author had skipped to paste.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now