Hi Daniel,

Here is how to correctly add a javascript function inside the template:

1. Load the main file inside the index.html.

Example like we loaded the jquery swipebox file at the bottom of the index file code

<script type=”text/javascript” src=”js/jquery.swipebox.js”></script>

2. Inside the my-app.js see the function

$$(document).on(‘pageInit’, function (e) { .........

Inside this function you will execute the functions of the javascript files you loaded.

For example see:

$(”.swipebox”).swipebox();

3. In the point 2 the example function is “on(‘pageInit’”. This means will execute for all the secondary pages.

To add a function just for one page only use a code like this:

myApp.onPageInit('tables', function (page) {

...................execute your functions here..... for the tables page only...

})

This will execute the functions you add for the tables page only.

4. The “tables” title wich is the identifier for the javascript code is added inside the HTML page. For example open tables.html and right on the top lines of code see the DIV

div data-page=”tables” class=”page no-toolbar no-navbar”

The identifier of the page needs to be corectly inside the data-page=”” value, so in our case data-page=”tables”

That’s it.

Hope it helps.

Regards.

Hi Doug,

I am not sure if our contact form in the template is the best example to use with JSON. The form was just build to send email using a web server.

I will suggest to look into this examples form the framework7 website, on how they handle JSON data in forms:

Our main support team is specialized only in UI/UX design, so I think a profesional JSON/app developer will be much helpfully for you in this case.

Regards.

I also have an error: Uncaught TypeError: ScrollFix is not a function at js/my-app.js (line: 144)

The error apears on a desktop testing right?

This happens to a function that is used only on old mobiles to allow scrolling content.

The time we launched the template we considered users still uses old mobiles, but it’s time to remove that function I think.

So you just delete the function, it will not influence your template.

Regards.

Hi,

The design was made especially for portrait mode. The best way to use is in that position.

Will work on landscape but on some will look too small in height for all the layout to fit corectly.

You can test it in landscape to see how it works before.

Regards

Hi,

What tool did you used to create the app?

I think when you open a video from youtube in full screen you can only controll the volume with the device buttons.

Regards.

Hi,

Can you please confirm that if you test our original demo

With the same phone, the problem is still there.

I want to see first if the issue can be added by your modifications, or the content from the toogles, or can be a issue we have.

Our templates are developed first with iphone testing, and then android, and windows phones. Seems to work fine when we test them.

Regards.

No, I don’t see the same problem on your demo, though your content is not nearly as nested, complex and long as ours (even when opening all your toggles it’s difficult to get it to extend beyond the screen bottom). I suspect it has something to do with our customization, which was primarily with the CSS. And I should clarify that we are trying to use toggles, not accordions as I originally stated, as we’re allowing multiple items open at one time. Can you help me pinpoint the conflict?

Hi,

I can help, but you need to send me the code you added in one accordion section. I will try to add it to my demo and see there the conflict it.

Use our contact profile section to send the content in privatelly.

Regards.

Hi Roland,

You can do that by using the tehnique to open the popup with javascript.

The code you need to add is

” myApp.popup(’.popup-about’);”

replace the .popup-about with the name of your popup

So after you ajax request, if it’s in a function, let’s say as example a click function you will need to add:

$$('.open-about').on('click', function () {
  myApp.popup('.popup-about');
});

Hope this helps.

Regards, and thank you for choosing our mobile templates.

Hi,

1. For the popup animation see the code inside the framework7.css inside the “css” folder.

You will need to edit the transitions for

.popup, .login-screen

2. You need to change the classes names

.pt-page-rotateFoldBottom and .pt-page-rotateUnfoldTop

From js/framework7.js file.

Change them to fade classes names from animations.css like the ones under the:

/* fade */ .pt-page-fade

You need to test them first to see how the transitions will work.

Regards.

Hi Doug,

Yes this template is different from a simple HTML template with separated pages. It’s a web app build with ajax. This way it behaves like a real app , and when browsing the pages/section the url will not change. Also this allows it to be lanunched as an app from a mobile desktop icon.

HERE are some info about ajax submiting forms.

All the forms you will use will require ajax to keep the template in this format. You can separate the pages if you want, but this will require some HTML modifications in each file.

Also here is how our contact form submision works:

1. In my-app.js a function validate this form, and then trigger a function with ajax

        $("#ContactForm").validate({
        submitHandler: function(form) {
        ajaxContact(form);
        return false;
        }
        });

The function is “ajaxContact(form);”

2. The function triggered is in email.js file

function ajaxContact(theForm) {
...........

At some point the function submit thanks to the php file send.php

$.ajax({
type: "POST",
url: "send.php",
........

Then it receives a status from the php

if (response === 'success') { 
    myApp.alert('Thank you for getting in touch.', 'Message sent!');
    c = 'success';
} else {
    result = response;
    c = 'error';
}

And again in the ajax file show the status of the form submitted.

Hope this helps.

Basically you will need some ajax/php or aspx in your case knowledge.

Regards.

Hi,

You include something in the index page with 2 methods:

1. Add in my-app.js a simple document ready function:

$(document).ready(function() {

Your functions here......

});

2. Or using a framework7 function just for index created page

myApp.onPageInit('index', function (page) {

Your functions here......
})

Hope this helps.

Regards.

I tried method 1 and it worked. Thanks & Regards

You are welcome.

Regards.

Hi, I’m testing using Ripple but it is a local test I dont know how I can show you my demo. Will be usefull for you to see, If I place the files like a normal page in a web server?

nvm, I fixed by placing this code on the current color css, in this case turquoise .navbar, .subnavbar, .toolbar { background: #082722; }

Thanks for your reply.

Hi,

Glad you found the solution.

Regards.

Hi,

Do you mean to keep the pages loading with ajax when submiting a form? And not to refresh to a new url?

If yes, you will need to use ajax with forms, this way your url will never refresh.

Let me know if this is what you asked, and I can provide some demo .

Regards.

Hi,

Are you checking the layout in portrait mode?

The icons should look allright. Can you send us a screenshot at sindevo.com@gmail.com

Regards.

Hi,

Mobix is an HTML template. In order to make the blog dinamic you will need to add a CMS function. It’s not a quick job to do. You will need to work with a programmer.

Also integrate it into phonegap will require phonegap knowledge.

Our support team only offer support for the template as it is, for the code that is inside the template right now.

For custom development we can suggest Envato Studio. You will find a lot of developers there for what you need.

Regards.

Hi,

Mobix is an HTML template. In order to make the blog dinamic you will need to add a CMS function. It’s not a quick job to do. You will need to work with a programmer.

Also integrate it into phonegap will require phonegap knowledge.

Our support team only offer support for the template as it is, for the code that is inside the template right now.

For custom development we can suggest Envato Studio. You will find a lot of developers there for what you need.

Regards.

Hi,

We are not AngularJS specialists. I am afraid we cannot help with that.

We can offer support for anything related to the item code/design that is included right now in the template.

Regards.

Thanks for the quick response. How can I descrease the speed effect?

Hi,

In the CSS folder, open the animations.css file.

Edit the

.pt-page-rotateFoldBottom {
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-animation: rotateFoldBottom 1.1s both ease;
    animation: rotateFoldBottom 1.1s both ease;
}

The speed is animation: rotateFoldBottom 1.1s both ease;

1.1 needs to be edited.

And still there

.pt-page-rotateUnfoldTop {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-animation: rotateUnfoldTop 1.1s both ease;
    animation: rotateUnfoldTop 1.1s both ease;
}

The same animation: rotateUnfoldTop 1.1s both ease;

And edit the 1.1s

Basically this is the fold 3 D effect use for page transition.

Hope it helps.

Regards.

It worked! Thanks!

Could you please help on the above mentioned? Thanks

Hi,

I allready told you in which file to add the code, you did not read all the comment. See above:

“Add the code in my-app.js file under the js folder.”

I am not sure I understand what you want to do, but to add a button with a click functio available for the about page for example, the code should look like:

myApp.onPageInit('about', function (page) {
          $(‘a.backbutton’).click(function(){ parent.history.back(); return false; });
})

Regards.

If you want, let me know what button function you want to add. And I will add it in the file for you.

But should be easy to add for you also. Just open my-app.js file, and try to see other examples there, see how we did some functions.

Regards.

Hi,

To close the gallery you need to click on the screen. Then the close and prev-next arows/icons will apear. From the close icon you can close and go back to gallery.

Clicking back on mobile will go history back. And the template is ajax based. There is no go history back in the url. Since the pages are loading with ajax.

Regards.

I know When I clck the screen close and prev-next button will appear. But before click close button (It mean image is open on screen) if I accidently click backspace button. Nothing done then I click close button image disapper. and then when ? click any link image galery appear but nothing display.

Hi,

I know what you mean, and like I said being an ajax based layout, when you click back from your mobile somehow the gallery script is unloaded. On a normal HTML template the url have a back stage. But on ajax template all the script are loaded once and your url is not refreshing to have a back stage.

So the only and normal way to go back when the gallery is open is by closing it from the button and go to another image to click.

If there wer a solution to control the back button from the mobile inside the code it would be great, but back button from mobiles cannot be controled from an HTML template code.

Hope this make sense.

Regards.

Hi Jay,

does the scroll bar apears in the desktop testing mode?

I am sure in mobile will not apear. So please test the template with a mobile.

Regards.

Hi,

Thanks for pointing that out.

On your demo I can see the news section empty.

The issue there is simple, is about the ID’s of the tabs. In our demo we forgot to made them unique, the ones in blog-single-second.html. are the same as blog-single.html

a href="#tab1" 
a href="#tab2" 

So when you click on the next button for blog, the tabs are the ones from the original blog single page.

Just change the ID’s from the next blog section.

a href="#tab3" 
a href="#tab4" 

.....
div id="tab3" 
div id="tab4" 
....

If your plan is to make the blog dinamic with posts from a database, you will need to make this ID’s also dinamic.

Thank you for choosing our template.

Best Regards.

Got it, Thanks for help,