We Keep Coding

Want to hide error from console $(...).focusOut is not a function

I am really surprised why i am getting this error on console because this code is working absolutely fine. Actually on hover i am showing div over image. Div smoothly slideUp on hover for that i am using this code
<script>
$(function(){
$('.slide').focusOut(
function(){
$(this).find('.caption').slideDown(600);
});
$('.slide').hover(function(){
$(this).find('.caption').slideUp(600);
});
});
</script>
But if i remove focusout then it stucks while sliding up. Hope i am able to understand you. what i want is how can i stop this error or what is the alternative of this
I have edited my code and now it is working absolutely fine
$(function(){
$('.slide').on('hover',function(){
$(this).find('.caption').slideUp(600);
});
$('.slide').on('mouseleave',function(){
$(this).find('.caption').slideDown(600);
});
});

Try the on function:
<script>
$(function(){
$('.slide').on('focusout',function(){
//CODE
});
});
</script>

Your syntax is wrong. Try it...
<script>
$(function(){
$('.slide').focusout(
//CODE
});
});
</script>

Count Number of Matched Elements in Document with jQuery

I need to count the amount of video thumbnails on a given product page for an ecommerce store, and then output this number on the same page in a particular HTML element.
The desired result is that on the 'Videos' tab there will be the number of videos right next to it. i.e. Videos 17
I've tried to use .length() and .append() to achieve this but am having dramas. I have about 1.5 days jQuery experience so I know I'm doing something wrong here.
$document().ready(function(){
var numvids = $('.videos').length;
$('.countvids').append("<p>"+numvids+"</p>");
});
I've set up a JSFiddle
Any help is much appreciated. Thanks!

In Jquery $() is a selector, if you say :
$(document).ready(function(){
});
it means that execute the block inside that function when my document is loaded complete on the browser, but what you write :
$document().ready(function(){
...
});
is wrong syntax and is not valid in jquery.
this should work with length:
$(document).ready(function(){
var numvids = $('.videos').length;
$('.countvids').append("<p>"+numvids+"</p>");
});
or you can use size():
$(document).ready(function(){
var numvids = $('.videos').size();
$('.countvids').append("<p>"+numvids+"</p>");
});
here is Fiddle DEMO
you code was like this:
$document().ready(function(){
var numvids = $('.videos').length;
$('.countvids').append("<p>"+numvids+"</p>");
});
which is wrong
and also you need to include query script file in your page.
you can include it from online like this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script>

See updated fiddle.
The only error is that you did not include the Jquery link and/or
$(document).ready(function(){
http://jsfiddle.net/65BrR/4/

$document() is not Correct syntax of jquery , its $(document)
hope so its solve your problem !
$(document).ready(function(){
var numvids = $('.videos').length;
alert(numvids );
$('.countvids').append("<p>"+numvids+"</p>");
});

Your mistake was referencing the a non-existent global function called $document isntead of calling $(document). As it happens, your code would have worked, as-is, if it had been preceded by this:
var $document = $(document).ready;
But this is purely for amusement and is not very practical or readable code :)
Use the document-ready shortcut syntax
You really want to use the shorter jQuery shortcut. Instead of $(document).ready(function() {YOUR CODE HERE}); use $(function(){YOUR CODE HERE});
e.g.
$(function(){
var numvids = $('.videos').length;
alert(numvids );
$('.countvids').append("<p>"+numvids+"</p>");
});
This results in shorter code and is becoming so commonplace you might as well get used to it :)

Jquery click function problems

New to jQuery I am trying to have an image that when I click on it I want to move up a certain amount of pixels then when another image is clicked go back down to the original state?
so far i have tried this
$(".wrap").click(function(){
$(this).css("margin-top", "-15px");
});
I just cant figure out how to make it move down to its original place
thanks

Try to do:
$("img.wrap").click(function(){
$("img.wrap").css("margin-top", "0px");
$(this).css("margin-top", "-15px");
});

For better look use Jquery animate
$( ".wrap" ).click(function() {
$(this).animate({
top: "15px",
}, 500);
});

Place it in document.ready and use latest JQuery source file:
<script type="text/javascript>
$(document).ready(function(){
$(".wrap").on('click',function(){
$(this).css("margin-top", "-15px");
});
});
</script>

Try to wrap it in ready()
And css() may not apply margins so use javascript marginTop like,
$(function(){
$(".wrap").click(function(){
this.style.marginTop='-15px';
});
});
Live Demo

As per my understanding of your question. I've created a fiddle to help you find a solution. Please have a look at the fiddle and the code snippet below. Appreciate your time.
$('.sample img').bind('click',function(){
$('.sample img').removeAttr('style');
$(this).css('top',-5);
});

Do you want like this:
var mt = $('.wrap').css('margin-top');
$(".wrap").click(function(){
if($(this).css('margin-top') == '-15px'){
$(this).css('margin-top',mt);
} else {
$(this).css("margin-top", "-15px");
}
});

Problems with original Jquery script, it won't start!

I'm suck a noob when it comes to java/jquery, I don't even know the basics. So please have understanding.
I've fetched this script from the jQuery website, but it won't start for me :/
What am I doing wrong?
The whole script is found on http://jsfiddle.net/xZUue/
Thank you for your help!

You have to call the miniscroller function on your div, like so:
$(function() {
$("#scroller").miniscroller();
});
see http://jsfiddle.net/qJkdy/

jQuery is loaded and so is the plugin, but your not making any use of it!
Do:
$('#scroller').miniscroller();

Check out..Its working...u were missing
<script>
$(function () {
$("#scroller").miniscroller();
});
</script>
updated link: http://jsfiddle.net/xZUue/5/

JQuery missing : after property ID

So I am working with some jquery code to do a simple hide of a p and a show of a p. I am simple adding a class called showp and showing it while making sure the others are not shown by hiding them first. But I keep getting an error missing : after property ID. Any help would be greatly appreciated.
$(document).ready({
$("#phone").click(function(){
$(".hide2").addClass(".hide2").hide("slow");
$(".hide3").addClass(".hide3").hide("slow");
$(".hide1").addClass("showp").show("slow");
});
});

Change this:
$(document).ready({
To this
$(document).ready(function(){

Try this:
$(document).ready(function() {
$("#phone").click(function() {
$(".hide2, .hide3").hide();
$(".hide1").show();
});
});

Your document ready is invalid.
$(document).ready(function() {
// stuff here.
});
Or better yet, a shorthand:
$(function() {
// stuff here.
});