Display inactive thumbnail as grey in CSS and Vue

Display inactive thumbnail as grey in CSS and Vue - javascript

When I click on a thumbnail, I'd like it to display in color and the other thumbnails as grey.
So When you click on a thumbnail is active and to illustrate I want to have the thumbnail in color, and the other thumbnails in grey because they are inactive.
This is what I'd like to achieve:
Vue.component('carousel', {
template: `
<div class="card-carousel" >
<div class="thumbnails">
<div
v-for="(image, index) in images"
:key="image.id"
:class="['thumbnail-image', (activeImage == index) ? 'active' : '']"
#click="activateImage(index)">
<img :src="image.thumb"/>
</div>
</div>
<div class="containe-carousel">
<span> {{currentImage.text}}</span>
<div class="photoshop-screenshot">
<img :src="currentImage.big" alt="">
</div>
<div class="card-img">
<img :src="currentImage2.big2" alt="">
</div>
</div>
</div>
`,
computed: {
currentImage() {
return this.images[this.activeImage];
},
currentImage2() {
return this.images[this.activeImage];
}
},
data() {
return {
activeImage: 0,
}
},
methods: {
activateImage(imageIndex) {
this.activeImage = imageIndex;
},
},
props: ['images']
});
.section{
background-color: black;
}
.card-carousel {
user-select: none;
position: relative;
}
.containe-carousel {
padding-top: 5%;
}
.thumbnails {
display: flex;
justify-content: space-evenly;
flex-direction: row;
}
.thumbnail-image {
display: fixed;
align-items: center;
cursor: pointer;
padding: 2px;
}
.thumbnail-image > img {
width: 100%;
height: auto;
transition: all 250ms;
filter: grayscale(100%);
}
.thumbnail-image:selected> img {
box-shadow: 2px 2px 6px 1px rgba(0,0,0, 0.5);
visibility: hidden;
filter: none;
}
.card-img {
position: relative;
}
.card-img > img {
margin: 0 auto;
padding-top: 7%;
z-index: 2;
}
.photoshop-screenshot {
position:absolute;
z-index: 1;
width: 70%;
right:-80px;
bottom:-130px;
}
.containe-carousel span {
color: white;
font-weight: bold;
box-shadow: -0.3125em 0.3125em 0 0 rgba(0, 0, 0, 0.15);
}
<section class="section" id="app">
<div class="container">
<div class="text-center" style="margin:0px 50px">
<div class="heading-underscore">
<h2 class="dk-5q-color">
<?php say("X50Q-dashboard-title"); ?>
</h2>
</div>
</div>
<div class="columns">
<div class="column ">
<div class="card-content">
<carousel
:starting-image="0"
:show-progress-bar="true"
:images="images"
></carousel>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<script src ="/x/x50q-rgb-mechanical-keyboard/x50q-cloud-js.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
images: [
{
text : 'Photoshop',
id: '1',
big: '/images/das-keyboard-x50q/photoshop-profile.PNG',
big2: '/images/das-keyboard-x50q/photoshop-screenshot.png',
thumb: '/images/das-keyboard-x50q/photoshop-logo.jpg'
},
{
text : 'Aurocad',
id: '2',
big: '/images/das-keyboard-x50q/autocad-profile.png',
big2: '/images/das-keyboard-x50q/autocad-screenshot.png',
thumb: '/images/das-keyboard-x50q/autocad-logo.png'
},
{
text : ' Counter-Strike',
id: '3',
big: '/images/das-keyboard-x50q/counterstrike-profile.png',
big2: '/images/das-keyboard-x50q/counterstrike-screenshot.jpg',
thumb: '/images/das-keyboard-x50q/counterstrike-logo.png'
},
{
text : 'League of Legends',
id: '4',
big: '/images/das-keyboard-x50q/leagueoflegends-profile.png',
big2: '/images/das-keyboard-x50q/leagueoflegends-screenshot.png',
thumb: '/images/das-keyboard-x50q/leagueoflegends-logo.jpg'
}
],
}
}
});
</script>

