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>
Related
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.
I have this script referenced inside my main.master file:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js" type="text/javascript"></script>
and inside of my Web User Control I have this jquery but it isnt working, i cant really see where there would be a problem. My code works just fine inside of jsfiddle:
<script type="text/javascript">
$(".package-container").click(function () {
$(this).closest('.radio-group-row').find('.package-title').removeClass('highlight');
$(this).find('input:radio').prop('checked', true);
$(this).find('.package-title').addClass('highlight');
});
</script>
EDIT
My jquery is referenced near the bottom of my master page above the closing body tag.
Make sure your jQuery include is placed early on the page (HEAD element) and either place your code at the end of the body element or wrap it in a DOM ready handler like this:
<script type="text/javascript">
$(function(){
$(".package-container").click(function () {
$(this).closest('.radio-group-row').find('.package-title').removeClass('highlight');
$(this).find('input:radio').prop('checked', true);
$(this).find('.package-title').addClass('highlight');
});
});
</script>
$(function(){YOUR CODE HERE}); is a shortcut for $(document).ready(function(){YOUR CODE HERE});
The advantage of using DOM ready handlers, is that you can place the jQuery code anywhere (including injection by child views/controls).
Update:
If you also need to locally scope your $ variable, I suggest using this rather nice shortcut DOM ready handler. It passes the jQuery instance as a first parameter to the DOM ready function you provide:
jQuery(function($){
// Your code placed here can use $ without any worry about other packages!
});
I'm developing a template. While doing so, i encountered a error. I have placed a button that toggles the sidebar from invisible to visible state.I have used the right codes to initiate the jquery response.But the sidebar doesn't toggle.Help me solve this issue
html
<a id="click-slide">
<span>
\
</span>
</a>
Javascript
<script type="text/javascript">
//<![CDATA[
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
//]]>
</script>
My site
i have used it with and without Cdata.Where did i go wrong
You should put your javascript code into document.ready. The reason behind document.ready is you put your javascript code before the a#click-side element. That means when your javascript executed, in the page there is no element called a#click-side. When we put into document.ready it downloads your javascript and all document gently and then starts executing your javascript code.
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
//]]>
</script>
You've not wrapped your code in a document.ready event handler. Change it to this...
jQuery(function($) {
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
It was trying to assign the click event handlers before the page was loaded, so none of the elements actually exist at that time. Wrapping in the ready handler, as above, means it will only run the script when the page has finished loading.
Added your code when document gets ready.
<script type="text/javascript">
$(document).ready(function(){
$("#posts-container,a#click-slide").click(function() {
$("#topbar #category").removeClass("category-list-move")
});
$("a#click-slide").click(function() {
$("#sidebar").toggleClass("sidebar-move");
$("#topbar").toggleClass("topbar-move");
$("#posts-container").toggleClass("posts-container-move")
});
});
</script>
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();
});
});
How can I run this script, tried to run it in html file, but it doesn't seem to work..
I want this code to be in single html file, is it possible? or do I need different files?
http://jsfiddle.net/ambiguous/jcnMa/1/
<script type="text/javascript">
$('.question, .answer')
.css("display", "none");
$('.section')
.click(function ()
{
var $others = $('.question:visible')
.not(this);
$others.next('.answer')
.hide();
$others.slideToggle(500);
$(this)
.next('.question')
.slideToggle(500);
});
$('.question')
.click(function ()
{
$(this)
.next('.answer')
.slideToggle(500);
});
</script>
First make sure you're including the jQuery library:
<script src="path/to/jquery.min.js"></script>
Make sure you're not including the jQuery within those tags, so you've got:
<script src="path/to/jquery.min.js"></script>
<script>
/* Your jQuery here */
</script>
And then ensure you're using a $(document).ready(), or $(window).load(), handler:
<script src="path/to/jquery.min.js"></script>
<script>
$(document).ready(
function(){
/* Your jQuery here */
});
</script>
The requirement for the $(document).ready() (or $(window).load()) is to ensure that the DOM is constructed, and the elements to which you want to bind events are present. Without those handlers the browser will try to bind events as soon as it encounters your script, without waiting for the elements to exist or be created, which results in non-functioning event-binding.
put this code before the body close tag
Your Code
</body>
I would go this way:
<head>
...
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.question, .answer').css("display", "none");
$('.section').click(function ()
{
var $others = $('.question:visible').not(this);
$others.next('.answer').hide();
$others.slideToggle(500);
$(this).next('.question').slideToggle(500);
});
$('.question').click(function ()
{
$(this).next('.answer').slideToggle(500);
});
});
</script>
...
</head>
First you need to ensure jquery lib is loaded, then you might notice that your code is referring to object in DOM, so you can access them only when the page is loaded (or after they are entered in the body code). I prefer to store my js code in the head section whenever it's possible.