I have a list of elements that I want to change color after the user has click a button (then clicked a different one). I know to change the button colour on click I would use onclick, but how would I change the colour of the button AFTER I've clicked?
For example, the user clicks Titanic. Nothing happens. Then the user clicks Titanic7, Titanic changes colours and remains that colour. Then the user clicks Titanic9. Titanic and Titanic7 both have the "visited" colour.
See JSFiddle here
If I understand you correctly, I would do something like this:
http://jsfiddle.net/KHwcU/
$('.song').click(function(e) {
e.preventDefault();
$('.selectnext').css('background-color', 'blue').removeClass('selectnext');
$(this).addClass('selectnext');
});
Seeing that you're already using data-, I would do something like the following:
$(function() {
var currentButton;
$('a.song').on('click',function() {
if(currentButton === this) return;
currentButton = this;
$('a.song').each(function() {
if($(this).data('visited') == 'true' && !$(this).hasClass('visited'))
$(this).addClass('visited');
});
$(this).data('visited','true');
});
});
have a data-visited which keeps track of which button has been clicked
everytime a button is clicked, check if it's the same one that was clicked previously. if not, change the background for the previously clicked button, and set the current button as visited.
example fiddle: http://jsfiddle.net/9eJPD/
$(function(){
$( "a" ).click(function() {
$( this ).toggleClass( "color" );
});
});
css
.color{
background: yellow;
}
or double click
$(function(){
$( "a" ).each(function() {
var count = 0;
$( "a" ).click(function() {
count++;
//$( this ).text( "clicks: " + count );
$( this ).toggleClass( "color", count % 3 === 0 );
});
});
});
Related
I need help with div' showing up.
I know, that code:
$( "#Button" ).click(function() {
$('#leftDiv').toggle(2000);
});
will make my leftDiv dissappear (when I click Button), but what should I do to set my div default-hided(toggled down?) so that after I click Button, leftDiv should toggle up (appear)?
If you want the div hidden when the page loads, then .hide() it first:
$('#leftDiv').hide();
$( "#Button" ).click(function() {
$('#leftDiv').toggle(2000);
});
If you want the div to be hidden on load, you would do something like:
function load() {
document.getElementById("leftDiv").style.visibility="hidden";
}
<body onload="load"></body>
Would that not work?
var $leftDiv = $('#leftDiv');
var $button = $("#Button");
$leftDiv.hide();
$button.on('click', function() {
$leftDiv.toggle(2000);
});
I have the following slide effect that does not work when you press one of the same button more than twice in a row. Meaning, you select the red button to display its color, press red again to hide that color. When you press it for the third time, it will not work. To get the red to work again, you need to select a different color. This happens with all the buttons. How do I stop this?
fiddle demo
// When the DOM is ready, initialize the scripts.
jQuery(function( $ ){
// Get a reference to the container.
var container = $( ".container" );
// Bind the link to toggle the slide.
$( "a" ).click(function( event ){
// Prevent the default event.
event.preventDefault();
var $this = $(this);
var $target = $("#target");
if ($target.attr("class") === $this.attr("data-color")) {
container.slideUp(500);
} else {
// Hide - slide up.
container.slideUp(500, function(){
$target.attr("class", $this.attr("data-color"));
// Show - slide down.
container.slideDown(500);
});
}
});
});
You have to remove the class attribute once the color slides back down, or else it passes your condition:
container.slideUp(500, function() {
$target.removeAttr("class");
});
Demo: http://jsfiddle.net/k5L5N/2/
I have a js transition I can not resolve. There are three links, blue/green/red, when you select one of the links a color swatch slides into the up position. Push that same link again to make the color swatch slide into the down position.
How can I have each swatch slide all other swatches into the down position before sliding into the up position?
// When the DOM is ready, initialize the scripts.
jQuery(function( $ ){
// Get a reference to the container.
var container = $( ".container" );
// Bind the link to toggle the slide.
$( "a" ).click(
function( event ){
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current visibility.
if (container.is( ":visible" )){
// Hide - slide up.
container.slideUp(500, function(){ $('').show(); });
} else {
// Show - slide down.
container.slideDown(500, function(){ $('').hide(); });
}
}
);
});
JSFiddle Demo
I've forked your jsfiddle with a simple solution: http://jsfiddle.net/cwmanning/jvj2u/2/
All in the fiddle, but it uses data attributes to switch classes instead of onClick attributes.
// Bind the link to toggle the slide.
$( "a" ).click(function( event ){
// Prevent the default event.
event.preventDefault();
var $this = $(this);
var $target = $("#target");
if ($target.attr("class") === $this.attr("data-color")) {
container.slideUp(500);
} else {
// Hide - slide up.
container.slideUp(500, function(){
$target.attr("class", $this.attr("data-color"));
// Show - slide down.
container.slideDown(500);
});
}
});
This is a quick workaround. I am sure there is a much more elegant way, but seems to work.
just change the following:
function slider(v) {
colors = {
'blue':'blue2',
'red' :'red2',
'green':'green2'
}
var confirm = document.getElementById("target");
if (colors.hasOwnProperty(v)){
setTimeout(function(){target.className = colors[v]},500);
}else {target.className = "chart";}
}
Substitute the following in place where you currently have the if(.... is(":visible").
I don't mean at the bottom of the code. Just sub the following in where it sits now in your code.
if (container.is( ":visible" )){
// Hide - slide up.
container.slideUp(500,function(){$().hide()});
setTimeout(function(){
container.slideDown(500, function(){ $('').show(); })
},500);
}else{
container.slideDown(500,function(){$().hide()})
}
I have an array of DOM elements. If the fourth one is clicked I want to hide the search box. If any of the other ones are clicked I want to show it. How would I do this? I currently have:
var app = {
config: {
tabs: [$("#tab1"), $("#tab2"), $("#tab3"), $("#tab4")],
search: $("#search")
},
showHideSearch: function () {
// Here I need to test if the fourth tab was clicked on then hide();
// else if tabs one through three were clicked show
}
}
app.showHideSearch();
Any help is appreciated. Thank you.
You don't need an array to do this.
$( "#tab4" ).click( function() {
app.config.search.hide();
// $( "#search" ).hide();
});
$( "#tab1, #tab2, #tab3" ).click( function() {
app.config.search.show();
// $( "#search" ).show();
});
$.each(app.config.tabs, function(i, v) {
v.bind('click', function(){
$('#searchbox').show();
if(i==3)
$('#searchbox').hide();
});
});
I have a draggable element , that when its dropped onto the target, it adds a delete button:
$( "#committed" ).droppable({
hoverClass: 'drophover',
drop: function( event, ui )
{
$(function()
{
var done;
if( done ) return;
done = true;
$(ui.draggable).append('<button class="delBtn" type="reset">X</button>');
$(ui.draggable).draggable( "option", "disabled", true );
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
}
Once its been dropped, it then becomes sortable. The issue is , everytime the element is sorted, the Delete button gets added again. As there are multiple elements being dragged and dropped and then sorted, so .length>? doesn't work.
I essentially need
If (this.delBtn exists)
I updated another jsfiddle project, there the button is added only if the button does not exist on the draggable object yet: jsfiddle example
The trick here is this:
if ($(ui.draggable).find('button.delBtn').length == 0) {
$(ui.draggable).append('<button class="delBtn" type="reset">X</button>');
}
It checks if the dragged item contains a button with class delBtn. If not then it adds the button.
Wouldn't something like this sort you out?
if($('button.delBtn').length > 0)
{
// The delete button exists...
}