Discussion on UpMobile HTML Mobile Template

Discussion on UpMobile HTML Mobile Template

Cart 277 sales
Well Documented

mobiokit supports this item

Supported

67 comments found.

How can I save linearicons as 96×96 PNG files just as icons in images folder?

Yes sure.

You are asking if you can create more icons and add them in the images folder right?

Sure you can, just create any icon, save it at the 96×96 image size, or even bigger if you want, but keep it square. And replace the icons code from the HTML like you want.

Regards.

ISSUE #1

need help on Photo Gallery

1. goes to photo gallery page

2. click on photo

3. swipebox opens up successfully

4. however, if i tap on ‘back’ on my Samsung device (Android), it doesn’t close the swipebox, instead the main app itself goes back to the previous page and so on in the background

5. i can only close the swipebox by tapping on the photo and then tap on the x at the bottom left corner

how can i make it so that when i tap on ‘back’ it closes the swipebox straight?

==========

ISSUE #2

this above mentioned behavior for Issue #1 is also similar when the left or right panel is active. tapping on ‘back’ doesn’t close the panels, instead the main app goes back to the previous page. how can i make it so that when i tap on ‘back’ it closes the panel?

==========

thank you for the great support and wonderful theme!

Hi,

Being an ajax template, when you click for example to open the panel, you actually not refreshing the link going to a new page. And your back button does not memorize this as a next step. So you reall back step is before opening the website.

This why you back button from the mobile goes to prev opening the website. It’s normal.

Also for the photo gallery. The back button from the mobile cannot close the image popup because he doesn’t see that popup as a new page, so he can go the prev one. All the actions inside the template happen in one step, because this is an Ajax based page system that does not refresh the url when navigating.

Also consider that this is a web app, and not a native app where I have control over the back button. Where an action can be created for the back button. Inside an html web app the back button of the mobile cannot be control, it just goes to the prev url loaded.

Hope this make sense.

Regards.

hi How can i change home page colour something other colour.like blue or red. Thank you

Hello kindly send me red colour custom version peethakoppam@gmail.com

Hi,

We have updated the template with a red color, you will receive your email shortly (1 day max).

Regards.

Hi,

The template is updated. Just go to your account and download the archive again. It will contain also the red color.

Regards.

Hi purchased this template but ..but it does not load all inner pages properly ...can you me know the reason

Hi,

Test it on a server. Not locally. It uses ajax, a server side script.

Regards.

Hello. Congratulations on the great work. Your portfolio is wonderful. Sorry for my mistakes, I’m using google translator.

I need to use an iframe on one of the pages, but it does not span the entire page. Can you help me? The code is this: <iframe frameBorder=”0” height=”100%” width=”100%” marginHeight=”0” marginWidth=”0” scrolling=”no” src=”exercicios/index.html” BORDERCOLOR=”#FFFFFF”></iframe>

The page is here: http://jaquelinelaureano.com.br/app/puller.html#!/exercicios.html Notice that there is a lower white bar.

Thank you very much for all the help.

Hi,

Thank you,

The most easy fix will be to set height=”110%” instead of 100%.

I am not sure why the iframe do not use 100% of the screen which should be the corect way, but using height=”110%” seems to fix it.

Regards.

Hi Developer, Firstly its awesome theme appreciate your efforts and wish you have great sales. I faced a simple CSS issues. I’m running your theme in Cordova and it has small issue on Windows 10 PCs. When the screen is large the left menu doesn’t display properly(the left menu goes to the extreme left and doesn’t show up). When I minimize the screen then the menu shows up. the below link give you the screenshots. This is only on Windows 10 pc big screens. I hope its just a simple CSS fix and I guess you can resolve it in a blink. Please let me know way ahead. link: https://www.indianstart.in/apps/screenshots.html

Hi,

Thank you.

Can you please tell me the resolution you are testing it? I cannot tell from the screenshot. I will reproduce your scenario and try to see where the bug is.

Regards.

its 15 inch laptop screen. As I said earlier this happens only for Windows 10 app on PC.

Hi, is it possible to remove the more/less in the blog section and just let the user scroll through a long list?

Hi,

Yes, you just need to:

1. Delete from the HTML blog page

            <div id="loadMore">LOAD MORE</div> 
            <div id="showLess">END</div> 

2. Open my-app.js file from the JS folder, and delete this:

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

        $(".post_entry").hide();    
        size_li = $(".post_entry").size();
        x=4;
        $('.post_entry:lt('+x+')').show();
        $('#loadMore').on('click', function() {
            x= (x+1 <= size_li) ? x+1 : size_li;
            $('.post_entry:lt('+x+')').show();
            if(x === size_li){
                $('#loadMore').hide();
                $('#showLess').show();
            }
        });

})

Regards.

Hi.

In the swiper slide the swiper pagination is not working. When i click in the bullet nothing happens. How can i correct that?

Thank you.

Hi,

Thank you for notice that

The fix is

Chagen in the HTML code where the slider is initialize

This:


div class="swiper-container swiper-init" data-effect="slide" data-parallax="true" data-pagination=".swiper-pagination" data-paginationClickable="true" 

To THIS:

