I have a database field which has different commands set to it. For e.g play, pause and stop. The client webpage loops for the command to be play. If the command is play it calls another function call playVideo() and should play a video in full screen. playVideo() function by itself works fine if I call it from onClick event of video tag but does not work as expected when it is called from the server response code. Have a look at the code. I need that working on Chrome Desktop and Chrome mobile browser.
<!DOCTYPE HTML>
<html>
<head>
<title>Demo: HTML5 video controls with JavaScript</title>
<style media="screen" type="text/css">
div.container {
background-color: #ddd;
margin: 0 0 20px;
padding: 1px 1px 0;
width: 1280px;
height: 720px;
}
p {
font: 14px/1.3 Verdana, sans-serif;
}
p.back {
bottom: 20px;
left: 10px;
position: absolute;
}
ul, li, p {
margin: 0;
padding: 0;
}
ul {
list-style: none;
overflow: hidden;
padding: 10px 0;
width: 100%;
}
li {
float: left;
}
li.play_pause {
padding-left: 10px;
width: 40px;
}
li.time {
text-align: center;
width: 160px;
}
li.volume {
padding-right: 10px;
width: 100px;
}
.control {
color: red;
cursor: pointer;
}
</style>
<!-- <script src="test_scripts/video.js" type="text/javascript"></script> -->
<script>
//var video = document.getElementById('video');
//video.addEventListener('click', function() {
//video.play();
//}, false);
//init();
window.onload = function() {
var pElement = document.getElementById("video");
pElement.load();
};
/*
var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
*/
function createObject() {
var request_type;
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
var nocache = 0;
/*
window.addEventListener(orientationEvent, function() {
alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width + screen.height);
}, false);*/
window.setInterval(function() {
waitForCommand();
}, 3000);
//waitForCommand();
function init() {
alert("init");
var element = document.getElementById('video');
element.load();
};
function waitForCommand() {
nocache = Math.random();
http.open('get', 'serverside/getcommand.php');
http.onreadystatechange = insertReply;
http.send(null);
}
var statusplay = 0;
function insertReply() {
if (http.readyState == 4) {
var response = http.responseText;
// else if login is ok show a message: "Site added+ site URL".
//alert(response);
if (response == "play" && statusplay == 0) {
alert("asddasd");
statusplay = 1;
var element = document.getElementById('video');
//element.click();
playVideo();
}
}
}
function playVideo() {
alert("123");
//document.getElementById('myvideo').play();
var element = document.getElementById("video");
//element.webkitEnterFullScreen();
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
document.mozRequestFullScreen();
alert("1212");
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
//element.webkitRequestFullScreen();
//document.webkitRequestFullScreen();
alert("1313");
} else {
alert("1414");
element.webkitEnterFullScreen();
}
//element.load();
//element.addEventListener("loaded", doSomething, true);
element.play();
//$('#video').attr({'autoplay':'true'});
}
function doSomething() {
//your redirect code here
alert("12321");
var element = document.getElementById('video');
element.play();
//playVideo();
}
</script>
</head>
<body>
<!--video id="video" src="http://tinyvid.tv/file/12lx2x62kr9io.ogg"></video-->
<div class="container" id="mydiv">
Contact
<style type="text/css">
.video_player {
width: 100%;
height: 100%;
display: block;
}
</style>
<video class="video_player" id="video" name="video" autobuffer onclick="playVideo()" poster="images/video-pc.jpg">
<source src="videos/BigBuck.m4v"> </source>
<source src="videos/BigBuck.webm" type="video/webm"> </source>
<source src="videos/BigBuck.theora.ogv" type="video/ogg"> </source>
</video>
<ul class="controls">
<li class="play_pause">
<p class="control" id="play">
Play
</p>
</li>
<li class="time">
<p>
<span id="timer">1</span>' of <span id="duration">0</span>'
</p>
</li>
<li class="volume">
<p>
Vol: <span class="control" id="v-dn" title="Volume down">-</span> / <span class="control" id="v-up" title="Volume up">+</span><span id="volume">10</span>
</p>
</li>
</ul>
</div>
<!--p><strong>NB:</strong> The video doesn't seem to work in Chrome for Mac/Linux; please use an alternative browser until I can resolve this problem.</p-->
<p class="back">
Back to post: Building HTML5 video controls with JavaScript
</p>
</body>
</html>
Got my answer,
requestFullscreen() can not be called automatically is because of security reasons (at least in Chrome). Therefore it can only be called by:
click (button, link...)
key (keydown, keypress...)
allowfullscreen attribute of the HTML element*
* W3 Spec:
"...To prevent embedded content from going fullscreen only embedded content specifically allowed via the allowfullscreen attribute of the HTML iframe element will be able to go fullscreen. This prevents untrusted content from going fullscreen..."
Read more: W3 Spec on Fullscreen
Related
Im injecting html and js in my web view. What im trying to do is allow support on my Android phone to connect to a local Node.js Server to send and receive Audio and Video.
This is my Server.js that runs:
const HTTPS_PORT = 8443;
const fs = require('fs');
const https = require('https');
const WebSocket = require('ws');
const WebSocketServer = WebSocket.Server;
// Yes, TLS is required
const serverConfig = {
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem'),
};
// ----------------------------------------------------------------------------------------
// Create a server for the client html page
const handleRequest = function(request, response) {
// Render the single client html file for any request the HTTP server receives
console.log('request received: ' + request.url);
if(request.url === '/') {
response.writeHead(200, {'Content-Type': 'text/html'});
response.end(fs.readFileSync('client/index.html'));
} else if(request.url === '/webrtc.js') {
response.writeHead(200, {'Content-Type': 'application/javascript'});
response.end(fs.readFileSync('client/webrtc.js'));
}
};
const httpsServer = https.createServer(serverConfig, handleRequest);
httpsServer.listen(HTTPS_PORT, '192.168.1.62');
// ----------------------------------------------------------------------------------------
// Create a server for handling websocket calls
const wss = new WebSocketServer({server: httpsServer});
wss.on('connection', function(ws) {
ws.on('message', function(message) {
// Broadcast any received message to all clients
console.log('received: %s', message);
wss.broadcast(message);
});
});
wss.broadcast = function(data) {
this.clients.forEach(function(client) {
if(client.readyState === WebSocket.OPEN) {
client.send(data);
}
});
};
console.log('Server running. Visit https://localhost:' + HTTPS_PORT + ' in Firefox/Chrome.\n\n\
Some important notes:\n\
* Note the HTTPS; there is no HTTP -> HTTPS redirect.\n\
* You\'ll also need to accept the invalid TLS certificate.\n\
* Some browsers or OSs may not allow the webcam to be used by multiple pages at once. You may need to use two different browsers or machines.\n'
);
This is the HTML thats viewable on the Webview in Android:
<!DOCTYPE html>
<html lang="en">
<head>
<title>P2P Video Chat</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=320, initial-scale=1" />
<script src="https://unpkg.com/peerjs#1.3.1/dist/peerjs.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<style>
div::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
#live {
background-color: #000;
height:100%;
width:100%;
}
#local-video {
width: 100%;
background-color:black;
}
#divider{
height:20px;
background-color:black;
}
#remote-video {
width: 100%;
background-color:black;
}
#end-call {
position: absolute;
top: 0;
left: 0;
padding: 8px;
background-color: red;
color: white;
border: none;
}
.d1{border-bottom:1px solid #ffffff;font-weight:bold;font-size:22px;color:#90CAF9;top:20px;left:20px;padding:8px;background-color:#0D47A1;opacity:0.7;text-align:center;}
.s1{color:white;font-size:12px;}
.d2{position:absolute;left:20px;top:20px;width:70px;height:70px;border-radius:35px;background-color:green;opacity:0.7;display:flex:justify-content:center;align-items:center;}
.i1{width:50px;height:50px;margin-left:10px;margin-top:10px;}
#record1{display:none;left:20px;border-radius:25px;width:50px;height:50px;position:absolute;background-color:red;opacity:0.7;padding:8px;color:white;font-weight:bold;font-size:18px;margin-top:-180px;z-index:400;}
#timer1{width:100%;margin-top:-50px;position:absolute;text-align:center;color:white;padding:8px;z-index:800;font-size:10px;}
.d3{position:absolute;opacity:0.7;padding:0px;color:white;font-weight:bold;font-size:18px;margin-top:-105px;display:inline-block;z-index:1000}
.d4{font-weight:bold;margin-top:-15px;margin-left:15px;position:absolute;width:120px;height:30px;z-index:300;}
.i2{float:left;width:50px;height:50px;margin-top:3px;}
.d5{float:left;color:black;margin-top:0px;margin-left:5px;}
.d6{position:absolute;color:gray;font-size:23px;text-align:center;z-index:200;width:100%;margin-top:-22px;padding:0px;background-color:white;}
.d7{background-color:white;padding:10px;border-radius:25px;font-size:23px;}
.d8{position:absolute;opacity:0.7;padding:0px;color:white;font-weight:bold;font-size:18px;margin-top:70px;display:inline-block;z-index:400;}
#timer2{width:100%;margin-top:80px;position:absolute;text-align:center;color:white;padding:8px;z-index:800;font-size:3px;}
#record2{display:none;left:20px;border-radius:25px;width:50px;height:50px;position:absolute;background-color:red;opacity:0.7;padding:8px;color:white;font-weight:bold;font-size:18px;margin-top:135px;z-index:100}
.d9{position:absolute;left:20px;bottom:20px;width:70px;height:70px;border-radius:35px;background-color:green;z-index:1200;opacity:0.7;display:flex:justify-content:center;align-items:center;}
.i3{width:50px;height:50px;margin-left:10px;margin-top:10px;}
.d10{border-top:1px solid #ffffff;text-align:center;font-weight:bold;font-size:22px;color:#90CAF9;position:absolute;left:0;bottom:0;right:0;padding:8px;background-color:#0D47A1;opacity:0.7;}
.s2{color:white;font-size:12px;}
/* Exact resolution */
#media (-webkit-device-pixel-ratio: 1) {
}
/* Minimum resolution */
#media (-webkit-min-device-pixel-ratio: 1.1) {
.d1{font-size:8px;}
.d2{width:40px;height:40px;background-color:red;}
.d2 img{width:20px;height:20px}
#record1{width:20px;height:20px;border-radius:10px; margin-top:-100px;}
#timer1{font-size:8px;}
#record2{width:20px;height:20px;border-radius:10px;margin-top:53px;}
#timer2{font-size:8px;margin-top:15px;}
.d3{font-size:12px;display:inline-block;}
.d5{font-size:8px;margin-top:4px;}
.d6{font-size:23px;}
.d8{font-size:12px;margin-top:50px;display:inline-block;}
.d3 img{ width:20px; height:20px;margin-right:5px; padding:2px;display:inline-block;}
.d8 img{ width:20px; height:20px;margin-right:5px;padding:2px;display:inline-block;}
.i2{float:left;width:20px;height:20px;}
.d9{width:40px;height:40px;background-color:red;}
.d9 img{width:20px;height:20px;}
.i4{width:20px;height:20px;margin-right:5px;}
.i5{width:20px;height:20px;margin-right:5px;}
.d7{font-size:10px;}
.d10{font-size:8px;}
.d11{display:inline-block;margin-top:16px;position:absolute;width:300px;font-size:8px;}
.d12{display:inline-block;margin-top:16px;position:absolute;width:300px;font-size:8px;}
}
/* Maximum resolution */
#media (-webkit-max-device-pixel-ratio: 3) {
}
</style>
</head>
<body style="margin:0;padding:0;overflow:hidden;" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">
<!-- App code -->
<div id="live">
<div class=""><div class="d1"><img class="i4" src="vote.png" />VOTE: <span class="s1">123</span></div></div>
<div class="d2"><img class="i1" src="like.png" /></div>
<video id="remote-video" autoplay muted="true"></video>
<div id="divider">
<div id="record1" class=""></div>
<div id="timer1" class="">15 seconds</div>
<div class="d3"><img class="i1" src="rap.png" /><div class="d11">MC Trix</div></div>
<div class="d4">
<img class="i2" src="views.png"/> <div class="d5">1.1k</div> </div>
<div class="d6"><div class="d7">VS</div></div>
<div class="d8"><img class="i1" src="rap.png" /><div class="d12">MC Trix and Metz</div></div>
<div id="timer2" class="">15 seconds</div>
<div id="record2" class=""></div>
</div>
<video id="local-video" muted="true" autoplay></video>
<input value="lfnvsfnsnfvsnvsn" style="z-index:10000;position:absolute;top:0;left:0;" type="button" onclick="start(true)" />
<div class="d9"><img class="i3" src="like.png" /></div>
<div class=""><div class="d10"><img class="i5" src="vote.png" />VOTE: <span class="s2">123</span></div></div>
<!--<button id="end-call" onclick="endCall()">End Call</button>-->
</div>
</body>
</html>
<script>
var timer = 15;
setTimeout(setTimer1, 5000);
var interval;
function setTimer1(){
interval = setInterval(setTimer1Elapsed, 1000);
}
function setTimer1Elapsed(){
--timer;
if(timer > 0){
$("#timer1").text(timer + " seconds");
}else{
$("#record1").fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });
$("#remote-video")[0].muted = !$("#remote-video")[0].muted;
$("#timer1").text("");
interval = null;
}
}
var timer2 = 15;
var interval2;
//function setTimer2AfterContestantFinish(){
setTimeout(setTimer2, 5000);
//}
function setTimer2(){
interval2 = setInterval(setTimer1Elapsed2, 1000);
}
function setTimer1Elapsed2(){
if(timer2 > 0){
$("#timer2").text(timer2 + " seconds");
}else{
$("#record2").fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });
$("#local-video")[0].muted = !$("#local-video")[0].muted;
$("#timer2").text("");
interval = null;
}
--timer2;
}
var height = $(document).height() / 2 - 60;
$("#remote-video").height(height);
$("#local-video").height(height);
$("#remote-video").css("opacity", 0);
$("#local-video").css("opacity", 0);
$("#live").width($(document).width());
$("#live").height($(document).height());
var localVideo;
var localStream;
var remoteVideo;
var peerConnection;
var uuid;
var serverConnection;
var peerConnectionConfig = {
'iceServers': [
{'urls': 'stun:stun.stunprotocol.org:3478'},
{'urls': 'stun:stun.l.google.com:19302'},
]
};
pageReady();
async function pageReady() {
uuid = createUUID();
localVideo = document.getElementById('local-video');
remoteVideo = document.getElementById('remote-video');
serverConnection = new WebSocket('wss://' + "192.168.1.62" + ':8443');
serverConnection.onmessage = gotMessageFromServer;
var constraints = {
video: true,
audio: false,
};
var stream;
if(navigator.mediaDevices.getUserMedia) {
stream = await navigator.mediaDevices.getUserMedia(constraints).catch(errorHandler);
getUserMediaSuccess(stream);
} else {
alert('Your browser does not support getUserMedia API');
}
}
function getUserMediaSuccess(stream) {
alert(uuid);
$("#local-video").css("opacity", 1);
localStream = stream;
localVideo.srcObject = stream;
localVideo.play();
}
function start(isCaller) {
peerConnection = new RTCPeerConnection(peerConnectionConfig);
peerConnection.onicecandidate = gotIceCandidate;
peerConnection.ontrack = gotRemoteStream;
peerConnection.addStream(localStream);
if(isCaller) {
peerConnection.createOffer().then(createdDescription).catch(errorHandler);
}
}
function gotMessageFromServer(message) {
if(!peerConnection) start(false);
var signal = JSON.parse(message.data);
// Ignore messages from ourself
if(signal.uuid == uuid) return;
if(signal.sdp) {
peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() {
// Only create answers in response to offers
if(signal.sdp.type == 'offer') {
peerConnection.createAnswer().then(createdDescription).catch(errorHandler);
}
}).catch(errorHandler);
} else if(signal.ice) {
peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler);
}
}
function gotIceCandidate(event) {
if(event.candidate != null) {
serverConnection.send(JSON.stringify({'ice': event.candidate, 'uuid': uuid}));
}
}
function createdDescription(description) {
console.log('got description');
peerConnection.setLocalDescription(description).then(function() {
serverConnection.send(JSON.stringify({'sdp': peerConnection.localDescription, 'uuid': uuid}));
}).catch(errorHandler);
}
function gotRemoteStream(event) {
console.log('got remote stream');
remoteVideo.srcObject = event.streams[0];
}
function errorHandler(error) {
console.log("xxxxx " + error);
}
// Taken from http://stackoverflow.com/a/105074/515584
// Strictly speaking, it's not a real UUID, but it gets the job done here
function createUUID() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}
</script>
I have the local video loading, just when the start(true) is causing the error:
WebSocket is already in CLOSING or CLOSED state.
I'm having real trouble trying to figure out why my code runs easily on both web and ios but shows a blank div on Android without any errors.
I'm using Ionic Angular and I've already triple checked Api keys.
My guess is that it has something to do with shadow-root but I failed in every attempt to fix it.
I'd be super gratefull for any insight I might be missing, Thanks in advance!
HTML:
<ion-content fullscreen class="mapContent">
<ion-grid class="container mapContent">
<ion-row class="mapContent">
<div #map id="map" class="map"></div>
</ion-row>
</ion-grid>
</ion-content>
TS:
#ViewChild('map') mapElement: ElementRef;
map: any;
constructor(
private geolocation: Geolocation,
) {}
ionViewDidEnter() {
this.loadGoogleMaps();
}
loadGoogleMaps(){
window['mapInit'] = () => {
this.initMap();
}
let script = document.createElement("script");
script.id = "googleMaps";
script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit';
document.body.appendChild(script);
}
initMap(){
this.mapInitialised = true;
this.geolocation.getCurrentPosition().then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
this.map.addListener("click", (e) => {
this.placeMarker(e.latLng, this.map);
});
});
}
CSS:
ion-content.mapContent {
--background: transparent !important;
}
ion-grid.mapContent {
--background: transparent !important;
}
ion-row.mapContent {
--background: transparent !important;
}
.map {
margin: 10px 5px 20px;
border-radius: 20px;
width: 100%;
height: 200px;
}
I need to have a footer which is always visible on the screen, except when the virtual keyboard is open. This is the default behaviour on iOS, however on Android the footer rises up above the keyboard. Can this be prevented?
<div class="cont">
<input />
<input />
<!-- Lots more inputs -->
</div>
<p class="footer">Footer</p>
.cont {
display: flex;
flex-direction: column;
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: blue;
color: white;
text-align: center;
height: 50px;
line-height: 50px;
}
https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/qBbROeG
here is a demo by using Jquery: https://codepen.io/nomi9995/pen/ZEQLyyy
here is a demo by using Javascript: https://codepen.io/nomi9995/pen/eYJgLbo
Actually when keyboard opens. it resize the screen. we can detect resize screen and give bottom to auto when keyboard open and give bottom to 0when keyboard close
Jquery
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
var sumedges = $(window).width() + $(window).height();
$(window).resize(function () {
if ($(window).width() + $(window).height() < sumedges) {
$(".footer").css("bottom", "auto");
} else {
$(".footer").css("bottom", "0");
}
});
}
Javascript
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
var sumedges = window.innerWidth + window.innerHeight;
window.onresize = function () {
if (window.innerWidth + window.innerHeight < sumedges) {
const footerArr = document.getElementsByClassName("footer");
for (let i = 0; i < footerArr.length; i++) {
footerArr[i].style.bottom = "auto";
}
} else {
const footerArr = document.getElementsByClassName("footer");
for (let i = 0; i < footerArr.length; i++) {
footerArr[i].style.bottom = "0";
}
}
};
}
I want to create a Group chat application based on Android and socket.io functionality just like Whatsapp.
I guess I don't really understand the question, but here is a very small simple chat room I wrote with socket.io a couple of years ago. I hope you can use it as a skeleton..
<body><ul id="Messages"></ul>
<form action="">
<input id="Message" autocomplete="off">
<input type="button" id="Send" value="Send">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$.getScript('socket.io/socket.io.js', function () {
initSocket();
});
var initSocket = function () {
var socket = io();
$('#Send').click(function () {
var userNameTag = $('#UserNameTag');
var nameTag = userNameTag.html();
if (nameTag) {
socket.emit('ioChatMessage', { text: nameTag + ': ' + $('#Message').val(), style: userNameTag[0].style });
} else {
socket.emit('ioChatMessage', { text: $('#Message').val() });
}
$('#Message').val('');
return false;
});
socket.on('ioChatMessage', function (msg) {
$('#Messages').append($('<li>').text(msg.text).css(msg.style));
});
window.onbeforeunload = function () {
socket.disconnect();
};
};
</script>
</body>
App.js
var app = require('express')();
var http = require('http').Server(app);
var socket = require('socket.io')(http);
app.get('*', function(req, res){
res.sendFile(__dirname + '/index.html');
});
socket.on('connection', function (io) {
io.on('ioChatMessage', function (msg) {
socket.emit('ioChatMessage', msg);
});
});
http.listen(process.env.PORT);
In this page you can learn how to build a chat group using socket.io in a browser:
https://socket.io/get-started/chat/
My recomendation if you want it to be an Android app is to do it like you see in the tutorial and then use Apache Cordova to make it an Android App anyone can install.
You can download it from here:
https://cordova.apache.org/
The final index.html should look like this:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
#messages { margin-bottom: 40px }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
window.scrollTo(0, document.body.scrollHeight);
});
});
</script>
</body>
</html>
And the index.js:
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var port = process.env.PORT || 3000;
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
http.listen(port, function(){
console.log('listening on *:' + port);
});
I am using Phonegap + jQueryMobile + Android. When I create my <li> static it is working fine, but dynamically it is not working like static. Please check what mistake I did in the code shown below:
In jquery:-
$(document).unbind('pageinit').bind('pageinit', function () {
callMenuConnection();
});
function callMenuConnection() {
$.support.cors = true;
$.ajax({
type: "GET",
url: "one.html",
contentType: "text/xml",
dataType: "xml",
data: "",
cache:false,
processData:false,
crossDomain:true,
success: processSuccess,
error: processError
});
}
function processSuccess(data) {
$(data).find("category").each(function () {
var id = $(this).find('id').text();
var title = $(this).find('title').text();
$('#cat_list').append('<li><span>'+title+'</span></li>');
});
}
function processError(data)
{
alert("error");
}
$(function(){
var step = 1;
var current = 0;
var maximum = $(".categories ul li").size();
var visible = 2;
var speed = 500;
var liSize = 120;
var height = 60;
var ulSize = liSize * maximum;
var divSize = liSize * visible;
$('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
$(".categories ul li").css("list-style","none").css("display","inline");
$(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");
$(".categories").swipeleft(function(event){
if(current + step < 0 || current + step > maximum - visible) {return; }
else {
current = current + step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
$(".categories").swiperight(function(){
if(current - step < 0 || current - step > maximum - visible) {return; }
else {
current = current - step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
});
In css:-
div.sc_menu {
/* Set it so we could calculate the offsetLeft */
position: relative;
height: 145px;
width: 300px;
overflow: auto;
}
ul.sc_menu {
display: block;
height: 110px;
/* max width here, for users without javascript */
width: 1500px;
padding: 15px 0 0 15px;
/* removing default styling */
margin: 0;
background: url('navigation.png');
list-style: none;
}
.sc_menu li {
display: block;
float: left;
padding: 0 4px;
}
.sc_menu a {
display: block;
text-decoration: none;
}
.sc_menu span {
/* display: none; */
margin-top: 3px;
text-align: center;
font-size: 12px;
color: #fff;
}
.sc_menu a:hover span {
display: block;
}
.sc_menu img {
border: 3px #fff solid;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.sc_menu a:hover img {
filter:alpha(opacity=50);
opacity: 0.5;
}
/* Here are styles for the back button, don't look at them */
#back {
display: block;
width: 500px;
text-align: center;
color: #003469;
font-size: 16px;
}
In Html5:-
<div data-role="page" data-theme="b" id="jqm-home">
<div class="categories">
<ul id="cat_list"></ul>
</div>
</div>
Try jqMobile + iScrollView + Infinite Scrolling.
For more details please check : Infinite Scrolling
And also You can see a demo here at the plugin site https://github.com/watusi/jquery-mobile-iscrollview
Refresh your ul list
function processSuccess(data) {
$(data).find("category").each(function () {
var id = $(this).find('id').text();
var title = $(this).find('title').text();
$('#cat_list').append('<li><span>'+title+'</span></li>');
});
$('#cat_list').listview('refresh');
}
OR
$('#cat_list').append('<li><span>'+title+'</span></li>').listview('refresh');
EDIT:
function processSuccess(data) {
var data="";
$(data).find("category").each(function () {
var id = $(this).find('id').text();
var title = $(this).find('title').text();
data+='<li><span>'+title+'</span></li>';
});
$("#cat_list").html(data).listview('refresh');
}
Try $('#mylist').listview(); to enforce rendering.
Finally i got the answer of these
In HTML5:-
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="footer" data-position="fixed" data-theme="c">
<div class="categories" id="cat">
<ul id="cat_list" class="cat_list_class"></ul>
</div>
</div>
</div>
In jquery:-
var step = 1;
var current = 0;
var maximum = 0;
var visible = 2;
var speed = 500;
var liSize = 120;
var height = 60;
var ulSize = liSize * maximum;
var divSize = liSize * visible;
$(document).unbind('pageinit').bind('pageinit', function () {
callMenuConnection();
$('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
$(".categories ul a").css("list-style","none").css("display","inline");
$(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");
});
$(document).unbind('click').bind('click', function () {
scroll();
});
function callMenuConnection() {
$.support.cors = true;
$.ajax({
type: "GET",
url: "one.html",
contentType: "text/xml",
dataType: "xml",
data: "",
cache:false,
processData:false,
crossDomain:true,
success: processSuccess,
error: processError
});
}
var scripts ="";
function processSuccess(data) {
$(data).find("category").each(function () {
var id = $(this).find('id').text();
var title = $(this).find('title').text();
scripts = scripts+'<a class="ids_cat" data-role="button" data-transition="slide" data-inline="true" >' +title+ '</a>';
});
$('#cat_list').append(scripts);
$('#cat_list').trigger('create');
maximum = $(".categories ul a").size();
}
function processError(data)
{
alert("error");
}
function scroll(){
$(".categories").swipeleft(function(event){
if(current + step < 0 || current + step > maximum - visible) {return; }
else {
current = current + step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
$(".categories").swiperight(function(event){
if(current - step < 0 || current - step > maximum - visible) {return; }
else {
current = current - step;
$('.categories ul').animate({left: -(liSize * current)}, speed, null);
}
return false;
});
}