Seemingly simple question which is confusing me... all answers seem to be for JQuery only.
I am generating a table calendar with PHP.
Each day on the calendar is a tr > td > div which looks like this at the moment:
{cal_cell_content}
<div class="" id="event" href="" onclick="this.className=\'selected\';return getDate({day});">
{day}
</div>
{/cal_cell_content}
When a user clicks on one of the divs I want the background of that div to change its css class to 'selected'.
Then, if the user clicks another div I want that class to change to selected and the previous class to be removed so that only one div at any time can be 'selected'.
At the moment I am using this.className='selected which works except multiple divs can be selected!
How do get behaviour so that I can select a single div and highlight it, then if I decide to click another div, the previous div becomes de-selected and the new div is 'selected'?
Add an event listener to the div class via a loop, and add another class "selected" to the div if it is clicked. Otherwise, remove the "selected" class. The "selected" class will contain your css stuff.
For instance,
var x = document.getElementsByClassName('yourClass')
for (var i = 0; i < x.length; i++) {
x[i].addEventListener("click", function(){
var selectedEl = document.querySelector(".selected");
if(selectedEl){
selectedEl.classList.remove("selected");
}
this.classList.add("selected");
}, false);;
}
try this native javascript
document.getElementById('event').setAttribute('class', 'selected');
Your divs have same ID, which is wrong, do it like this
{cal_cell_content}
<div class="event" href="">
{day}
</div>
{/cal_cell_content}
$('.event').click(function(){
$('.event').removeClass('selected');
$(this).addClass('selected');
});
with javascript:
{cal_cell_content}
<div class="event" href="" onclick="selectMe(this);">
{day}
</div>
{/cal_cell_content}
function selectMe(obj){
var divs = document.getElementsByClassName("event");
for(var i = 0; i < divs.length; i++)
{
divs[i].className = "event";
}
obj.className = "event selected"
}
$('#event').click(function(){
$(this).attr('class', 'selected');
});
In Standard javascript:
document.getElementById('foo').className += ' selected'
or in JQuery:
$('#foo').addClass('selected');
Related
How I can change certain color on the website in all elements (span, div, h1, h2 etc.) when URL contains certain string?
I have following piece of code:
jQuery(document).ready(function($) {
if (window.location.href.indexOf("/STRING/") > -1) {
console.log("CONTAINS STRING");
}
})
But I can't find a way to change the color everywhere. I've only found methods to change it in certain elements like divs and spans.
It's better to define one css class and use it in each tag you want.
But if you insist on using javascript you can try this one:
function change(){
var alltag = document.body.getElementsByTagName("*");
for (var i = 0; i < alltag.length; i++) {
if (alltag[i].style.color == "red" /*or such condition you want*/)
alltag[i].style.color = "green"
}
}
<div style="color:red">this is DIV Tag 1</div>
<a style="color:red" href="#">this is anchor tag 1</a>
<button onclick="change()"> chnage the red to green color</button>
I want show div 1 on html load while hiding div 2, then using onclick I want to exchange their visibility like when clicking button hide div1 then show div2, then when clicking again, hide div2 then show div 1. Here is my code:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
Hide DIV 1 show DIV 2
<div id="foo"> This is DIV 1</div></div>
<div id="foo"> This is DIV 2</div></div>
Initially set your div1 to display:none; and simply toggle them.
I have used class targetElement just to get rid of common selector. hidden class is used to use the default style display:none; and to replace the inline-style.
I woul like to use button instead of Click here. to do this simple replace a tag with <button type="button"> Button Name </button>
$('#toggleButton').on('click',function(){
$('.targetElement').toggleClass('hidden');
});
.hidden{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="toggleButton" href="#">Click here</a>
<div id="foo" class="targetElement hidden"> This is DIV 1</div></div>
<div id="foo" class="targetElement"> This is DIV 2</div></div>
The attribute id must be unique in a document. Use class instead.
First use CSS to hide the second div. Then use forEach() to hide/show div. You should also avoid using inline event handler.
Try the following way:
document.querySelector('a').addEventListener('click',function(){
[].forEach.call(document.querySelectorAll('.foo'), function(el){
if(el.style.display == 'none')
el.style.display = 'block';
else
el.style.display = 'none';
});
});
Hide DIV 1 show DIV 2
<div class="foo"> This is DIV 1</div></div>
<div class="foo" style="display:none;"> This is DIV 2</div></div>
It is not good practice to have 2 elements with the same ID. ID's should always be unique. Use classes instead. To hide a div onload. Simply add the css to your html element in a style attribute. You also had unecessary </div> tags that I removed.
Here is working code using JQuery (less code) :
$("#toggle").on("click", function() {
$(".isToggable").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="toggle" href="#" >Hide DIV 1 show DIV 2</a>
<div class="isToggable"> This is DIV 1</div>
<div class="isToggable" style="display:none"> This is DIV 2</div>
In the html, I added classes to elements that you want to be toggled. I also added an ID to the a tag. In the JQuery I added an event listener onclick on that a tag using it's ID. $(".isToggable").toggle(); takes all the elements with the class "isToggable" in the page toggles their visibility.
With no parameters, the .toggle() method simply toggles the visibility of elements
More information on toggle : JQuery Toggle
Old answer (vanilla javascript)
function toggle_visibility(id) {
var container = document.getElementById(id);
for (var i = 0; i < container.children.length; i++) {
let currentElem = container.children[i];
if (currentElem.style.display === "none") {
currentElem.style.display = "block";
} else {
currentElem.style.display = "none";
}
}
}
Hide DIV 1 show DIV 2
<div id="container">
<div> This is DIV 1</div>
<div style="display:none"> This is DIV 2</div>
</div>
How this works is you put your elements that you want to toggle the visibility inside a container and the toggle_visibility function will toggle all the visibilities of the elements inside. That way if you decide to add more div's they will all be handled.
If you have any questions on how this works. Don't hesitate to ask. Hope it helps !
I'm trying to create a menu that will show a div when one of the items is clicked by adding the class "visible".
When a second Item is clicked on the menu, it's suppose to hide the previous div by replacing the class "visible" with hidden"
I am not able to make it hide the previous div and I have tried using if conditionals I guess I'm doing something wrong. I appreciate any help on this.
This is the menu I'm using:
<ul class="product_dynamic list_male">
<li><span class="title">option 1</span></li>
<li><span class="title">option 2</span></li>
</ul>
Jquery
for (var i = 1; i <= 3; ++i) {
(function (n) {
$('.prod_switch_' + n).bind('click',function() {
$('#prod_switch_' + n).removeClass('hidden');
$('#prod_switch_' + n).addClass('visible');
});
})(i);
}
html
<div class="product_display visible" id="prod_switch_1">content</div>
<div class="product_display visible" id="prod_switch_2">content</div>
EDIT
Read the question completely wrong the first time :P You shouldn't need to change any HTML, just take a look at this JS.
Use JS to remove the active class from all elements before adding it to the clicked one.
JS:
for (var i = 1; i <= 3; ++i) {
(function (n) {
$('.prod_switch_' + n).bind('click',function() {
$('#prod_switch_' + n).removeClass('hidden');
$('.product_display').removeClass('visible');
$('#prod_switch_' + n).addClass('visible');
});
})(i);
}
To hide any visible product_display divs on list item on click, try:
$('.product_dynamic a').on('click', function(evt) {
$('.product_display.visible').removeClass('visible'); // hide all visible product_display divs
var targetID = $(evt.target).attr('class'); // get ID of element to show
$('#' + targetID).addClass('visible'); // show that element
});
$(".list_male a").click(function(event){
event.preventDefault();
$(".product_display").removeClass("visible");//HIDE ALL CONTENTS
var new_content=$(this).data("content");//GET ID FROM NEW OBJECT TO ADD visible CLASS
$("#"+new_content).addClass("visible");//SHOW NEW CONTENT
return false;
});
.visible{
display:block !important;
}
.product_display{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul class="product_dynamic list_male">
<li><span class="title">option 1</span></li>
<li><span class="title">option 2</span></li>
</ul>
<div class="product_display" id="content_1">content 1</div>
<div class="product_display" id="content_2">content 2</div>
I wanna toggle 3 div.
In the start situation I have the first div that is not trigger able for the clic because its ID.
When I click the second or third div (triggered), the DIV clicked have to become unclickable and the others 2 clickable.
I attach my live example:
http://jsfiddle.net/YV3V5/
HTML:
<div id = "not-selectable" class = "btn1">Div 1</div>
<div id = "selectable" class = "btn2">Div 2</div>
<div id = "selectable" class = "btn3">Div 3</div>
JAVASCRIPT:
$( "#selectable" ).click(function(e) {
var className = $(this).attr('class');
alert(className);
if (className == "btn1") {
$("btn1").attr("selectable","not-selectable");
$("btn2").attr("not-selectable","selectable");
$("btn3").attr("not-selectable","selectable");
} else if (className == "btn2") {
$("btn2").attr("selectable","not-selectable");
$("btn1").attr("not-selectable","selectable");
$("btn3").attr("not-selectable","selectable");
} else if (className == "btn3") {
$("btn3").attr("selectable","not-selectable");
$("btn1").attr("not-selectable","selectable");
$("btn2").attr("not-selectable","selectable");
}
});
In this situation when I click the second DIV, it should became unclickable....but nothing happens.
Thanks for you're help!
You have several errors in your code. The most important being that IDs should be unique. Secondly you are trying to assign values to attributes "selectable" and "not-selectable". These attributes do not exist.
If you lay out your markup correctly, you could do this pretty simple. I would suggest something like this:
HTML
<div class="buttons">
<div class="button">Div 1</div>
<div class="button selectable">Div 2</div>
<div class="button selectable">Div 3</div>
</div>
jQuery
$( ".buttons" ).on("click",".selectable",function(e) {
$('.button').addClass('selectable');
$(this).removeClass('selectable');
});
Can be tested here
(I've added a parent element to simplify event delegation in jQuery.)
there is no attribute called selectable for html tags.
when you write $("btn3").attr("selectable","not-selectable"); it means set the selectable attribute of btn3 to value 'not-selectable'.
also as btn3 is a class you should have written $('.btn3') instead of $('btn3')
WORKING DEMO http://jsfiddle.net/YV3V5/23/
There was a lot wrong with your code :
1) using duplicate id's : Id's must be unique , one per page. Classes do not have to be unique. So I changed around your id's and classes.
2) you should change classes with addClass/removeClass/or toggleClass
3) you shouldn't use a class your removing as the trigger of the click function, so I gave them all a same class of btn.
html :
<div id="btn1" class="not-selectable btn">Div 1</div>
<div id="btn2" class="selectable btn">Div 2</div>
<div id="btn3" class="selectable btn">Div 3</div>
css I added background of blue for selectable and red for not-selectable so easier to visualize what's happening:
.selectable {
background: blue;
}
.not-selectable {
background: red;
}
jquery :
$(document).ready(function () {
$(".btn").click(function (e) {
var id = $(this).attr('id');
if (id == "btn1") {
$("#btn1").removeClass("selectable").addClass("not-selectable");
$("#btn2").addClass("selectable").removeClass("not-selectable");
$("#btn3").addClass("selectable").removeClass("not-selectable");
} else if (id == "btn2") {
$("#btn2").removeClass("selectable").addClass("not-selectable");
$("#btn1").addClass("selectable").removeClass("not-selectable");
$("#btn3").addClass("selectable").removeClass("not-selectable");
} else if (id == "btn3") {
$("#btn3").removeClass("selectable").addClass("not-selectable");
$("#btn1").addClass("selectable").removeClass("not-selectable");
$("#btn2").addClass("selectable").removeClass("not-selectable");
}
});
});
.attr() sets the attribute to the tags. So like you would get <div non-selectable='selectable'> for that code. Here is the documentation. I would use .removeClass() and .addClass() though there might be a more efficient way.
I hope, somebody can explain me where I'm wrong with my code...So I have this function:
function divdisplay(element){
if(document.getElementById(element).style.display == 'none'){
document.getElementById(element).style.display = 'block';
for (var i=0; i<NUMBER_OF_DIVS; i++)
document.getElementById(i).style.display = 'none';
} else
document.getElementById(element).style.display = 'none';
The function displays the divs just fine, but the hiding part is the problem. I want to hide several other <divs>. The ids of these other <divs> are simple numbers, which is why I try to address these elements with the variable i. But when I click on <div> #1 while <div> #2 is already visible, only <div> #1 appears and <div> #2 does not disappear.
The <divs> look like this:
<div id="1" style="display:none;">
<a href="javascript:divdisplay(1);">
<img src="..."/>
</a>
</div>
<div id="2" style="display:none;">
<a href="javascript:divdisplay(2);">
<img src="..." />
</a>
</div>
<div id="3" style="display:none;">
...
And they first appear when the corresponding link
<a href="javascript:divdisplay(1);">
<a href="javascript:divdisplay(2);">
<a href=...
is clicked.
The image in each <div> is linked to the function again, so a click on the image inside the <div> hides it again, but a click on another link does not make the visible <div> disappear again. Where did I go wrong?
Thanks in advance anyway.
Why you don't use Jquery? You only have to add a class to each div you want to hide/show
<div class="test">content here</div>
and now you can use show() and hide() from jquery.
$(".test").show(); and $(".test").hide(); will show/hide all div's with the class test.
You also check out show() and hide().
In addition you have chance to add an effect to your show() and hide() function.
This function loops through all your divs and only shows the one you specify in element
function divdisplay(element){
for (var i=0; i<NUMBER_OF_DIVS; i++){
var div = document.getElementById('div'+i);
if(i == element){
div.style.display = 'block';
}else{
div.style.display = 'none';
}
}
}
// As Alnitak suggested, this can be condensed into:
function divdisplay(element){
for (var i=0; i<NUMBER_OF_DIVS; i++){
document.getElementById('div'+i).style.display = (i == element)? 'block' : 'none';
}
}
I prefer not to use jQuery in small functions like this, because it'll save you from loading a library (-1 HTTP request), and the native functionality is simply faster. (Not significant at this amount of code, but still)
Assuming you're not using jQuery already, that is. If you are, this will work:
Assuming you add a class to all elements like this:
<div class="hideMe" id="1" style="display:none;">
<a href="javascript:divdisplay(2);">
<img src="..." />
</a>
</div>
jquery:
function divdisplay(element){
$(".hideMe").hide();
$("#"+element).show();
}