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.
Related
I'm new to Javascript and I have what is probably a pretty basic question. I have some tools tips and want to open them with a click. I create a Javascript call on the click. I can pas the element ID I want to open, but I don't know how to get it to work in the Open call.
<script type="text/javascript">
function opentip(tipID) {
//alert(tipID);
$(#tipID).tooltipster('open');
}
</script>
It's not necessary the function opentip(tipID) to bind the mouse click. I will give you an genereic exemple. You have to import Tooltipster's CSS and JS, and jQuery, so the code will be:
<span class="tooltip" title="Tooltip content!">Target tag</span>
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
trigger: 'click'
});
});
</script>
When clicl on "Target tag" will appear an tooltip with "Tooltip content!" inside.
The $(document).ready(function() {}); is important to be sure that when the script runs, the browser have already the DOM ready, so the script can find the HTML elements.
You are using JQuery syntax. Insert JQuery plugin and add single quotes in your syntax $('#'+tipID).tooltipster('open'); and add inside document.ready
<script>
$(document).ready(function(){
function opentip(tipID) {
//alert(tipID);
$('#'+tipID).tooltipster('open');
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
On one of my previous pages I use
<script src="/js/wireEvent.js"></script>
<body onload="wireEvent();" >
Basically, wireEvent() displays an image on top of the page whenever the mouse goes out of the browser.
However, now I cannot add this function directly to the body of my page, so what is the proper way to add it? Will it be right if I add
<script>
window.onload = wireEvent;
</script>
or I enclose the whole function in
$( document ).ready
and only include the function's file to my html?
The code below executes only after all your images load completely. So you can try this:
$(document).on('load', function(){
wireEvent();
});
You can just do:
$(function(){
//jQuery code here
});
this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});
I have a div with text in it and a background image. When I load the page the text always appear 1st(assume i have low speed internet connection). How can i make the background image load before text? Can You please give me solution in both jquery and javascript
Add the text in the onload event handler for the image.
Note: If you want to keep using a div tag with a background image rather than an img tag, you'll have to add the text during the window.onload event (see this answer for the details).
Assuming your div looks like this:
<div id="Derp" style="CSS-for-background-image-here">Magical ponies!</div>
I would try removing the text completely and then add this kind of jquery call:
<script>
$(document).ready(function() {
$('#Derp').load(function() {
$('#Derp').text("Magical ponies!");
});
});
</script>
The $('#Derp').load(...) is the key here. See the docs for load(). It has an example of exactly what you need.
you could populate the content onload.
Start with this:
<div id="content"></div>
Then, in jquery, do this:
$(document).ready(function() {
mybg= new Image();
mybg.onload=function(){
$('#content').html('YOURTEXTHERE');
}
mybg.src = "PATH/TO/IMG";
});
your simple answer is .load you can do when your window gets loaded fully and then text appears:
$(function(){
$(window).load(function() {
$('p').fadeIn(800);
});
});
what this is doing is fading in the p tag with text when whole window gets loaded.
you can find a demo here: http://jsfiddle.net/a5P8b/
I'm trying out jQuery for the first time, and I'm not sure how to make it work properly. I've included the following code near my opening <head> tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
Followed by the following jQuery code:
<script>
$('.darkmask > img').hover(function(){
$(this).parent().toggleClass('darkmask-hover');
})
</script>
Unfortunately, this code doesn't work when I try it in a browser, or in JSFiddle. However, when I set JSFiddle's framework to load jQuery itself, rather than loading jQuery through my own code, the animation works properly.
Am I loading jQuery wrong? If so, what's the right way?
PRoblem is, your code in JSFiddle is executed on the loading on the page. In your code instead, the execution happens when the HTML elements are not yet loaded because it's in the HEAD, so the selectors like .darkmask actually refer to... nothing.
The solution is to use:
$(document).ready(
function()
{
... your code here
}
To ensure that it is executed when the page is loaded and ready, all the HTML elements are there and therefore JQuery selectors can operate on something.
Are there any HTML elements when the code is executed?
Try:
$(function () { // this function executes when the page loads
alert(x);
// put your code here
});
Wrap your entire code in the following:
$(document).ready(function() {
//ALL CODE GOES HERE
});
Wrap your code in:
$(function() {
.... Your code here ...
});
It will mean your code is executed after the DOM tree is loaded.
You do need to wrap your jQuery code within the ready function, like this:
$(document).ready(function(){
// put your code here.
});
Also make sure your script tags have type="text/javascript" as an attribute otherwise it won't get run as javascript.