89 comments found.
hi im will build an apk for android 3.3.6 will it work for these version?
if not do you have a way to desable the animation or there is something that have to be desable in order to work…
im have these issue:
TypeError: Result of expression ‘this0.classList’ [undefined] is not an object. at file:///android_asset/www/js/framework7.js:9128
Hi,
To disable the animations you will need to edit some code.
The error influence somehow your layout? Because is coming from a file that is the core framework7. A file we did not modified, and it’s created by the framework7.
There are some users that requested also a version without the animations, this why we will release an update this days with another version with no animations.
Regards.
how do i fix these error:
TypeError: Result of expression ‘this0.classList’ [undefined] is not an object. at file:///android_asset/www/js/framework7.js:9128
Hi,
Looking at the original file framework7.js at that line, I see the line
else return this0.classList.contains(className);
in the function:
hasClass: function (className) {
if (!this[0]) return false;
else return this[0].classList.contains(className);
}
Looks ok to me there.
Will look to see also if framework7 new files, have updates on that too. Since we are using framework7 from their original website.
Regards.
Hello,
I am trying to link to an outside site. However, when I click the link, the wheel just spins. Any help you can offer for links/sites out side the directory would be greatly appreciated.
Thank you for your time,
Gerry
Hi Gerry,
To link outside the template files, use the class=”external”
So your link should be:
<a href="yourlink.com" class="external">Your link text</a>
Regards.
Why if i click index.html, its run, when i click other page its only loading ? not change page
Hi,
Test the template files online, on a server. If you are testing it locally, use a browser that support ajax, like firefox…
Will work.
Hi can i know does the contact form can send the info to google sheets?
As I know in order to have a contact form connected to google sheets, you must build it inside google sheets account.
I am not sure if an outside form can communicate with that.
Hi,
great template and well coded. i have one question what do you prefer a way to link this with backend like wordpress.
Please guide me on this.
Kind regards, Ali
Hi Ali,
To integrate this HTML template with Wordpress you will need to transform it into a wordpress theme. This will require wordpress coding knowledge.
Also will require to build an ajax wordpress theme, since the template pages are loaded with ajax. Only if you want to keep the look and feel of the template as an web app. Not to refresh the pages.
Regards.
Hi, i would like to change some page with Accordion function, but it is not working at all, can i know how can i solve this problem?
Hi,
What do you mean change the page with accordion? To add content on a page that have an accordion or to change the page when click on an accordion section?
Regards.
Sorry i have been solve the problem, but now i’m facing with there have no keyboard pop out when i want to fill in the input field
Hi,
But the input where you want to type text is touchable? Can you touch in it?
There is no code to make the keyboard not apear.
Can we see a demo url?
Regards.
How would I use this in a native app development project?
I just purchased this template. I am having an issue with the login and registration forms. When I click the submit button, the page just refreshes and nothing happens. When I leave the form blank, I don’t get any validation errors link in your demo. Can you please help?
Hi,
This template provides the login and register form only as design layout functionality. They include the validation jquery script, but no programming to store user data, and user accounts.
They are simple HTML templates.
The validation shold work fine when using the function ”$(”#LoginForm”).validate();”
In code.js file we are using that function for example to validate the forms.
If you want to use it for example on home page exactly when the template load, move the
$(”#LoginForm”).validate();
outside the function
$$(document).on(‘pageInit’, function (e) {
and add it inside the function
jQuery(document).ready(function() {
Or add it on the page you will want to create the login section.
We shold move that too in our demo since all the users are testing that right on loading. So thank you for notice that.
Regards.
Hi
I need a PSD files of codec-mobile-html-template template.
Reply ASAP.
Thanks
Hi,
We did not created a PSD design, since the layout do not contain graphics, it’s all made in code and CSS.
We can provide one for logo/loading screens, icons, if you want.
Regards.
Hi! I purchased your Codec Template few days ago.
I want to ask you if its posible disable the animations in the home screen and how to do it
Hi,
You need to edit:
For the menu animation:
1. In style.css the class
.main-nav ul li span{
display:block;
text-align:center;
padding:5px 0 0 0;
position:relative;
left:-100%;
font-size:18px;
}
DELETE the “left:-100%;”
2. In my-app.js
Delete the following code found in 2 place, one time under “jQuery(document).ready(function() {......” and the second time under “myApp.onPageInit(‘index’, function (page) {......”
$(".main-nav ul > li")
.css('opacity', '0')
.each(function(index, item) {
setTimeout(function() {
$(item).fadeTo('slow',1,"easeInOutCirc");
}, index*175);
});
$(".main-nav ul > li span")
.css('opacity', '0')
.each(function(index, item) {
setTimeout(function() {
$(item).animate({'left': '0px', 'opacity':1},500,"easeInOutCirc");
}, index*175);
});
For the logo animation.
1. In style.css under the class
.logo{
width:100%;
text-align:center;
color:#FFFFFF;
position:relative;
top:-50px;
padding:40px 0;
}
Delete the “top:-50px;”
2. In my-app.js delete the code
$(".logo").animate({'top': '20px'},'slow',"easeInOutCirc");
Found the same in 2 places.
Hope this helps.
Regards.
Thanks! works perfectly.
You are welcome. Glad it works.
Regards.
Hi again, can you tell me how to manage the categories in the shop page. What I have to add to make the filters works.
Hi,
Since the template is just HTML/CSS, you will need to make them function depending on your needs. You can simple link any icon to a page categories. Build the main categories page to see all the products, and when click to an icon of the categories to go to a page of one category.
Regards.
Thanks, I make it works, but theres another thing, in your demo categories it shown with bright colors but to me shown opaque look:
your demo http://s16.postimg.org/cir8ttp5h/Screen_Shot_2015_12_20_at_11_03_28_AM.png mine http://s18.postimg.org/4fw3hzmjd/Screen_Shot_2015_12_20_at_11_03_39_AM.png
How can I fix this?
Hi,
It looks to me like there is a black transparent window/png over the all section.
It must be something from the CSS code changed, like the Z index of a class. Did you modified something there?
Try to inspect that element in browser developer tool, to see what’s the z index value, or what DIV is in front of that section.
Regards.
Dude thank you very much! You’re awesome! I just have to change the location of the code to make it works.
You are welcome. Thank you too for choosing our template. PS: A nice rating on this item will motivate us to work harder 
.
Regards.Hi! is possible to add an PHP file instead a HTML file as a new page?, I mean if can I replace the blog.html with a blog.php and still keep the look and feel.
Hi,
Yes you can use php pages. But you can only test them on a server. Not locally.
But the best way to use php in this mobile template is with ajax. This way you can keep the extension .html
Regards.
Hi, again! Is there a way to disable the fade animation in the home screen?
Hi,
For both logo and menu icons?
Yes, for both logo and menu, I already disable the slide animation from the top and now I need to disable the fade animation.
Yes, for both logo and menu, I already disable the slide animation from the top and now I need to disable the fade animation.
Yes, for both logo and menu, I already disable the slide animation from the top and now I need to disable the fade animation.
Yes, for both logo and menu, I already disable the slide animation from the top and now I need to disable the fade animation.
Yes, for both logo and menu, I already disable the slide animation from the top and now I need to disable the fade animation.
Yes, for both logo and menu, I already disable the slide animation from the top and now I need to disable the fade animation.
Hi,
1. In my-app.js file
Under jQuery(document).ready(function() { .....delete the:
$(".logo").animate({'top': '20px'},'slow',"easeInOutCirc");
$(".cartitems").delay(1000).animate({'width': '30px', 'height': '30px', 'top':'10px', 'right':'10px', 'opacity':1},1000,"easeOutBounce");
$(".main-nav ul > li")
.css('opacity', '0')
.each(function(index, item) {
setTimeout(function() {
$(item).fadeTo('slow',1,"easeInOutCirc");
}, index*175);
});
$(".main-nav ul > li span")
.css('opacity', '0')
.each(function(index, item) {
setTimeout(function() {
$(item).animate({'left': '0px', 'opacity':1},500,"easeInOutCirc");
}, index*175);
});
Under myApp.onPageInit(‘index’, function (page) {.....delete the:
$(".logo").animate({'top': '20px'},'slow',"easeInOutCirc");
$(".cartitems").delay(1000).animate({'width': '30px', 'height': '30px', 'top':'10px', 'right':'10px', 'opacity':1},1000,"easeOutBounce");
$(".main-nav ul > li")
.css('opacity', '0')
.each(function(index, item) {
setTimeout(function() {
$(item).fadeTo('slow',1,"easeInOutCirc");
}, index*175);
});
$(".main-nav ul > li span")
.css('opacity', '0')
.each(function(index, item) {
setTimeout(function() {
$(item).animate({'left': '0px', 'opacity':1},500,"easeInOutCirc");
}, index*175);
});
2. In style.css
Edit
:
.logo{
width:100%;
text-align:center;
color:#FFFFFF;
position:relative;
top:-50px;
padding:40px 0;
}
Change top:-50px; to top:20px;
Edit
:
.main-nav ul li div.cartitems{
position:absolute;
top:20px;
right:25px;
z-index:999;
color:#FFFFFF;
width:1px;
height:1px;
text-align:center;
line-height:30px;
border-radius:15px;
color:#2d2e3e;
padding:0px;
font-size:14px;
font-weight:900;
opacity:0;
}
Change to
.main-nav ul li div.cartitems{
position:absolute;
top:10px;
right:10px;
z-index:999;
color:#FFFFFF;
width:30px;
height:30px;
text-align:center;
line-height:30px;
border-radius:15px;
color:#2d2e3e;
padding:0px;
font-size:14px;
font-weight:900;
opacity:1;
}
Edit:
.main-nav ul li span{
display:block;
text-align:center;
padding:5px 0 0 0;
position:relative;
left:-100%;
font-size:18px;
}
Change to :
.main-nav ul li span{
display:block;
text-align:center;
padding:5px 0 0 0;
position:relative;
left:0;
font-size:18px;
}
That’s all.
Regards.
Hi, I was thinking to buy this and my plan was to make an php website with this and call the url in android app and make the app but when I tried to call your url in app the design does not worked but when i tried it with other themes it worked.
Hi,
Where did you tried to call the url in the app? What solution are you using to transform the html template into an app?
If your plan is to use php you will need to use it with ajax. This way the php is loaded externally. As we know HTML template works integrated as app using solutions like phonegap and cordova, but only as html files extensions.
Regards.
Hi! Thank for beautifull theme. One question. How can i open the left panel from JS without “click” on the link?
I already found this information in framework7 documentation:)
Hi,
You can open it with swipe also.
Regards.
Hi! Thank for beautifull theme. One question. How can i open the left panel from JS without “click” on the link?
Hi,
You can open it with swipe also.
Regards.
Perfect!
I am testing on my phone and found a small problem when I click the .navbar_right , it works. The problem is to close again. On the computer works, but on the phone it does not close.
Hi,
You are talking about the usermenu icon that opens the right section ?
When that section is opened you should be able to close it from the left side. The small left side that remain opens. Anywhere you touch on that side the right section will close.
This shold work fine on any modern mobile with an updated os and browser.
Can you tell us the mobile model and os version, browser…
Regards.
I used Samsung S5 and not worked.
I accessed the url http://sindevo.com/codec/codec-blue/
Features clicked on , then the user ’s icon .
On the computer works fine , but the phone does not .
Hi,
But the menu icon from the left side works on the features page? They use the same code basically.
What’s the browser you are using?
Regards.
Your design offers custom forms which is good, but if a user wishes to encapsulate remotely-loaded HTML pages into a native container/app, this means that the pages cannot launch outside the index html page. So, whereabouts do you expect users of your designs to maintain urls for form actions please? Is this in a Javascript file like email.js? Best wishes and thanks.
Hi,
I am not sure what exactly are you trying to do, but the template is ajax based. To call for another page just use the ajax system. This way the url is not refreshed. And will keep the app look and feel.
To make the form dinamically using a database for your users info/details will require programming integrated with ajax. Like this you will keep all the action on page page only.
To integrate this into a native app you must use a solution like phonegap or cordova (will require code knowledge for integration.)
Regards.
Ajax and Cordova it is then, thanks. =)
You are welcome.
Hello there, is it possible to to show the menu in the left panel like biotic does? Thank you.
Hi,
You can only do that by customizing the HTML code. We have not created a demo page with that, but it’s a good idea for a future update.
Regards.
That would be a good idea, because most of the apps use left panel for navigation.
Ok will do it in the next update. Thank you for your feedback.
Regards.
Hi, Can you explain how the secondary pages works, please. I just read the documentation, but I really don’t understand. I’m trying to create a “includes” pattern where you can implement shared common part of the pages, like header, body, and some divs. So under the index.html you render the header from a different file called header.html, include body and make it variable on the secondary pages. How can I setup a application.html where only changes the page you are in and the rest is still the same for all pages? How the secondary pages are loaded and maintain all the css and the js files? Thanks a lot in advance
Hi,
The secondary pages are loaded with ajax as parts over index template.
The CSS and JS files are loaded on main index page. You can load a custom function just for a secondary page but add the code in index file. See for example my-app.js and how we are loading custom functions just for some pages.
Example just for index
myApp.onPageInit(‘index’, function (page) {
.............. }
For blog:
myApp.onPageInit(‘blog’, function (page) { }
For all secondary pages:
$$(document).on(‘pageInit’, function (e) { }
Hope this helps.
Does it works on android phone?
Hi,
Yes it works on all modern mobiles with touchscreen, and a new operating system.
Regards.
Hi, Im trying to use highcharts on a seconday page and I’m not able so see anything. I added <script src=”http://code.highcharts.com/highcharts.js”></script> <script src=”https://code.highcharts.com/modules/exporting.js”></script> to the index.html and I added: $(function () { $(’#container’).highcharts({ title: { text: ‘Nuestro avance en Redes Sociales’, x: -20 //center }, subtitle: { text: ‘Fuente: ciudadanos.org’, x: -20 }, xAxis: { categories: [‘Ene’, ‘Feb’, ‘Mar’, ‘Abr’, ‘May’, ‘Jun’, ‘Jul’, ‘Ago’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’] }, yAxis: { title: { text: ‘Número de visitas (miles)’ }, plotLines: [{ value: 0, width: 1, color: ’#808080’ }] }, tooltip: { valueSuffix: ‘°C’ }, legend: { layout: ‘vertical’, align: ‘right’, verticalAlign: ‘middle’, borderWidth: 0 }, series: [{ name: ‘León’, data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: ‘Barcelona’, data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: ‘Madrid’, data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: ‘Valladolid’, data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); }); to the my-app.js When I render the graph like this:
Im not able so see anything. I realised that If I use that code on the index, its showing the graph properly, but not on secondary pages. Any advices? Thanks a lot in advance
Hi All the custom js need to be added in index file. And the functions must be called from my-app.js file, for each page. See some example inside my-app.js where the functions are called inside pageinit functions for blog, photos…etc sections.
I already read that on the documentation and I’m not able to run the graph on the secondary page.. I dont know too much about JS, must I use the $(function () or just start with $(’#container’)... ?
We will try to add that code and test it but will take some time.
