I'd like to display continuously updating coordinates when the mouse is over a canvas.
The below Firefox-tested code should produce this, but onmouseover is only called when the mouse enters the canvas. When over it, nothing happens and the coordinates are not updated.
<HTML>
<BODY>
<Canvas width="200" height="200" onmouseover="myMouse(event)">No support</Canvas>
<P id="text"/>
<Script>
function myMouse(event) {
document.getElementById("text").innerHTML = "Position = " + event.clientX + ", " + event.clientY;
}
</Script>
</BODY>
</HTML>
What can I do to have onmouseover be continuous, and not only update when the mouse enters the canvas?
On the web, the closest subject I've found was this, but they did not answer the question on making this work ... I must be missing something.
Instead of onmouseover try onmousemove.
The onmouseover event fires when the mouse moves over an element once. The onmousemove event fires whenever the mouse is being moved.
jsFiddle example.
https://developer.mozilla.org/en/DOM/element.onmousemove
Related
A piece I'm currently working on is calling for tooltips that display when you hover over part of an SVG element, disappear as normal on mouse-out but providing the mouse does not go over the tooltip itself. We are using Materialize CSS which does come with a tooltip component.
A segment of my code is below.
<svg width="400" height="400">
<rect x="190" y="255" width="70" height="25" class="fixture good tooltipped" id="ines" data-position="top" data-delay="50" data-tooltip="Carbonated Drinks<br><a href='#'>View More</a>"" data-html="true"/>
</svg>
As you can see, the reason I want this is so that the user can click the 'View more' link if they mouse onto the actual tooltip. Currently, however, the tooltips disappear even if you mouse onto them.
I know this can be done with other frameworks/libararies, but I have been unable to do this in Materialize CSS so far.
Does anyone know if this is possible as an extensive internet search has turned up nothing.
Materialize tooltip assign a "mouseleave.tooltip" event handler for each involved dom node.
This event is triggered as soon as you will leave the dom element, and after 225 milliseconds (for details refer to source code) the tootip will be hidden.
Moreover, the tooltip has the style pointer-events equal to none: no mouse event can be triggered, so your anchor will be never clickable.
In order to overcome all these steps a possibility is:
save the jQuery mouseout event object
remove the previous object from the jQuery handlers so no mouseleave.tooltip can be triggered.
handle the jQuery hover event for each tooltip (having class: material-tooltip): this to save a property in order to test against the mouse position in or out the tooltip
on mouseenter for your element set the pointer-events to default auto
in the same way on mouseleave set a timeout less than 225 milliseconds in order to test if the mouse is over the tooltip: if not execute the standard jQuery materialize mouseleave.tooltip event
on mouseleave the tooltip do the same step in the previous point.
The snippet (jsfiddle):
$(function () {
var x = jQuery._data( document.getElementById('ines'), "events" )['mouseout'][0];
delete jQuery._data( document.getElementById('ines'), "events" )['mouseout'];
$('.material-tooltip').hover(function(e) {
$(this).attr('hover', 1);
}, function(e) {
$(this).attr('hover', 0);
x.handler.apply( document.getElementById('ines'), x);
});
$('#ines').on('mouseenter', function(e) {
$('.material-tooltip:visible').css('pointer-events', 'auto');
}).on('mouseleave', function(e) {
setTimeout(function() {
var val = $('.material-tooltip:visible').attr('hover');
if (val == undefined || val == 0) {
x.handler.apply( document.getElementById('ines'), x);
}
}, 150);
})
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<svg width="400" height="400">
<rect x="190" y="155" width="70" height="25" class="fixture good tooltipped" id="ines" data-position="top"
data-delay="50" data-tooltip="Carbonated Drinks<br><a href='#'>View More</a>"
data-html="true"/>
</svg>
I am a beginner in html. I have an image that has to be displayed on the overlay,when a button is pressed. Th problem is the image doesnot appear on the overlay for the first time. It appers only from the second time and then it works properly. If I refresh my page and do it again the image does not appear. The removing part has no error. So i did not include that part of the code.
var overlay = $(".ui-widget-overlay");
baseBackground = overlay.css("background");
baseOpacity = overlay.css("opacity");
overlay.css("background", "#000").css("opacity", "1");
function ShowOverlay() {
$("<div id='overlay'> <img src='Images/ajax.gif'/> </div>").appendTo('body');
$('#overlay').show();
Is it possible to add the image below _overlay.css("background", "#000").css("opacity", "1"); _ ?
I am creating a div where you can drop files from your desktop, but also upload them by clicking on it. Because of the security limitations (I can't trigger a click for an file input), I am doing the trick of moving around an opacity 0 file input, following the mouse while it's on the target div. It perfectly works on Chrome, but Firefox doesn't do the trick (as it sticks the file input to the top left of the div. I'll show you the structure I am using:
<div style="position:relative;width:500px">
<img class="img-drop" width="500" src="http://placehold.it/500x500">
<div class="over-img-drop" style="position:absolute;width:100%;height:100%;top:0;">
Drop or click to upload a picture.
<input type="file" style="position:absolute;width:20px;height:20px;opacity:0" class="fileupload">
</div>
<i class="icon-chevron-down"></i>
</div>
And here comes the Javascript
<script type="text/javascript">
$(".over-img-drop").on("mouseover, mousemove", function(e){
if($(e.target).hasClass("fileupload")) //if event is happening over file input, avoid moving
return true;
$(this).find(".fileupload").css("top", e.offsetY-10).css("left", e.offsetX-10);
return false;
});
</script>
Well, I happened to find a solution:
event.offsetX and event.offsetY is available on Chrome, but not on Firefox (those values return undefined). What you have to do is to calculate the offset manually and put any position based on this calculations: jQuery includes this, as mentioned here.
What you should do is to get the container's offsets, and substract this from the event.pageX and event.pageY. So, the code looks like this:
<script type="text/javascript">
$(".over-img-drop").on("mouseover, mousemove", function(e){
if($(e.target).hasClass("fileupload"))
return true;
var offsets = $(this).offset();
$(this).find(".fileupload").css("top", e.pageY-offsets.top-10).css("left", e.pageX-offsets.left-10);
return false;
});
</script>
i have simple application which should work on keyboard events like onfocus and onblur instead of onmouseover and onmouseout.
here is my code snippet to zoomin/zoomout:
<script>
var nW,nH,oH,oW;
function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage)
{
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge))
{
nW=iWideSmall;nH=iHighSmall;
}
else
{
nW=iWideLarge;nH=iHighLarge;
}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
calling this function in this way:
<td align=center valign=middle >
<figure>
<button style="background-color:black; height:160px;width:160px ; border:none"><img src="F:\rashmi\icons_tv\Help_Normal.png" onfocus="zoom('57px','120px','96px','136px',this);"
onblur="zoom('57px','120px','57px','120px',this);" > </button>
<figcaption><font size="5" color="white" style="font-weight:bold"><center>help</center></font></figcaption>
</figure>
</td>
but problem is when i select image using tab key i cant see any zoomin/zoomout effect. if i replace onfocus/onblur with onmouseover/onmouseout respectively it works well.
please some one help me where i am going wrong.
regards
rashmi
You will not get focus on an img element by tabbing but on the button element instead. Move your onblur/onfocus events to the button element. This will change your button's size each time you focus/lose focus on it, but it will not change your image size. What you have to do then is to modify your code so the change is mapped on the button's contained image dimensions as well. Something that I can think of right now is
<script type="text/javascript">
var nW,nH,oH,oW;
function zoom(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichElement)
{
theImage = whichElement.firstChild;
theImage.style.width=nW;theImage.style.height=nH;
oW=whichElement.style.width;oH=whichElement.style.height;
if((oW==iWideLarge)||(oH==iHighLarge))
{
nW=iWideSmall;nH=iHighSmall;
}
else
{
nW=iWideLarge;nH=iHighLarge;
}
whichElement.style.width=nW;whichElement.style.height=nH;
theImage.style.width=nW;theImage.style.height=hH;
}
</script>
Here, the first child of the button element, which happens to be the image, takes the same height and width with the button, whenever that changes.
In my site, I would like to implement a textbox where people can input a set of strings separated by a separator character.
For example the tags textbox at the bottom of this page: tags(strings) delimited by space(separator).
To make it more clear to the user, it would make a lot of sence to give each string a different background color or other visual hint.
I don't think this is possible with a regular input[text] control.
Do you deem it possible to create something like that with javascript? Has somebody done this before me already? Do you have any other suggestions?
Basic Steps
Put a textbox in a div and style it too hide it.
Make the div look like a text box.
In the onClick handler of the div, set the input focus to the hidden text box.
Handle the onKeyUp event of the hidden text box to capture text, format as necessary and alter the innerHtml of the div.
Tis quite straightforward. I'll leave you to write your formatter but basically you'd just splitString on separator as per the Semi-Working-Example.
Simple Outline
<html>
<head>
<script language="javascript" type="text/javascript">
function focusHiddenInput()
{
var txt = document.getElementById("txtHidden");
txt.focus();
}
function formatInputAndDumpToDiv()
{
alert('Up to you how to format');
}
</script>
</head>
<body>
<div onclick="focusHiddenInput();">
Some label here followed by a divved textbox:
<input id="txtHidden" style="width:0px;" onKeyPress="formatInputAndDumpToDiv()" type="text">
</div>
</body>
</html>
Semi-Working Example
You still need to extend the click handlers to account for tag deletion/editing/backspacing/etc via keyboard.... or you could just use a click event to pop up another context menu div. But with tags and spacer ids identified in the code below that should be pretty easy:
<html>
<head>
<script language="javascript" type="text/javascript">
var myTags=null;
function init()
{
document.getElementById("txtHidden").onkeyup= runFormatter;
}
function focusHiddenInput()
{
document.getElementById("txtHidden").focus();
}
function runFormatter()
{
var txt = document.getElementById("txtHidden");
var txtdiv = document.getElementById("txtBoxDiv");
txtdiv.innerHTML = "";
formatText(txt.value, txtdiv);
}
function formatText(tagText, divTextBox)
{
var tagString="";
var newTag;
var newSpace;
myTags = tagText.split(' ');
for(i=0;i<myTags.length;i++) {
newTag = document.createElement("span");
newTag.setAttribute("id", "tagId_" + i);
newTag.setAttribute("title", myTags[i]);
newTag.setAttribute("innerText", myTags[i]);
if ((i % 2)==0) {
newTag.style.backgroundColor='#eee999';
}
else
{
newTag.style.backgroundColor='#ccceee';
}
divTextBox.appendChild(newTag);
newTag.onclick = function(){tagClickedHandler(this);}
newSpace = document.createElement("span");
newSpace.setAttribute("id", "spId_" + i);
newSpace.setAttribute("innerText", " ");
divTextBox.appendChild(newSpace);
newSpace.onclick = function(){spaceClickedHandler(this);}
}
}
function tagClickedHandler(tag)
{
alert('You clicked a tag:' + tag.title);
}
function spaceClickedHandler(spacer)
{
alert('You clicked a spacer');
}
window.onload=init;
</script>
</head>
<body>
<div id="txtBoxDivContainer">
Enter tags below (Click and Type):<div id="txtBoxDiv" style="border: solid 1px #cccccc; height:20px;width:400px;" onclick="focusHiddenInput();"></div>
<input id="txtHidden" style="width:0px;" type="text">
</div>
</body>
</html>
Cursor
You could CSS the cursor using blink (check support) or otherwise just advance and hide as necessary an animated gif.
This is quite interesting. The short answer to your question is no. Not with the basic input element.
The real answer is: Maybe with some trickery with javascript.
Apparently Facebook does something close to this. When you write a new message to multiple persons in Facebook, you can type their names this sort of way. Each recognized new name is added a bit like an tag here and has an small cross next to it for removing it.
What they seem to do, is fake the input area size by drawing an input-looking box and removing all styling from the actual input with css. Then they have plenty of logic done with javascript so that if you have added an friend as a tag and start backspacing, it will remove the whole friends name at once. etc.
So, yes, it's doable, but takes plenty of effort and adds accessibility problems.
You can look how they do that at scripts like TinyMCE, which add such features to textareas. In textareas you can use HTML to colorize text.
You can use multiple textboxes
textbox1 <space> textbox2 <space> textbox3 ....
and so on... You can then apply the background-color style to each textbox.