Discussion on Mobix - HTML Mobile Template

Discussion on Mobix - HTML Mobile Template

Cart 1,532 sales
Well Documented

mobiokit supports this item

Supported

265 comments found.

hi, i need your help. all links at your html file use #!/{tofile.html} after link opened. is it possible to cut out #! because I need ‘normal’ link thanks

Hi,

Use this code to redirect to index page when logout.

  mainView.router.loadPage('index.html');

Add it to your logout function, in js code of the logout button, for example.


logout function........{

           mainView.router.loadPage('index.html');

        }
....

Hope it helps.

thanks for your answer. but it’s not worked. so I tried to use :
$('#logout').click(function(){
          //mainView.router.loadPage("index.html");  failed!
          //setTimeout('window.location.href = "index.html";',1000); failed!
          window.location.href = "./"; // it's worked
      });
it’s worked!

Hi,

If your solution worked, than use it like that.

mainView.router.loadPage(‘index.html’); works also, but I assume something was wrong setup there.

Regards.

<div class=”toolbar”> <div class=”toolbar-inner”> <ul class=”toolbar_icons”> <li><a href=”#” data-panel=”left” class=”open-panel”><img src=”images/icons/white/user.png” alt=”” title=”” /></a></li> <li><a href=”http://www.test.com”><img src=”images/icons/white/photos.png” alt=”” title=”” /></a></li> <li class=”menuicon”><a href=”menu.html”><img src=”images/icons/white/menu.png” alt=”” title=”” /></a></li> <li><a href=”blog.html”><img src=”images/icons/white/blog.png” alt=”” title=”” /></a></li> <li><a href=”contact.html”><img src=”images/icons/white/contact.png” alt=”” title=”” /></a></li> </ul> </div> </div> External links not jump

class=”external” solved

Hi,

Yes to link to an outside url use class=”external”

Regards.

It is possible to use the default framework 7 accordion style with this theme, as seen on top? http://framework7.io/docs/accordion.html Thank you in advance for your help.

We attempted to swap the code out and it created strange characters and format. Wondered if the style sheet may be causing this. Let us know if you have any suggestions. thx again.

This is the code I used in the template. Is it possible to send you a screenshot of how it looks once inserted? Thanks again.

!-- Separate collapsibles - omit "accordion-list" class-->

                    <div class="content-block-title">Separate Collapsibles</div>

                    <div class="list-block">

                        <ul>

                            <li class="accordion-item"><a href="#" class="item-content item-link">

                                <div class="item-inner">

                                    <div class="item-title">Item 1</div>

                                </div></a>

                            <div class="accordion-item-content">

                                <div class="content-block">

                                    <p>Item 1 content. Lorem ipsum dolor sit amet...</p>

                                </div>

                            </div>

                            </li>

                            <li class="accordion-item"><a href="#" class="item-content item-link">

                                <div class="item-inner">

                                    <div class="item-title">Item 2</div>

                                </div></a>

                            <div class="accordion-item-content">

                                <div class="content-block">

                                    <p>Item 2 content. Lorem ipsum dolor sit amet...</p>

                                </div>

                            </div>

                            </li>

                        </ul>

                    </div>

Hi,

Yes you can send us a screenshot using the contact form on our profile page. We will reply to your message, and then you can attach anything.

Also we will try to create a demo with that accordion to see how it works. And send it over to you.

Regards.

You could tell me how I can insert on my website a simulation of my webapp to make it look inside a smartphone frame. In a similar cla way you use in your pages in Themeforest

Have a nice day!

Sorry for the translation! :)

Hi,

There is a preview file included too, in the archive you have downloaded. See the preview.html file. That is the preview page we are using too.

Have a nice day too :)

How I can save the Mobix web app icon on my phone home screen?

Hi,

The same way for android. Just make sure you have Chrome update.

In the right top corner of the browser, after you load the page, click there, and select Add to Home screen. Then an icon is saved on your home screen, and you can launch the page as an app.

HERE are some other infos for other devices too.

Best Regards

Hi,

Forgive me but I think I have not expressed my question correctly (translation problems).

I need to insert on my website a framework Mobix emulating my webapp. Something similar to your demo:

http://themeforest.net/item/mobix-html-mobile-template/full_screen_preview/11093274

You can recommend a solution.

Thank you

Have a nice day!

Hi,

Our demo page is included in the archive you have downloaded with Mobix. If you will open preview.html page you will see it. You can use that solution if you think suits your needs.

Regards.

Hi,

