This question may be asked before. But I cant find the error. Here this is from the video tutorial of new boston.
$(document).ready(function(){
$('#btn').toggle(function(){
$('#msg').html('yes');
},function(){
$('#msg').html('No');
});
});
The video showing that when click first the div text is yes and next time it show no
But when I try, when the page loads, the button fadeout and div show no. Why? There may be other methods to achieve this functionality. But why this dont work. He showing the syntax of toggle as
$('#btn').toggle(function(){code},function{code});
http://api.jquery.com/category/deprecated/
Note: This method signature was deprecated in jQuery 1.8 and removed
in jQuery 1.9. jQuery also provides an animation method named
.toggle() that toggles the visibility of elements. Whether the
animation or the event method is fired depends on the set of arguments
passed.
http://api.jquery.com/toggle-event/
Updated after OP's comment
DEMO
if you want to make this code work in any version of jQuery
$(document).ready(function () {
var arr = ['yes', 'no'],
i = 0;
$('#btn').click(function () {
$('#msg').html(arr[i++ % 2]);
});
});
DEMO
if you want to make use of toggle-event like functionality in future
use .one()
$(document).ready(function () {
function handle1() {
$('#msg').html('yes');
$('#btn').one('click', handle2);
}
function handle2() {
$('#msg').html('no');
$('#btn').one('click', handle1);
}
$('#btn').one('click', handle1);
});
or
Toggle was removed in version 1.9, so you cannot use it - if you want this logic can be manually implemented or you can make use of the migration plugin
to include the migration plugin, after the inclusion of jQuery library add
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
Related
I got a div element, so when I click on it, another div which is hidden by default is sliding and showing, here is the code for the animation itself:
$('#myelement').click(function(){
$('#another-element').show("slide", { direction: "right" }, 1000);
});
How can I make that so when I click on the #myelement one more time (when the element is showed already) it will hide the #another-element like this:
$('#another-element').hide("slide", { direction: "right" }, 1000);?
So basicly, it should work exactly like a slideToggle but with the show/hide functions. Is that possible?
The toggle-event is deprecated in version 1.8, and removed in version 1.9
Try this...
$('#myelement').toggle(
function () {
$('#another-element').show("slide", {
direction: "right"
}, 1000);
},
function () {
$('#another-element').hide("slide", {
direction: "right"
}, 1000);
});
Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named
.toggle() that toggles the visibility of elements. Whether the
animation or the event method is fired depends on the set of arguments
passed, jQuery docs.
The .toggle() method is provided for convenience. It is relatively
straightforward to implement the same behavior by hand, and this can
be necessary if the assumptions built into .toggle() prove limiting.
For example, .toggle() is not guaranteed to work correctly if applied
twice to the same element. Since .toggle() internally uses a click
handler to do its work, we must unbind click to remove a behavior
attached with .toggle(), so other click handlers can be caught in the
crossfire. The implementation also calls .preventDefault() on the
event, so links will not be followed and buttons will not be clicked
if .toggle() has been called on the element, jQuery docs
You toggle between visibility using show and hide with click. You can put condition on visibility if element is visible then hide else show it. Note you will need jQuery UI to use addition effects with show / hide like direction.
Live Demo
$( "#myelement" ).click(function() {
if($('#another-element:visible').length)
$('#another-element').hide("slide", { direction: "right" }, 1000);
else
$('#another-element').show("slide", { direction: "right" }, 1000);
});
Or, simply use toggle instead of click. By using toggle you wont need a condition (if-else) statement. as suggested by T.J.Crowder.
Live Demo
$( "#myelement" ).click(function() {
$('#another-element').toggle("slide", { direction: "right" }, 1000);
});
Make use of jquery toggle function which do the task for you
.toggle() - Display or hide the matched elements.
$('#myelement').click(function(){
$('#another-element').toggle('slow');
});
this will work for u
$("#button-name").click(function(){
$('#toggle-id').slideToggle('slow');
});
You can use this code for toggle your element
var ele = jQuery("yourelementid");
ele.slideToggle('slow');
this will work for you :)
You can use .toggle() function instead of .click()....
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js</script> <script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>Welcome !!!</p>
<button>Toggle between hide() and show()</button>
</body>
</html>
$(document).ready( function(){
$("button").click(function(){
$("p").toggle(1000,'linear');
});
});
Live Demo
How can I make a custom animation?
$('button').toggle(function() {
anim.go("fadeOut slow", $("mydiv"));
}, function() {
anim.go("fadeIn slow", $("mydiv"));
});
Toggle is working, but first appears toggle animation, then mine. How can I disable default toggle anim? Like toggle(0) P.S I've tried to add 0 to my code, but then second function isn't working. Any ideas?
Your issue is because in the modern versions of jQuery toggle() no longer works in the manner you've used, ie. two separate functions called alternately.
Instead you'll need to use click(), check the visibility state of the element and then run the required animation based on that, eg:
$('button').click(function() {
var $div = $('#mydiv');
var action = $div.is(':visible') ? 'fadeOut' : 'fadeIn';
anim.go(action + " slow", $div);
});
I am trying to make a image preview containing of about 5-6 images which will appear one after another when user hovers over it (not like a carousel with prev and next buttons). Here is the fiddle consisting of what I gathered so far.. i don't know if this approach is right or not.. but I am stuck as the alert callback is not working. Could someone please tell me what is wrong?
$(function()
{
var imageCount = $('#product_grid_list').find('figure')[0].getElementsByTagName('img');
for (var i = 0, n = imageCount.length; i < n; i++) {
imageCount[i].on('click', function(e)
{
alert('Everything is going fine!');
}
);
}
}
);
The root cause of click event callback can't be triggered is that you're trying to register a event handler on a "DOM" (in this case: imageCount[i]) element in jQuery way. Try to register the event handler like this if you want to use pure javascript solution:
imageCount[i].addEventListener('click', function(e){
alert('Everything is going fine!');
});
Here is a jsfiddle demo.
Note: I didn't consider the cross browser issue in this case.
BTW, try to cache the length of imageCount node list, it will improve the performance.
You are using js AND jQuery at same time. It's wrong. If you use jQuery, than click event will be like this:
$(document).('click', '#product_grid_list figure img', function(){
alert('Everything is going fine!');
});
You are using a mix of jQuery and standalone javascript. You might as well go all the way to jQuery, with something like:
$('#product_grid_list figure:first img').click(function(e) {
alert('Everything is going fine, hopefully!');
});
You did not send the corresponding HTML, so we cannot test whether the above is correct.
it's just a simple click event in jQuery, no need to use js: http://jsfiddle.net/wP3QQ/11/
$('#product_grid_list').find('figure img').click(function(e){
alert('Everything is going fine!');
e.preventDefault();
});
You want the hover effect, so click event should not be used over here. It should be mouseover.
Working Fiddle
Code Snippet:
$(document).on('mouseover','#product_grid_list figure img',function(e){
alert("now it is working");
});
You are attempting to call on(), a jQuery method, on an HTMLElement (a DOM element). You can't do that, jQuery methods can only be called on jQuery collections. It's easy to get a jQuery collection for the elements you desire:
Use .find() to match the images
There's no need for a for() loop, jQuery's .on() will handle looping for you.
You may also want to prevent the default behaviour of your anchors
$(function () {
var imageCount = $('#product_grid_list').find('figure img');
imageCount.on('click', function (e) {
e.preventDefault()
alert('Everything is going fine!');
})
});
JSFiddle
In my previous question I asked about how can I toggle a textarea with a paragraph. I got the answer. Now I want to do the opposite of it. First I was showing the already hidden textarea + 2 buttons by a click of a hyperlink. Now on the click of one of the buttons I want to hide the text + 2 buttons and show the paragraph that was first already shown.
I have tried this JS so far but it's not working:
$(document).ready(function () {
$(".no_link").click(function (e) {
e.preventDefault();
});
$(".edit_offer").on('click', function () {
toggleEditPanel($(this));
});
$("#cancel_edits").on('click', function () {
$(this).closest("button").hide();
$(this).closest("textarea").hide();
$(this).closest("p.content").show();
});
});
function toggleEditPanel(link) {
link.parent().parent().parent().find("textarea").toggle();
link.parent().parent().parent().find("button").toggle();
link.parent().parent().parent().find("p.content").toggle();
}
But its not working. How can I solve this error?
If I am trying to call the function toggleEditPanel() again. Its not working then aswell.
You can find the markup in the fiddle. Here's the fiddle.
UPDATE 1:
Just came up with a solution. I can use the $.siblings() function to toggle the elements beside the button. Still, is there any better solution?
Here's the code that I came up with:
$("#cancel_edits").on('click', function () {
$(this).hide();
$(this).siblings("button").hide();
$(this).siblings("textarea").hide();
$(this).siblings("p.content").show();
});
UPDATE 2:
The problem in the above code is that if there are more than one panels like this then the code is not working. How can I solve that issue aswell?
You are using Id for selector $("#cancel_edits") .
Id selectors returns only first element , so if there are multiple pannel it will work only for first.
Instead give some class name and use it for selector. Further you can use chaining and caching in your code for better performance.
$(".cancel_edits").on('click', function () {
var elm=$(this);
elm.add(elm.siblings("button,textarea")).hide();
elm.siblings("p.content").show();
});
I would recommend referencing your elements by ID:
$("#cancel_edits").on('click', function () {
$('#save_edits').hide();
$('#edited_content').hide();
$(this).hide();
$("p.content").show();
});
JSFiddle
The great thing about using IDs is that you are guaranteed they are unique - no need to use closest() to find the element you want. If, however, you're using classes instead, closest() might be necessary or helpful.
I am using livequery for applying jquery chosen plugin (for adding tags) on dynamically added elements. I tried :
$(".chz").livequery(function () {
$(this).chosen();
});
Through above code, choose plugin is not applying. But if i tried this :
$(".chz").livequery('click', function () {
$(this).chosen();
});
Than it works properly. But in my case i can`t use click event because until user click over the element the plugin is not applied. What i am doing working in first case ?
try something like this
$("body").on('click', '.chz'function () {
$(this).chosen();
});
when we use chosen plugin then we set class like this
class ="chzn-select"
then
$(function() {
$("chzn-select").chosen();
});
i think this will help you