We Keep Coding

.click method not working in jQuery

I placed smiley button for popping up new window and show smiles
<textarea class="chattextarea" placeholder="Type message" name="message" id="message" ></textarea>
<div class="smileybutton" id="smileybutton"></div>
and i wrote script like this
jQuery('#smileybutton').click(function() {
alert("Clickeddddd");
});
But the alert is not working.. if i placed another alert outside of bracket, it work on page loading.

PUT the function code like this
$(document).ready(function(){
jQuery('.smileybutton').click(function() {
alert("Clickeddddd");
});
});

Do not forget to include the jQuery library:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Then add your code inside a document.ready block:
$(document).ready(function()
{
$('#smileybutton').click(function()
{
alert("Clickeddddd");
});
});
Fiddle here:
http://jsfiddle.net/6tnmtf75/
Important: Somehow give dimensions to your #smileybutton so you have something to click on. I added some text on my example on jsfiddle. -i assume you have some css applied to it (width/height and a background image of a smiley maybe?)

It will be working if you change the Javascript by:
$(function(){
$('#smileybutton').click(function() {
alert("Clickeddddd");
});
});

Try putting the jQuery code inside document.ready, like this:
$(document).ready(
function() {
jQuery('#smileybutton').click(function() {
alert("Clickeddddd");
});
}
);
Or
jQuery(document).ready(
function() {
jQuery('#smileybutton').click(function() {
alert("Clickeddddd");
});
}
);
in case you don't want to use the dollar sign.
Also, be sure to include jQuery as suggested by Axel and Sharky.
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
Edit (special thanks to Axel and Sharky for pointing this out)
After short research, it turns out to be even better to put your script inclusions inside the body section of your Web page.
Here is JFiddle: http://jsfiddle.net/LSostaric/qjcu8862/.

Try this code, another way to track click event.
jQuery('.smileybutton').live('click',function(){
alert("Clickeddddd");
});

You need to be added document.ready as other said. If you add as external javascript file, you need to wrap in
$(function(){});
And For now, If you don't set width and height of div, it will be zero and no matter wherever you click, it won't attached with DOM. so you might need to set up div width and height as follows;
#smileybutton{
width:100px;
height:100px;
}
you can look in jsfiddle version.

Mobile Hidden Menu works on jsfiddle but not online. Any solution would be helpful.

So, I was using the root JS Fiddle of the below URL (part before 761) and I got a nice design that works exactly how I wanted it. Here's the link:
Click here to see whole JSFiddle and here is the Javascript code:
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
top: 49
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
top: -150
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
But when I implement it here: http://m.bwpcommunications.com/agency.php it doesn't work.
Anyone know why that might be?

It looks like you may be setting the click handler before the DOM has loaded.
You can see that, by changing your fiddle to load jQuery "in head" (like your live site), your code stops working.
http://jsfiddle.net/tzDjA/764/
You may need to add the following around your click handler.
This will configure your handler after the DOM has loaded.
$(function() {
$('#trigger').click( function() {
[...]
}
});
http://jsfiddle.net/tzDjA/762/
Alternatively, try delegating the handler so that it will be applied to elements that are added to the DOM later.
$(document).on('click','#trigger',function() {
[...]
});
http://jsfiddle.net/tzDjA/763/

You need to load jQuery on this page: http://m.bwpcommunications.com/agency.php
jQuery UI is not the equivalent of jQuery.
https://developers.google.com/speed/libraries/devguide#jquery

ability to auto play on scroll position in jQuery plugin

I am on my way to develop my first jQuery plugin.In which I need an animation to auto play on scroll position.I have tried many ideas but nothing worked out.Finally I put the auto play function inside plugin and called in my HTML like this.
$(document).ready(function () {
$(window).scroll(function () {
jQuery.fn.autoplayAnimation();
});
is there any way that I can put document.ready() or window.scroll() inside my plugin and make it working as it is in HTML.
any help will be great full..

you want to auto assign the event when the page loads right?
why don't you just put this in your plugin file:
(function($){
//your plugin code
$(document).ready(function () {
$(window).scroll(function () {
jQuery.fn.autoplayAnimation();
});
});
})(jQuery);

$(window).scroll(scrollHandler);
function scrollHandler(){
jQuery.fn.autoplayAnimation();
}

Overlay pop up box using jquery1.6.1..?

I had a script for overlay popup box using jquery1.4.1 using modal, which returns some function in my page getting not working which are used by jquery1.6.1..
So, when I add jQuery 1.4.1 script for displaying pop up box.. the functions working through jQuery 1.6.1 got interrupted..
How can I get popup box using jQuery 1.6.1?
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://simplemodal.googlecode.com/files/jquery.simplemodal.1.4.min.js"></script>
<script type="text/javascript">
function modalTest() {
showModal();
setTimeout(function() {
hideModal();
},2000000);
}
function showModal() {
$("#downloadbox").modal();
}
function hideModal() {
$.modal.close();
}
</script>

Your problems may be
1) Certain functions in jquery 1.4.1 have been deprecated in 1.6.1
One solutions is , please upgrade the plugin to newer version , it may solve your problem
Otherwise you need to edit the plugin to accommodate the new functions ,its risky

jQuery latest is 1.7.1. Are you sure your page is loading 1.6.1? That's beside the point, though: what may be happening here is that your scripts are firing before the document is ready. No idea why it worked for 1.4.1 since that's so long ago (as duke mentions, deprecated functions?), but you should wrap this in a document ready function to see if it works:
$(document).ready( function() {
// your existing code
});

The code looks fine for versions 1.4+, so I don't think you've got a deprecation issue.
As Greg said, you haven't invoked the document ready method. You also haven't invoked the modalTest() function, so the simplemodal $('').modal method won't fire.
$(document).ready(function(){
function modalTest() {
showModal();
setTimeout(function() {
hideModal();
},2000000);
}
function showModal() {
$("#downloadbox").modal({ /* Pass simplemodal config here*/ });
}
function hideModal() {
$.modal.close();
}
modalTest();
});

jQuery code works in Firebug, but not on its own

I'm having quite the brainbuster of an issue right now. I am trying to change a link's hash tag at the end from "respond" to "comments" with jQuery. I have a simple script that should do this, however it does not work. The link does not change. However, Firebug shows no errors and when I run the code in Firebug's console, it works just as I intend. Why doesn't this work on its own? Does anybody have a solution, I'm at my wits edge with this one.
(function ($) {
$(document).ready(function() {
$("a[href$='respond']").each(function() {
$(this).attr("href", $(this).attr('href').replace("respond", "comments"));
});
});
})(jQuery.noConflict());
Thanks so much, I know this might be a pain to test but I'm really thankful.

Your code should be working fine, but your script tag is malformed. You have text/javscript instead of text/javascript. Also, you can optimize your code a little:
<script type="text/javascript">
jQuery(document).ready(function($){
$("a[href$='respond']").attr("href", function(index, attr){
return attr.replace("respond", "comments");
});
}).noConflict();
</script>

You're using $(document).load() instead of $(document).ready().
(function ($) {
//---------------v
$(document).load(function() {
$("a[href$='respond']").each(function() {
$(this).attr("href", $(this).attr('href').replace("respond", "comments"));
});
});
})(jQuery.noConflict());

Why not just:
jQuery(function($) {
$("a[href$='respond']").each(function() {
$(this).attr("href", $(this).attr('href').replace("respond", "comments"));
});
});
If you pass a function to the jQuery constructor it adds it to the DOM Ready listeners and automatically passes itself as an argument.