Are you going to release new version of Mobix template ? when ?

Best Regards,

Hi,

An update will be released in march.

Regards.

Just purchast Is it possible to add a new popup from the left sidebar menu. The one like the twitter popup, but then directly instead off the feature.html. Now the class=close-popup

I tried to add open-panel to that class, but that did not work.

Thanks

Roland

Hi Roland,

To add a new popup in the template you need to:

1. Create the code in index.html file. No mater wher you will open, it needs to be in index.html because this is the main core file.

2. The code need to be place at the bottom of the file, where the login/register popups are

See as example the login popup. You will need to create the same the DIV structure like:

    <!-- NewPopup -->
    <div class="popup popup-new">
    <div class="content-block-login">
      <h4>Popup title</h4>
.....................your popup content......................
    </div>
    </div>

3. To open the popup from a link you need to create a link where want, in the pages or in the sidebar and to be like

<a href="#" data-popup=".popup-new" class="open-popup">open new popup</a>   

So the important thing is the class name “popup-new”

Hope this helps.

Regards.

Thank you verry much, it works fine, great job by the way

Regards.

Thank you too for choosing our template. Regards

Hi, nice template. I’m having a problem linking to a PHP page from a form. For some reason, the header isn’t loaded properly. I’m using <form action="results.php" method="post"> on a PHP page to pass the form results to another PHP page (results.php). If you go to: http://nail.guide/app/ and click on Find Treatment from the menu – you’ll see what I mean. Your help with that will be appreciated. Thanks.

Hi,

You will need to submit forms using ajax. See how we did with the contact form submision. And the php must be added from an external file. Like we used send.php to submit the form in contact.html file.

Being an ajax template, if you want to keep the template feel like an app, and not refresh the url, you must use ajax in all php code you will add.

Regards.

I see how you did it with contact form using email.js and then send.php as external php code. But it doesn’t help me much in my case. I was wondering if you could point me to some examples of how to use Ajax with a form that gets the values on submission, processes it and then displays them on the page. Thanks

Hi,

Yes my example is just a simple one. In your case you will need a database too. Since you want to store information, and then display them again.

You take for example some web tutorial where an ajax form store data

http://www.ondeweb.in/ajax-login-form-with-jquery-and-php/

Or check the framework7 info about form data, and form submit

http://www.idangero.us/framework7/docs/form-storage.html#.VsWHFuaTtBQ http://www.idangero.us/framework7/docs/form-ajax-submit.html#.VsWHVuaTtBQ

Regards.

Hai , can u help me to resolve my problem ? I want to make jcalender in mobix theme. Thx

Hi,

But is JCalendar a script for websites of desktop programs? Just read on their website is a java applet.

Why not use a jquery calendar, made more for web and websites. Do you want me to recomand one?

Regards.

Yup ,I mean jquery calender ? Can u give recomaand me one or more ?

Hi,

The most easy one as datepicker is the jquery default one, found here https://jqueryui.com/datepicker/

And as a full calendar is this one http://fullcalendar.io/js/fullcalendar-2.6.0/demos/basic-views.html

Depending on what you need, choose from those 2.

Regards.

Hello … is it compatible with phonegap and cordova ??

Hi,

We did received a lot of positive feedback from users that are using it with those solutions.

Hi, I have a problem about loading other .js file for example anypcker.js which is a datepicker like android date picker. I use asp.net mvc for my project. I load index page in localhost:xxx/Home/Index and in localhost:xxx/Home/OtherPage I include anypicker.js file and my own .js file. At /Home/?ndex file I linked /Home/OtherPage when ? click it. I saw a link in address bar like this “localhost:xxx/Home/Index#!//Home/OtherPage” but anypicker.js file and my own.js file don’t load. You will say ” load .js files on /Home/?ndex” but when I load my own.js file whic is determine textbox anypicker. Anypicker.js file can not find textbox whic will load /Home/OtherPage so script crashed then any of the script work proparly. Can you help me about this ?

Hi,

To load other js file corectly in the template you need to:

1. Load them in index.html file at the bottom, just like jquery is loaded

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>

