In my Ionic App, I want to use emojione for smiley in chat. Unfortunately, I didn't find useful documentation to show how to use emojione.
Now I want to create a popup that contain all list of smiley and it's related group. like this:
In downloaded files, There are png sprite of smiley and it's css file, But there isn't any HTML file that show the smiley list.
How can I create this list?
After research two days, I didn't find any answer on internet, So, I wrote the list (that contain all of the emoji with it's category) myself and solve the problem.
In downloaded folder at emojione.com, there is some file that I used to create list:
1. emojione.sprites.css That contain background-position and classname
2. emojione.sprites.png This is a sprite image of all emoji
3. emoji.json Than contain all emoji name,category, unicode and ...
I used ionic tab and angular ng-repeat and groupBy filter in angular-filter
angular-filter: Bunch of useful filters for AngularJS
Important: Use unicode In emoji.json for each emoji classname to show emoji in background of an element(spite).
HTML
<div class="emoji-wrapper">
<div class="tabs">
<a ng-repeat="(key, value) in emojies | groupBy:'category'" class="tab-item" ng-click="changeTab($index)">
{{key}}
</a>
</div>
<div ng-repeat="(key, value) in emojies | groupBy:'category'" id="{{key}}" ng-show="tabActive[$index]">
<ul>
<li ng-repeat="emoji in value">
<span class="emojione emojione-{{emoji.unicode}}"></span>
</li>
</ul>
</div>
</div>
JS
$scope.emojies = [];
$scope.tabActive = [];
$scope.tabActive[0] = true;
$http.get("emoji.json").then(function (response) {
angular.forEach(response.data , function ($elem , $index) {
$scope.emojies.push($elem);
});
});
$scope.changeTab = function (index) {
$scope.tabActive = [];
$scope.tabActive[index] = true;
};
Related
I am creating a very simple WebView application on android. However, I want to edit the html file before displaying it in the WebView.
For example, if the original html source looked like :
<html>
<body>
<h1> abc </h1>
<h2> abc </h2>
......
<h6> abc </h6>
</body>
</html>
And I want to change it to:
<html>
<body>
<h1> cba </h1>
<h2> cba </h2>
......
<h6> cba </h6>
</body>
</html>
(all "abc" become "cba")
And then, I want to display that new code in my WebView. How can I do this? thanks
I am not sure why do you need this and what kind of app it is to need this. But if you have to do it check foll code:
$(function() {
for(var i =0;i<101;i++) {
if(jQuery('h'+i).length)
jQuery('h'+i).html(jQuery('h'+i).html().split("").reverse().join(""));
}
});
First, a note on your header tags: <h100> is a common misconception for newcomers. <h_> tags are simply an organizational item for your page, and only go out to <h6> You can have multiple <h1> tags on the same page, which are just headings for that section of content (with <h2> implying a subsection of <h1>, etc).
From there, when you say "original source", I assume you mean this is your own code, correct? Not a WebView sourced from another site? If this is the case, and you are only looking to change a specific instance of a specific string in your own code, a Find and Replace should be sufficient via any text or code editor you are using.
But if this is the case, you might want to look into first learning HTML and being able to render it in a basic web browser before moving on to also trying to learn Android.
For the first time i am trying my hand On Android Phonegap application.For the same i am designing a sample application where i have to pass some parameters from one HTML page to another .Here is the HTML for my first page ..
<div class="choice_list">
<ul data-role="listview" data-inset="true" data-filter="true">
<li> <img src="images/will.jpg"/> <h3> Will Smith </h3></li>
</ul>
</div>
Now as per my requirement i have to pass the <h3> parameter to my next HTML page i.e empdetails.html and display it there as soon as the link button gets clicked..
Here is my empdetails.html HTML..
<div id="header2">
<h2>Name: "I need to show name here"</h2>
</div>
Please help me to get this ..I am very new in this ..
Thanks ..
You can use local storage in phonegap (set on first page)
window.localStorage.setItem("key", $("h3").text());
For get the local storage use(set on second page)
var data=window.localStorage.getItem("key");
Using Local Storage is the solution, you can read more here.
append function to add list-item with unordered /ordered list> dynamically not working in android emulator,but works in browser's well.
I tried to develop android app using html code.when running in browser,the code works perfectly.but fails when trying to integrate it with android emulator with eclipse
Thanks in advance
this is the html what i have tried followed by js
<ul data-role="listview" id="listview1" data-inset="true" data-theme="c" data-dividertheme="b">
</ul>
<script>
var myvalues = new Array("123","345","5534");
var ccab=myvalues.length;
for(row=1; row <= ccab; row++) {
$("#listview1").append('<li><input type="radio" name="nutwork"id="radio'+row+'"value="radio'+row+'"/><label for="radio'+row+'">'+myvalues[row-1]+'</label></li>');
}
</script>
You should use id of ul while appending:
Use:
$("#listview1").append('');
Instead Of
$("#listview").append('');
I am trying to develop a shopping cart system using kendo-ui mobile and phonegap. First I am listing all the items in a list view. In each listview item, there will be one plus button, minus button and a label.I am using this combination for selecting the quantity of items.So, if we click plus button, the label value should be 0+1=> 1 and when we click minus, it should be like 1-1=>0 .To change the value of label when clicking button, I am passing the id of label to change the corresponding label value. But I am not able to pass the id form html to javascript, like I do in web development. Here is my code,
My listview item template,
<script type="text/x-kendo-tmpl" id="endless-scrolling-template">
<div class="product">
<img src="images/image.jpg" alt="#=ProductName# image" class="pullImage"/>
<h3>#:ProductName#</h3>
<p>$#:kendo.toString(UnitPrice, "c")#</p>
<a id="minus" data-role="button" data-click="minus(#:ProductID#)" >-</a>
<label id=#:ProductID#>0</label>
<a id="plus" data-role="button" data-click="plus(#:ProductID#)" data-name="plus">+</a>
<a id="loginButton" data-role="button" data-click="login">Add to Cart</a>
<div class="console"></div>
</div>
and my javascript functions,
<script>
function plus(itemid) {
var quantity=document.getElementById(itemid).innerHTML;
document.getElementById(itemid).textContent = parseInt(quantity)+1;
}
function minus(itemid) {
var quantity=document.getElementById(itemid).innerHTML;
document.getElementById(itemid).textContent = parseInt(quantity)-1;
}
</script>
Can anyone please tell me what Iam doing wrong here? Or can you provide an alternate solution?
When using Kendo, you can use Kendo MVVM. When JS objects are wired up in views using Kendo MVVM, when the value of the input elements change, the value of the JS objects reflects the change automatically. So what you need to do is to create a JS model for your view and set it as your view's model using data-model="yourModel". See this link: http://docs.kendoui.com/getting-started/mobile/mvvm
In your scenario here I think this link will help you: http://demos.kendoui.com/web/mvvm/source.html
This behavior is explained in the Kendo mobile book I wrote and you can see the checkout screen of the sample application built for the book here: http://movies.kendomobilebook.com/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How-to store variable beetween jQM pages?
I am new to jquery mobile and a bit confused of sending data to another page. In my html file it consists of listview. when i click on list it needs to redirect to another page and at the same time i want to send data in that list to second page.
Actually my code is..
Polls.html
<body>
<section id="pollsscreen" data-role="page">
<header data-role="header" >
<h1> Video </h1>
Back
</header>
<div data-role="content">
<ul id="pollslist" data-role="listview" data-theme="e" >
</ul>
</div>
</section>
</body>
Polls.js (my javascript file)
var addPollsList = function addPollsList() {
$("#pollslist").prepend("<li><a href='pollsdetails.html'>What is your name?</a></li>");
$("#pollslist").prepend("<li><a href='pollsdetails.html'>Give review of new movie..</a></li>");
$("#pollslist").listview("refresh");
}
pollsdetails.html
<section id="pollsdetailspage" data-role="page">
<header data-role="header">
<h1> Polls </h1>
Back
</header>
<div data-role="content" class="pollsdetailsscreen">
<p>Polls details page</p>
</div>
</section>
</body>
As per the code everything is working good. when i click on list it is redirecting to "pollsdetails.html" file. But here i am not getting any idea how to send the data to that html page and i want to set that data to tag in pollsdetails.html page. can anyone help me with this.......
Thanks in advance...
you can use global variables for this..
In Polls.js
var addPollsList = function addPollsList() {
$("#pollslist").prepend('<li>What is your name?</li>');
$("#pollslist").prepend('<li>Give review of new movie..</li>');
$("#pollslist").listview("refresh");
}
function test1(data){
// set urs global variable here
global_variable = data;
$.mobile.changePage( "pollsdetails.html");
}
function test2(data){
// set urs global variable 2 here
global_variable_2 = data;
$.mobile.changePage( "pollsdetails.html");
}
and in pollsdetails.js you can access global_variable and global_variable_2.
You could use Query string parameters if you are trying to pass simple name-value pairs to the next page.
var addPollsList = function addPollsList() {
$("#pollslist").prepend("<li><a href='pollsdetails.html?myparam=value1'>What is your name?</a></li>");
$("#pollslist").prepend("<li><a href='pollsdetails.html?myparam=value2'>Give review of new movie..</a></li>");
$("#pollslist").listview("refresh");
}
I would go with Localstorage
var userReview = {
"Name":"Bob",
"Review":"Awesome party movie!!",
"MovieTitle":"Project X"
};
//Store the object in local storage
localStorage.setItem('UserReview',JSON.stringify(userReview));
then you can always call the localstorage to get the info back when you navigate to a different page.
var userReview = JSON.parse(localStorage.getItem("UserReview"));
var userName = userReview.Name;
var review = userReview.Review;
var movieTitle = userReview.MovieTitle;