Button to flip all hover flip cards at once [duplicate] - javascript

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
What characters are valid for JavaScript variable names?
(12 answers)
Closed 3 months ago.
I am creating hover flip cards for an instructions manual, and I would like to create a button that would flip them all at once. To get the cards flipping, I only relied on CSS, but to make the button I need some javascript, which I have no idea how to use. Can anyone help me?
<script>
const flip-card = document.getElementByClassName("flip-card-inner")
flip-card.addEventListener("click",flipCard);
function flipCard() {
card.classList.toggle("flip-card-inner");
}
</script>
<body>
<button type="button" class="flipCard">Flip all</button>
<p/>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h5>Title</h5>
</div>
<div class="flip-card-back">
<ul style="font-size: 10pt;">
<li>Some text</li>
</ul>
</div>
</div>
</div>

Related

Trying to understand the following HTML code [duplicate]

This question already has an answer here:
what are data-* HTML attributes?
(1 answer)
Closed 4 months ago.
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap home">
<nav class="header row">
</nav>
<!-- Off Canvas Menu -->
<aside class="right-off-canvas-menu">
<!-- close the off-canvas menu -->
<!-- whatever you want goes here -->
<div class="close">
In the first line, I can understand after div the class. Then, data-offcanvas. What is this? I noticed this while viewing the "view source page" of a web page.
Please help me to understand above html code.
data-offcanvas is a non standard or custom attribute which in this case appears to have no value.
You can read more in this here:
https://www.w3schools.com/tags/att_data-.asp

How To Move One Dive After Another Div? [duplicate]

This question already has answers here:
How to move an element after another element using JS or jquery?
(3 answers)
Closed 6 years ago.
<div class="test1">
.........
</div>
<p>some text here</p>
<div class="test2">
</div>
I want to Move Div test1 after test2
Thanks
You can use Clone() function of jquery
var divCopy = $('.test1').clone();
$('.test2').append(divCopy);
$('.test1:first').remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="test1">
.........
</div>
<p>some text here</p>
<div class="test2">
</div>

How to use Greasemonkey to remove a href block [duplicate]

This question already has answers here:
Greasemonkey, delete <a> element
(2 answers)
Closed 7 years ago.
I'm trying to remove the following line of code from http://trakt.tv/calendars/my/shows/ using Greasemonkey:
<a href="/vip">
<div class="huckster-vip-square">
<div class="inner">
<div class="text">
<h1>Support Trakt & become a VIP!</h1>
<h2>Hide advertising, unlock extended features and help Trakt grow.</h2>
<div class="btn btn-primary">Learn More</div>
</div>
</div>
</div>
</a>
How can I do that?
You may try it with jQuery.
Please refer to this question for using jQuery in Greasemonkey.
The JavaScript code would be like:
$("a[href='/vip']").remove();

Angular ng-switch with conditions [duplicate]

This question already has answers here:
AngularJS: ng-switch-when with an OR
(5 answers)
Closed 8 years ago.
I have ng-switch="field.type" for an element containing ng-switch-when but I'd like to have the switch on when it's more than just one field.type.
I would assume something like ng-switch-when="type1 || type2" would work, but it doesn't.
What's the correct way to do this?
You can do solve it by copying the same ng-switch-when element (ie. element with the same content/innerHTML) for every value.
Like this:
<div ng-controller="mainCtrl">
<div ng-switch="expression">
<div ng-switch-when="matchvalue1">Item 1</div>
<div ng-switch-when="matchvalue2">Item 1</div>
<div ng-switch-when="matchvalue3">Item 3</div>
<div ng-switch-default>default</div>
</div>
</div>
http://jsfiddle.net/JoeSham/HB7LU/9201/

Select div not with classe [duplicate]

This question already has answers here:
jQuery If DIV Doesn't Have Class "x"
(7 answers)
Closed 8 years ago.
I have a lot of divs on my site.
<div class="slide bx-clone"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide bx-clone"></div>
<div class="slide bx-clone"></div>
<div class="slide bx-clone"></div>
Now I want to select the div with jquery. But i only want the divs with the classe slide. And not the divs with the classe slide bx-clone.
How can i make that select statement?
This should do the trick:
$('.slide:not(.bx-clone)');
That's jQuery's not selector.
Or, you could filter the elements afterwards, by using .not():
$('.slide').not('.bx-clone');
Try this :
$('.slide').not('.bx-clone')

Categories