I'd rotate the filter from .thumbnails to .thumbnail-image>img instead and add a filter: none; to .thumbnail-image:active>img
Your CSS should look like this:
.thumbnails {
display: flex;
justify-content: space-evenly;
flex-direction: row;
}
.thumbnail-image {
display: fixed;
align-items: center;
cursor: pointer;
padding: 2px;
}
.thumbnail-image>img {
width: 100%;
height: auto;
transition: all 250ms;
filter: grayscale(100%);
}
.thumbnail-image:active>img {
box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.5);
visibility: hidden;
filter: none;
}
The problem is that when you add the grayscale filter to the container of class thumbnails, you are essentially overwriting anything that may have been set inside. If you want to affect the thumbnail images, you should make it as specific as possible, that's why .thumbnail-image>img is your primary target. Furthermore, when you click on the thumbnail you need to undo this change so .thumbnail-image:active>img is your override.

To achieve the wished result add this attribute class="active" to the img tag as follow:
<img :src="image.thumb" class="active"/>
and add the following rule to your CSS :
.active{
filter: sepia(100%) hue-rotate(19deg) saturate(98) brightness(98%) ;
border:3px solid #fff;
}
this gives a light green color but you could change the filter functions to achieve the desired colour.

Related

how can i use active pseudo class to show something

im trying to show a text "copied" after an image has been clicked, with :active class but testing with hover and i cant figure it out. Like a :hover on a navbar to see a drop down menu
.copy {
display: flex;
&__text {
display: none;
}
&__img {
max-width: 1.2rem;
height: 1.2rem;
margin-left: 0.3rem;
cursor: pointer;
&:active {
filter: opacity(0.5) drop-shadow(0 0 0 rgb(133, 177, 0));
}
}
}
.copy__img:active .copy__text {
display: block;
background-color: red;
}
<div className="copy">
<img
className="copy__img"
src={CopyIcon}
onClick={copyText}
alt="copy icon"
/>
<p className={"copy__text"}>copied</p>
</div>

The :active pseudo-class is used to select and style the active link or any other element. It is activated by user.
An element becomes active when the user clicks on the link or the element and presses down the mouse button.
More details on documentation
:active pseudo-class work with user click not with hovering the element.
If you are working with React.js, you can use this methods :-
jsx:
import "./App.scss";
import { useState } from "react";
export default function App() {
const [mouse, setMouse] = useState(false);
return (
<div className="App">
{/* :active && mouseEventListner*/}
<h4>:active && mouseEventListner</h4>
<div className="div">
<img
className="div__img"
src="https://picsum.photos/200/200"
alt="random"
onMouseDown={() => setMouse(true)}
onMouseUp={() => setMouse(false)}
/>
{mouse && <p className="div__text">copied</p>}
</div>
{/* :active && :hover */}
<h4>:active && :hover</h4>
<div className="parentDiv">
<img
className="parentDiv__childDiv1"
src="https://picsum.photos/200/200"
alt="random"
/>
<div className="parentDiv__childDiv2">copied</div>
</div>
</div>
);
}
scss:
.div{
display: flex;
&__img{
width: 5rem;
cursor: pointer;
&:active{
filter: opacity(0.5) drop-shadow(0 0 0 rgb(133, 177, 0));
}
}
&__text{
background-color: red;
}
}
.parentDiv{
width: 6rem;
background-color: teal;
cursor: pointer;
display: flex;
flex-direction: column;
padding: 1rem;
&:hover > &__childDiv2 {
display: block;
}
&__childDiv1, &__childDiv2{
width: 6rem;
height: 6rem;
}
&__childDiv1{
background-color: white;
&:active{
filter: opacity(0.5) drop-shadow(0 0 0 rgb(133, 177, 0));
}
}
&__childDiv2{
display: none;
background-color: red;
}
}
:active pseudo class only works when clicking.

Using a mixin on two components: it calls the method on only the first component

