• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2594
  • Last Modified:

Curtain JS Effect !

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
codeoxygen
Asked:
codeoxygen
  • 5
  • 4
  • 2
  • +2
1 Solution
 
Kyle HamiltonData ScientistCommented:
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
 
COBOLdinosaurCommented:
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
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
InsoftserviceCommented:
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
 
codeoxygenAuthor Commented:
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
 
InsoftserviceCommented:
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
 
codeoxygenAuthor Commented:
I removed that div tag part, but i got same problem when clicking menu tabs..
0
 
InsoftserviceCommented:
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
 
codeoxygenAuthor Commented:
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
 
InsoftserviceCommented:
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
 
codeoxygenAuthor Commented:
Working good, really great !
0
 
GaryCommented:
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
 
InsoftserviceCommented:
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

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

  • 5
  • 4
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now