This question already has answers here:
Toggle CSS Classes using JavaScript - Error
(3 answers)
Closed 4 years ago.
I have a navigation with three links. What I want to do is to show one of three boxes paired on these links if a specific link is clicked. I have these <li> elements with data-nav set:
<li class="active" data-nav="1">Prerender</li><li data-nav="2">Prefetch</li><li data-nav="3">Preconnect</li>
I also have these three boxes, which should be visible only if paired <li> element is clicked
<div class="content-box box1">
<h3 id="isPrerender"> Prerendered page: <span id='pagetitle'></span></h3>
</div>
<div class="content-box box2">
<h3 id="isPrerender"> Page2: <span id='pagetitle'></span></h3>
</div>
</div>
This is what I have in my .css file
.box1, .box2, .box3{display: none;}
.expanded{display: block !important;}
This is where I set the expanded class on the box which is paired with the <li> element clicked:
for (var i = 0; i < menu_items.length; i++) {
menu_items[i].onclick = function() {
var navId = this.getAttribute('data-nav');
document.getElementByClassName('box' + navId).classList.add('expanded');
}
}
}
The problem is that display: none is still set even when I add the expanded class. If I look into console, the display: block rule is here but is erased. How to rewrite It?
I think you can set display none in first load with JavaScript or (hide element) then in function set display block or (show the element)
And don't use !important for the class if you want to replace or you should remove class then add other class
Related
This question already has answers here:
get parent element by class using jquery
(4 answers)
Closed last year.
I have the list of cars which shows both items 'Sold' and 'new' so I want to hide that car from list which have the label of 'sold' in Danish it is called "solgt" I used the following code with the help of jQuery but it disappear every car item in list including 'ny" as well here is the code
jQuery(function($) {
if ($('.slider-car-item:has(.Solgt)')) {
//get checkbox not checked add class disable
$('.slider-car-item').addClass('.dnone');
} else {
//remove class disabled
$('.slider-car-item').removeClass('.dnone');
}
});
.dnone {
display: none;
}
<div class="slider-car-item">
<div>
<article><span class="Solgt">SOLGT</span></article>
<article><span class="ny">NY</span></article>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Just select those elements which have the target class and find the closest ancestor list item. No need for all the logic.
Don't include dots in addClass(). Also, the second clause is pointless unless you'll ever have .dnone on an item at page load.
Alternatively, don't bother with a hide class. Just use jQuery's hide() method.
jQuery(function($) {
$('.slider-car-item li.dnone').removeClass('dnone');
$('.Solgt').closest('li').addClass('dnone');
});
.dnone {
display: none;
}
<div class="slider-car-item">
<div>
<ul>
<li><span class="Solgt">SOLGT</span></li>
<li><span class="ny">NY</span></li>
<li class="dnone"><span class="ny">NY (originally hidden)</span></li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
write in way, and mostly I use 3.5+ jQuery so don't know if there are any difference but should be something like
$('.slider-car-item').find('.Solgt').fadeOut();
or
$('.slider-car-item').find('.Solgt').hide();
or
$('.slider-car-item').find('.Solgt').slideUp();
or
$('.slider-car-item').find('.Solgt').css('display', 'none');
or
$('.slider-car-item').find('.Solgt').addClass('dnone') ;
This question already has answers here:
JavaScript and getElementById for multiple elements with the same ID
(13 answers)
Closed 1 year ago.
full code is here : https://github.com/M-lakshan/toggle-menu-test.git
//common toggle part in the HTML(only the first div tag class "Qi" may differ...
//there are 5 of them(as Qi,Qii,Qiii,Qiv,Qv)
<main>
<!--***-->
<div class="Qi">
<div class="tab">
<a id="anchor" class="active">
How many team members can I invite?
<img id="clickingArrow" class="active" src="./icon-arrow-down.svg" alt="click-arrow">
</a>
<div id="dropdown" class="active">
<p class="text">
You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.
</p>
</div>
</div>
</div>
<hr>
<!--***-->
</main>
//just JS
const arrowS = document.querySelectorAll("#clickingArrow");
arrowS.forEach(function(arrow) {
arrow.addEventListener( "click", function(titlePop) {
setTimeout ( () => {
//for dropdown
let text = document.getElementById("dropdown");
text.classList.toggle("active");
}, 500);
//for anchor
const container = titlePop.currentTarget.parentElement;
container.classList.toggle("active");
//for clickingArrow
this.classList.toggle("active");
});
});
This only works for the first toggle element in the HTML. full code(with HTML & CSS) is available in my provided Github link.
Looking at your GitHub code, and the code in the question, it appears that you are using the same ID for multiple elements on the page. This would explain the issue you are experiencing as IDs should always be unique across a page. I would suggest instead using classes to be added to each id.
For example:
<img class="clickingArrow active" src="./icon-arrow-down.svg" alt="click-arrow">
and the selector const arrowS = document.querySelectorAll(".clickingArrow"); should help in fixing this problem.
If it is imperative that you use IDs, then add a unique identifier to each, for example: <img id="clickingArrow_1" class="active" src="./icon-arrow-down.svg" alt="click-arrow"> and adjust your selctor accordingly.
This question already has answers here:
How to find the closest event element
(2 answers)
Closed 7 years ago.
I opened post where i asked for assistance with jquery code:
How to find the closest event element
unfortunately, other user didn't read my issue.
I have A link. clicking on it will show/toggle div. my problem is that my div is not always located at the same level from the A link. sometimes the A link is 1 level upon the hide DIV. sometime it's 2 levels or more. sometime it's below it
how can I find the closest DIV, that contain the class ".hidebox", to the A link?
<a href="#" class="hideBox-tab " >show div</a>
$(".hideBox-tab").click(function(){
$(this)
.parent().parent()
.find(".hideBox")
.toggle();
return false;
});
If you and an <a> to show/toggle the div the <a> must be outside the div:
toggle and show div
<div class="hideBox">
Content here
</div>
Then you need to find in your HTML one tag that allways englobes a.hideBox-tab and div.hideBox.
For example: div.partial-content:
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
And your JS will be like this:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
I created a snippet, take a look at it:
$(".hideBox-tab").click(function(){
$(this).closest(".partial-content").find(".hideBox").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="partial-content">
toggle and show div
<div class="hideBox">
Content here
</div>
</div>
<div class="partial-content">
toggle and show div
<div>
<div class="hideBox">
Content 2 here
</div>
</div>
</div>
This solution works for one or more levels between a.hideBox-tab and div.hideBox.
This question already has answers here:
Switching a DIV background image with jQuery
(14 answers)
Closed 8 years ago.
I have created a parent div. Inside that div there are multiple child divs: the first one is holding a background image, the second one, the website name, and the third one, some text.
Using jQuery, when a user hovers on the second div, i.e. website name div, the third div i.e text div is visible.
Now what I want is, when the text div becomes visible, to also replace the image in the first div. Here is my HTML and jQuery code so far:
HTML:
<div class="layer-3" style="opacity: 1;">
<a href="#">
<div class="contentImg3">{Div holding the image as a background}</div>
<div class="contentBlock3" style="opacity: 1;">
<span class="btn-block">
<span class="help-block webHdln">Website Name</span>
</span>
</div>
<div class="contentText3">text Div</div>
</a>
</div>
<!-- .layer-2 ENDS -->
JS:
$(".contentBlock3").mouseenter(function () {
$('.contentText3').fadeIn(1500);
$('.contentImg').css("background-image", "images/gurus_bw.jpg)");
$('.contentImg').css("background-position", "top 30px)");
});
The CSS line is not working... What am I doing wrong ?
change
$('.contentImg').css("background-image", "images/gurus_bw.jpg)"); // miss: url(..
to
$('.contentImg').css("background-image", "url(images/gurus_bw.jpg)");
read CSS background-image Property
This question already has answers here:
How can I tell if a DOM element is visible in the current viewport?
(31 answers)
Closed 9 years ago.
I have a list of objects in DOM, which is longer than screen height area.
I need to detect on-screen visible objects only to make something like timeline tree-view. (something like on the picture below):
My DOM looks like this:
<!-- elements visibility on screen to be DETECTED -->
<div id="elements">
<div id="elem-1">Lorem ipsum</div>
<div id="elem-2">Lorem ipsum</div>
<div id="elem-3">Lorem ipsum</div>
<div id="elem-4">Lorem ipsum</div>
<div id="elem-5">Lorem ipsum</div>
<div id="elem-6">Lorem ipsum</div>
<div id="elem-7">Lorem ipsum</div>
<div id="elem-8">Lorem ipsum</div>
</div>
<!--elements visibility on screen to be AFFECTED -->
<ul id="timeline">
<li view-id="elem-1">Elem-1</li>
<li view-id="elem-2">Elem-2</li>
<li view-id="elem-3" class="active">Elem-3</li>
<li view-id="elem-4" class="active">Elem-4</li>
<li view-id="elem-5" class="active">Elem-5</li>
<li view-id="elem-6" class="active">Elem-6</li>
<li view-id="elem-7">Elem-7</li>
<li view-id="elem-8">Elem-8</li>
</ul>
My goal is to detect IDs' of on-screen visible elements from #elements container and assign active class to corresponding elements in #timeline container.
I need to do this process on Scroll event.
Any ideas how to achieve this?
First of all on-screen visible area is known as Viewport.
(image is taken from OP. Cleared and edited in Photoshop)
So all you need is to detect all elements in your Viewport.
This can be achieved using many plugins for jQuery, but I'll explain you on one example, which is called as jQuery withinviewport
Link to source and documentation on: [ withInViewport - Github ]
Step 1:
Download plugins and include jQuery framework and withinviewport plugin in your script:
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="withinViewport.js"></script>
<script src="jquery.withinviewport.js"></script>
.
Step 2:
Initialise function on scroll event:
$(window).bind("scroll", function() {
//your code placeholder
});
.
Step 3:
Use withinviewport selector to get all elements in you Viewport and by each element add class to corresponding list-item in your #timeline container:
$("#elements > div").withinviewport().each(function() {
$('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
});
Step 4:
Put all together:
$(window).bind("scroll", function() {
//clear all active class
$('#timeline > li').removeClass('active');
//add active class to timeline
$("#elements > div").withinviewport().each(function() {
$('#timeline > li[view-id="'+$(this)[0].id+'"]').addClass('active');
});
});
.
.
Also this plugin gives you opportunity to set top, bottom, left and right offset for view-port.
See demo here: http://patik.com/code/within-viewport/