I have two components that need to share a method. I used a mixin for this method and added the mixin to both components. When I click on the second component it fires off the method on the first component instead of the second one - in this case, it opens the top drop down and not the second drop down.
Here is a snippet of my code...
// Mixins
var showDropdownMixin = {
data() {
return {
activeTrigger: false,
dropdown: false
}
},
methods: {
showDropdown: function(){
if(this.dropdown == false){
this.dropdown = true;
this.activeTrigger = true;
TweenMax.fromTo(
"#dropdown",
0.55,
{
autoAlpha: 0,
y: -10
},
{
autoAlpha: 1,
y: 0,
ease: Power2.easeOut
}
);
}else{
this.dropdown = false;
this.activeTrigger = false;
TweenMax.to(
"#dropdown",
0.2,
{
autoAlpha: 0,
y: -10,
ease: Power2.easeOut
});
}
}
}
}
//Global Components
Vue.component('photo-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: [],
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#photo-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = [];
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
Vue.component('associated-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: [],
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#associated-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = [];
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
//Main Vue Instance
function run_app(){
const searchFilters = new Vue({
el: '#searchFilters',
data: {
title: "Vue is working"
},
});
};
window.addEventListener("load", function(event){
run_app()
});
/**********************
Global Styles
***********************/
body {
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
*, :after, :before {
box-sizing: border-box;
}
/**********************
Tab/Container
***********************/
#active-tab {
color: #fff;
cursor: default;
background-color: #2CACDF;
border: 1px solid #2CACDF;
border-bottom-color: transparent;
}
#active-tab:hover {
color: #fff;
cursor: pointer;
background-color: #2CACDF;
border: 1px solid #2CACDF;
}
.nav-tabs li a {
font-size: 1.25rem;
font-weight: bold;
}
.search-container {
border: 1px solid #ddd;
padding : 25px 15px;
}
.search-container select {
width: 100%;
}
/**********************
Search/Filters
***********************/
.search-container input {
margin-right: 5rem;
}
.checkbox-select {
position: relative;
max-width: 800px;
width: 100%;
margin: 2rem 0;
}
.checkbox-select li {
list-style: none;
}
.checkbox-select__trigger {
border-radius: 2px;
background: #fff;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
height: 40px;
display: flex;
align-items: center;
cursor: pointer;
padding: 0 25px;
transition: all 0.4s ease;
}
.checkbox-select__trigger.isActive svg {
transform: rotate(-180deg);
}
.checkbox-select__trigger svg {
width: 1rem;
transition: all 0.4s ease;
}
.checkbox-select__title {
font-size: 1.25rem;
font-weight: bold;
flex: 1;
padding-right: 1rem;
}
.checkbox-select__dropdown {
opacity: 0;
visibility: hidden;
background: #fff;
position: absolute;
left: 0;
right: 0;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
border-radius: 0;
overflow: hidden;
padding-bottom: 25px;
z-index: 1000;
}
.checkbox-select__dropdown .simplebar-scrollbar {
width: 3px;
right: 1px;
}
.checkbox-select__col {
display: flex;
font-size: 1rem;
padding: 25px 25px 0px 25px;
justify-content: space-between;
text-transform: uppercase;
}
.checkbox-select__select-all label {
cursor: pointer;
}
.checkbox-select__select-all input {
display: none;
}
.checkbox-select__filters-wrapp {
margin-top: 20px;
padding-left: 2.5rem;
height: 150px;
overflow-y: auto;
}
.checkbox-select__check-wrapp {
position: relative;
padding: 0;
margin-bottom: 10px;
}
.checkbox-select__check-wrapp input[type="checkbox"] {
display: none;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label {
position: relative;
cursor: pointer;
font-size: 1rem;
line-height: 22px;
padding-left: 30px;
display: inline-block;
transition: padding 0.25s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:after {
border: solid 1px #c7c7c7;
border-radius: 3px;
content: "";
width: 18px;
height: 18px;
top: 0;
left: 0;
position: absolute;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:before {
width: 10px;
height: 10px;
content: "";
position: absolute;
top: 4px;
left: 4px;
background-color: #2cacdF;
opacity: 0;
will-change: transform;
transform: scale(0.5);
transition: all 0.2s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:hover {
padding-left: 32px;
}
.checkbox-select__check-wrapp input[type="checkbox"]:checked + label:before {
opacity: 1;
transform: scale(1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a>Review Photos</a></li>
<li>Mass Approvals Page</li>
</ul>
<div id="searchFilters" class="search-container container-fluid">
<div class="col-md-12">
<label for="project-id">Project ID:</label>
<input type="text" id="project-id" name="project-id">
<label for="job-id">Job ID:</label>
<input type="text" id="job-id" name="job-id">
<label for="all-photo-questions">All Photo Questions:</label>
<input type="checkbox" id="all-photo-questions" name="all-photo-questions">
<button>Reset Filters</button>
</div>
<div class="col-md-6">
<photo-questions></photo-questions>
<associated-questions></associated-questions>
</div>
<div class="col-md-6">
</div>
</div>
<!-- Component Templates -->
<script type="text/x-template" id="photo-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" #click="showDropdown()">
<span class="checkbox-select__title">Photo Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" #click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>
<script type="text/x-template" id="associated-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" #click="showDropdown()">
<span class="checkbox-select__title">Associated Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" #click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>

You have two elements with the same id: dropdown. It looks like TweenMax queries the built page to find where to attach the menu, and just goes with the first one it finds.
You might make the id for each element unique, and pass the id as a parameter on your showDropdown method.

JavaScript - Class toggling is removing the class and not adding in next click

I have set an eventlistener on i tag with class=glyphcolor What I want to do is that whenever I see an element of class checkglyph1 it has to toggle the class i.e if class is there it has to be removed and if not add.What the checkglyph1 class does is it changes the color of the text.
Actual Result
(image to the output I get)
At first click I see that first element is toggled here by default I have already set it.On next click it gets removed instead of the toggle .
HTML section:
<div class="row datasection">
<div class="todo">
<div class="databox col s6 waves-effect">
<p class="checkglyph1 ">Task to do</p>
<!-- </div> -->
<a>
<i class="material-icons checkglyph checkglyph1 glyphcolor">check</i>
</a>
</div>
</div>
</div>
JS:
var glyph= document.querySelector('.glyphcolor');
var par= document.getElementsByClassName('checkglyph1');
console.log(par[0]);
console.log(par[1]);
glyph.addEventListener('click', function () {
/* body... */
console.log("Qw");
par[0].classList.toggle("checkglyph1");
console.log(par[0]);
par[1].classList.toggle("checkglyph1");
})
CSS:
.datasection .todo .databox {
background-color: teal;
margin-left: 120px;
border-radius: 10px;
position: relative;
display: inline-block;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.databox p{
display: inline-block;
}
.databox a .checkglyph{
display: inline-block;
color: yellow;
position: absolute;
left: 90%;
top: 25%;
}
.databox a .checkglyph:hover{
display: inline-block;
}
.databox a .checkglyph1{
display: inline-block;
color: white;
cursor: pointer;
}
.databox .checkglyph1{
color: white;
cursor: text;
}

getElementsByClassName is a LIVE Html Collection. Remove the class, the item is removed from the collection.
var elems = document.getElementsByClassName("foo")
console.log("before", elems.length);
elems[0].classList.remove("foo");
console.log("after", elems.length);
.foo { color: red; }
<div class="foo">1</div>
<div class="foo">2</div>

Importing MoonMap.js into my VueJS 2 project

I started a VueJS 2 project and I try to import a js I found which I need and is called Moon Map but since it seems that VueJS is using ES6 javascript and I try to import an ES5 javascript file it won't compile and I receive errors.
Can anyone here tell me or show me an example of importing an ES5 script inside my VueJS project?
Thanks.
EDIT - Still Relevant
I try to implement in socialCircle.
Home.vue
<template>
<div class="home">
<div class="wrapper">
<div class="box header"><div v-html="logo" class="logo"></div></div>
<div class="box content">
<div class="circle"></div>
<div class="socialCircle" v-for="social in socials">{{social.name}}</div>
</div>
<div class="box footer">Footer</div>
</div>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
logo: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="29.094 45.2 229.507 71.651"><defs><style>.a{fill:#fff;}</style></defs><g transform="translate(29.094 45.2)"><g transform="translate(0)"><path class="a" d="M40.978,28.779V53.461a75.52,75.52,0,0,1-12.461,1.2c-9.585,0-16.775-2.157-21.328-6.47C2.4,43.876,0,37.406,0,28.3,0,19.433,2.4,12.723,7.189,8.41S18.931,1.7,28.037,1.7a44.489,44.489,0,0,1,11.5,1.438v7.668a41.366,41.366,0,0,0-10.784-1.2,25.908,25.908,0,0,0-10.544,1.917,13.688,13.688,0,0,0-6.231,5.991c-1.438,2.636-2.157,6.47-2.157,10.784,0,6.47,1.438,11.023,4.313,14.139q4.313,4.313,13.659,4.313a26.045,26.045,0,0,0,4.313-.24V28.779Z" transform="translate(0 2.374)"/><path class="a" d="M21.838,9.287A4.877,4.877,0,0,1,20.4,5.693,4.521,4.521,0,0,1,21.838,2.1C22.8,1.14,24.234.9,26.151.9a7.115,7.115,0,0,1,4.313,1.2A4.877,4.877,0,0,1,31.9,5.693a4.113,4.113,0,0,1-1.438,3.595c-.959.959-2.4,1.2-4.313,1.2A7.115,7.115,0,0,1,21.838,9.287Zm-.24,45.77v-38.1H30.7v38.1Z" transform="translate(28.486 1.257)"/><path class="a" d="M28.5,56.314V0h9.106V56.314Z" transform="translate(39.796)"/><path class="a" d="M59.5,8.838a10.314,10.314,0,0,1,5.272,4.793c1.2,2.157,1.677,5.272,1.677,9.106V46.221H58.784l-.719-3.834h-.479a11.712,11.712,0,0,1-4.313,3.355,16.686,16.686,0,0,1-5.991,1.2,14.268,14.268,0,0,1-6.47-1.438,9.052,9.052,0,0,1-4.074-3.834A11.385,11.385,0,0,1,35.3,35.917c0-3.595,1.2-6.231,3.595-8.148s6.231-3.115,11.5-3.595l7.189-.719V22.018a8.568,8.568,0,0,0-.959-4.553,5.6,5.6,0,0,0-2.876-2.4,15.488,15.488,0,0,0-5.272-.719,35.751,35.751,0,0,0-5.032.479,34.006,34.006,0,0,0-5.272,1.2V9.077a34.578,34.578,0,0,1,5.751-1.2A54.772,54.772,0,0,1,49.918,7.4,26.926,26.926,0,0,1,59.5,8.838ZM54.231,39.511a10.8,10.8,0,0,0,3.355-2.4V28.967l-6.231.479c-2.4.24-4.074.719-5.272,1.677a4.469,4.469,0,0,0-1.677,3.834,5.059,5.059,0,0,0,1.438,3.834,5.858,5.858,0,0,0,4.313,1.438A12.172,12.172,0,0,0,54.231,39.511Z" transform="translate(49.291 10.333)"/><path class="a" d="M52,7.879h7.668l.719,4.074h.479A14.274,14.274,0,0,1,65.9,8.6a18,18,0,0,1,6.231-1.2,13.509,13.509,0,0,1,9.346,3.355c2.4,2.157,3.355,5.991,3.355,11.023v24.2H75.724V22.257c0-2.636-.479-4.313-1.677-5.512-.959-1.2-2.636-1.677-4.793-1.677a10.384,10.384,0,0,0-4.553.959A14.619,14.619,0,0,0,60.867,18.9V45.742H52Z" transform="translate(72.611 10.333)"/><path class="a" d="M97.454,7.6,87.15,37.794,77.085,7.6H67.5L81.4,45.7h2.636L78.284,61.039H87.15L106.561,7.6H97.454ZM84.993,59.841a3.406,3.406,0,0,1-1.438.479,2.026,2.026,0,0,1-1.438-.479c-.479-.24-.479-.719-.479-1.438a2.569,2.569,0,0,1,.479-1.438,3.406,3.406,0,0,1,1.438-.479,2.026,2.026,0,0,1,1.438.479c.479.24.479.719.479,1.438S85.473,59.6,84.993,59.841Z" transform="translate(94.254 10.612)"/></g><g transform="translate(185.174 54.397)"><path class="a" d="M87.015,37.557h8.627v2.4H83.9V22.7H95.4v2.4H86.776v4.553H94.2v2.4H86.776v5.512Z" transform="translate(-66.407 -22.7)"/><path class="a" d="M94.712,39.954V25.336H89.2V22.7h14.139v2.636H97.827V39.954Z" transform="translate(-59.006 -22.7)"/><g transform="translate(0 0)"><path class="a" d="M76.6,33.248V36.6h2.876V25.1Z" transform="translate(-76.6 -19.349)"/><path class="a" d="M86.048,35.4,79.1,24.617l-1.2,3.115,7.908,12.221h3.115V22.7H86.048Z" transform="translate(-74.785 -22.7)"/></g></g></g></svg>',
socials: []
}
},
created () {
this.$http.get('/static/json/data.json').then(function ({data}) {
this.socials = data.frontPage.social
console.log(this.data)
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.logo {
width: 250px;
margin: 15px;
}
.circle {
background: #fff url(/static/img/me.acf533d.svg) no-repeat -40px 20px;
height: 350px;
width: 350px;
border-radius: 50%;
}
.socialCircle {
background: #fff;
height: 25px;
width: 25px;
border-radius: 50%;
}
.wrapper {
display: grid;
grid-template-areas:
"header header header"
"content content content"
"footer footer footer";
color: #444;
align-items: stretch;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
display: flex;
align-items: center;
justify-content: center;
}
.header {
grid-area: header;
justify-content: flex-start;
height: 100px;
}
.content {
grid-area: content;
height: calc(100vh - 200px);
background: #333;
}
.footer {
grid-area: footer;
height: 100px;
background: #222;
}
</style>

Swapping an image when a toggle has been clicked on

I have the following code where I added a plus symbol to one of my service titles. I was informed by someone that when that service is clicked on I should have a minus sign take its place to show that it can be minimized. I am unsure of how to swap out the plus sign when the description has been expanded. Does anyone have any ideas of how I could do that?
Here is a snippet. Click on one of the service names to see the description expand.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">
<img src="http://realtorcatch.com/icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>

Here is the working example, i change a little de html and Js
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
var t = $(this);
if(t.hasClass('open'))
{
t.removeClass('open');
t.find('.status').html("+");
}else {
t.addClass('open');
t.find('.status').html("-");
}
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
the working example

I'd suggest simply toggling a class to achieve this.
You can add the icon as a background image of a pseudo element inserted into the .service_title element. Then you can simply toggle a class in order to change the icon. Update the background image URLs accordingly. See the updated example for the modified jQuery; it's still only 5 lines.
The relevant CSS:
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
Updated Example:
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
$('.service_description').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>

You could just change it within your click binding...
Let's say your using images, just add a data-attribute you can query when you need to, like this...
HTML
<div class="service_wrapper">
<img data-state="plus" class="state" src="plus.png" alt="More"/>
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
JS
$('.service_wrapper').click(function() {
var state = $(this).find('.state');
if(state.data('state') == 'plus')
state.attr({ 'src': 'minus.png', 'alt': 'Less' }).data('state', 'minus');
else
state.attr({ 'src': 'plus.png', 'alt': 'More' }).data('state', 'plus');
});

We Keep Coding

JavaScript is the programming language of the Web.

Display inactive thumbnail as grey in CSS and Vue - javascript

Related

how can i use active pseudo class to show something

Using a mixin on two components: it calls the method on only the first component

JavaScript - Class toggling is removing the class and not adding in next click

Importing MoonMap.js into my VueJS 2 project

Swapping an image when a toggle has been clicked on

Categories

Resources