2. If the function will be used on a secondary page, in my-app.js file use the call function inside the ”$$(document).on(‘pageInit’, function (e) {........................” function

See example how we are calling the validation function for example there

$("#RegisterForm").validate();

Shold work fine, if the code is corect.

Regards.

Hi,

I get an error like this , how can ? solve it?

XMLHttpRequest cannot load file:///C:/themeforest-11093274-mobix-html-mobile-template/mobix/mobix-html/contact.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Hi,

Where are you testing the files?

If they are on localhost, please upload them on a server, and test them with a mobile. The template uses ajax, and need a server to work normally.

Regards.

Uppss ! It is my fault . I try on a server and works fine. But When I add a form element for example select It display like a basic-simple html form element in page. What is my fault in this subject ?

Hi,

Use the class=”form_select” on the select

select name="" class="form_select"

See the form.html code for more inputs styling.

Regards.

Sincerely appreciate your prompt and specific responses. You mentioned that we will need to adapt one made in HTML to work properly in angular. We tried but couldn’t get it to work. Would be grateful for any support/guidance/references that you can provide. Please do share the cost/time estimate if you can do it on a chargeable basis.

Hi,

I am afraid we cannot help since we are not angular specialists. We work only on UI UX design for mobile and desktop (HTML/CSS/jQuery).

You will need to get help from a person that knows angular programing well. You will need to take just the design part from our template and implement in your framework. Will require to separate the framework7 we are using, and use just the HTML/CSS code in the files.

Regards.

We want to use mobix in our application which is built using angular.js ver 1.4.8. We are using angular’s in-built route-provider for routing. Can we use mobix and angular together while continuing to use the angular route-provider? Asking this because mobix has its own route-framework and guess any one routing mechanism can be used. Please help.

Hi,

Yes Mobix uses framework7 as main core-framework. I am not sure this will work integrated directly with angular.

Regards.

Hello, i just love the smooth feel of mobix. Bought and implementing in our application. Just noticed that mobix uses jquery ver. 1.10.1 whereas we are using jquery ver . 2.1.1, and this is creating conflicts. Can you give us mobix with this jquery version please? Thanks in advance :) Mahesh

Hi,

Will do some tests with the new jquery and see what the conflicts are.

Regards.

Hi! Wy this errore show “Uncaught TypeError: ScrollFix is not a function” http://prntscr.com/9s6wun

Can you fix it ?

The scroll function is used on mobile when you touch-scroll down on a page. It’s a fix function for some old mobiles that do not scroll all the height.

I think it’s present there because you are not on a mobile, and not using it. You a are testing in a demo desktop enviroment, and not actually use that function. There will no problems with that on mobile.

But if you really want to remove that, just go to my-app.js file and at the bottom you will see the function. Just delete it.

Regards.

Thank you

Please help fix rhe bug

Hi, Replied to your latest comment on our discussion.

Hi. I have a problem with gallery. When I view tha gallery and than click “back button” on any devices, gallery don’t close but Hash is change. Than I click “Close button”, and It close, but I stay in wrong page and any links dont’t work more

Because user click in back batton when want to exit gallery. We tested with different people

As you notice the gallery have a “X” icon to be close. And prev-next to navigate. Both X and nav hide after a sec, and will apear back once you tap once on the image.

I am afraid that is the only way it works.

To make it the way you want, and close the image with a back action from the mobile, will have to customize the template, and the gallery. Removing the popup behaviour, and create images like pages. This way when an user go and open an image, then hit back, will be redirected to the prev page, which should be the gallery listed thumbs.

Hope this make sense.

Ok. I understood, thank you

I’ve read a few related posts and I’m also trying to figure out how to allow zoom on an image preferably using the native tweezer/pinch gesture in iOS/Safari. Our use case is a page that has a map (just an image) which we would like users to be able to zoom in and move around a bit to explore. Any advice/workarounds that you can offer would be much appreciated!

Hi,

Here is a solution that is integrated into the framework allready.

1. Add a class=”pinchzoom” to your image or a custom name you want to give.

<img src="images/map.jpg" alt="" title="" class="pinchzoom" />

2. In my-app.js file add

var myPhotoBrowserStandalone = myApp.photoBrowser({
    photos : [
        'http://sindevo.com/mobix/images/map.jpg',
    ]
});

$$('.pinchzoom').on('click', function () {
    myPhotoBrowserStandalone.open();
});

Add this code inside $$(document).on(‘pageInit’, function (e) { ....function…. if your image is on a secondary page, or normally in the file outside of any function if your image is on the home page.

Replace the ‘http://sindevo.com/mobix/images/map.jpg', with your image link.

This will open a popup that will allow you to pinch zoom the image in it.

It will work, just test it.

Regards.

Hi, Great job on your Mobix HTML Mobile Template. Do you have the same template for a full web site in simple HTML?

Hi,

Thanks.

No, it’s a mobile dedicated template. Will work on mobile and tablets only.

Regards.

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