appcropolis

The Bootstrap framework allows to fix the navigation bar to the to of the page. When using the CSS class .navbar-fixed-top, the navigation bar will remain fixe to the top as the page is being scrolled. When the position of an element is set to ‘fixed’, the element’s width and height are not taken into account when determining the overall size of the page.

Inside the builder that means that a block that only has a navigation bar that it is set to fixed (.navbar-fixed-top), the block will return zero (0) as the height of the navigation bar. As a result, the block will disappear from the screen since its height will be set to zero (0). To prevent this, when using .navbar-fixed-top make sure that you add the following code to the CSS of your block.

 

@media (min-width: 992px) {
    .in-builder .navbar-fixed-top {
        position: relative;
        background-color: rgba(0, 0, 0, 0.1);
    }
}

 

This will set the navigation bar position to relative, allowing the builder to calculate the height of the navigation bar and displaying it appropriately in the builder interface.

TODO:

See: http://flexslider.woothemes.com/index.html

HTML

<section class="section promo appc-dynamic">
    {{require type="css" library="flexslider"}}
    {{require type="javascript" library="flexslider"}}
    
    {{json assign_to="slides"}}
        {
            "data": [
                {
                    "post_thumbnail": "http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg",
                    "post_title": "Me veras caer por la ciudad de la furia",
                    "post_content": "You specified you wanted a fixed height and width so that Flexslider"
                },
                {
                    "post_thumbnail": "http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg",
                    "post_title": "Donde nadie sabe de mi",
                    "post_content": "The code I gave you can be changed to a fixed size to fit"
                },
                {
                    "post_thumbnail": "http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg",
                    "post_title": "Y yo soy parte de todo",
                    "post_content": "The element with the class .flex-viewport is the container"
                }
            ]
        }
    {{/json}}
    <div class="slider-wrapper">
        <div class="flexslider">
            <ul class="slides">
                {{foreach $slides.data as $slide}}
                <li class="slide" style="background-image: url('{{$slide.post_thumbnail}}')">
                    <img src="http://placehold.it/1200x600" />
                    <div class="flex-caption">
                        <div class="slide-content">
                            <h3>{{$slide.post_title}}</h3>
                            <p class="lead">{{$slide.post_content}}</p>
                            <a class="btn btn-lg btn-primary">Call to action</a>
                        </div>
                    </div>
                    
                </li>
                {{foreachelse}}
                <li>
                    <img src="http://placehold.it/1200x600" />
                </li>
                {{/foreach}}
            </ul>
        </div>
        <div class="custom-navigation">
            <a href="#" class="flex-prev"><span class="fa fa-2x fa-chevron-left"></span></a>
            <a href="#" class="flex-next pull-right"><span class="fa fa-2x fa-chevron-right"></span></a> 
        </div>
        <div class="custom-controls-container"></div>
    </div>
</section> 

 

Javascript

// 
(function() {
   $(window).load(function() { 
        try {
            $('.flexslider').flexslider({
                animation: "slide",
                controlsContainer: $(".custom-controls-container"),
                customDirectionNav: $(".custom-navigation a")
            });
        } catch (e) {
            'console' in window && console.log(e);
        }
    });
})();

 

TODO:

HTML

<header id="main-nav" data-appc-theme="dark" data-appc-themes="default: #eee; dark: #222; red: #f00;">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav-items">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand navbar-brand-centered1">
                    <a href="/"><img src="{{builder_resources}}/builder/images/appcropolis-logo.png" alt="" class="" id=""></a>
                </div>
            </div>
            <!-- the items  -->
            <div class="collapse navbar-collapse" id="main-nav-items">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="/">Work</a></li>
                    <li><a href="/about/">About</a></li>
                    <li><a href="/services/">Services</a></li>
                    <li><a href="/contact/">Contact</a></li>
                    <li><a href="/contact/" class="btn-nav rounded">Sign in</a></li>
                    <li><a href="/contact/" class="btn-nav rounded">Join</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
</header>

 

CSS

@media (min-width: 992px) {
    .in-builder #main-nav .navbar-fixed-top {
        position: relative;
        background-color: rgba(0, 0, 0, 0.1);
    }
}

 

Javascript

// javascript 
(function() {
    $(window).on('scroll', function(e) {
        try {
            var scrollYMin = 10; 
            var scrolledClass = 'scrolled';
            if(window.scrollY > scrollYMin) {
                $('#main-nav').addClass(scrolledClass);
            } else {
                $('#main-nav').removeClass(scrolledClass);
            }
        } catch(e) {
            ('console' in window) && console.log(e);
        }
    });
})($);

 

 

 

