-
Notifications
You must be signed in to change notification settings - Fork 1
/
mismatch_emoji.php
72 lines (66 loc) · 3.03 KB
/
mismatch_emoji.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
<link href="mismatch_emoji.css" rel="stylesheet">
</head>
<body>
<div id="emoji_all">
<div id="emoji_button">
<button id="emoji_show_btn" onclick="show_emoji()"> <img src="emoji_show.png"></img></button>
<button id="emoji_hide_btn" onclick="hide_emoji()"> <img src="emoji_hide.png"></img></button>
</div>
<div id="emoji_box">
<table >
<?php
$img_num=0;
for($i=1;$i<=12; $i++)
{
echo "<tr>";
for($j=0;$j<=5;$j++)
{
$img_num++;
$source="./selected emoji/".$img_num.".png";
?>
<td class="emoji" onclick="append_emoji('<?php echo $source ?>')"><img src= '<?php echo $source?>' ></td>
<?php
}
echo "</tr>";
}
?>
</table>
</div>
</div>
<script>
function append_emoji(emoji_clicked){
var emoji_img="<img style='display:inline' src='"+emoji_clicked+"'</img> ";
var input_box=document.getElementById('msg');
console.log(input_box.innerHTML);
try{
input_box.innerHTML=input_box.innerHTML.replace(/( )*/g,""); //for chrome and opera contenteditable problem
}
catch(err)
{
}
try{
input_box.innerHTML=input_box.substring(0, str.lastIndexOf("<br>")) //for mozzila contenteditable problem
}
catch(err)
{
}
console.log(input_box.innerHTML);
input_box.innerHTML=input_box.innerHTML+emoji_img;
console.log(input_box.innerHTML);
}
function show_emoji(){
document.getElementById('emoji_box').style.display="inline-block";
document.getElementById('emoji_show_btn').style.display="none";
document.getElementById('emoji_hide_btn').style.display="inline-block";
}
function hide_emoji(){
document.getElementById('emoji_box').style.display="none";
document.getElementById('emoji_hide_btn').style.display="none";
document.getElementById('emoji_show_btn').style.display="inline-block";
}
</script>
</body>
</html>