IE9: childNodes not updated after splitText? - dom

On Internet Explorer 9, calling splitText on a text node doesn't update the childNodes of its parent. On Chrome and Firefox it does, as expected per https://developer.mozilla.org/En/DOM/Text.splitText .
However IE9 does behave properly when console.dir is called on the text node parent (?)
Example:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var e = document.querySelector('#test p');
var f = e.childNodes[0].splitText(10);
console.log(e.childNodes.length)
// console.dir(e)
console.log(e.childNodes.length)
}
</script>
<div id="test">
<p>Senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
</html>
IE9 outputs:
LOG: 1
LOG: 1
Chrome and Firefox both correctly output:
2
2
When uncommenting console.dir(e), now IE9 outputs:
LOG: 1
LOG: [object HTMLParagraphElement] {}
LOG: 2
Is this a bug? If so, is there any workaround to "refresh" and reflect the actual state of childNodes, besides console.dir?
Update What appears to work at the moment is adding/removing a node, like:
var t = document.createTextNode("");
e.appendChild(t);
e.removeChild(t);


You could use a workaround instead of splitText():
function insertAfter(node, precedingNode) {
var nextNode = precedingNode.nextSibling, parent = precedingNode.parentNode;
if (nextNode) {
parent.insertBefore(node, nextNode);
} else {
parent.appendChild(node);
}
return node;
}
// Note that we cannot use splitText() because it is bugridden in IE 9.
function splitDataNode(node, index) {
var newNode = node.cloneNode(false);
newNode.deleteData(0, index);
node.deleteData(index, node.length - index);
insertAfter(newNode, node);
return newNode;
}

Related

Is Ant Media Server supports live 360 video streams in HLS or DASH?

I need to know if live 360 videos are supported in HLS or DASH. That feature is really important to me.

