We Keep Coding

mousemove not working on object element

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

How to add spinner in Jquery .html(<object data="http://example.com">)

I loading external website (my own) using Jquery.
<div id="siteloader"><center>
<img style="width: 100px; height: 100px;" src="http://seafood.greenpeaceusa.org/images/spinner.gif" alt="Mountain View" /></center></div>
​
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$( document ).ready(function() {
$("#siteloader").html('<object "width:100%; height:2000px; data="http://example.com/findex.php">');
});
</scirpt>
As you can see right now, I am loading spinner gif inside the div and replacing the content of the div with the external website html, However it is replacing it on the moment it is downloading the website can I make it wait untill the website is downloaded and only then replace the html ?
By the way, .load method is not working for me for some reason =\

Your object replaces content of the div at document.ready. It should be done when the object is loaded.
<script>
$( document ).ready(function() {
//$("#siteloader").html('<object "width:100%; height:2000px; data="http://example.com/findex.php">'); syntax errors here
//this doesn't work as well
$('<object "width:100%; height:2000px; data="http://example.com/findex.php">')
.load(function(){
$("#siteloader").empty().append(this);
});
});
</script>
Fixed working script:
<script>
$( document ).ready(function() {
/*
//wrong again spinner disappear before object loaded
$('<object style="width:100%; height:400px; display:none;" data="http://www.w3schools.com/tags/helloworld.swf" />')
.appendTo($("#siteloader"))
.after(function () {
console.log('loaded');
$(this).show().siblings().each(function () {
$(this).remove();
});
});
*/
//and this work for sure
var obj = document.createElement('object');
obj.onload = function () {
console.log('loaded');
$(this).css({ width: '100%', height: '400px' }).show()
.siblings().each(function () {
$(this).remove();
});
};
obj.data = 'json.php';
$(obj).appendTo('#siteloader');
});
</script>
I hope it will work with your data as well. This looks ugly (mix jquery and pure JS) but this is the only found way to make it work. $(obj).appendTo('#siteloader') triggers the load.
Just in case, PHP used:
<?php
usleep(10000000);
echo '{"name":"qwas","qty":10,"curr":"'.date('h:i:s').'"}';
?>

Adding animation to this jQuery script

Have a fairly simple show/hide script for a set of data filters from a button. I've been looking at solutions on how to animate the transition but can't seem to see how this script differs from what's described on the jQuery site.
I read somewhere else that CSS3 animations might be easier or better but that also remains a mystery to me.
Is there an easy modification to this script:
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});

Instead of changing the classes, you can use the built-in toggleX methods (eg toggle() and slideToggle()).
If you want to do something more fancy such as animating colours, you'll need to look at the animate method and possibly including jquery-ui, which is where css3 transitions may be easier / less overhead unless you're already including jquery-ui.
$("#toggle").click(function() {
$("#target").toggle(500);
});
$("#slide").click(function() {
$("#target").slideToggle(500);
});
Basic fiddle: https://jsfiddle.net/t2j03v6d/

$('.target').on( 'click', function () {
var $stuff = $(this).find('.stuff');
if ( $stuff.is(':visible') ) {
$stuff.slideUp('slow');
} else {
$stuff.slideDown('slow');
}
});
.target .stuff {
display: none;
height: 400px;
background-color: #F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="target">
Show/Hide
<div class="stuff"></div>
</li>
</ul>

I'm not sure what animation you're looking for but here I've used slideToggle() (http://api.jquery.com/slidetoggle/) using some of the code you've provided: https://jsfiddle.net/8gavvmnL/1/
HTML:
<a class="toggle" href="#pop">Click Me</a>
<div id="pop">
I'm hidden until the button is clicked!
</div>
jQuery:
$("#pop").hide();
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).slideToggle();
});

jQuery - hide div, then show on click

So I have a div that I want to slide down from behind another div when an arrow is clicked - then to hide again once a form button is clicked. I can code most of this, however I do not understand how to hide the div from view, then make it drop-down using slideToggle.
Edit: As suggested by people below (thanks), it turns out slideToggle() isn't what I need, but rather animate() - the code below doesn't seem to work, I've added a link to the jQuery UI but still nothing.
HTML
<div class="schedule">
<div class="scheduletop">
<img src="/images/audit.png">
</div><!-- .scheduletop -->
<div class="schedulebottom">
<?php echo do_shortcode("[contact-form-7 id='61' title='Audit']"); ?>
</div><!-- .schedulebutton -->
<div class="thestuff">
<h3>TEST!</h3>
<div class="slide">
CLICK TEST TO SLIDE
</div><!-- .slide -->
</div><!-- .thestuff -->
</div><!-- .schedule -->
jQuery
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").animate({"down": "150px"}, "slow");
});
});
Any ideas?

slideToggle() isn't the function you should use in this situation. It only changes the height of the matched elements, while the .animate() method on the other hand can move your div in the desired direction, but it doesn't hide the element when the animation is finished, so you should use a callback if you want to achieve that. If you want to place a div behind another one, you should use the z-index css property.

As you were told you should use .animate().
I've made a simple example here.
here is the js code
$(document).ready(function () {
$(".thestuff").click(function () {
$el = $(this).find(".slide");
if (!$el.data('up')) {
var h3Margin = parseInt($(this).children().eq(0).height(), 10);
var margin = "-" + ($el.height() + h3Margin) + "px";
$el.css("z-index", -10);
$el.animate({
"margin-top": margin
});
$el.data('up', true);
} else {
$el.animate({
"margin-top": 0
}, {
complete: function () {
$el.css("z-index", 1);
}
});
$el.data('up', false);
}
});
});
you can also use opacity instead of z-index but that's up to you

$(".slide").animate(
{ top: "+=150" },
1000,
function () {
$(this).hide();
}
);
The above code will animate your div down 150px by increasing the "top" attribute. Then when it is finished with the animation it will hide your .slide div.
edit:
The "1000" in there says, take 1 second to complete the animation.
edit2: Oh, also make sure .slide has the attribute "position" set to "relative".

Okay so it seems that i can achieve what i'm looking for with slideToggle() afterall, i just had to set the main content container to not show until clicked (added display: none; to CSS).
$(document).ready(function() {
$(".slide").click(function() {
$(".thestuff").slideToggle("slow");
});
});
For anyone who may be trying to find a similar solutions check the jsfiddle

Jquery pulsate changing color or image

I'm trying to have a div change colors using the jquery pulsate code but i want it to change from red to black, but i heard to do this you have to download a certain plug in. so instead i want it to pulsate to a picture. so far i have these two codes:
<img id="book" src="36.gif" alt="" width="105" height="105"
style="position: absolute; top: 585px;
left:585px;" />
and
<script>
$(document).ready(function() {
$("#white36").click(function () {
$('#book').animate({
$(this).effect("pulsate", { times:3000 }, 500);
});

you got it wrong, you are not supposed to use the .animate() method.
also for .pulsate() to work you need to include jquery UI in your html file.
I haven't tested it but it should work:
$(document).ready(function() {
$('#white36').click(function () {
$('#book').effect("pulsate", { times:3000 }, 500);
});
});
http://docs.jquery.com/UI/Effects/Pulsate