I would like to add animation effect to following code when showing tree items.
I know that jquery has slide functions, and css has "transition", but not sure how to apply these to my code. Any ideas?
<head>
<script language="JavaScript">
function show(){
var elements = document.getElementsByClassName("label");
for(var i = 0, length = elements.length; i < length; i++) {
elements[i].style.display = 'block';
}
}
</script>
<style>
.label {
-webkit-padding-start: 20px;
display: none;
}
</style>
</head>
<body>
<div>
<div onclick="show()">1st Row</div>
<div>
<div class="label">First</div>
<div class="label">Second</div>
<div class="label">Third</div>
</div>
<div>2nd Row</div>
</div>
</body>
If you are planning to use jQuery then you can use slideDown and slideUp method to show/hide elements with animation. There is slideToggle method which alternatively show/hides the element with animcation. You can modify your show method as below
Working demo
function show(obj){
var $this = $(obj);//Here obj points to the element clicked
//Now you have to show/hide the next sibling of the element clicked
//We will use next() method which gives the next sibling of element
//And then call slideToggle on it to show/hide alternatively
$this.next().slideToggle();
}
Change in the markup
<div onclick="show(this)">1st Row</div>
function show() {
$('.label').slideDown();
}
This selects all elements with the .label class and slides them into view. There is also a .fadeIn() function.
Also, you can attach click handlers by selectors (like an id or class):
<div>
<div class="row">1st Row</div>
<div>
<div class="label">First</div>
<div class="label">Second</div>
<div class="label">Third</div>
</div>
<div class="row">2nd Row</div>
</div>
Notice I removed the onClick="" statement and added a class to the row div. Then you can select the element you want to attach the click event to and keep all the code in one place:
$('.row').bind('click', function () {
$(this).next().find('.label').slideToggle();
});
This JavaScript above adds a click handler to all elements with the row class and toggles the display of all of the elements with the label class in the next element.
Here is a jsfiddle: http://jsfiddle.net/L34g3/.
Related
I have a task where Jquery is not working, so I need a workaround to perform an add class event to child element of a div upon click event.
How do I go about that.
The Jquery for that purpose would be
$('.wpb_vc_column').click(function(e) {
alert();
e.preventDefault();
$(this).find('.vc_controls').addClass('show-controls');
});
.show-controls {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wpb_vc_column">
<div class="vc_controls">SomeThing</div>
</div>
Its basically a wordpress backend thing which need to be workable on mobile devices.
Regards
You can use querySelectorAll() to select all the elements with class wpb_vc_column and associate the click event to each element. Then click on these element will find the child elements with class vc_controls and add the class to it.
function clickedColumn(e){
e.preventDefault();
if(this.querySelector('.vc_controls')){
this.classList.add('show-controls');
}
}
document.querySelectorAll('.wpb_vc_column').forEach(function(el){
el.addEventListener('click', clickedColumn);
});
.show-controls{
color:red;
}
<div class="wpb_vc_column">
<div class="vc_controls">SomeThing 1</div>
<div class="vc_controls">SomeThing 2</div>
</div>
var myEle = document.getElementsByClassName('vc_controls');
myEle.className = "show-controls";
make use of querySelector method and and search for child in parent element
el.querySelector("#child").className = 'show-controls';
or
el.querySelector('.vc_controls').className = 'show-controls';
function changeClass(element){
var get_vc_controls=element.getElementsByClassName('vc_controls');
get_vc_controls[0].className='show-controls';
}
.show-controls {
color: red
}
<div class="wpb_vc_column" style="border:1px solid;" onclick="changeClass(this)">
<div class="vc_controls">SomeThing</div>
</div>
I have a this html page, Whenever the element with class name FreeSeat is clicked I want to change the colour of that div element.Below is my html page
<html>
<head>
<title>
QuickBus
</title>
<link type="text/css" rel="stylesheet" href="Seat.css">
</head>
<body>
<div id="Bus">
<div class="Row">
<div class="FreeSeat" ></div>
<div class="FreeSeat" ></div>
<div class="ResSeat" ></div>
<div class="ResSeat" ></div>
<div class="ResSeat" ></div>
</div>
</div>
<body>
</html>
It will be very helpful if anyone can help me out with this .
Considering that you want to use pure JS and not any library, you'd have to manually add event listeners to your classes.
And it has been solved for a similar problem here
var freeclass = document.getElementsByClassName("FreeSeat");
var myFunction_Free = function() {
this.style.color = "blue";
}
for(var i=0;i<freeclass.length;i++){
freeclass[i].addEventListener('click', myFunction_Free, false);
}
But for your case, here's a working fiddle
JQuery is amazing for these sorts of things.
Say you have a div with id 'box1'
<div id='box1'></div>
Style it with css
#box1 {
width:100px;
height:100px;
background-color:white;
border:1px solid black;
}
Using JQuery, you can make this call:
$( "#box1" ).click(function() {
$('#box1').css('background-color', 'red');
});
And now whenever your div is clicked, the colour will change, you can customise this however much you like.
Here is a JSFiddle demo.
Also, since you didn't specify exactly what you want to change the colour of, in my example jquery, it is telling the browser that when a div with an id of box1is clicked, change the background-color of the div with an id of box1, you can change anything though.
If you have a <p> tag you can change that too when the div is clicked, hope this helped!
You can use the following method to change the background color of an element by class:
const free_seat = document.getElementsByClassName('FreeSeat');
free_seat[0].style.backgroundColor = '#ff0';
Each element can be referenced by its index:
free_seat[0] // first div
free_seat[1] // second div
Therefore, we can create a function that will be called whenever the click event is delivered to the target:
const change_color = () => {
this.style.backgroundColor = '#ff0';
};
for (let i = 0; i < free_seat.length; i++) {
free_seat[i].addEventListener('click', change_color);
}
Note: You can also use document.querySelectorAll('.FreeSeat') to obtain a NodeList of elements of a certain class.
You can use simply the css focus pseudo-class for this:
#foo:focus {
background-color:red;
}
<div id="foo" tabindex="1">hello world!</div>
Dont forget to set the tabindex.
So right now I have this code:
var s = 0;
$('.inner').click(function () {
$(this).addClass("selected");
$(this).removeClass("inner");
s++;
$('#sslots').replaceWith(s);
};
But for some reason, the javascript wont update, it will start out as blank (not zero) and then change to 1 once I click one of the div's with "inner" as the class but then won't do anything after that..
The problem is after your first click the element sslots does not exists because you are replacing it with the number, instead you have to change the content of sslots - you can use .text() for that
var s = 0;
$('.inner').one('click', function() {
$(this).addClass("selected");
$(this).removeClass("inner");
s++;
$('#sslots').text(s);
});
.inner {
color: green;
}
.selected {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sslots">0</div>
<div class="inner">inner</div>
<div class="inner">inner</div>
<div class="inner">inner</div>
<div class="inner">inner</div>
<div class="inner">inner</div>
Also from the code it looks like you want to execute the click once per inner element(ie if you click multiple times in an element only first one should count), in that cause use .one() to register a handler which will be executed only once
I have four divs in a main container.
<div id="boxes">
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
</div>
After a javascript click event, display: none is added to them to hide. So I want to do something when no elements are visible.
if ($('#boxes').children(':visible').length == 0)
The above code does not seem to be working because it counts the number of visible elements before the click event (even if all the classes have display: none it gives the count 4).
I'm using change(); function for select to toggle the display property.
Demo: http://jsfiddle.net/wnzavyom/1/
Basically every time you process the onclick event you have to then check each item to see if it exhibits the css setting display: none
(Demo)
JAVASCRIPT
$('.inner-box').on("click",function(){
$(this).css("display","none");
var visible = false;
$('.inner-box',$(this).parent()).each(function(){
if($(this).css("display") !== "none") visible = true;
});
if(!visible) alert("All gone");
});
The issue you have is because your boxes are being hidden using fadeOut() which runs asynchronously. This means that when you check the number of :visible elements the animation has not yet finished, so they are still technically visible.
To achieve what you need you should run your code in the callback of the fadeOut() method. Try this:
$('#filter select').change(function () {
$('.inner-box').fadeOut(function() {
if ($('#boxes').children(':visible').length == 0) {
alert('all boxes hidden');
}
});
});
Updated fiddle
HTML
<select id="showhide">
<option>hide</option>
<option>show</option>
</select>
<div id="boxes">
<div class="inner-box">one</div>
<div class="inner-box">two</div>
<div class="inner-box">three</div>
<div class="inner-box">four</div>
</div>
Script
$('.inner-box').hide();
$('#showhide').on('change',function(){
$('.inner-box').toggle();
alert($('#boxes').children(':visible').length);
});
alert($('#boxes').children(':visible').length);
Demo
I have a minimize button which sets the visibility of the selection to 'hidden'.
I also have a maximize button which sets the visibility of the selection to 'visible'.
Now I want to do this with only one button, but be able to pass through different selections to the function this button calls.
I can easily do this if I was only using the function on one object. For example, I would create a variable, say, hidden=false. Once I click the button it would check what hidden is equal to. If it is true then it would show the selection then change it to false. If it is false, it would hide the selection and change it to true.
Now I want to do this so I can pass objects through to one function and for that function to then check what the hidden value for that selection is.
I want to make a function as I want to be able to re-use this code, rather than having to do alot of if statements everytime I want to show/hide something.
What I have already.
//Pseudo code of buttons
MinimizeButton = onClick(hideThis(selection1));
MaximizeButton = onClick(ShowThis(selection1));
function hideThis(selection){
selection.classed("hidden", true);
}
function showThis(selection){
selection.classed("hidden", false);
}
.hidden{
visibility:hidden;
}
I want to be able to do this with one button rather than two as I have at the moment
I would use a class on the buttons (button.toggle) and a data attribute holding the selector of elements to modify.
function toggleBySelector() {
var target = $(this).data("selector");
$(target).toggle();
}
$("button.toggle").on("click", toggleBySelector);
.red {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>
<button class="toggle" data-selector="#single">Toggle Single</button>
</div>
<div>
<button class="toggle" data-selector=".red">Toggle Red</button>
</div>
</div>
<div>
<div class="red">Red Div</div>
<div id="single">Single Div</div>
<div class="red">Additional Red Div</div>
</div>
This binds the template to itself (or potentially other templates), but allows you to keep your DOM and script largely separate. Each button knows what elements it should toggle, using a jQuery selector in the data-selector attribute.
Using jQuery's toggle method, you don't need to keep track of which elements are shown or hidden, it will handle that for you.
A general approach:
function generalHideOrShow(element)
{
if (element instanceof Element)
{
//single element passed
element = [element]; //mimic node list
}
if(element.length && element.length > 0 && element[0] instanceof Element)
{
//node list
for (var i = 0; i < element.length; ++i)
{
if (element[i].getAttribute("data-hidden") == "true" )
{
$(element[i]).removeClass("hidden");
element[i].setAttribute("data-hidden", false);
}
else
{
element[i].setAttribute("data-hidden", true);
$(element[i]).addClass("hidden");
}
}
}
else
{
return false;
}
}
$("#button1").click(function(){
generalHideOrShow($("div"));
});
$("#button2").click(function(){
generalHideOrShow($("span"));
});
$("#button3").click(function(){
generalHideOrShow(document.body.querySelectorAll("span:nth-child(odd)"));
});
.hidden{
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>test div 1</div>
<div>test div 2</div>
<div>test div 3</div>
<div>test div 4</div>
<span>test span 1</span>
<span>test span 2</span>
<span>test span 3</span>
<span>test span 4</span>
<br />
<button id="button1">Click to toggle the divs</button>
<button id="button2">Click to toggle the spans</button>
<button id="button3">Click to toggle the even spans</button>
To use:
generalHideOrShow( $("divs") );
That will give an array of elements to the function.
This function will work with an element (passed with document.getElementById("element") for example), a Node list (passed with document.querySelectorAll("div") for example) and jQuery selectors.