With pure Javascript I want to create a tab effect to toggle content in a div. Content is the name of the class I want to add or remove the second class active from
<script>
function changeClass(element) {
if (classList !=='active') {
element.classList.add('active');
}
else { element.classList.remove('active'); }
}
</script>
<ul>
<li onclick = "changeClass("content")">
The error is that you're not selecting any elements (wonder why nobody caught this), but trying to change the classlist of a string ("content".classList...). Make sure you select the proper element first:
function changeClass(element) {
element = document.getElementsByClassName(element)[0]; // assuming here we're selecting the first one
if (!element.classList.contains('active')) { // had to fix this as variable classList wasn't defined
element.classList.add('active');
}
else {
element.classList.remove('active');
}
}
Also, as #Teemu suggested in comments, but refused to write it, feel free to use element.classList.toggle('active');.
So the whole code should be:
function changeClass(element) {
element = document.getElementsByClassName(element)[0]; // assuming here we're selecting the first one
element.classList.toggle('active');
}
If you want to simply toggle between two classes, you can do something like this:
function changeClass(element) {
element.classList.toggle('Content');
}
Though in this case you've to pass a reference to the element rather than it's className.
Related
I'm trying to make a skeleton loading screen by having a class 'skeleton' on the elements which styles them then removing it with javascript after a timeout. The issue is that i can't get the javascript to work.
Here's my javascript to remove the class, why isn't it working?
const timeout = setTimeout(loading, 3000);
function loading() {
const element = document.getElementById("skeleton");
element.classList.remove("skeleton");
}
What I think is happening is that you have too many "skeleton" elements with the same id, and ids have to be unique. So remove the ids, and target the classes instead, and use forEach to iterate over each of them to remove the class.
const timeout = setTimeout(loading, 3000);
function loading() {
const skeletons = document.querySelectorAll('.skeleton');
skeletons.forEach(skeleton => {
skeleton.classList.remove('skeleton');
});
}
.skeleton { color: red; }
<div class="skeleton">One</div>
<div class="skeleton">Two</div>
<div class="skeleton">Three</div>
<div class="skeleton">Four</div>
You are calling getElmentById on Class. Can You Share The HTML Elment whose id or class is skeleton
try this
function loading() {
const element = document.getElementsByClassName("skeleton")[0];
element.classList.remove("skeleton");
}
I think the reason behind its not working is that your trying to remove the skeleton class from the skeleton itself. Try targeting the parent Element of the skeleton and then remove the skeleton from the parent Element. Did you try using :
const parentNode=document.querySelector(".parentElem");
parentNode.removeChild(document.querySelector(".skeleton"));
Did you notice you are trying to get an element by using getElementById whereas you stated skeleton is a class.
I'm using this plugin http://iamceege.github.io/tooltipster/.
It is possible know if a HTML already have the tooltipster initialized?
I wanna know because sometimes i need to change the text of the tooltip, and for do that, i need to destroy the tooltipster, change the attribute title of the HTML object, and initialize again. Like this:
$(this).tooltipster('destroy').attr("title", data.fields[i].value).tooltipster();
You can use the API:
Check if the element already has tooltipster:
$(...).hasClass("tooltipstered");
$(...).tooltipster('content', myNewContent);
Accepted solution does not work on SVG elements with tooltipster v4.1.6.
This is how I solved it:
if ($.tooltipster.instances($(node)).length == 0) {
//it is NOT tooltipstered
}
else {
//it is tooltipstered
}
Use .hasClass to check if it has the tooltipstered class
var divToCheck = null; //FIXME: update to whatever query you use to get the div you're checking
if (divToCheck.hasClass('tooltipstered')) {
//TODO: update your title
}
You can check that it needs to be instantiated or simply enabled:
if (!$(id).hasClass("tooltipstered")) {
$(id).tooltipster({
position: 'top-left',
contentAsHTML: 'true',
theme: '.tooltipster-default',
animation: 'grow'
});
} else {
$(id).tooltipster('enable');
}
Make sure that you checked it is instantiated before disabling it:
if ($(id).hasClass("tooltipstered")) {
$(id).tooltipster('disable');
}
I'm trying to make two buttons that acts as remove and add function first I have this:
HTML
<video id="localVideo" style="background-color:black"></video>
<div id="remoteVideos"></div>
Buttons
<button id="BtnOn">On</button>
<button id="BtnOff">Off</button>
Script:
$(document).ready(function() {
//$("#BtnOn").click(function() {
// $('#A').append("<div id='localVideo'>");
// $('#A').append("<div id='remoteVideos'>");
//});
$("#BtnOff").click(function() {
$("#localVideo").remove();
$("#remoteVideos").remove();
});
});
What I'm trying to do is remove the 2 div's and have the ability to return them, with the condition that you can only add them if they are missing and remove them if they are present, therefore limiting them to 1 add and 1 remove. How can I accomplish this?Any help suggestion is appreciated
You could check if the #localVideo element exists. Also, if they are the only elements in the #A element, you can remove them by calling $('#A').empty();.
$(document).ready(function() {
$('#BtnOn').click(function() {
if ($('#localVideo').length == 0) {
$('#A').append('<video id="localVideo" style="background-color:black"></video><div id="remoteVideos"></div>');
}
});
$('#BtnOff').click(function() {
if ($('#localVideo').length > 0) {
$("#localVideo").remove();
$("#remoteVideos").remove();
}
});
});
You could also consider hiding and showing the video elements, rather than adding and removing them.
Instead of using .append() and .remove(), you can change the CSS display property to none or initial, depending on whether you want the thing to be shown or not.
This way, you can then add an if statement like so:
$("#BtnOff").click(function() {
if('#localvideo').css('display') == 'none'){
//do nothing
} else {
$('#localVideo').css('display','none');
$('#remoteVideos').css('display','none');
}
});
i have a same question asked here(wasnt able to comment on it,maybe dont have a priviledge) , i want to get css width value defined in stylesheet but not yet applied on any element in dom ,(its bootstrap css with grid with responsive media queries)
.span6 {
width: 570px;
}
However solution provided in above referenced question return 0 i.e like this
$('<div/>').addClass('span6').width();
but works if i do something like this
$('<div/>').addClass('span6').hide().appendTo('body').width();
any easy way without appending that div?
In order to read a CSS property value from a nonexistent element, you need to dynamically insert that element (as hidden) to the DOM, read the property and finally remove it:
var getCSS = function (prop, fromClass) {
var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
$("body").append($inspector); // add to DOM, in order to read the CSS property
try {
return $inspector.css(prop);
} finally {
$inspector.remove(); // and remove from DOM
}
};
jsFiddle here
Great answer by Jose. I modified it to help with more complex css selectors.
var getCSS2 = function (prop, fromClass, $sibling) {
var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
if($sibling != null){
$sibling.after($inspector); //append after sibling in order to have exact
} else {
$("body").append($inspector); // add to DOM, in order to read the CSS property
}
try {
return $inspector.css(prop);
} finally {
$inspector.remove(); // and remove from DOM
}
};
JSFiddle
I have a function to hide all divs on the page except one div.
// hide all div exceept div1
function hideAllExcept()
{
$('div:not(#div1)').slideUp(800);
}
or
// hide all div exceept 'thisdiv'
function hideAllExcept()
{
$('div:not("#div1")').slideUp(800);
}
The above works fine (difference is first function doesn't have "" around #div1). However, I would like to pass a parameter in the hideAllExcept function to dynamically specify which div to not hide. So I changed the function to:
// hide all div exceept 'thisdiv'
function hideAllExcept(thisdiv)
{
$('div:not(thisdiv)').slideUp(800);
}
if i call the function using: hideAllExcept('#div1') or hideAllExcept("#div1") it doesn't work. It seems that $('div:not(thisdiv)') still selects all divs, it doesn't exclude thisdiv.
Any ideas? Many thanks
Change it to:
function hideAllExcept(thisdiv) {
$('div:not('+thisdiv+')').slideUp(800);
}
$('div').not(thisdiv).slideUp(800);
var divid='div:not('+thisdiv+')';
$(divid).slideUp(800);