Friday 31 October 2014

Slide animation of ajax loaded divs with jQuery

Since I'm a real newbie in terms of web development this will most probably be really helpful mostly to me sometime in the future when I've forgotten all this.

I'm building a simple single-page website which requires some sliding animation, but the divs which are getting animated are actually separate .html files loaded with ajax through jQuery. There's a lot of information on loading pages through jQuery or animating html elements. Not so much on using both at the same time. And for a beginner it posed certain problem.

First the links which trigger the animation:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<nav id="menu">
    <ul>
        <li>
            <div style="background-color: rgba(175, 120, 75, 0.5)">
                <a href="#" id="mainpage">Main page</a>
            </div>
        </li>
        <li>
            <div style="background-color: rgba(120, 90, 175, 0.5)">
                <a href="#" id="page2">Second page</a>
            </div>
        </li>
        <li>
            <div style="background-color: rgba(75, 175, 90, 0.5)">
                <a href="#" id="page3">Third page</a>
            </div>
        </li>
    </ul>
</nav>

Here's the html for sliding-animated divs:

1
2
3
4
5
6
<div id="slideWrapper">
    <div id="slider1">
    </div>
    <div id="slider2">
    </div>
</div>

Here's the CSS: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
#slideWrapper {
    width: 100%;
    height: 300px;
    float: left;
    position: relative; 
}

div#slideWrapper > div {
    margin: 0 5px 0 0;
    border: 1px solid black;
    width: 100%;
    height: 300px;
    float: left;
    position: absolute;
    overflow: hidden;
}

And here's the javascript: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var _showedSubPage = "";

$(document).ready(function () {

    // Configure on click events, 
    // first argument: id of the button I'm clicking on, second: url
    loadPageOnClick("mainpage", "subpages/page1.html");
    loadPageOnClick("page2", "subpages/page2.html");
    loadPageOnClick("page3", "subpages/page3.html");
    
    // Initial load of the page
    $("#slider1").load("subpages/page1.html");
    $("#slider1").addClass("slidedIn");
    $("#slider2").addClass("slidedOut");

    _showedSubPage = "mainpage";
});

loadPageOnClick = function (sourceId, url) {
    jQuery(document).ready(function () {
        jQuery("#" + sourceId).click(function () {
            
            var divToSlideIn = $("#slideWrapper").find(".slidedOut");
            var divToSlideOut = $(divToSlideIn).siblings(".slidedIn");

            // don't animate if the click is on the same button
            if (_showedSubPage != sourceId
                && !$(divToSlideOut).hasClass("animating")
                && !$(divToSlideIn).hasClass("animating")) {
                _showedSubPage = sourceId;
                
                $(divToSlideOut).addClass("animating");
                $(divToSlideIn).addClass("animating");

                // change classes on slider divs
                $(divToSlideOut).removeClass("slidedIn").addClass("slidedOut");
                $(divToSlideIn).removeClass("slidedOut").addClass("slidedIn");

                // load webpage through ajax
                $(divToSlideIn).load(url);

                $(divToSlideOut).animate({
                    right: $(divToSlideOut).width()
                }, 600, null, function() {
                    $(divToSlideOut).hide();
                    $(divToSlideOut).empty();
                    $(divToSlideOut).insertBefore($(divToSlideIn));
                    $(divToSlideOut).removeClass("animating");
                });

                $(divToSlideIn).show().css({
                    right: -($(divToSlideIn).width())
                }).animate({
                    right: 0
                }, 600, null, function() {
                    $(divToSlideIn).removeClass("animating");
                });
            }
        });
    });
};

To summarize, what I do is I juggle with 2 divs. One is being shown, the other is hidden. On click on one of the links I load the hidden div with the html from the appropriate webpages. Then I animate and slide in the div with the newly loaded html and display it while sliding out and hiding the previous one. This cycle is being done every time any link is clicked.

UPDATE:
I've noticed that the comparing with the current button wasn't working so I fixed it, also added blocking of the animation while it's running and hooked up the complete callback properly.

Posted by at No comments:
Labels: , , , ,

Tuesday 21 October 2014

Developer Days 2014, Wrocław, Poland

I haven't been going to many IT events recently, so Developer Days in Wrocław, was a nice refreshment. I'll note down all the interesting buzzword I've heard and a small wrap-up of some of the lectures I've attended.

1. Keynote: The present and future of .NET by Tomasz Kopacz

Every lecture by Tomasz is a pleasure to listen to, and choosing him to lead with the first morning lecture was a wise thing to do. His energetic speech worked better than coffee and was full of interesting tid bits from the .NET world. He maintained this throughout all his lectures.

2. Use all of Visual Studio and be a better developer by Kate Gregory

This lecture was a bit of a let down, especially for any developer who uses resharper extensively. The target audience was around junior .NET dev level. It was nice to listen to Kate however because she's a very good lecturer and previously I really enjoyed listening to her in several .NET rocks podcasts she attended.

3. Architecting an ASP.NET MVC solution by Andrea Saltarello

Because I'm a complete newbie in terms of web development I was expecting some in-depth MVC knowledge as a requirement for this session. To my surprise  the session focused on several js libraries/frameworks and SEO, which I was happy to find because of my meager knowledge on the subject.

Some keywords:

- schema ( schema.org ): by adorning html elements we're able to tell webcrawlers what type of data each element displays
- sitemaps ( sitemaps.org ): adds information about different sub pages of the website available for the webcrawlers
- google dev tools: has a free possibility of testing how "crawlable" is any given website
- bootstrap ( bootstrap.org  ): allows for building a website which easily changes layout to fit available screen space
- template engine chooser on github: http://garann.github.io/template-chooser/

I'll probably add some additional pieces of information once I read up on them more
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)