I've been dealing with an emoji issue since several weeks. I've been trying to add emoji to a chat using socket.io.
I have tried CSS emoji, Javascript emoji and so on. I have tried different options but nothing seems to work. I'm kind of desperate because, though I try and play with different options, I don't get the "smilies" to be displayed at all.
Right now I'm using this repository: https://github.com/wedgies/jquery-emoji-picker
I checked the readme, followed the examples and no, didn't work again.
This is my HTML code, the first CSS is the one I use for socket.io
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.emojipicker.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.emojipicker.js"></script>
<!-- Emoji Data -->
<link rel="stylesheet" type="text/css" href="css/jquery.emojipicker.a.css">
<script type="text/javascript" src="js/jquery.emojipicker.a.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#text-custom-trigger').emojiPicker({
width: '300px',
height: '200px',
button: false
});
$('#input-default').emojiPicker();
$('#input-custom-size').emojiPicker({
width: '300px',
height: '200px'
});
$('#input-left-position').emojiPicker({
position: 'left'
});
$('#trigger').click(function(e) {
e.preventDefault();
$('#text-custom-trigger').emojiPicker('toggle');
});
});
</script>
<style type="text/css">
#emojiPickerWrap {margin:10px 0 0 0;}
.field { padding: 20px 0; }
textarea { width: 400px; height: 200px; }
</style>
</head>
<body>
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<ul class="messages"></ul>
</div>
<input class="inputMessage" id="input-default" placeholder="¿Qué quieres decir?"/>
</li>
<li class="login page">
<div class="form">
<h3 class="title">Ingresa un nombre de usuario</h3>
<input class="usernameInput" type="text" maxlength="14" />
</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/main.js"></script>
</body>
</html>
I know this is easy, and knowing that is more frustrating.
I appreciate your help and advices.
Best regards.
I don't have all the code that you might have in your development env but from what you have given, I was able to put together a JSFiddle and it seems to work fine for me. JSFiddle
This code seems to show the emoji button just fine - $('#input-default').emojiPicker();
Your code runs without any problems, see the demo below.
$(document).ready(function(e) {
$('#text-custom-trigger').emojiPicker({
width: '300px',
height: '200px',
button: false
});
$('#input-default').emojiPicker();
$('#input-custom-size').emojiPicker({
width: '300px',
height: '200px'
});
$('#input-left-position').emojiPicker({
position: 'left'
});
$('#trigger').click(function(e) {
e.preventDefault();
$('#text-custom-trigger').emojiPicker('toggle');
});
});
#emojiPickerWrap {
margin: 10px 0 0 0;
}
.field {
padding: 20px 0;
}
textarea {
width: 400px;
height: 200px;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wedgies/jquery-emoji-picker/master/css/jquery.emojipicker.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/wedgies/jquery-emoji-picker/master/js/jquery.emojipicker.js"></script>
<!-- Emoji Data -->
<link rel="stylesheet" type="text/css" href="https://rawgit.com/wedgies/jquery-emoji-picker/master/css/jquery.emojipicker.a.css">
<script type="text/javascript" src="https://rawgit.com/wedgies/jquery-emoji-picker/master/js/jquery.emojipicker.a.js"></script>
</head>
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<ul class="messages"></ul>
</div>
<input class="inputMessage" placeholder="¿Qué quieres decir?" />
<input type="text" id="input-default" class="emojiable-option" placeholder="Default">
</li>
<li class="login page">
<div class="form">
<h3 class="title">Ingresa un nombre de usuario</h3>
<input class="usernameInput" type="text" maxlength="14" />
</div>
</li>
</ul>
If you see squares instead of the icons, your OS don't have the font that supports these symbols. For example, for Windows 7 you need to install an update KB2729094, see this article for more details.
Also, you're including two copies of jQuery library, remove the older one 1.10.2.
Related
I want my last div to have an image for a background and fill up the remaining space on the page. I'm not seeing the image, so I'm not 100% sure it's even filling up the page. Does anyone see my error?
css
#uploader {
min-height: 100%;
height: auto;
height: 100%;
background-image: url('hiki.jpg');
}
html
<label for="icon"><b>Upload Your Own!</b></label>
<input type="file" accept="image/*" id="uploadSelector" name="icon">
<button type="submit" onclick="uploadPhoto()">Submit File</button>
</div>
full html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tracks App</title>
<!-- jquery js -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<!-- Custom js -->
<script type="text/javascript" src="./index.js"></script>
<!-- jquery mobile js -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Sytlesheets -->
<link rel="stylesheet" type="text/css" href="./index.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<body>
<div data-role="page" id="body-1">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div data-role="header" id="mapNinfo">
<div id="googleMap">
<script
src="https://maps.googleapis.com/maps/api/js?key=Redactedcallback=myMap">
</script>
</div>
<div id="showInfo">
<img id="customerIMG">
<p id="customerINFO"></p>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--<ul id="list-1"></ul> -->
</div>
<div data-role="main" id="tableNstuff">
<div id="newCustomer">
Add Location
<div id="popUp" style="background-color: #ffff99; display: none">
<label for="cName">Enter Customer Name :</label><input type="text" id="cName" name="cName"><br>
<label for="cAddress">Enter Address :</label><input type="text" id="cAddress" name="cAddress"><br>
<label for="cCSZ">Enter City, State Zip :</label><input type="text" id="cCSZ" name="cCSZ"><br>
<label for="cAddress">Enter Lat:Lang :</label><input type="text" id="cLatLang" name="cLatLang"><br>
<button class="ui-shadow ui-btn ui-corner-all" onclick="submitCustomer()">Submit</button>
</div>
</div>
Add Current Location
<div id="uploader">
<label for="icon"><b>Upload Your Own!</b></label>
<input type="file" accept="image/*" id="uploadSelector" name="icon">
<button type="submit" onclick="uploadPhoto()">Submit File</button>
</div>
</div>
</div>
</body>
</html>
Thank you very much.
try putting the full path. Not 100% sure it'll work but it's a start.
#uploader{min-height: 100% ;height: auto; width: 100%(add this too); height: 100%; background-image: url('C:\example\hiki.jpg OR https://example.com/hiki.jpg')}
This probably won't completely fix it but it's a start. If it doesn't work you can implement some more JavaScript that will save the dimensions of the image as a variable and then plug it into the CSS.
There are 2 simple solution:
Use calc from CSS3 by adding height: calc(100vh - 100px);. 100px here is the height of the top content above the div.
Best solution is using flexbox. See simple demo https://jsfiddle.net/hhuy424/7a3qm49e/11/
html
<body>
<div>header</div>
<div class="content"></div>
</body>
css
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
background-color: #880000;
}
Just wanted to ask a quick question with my jquery code. just started using Jquery/JS and I feel like there is a cleaner way to do this. It does fade to "and much more" but when it goes back, its not a fade its more of a switch.
$(document).ready(function() {
setInterval(swapText, 4000);
function swapText(){
$("#profile-text-fade").fadeOut(500, function() {
$(this).fadeIn(1000).delay(2000);
$(this).html('and much more!');
$(this).fadeIn(2000, function () {
$(this).html('In the making, Soon to show all the work I can crate!');
});
});
}
});
body {
background-color: #FFC85E;
}
.aligh {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.jumbotron_resize {
padding-top: 18%;
padding-bottom: 10em;
margin-bottom: 10em;
background-color: #FFC85E;
font-size: 1.2em;
}
h1, p{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Profile Test Page">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Salvador Cervantes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel='stylesheet' type:'text/css' href='../CSS/main.css'>
<title>
Test page
</title>
</head>
<body>
<div class="align">
<div class="jumbotron jumbotron-fluid jumbotron_resize">
<div class="container">
<h1 class="display-3">test Profile</h1>
<p id='profile-text-fade' class="lead">In the making, Soon to show all the work I can crate!</p>
</div>
</div>
<footer>
<div>
<p>© 2017
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src='../js/main.js'></script>
</body>
</html>
Now what I'm trying to do is to fadeout the text that is on the webpage and replace it with "and much more!" and then fade back to the original text of "in the making...". right now, the last part just snaps back to place and dones't fade. Any help would be amazing!
Thank you
Your text is not fading in as you don't fade it out. ie it does: $("#div").fadeIn().fadeIn()
Change your last fadeIn to:
$(this).fadeOut(500, function() {
$(this).fadeIn(2000, function () {
$(this).html('In the making, Soon to show all the work I can crate!');
You might like to consider a refactor to create a list of messages and then simply loop through them. This will also be re-usable and allow you to add more messages without lots of nasty callback-chaining, eg:
var msgs = ["msg1", "msg2"];
var indx = 0;
$("#div").text(msgs[indx]);
setInterval(function() {
$("#div").fadeOut(
500,
function() {
indx++;
if (indx>=msgs.length) indx=0;
$(this).text(msgs[indx]);
$(this).fadeIn(500);
});
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>initial message</div>
I think this is what you needed edited your code, you have to fadeOut it before the last fadeIn, (i have slightly increased the interval for some smooth effect)
$(document).ready(function() {
swapText();
setInterval(swapText, 6000);
function swapText(){
$("#profile-text-fade").stop();
$("#profile-text-fade").fadeOut(1500, function() {
$(this).html('and much more!');
$(this).fadeIn(1500);
$(this).fadeOut(1500, function () {
$(this).fadeIn(1500);
$(this).html('In the making, Soon to show all the work I can crate!');
});
});
}
});
body {
background-color: #FFC85E;
}
.aligh {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.jumbotron_resize {
padding-top: 18%;
padding-bottom: 10em;
margin-bottom: 10em;
background-color: #FFC85E;
font-size: 1.2em;
}
h1, p{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Profile Test Page">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Salvador Cervantes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel='stylesheet' type:'text/css' href='../CSS/main.css'>
<title>
Test page
</title>
</head>
<body>
<div class="align">
<div class="jumbotron jumbotron-fluid jumbotron_resize">
<div class="container">
<h1 class="display-3">test Profile</h1>
<p id='profile-text-fade' class="lead">In the making, Soon to show all the work I can crate!</p>
</div>
</div>
<footer>
<div>
<p>© 2017
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src='../js/main.js'></script>
</body>
</html>
I'm attempting to use mgcrea's Angular.js pull-to-refresh library, but I cannot get it to pull down and fire off. I can see the dotted line where it starts above the div, but it won't pull down at all. I'm not getting any errors in the Chrome Console or on Logcat.
index.html: Both the pull-to-refresh.js and css files are included here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mobile Dashboard</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Droid+Sans:400,700" />
<link rel="stylesheet" href="assets/css/mobile-angular-ui-base.css" />
<link rel="stylesheet" type="text/css" href="assets/fonts/icons.css" />
<link rel="stylesheet" type="text/css" href="assets/css/angular-pull-to-refresh.css" />
<script src="assets/js/libs/angular.min.js"></script>
<script src="assets/js/libs/angular-route.min.js"></script>
<script src="assets/js/libs/angular-touch.min.js"></script>
<script src="assets/js/libs/angular-sanitize.min.js"></script>
<script src="assets/js/libs/mobile-angular-ui.min.js"></script>
<script src="assets/js/libs/angular-pull-to-refresh.js"></script>
<script src="assets/js/app.js"></script>
</head>
<body ontouchstart="" ng-app="mobile" class="blue">
<div class="app">
<div class="navbar navbar-app navbar-primary navbar-absolute-top">
<div class="navbar-brand navbar-brand-left">
<div class="logo">
<img src="assets/img/logo_small.png" width="50px" height="50px" />
</div>
</div>
</div>
<div class="app-body">
<ng-view class="app-content"></ng-view>
</div>
</div>
</body>
</html>
miners.html: I've tried placing pull-to-refresh in both the top div and the ul, but no dice.
<div class="scrollable">
<ul id="miners" class="list-group list-group-table" pull-to-refresh="refresh()">
<li ng-repeat="miner in miners" class="list-group-item">
[foo code]
</li>
<li class="list-group-item">
[more foo code]
</li>
</ul>
</div>
Relevant css section
.scrollable {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
-webkit-backface-visibility: none;
-webkit-overflow-scrolling: auto;
}
At this point, I'm completely and totally stuck. Does anyone have any ideas on what I might have missed?
Unfortunately I believe mgcrea's angular pull-to-refresh project has been abandoned. Even the examples on his github readme no longer work, and there are several tickets indicating that other people are also not getting it to work.
I'm studying Jquery, and I was trying to do a simple SlideShow, but nothing happens...
Here's my HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/Style.css">
<meta charset="UTF-8">
<title>SlideShow</title>
</head>
<body>
<div id="slides">
<img src="imgs/1.jpg">
<img src="imgs/2.jpg">
<img src="imgs/3.jpg">
</div>
<script type="text/javascript">
$(function(){
$("#slides").cycle({
fx: 'fade',
speed:2000,
timeout:4000,
});
})
</script>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
</body>
</html>
My Css:
*{
margin: 0;
padding: 0;
}
#slides{
width: 1024px;
height: 768px;
margin: 0 auto;
overflow: hidden;
}
I also tried to change, this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
for this:
<script src="js/jquery-1.11.0.js"></script>
Nothing...
You need to include jQuery before your Cycle plugin, so reverse the order of your scripts here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
Also, it's better to include CSS before Javascript as well as putting your Javascript at the bottom of your page before closing </body> tag.
I just check out the demos for jquery-ui-map here http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map
This is exactly what I am trying to implement, its very basic, I just did as they did in the example but it doesn't seems working, I tested it on Chrome Desktop browser.
Here is the source:
<!DOCTYPE html >
<html >
<head>
<title>Map Search Page</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.0.1.min.css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100%; width:100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.services.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#home').live("pageinit", function () {
$('#map').gmap({ 'center': mobileDemo.center, 'zoom': 17 });
//$('#map').gmap('addMarker', { 'position': mobileDemo.center, 'animation': google.maps.Animation.DROP });
});
$('#home').live('pageshow', function () {
$('#map').gmap('refresh');
});
</script>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>Multi Color Rating</h1>
</header>
<div class="content" style="width:100%; height:100%; " data-role="content">
<div id="map">
</div>
</div>
<footer data-role="footer">
<h2> All Rights Reserved © 2012</h2>
</footer>
</section>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
This shows only header and footers for now.
There is one important thing, when I give some height to the map div, it shows Static map image.
Just got it working now, Source code is fine. There was a problem because jQuery Mobile Map respond to Touch event.
In Chrome touch event are not enabled by default, so just turn on the Touch event in Chrome Console.