Hello,
I'm developping an application for Gear2 wearable.
I apply a class to my html page (with style.css). The document is modified as specified in my class file. Then I add a function that modifies the class of some elements in my document. But the function is not taken in account and I can see my element modify by the new class. Following the code. I would like "Hello" become blue :
In my css file (slyle.css):
.blue {
color:blue;
}
In my html file
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,user-scalable=no"/> <title>Blue</title> <link rel="stylesheet" href="lib/tau/themes/default/tau.min.css"> <!-- "style.css" where I put the css information --> <link rel="stylesheet" href="css/style.css"> </head> <!-- apply the function when I load the document with onload --> <body onload="Onload_blue()"> <div class="ui-page ui-page-active" id="main"> <header class="ui-header"> <h2 class="ui-title">Hello Blue</h2> </header> <div class="ui-content content-padding"> <div id="blue">Hello</div> <div> World </div> </div> </div> </body> <script type="text/javascript" src="lib/tau/js/tau.min.js"></script> <script src="js/app.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="js/lowBatteryCheck.js"></script> </html>
In my JS file (app.js)
( function () {
window.addEventListener( 'tizenhwkey', function( ev ) {
if( ev.keyName == "back" ) {
var page = document.getElementsByClassName( 'ui-page-active' )[0],
pageid = page ? page.id : "";
if( pageid === "main" ) {
tizen.application.getCurrentApplication().exit();
} else {
window.history.back();
}
}
} );
} () );
function Onload_blue(){
$("#blue").addClass("blue");
}
Thank you for your help.
Vik