CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mackey18
Mackey18

Reputation: 2352

Javascript Animation Positioning and Scaling issue

So I'm currently working on a single screen which has multiple content views which will be accessed from a button to the side of the dynamic area. I found this repo (https://github.com/ian-de-vries/Multi-Screen.js) which achieves something very similar to what I want, only it expects a full screen, as opposed to just a certain area. So far, I've got it very close to performing as I would hope, but the last couple of hours have had me stumped. Currently there are two issues:

1) The relative divs use the % width value of their containing div, while the animation of the divs uses a % width of the entire screen, making the animated divs larger. I think the way around this is to calculate the fixed width during the animation then remove it post animation. If you set a fixed width in the css (which isn't appropriate for the site) the animation is smooth and has the correct width whilst animating, but then leads to the next issue.

2) Because of the original functionality of the js, the animations come straight down the centre, which again adds to a worse animation because of the offset content.

While I've tried to solve both of these issues, JS is beyond me despite the experience I have in other programming languages. I thought I was onto something when editing the pre/post/animation_css variables, but I couldn't get what I wanted to achieve. Anyway, below is a quick dummy site which replicates the code on the actual site well, and creates the same issues. To get this working, put these two files in a folder with the multi-screen.js file from the repo.

<!DOCTYPE html>
<html>
<head>
    <!-- Scrolling Pages -->
    <!-- latest jQuery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

    <!-- link the css and js scripts -->
    <link href="style.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="multi-screen.js"></script>

    <!-- run the plugin -->
    <script type="text/javascript">$(document).ready(function() { MultiScreen.init(); });</script>
</head>
<body>

<div class="wrapper">

<div class="header">My Header</div>
    <div class="contentarea">


<div style="float:left; width: 20%; background-color: red; height: 500pt;"></div>

<div style="width:80%; float: right; height: 600pt; background-color: grey;">

<div id="entry_screen" class="ms-container ms-default" style="">

<a href="javascript:void(0)" class="ms-nav-link" data-ms-target="screen2" data-ms-exit-animation="top" data-ms-enter-animation="bottom">go down</a><br>
    <a href="javascript:void(0)" class="ms-nav-link" data-ms-target="screen3" data-ms-exit-animation="top" data-ms-enter-animation="bottom">go down 2</a>

</div>

<div id="screen2" class="ms-container" style="">


    <a href="javascript:void(0)" class="ms-nav-link" data-ms-target="entry_screen" data-ms-exit-animation="bottom" data-ms-enter-animation="top">go up</a><br>

    <a href="javascript:void(0)" class="ms-nav-link" data-ms-target="screen3" data-ms-exit-animation="top" data-ms-enter-animation="bottom">go down</a>


    </div>

    <div id="screen3" class="ms-container" style="">

           <a href="javascript:void(0)" class="ms-nav-link" data-ms-target="screen2" data-ms-exit-animation="bottom" data-ms-enter-animation="top">go up</a><br>
    <a href="javascript:void(0)" class="ms-nav-link" data-ms-target="entry_screen" data-ms-exit-animation="bottom" data-ms-enter-animation="top">go up 2</a>


</div>
</div>
</div><!---------- Close "content-area" --------->
</div><!---------- Close "wrapper" --------->
</body>
</html>

CSS:

.ms-container {
position: fixed;
z-index: 1;
display: none;
}

.ms-default {
position: absolute;
z-index: 2;
display: block;
}

#entry_screen {
height: 500pt; 
width: 80%; 
background-color: green; 
left: 0;
margin-left: 20%;
}

#screen2 {
height: 500pt;
width: 80%; 
//float: right; 
background-color: blue; 
//margin-right: 10%;
margin-left: 20%;

}

#screen3 {
height: 500pt;
width: 80%; 
background-color: magenta;
margin-left: 20%;
}

.wrapper {
min-height: 100%;
padding: 0  10% 0 10%;
height: auto !important;
height: 100%;
margin: 0 auto 0pt;
}

.contentarea {
position: relative;
}

.header {
    text-align: center;
width: 100%;
height: 50pt;
 }

a {
    color: white;

}

Upvotes: 1

Views: 102

Answers (1)

Mackey18
Mackey18

Reputation: 2352

Ended up using another alternative. The one I chose was fullPage.js. It can be used for the desired functionally despite being for full screen sites. Hope this helps anyone who wanted to achieve something similar.

Upvotes: 1

Related Questions