We Keep Coding

I want to get latitude longitude height of my mouse at the bottom of the cesium screen

For now using below javascript, I am getting the lat long values over the mouse pointer. How can I make it appear at the bottom of the cesium screen like it is in google earth.
viewer.entities.add({
id: 'mou',
label: {
// position : Cesium.Cartesian2.ZERO,
show: true;
}
});
viewer.scene.canvas.addEventListener('mousemove', function(e) {
var entity = viewer.entities.getById('mou');
var ellipsoid = viewer.scene.globe.ellipsoid;
// Mouse over the globe to see the cartographic position
var cartesian = viewer.camera.pickEllipsoid(new Cesium.Cartesian3(e.clientX, e.clientY), ellipsoid);
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(10);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(10);
entity.position = cartesian;
entity.label.show = true;
entity.label.font_style = 84;
//entity.position= Cesium.Cartesian2.ZERO;
entity.label.text = '(' + longitudeString + ', ' + latitudeString + ')';
var result = latitudeString(45);
document.getElementById("demo").innerHTML = result;
} else {
entity.label.show = false;
}
});
Thanks for your help

I assume that you are perhaps running this in Sandcastle? In this case the sites styling makes it a bit difficult to add additional divs. But if you position them absolutely and give a high z-index, you can make the div appear on top of the CesiumViewer container.
Additionally, there were a few problems with a misplaced semicolon inside the entity "mou" label object. And you tried to use the latitudeString as a function call.
Working SandCastle link
HTML
<style>
#import url(../templates/bucket.css);
</style>
<div id="demo" style="z-index: 2000; position: absolute; height:100px; width:200px; right: 10px; bottom: 0px; text-color: white"></div>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>
Javascript
viewer.entities.add({
id: 'mou',
label: {
// position : Cesium.Cartesian2.ZERO,
show: true // Removed semicolon here
}
});
viewer.scene.canvas.addEventListener('mousemove', function(e) {
var entity = viewer.entities.getById('mou');
var ellipsoid = viewer.scene.globe.ellipsoid;
// Mouse over the globe to see the cartographic position
var cartesian = viewer.camera.pickEllipsoid(new Cesium.Cartesian3(e.clientX, e.clientY), ellipsoid);
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(10);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(10);
entity.position = cartesian;
entity.label.show = true;
entity.label.font_style = 84;
//entity.position= Cesium.Cartesian2.ZERO;
entity.label.text = '(' + longitudeString + ', ' + latitudeString + ')';
var result = entity.label.text; // We can reuse this
document.getElementById("demo").innerHTML = result;
} else {
entity.label.show = false;
}
});

Auto minimising text in textarea with javascript

I've got a textarea where the user inputs there data, but as they add it when the cursor gets to the end it reduces the size of the font. All works quite well but I cannot seem to set a limit on how small it goes. Also is there any way I can set the point at which the text starts to go small, because the text tends to disappear at the end before shrinking? Please could someone help with this, seem to be pulling my hair out on this one?
function textAreaChange(){
var textArea1 = document.getElementById("textarea");
var sizeText1 = document.getElementById("size_text");
while (textArea1.scrollWidth > textArea1.clientWidth)
{
var fs = parseFloat(textArea1.style.fontSize) - 1;
textArea1.style.fontSize = fs + 'px';
sizeText1.value = (fs | 0) + 'px';
document.getElementById("a1").innerHTML = ((parseInt(textArea1.style.fontSize))/textboxscale);
sizeText1.value = ((parseInt(textArea1.style.fontSize))/textboxscale);
}
}
textAreaChange();
Thanks in advance.
Davetoff
Right I have added the if (fs>15) to this code, but now it lock up when it gets to 15:
function textAreaChange(){
var fss = 15;
var textArea1 = document.getElementById("textarea");
var sizeText1 = document.getElementById("size_text");
while (textArea1.scrollWidth > textArea1.clientWidth)
{
var fs = parseFloat(textArea1.style.fontSize) - 1;
if (fs >15){
textArea1.style.fontSize = fs + 'px';
sizeText1.value = (fs | 0) + 'px';
document.getElementById("a1").innerHTML = ((parseInt(textArea1.style.fontSize))/textboxscale);
sizeText1.value = ((parseInt(textArea1.style.fontSize))/textboxscale);
} else {
textArea1.style.fontSize = fss + 'px';
sizeText1.value = (fss | 0) + 'px';
document.getElementById("a1").innerHTML = fss + 'px';
}
}
}
Please help really appreciated spent a couple of days on this now and my head is beginning to hurt:
Thanks.
Davetoff