Ant Media Server supports 360 Live Video. You can use both HLS and WebRTC with 360 Live Video.
Here is WebRTC 360 Live Video sample page:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ant Media Server</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githubusercontent.com/ant-media/StreamApp/master/src/main/webapp/js/webrtc_adaptor.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
setTimeout(function(){
$(".a-enter-vr-button").click();
},3000);
AFRAME.registerComponent('vr-mode-on',{
schema:{
tagName:{type:'string',default:"video"}
},
init:function(){
this.el.addEventListener("click",function() {
$(".a-enter-vr-button").click();
});
}
});
</script>
</head>
<body>
<a-scene inspector="https://cdn.jsdelivr.net/gh/aframevr/aframe-inspector#master/dist/aframe-inspector.min.js">
<a-box position="-10 -3 -6" rotation="45 45 45" color="red" id="play" vr-mode-on
>
</a-box>
<video id="remoteVideo" autoplay controls playsinline></video>
<a-text position="-8 3 -8" value="Hello, World!" color="red" scale="3 3 3"></a-text>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-entity distance="0.0" video-controls="src:#video"></a-entity>
<a-camera>
<a-cursor color="#FF0000"></a-cursor>
</a-camera>
<a-videosphere src="#remoteVideo" rotation="0 180 0" style="background-color: antiquewhite"></a-videosphere>
</a-scene>
<script>
let video ;
var playOrder = ["webrtc"];
var name = "antmedia";
var token = "null";
var webRTCAdaptor = null;
var streamsFolder = "streams";
initializeWebRTCPlayer(name, token);
function initializeWebRTCPlayer(name, token, noStreamCallback) {
video =document.getElementById("remoteVideo");
document.getElementById("remoteVideo").style.display = "block";
var pc_config = null;
var sdpConstraints = {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
};
var mediaConstraints = {
video: false,
audio: false
};
var appName = location.pathname.substring(0, location.pathname.lastIndexOf("/") + 1);
var path = location.hostname + ":" + location.port + appName + "websocket";
var websocketURL = "ws://localhost:5080/LiveApp/websocket";
webRTCAdaptor = new WebRTCAdaptor({
websocket_url: websocketURL,
mediaConstraints: mediaConstraints,
peerconnection_config: pc_config,
sdp_constraints: sdpConstraints,
remoteVideoId: "remoteVideo",
isPlayMode: true,
debug: true,
callback: function (info, description) {
if (info == "initialized") {
console.log("initialized");
webRTCAdaptor.getStreamInfo(name);
} else if (info == "streamInformation") {
console.log("stream information");
webRTCAdaptor.play(name, token);
} else if (info == "play_started") {
//joined the stream
console.log("play started");
// document.getElementById("video_info").style.display = "none";
// playWebRTCVideo();
} else if (info == "play_finished") {
//leaved the stream
console.log("play finished");
//check that publish may start again
setTimeout(function () {
webRTCAdaptor.getStreamInfo(name);
}, 3000);
} else if (info == "closed") {
//console.log("Connection closed");
if (typeof description != "undefined") {
console.log("Connecton closed: " + JSON.stringify(description));
}
}
},
callbackError: function (error) {
//some of the possible errors, NotFoundError, SecurityError,PermissionDeniedError
console.log("error callback: " + JSON.stringify(error));
}
});
}
</script>
</body>
</html>
Here is HLS 360 Live Video sample page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<script src="https://rawgit.com/oscarmarinmiro/aframe-video-controls/master/dist/aframe-video-controls.min.js"></script>
<title>Title</title>
</head>
<body>
<a-scene inspector="https://cdn.jsdelivr.net/gh/aframevr/aframe-inspector#master/dist/aframe-inspector.min.js">
<a-box position="-10 -3 -6" rotation="45 45 45" color="red" id="play"
>
</a-box>
<video id="video" autoplay loop crossorigin="anonymous" muted controls src="http://localhost:5080/LiveApp/streams/antmedia.m3u8">
</video>
<a-text position="-8 3 -8" value="Hello, World!" color="red" scale="3 3 3"></a-text>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-entity distance="0.0" video-controls="src:#video"></a-entity>
<a-camera>
<a-cursor color="#FF0000"></a-cursor>
</a-camera>
<a-videosphere src="#video" rotation="0 180 0" style="background-color: antiquewhite"></a-videosphere>
</a-scene>
</body>
</html>
<script>
let video = document.getElementById('video');
if(Hls.isSupported()) {
var hls = new Hls({
debug: true
});
hls.loadSource('http://localhost:5080/LiveApp/streams/antmedia.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function() {
video.muted = true;
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'http://localhost:5080/LiveApp/streams/antmedia.m3u8';
video.addEventListener('canplay',function() {
video.play();
});
}
let box = document.getElementById("play");
box.addEventListener("mouseenter",function(){
box.setAttribute("scale",{
x:3,
y:3,
z:3
})
});
box.addEventListener("click",function(){
box.setAttribute("color","blue");
video.pause();
});
</script>
These samples configured by antmedia Stream ID and LiveApp application name. You can change according to your Stream ID and Application.

Auto Redirect Visitors to the particular website

I have just discovered the code which is redirecting the visitors based on their IP address. For example if we want to redirect our visitors from example.in to example.com as ".in" is our local domain and ".com" is the international domain.
We want our customers to visit international website only who are from US, UK if they visit example.in.
The problem is if they are visting from mobile device, they are not getting redirected. Please help.
Sharing my code below :
<script>
jQuery.ajax( {
url: '//freegeoip.net/json/',
type: 'POST',
dataType: 'jsonp',
success: function(location) {
// If the visitor is browsing from Foreign Country
if (location.country_code == 'US' || location.country_code == 'ZA')) {
// Redirect to the International store.
window.top.location.href = 'http://www.example.com';
}
}
} );
</script>
PS : I am placing the above code in example.in

Try this also But I not tried this
<script type="application/javascript">
$(document).ready(function() {
$.getJSON("http://www.telize.com/geoip?callback=?",
function(json) {
// If the visitor is browsing from China.
if (json.country_code === 'CN') {
// Redirect him to the China store.
window.location.href = 'http://www.mydomainname.cn';
}
}
);
});
// ]]>
</script>

