Is there a way to make the mousemove event handler work over an HTML <object> tag? I have HTML like this:
<object type="image/svg+xml" data="myfile.svg"></object>
<img src="myfile.svg"/>
and some JavaScript/jQuery like this:
$("img, object").on("mousemove", function() {
$("body").css("background-color","#f0f");
});
$("img, object").on("mouseleave", function() {
$("body").css("background-color","transparent");
})
But the mousemove is only working over the img tag. Applying pointer-events: all to object or object * didn't seem to help.
Here is a fiddle.
$("img, object").on("mousemove", function() {
$("body").css("background-color","#f0f");
});
$("img, object").on("mouseleave", function() {
$("body").css("background-color","transparent");
})
img, object {
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Mouse over the images to change the background color. It doesn't seem to work for the object tag.
<h2>SVG as <object></h2>
<object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/e/ea/Converted_to_SVG.svg"></object>
<h2>SVG as <img></h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/Converted_to_SVG.svg"/>
Have you tried using onmouseenter? or are there specific things you wish to do when the mouse moves?
if so, I suggest you wrap the object into a inlined div, and add the listener to the div, and set pointer events to none on the object.
See the example below:
$("img, .objectwrap").on("mousemove", function() {
$("body").css("background-color","#f0f");
});
$("img, .objectwrap").on("mouseleave", function() {
$("body").css("background-color","transparent");
})
img, object {
width: 100px;
}
object {
pointer-events:none;
}
.objectwrap {
display:inline-block;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Mouse over the images to change the background color. It doesn't seem to work for the object tag.
<h2>SVG as <object></h2>
<div class="objectwrap">
<object type="image/svg+xml" data="https://upload.wikimedia.org/wikipedia/commons/e/ea/Converted_to_SVG.svg"></object>
</div>
<h2>SVG as <img></h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/Converted_to_SVG.svg"/>
The object tag represents something that is not considered part of the DOM. This is done so that the user can interact with it directly. It was originally designed for external applications like Flash.
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object
Related
I want to add a click event to an iframe. I used this example and got this:
$(document).ready(function () {
$('#left').bind('click', function(event) { alert('test'); });
});
<iframe src="left.html" id="left">
</iframe>
But unfortunately nothing happens.
When I test it with another element (e.g. a button), it works:
<input type="button" id="left" value="test">
You could attach the click to the iframe content:
$('iframe').load(function(){
$(this).contents().find("body").on('click', function(event) { alert('test'); });
});
Note: this will only work if both pages are in the same domain.
Live demo: http://jsfiddle.net/4HQc4/
Two solutions:
Using :after on a .iframeWrapper element
Using pointer-events:none; one the iframe
1. Using :after
use a transparent overlay ::after pseudo element with higher z-index on the iframe's wrapper DIV element. Such will help the wrapper to register the click:
jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});
.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper::after{ /* I have higher Z-index so I can catch the click! Yey */
content:"";
position:absolute;
z-index:1;
width:100%;
height:100%;
left:0;
top:0;
}
.iframeWrapper iframe{
vertical-align:top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>
2. Using pointer-events:none;
Clicks are not handleable from outside the iframe from an external resource (if the iframe is not in your domain).
You can only create that function inside your 'called into iframe' page, not from within the iframe-hosting page.
How to do it:
You can wrap your iframe into a div
make the click "go through" your iframe using CSS pointer-events:none;
target clicks with jQuery on your wrapping DIV (the iframe parent element)
jQuery(function ($) { // DOM ready
$('.iframeWrapper').on('click', function(e) {
e.preventDefault();
alert('test');
});
});
.iframeWrapper{
display:inline-block;
position:relative;
}
.iframeWrapper iframe{
vertical-align:top;
pointer-events: none; /* let any clicks go trough me */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iframeWrapper">
<iframe src="http://www.reuters.tv/" frameBorder="0"></iframe>
</div>
NOTA BENE:
No clicks will be registered by the iframe element, so a use-case would be i.e: if by clicking the iframe you want to enlarge it full screen.... Etc...
I got it to work but only after uploading it to a host. I imagine localhost would work fine too.
outer
<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
var myFrame = document.getElementById("myFrame");
$(myFrame.contentWindow.document).find("div").on("click", function () { alert("clicked"); });
});
</script>
<body>
<iframe id="myFrame" src="inner.htm"></iframe>
</body>
</html>
inner
<html>
<head>
<style>
div {
padding:2px;
border:1px solid black;
display:inline-block;
}
</style>
</head>
<body>
<div>Click Me</div>
</body>
</html>
Pure Javascript
Not my solution but only this works well.
let myConfObj = {
iframeMouseOver : false
}
window.addEventListener('blur',function(){
if(myConfObj.iframeMouseOver){
console.log('Wow! Iframe Click!');
}
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
myConfObj.iframeMouseOver = false;
});
$(document).ready(function () {
$('#left').click(function(event) { alert('test'); });
});
<iframe src="left.html" id="left">Your Browser Does Not Support iframes</iframe>
The script would have to be ran entirely from the iframe. I would recommend a different method of calling content, such as php.
iframes aren't really worth the hassle.
The actual problem is that, the click event does not bind to the DOM of the iframe and bind() is deprecated, use .on() to bind the event. Try with the following codes and you will find the borders of the iframe clickable getting that alert.
$('#left').on('click', function(event) { alert('test'); });
Demo of that Issue
So how to get it done?
How you should do is, create a function on iframe page, and call that function from that iframe page.
I'm a complete noob when it comes to javascript. Would there be anyway to change an image after it is clicked, some way to trigger a js function to change the css. It would have to be triggered by an event and something other than onclick, onfocus probably.
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img src='nope.jpg' id='pic' onclick="mouseOver()"></img>
<script type='text/javascript'>
function mouseOver() {
document.getElementById('pic').style.width="400px";
document.getElementById('pic').style.height="400px";
}
</script>
try this...
function mouseOver() {
document.getElementById('image').style.height = "400px";
}
First i edited the question , because the function was not defined correctly .
Second :
to access the height property of any element , you should use style.height , and should add "px" to the value.
please spend more time searching for answers , instead of posting a new question.
Change the JS to this:
var image = document.getElementById('image');
function mouseOver() {
image.style.height="600px";
}
image.onclick = mouseOver;
Setting values you can use directly style attribute, but remember that asking for them is a greater problem:
Please refer to this one:
Get a CSS value with JavaScript
This should work
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img
width="100"
onmouseOver="this.width=400; this.height=400"
onclick="this.width=100"
alt="RESIZE IMAGE"
id='pic'
src='nope.jpg'
/>
just copy and edit the image tag code as needed
I am very new to JS. My requirement is very simple, to change the color of Text on Mouse Over.
I have created 2 JS functions : 1st for MouseOver and 2nd for MouseOut.
Can I do it in one single JS function.
I have other Text also.
JavaScript
function highlightBG(element) {
document.getElementById('element').className='AttachOnMouseOverText';
}
function highlightOutBG(element){
document.getElementById('element').className='AttachOnMouseOutText';
}
HTML code :
<td align="center" id="element">
<img name="folder" onMouseOver="highlightBG();return true;" onMouseOut="highlightOutBG();return true;">
<br>Add Folder
</td>
You can find here the answer using pure-js as you asked :
HTML :
<div id="element" class="AttachOnMouseOutText" onMouseOver="highlightBG();return true;" onMouseOut="highlightOutBG();return true;">Hidden text</div>
CSS :
.AttachOnMouseOverText {
color: white;
}
.AttachOnMouseOutText {
color: black;
}
Javascript :
function highlightBG() {
document.getElementById('element').className='AttachOnMouseOverText';
}
function highlightOutBG(){
document.getElementById('element').className='AttachOnMouseOutText';
}
You can see here an example using CSS :hover state.
EDIT
If you want a single function to handle this, try someting like :
function highlightBG(elementName, isIn) {
if (isIn)
document.getElementById(elementName).className = 'AttachOnMouseOverText';
else
document.getElementById(elementName).className = 'AttachOnMouseOutText';
}
this is simple by using css:
selector:hover
{
color:red;
}
And you can also use jquery for this
$("selector").on( "mouseover", function() {
$( this ).css( "color", "red" );
});
If you need the hover change on a link then definitely use a :hover in CSS, it will be the most efficient way.
However if you are looking to add it to a non-link element it can cause issues in IE7 and 8. Have a look at Google Best Practices, in particular the section about :hover.
If that is the case then JS is a way to do it.
It might be easier to use jquery to do what you want, if you are using javascript you might just as well make use of jquery. Create a css class to represent the color you want to change the text to, for example
.green{
color: green;
}
Change your HTML to
<td align="center" id="element">
<img name="folder" />
<br>Add Folder
</td>
And add some jquery to add your css class when you move your mouse over 'element', for example
$("#element").mouseover(function(){
$(this).addClass("green");
});
If you want to change the color back when the mouse leaves the area, you can just remove the class again. For example
$( "#element" ).mouseleave(function() {
$(this).removeClass("green");
});
Here is the HTML (with an inline ID of "practice"):
<h1 id="practice">Hello!</h1>
Here is the vanilla JavaScript (using a generic function and a callback):
document.getElementById("practice").addEventListener("mouseover", function() {
document.getElementById("practice").style.color = "pink";
});
document.getElementById("practice").addEventListener("mouseout", function() {
document.getElementById("practice").style.color = "yellow";
});
Mousing over changes the HTML text to yellow; removing the mouse from the area returns the HTML text to black.
Is it possible with js / jQuery to fade just the embedded image instead of the div in order to reveal the divs background image? I have multiple instances of the classes below and only want to affect change to the one's that are selected.
e.g:
.image {
width: 200px;
background-image: url(elements/pattern.png);
}
<div class="box">
<div class="image"><img src="pics/001.jpg"/></div>
<div class="project">Title</div>
</div>
$('.image').mouseover(function() { $(this img).stop().animate({opacity:.7}, 200); });
$('.image').mouseout(function() { $(this img).stop().animate({opacity:1}, 600); });
Also, is it possible to address specific classes within a div ?
e.g:
$('.image').mouseover(function() { $(**this .project**).css({color:'#FFF'}); });
$('.image').mouseout(function() { $(**this .project**).css({color:'#999'}); });
Thanks
....
SOLVED
Managed to get it to work by using find() as suggested and wrapping the image in an extra class. Now the image fades and .image's background pixel pattern blends through:
<div class="box">
<div class="image"><div class="p"><img src="pics/001.jpg"/></div></div>
<div class="project">Title</div>
</div>
$('.box').mouseover(function() {
$(this).find('.p').stop().animate({opacity:.3}, 200);
$(this).find('.project').css({color:'#FFF'});
});
$('.box').mouseout(function() {
$(this).find('.p').stop().animate({opacity:1}, 600);
$(this).find('.project').css({color:'#FFF'});
});
cheers!
Use jQuery's built in fade
$('.image').hover(function() { // on mouseover
$(this).stop().fadeTo(200, 0.7);
}, function(){ // on mouseout
$(this).stop().fadeTo(600, 1);
});
jQuery fadeTo()
Also to address specific items in a div you can use .find()
$('.box').mouseover(function(){
$(this).find('.image').animate({...}); // will animate .image when you hover .box
});
You can use next():
$('.image').mouseover(function() { $(this).next('.project').css({color:'#FFF'}); });
Try to look into the context attribute of the jQuery selector.
Basically:
$('.image').mouseover(function() { $('img',this).stop().animate({opacity:.7}, 200); });
This would select the img element inside the element where the mouseover is triggered.
I am new to JQuery and am trying to make a div slide out from right to left, and then slide back in from left to right. The code I am using is:
function addListeners()
{
document.getElementById('save_li').addEventListener('click', function () {
$('#frame_div').animate({width:'toggle'});
document.getElementById('frame_opened').src = "save.php";
$('#frame_div').animate({width:'toggle'});
}, false);
document.getElementById('recover_li').addEventListener('click', function () {
$('#frame_div').hide("slide",{direction:"right"},1000);
document.getElementById('frame_opened').src="recover.php";
//$('#frame_div').animate({width:'toggle'});
$('#frame_div').show("slide",{direction:"left"},1000);
}, false);
}
window.onload=addListeners;
HTML:
<div src="save.php" class="frame_div" style="height: 500px; width: 574px; padding-left: 146px;">
<iframe id="frame_opened" style="width: 100%;" height="100% overflow-x:hidden; overflow-y:hidden;" scrolling="no">
</div>
No errors are shown from either FireBug or WebDeveloper on Firefox, yet the code doesn't work. The iframe source changes with no animation.
I cleaned up your code and made it all-jQuery. Make sure you are including jquery.js (or jquery.min.v1.9.1.js or similar) in your page. If you keep the line that requires jQuery UI (see comment in code), make sure you include jQuery UI's CSS and JS files.
jQuery:
$(document).ready(function(){
$('#save_li').click(function () {
$('#frame_div').animate({width:'toggle'}, 1000);
$('#frame_opened').attr('src','save.php');
$('#frame_div').animate({width:'toggle'}, 1000);
});
$('#recover_li').click(function () {
$('#frame_div').hide("slide",{direction:"right"}, 1000); // this line requires jQuery UI
$('#frame_opened').attr('src','recover.php');
$('#frame_div').show("slide",{direction:"left"}, 1000); // this line requires jQuery UI
});
});
You were missing some required properties, such as the length of animation. (I set it to 1000, which is 1 second.)
If you want to omit jQuery UI, use this:
$(document).ready(function(){
$('#save_li').click(function () {
$('#frame_div').hide(1000).show(1000);
$('#frame_opened').attr('src','save.php');
});
$('#recover_li').click(function () {
$('#frame_div').hide(1000).show(1000);
$('#frame_opened').attr('src','recover.php');
});
});
HTML:
<div id="frame_div" style="height: 500px; width: 574px; padding-left: 146px;">
<iframe src="save.php" id="frame_opened" style="width: 100%;" height="100% overflow-x:hidden; overflow-y:hidden;" scrolling="no"></iframe>
</div>
The src attribute goes on the iframe element. If possible, move styles to CSS instead.
Demo: http://jsfiddle.net/vy5AW/5/ using the HTML/CSS supplied by the OP in jsfiddle.net/vy5AW/2/