After the line where you assign "fs", just add a statement to make sure that if fs is too small, you don't assign it to the textArea1 font size, something like:
if (fs > 7) //only perform statements below if fs > 7
{
...
}

Right found the problem, indeed the answer was to add the if statement, however I was being a fool as I had a scale factor in there that was causing all sorts of problems, also I've added a keycode in there to stop additional key inputs when the end of the text area is reached, updated code below:
function textAreaChange(){
var fss = <?=$min_text_size?>*textboxscale;
var textArea1 = document.getElementById("textarea");
var sizeText1 = document.getElementById("size_text");
if (textArea1.scrollWidth > (textArea1.clientWidth))
{
var fs = parseFloat(textArea1.style.fontSize) - (2);
if (fs >(14*textboxscale)){
textArea1.style.fontSize = (fs) + 'px'; //this is the textarea style
document.getElementById("a1").innerHTML = (parseInt(textArea1.style.fontSize)/textboxscale); //this is some text to show the user what size the text is
sizeText1.value = ((parseInt(textArea1.style.fontSize))/textboxscale); //this is a slider I put to chage the text height manually (input range)
} else{
textArea1.style.fontSize = (fss) + 'px';
document.getElementById("a1").innerHTML = fss/textboxscale;
sizeText1.value = fss /textboxscale;
if (event.keyCode == 8, 32) {
event.preventDefault();
}
}
}
}
However the keycode 8,32 works well in IE but not in Firefox, any additional help would be really appreciated?
D

Floating JQuery menu issues on slower connection

I'm trying to create a floating menu (#quickmenu in left hand sidebar of bottom link) that stops at #weather whilst also re-calculating the bottom = $(\'#weather\').offset().top; every 0.5 seconds...
Page to test: Bristol International Jazz & Blues Festival 2014 | Festival Archive
The recalculation is key as I use expandable content in the main body and because without recaculating on slower connections it doestn't work. I need only #weather.offset.top to be recalculated every 5 seconds, not the whole script otherwise it refreshes and flickers...
I've tried to do code it myself and it's not working, it's 99% not coded correctly but can't figure out what's going wrong? The logic seems to be correct though... if (y >= top && z <= bottom) { ....
<script type="text/javascript">
$(document).ready(function () {
top = $('#quickmenu').offset().top;
var didScroll = false;
$(window).scroll(function() {
didScroll = true;
});
setInterval(function() {
if ( didScroll ) {
didScroll = false;
bottom = $('#weather').offset().top;
y = $(this).scrollTop();
z = y + $('#quickmenu').height();
if (y >= top && z <= bottom) {
// if so, add the fixed class
$('#quickmenu').addClass('fixed');
} else if(z > bottom) {
// otherwise remove it
$('#quickmenu').removeClass('fixed').addClass('absolute');
} else {
// otherwise remove it
$('#quickmenu').removeClass('fixed');
}
}
}, 500);
});
</script>