TODO

See:

• http://isotope.metafizzy.co/
• http://codepen.io/desandro/pen/nFrte

 

 

HTML

<section id="isotope-example" class="content-block content-1-3">
    {{require type="javascript" library="isotope"}}
    {{json assign_to="categories"}}
        [
            {"color": "red"},
            {"color": "blue"},
            {"color": "green"},
            {"color": "orange"}
        ]
    {{/json}}  
                
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Isotope - filtering</h1>
                <div id="filters" class="btn-group" role="group"> 
                    <button class="btn btn-default active" data-filter="*">show all</button>
                    {{foreach $categories as $cat}}
                    <button class="btn btn-default" data-filter=".{{$cat.color}}">{{$cat.color}}</button> 
                    {{/foreach}}
                </div> 
            </div>

            <div class="col-md-12">
                <div class="grid">              
                    {{for $i=0 to 23}}
                    <div class="element-item {{$categories[$i%4].color}}">
                        <h1 class="index">{{$i}}</h1>
                        <p class="module text-center">Module {{$i%4}}</p>
                    </div>
                    {{/for}}
                </div>
            </div>
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

 

CSS:

/* css */
#isotope-example #filters {
    margin-top: 30px;
    margin-bottom: 30px;
    }
    #isotope-example #filters button {
        outline: none;
        }


/* isotope */
#isotope-example .grid {
    border: 1px solid #ddd;
    }



/* .element-item */
#isotope-example .element-item {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 5px;
    padding: 10px;
    background: #888;
    color: #fff;
    }
#isotope-example .element-item.red {
    background: #ea4335;
    }
#isotope-example .element-item.blue {
    background: #4285f4;
    }
#isotope-example .element-item.green {
    background: #34a853;
    }
#isotope-example .element-item.orange {
    background: #fbbc05;
    }
#isotope-example .element-item > * {
    margin: 0;
    padding: 0;
    }
    
    #isotope-example .element-item .index {
        left: 10px;
        top: 30px;
        width: 80px;
        text-transform: none;
        letter-spacing: 0;
        font-weight: normal;
        text-align: center;
        position: absolute;
        }
    #isotope-example .element-item .module {
        left: 10px;
        bottom: 5px;
        width: 80px;
        text-transform: none;
        letter-spacing: 0;
        font-size: 12px;
        font-weight: normal;
        text-align: center;
        position: absolute;
        opacity: 0.6;
        }

 

Javascript:

/* js */
(function() {
    try {
        // init Isotope
        var $grid = $('#isotope-example .grid').isotope({
            itemSelector: '.element-item',
            layoutMode: 'fitRows'
        });

        // bind filter button click
        $('#isotope-example #filters button').on('click', function() {
            // set active class
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            
            // send filter option
            var filterValue = $(this).attr('data-filter');
            $grid.isotope({
                filter: filterValue
            });
        });

    } catch (e) {
        if ('console' in window) {
            console.log(e);
        }
    }
})();

 

This page is a collection of small examples of code that you might find useful while developing your appcropolis builder projects.

 

Basic Page

<!DOCTYPE html>
<html lang="en">
    <head>
        {{header}}{{/header}}
    </head>
    <body>
        <!-- .appc-page -->
        <div class="appc-page">
            {{blocks}}
        </div><!-- /.appc-page -->
        
        {{footer}}{{/footer}}
    </body>
</html>

 

Geolocation

{{geolocation assign_to="location"}}

<h2>Find realtors in {{$location.city}}</h2>
<!-- example output: Find realtors in Saint Louis -->

 

 

Isotope Javascript

/* js */
(function() {
    try {
        // init Isotope
        var $grid = $('#isotope-example .grid').isotope({
            itemSelector: '.element-item',
            layoutMode: 'fitRows'
        });

        // bind filter button click
        $('#isotope-example #filters button').on('click', function() {
            // set active class
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
            
            // send filter option
            var filterValue = $(this).attr('data-filter');
            $grid.isotope({
                filter: filterValue
            });
        });

    } catch (e) {
        if ('console' in window) {
            console.log(e);
        }
    }
})();

 

Modal Popup

<a  href="#" data-toggle="modal" data-target="#very-simple-modal">Open Simple Modal</a>
{{modal id="very-simple-modal"}}{{/modal}}