Lets do with this http://jsfiddle.net/kvishnudev/7Ut65/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Get web visitor's location</title>
<meta name="robots" value="none" />
</head>
<body>
<div id="yourinfo"></div>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAp04yNttlQq-7b4aZI_jL5hQYPm-xtd00hTQOC0OXpAMO40FHAxQMnH50uBbWoKVHwgpklyirDEregg"></script>
<script type="text/javascript">
var Continent = {"AD":"Europe","AE":"Asia","AF":"Asia","AG":"North America","AI":"North America","AL":"Europe","AM":"Asia","AN":"North America","AO":"Africa","AQ":"Antarctica","AR":"South America","AS":"Australia","AT":"Europe","AU":"Australia","AW":"North America","AZ":"Asia","BA":"Europe","BB":"North America","BD":"Asia","BE":"Europe","BF":"Africa","BG":"Europe","BH":"Asia","BI":"Africa","BJ":"Africa","BM":"North America","BN":"Asia","BO":"South America","BR":"South America","BS":"North America","BT":"Asia","BW":"Africa","BY":"Europe","BZ":"North America","CA":"North America","CC":"Asia","CD":"Africa","CF":"Africa","CG":"Africa","CH":"Europe","CI":"Africa","CK":"Australia","CL":"South America","CM":"Africa","CN":"Asia","CO":"South America","CR":"North America","CU":"North America","CV":"Africa","CX":"Asia","CY":"Asia","CZ":"Europe","DE":"Europe","DJ":"Africa","DK":"Europe","DM":"North America","DO":"North America","DZ":"Africa","EC":"South America","EE":"Europe","EG":"Africa","EH":"Africa","ER":"Africa","ES":"Europe","ET":"Africa","FI":"Europe","FJ":"Australia","FK":"South America","FM":"Australia","FO":"Europe","FR":"Europe","GA":"Africa","GB":"Europe","GD":"North America","GE":"Asia","GF":"South America","GG":"Europe","GH":"Africa","GI":"Europe","GL":"North America","GM":"Africa","GN":"Africa","GP":"North America","GQ":"Africa","GR":"Europe","GS":"Antarctica","GT":"North America","GU":"Australia","GW":"Africa","GY":"South America","HK":"Asia","HN":"North America","HR":"Europe","HT":"North America","HU":"Europe","ID":"Asia","IE":"Europe","IL":"Asia","IM":"Europe","IN":"Asia","IO":"Asia","IQ":"Asia","IR":"Asia","IS":"Europe","IT":"Europe","JE":"Europe","JM":"North America","JO":"Asia","JP":"Asia","KE":"Africa","KG":"Asia","KH":"Asia","KI":"Australia","KM":"Africa","KN":"North America","KP":"Asia","KR":"Asia","KW":"Asia","KY":"North America","KZ":"Asia","LA":"Asia","LB":"Asia","LC":"North America","LI":"Europe","LK":"Asia","LR":"Africa","LS":"Africa","LT":"Europe","LU":"Europe","LV":"Europe","LY":"Africa","MA":"Africa","MC":"Europe","MD":"Europe","ME":"Europe","MG":"Africa","MH":"Australia","MK":"Europe","ML":"Africa","MM":"Asia","MN":"Asia","MO":"Asia","MP":"Australia","MQ":"North America","MR":"Africa","MS":"North America","MT":"Europe","MU":"Africa","MV":"Asia","MW":"Africa","MX":"North America","MY":"Asia","MZ":"Africa","NA":"Africa","NC":"Australia","NE":"Africa","NF":"Australia","NG":"Africa","NI":"North America","NL":"Europe","NO":"Europe","NP":"Asia","NR":"Australia","NU":"Australia","NZ":"Australia","OM":"Asia","PA":"North America","PE":"South America","PF":"Australia","PG":"Australia","PH":"Asia","PK":"Asia","PL":"Europe","PM":"North America","PN":"Australia","PR":"North America","PS":"Asia","PT":"Europe","PW":"Australia","PY":"South America","QA":"Asia","RE":"Africa","RO":"Europe","RS":"Europe","RU":"Europe","RW":"Africa","SA":"Asia","SB":"Australia","SC":"Africa","SD":"Africa","SE":"Europe","SG":"Asia","SH":"Africa","SI":"Europe","SJ":"Europe","SK":"Europe","SL":"Africa","SM":"Europe","SN":"Africa","SO":"Africa","SR":"South America","ST":"Africa","SV":"North America","SY":"Asia","SZ":"Africa","TC":"North America","TD":"Africa","TF":"Antarctica","TG":"Africa","TH":"Asia","TJ":"Asia","TK":"Australia","TM":"Asia","TN":"Africa","TO":"Australia","TR":"Asia","TT":"North America","TV":"Australia","TW":"Asia","TZ":"Africa","UA":"Europe","UG":"Africa","US":"North America","UY":"South America","UZ":"Asia","VC":"North America","VE":"South America","VG":"North America","VI":"North America","VN":"Asia","VU":"Australia","WF":"Australia","WS":"Australia","YE":"Asia","YT":"Africa","ZA":"Africa","ZM":"Africa","ZW":"Africa"};
if(google.loader.ClientLocation)
{
visitor_lat = google.loader.ClientLocation.latitude;
visitor_lon = google.loader.ClientLocation.longitude;
visitor_city = google.loader.ClientLocation.address.city;
visitor_region = google.loader.ClientLocation.address.region;
visitor_country = google.loader.ClientLocation.address.country;
visitor_countrycode = google.loader.ClientLocation.address.country_code;
if(visitor_countrycode!= null)
{
var Cont = Continent[visitor_countrycode];
//alert(Cont);
}
//
document.getElementById('yourinfo').innerHTML = '<p>Lat/Lon: ' + visitor_lat + ' / ' + visitor_lon + '</p><p>Location: ' + visitor_city + ', ' + visitor_region +', Continent : ' + Cont + ', ' + visitor_country + ' (' + visitor_countrycode + ')</p>';
}
else
{
document.getElementById('yourinfo').innerHTML = '<p>Whoops!</p>';
}
</script>
</body>