Thanks for the input, and apologies for lack of clarity within the question. I have fixed my issue by taking another approach. I hope that this is less resource heavy?
<script type="text/javascript">
(function () {
var s = document.querySelector(\'#event-info\').style;
s.overflow = \'inherit\';
s.height = \'auto\';
})();
window.updateQuickMenuPos = function () {
var menu = document.querySelector(\'#quickmenuwrapper\');
var scroll_pos = document.body.scrollTop;
var menu_pos = menu.offsetTop + 10;
var weather = document.querySelector(\'#weather\');
var pos = (scroll_pos - menu_pos);
// min height
if (pos < 0) {
pos = 0;
}
// max height
if (menu_pos + menu.offsetHeight + pos > weather.offsetTop) {
pos = weather.offsetTop - menu.offsetHeight - menu_pos;
}
var s = menu.style;
s[\'webkitTransform\'] = s[\'mozTransform\'] = s[\'transform\'] = \'translateY(\' + pos + \'px)\';
};
jQuery(document).scroll(window.updateQuickMenuPos);
</script>

how to stop moving text box at specific point?

i'm developing a web site i want a div to move when a user click on the text box and i need to stop that div below the clicked text box. i have tried
var index = event.target.id
but it didn't work i 'm using flowing javascript function
<script type="text/javascript">
var cmdStr = window.location.search;
cmdStr = (cmdStr.indexOf("menu_id")>-1)?cmdStr.substring(cmdStr.indexOf("=")+1,cmdStr.length):"";
var isNS6 = (navigator.userAgent.indexOf("Mozilla")>-1 && navigator.userAgent.indexOf("Gecko")>-1)?true:false;
var isIE = (navigator.userAgent.indexOf("MSIE")>-1 && navigator.userAgent.indexOf("Opera")==-1)?true:false;
var isOp = (navigator.userAgent.indexOf("Opera")>-1)?true:false;
function init(){
// if(isIE){
// document.getElementById("msg_scroller").style.position="relative";
// }
}
var incrementVal = 2;
var timer;
var flag;
function scroll(flag){
var obj = document.getElementById("movingDiv");
var isIE6 = (document.documentElement.clientHeight)? true : false;`
var Y = parseInt(obj.style.top);
var cY = (isIE6)?document.documentElement.clientHeight-173 :((document.all)? document.body.clientHeight-173:window.innerHeight - 173);
if(flag==1 && Y<cY){
obj.style.top = (Y+incrementVal)+"pt";
timer = setTimeout("scroll(1)",incrementVal*20);
}else if(flag==-1 && Y>0){
obj.style.top = (Y-incrementVal)+"pt";
timer = setTimeout("scroll(-1)",incrementVal*20);
}else{
clearTimeout(timer);
}
}
</script>
and my html is
<div id="movingDiv" style="position:absolute;left:100pt;top:150pt;border:1px;width:160px;background-color:lightyellow;font-weight:bold;" >
<textarea style="font-size: 10pt; font-family: Potha, Malithi Web , Arial Unicode MS;
width: 600px;" rows="7"></textarea>
<text></div>
i know to stop this i have to get x,y cordinates but how i get this ?? can some one help me?

Trouble with onclick attribute for img when used in combination with setInterval

I am trying to make images that move around the screen that do something when they are clicked. I am using setInterval to call a function to move the images. Each image has the onclick attribute set. The problem is that the clicks are not registering.
If I take out the setInterval and just keep the images still, then the clicks do register.
My code is here (html, css, JavaScript): https://jsfiddle.net/contini/nLc404x7/4/
The JavaScript is copied here:
var smiley_screen_params = {
smiley_size : 100, // needs to agree with width/height from css file
num_smilies: 20
}
var smiley = {
top_position : 0,
left_position : 0,
jump_speed : 2,
h_direction : 1,
v_direction : 1,
intvl_speed : 10, // advance smiley every x milliseconds
id : "smiley"
}
function randomise_direction(s) {
var hd = parseInt(Math.random()*2);
var vd = parseInt(Math.random()*2);
if (hd === 0)
s.h_direction = -1;
if (vd === 0)
s.v_direction = -1;
}
function plotSmiley(sp /* sp = smiley params */) {
var existing_smiley = document.getElementById(sp.id);
if (existing_smiley !== null)
// delete existing smiley so we can move it
document.getElementById("smileybox").removeChild(existing_smiley);
var smiley_to_plot = document.createElement('img');
smiley_to_plot.setAttribute('src', "http://i.imgur.com/C0BiXJx.png");
smiley_to_plot.setAttribute('id', sp.id);
smiley_to_plot.setAttribute('onclick', "my_click_count()");
smiley_to_plot.style.position = 'absolute';
smiley_to_plot.style.top = sp.top_position + "px";
smiley_to_plot.style.left = sp.left_position + "px";
document.getElementById("smileybox").appendChild(smiley_to_plot);
}
function random_direction_change() {
var r = parseInt(Math.random()*200);
if (r===0)
return true;
else
return false;
}
function moveFace(sp_array /* sp_array = smiley params array */) {
var i;
var sp;
for (i=0; i < sp_array.length; ++i) {
// move ith element
sp = sp_array[i];
if (
(sp.h_direction > 0 && sp.left_position >= smiley_screen_params.width - smiley_screen_params.smiley_size) ||
(sp.h_direction < 0 && sp.left_position <= 0) ||
(random_direction_change())
) {
sp.h_direction = -sp.h_direction; // hit left/right, bounce off (or random direction change)
}
if (
(sp.v_direction > 0 && sp.top_position >= smiley_screen_params.height - smiley_screen_params.smiley_size) ||
(sp.v_direction < 0 && sp.top_position <= 0) ||
(random_direction_change())
) {
sp.v_direction = -sp.v_direction; // hit top/bottom, bounce off (or random direction change)
}
sp.top_position += sp.v_direction * sp.jump_speed;
sp.left_position += sp.h_direction * sp.jump_speed;
plotSmiley(sp);
}
}
if (typeof Object.create !== 'function') {
Object.create = function(o) {
var F = function () {};
F.prototype = o;
return new F();
};
}
function generateFaces() {
var smilies = new Array();
var s;
var i;
var css_smileybox=document.getElementById("smileybox");
var sb_style = getComputedStyle(css_smileybox, null);
// add info to the screen params
smiley_screen_params.width = parseInt(sb_style.width);
smiley_screen_params.height = parseInt(sb_style.height);
// create the smileys
for (i=0; i < smiley_screen_params.num_smilies; ++i) {
s = Object.create(smiley);
s.id = "smiley" + i;
s.top_position = parseInt(Math.random() * (smiley_screen_params.height - smiley_screen_params.smiley_size)),
s.left_position = parseInt(Math.random() * (smiley_screen_params.width - smiley_screen_params.smiley_size)),
randomise_direction(s);
smilies.push(s);
}
setInterval( function(){ moveFace(smilies) }, smiley.intvl_speed );
}
var click_count=0;
function my_click_count() {
++click_count;
document.getElementById("mg").innerHTML = "Number of clicks: " + click_count;
}
generateFaces();
The generateFaces() will generate parameters (for example, coordinates of where they are placed) for a bunch of smiley face images. The setInterval is within this function, and calls the moveFace function to make the smiley faces move at a fixed interval of time. moveFace computes the new coordinates of each smiley face image and then calls plotSmiley to plot each one on the screen in its new location (removing it from the old location). The plotSmiley sets the onclick attribute of each image to call a dummy function just to see if the clicks are registering.
Thanks in advance.

This is not a complete answer but it could give you some perspective to improve your code.
First of all, your idea of deleting the existing img so wrong. If it does exist, all you need is to just change its position so instead of this
if (existing_smiley !== null)
// delete existing smiley so we can move it
document.getElementById("smileybox").removeChild(existing_smiley);
you should do something like this:
if (existing_smiley !== null)
var smiley_to_plot = existing_smiley;
else {
var smiley_to_plot = document.createElement('img');
smiley_to_plot.setAttribute('src', "http://i.imgur.com/C0BiXJx.png");
smiley_to_plot.setAttribute('id', sp.id);
smiley_to_plot.style.position = 'absolute';
document.getElementById("smileybox").appendChild(smiley_to_plot);
smiley_to_plot.addEventListener('click', my_click_count);
}
smiley_to_plot.style.top = sp.top_position + "px";
smiley_to_plot.style.left = sp.left_position + "px";
As you can see new image is only being added if it's not already there. Also notice that adding events by using .setAttribute('onclick', "my_click_count()"); is not a good way to do. You should use .addEventListener('click', my_click_count); like I did.
Like I said this is not a complete answer but at least this way they response to the click events now.
FIDDLE UPDATE
Good luck!