We Keep Coding

Create Back browser event using Jquery

I want to create a back button browser event using jquery. I did this code but it doesnt appear to work
$(document).ready(function() {
$('.back').click(function() {
window.history.back();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Back

The href="#" will add a new item to history, so window.history.back(); will "return" to the page where the link was clicked. You need to prevent the link from directing to # with this:
$( document ).ready(function() {
$('.back').click(function(e) {
e.preventDefault();
window.history.back();
});
});

you are missing to specify event as function argument, try this one..
$(".back").click(function(event) {
event.preventDefault();
history.back(1);
});
This might solve your problem.

Novice issue of this jQuery code not working

I'm really new to jQuery, and I want this code to show an alert box when the button is pressed.
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("button").click(function() {
alert("You clicked.");
});
</script>
<button>Button</button>
I try it, and nothing happens when I click the button.

In jQuery when event handlers are added, you need to make sure that the element is already loaded to the dom else jQuery selector will not return the element so the event handler will not get registered.
The solution is to use the dom ready event handler which will get triggered once the initial dom loading is completed meaning all the elements in the pages is loaded into the dom, it is the safest place to add the event handlers.
jQuery(function($){
$("button").click(function() {
alert("You clicked.");
});
})
As #zzzzBov noted below, it is a short cut for using the lengthy document ready handler
jQuery(document).ready(function($){
$("button").click(function() {
alert("You clicked.");
});
})

Right now, when your code executes, the button has not been loaded so it does not attach the click handler to anything, therefore you need to wrap your jQuery code in $(document).ready(function() { ... }); so that there is for sure a DOM element to attach your handler to, so your code becomes:
$(document).ready(function() {
$("button").click(function() {
alert("You clicked.");
});
});
See the documentation on $(document).ready().

Put your code in ready event
$(document).ready(function(){
$("button").click(function() {
alert("You clicked.");
});
});

You're calling jQuery to add the click handler before you're <button> is declared, so jQuery doesn't find it. Either move the <button> to the top of your snippet, or use a DOM ready function to delay your script execution until the DOM is ready to be manipulated.
Like this:
$(document).ready(function() {
$("button").click(function() {
alert("You clicked.");
});
});

You're running that script before the button exists, put it after instead:
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<button>Button</button>
<script>
$("button").click(function() {
alert("You clicked.");
});
</script>

jQuery FadeOut function

I'm trying to add a fadeOut function which links to another. CLICK HERE At present I have a flashing logo. When the user clicks on the logo, the flashing stops, has a slight delay then slowly fades Out. Is there anyone out there that is able to correct me on the code I have pasted below?
<script>
$(document).ready(function(){
$("#center-gif").click(function(){
$('#center-gif').hide();
$('#center-img').show();
});
$('#center-img').click(function(){
$('#center-img').hide();
$('#center-img-gif').show();
});
$('flash-link').click(function(){
$('center-img').fadeOut(5000);
});
});
</script>

If you want to access element with class/id; you must always define . and # these at the begining, like css.
Some Examples:
$('img').fadeOut();//selects all img elements
$('.img').fadeOut();//selects all elements with class="img"
$('myClass').fadeOut(); //false
$('.myClass').fadeOut(); //true
$('myId').fadeOut(); //false
$('#myId').fadeOut(); //true
Here is working jQuery for your question with less code:
$(document).ready(function(){
$("img").click(function(){
var takeId = $(this).attr('id');//takes clicked element's id
$('img').hide();//hides all content
$('#'+takeId).show();
//matches clicked element's id with element and shows that
});
$('#flash-link').click(function(){//define '#' id declaration here
$('#center-img').fadeOut(5000,//new function after fadeOut complete
function() {
window.open('url','http://iamnatesmithen.com/jukebox/dancers.php');
return false;
});
);
});
});

So I assume your problem is that that image does not fade out, right?
This could solve it:
First of all change your .click()-functions to that:
$().click( function(event) {
// cour code
event.preventDefault();
}
And than change the last one like that:
$('#flash-link').click( function(event) {
$('#center-img').fadeOut( 5000, function() {
window.location.href = 'jukebox/dancers.php';
});
event.preventDefault();
});
I didn't test that, but it should work. What it does is: It fades out the image and calls a function when ready. This functions then redirects to your next page.
The event.preventDefault(); will tell the browser not to delegate the click-event. If you don't put it there, the browser opens the anchor without waiting for any JavaScript to execute.
Note
When you want to select an element with an ID use this selector: $('#[id]')as this selector $('html')works only with HTML-elements.

Detect click outside an element (with frames)

I have a main page (main.html) which opens an iframe page (iframe.html).. The iframe is appended as a kind of thickbox window on main.html .Now on this iframe.html, there is a div element "myDiv" and I need to detect click outside of this myDiv element..
The script is written inside a JS called in iframe.html
I already tried a few things (binding event to document and removing from myDiv), but that is not working..
$(document).click(function() {
//your code here
});
$("#myDiv").unbind("click");
I am not sure if this issue has got anything to do because of the iframe...
Please help me. Thank you.

Have you tried something like this? It listens for all clicks on the document, but only triggers your code if the target of the event is not the myDiv element. This way, you can tell if the click was outside the myDiv element or not.... I used jQuery:
// assign a document listener
$(document).click(function(e){
if( $(e.target).attr('id') != "myDiv" )
{
// execute your code here
alert( e.target ); }
});
// assign an element listener
$('#myDiv').live('click',function(){alert("clicked on myDiv")});
It also allows you to assign specific code to the myDiv element to be executed if the user clicks on the myDiv element directly...

I think you want to hide the myDiv if you click outside of it, try this.
$(document).click(function() {
$("#myDiv").hide();
});
$("#myDiv").click(function(e){
e.stopPropagation();
});

This is a "flag & ignore" routine that I was talking about. I'm hoping there's a jQuery-native method to do this, because using flags like this is a dirty hack IMO
var myDiv = false;
$(document).click(function() {
if (!myDiv) {
// your code here
}
myDiv = false;
});
$("#myDiv").click(function(e){
myDiv = true;
return false; // don't know if returning false will stop propagation in jQuery
});

Jquery - hide on click anywhere on document

I have a div that hides whenever you click outside of it but I'm having some trouble getting certain links inside the div to work (and not hide the div).
$(document).click(function() {
fav.hide();
});
theDiv.click(function(e) {
e.stopPropagation();
});
That is what I have for the whole clicking outside and closing event. Heres the thing: I have two types of links in my div, one regular link and another which is a javascript one. The regular one redirects OK but the javascript one doesn't do anything.
Could somebody help me out? Thanks.
EDIT:
Here are the bits of my code that might help out
var fav = $('#favorites');
// Open & close button
$('#favorites_a').click(function(e) {
e.stopPropagation();
e.preventDefault();
fav.toggle();
});
$('a.c',fav).live('click', function(e) {
alert('hey');
});
$(document).click(function() {
fav.hide();
});
fav.click(function(e) {
e.stopPropagation();
});
HTML (built after page load):
<div id="favorites">
<div class="wrap">
<ul><li>AB</li></ul>
</div>
</div>

This could be a problem with the live() click event handler. When you use live the event handler is actually attached to the document. So the event needs to bubble up to the document, but your click event handler on fav prevents bubbling up.
It works with delegate though:
fav.delegate('a.c', 'click', function(e) {
alert('hey');
});
Here, the event handler is added to fav.
DEMO

I think your code for fav is preventing the 'B' link from working. Instead of .live(), try:
$('a.c').click(function() { ... });
instead.