div class="swiper-container swiper-init" data-effect="slide" data-parallax="true" data-pagination=".swiper-pagination" data-pagination-clickable="true" 

The issue was data-paginationClickable=”true” which needed to be data-pagination-clickable=”true”

Regards.

Thank you for your help :)

is it framework7?
plus, may i change the theme full colors in ease?
thanks, looks good :)

Yes, all our mobile items, except BIOTIC (that use jquery mobile), use framework7 as main core for page ajax system.

Yes you can changes the colors from the CSS. But the icons colors need to be changed with a graphic program.

Thanks.

I downloaded the theme, how do I install it?

Hi,

Just copy the files to your server, and run index.html.

To edit them use any HTML editor.

Regards.

on phone – the homeview looks good (top half showing slider, bottom half showing icons)

on tablet – slider covers the entire screen, have to scroll down to see the icons. this created some usability problems as some users didn’t know there are actually icons below.

how can i make it so that on tablet, the proportion is as per phone – top half showing slider and bottom half showing icons?

thank you!

i see. mine is a samsung note 10.1 2014 edition.

any solutions for such devices?

Ok so your tablet starts from 800 px in width in portrait mode.

A quick solution will be to edit the style.css file, at the bottom code where the media queries are change this:

/* --—TABLET PORTRAIT-—- / @media screen and (max-width: 780px) {

To this

/ --—TABLET PORTRAIT-—- */ @media screen and (max-width: 810px) {

It shoul work better.

Regards.

solution worked. thank you!

I’ve modified the blog JavaScript to display dynamic posts from my site.. but load more and showless stopped working.. Now blog.html shows all the posts from the site .. I am not sure why.. Could you please check the load more function?

this is how I’ve modified in ‘my-app.js’

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

        $(".post_entry").hide();    
        size_li = $(".post_entry").size();
        x=4;
        $('.post_entry:lt('+x+')').show();
        $('#loadMore').on('click', function() {
            x= (x+1 <= size_li) ? x+1 : size_li;
            $('.post_entry:lt('+x+')').show();
            if(x === size_li){
                $('#loadMore').hide();
                $('#showLess').show();
            }
        });

        var rootURL = 'https://www.example.com/wp-json/wp/v2/posts';

        $.ajax({
            type: 'GET',
            url: rootURL,
            dataType: 'json',
            success: function(data){

                $.each(data, function(index, value) {
                if(index % 2 == 0){jQuery('.posts').append('<div class="post_entry"><div class="post_thumb"><a href="blog-single.html"><img width="100%" src="'+value.better_featured_image.source_url+'" alt="" title="" /></a><div class="post_thumb_details"><a href="#" class="open-popup" data-popup=".popup-social"><img src="images/icons/white/love.png" alt="" title="" /></a></div></div><div class="post_details">' +
            '<h2><a href="blog-single.html">'+value.title.rendered+'</a></h2>' +
            '<p>'+value.excerpt.rendered+'</p></div></div>');
                }else{
                    jQuery('.posts').append('<div class="post_entry"><div class="post_details">' +
            '<h2><a href="blog-single.html">'+value.title.rendered+'</a></h2>' +
            '<p>'+value.excerpt.rendered+'</p></div><div class="post_thumb"><a href="blog-single.html"><img width="100%" src="'+value.better_featured_image.source_url+'" alt="" title="" /></a><div class="post_thumb_details"><a href="#" class="open-popup" data-popup=".popup-social"><img src="images/icons/white/love.png" alt="" title="" /></a></div></div></div>');
                }   
                });
            },
            error: function(error){
                console.log(error);
            }

        });
})

It’s hard to tell without testing the code. But we cannot test just this code, we need all the files you modified, and added.

Maybe if you can send us some files to test.

I was busy with another project.. ok.. do you have an email to send the files?

How to scroll to top during the contact form sending success error?

I could be able add new fields and get the values in the contact form..

My form is bit longer / lengthier than the phone screen.. so when the users sends the message the form stays at the bottom and the success or error message is displayed at the top below to the page title..

I’ve tried to some JavaScript code make to scroll to top in email.js but seems nothing is working..

how can scroll to to the page to show the success and error messages in contact form?

Glat it works.

If it works also with one $ it’s ok.

But var $$ = Dom7; it’s a variable used by framework7. You can see that in my-app.js at the begining.

Regards.

oh.. I did not know that.. never used framwork7 before.. thanks for the info

You are welcome.

Thank you too for choosing our template.

Regards.

Is it possible to display the calendar to select the date in an input field like jQuery date-picker or something similar .. I want to allow the users to select date and time in two different fields

ok.. I’ll do that manually.. And yes, it will be useful if you can include this in future updates..

another q

this another question

I am trying to display posts from a wordpress site. Do you have a code snippet that works to show the wordpress posts in phonegap? I’ve tried several nothing works.. I’ve installed Json API plugin and https://www.mysite.com/api/get_posts/ shows the ajax for all post.. But O could not display them in a page inside this template

Hi,

No I am afraid this is outside of knowledge area. You will have to ask a wordress-phonegap developer.

Regards.