cross rider extension to fetch new posts from feed using google feeds api

I am trying to create an extension to display all the latest posts fetched from my feed using google feeds api. To implement this, I have added this code in background.js:
appAPI.ready(function() {
// Global variable to hold the toggle state of the button
var buttonState = true;
// Sets the initial browser icon
appAPI.browserAction.setResourceIcon('images/icon.png');
// Sets the tooltip for the button
appAPI.browserAction.setTitle('My Postreader Extension');
appAPI.browserAction.setPopup({
resourcePath:'html/popup.html',
height: 300,
width: 300
});});
and in popup.html,
<!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {eval(appAPI.resources.get('script.js')); }</script>
</head>
<body><div id="feed"></div></body></html>
The script.js file is-
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://www.xxxxx.com/feed/");
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var link = document.createElement('a');
link.setAttribute('href', entry.link);
link.setAttribute('name', 'myanchor');
div.appendChild(document.createTextNode(entry.title));
div.appendChild(document.createElement('br'));
div.appendChild(link);
div.appendChild(document.createElement('br'));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
But I am unable to get desired result.The popup doesn't display anything.It just remain blank.

Since you are using a resource file for the popup's content, it's best to load the remote script from the crossriderMain function, as follows:
<!DOCTYPE html>
<html>
<head>
<!-- This meta tag is relevant only for IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript">
function crossriderMain($) {
appAPI.db.async.get('style-css', function(rules) {
$('<style type="text/css">').text(rules).appendTo('head');
});
appAPI.request.get({
url: 'http://www.google.com/jsapi',
onSuccess: function(code) {
$.globalEval(code);
appAPI.db.async.get('script-js', function(code) {
// runs in the context of the extension
$.globalEval(code.replace('CONTEXT','EXTN'));
// Alternatively, run in context of page DOM
$('<script type="text/javascript">').html(code.replace('CONTEXT','PAGE DOM')).appendTo('head');
});
}
});
}
</script>
</head>
<body>
<h1>Hello World</h1>
<div id="feed"></div>
</body>
</html>
[Disclaimer: I am a Crossrider employee]

Auto complete with multiple keywords

I want . Auto complete text box with multiple keyword. it's from database. if I use jQuery and do operation in client side mean. If the database size is huge, it leads to some issues. I need to know how this is done on the server side and get proper result.
I have already seen this topic but the operation is done on the client side. I need it from the database directly.
<html>
<head>
<title>Testing</title>
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.srchHilite { background: yellow; }
</style>
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
NewAuto();
});
function NewAuto() {
var availableTags = ["win the day", "win the heart of", "win the heart of someone"];
alert(availableTags); // alert = win the day,win the heart of,win the heart of someone
$("#tags").autocomplete({
source: function(requestObj, responseFunc) {
var matchArry = availableTags.slice(); // Copy the array
var srchTerms = $.trim(requestObj.term).split(/\s+/);
// For each search term, remove non-matches.
$.each(srchTerms, function(J, term) {
var regX = new RegExp(term, "i");
matchArry = $.map(matchArry, function(item) {
return regX.test(item) ? item : null;
});
});
// Return the match results.
responseFunc(matchArry);
},
open: function(event, ui) {
// This function provides no hooks to the results list, so we have to trust the selector, for now.
var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a");
var srchTerm = $.trim($("#tags").val()).split(/\s+/).join('|');
// Loop through the results list and highlight the terms.
resultsList.each(function() {
var jThis = $(this);
var regX = new RegExp('(' + srchTerm + ')', "ig");
var oldTxt = jThis.text();
jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>'));
});
}
});
}
</script>
</head>
<body>
<div>
<label for="tags">
Multi-word search:
</label>
<input type="text" id="tags" />
</div>
</body>
</html>

