I am using kenod box plot in my project. Is there any way i can get a hover event when the user hovers over the box plot chart? Not the(onserieshover)event ,but on simply hover on chart area?
Help needed
You can add event listener for mouseover event to the div tag of your chart. Please see below example
<html>
<body>
<div id="kendoChart></div>
</body>
<script>
document.getElementById("kendoChart").addEventListener("mouseover",kendoChartMouseOver);
function kendoChartMouseOver()
{
#* Do Something On Mouse Hover *#
}
</script>
</html>
I have not tested the above code but it should work fine.
Related
I am trying to make a blur image change on mouseover. Something like camera zooming in and out with certain things get blurred when other is zoomed in. Best way to understand what I want is to see it here:
http://berger.co.rs/test/test.html
And I have only one problem. The mouseover image is always behind the active image. I need to have only active image and when mouseover is applied, then to change images. Also, I don't want active image to disappear in total, and then to load mouseover image. I need it like on example above, just not to have mouseover image shown behind all the time.
You can see whole code I have inside of the page source.
Can you please help me?
First welcome to Stackoverflow, as a new user, please read this guide so you can ask better and get better and quicker answers:
https://stackoverflow.com/help/how-to-ask
please avoid code on comments. If someone ask you for additional code, include it in the question.
Now the answer:
The problem is just that you didn't provide Jquery for $() commands to work. "alturl.com/bcfhv" isn't correct.
here, put this on file, it's working:
<html>
<body>
<style>
div{
position:relative;
width:714px;
height:420;
overflow:hidden;
}
span {
position:absolute;
top:0px;
left:-0px;
}
</style>
<div>
<img src="http://berger.co.rs/test/img/mouseover.png" width="714" height="421"/>
<span>
<img src="http://berger.co.rs/test/img/active.png" width="714" height="421"/>
</span>
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
alert('ok')
$("div").hover(function() {
$("span").fadeIn();
}, function() {
$("span").fadeOut();
});
})
</script>
</body>
</html>
Or see it working here
I downloaded the latest CKEditor and tried the following:
<html>
<head>
<script src="ckeditor/ckeditor.js">
</script>
</head>
<body>
<div id="editor">
Some test text
</div>
<script>
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'editor' );
</script>
</body>
It worked in the sense that I can click the div to make the editor toolbar appear, but aside from that I can't seem to edit the content! Most of the toolbar buttons are disabled, and typing into the field does nothing. (See screenshot below)
According to http://nightly.ckeditor.com/13-04-14-07-42/standard/samples/inlinebycode.html this should be all the JS I need. Is there some other config setting I need to be doing?
Rawr, sorry. I found the answer mere minutes after posting this. I was so focused on looking for a config option I didn't realize to check the div in the example.
The div still has to have contenteditable="true" even if I don't use CKEDITOR.disableAutoInline.
I'm trying to make a feature where users type into a text box which produces suggestions as you type (like Google Instant), then those suggestions can be dragged into boxes on the page. It all worked fine until I discovered touch screen mobile devices don't work with HTML 5 drop and drag. I'm trying to get it work with jquery instead but it's not going smoothly.
The code below displays a draggable image and it works with touch screens and mice.
<script type='text/javascript' src='js/head.min.js'></script>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script>
head.js('https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js','js/ui.js','js/touch.js', function (){
$('#touchme1').draggable({revert:true});
$('#drop').droppable({
drop: function( event, ui ) {
$(ui.draggable).remove();
$(this).css({'border':'#777 dashed 3px','background':'#eee'});
},
over: function(event, ui) {
$(this).css({'border':'#a33 dashed 3px','background':'#faa'});
},
out: function (event, ui){
$(this).css({'border':'#777 dashed 3px','background':'#eee'});
}
});
});
</script>
<img src='itemimages/75.jpg' id='touchme1' class='touchBox'>
The problem is that when the same code is used within the php file which is called to display search results, the drag and drop doesn't work on mobile devices (but it does on desktops).
I have a feeling you may need to attach an event handler to the #touch1 element. The code you posted only looks for #touch1 elements that already exist in the DOM, but as your element is loaded though AJAX, it will not be in the DOM when the page first loads.
You can use .on() to attach an event handler to the object.
$(document).on('mouseover', '#touchme1', function(){
$(this).draggable({revert:true});
});
In the above example I am using the mouseover event. However you will need to choose an event hander that will work for you with both touch devices and with a mouse.
Example jsbin: http://jsbin.com/agisom/2/edit
With the Windows Phone 7 Browser, when the user clicks a link, it is shaded with a gray rectangle for approximately 0.5 seconds. This is fine in generally, however, if you have dynamic page behaviour, for example, clicking a link updates the DOM so that the link is no longer visible, the opaque gray rectangle lingers on the screen after the link itself has gone.
This looks pretty horrible!
Does anyone know how to disable this effect?
Add a meta tag in you head section in you html file.
<meta name="msapplication-tap-highlight" content="no" />
It should work.
The following solution seems to work (at least on the emulator). The gray shading needs the dimensions of the clicked element. If the element has zero width then there is no shading, while clicking the child elements still fires the element's click handler.
<div id="myLink" style="float:left">
<img src="images/myLinkIcon.png" style="position:absolute" />
<span style="position:absolute;left:50px">Click here</span>
</div>
<script>
// jQuery
$(function () {
$("#myLink").click(function () {
console.log("clicked on myLink");
});
});
</script>
The div can either float or be absolutely positioned. The child elements have to be absolutely positioned, otherwise the div acquires a width.
This works try using jquery
$(id|classname|document).live('click',function(){
//write code that needs to executed in this area
});
I have used this in my project. It works fine to hide the grey shade, avoid using inline function in html pages ... using jquery this function works only when inner content is assigned to it.. eg
<div id="d1"><div id="d2"></div></div>
you can this for inner div like this
$('#d2").live('click',function(){changecolor();changebackground();});
enjoy coding........jquery
The solution is to make 2 DIVs. Main div dont have width/height and this DIV is firing event and DIV inside have got size.
I've made with my friends working example inside phonegap project. Check link: https://github.com/sellupp/cordova-for-windows-phone-7-antidepressant
You are looking for: 1. gray area on tap
We're also handling problem with low responsivenes time. Check it out ;)
Is it possible to change CSS position of a background image with a DIV ("omega") from a separate link ("alpha") with a MOUSEOVER?
<a class="omega" href="#"></a>
<div id="alpha"></div>
Is JavaScript/jQuery ok? If so, something like this should work:
$('.omega').hover(function(){
$('#alpha').css('backgroundPosition', '500px 150px');
}, function(){
$('#alpha').css('backgroundPosition', '0px 0px');
});
The first function is for mouseover, the second one resets it when the mouse leaves. Admittedly, I haven't tried this, but in theory it should work. See jquery hover and jquery css for more info.