I want to display the photo gallery 2 columns per row but by default ‘three column’ per row is active. So I’ve changed <div class="gallery_switch"> <a href="#" id="view13" class="switcher active"><img src="images/switch_13_active.png" alt="Grid" /></a> <a href="#" id="view12" class="switcher "><img src="images/switch_12.png" alt="Grid" /></a> <a href="#" id="view11" class="switcher"><img src="images/switch_11.png" alt="List" /></a> </div>

To

<div class="gallery_switch"> <a href="#" id="view13" class="switcher"><img src="images/switch_13_active.png" alt="Grid" /></a> <a href="#" id="view12" class="switcher active"><img src="images/switch_12.png" alt="Grid" /></a> <a href="#" id="view11" class="switcher"><img src="images/switch_11.png" alt="List" /></a> </div>

but still the page by default is shows the 3 photos per row.. how can I change to two photos per row when 1st time we visit to the page?

Hi,

Change also the class of the listing photos

ul id="photoslist" class="photo_gallery_13" 

TO:

ul id="photoslist" class="photo_gallery_12" 

Regards.

Thanks.. that did the trick..

I am about to purchase this beautiful template..

I want to create an app using phonegap.

will you help me if I face any use when I add an extra field to the contact form or when I create another form? or you will say something like “that is related to phonegap go check there forum and doc” ?

Do you have a support forum for this? or you are replying / giving solution in this comment section only?

Hi,

Thank you for considering purchasing our mobile template.

Our support will only be related to the files inside the template. So anything that is allready in the code of the template files.

About “add an extra field to the contact form or when I create another form”. Yes this kind of support we offer. We can guide on adding other fields in the contact form or something related to this.

For phonegap is something else. You will have to get help from a phonegap developer. It’s not our specialization.

Yes we usually offer support using this comments section, since other users might find some answers helfully.

And for other small customizations we offer support by email.

Best Regards.

google analytic is not showing any clicks on the page.

no i am not getting this error but google analytics is not reflecting the click on the template spoke to my marketing team they said maybe your code have some issues.

Can you show me your online demo?

I am not sure how this template can influence your analitycs code. It’s a simple HTML template.

Regards.

But are you trying to receive data from the main index page right? Not from the secondary pages?

hi, i’ve a quick question on redirection upon ajax success.

i’ve built a page where there is an ajax booking form when submit goes to my server. upon successful insert, the php script echos a success back.

for now i’ve set a javascript ‘window.location.href = “success.html”’ which is linking correctly but on the success.html page it seems to be only showing up as a standalone html page without any css formatting (header is missing, font is missing, and so on…)

can i know how i should link it so that it’ll show up normal? or maybe is there another way i should do the redirection upon ajax success?

thank you for your help on this.

note: i am using the success.html which came along with the theme

Hi,

I don’t know where you saw the success.html file in the theme since we did not added one.

But it’s easy to do what you want there.

So you have build a success.html page in the format like the rest of the pages are.

On top of that page code you added I guess this like

div data-page=”success” class=”page no-toolbar no-navbar”......

If not just make sure you have data-page=”success” there…

Now in javascript where you build you success function redirect to sucess.html with javascript like this:


if (response === 'success') {

    mainView.router.loadPage(succes.html)

}

So this line mainView.router.loadPage(succes.html) will load you the success page into the view.

Let me know if that worked.

Regards.

thanks for the support!

slight change required for the javascript: mainView.router.loadPage(‘success.html’);

working fine now. cheers!

Ok great!

Regards.

Hi, can i know how can i disable the page transition through AJAX and make every click a full page load? I’m currently using this template on a PhoneGap project and my javascript to call php scripts are not working properly. I’m pretty bad with such codings so please be patient with me if I’m not talking much sense here. Thank you.

Either you create another function like

        (function() {
            [].slice.call( document.querySelectorAll( 'select#selectoptions' ) ).forEach( function(el) {    
                new SelectFx(el, {
                    stickyPlaceholder: false
                });
            } );
        })();

With another ID here select#selectoptions

Or you modify the function, addinv instead of # as ID, the ”.” for class: select.selectoptions

Like this:

        (function() {
            [].slice.call( document.querySelectorAll( 'select.selectoptions' ) ).forEach( function(el) {    
                new SelectFx(el, {
                    stickyPlaceholder: false
                });
            } );
        })();

Then remove the select ID in the HTML, and add it as a class

                <select class="cs-select cs-skin-overlay selectoptions">
                    <option value="" disabled="disabled" selected>select options</option>
                    <option value="1">select one</option>
                    <option value="2">select two</option>
                    <option value="3">select three</option>
                    <option value="4">select four</option>
                    <option value="5">select five</option>
                </select>

And use all the selects with this class.

Regards.

thanks for your reply but somehow by activating this function, jquery would not work.

currently i’ve coded this in the my-app.js

$(’#selectoptions’).change(function () {

... do something and populate another field

}

without activating the function everything is working fine but it will not work if i activate the function.

any idea why is this so?

Hi,

If you will change the ID to class, is normal for this function not to work

$(’#selectoptions’).change(function () {

... do something and populate another field

}

Thank the # to .

$(’.selectoptions’)

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey