I am new to JavaScript.
I am having trouble changing the show button and hide button to images instead.
The show button will be a different image to the hide button.
How would I go about doing this?
https://jsfiddle.net/ej0r4amd/2/
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).val() == "Hide")
$(this).val("Show");
else
$(this).val("Hide");
});
});
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<input type="button" value="Hide" id="button">
<div id="collapse">
Hello World
</div>
Since you're using jQuery, you can use the <input type="image"> and change the src attribute using .attr("src".
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).val() == "Hide") {
$(this).val("Show");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d35f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
} else {
$(this).val("Hide");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" value="Hide" id="button" src="https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1"></button>
<div id="collapse">
Hello World
</div>
There are a few ways to do what you want.
You could use an img tag and onClick change the src value
You could use an element ( eg span ) and on click change backgroundImage property.
Or, like in the example below, use an element and on click toggle the className and in css add different background-image for each className
$(document).ready(function() {
$(".trigger").on("click", function() {
$("#collapse").slideToggle("slow");
$(this).toggleClass('show', 'hide')
});
});
.trigger {
width: 50px;
height: 50px;
display: inline-block;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.hide {
background-image: url("https://via.placeholder.com/50x50")
}
.show {
background-image: url("https://via.placeholder.com/100x100")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="trigger hide"></span>
<div id="collapse">
Hello World
</div>
I would just add a class, and then control the background image of the button with a class—in this case: .show.
You had forgotten a quotation mark on type="button".
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).val() == "Hide") {
$(this).val("Show");
$(this).toggleClass("show");
} else {
$(this).val("Hide");
$(this).toggleClass("show");
}
});
});
#button {
color: white;
background-image: url("https://picsum.photos/id/1/50/50");
}
#button.show {
background-image: url("https://picsum.photos/id/20/50/50");
color: black;
}
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<input type="button" value="Hide" id="button">
<div id="collapse">
Hello World
</div>
Related
Since I couldn't make it work with the jQuery toggle function I try to build a workaround which doesn't work as well. If I just go for removeClass onClick, it removes the class. But both the toggle and if..else logic won't work.
Where's my bug?
$('.category-wrapper').click(function() {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
click me to change color</label></div>
Your code looks Excellent !! you just need to prevent the bubble effect which causes trigger the handler 2 times , you can see more here bubble events
e.preventDefault()
$('.category-wrapper').click(function(e) {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
e.preventDefault(); // <-- this line your solution
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
click me to change color</label></div>
you can easily toggle a checkbox but you can't toggle a radio cause it checked just once. if you are planning to use multiple radios instead then you can use the following link: JSFiddle click to test the example.
// Multiple Radio Color Change Example:
JSFiddle
// Radio Example:
$(document).ready(function() {
$('#radio-example input:radio').change(function() {
$("label").toggleClass("category-deselected");
});
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio-example" class="category-wrapper">
<div class="row">
<label for="id_poller_category_17">click me to change color</label>
<input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17"> </div>
</div>
//Checkbox Example:
$(document).ready(function() {
$('#radio-example input:checkbox').change(function() {
$("label").toggleClass("category-deselected");
});
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="radio-example" class="category-wrapper">
<div class="row">
<label for="id_poller_category_17">click me to change color</label>
<input type="checkbox" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17"> </div>
</div>
The issue is that you have both a <label> and an <input> in your div, and the they both send a click event, which results in your function executing twice, nearly simultaneously. You can get around this by ignoring the click on the label:
$('.category-wrapper').click(function() {
if (event.target.nodeName !== "LABEL") {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
}
});
.category-deselected {
color: red;
}
.category-wrapper input {
position: fixed;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-wrapper category-deselected"><label for="id_poller_category_17"><input type="radio" name="poller_category" value="17" class="poller-category-radio" id="id_poller_category_17" required="">
click me to change color</label></div>
$('.category-wrapper').click(function() {
if ($(this).hasClass("category-deselected")) {
$(this).removeClass("category-deselected")
} else {
$(this).addClass("category-deselected")
}
});
Think about your logic ... if hasClass ( remove class) ... else ( addClass )
Your script first check if $(this) hasClass and then remove it ... and then make "else" and addClass
can i change the style of class 1 when class 2 is focus or hover?
is there any way do this with css?
like here.
<button class='class 1'></button>
<button class='class 2'></button>
You can do it using mouseover and mouseout
$('.class').on('mouseover', function(e) {
$('.class').not($(this)).addClass('hover')
})
$('.class').on('mouseout', function(e) {
$('.hover').removeClass('hover')
})
.hover {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='class 1'>Test</button>
<button class='class 2'>Test 1</button>
Try this
html
<button class='class1'>button1</button>
<button class='class2'>button2</button>
css
.class1:hover + .class2,
.class1:active + .class2,
.class1:focus + .class2{
background: blue;
}
.class2:hover + .class1,
.class2:active + .class1,
.class2:focus + .class1{
background: green;
}
Thank you.
Try this. It will change the bg color of button 1 when button 2 is hovered on
$(document).ready(function() {
$('.class2').hover(function() {
$('.class1').css('background-color', 'blue')},
function(){
$('.class1').css('background-color', '')
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='class1'>Button</button>
<button class='class2'>Button</button>
This is possible using only CSS, but it can be a bit finicky.
You could use pseudo-classes focus and hover and select the immediately after element with the class .class1. Since + will target the element immediately after you can use flex and order to move your buttons around so they appear in the correct order:
.class2:hover+.class1 {
background: lime;
color: red;
}
.class2:focus+.class1 {
background: red;
color: white;
}
.wrapper {
display: flex;
}
.class1 {
order: 1;
}
.class2 {
order: 2;
}
<div class="wrapper">
<button class='class2'>Button2</button>
<button class='class1'>Button1</button>
</div>
You can try with jQuery's .hover().
Please note: class names do not allow space in them.
$('.class2').hover(
function() {
$('.class1').css({color:'red'});
}, function() {
$('.class1').css({color:'blue'});
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='class1'>Button 1</button>
<button class='class2'>Button 2</button>
i have a wordpress page with several buttons, that show/hide a certain div, also the button text changes from "more info" to "less info" according to button click.
This is my code so far, but as i have multiple buttons, of course each time i click on one, the code is executed for all hidden divs and button texts.
What has the code to be like, that it only affects the one button actually clicked / hidden div at a time?
Heres the HTML:
<a class="clicker reveal" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;">MORE INFOS</a>
and JS:
<script type="text/javascript">
jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery(".slider").hide();
jQuery('.reveal').click(function() {
if (jQuery(this).text() === 'MORE INFOS') {
jQuery(this).text('LESS INFOS');
} else {
jQuery(this).text('MORE INFOS');
}
});
jQuery(".clicker").click(function(){
jQuery(".slider").slideToggle("slow");
jQuery.each(masterslider_instances, function(i, slider) {
slider.api.update();
slider.api.__resize(true);
jQuery.each(slider.controls, function( index, control ) {
if (control.realignThumbs) control.realignThumbs();
});
jQuery.each(masterslider_instances, function(a,b){
b.api.update(true);
});
});
});
});
</script>
and the targeted div:
<div class="slider>Some content</div>
Thank you in advance!
UPDATE
I am informed that the button is in a div, the update reflects that small change:
From:
var tgt = $(this).next('.slider');
To:
var tgt = $(this).parent().next('.slider');
The following demo uses the class methods. Details are provided within the source in the comments.
SNIPPET
/*
Removed a chunk of meaningless code
since there's no way of using it
because the plugin isn't
provided (I'm assuming).
*/
$(function() {
/*
Combined both the `more/less` and
`slideToggle()` features under one
class(`.reveal`) and one click event.
*/
$('.reveal').on('click', function(e) {
/*
Prevent anchor from default behavior
of jumping to a location.
*/
e.preventDefault();
/*
See if `.reveal` has class `.more`
*/
var more = $(this).hasClass('more');
/*
`.tgt` is the next `.slider` after
`this`(clicked `a.reveal`).
*/
var tgt = $(this).parent().next('.slider');
/*
Toggle `.reveal`'s state between `.more` and
`.less` classes. (See CSS)
*/
if (more) {
$(this).removeClass('more').addClass('less');
} else {
$(this).removeClass('less').addClass('more');
}
/*
`slideToggle()` only the `div.slider` that
follows `this` (clicked `a.reveal`)
*/
tgt.slideToggle('slow');
});
});
.reveal {
display: block;
}
.reveal.more:before {
content: 'MORE INFO';
}
.reveal.less:before {
content: 'LESS INFO';
}
.slider {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div>
<a class="reveal more" href="" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;"></a>
</div>
<div class="slider">Some content</div>
<div>
<a class="reveal more" href="" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;"></a>
</div>
<div class="slider">Some content</div>
<div>
<a class="reveal more" href="" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;"></a>
</div>
<div class="slider">Some content</div>
Try this
jQuery('.reveal').each(function(idx,item) {
jQuery(item).click(function(){
if (jQuery(this).text() === 'MORE INFOS') {
jQuery(this).text('LESS INFOS');
}
else {
jQuery(this).text('MORE INFOS');
}
});
});
Here is working Fiddle
Make a reference between the anchor and div by using data attribute.
<a class="clicker reveal" data-target="slider-1" style="background-color: #81d742; border: 0px; font-size: 12px; text-decoration: none;">MORE INFOS</a>
<div class="slider slider-1">Some content</div>
Now, you can do the following-
jQuery('.clicker').click(function() {
var targetDiv = jQuery('.' + jQuery(this).attr('data-target'))
if (jQuery(this).text() === 'MORE INFOS') {
jQuery(this).text('LESS INFOS');
targetDiv.slideDown('slow');
} else {
jQuery(this).text('MORE INFOS');
targetDiv.slideUp('slow');
}
// do the rest of your stuff here
});
I have a folio page. When a user clicks link 'design' - all the relevant design images are shown. When the user clicks 'art' all the relevant art images are shown
What I would like to have is an 'all' button which combines them all.
The two sets are contained in divs which turn on and off perfectly in the below javascript. What I need is to add to the script so there is a function that says - click all and display both, instead of one or the other.
When have them both turned on, they flow into each other fine so thats not an issue. I'll keep the code as brief as I can. I have only icluded one image in each section but there is actually 6-7.
Thanks in advance!
my html is:
<div class="sectiondivider">
<div id="ThumbLinks">
ALL
ART<br />
GD
</div>
</div>
<div class="thumb_container">
<div class="thumbs" id="gd_info">
<div class="flex_one">
<img class="icon-image" src="gd.jpg"/>
</div>
</div>
<div class="thumbs" id="art_info">
<div class="flex_one">
<img class="icon-image" src="art.jpg"/>
</div>
</div>
</div>
CSS:
.gd_thumbs {
display:none;
}
.art_thumbs {
display:none;
}
.icon-image {
width:100%;
height:auto;
opacity:1;
}
.flex_one {
width:28%;
float:left;
position:relative;
background-color:#000;
border: solid 2px rgb(0,81,88);
overflow:hidden;
margin-left:4%;
margin-top:4%;
}
Javascript
$('#ThumbLinks a').click(function(e) {
// do something fancy
return false; // prevent default click action from happening!
e.preventDefault(); // same thing as above
});
$(document).ready(function(){
$("div.thumbs:gt(0)").hide(); // to hide all div except for the first one
$('#ThumbLinks a').click(function(selected) {
var getID = $(this).attr("id");
var projectImages = $(this).attr("name");
$("div.thumbs").hide();
$("#" + getID + "_info" ).fadeIn( "slow" );
});
});
Try this snippet.
It just checks if the link's id is all to show them all and, if not, keeps on with your old code. I tried to keep it as short as possible.
EDIT: I think the effect is nicer if, first of all, you hide them all
$('#ThumbLinks a').click(function(e) {
// first we hide them all (for a nicer effect)
$("div.thumbs").hide();
if ($(this).attr("id") == "all")
// if the ThumbLink's id is 'all' we fade in all the divs
$(".thumbs").fadeIn("slow");
else
// if not, we fade in just the correct one
$("#" + $(this).attr("id") + "_info").fadeIn("slow");
});
$(document).ready(function() {
$("div.thumbs:gt(0)").hide(); // hide all div except for the first one
$('#ThumbLinks a').click(function(e) {
// fisrt we hide them all (for a nicer effect)
$("div.thumbs").hide();
if ($(this).attr("id") == "all")
// if the ThumbLink's id is 'all' fade in all the divs
$(".thumbs").fadeIn("slow");
else
// if not, we fade in just the correct one
$("#" + $(this).attr("id") + "_info").fadeIn("slow");
});
});
.thumbs {
color: white;
}
.gd_thumbs {
display: none;
}
.art_thumbs {
display: none;
}
.icon-image {
width: 100%;
height: auto;
opacity: 1;
}
.flex_one {
width: 28%;
float: left;
position: relative;
background-color: #000;
border: solid 2px rgb(0, 81, 88);
overflow: hidden;
margin-left: 4%;
margin-top: 4%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sectiondivider">
<div id="ThumbLinks">
ALL
ART
<br />
GD
</div>
</div>
<div class="thumb_container">
<div class="thumbs" id="gd_info">
<div class="flex_one">
I'm the GD div
<img class="icon-image" src="gd.jpg" />
</div>
</div>
<div class="thumbs" id="art_info">
<div class="flex_one">
I'm the ART div
<img class="icon-image" src="art.jpg" />
</div>
</div>
</div>
I put an input button, and set its background with an image, now Ii want to change that image when the button is clicked.
Here is my relevant code:
<div id='back'>
<input type="button"/>
</div>
CSS code:
#back input{
width: 130px;
height: 130px;
background: url(img/back_default.png);
border: hidden;
}
Can it be done in CSS (as with links-<a> tags), or should I rely to JavaScript instead? Thanks.
Javascript is not needed:
#back input {
width: 130px;
height: 130px;
background: url(img/back_default.png);
border: hidden;
}
#back input:active {
background-image: url(img/back_default-active.png);
}
This should work with JavaScript:
function change() {
document.
getElementById("back").
getElementsByTagName("input").
style.backgroundImage = "url(img/anotherImage.png)"
}
Call it from your button click (or from anywhere you want):
<div id='back'>
<input type="button" onclick="change()"/>
</div>
It's as Matt Said you could use CSS's active pseudo class to change the background or alternatively you could use javascript to add an eventHandler (onClick Listner )to the button that changes the image.
HTML
<div id='back'>
<input type="button" id="xyz" value="Go to back" class="button"/>
</div>
JS
<script>
el = document.getElementById('xyz');
el.addEvenListener("click",changeImg,false);
function changeImg()
{
el = document.getElementById('xyz');
el.style.backround="url('img/back_default-active.png')";
}
</script>