take a look to Select2 it may help you.
Select2 is a jQuery based replacement for select boxes. It supports
searching, remote data sets, and infinite scrolling of results.
link

In your code, you have provided source as array. As you mentioned in comments, problem is how to get the data to source in jquery.
To make this work,
You need to do following
load jquery in header, which is you have already done.
Provid array,string or function for the source tag. [See api for
the source tag][1]
[1]: http://api.jqueryui.com/autocomplete/#option-source
In your serverside script, provid Jason encoded string.
If you check the API, you can see they have clear mentioned this.
Here is the jquery code
$(function() {
$( "#option_val" ).autocomplete({
dataType: "json",
source: 'search.php',
minLength: 1,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>
Here is the php code, Sorry if you use differnt serverside script language.
<?php
// Create connection
$con=mysqli_connect("localhost","wordpress","password","wordpress");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result=mysqli_query($con,"select * from wp_users");
while($row = mysqli_fetch_array($result))
{
$results[] = array('label' => $row['user_login']);
}
echo json_encode($results);
mysqli_close($con);
?>

Sencha Ext JS 4 trouble getting drag&drop to work properly

I'm attempting to learn extjs 4 and I've been struggling with drag and drop for the past couple of days. I've attempted to build a simple application with a viewport and 1 panel. I've set the panel to be draggable: true and the viewport to be a dropzone. When I try and drag the panel around the viewport it jumps erratically.
This is a short video clip of the behavior:
http://youtu.be/6WRf5j_CAR0
These are my two files:
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'CS',
appFolder: 'ccms/app',
autoCreateViewport: true,
controllers: [
// 'TestCreator',
// 'Primary',
// 'Manager'
],
launch: function(){
var viewport = Ext.ComponentQuery.query('viewport');
if(viewport.length > 0)
viewport[0].add([{
xtype: 'panel',
width: 300,
height: 300,
draggable: true
}]);
}
});
Viewport.js
Ext.define('CS.view.Viewport', {
extend: 'Ext.container.Viewport',
// layout: 'fit',
listeners: {
render: function(sender){
console.log(sender);
sender.dropZone = new Ext.dd.DropZone(sender.container, {
getTargetFromEvent: function(e) {
console.log('getTargetFromEvent');
var temp = {
x: e.getX() - this.DDMInstance.deltaX,
y: e.getY() - this.DDMInstance.deltaY
};
console.log(temp);
return temp;
},
// On entry into a target node, highlight that node.
onNodeEnter : function(target, dd, e, data){
// Ext.fly(target).addCls('my-row-highlight-class');
},
// On exit from a target node, unhighlight that node.
onNodeOut : function(target, dd, e, data){
// Ext.fly(target).removeCls('my-row-highlight-class');
},
onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop : function(target, dd, e, data){
console.log('onNodeDrop');
data.panel.setPosition(target.x, target.y, true);
return true;
}
});
}
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cobar Systems Continuity Suite</title>
<link rel="stylesheet" type="text/css" href="http://themis.dev/ccms/resources/css/ext-all.css">
<script type="text/javascript" src="http://themis.dev/ccms/extjs/bootstrap.js"></script>
<script type="text/javascript" src="http://themis.dev/ccms/app.js"></script>
</head>
<body>
</body>
</html>
Can anyone tell me what is going on?
I've tried this with Ext JS 4.07 and the 4.1 Beta, same results

Make sure to Change your Panel to DOM element though Panel is a component
listener: {
render: function (panel) {
var PanelEl = Ext.get(panel.id);
sender.dropZone = new Ext.dd.DropZone(PanelEl, {
//...
}
}