Category: Tutorials

Embedding Google Maps

TODO: Embedding Google Maps is as simple as pasting the IFRAME for the map. However, be aware that when scrolling over the page, the IFRAME of the map will capture the mouse scroll event, preventing the page from scrolling.

To overcome this issue, you should use the Maps Javascript API instead. If you choose to use the IFRAME implementation, you can add the code below to overcome the mouser trap issue:

 

HTML

<section id="content">
	<div class="map" id="overlay">
        <iframe  id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3118.943810333741!2d-90.40780471547198!3d38.581141747979544!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87d8cc31754abc77%3A0xd633e3938b87c432!2s101+W+Argonne+Dr+%23205%2C+Kirkwood%2C+MO+63122!5e0!3m2!1sen!2sus!4v1458332252466" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
</section>

 

 

CSS

.scrolloff {
    pointer-events: none;
}

 

 

Javascript

$(document).ready(function () {

    $('#map').addClass('scrolloff');                // set the mouse events to none when doc is ready
    
    $('#overlay').on("mouseup",function(){          // lock it when mouse up
        $('#map').addClass('scrolloff'); 
        //somehow the mouseup event doesn't get call...
    });
    $('#overlay').on("mousedown",function(){        // when mouse down, set the mouse events free
        $('#map').removeClass('scrolloff');
    });

    $("#map").mouseleave(function () {              // becuase the mouse up doesn't work... 
        $('#map').addClass('scrolloff');            // set the pointer events to none when mouse leaves the map area
                                                    // or you can do it on some other event
    });
    
});

 

 

 

 

 

Creating A Website Using The Appcropolis Builder

In this video I am going to show you how to create a project using the new appcropolis builder.

The version that we are will be using for this demo is 0.2.0. By the time that you watch this video, things might look a little bit different since we are actively improving the user interface and the builder functionality.

1. Open the project window

The first thing that you need to do is to open the project window by clicking on the “Projects” button in the upper left corner.

 

01-open-project-popup

 

2. Choose the type of project you wish to build

Before you can give a name to your project, you have to choose between creating a “Desktop” project, or a “Mobile” project.

 

02-choose-a-project

 

3. Name your project

For now, we will go ahead and choose a “Desktop” project. You will be presented with a popup window from which you can specify the name of your project.

 

03-name-your-project

 

You can choose any name for your project but using special characters since they will be replace with hyphens. In other words, make sure that you use letters, numbers, hyphens, or underscore characters.

NOTE: The name of your project cannot be a number (e.g. 3456). It must contain at least one letter.

Once you have chosen a name for your project, your click “Ok” and you project will be created in a few seconds.

 

04-preview-project

 

4. Preview your project

Keep in mind that you not only created a project within the builder, you also deployed a full  Wordpress that it is already connected to your project. To access your project from the browser, you can click on the “Live Preview” option, located in the “Options” menu on the upper right side of the top bar.

 

05-your-peoject

 

You can also open a new browser tab or window, click on the address bar, and enter the URL of your project. This URL follows this structure:

[project_name]-[your_user_name].simplifysites.com

(e.g. demo-sanraul.simplifysits.com)

 

IMPORTANT:

You can quickly access the admin area (WordPress) of your site by simply typing the URL of your project followed by “/wp-admin”. We will cover the WordPress integration in future videos.

 

06-project-wordpress-admin