We Keep Coding

jQuery click function not working even after using document.ready()

I'm Trying to popup an alert when a button is clicked using jQuery but for some reason its not working.
$(document).ready(function () {
$("#find").click(function () {
alert("Hi");
});
});
Here is the link to code:Weather
Kindly let me what I'm I doing wrong.

You should try this instead.
$(function(){
$("#find").on('click',function () {
alert("Hi");
});
});

How would I add a fadein function to this script using jquery?

I'm using the script below to change a background image on click, but I'd like the transition to be a bit smoother with a fadein. Would that be possible?
Here is the script:
<script>
$(function(){
$("#button").on("click", function(e) {
e.preventDefault();
$('.class').css("background-image", "url('http://website.com/images/image.png')");
});
});
</script>

fadeOut the .class element first and use the callback function to change the css and to fadeIn again....
<script>
$(function(){
$("#button").on("click", function(e) {
e.preventDefault();
$('.class').fadeOut(1000,function(){
$(this).css("background-image", "url('http://website.com/images/image.png')").fadeIn('slow');
})
});
});
</script>

Try this, it will give you a nice fadeIn effect.
<script>
$(function(){
$("#button").on("click", function(e) {
e.preventDefault();
$('.class').fadeIn(800).css("background-image", "url('http://website.com/images/image.png')");
});
});
</script>

impress.js - Next and Previous buttons

I've looked at the other questions on this topic, and know that I have to do something like this:
I've created buttons:
<button id="next"></button>
<button id="prev"></button>
And then at the bottom of the page, I have this (this was taken from the other question here):
<script src="js/impress.js"></script>
<script>impress().init();</script>
<script>
$("#next").click(function () {
api.next();
});
$("#prev").click(function () {
api.prev();
});
</script>
But it isn't working at all; can someone give me a hand with this?

it works, if next-prev are in inside impress div
$('#next').on('click', function(e){
impress().next();
e.stopPropagation();
});
$('#prev').on('click', function(e){
impress().prev();
e.stopPropagation();
});

Replace your script this way:
<script>
$("#next").click(function () {
impress().next();
});
$("#prev").click(function () {
impress().prev();
});
</script>

Have you included jQuery? If not, add this too:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

How do I hide a element using jquery on click and when a user clicks away?

CODE:
<script type="text/javascript">
$(document).ready(function() {
$('.show_or_hide_link_clicker').click(function() {
$(".the_box_to_show").fadeIn(400);
});
});
</script>
When show_or_hide_link_clicker is clicked the_box_to_show is shown. How do I hide it if show_or_hide_link_clicker is clicked again or when the user clicks away?
Update: This is what I am doing now: http://jsfiddle.net/nFbnr/
Question: How can i remove the double click requirement ot show the div?

jQuery Toggle is what you're looking for.
$('.the_box_to_show').toggle();

When clicking anywhere, check if the element was on the propagation path. If not, the user clicked outside of it so you can hide it.
$(document).click(function(e) {
if ($(e.target).closest(".the_box_to_show").size() === 0) {
$(".the_box_to_show").hide();
}
});
http://jsfiddle.net/vdHAu/

$(document).click(function(e) {
if (!$(e.target).is(".the_box_to_show")) {
$(".the_box_to_show").hide();
}
});
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(".the_box_to_show").fadeIn(400);
});

An another way without delegate event to document level:
you have to set attribute tabindex to the box and CSS outline for style
http://jsfiddle.net/GV56b/
$(document).ready(function () {
$('.show_or_hide_link_clicker').click(function () {
$(this).hide();
$(".the_box_to_show").fadeIn(400, function () {
this.focus()
});
});
$(".the_box_to_show").on('blur',function(){
$(this).hide();
$('.show_or_hide_link_clicker').fadeIn(400);
});
});

check this out
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(this).addClass('active);
$(".the_box_to_show").fadeIn(400);
});
$(document).on('click', 'html', function(){
$(".the_box_to_show").fadeOut(400);
});
$(document).on('click', '.active', function(e){
e.stopPropagation();
});

jQuery Mobile Alert if navbar ID is Clicked

I am trying to revise the following jQuery Mobile code to display if the navbar with the id "e" is clicked. The code below works for all of the navbar items, but I only want the alert to appear if the navbar with the id "e" is clicked. Any help revising this would be great. Thanks much!
$(document).on('pagebeforeshow', '#p_page', function(event){
$('div[data-role="navbar"] a').live('click', function () {
alert("div E clicked");
});
});

This should work:
$(document).on('pagebeforeshow', '#p_page', function(event){
$('div[data-role="navbar"] ul li a#e').on('click', function () {
alert("div E clicked");
});
});
Working example: http://jsfiddle.net/Gajotres/rnRqm/

Instead of live use click event because live is deprecated from jquery.
$('div[data-role="navbar"] a').on('click', function () {
alert("div E clicked");
});