I'm trying to do a simple partial fade effect using toggle to toggle the opacity between two values, when an element is clicked. But the first click does nothing!
The html code:
<html>
<head>
<script type="text/javascript" src="../jquery-1.4.min.js"></script>
<script type="text/javascript" src="toggle.js"></script>
</head>
<body>
<div class="toggler" style="background:grey;width:300px;height:300px;"></div>
</body>
</html>
And the js code:
$(document).ready(function() {
$('div.toggler').click(function(event) {
$(this).unbind('click');
$('div.toggler').toggle(function(event) {
$('div.toggler').css({
'opacity': 0.5
});
alert('0.5');
return false;
}, function() {
$('div.toggler').css({
'opacity': 0.1
});
alert('0.1');
return false;
});
event.preventDefault();
});
});
To elaborate, it does "work", but only after the first click! So I need to click twice to begin with to get it working! I've tried this out in firefox and opera.
Edit: Went with the solution by Marcus Sá and steweb:
$('div.toggler').toggle(
function(event){
$(this).css({ 'opacity':0.5 });
alert('0.5');
return false;
},
function(){
$(this).css({ 'opacity':0.1 });
alert('0.1');
return false;
}
);
Try this, more simple:
$('div.toggler').toggle(
function(event){
$('div.toggler').css({ 'opacity':0.5 });
alert('0.5');
return false;
},
function(){
$('div.toggler').css({ 'opacity':0.1 });
alert('0.1');
return false;
}
);
See working here
Because you bind to click event once, then unbind, and bind to it again via toggle. What for ? Just use toggle. Here is working example.
Even easier without having to use toggle:
$('div.toggler').css('opacity', .5).click( function() {
$(this).css('opacity', $(this).css('opacity') == .5 ? .1 : .5);
});
Actually there is not enough info here, the problem COULD be that your CSS initially sets the opacity to 0.5 to start with, so when you click toggle first, it's already at 0.5 and so it switches from 0.5 to 0.5 and nothing happens.
What I would recommend doing instead is creating 2 css tags, then check which tag is already there and replace it with the other one.
i.e. you can create:
.fiftyPercent{ opacity:0.5; }
.tenPercent{ opacity:0.1; }
Then in your html start with
<div class="toggler fiftyPercent" style="background:grey;width:300px;height:300px;"></div>
Then all you have to do in your JS is toggleClass for both the classes on click.
$('.toggler').click(function(){
$('.toggler').toggleClass('fiftyPercent');
$('.toggler').toggleClass('tenPercent');
});
That's just my 2 cents.
Related
Consider the following code:
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:
$("button").on( 'click', function() {
$("#thediv").show();
alert('click');
});
$(document).ready(function(){
$("#thediv").hide();
})
I want the behavior to first show the div tag and then display the alert "Click". Instead the behavior works in the opposite way. Alert text is first displayed followed by the button being visible. Am i missing something ?
Can i modify the code somehow to get the desired behavior where the div is first displayed and then alert text is flashed.
Check that in jQuery.show(options) allows you to pass a PlainObject options.
And than you can use complete: A function that is called once the animation on an element is complete.
Code:
$("button").on( 'click', function() {
$("#thediv").show({
complete: function() {
alert('click');
}
});
});
$(document).ready(function(){
$("#thediv").hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:
It's because the alert() blocks the UI thread from updating, and that thread has not yet had time to show the element in the DOM before you call the alert().
Ideally you should use console.log() for debugging, however you can avoid this issue by putting the alert() in a setTimeout() with a very short delay.
$("button").on( 'click', function() {
$("#thediv").show();
setTimeout(function() {
alert('click');
}, 10);
});
#thediv { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:
$("button").on('click', function() {
$("#thediv").show("slow", callback);
});
$(document).ready(function() {
$("#thediv").hide();
})
function callback() {
alert('click');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv">hola</div>
<button id="resharper">button</button>
Add parameter to .show()
I have replicated my issue in jsfiddle: http://jsfiddle.net/66UCX/
All I want to do is toggle between red and white when the user clicks on the td in a table. I have tried using an if statement to test for the background colour like so :
if($("#fbodytd_"+uid+"_"+row+"_"+col).css("background-color") == "rgb(255, 0, 0)"){
and that didn't work so I have tried adding and removing a class called 'active' and testing for that. Thanks.
You didn't make any binding on your function function changecream(uid, row, col).
Here is a working Fiddle:
$("table").on("click", "td", function(){
if($(this).hasClass("red")){
$(this).removeClass("red").addClass("white");
} else {
$(this).removeClass("white").addClass("red");
}
});
Edit:
Of yourse if you are only toggling between background color and a chosen color, you could simplify the "on click":
$(this).toggleClass("red");
You have to include jquery library
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
and your code look like this in $(document).ready function
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#button').bind('click', function(){
$(this).after('<span> click is active</span>');
$('span').fadeOut(1000);
});
$('#toggle').toggle(
function(){
$(this).text('rebind').removeClass('unbind').addClass('rebind');
},
function(){
$(this).text('unbind').addClass('unbind').removeClass('rebind');
}
);
if($("#toggle").hasClass("unbind")) {
$('#button').bind('click');
}
else {
$('#button').unbind('click');
}
});
</script>
If all you want is to simply change the background back and fourth (and maybe something else also). Add class like
.active
{
background-color: Red
}
and use a code like so:
$("table").on("click", "td", function() {
$(this).toggleClass("active");
});
Hope this helps.
If you are using jQuery anyway, the following simplified version should do:
$('table.bodymap td').click(function () {
$(this).toggleClass('active')
});
See this fiddle for a working example.
I have this code:
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function () {
$("#modal-content,#modal-background").toggle("slow");
return false;
});
});
and this html:
<button id='modal-launcher'>
Launch Modal Window
</button>
<div id='modal-background'></div>
<div id='modal-content'>
<button id='modal-close'>Close Modal Window</button>
</div>
Here's a JSFiddle.
Right now, the modal appears in the center when you click the button. Instead, I'd like to have a animation where the modal appears to come from the button "Launch Modal Window" button, and then goes to the center. Is this possible? I'm looking for an example on the web, but I can't find one now, but I'll keep looking.
Is this possible? Thanks for all help!
I guess it depends how much or how little work you want to invest on it, jQuery UI has a default effect for this very scenario, the option is called 'transfer', check it out at
http://jqueryui.com/effect/
If jQuery UI is not an option, you can use the buttons http://api.jquery.com/offset/ as the initial/final position for the dialog and animate the opacity, left and top properties of the dialog.
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function () {
$("#modal-content,#modal-background").show().animate({height: "10px", width: "10px"}, 500);
return false;
});
});
Try something like this :
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function () {
$("#modal-content,#modal-background").toggle(function(){
$("#modal-content,#modal-background").animate({}, 1500 );
});
return false;
});
});
Use animate function to give effects. Check the working demo.
For more info about animate click here:http://api.jquery.com/animate/
Check the demo:http://jsfiddle.net/JRfA5/3/
Try this code :
The Fiddle is http://jsfiddle.net/JRfA5/4/
http://jsfiddle.net/JRfA5/5/
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function () {
$("#modal-content,#modal-background").toggle(function() {
$(this).animate({height: '800'});
});
return false;
});
});
I'm using the following code to scroll the window when a user clicks on a few different links:
$(document).ready(function(){
$("#footerlink").click(function(){
$("#slide1").slideto({});
});
$("#logo").click(function(){
$("#slide1").slideto({});
});
$("#home").click(function(){
$("#slide1").slideto({});
})
$("#others").click(function(){
$("#slide2").slideto({});
})
$("#me").click(function(){
$("#slide3").slideto({});
});
$("#laughs").click(function(){
$("#slide4").slideto({});
});
})
The slide functionality is coming from this script:
(function(b) {
b.fn.slideto = function(a) {
a = b.extend({
slide_duration: 1000,
highlight_duration: 3E3,
highlight: false,
highlight_color: "#FFFF99"
}, a);
return this.each(function() {
obj = b(this);
b("body").animate({
scrollTop: obj.offset().top
}, a.slide_duration, function() {
a.highlight && b.ui.version && obj.effect("highlight", {
color: a.highlight_color
}, a.highlight_duration)
})
})
}
})(jQuery);
My problem is the scrolling only works in Chrome and not Firefox or IE. FF and IE degrade nicely so the links still work, but I really like the scrolling animation.
FYI: I am calling Jquery with these two lines:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
Here is a Fiddle of my code: http://jsfiddle.net/LwXR3/
Can you help me track down my issue?
Okay this is too long to be in a comment. You should really avoid the copy paste mess in that code above. The code is almost exactly the same minus the ids. Use the href to get the location instead of hard coding it.
HTML
<a class="slideLinks" href="#foo">go to foo</a>
JavaScript
$(".slideLinks").on("click", function(e){
e.preventDefault(); //p[revent the click
$(this.hash).slideto({}); //call your slide to function with the hash value for the id
});
Im trying to toggle some divs and its not working, here is the js:
<script type="text/javascript">
$(function(){
$('#toggle_full').click(function(){
$('#full_size').removeClass('toggle');
$('#thumb_list').addClass('toggle');
});
});
$(function(){
$('#toggle_thumb').click(function(){
$('#thumb_list').removeClass('toggle');
$('#full_size').addClass('toggle');
});
});
</script>
Here are the anchors:
<div class="toggle_block">
<img src="img/full_icon.jpg" alt="#"/>
<img src="img/thumbs_icon.jpg" alt="#"/>
</div>
Here is the class:
.toggle {
display: none;
}
Now where is the problem?
Your ID's don't match.
In your HTML you have toggle_thumbs, but in your code you have toggle_thumb.
If all you're doing is hiding and showing, you can greatly simplify your code like this:
http://jsfiddle.net/xTPU8/2/
$(function() {
var $elems = $('#toggle_full').hide()
.add('#toggle_thumb').click(function() {
$elems.toggle();
});
});
EDIT: Made it even a little more efficient.
Add a return false; in your .click() delegate to prevent the browser from navigating to '#' (jumps to top of page).
You can also simplify your JS but putting both of your link bindings in the same, and using hide() and show() as already suggested. The end result would be:
<script type="text/javascript">
$(function() {
$('#toggle_full').click(function() {
$('#full_size').show();
$('#thumb_list').hide();
return false;
});
$('#toggle_thumb').click(function() {
$('#thumb_list').show();
$('#full_size').hide();
return false;
});
});
</script>