Hi all sorry for the poor English. I have very little experience using javaScript/ES6.
I am new to Vuejs I have a button in which if I click, it should start an animation of a bordered box from one div to another div which is fixed.
click button
<v-btn icon #click="doSomething()">
<v-icon>mdi-content-save-outline</v-icon>
</v-btn>
div which have to animate or can be used some animation from JS is fine as well.
<div id="divAnimation" style="border:1px solid #000000; width:50px; height:50px;"></div>
show when clicked and hide when reaced the fixed dive
Place where it should animate to.
<div id="animationReached" style="position:fixed;top:10%;left:0">I am Fixed</div>
You can achieve using jquery to add the classname when you click the button,
Here use the sample code,
Style
.mystyle
{padding: 25px; background-color: coral; color: white; font-size: 25px; box-sizing: border-box;}
Html Code
<button id="myDIV" onclick="myFunction()">Button Default</button>
Script
function myFunction() {
var element, name, arr;
element = document.getElementById("myDIV");
name = "mystyle";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}
205/5000
I don't know if I understand your question well, but I think you want to toggle CSS settings on the click of a button, right? If so, look at these two examples changing by class and inline style (I think with Jquery it's not cool):
`
<template>
<div>
<button #click="changeStyle()">alternate 01 </button>
<div :style="styleDiv">
<span>
<h1>text 01</h1>
</span>
</div>
<div :class="styleDiv2">
<span>
<h1>text 02</h1>
</span>
</div>
</div>
</template>
<script>
export default {
data(){
return{
on: false,
styleOn:{
backgroundColor: 'green',
width: '100%',
height: '100%'
},
styleOff:{
backgroundColor: 'gray',
width: '50%',
height: '50%'
}
}
},
methods:{
changeStyle(){
this.on = !this.on
}
},
computed:{
styleDiv(){
return this.on ? this.styleOn : this.styleOff
},
styleDiv2(){
return this.on ? 'styleOn' : 'styleOff'
}
}
}
</script>
<style>
.styleOn{
background-color: green;
width: 100%;
height: 100%;
}
.styleOff{
background-color: gray;
width: 50%;
height: 50%;
}
</style>
`
Related
Mouse on one element and another do the action, and only the other one has action.
I want to make a mouse on and change background colour effect, but it works on only one.
Whatever the mouse is pointing on, only one will change the colour.
Here is the code (HTML with JS)
<div class = science style = "position:absolute; left:20px">
<script language="javascript">
function hightback() {
document.getElementById("part1").style.backgroundColor = "#744e4e";
}
function removehightback() {
document.getElementById("part1").style.backgroundColor = "#524c44";
}
</script>
<button id = "part1" onclick="window.location.href='science.html';" value="science" onmouseover="hightback()" onmouseout="removehightback()">
<div class = science1 style = "position:absolute; left:40px; top:45px;">
<h1>Science</h1>
</div>
</button>
</div>
<div class=art style="position:absolute; left:280px">
<script language="javascript">
function hightback() {
document.getElementById("part2").style.backgroundColor = "#744e4e";
}
function removehightback() {
document.getElementById("part2").style.backgroundColor = "#524c44";
}
</script>
<button id="part2" onclick="window.location.href='art.html';" value="art" onmouseover="hightback()" onmouseout="removehightback()">
<div class=art1 style="position:absolute; left:40px; top:45px;">
<h1>Art</h1>
</div>
</button>
</div>
Here is the CSS:
.science1 h1 {
color: #b6ab8f;
size: 55;
font-family: "Josefin Sans", sans-serif;
text-align: left;
}
.science button {
border-radius: 50px;
background: #524c44;
padding: 20px;
width: 230px;
height: 300px;
}
.art1 h1 {
color: #b6ab8f;
size: 55;
font-family: "Josefin Sans", sans-serif;
text-align: left;
}
.art button {
border-radius: 50px;
background: #524c44;
padding: 20px;
width: 230px;
height: 300px;
}
You overwrite your functions for part2. Why not make one unique function for all elements?
Please check below example:
function changeBgColor(id, color) {
document.getElementById(id).style.backgroundColor = color;
}
And now you can use them in such way
<button id="part1"
onclick="window.location.href='art.html';"
value="art"
onmouseover="changeBgColor('part1', '#744e4e')"
onmouseout="changeBgColor('part1', '#524c44')" >
<div class=art1 style="position:absolute; left:40px; top:45px;">
<h1>Art</h1>
</div>
</button>
<button id="part2"
onclick="window.location.href='art.html';"
value="art"
onmouseover="changeBgColor('part2', '#744e4e')"
onmouseout="changeBgColor('part2', '#524c44')" >
<div class=art1 style="position:absolute; left:40px; top:45px;">
<h1>Art</h1>
</div>
</button>
Also you can simplify your code and instead of js use css styles
#part1, #part2 {
backgound-color: #524c44;
}
#part1:hover, #part2:hover {
backgound-color: #744e4e;
}
Your problem here is overlapping JS code as it is calling the second version of the function in the next script tag. I suggest using css hover instead.
Example:
#part_1:hover {
background-color: black;
}
I am trying to get all text content of a parent class detected by addEventListener.
The code I am using is-
document.addEventListener('click',function (event) {
var text = document.getElementsByClassName(event.target.parentElement.parentElement.parentElement.className);
console.log(text[0].innerText);
}, false);
but the problem is, where I am trying to apply the code, has same class name with different id, for example-
<div class="sc-EHOje gMuVTh" size="24" role="group" aria-labelledby="extraTitle_70356820.0">
and
<div class="sc-EHOje gMuVTh" size="24" role="group" aria-labelledby="extraTitle_70356820.1">
has same ClassName (sc-EHOje gMuVTh) but different id (extraTitle_70356820.1 and extraTitle_70356820.0), so if I use only ClassName I always get text for id extraTitle_70356820.0, even if I click for extraTitle_70356820.1.
How can I get all text from the class of the id I clicked when there is duplicate class name? Is there a way to incorporate the ClassName and id at the same time to get the text from parent?
I changed my initial answer because I realised I think you want the uppermost parent text too as well as the text of the element you clicked on? Not sure if this answer is the correct for you but it's my take on things.
//var classname = document.getElementsByClassName("sc-EHOje gMuVTh");
//for (var i = 0; i < classname.length; i++) {
// classname[i].addEventListener('click', function() {
// console.log(this.parentElement.parentElement.parentElement.innerText);
// });
//}
// 24/09 edit
var target = "sc-EHOje gMuVTh";
document.addEventListener('click', function(event) {
if (event.target.className === target) {
var parentElemText = event.target.parentElement.parentElement.parentElement.innerText;
console.log(parentElemText);
}
});
.upperMostParent {
width: 200px;
height: 200px;
background: red;
margin: 1rem;
position: relative;
}
.secondUpper {
width: 100px;
height: 100px;
background: blue;
margin: 1rem;
padding: 1rem;
}
.thirdUpper {
width: 70px;
height: 50px;
background: green;
padding: 1rem;
}
.sc-EHOje.gMuVTh {
background: yellow;
width: 50px;
height: 50px;
}
<div class="upperMostParent">
Parent text content 1
<div class="secondUpper">
<div class="thirdUpper">
<div class="sc-EHOje gMuVTh" size="24" role="group" aria-labelledby="extraTitle_70356820.0">Some text content</div>
</div>
</div>
</div>
<div class="upperMostParent">
Parent text content 2
<div class="secondUpper">
<div class="thirdUpper">
<div class="sc-EHOje gMuVTh" size="24" role="group" aria-labelledby="extraTitle_70356820.1">Some more text</div>
</div>
</div>
</div>
i was trying to run this simple code which starts the Effect with the Button. The Effect should alternate the "highlight" or "shrink" class on each new setInterval tick (attach respective class to the div with id "effect" below), here is the html :
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="exercise">
<!-- 1) Start the Effect with the Button. The Effect should alternate the "highlight" or "shrink" class on each new setInterval tick (attach respective class to the div with id "effect" below) -->
<div>
<button #click="startEffect">Start Effect</button>
<div id="effect" :class="effectClasses"></div>
</div>
here is the CSS :
#effect {
width: 100px;
height: 100px;
border: 1px solid black;
}
.highlight {
background-color: red;
width: 200px !important;
}
.shrink {
background-color: gray;
width: 50px !important;
}
and this is the JS file :
new Vue({
el: '#exercise',
data: {
effectClasses :{
highlight:false,
shrink:true}
},
methods: {
startEffect: function() {
var vm = this;
setInterval(function(){
console.log('higlight 1:'+ vm.effectClasses.highlight);
vm.effectClasses.highlight = !vm.effectClasses.highlight; console.log('higlight 2 :'+ vm.effectClasses.highlight);
console.log('shrink 1 :' + vm.effectClasses.shrink);
vm.effectClasses.shrink = !vm.effectClasses.shrink;
console.log('shrink 2 :' +vm.effectClasses.shrink);
}, 1000);
}
}
});
the console logs are working fine but the style doesn't change every 1 second, which is weird
I wanted to have close button for every tooltip how can I have that?
Note: I don't want to mess up with design , that is why did not try much , Best solution I'm looking here
Below is demo:
tippy('#t1,#t2,#t3,#t4',{
content: "Error Message",
delay: 100,
arrow: true,
arrowType: 'round',
size: 'large',
duration: 500,
animation: 'scale',
trigger:'manual',
placement:'bottom',
hideOnClick:false,
});
var settings = [{id:"#t1",pos:"top"},{id:"#t2",pos:"bottom"},
{id:"#t3",pos:"left"},{id:"#t4",pos:"right"}];
settings.forEach(function(sett){
var tip = document.querySelector(sett.id);
tippy(tip);
tip._tippy.set({content:"click x",placement:sett.pos});
tip._tippy.show();
});
div.tippy-dummy{
position: relative;
width: 220px;
height: 30px;
background: #333;
color: #fff;
}
div.tippy-dummy span{
position: absolute;
display: inline-block;
background: #715a5a;
right: 0;
top: 0;
}
.tooltip{
display:flex;
justify-content:space-between;
width: 90%;
}
.btn{
width: 90px;
height: 30px;
border: 2px solid #ccc;
border-radius: 6px;
}
.btn:hover{
cursor: pointer;
background:#f05a27;
}
.tooltip{
margin-top:80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/3.1.3/tippy.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/3.1.3/tippy.min.js"></script>
<h4>Expected output:</h4>
<div class="tippy-dummy">
Please click X to hide
<span>X</span>
</div>
<hr/>
<div class="tooltip">
<button id="t1" class="btn tippy" title="">top</button>
<button id="t2" class="btn tippy" title="">bottom</button>
<button id="t3" class="btn tippy" title="">Left</button>
<button id="t4" class="btn tippy" title="">Right</button>
</div>
for better view here is codepen: https://codepen.io/anon/pen/aPXKZM
Please help me thanks in advance!!
It's actually even easier than Gifford N.'s answer...
<button data-tippy-content="<span class="closeme">×</span>There are many like it but this one is mine!!!!!">
This is my button
</button>
const tippyInstance = tippy('[data-tippy-content]', {
allowHTML: true,
interactive: true,
onShow(instance) {
instance.popper.querySelector('.closeme').addEventListener('click', () => {
instance.hide();
});
},
onHide(instance) {
instance.popper.querySelector('.closeme').removeEventListener('click', () => {
instance.hide();
});
},
});
The action you are looking for is .hide().
To use this action you have to make a couple adjustments to your code:
Add interactive: true to tippy settings.
tippy('#t1,#t2,#t3,#t4',{
...
interactive: true,
...
});`
Assign the .hide(); action to the popper property in your settings.forEach function:
settings.forEach(function(sett){
...
tip._tippy.popper.onclick = function() {
tip._tippy.hide();
}
});
~
PROTIP:
If you want to hide the popper when clicking a specific element within the popper (X, for example) it just takes a little more markup:
Add some markup to the desired element <button class=\"hide\">X</button>
Use the element in the onclick:
settings.forEach(function(sett){
...
var closeBtn = tip._tippy.popper.getElementsByClassName('hide')[0];
closeBtn.onclick = function() {
tip._tippy.hide();
}
Updated Codepen: https://codepen.io/gnowland/pen/wvBzjym?editors=0010
I have a main-div and two divs with the class of container. The div with the class of container has a child div with a class of content with different contents. I'd like for the user to click on their choice of containers and transport its content to main-div. Then when the user clicks on the main-div, I'd like to transport that content back to its original div.
I'm not sure how to detach the content from main-div once it's been passed and reinsert it back into its original parent. I would appreciate any help.
I can't use IDs. I can only uses classes.
HTML
<div class="main-div">
</div>
<div class="container">
<div class="contents">
A
</div>
</div>
<div class="container">
<div class="contents">
B
</div>
</div>
CSS
.main-div {
width: 100wv;
height: 200px;
background: yellow;
cursor: pointer;
}
.container {
width: 40vw;
height: 150px;
border: 2px solid purple;
display: inline-block;
}
.contents {
width: 50px;
height: 50px;
background: green;
}
JS
$('.container').click(function() {
var child = $(this).children();
console.log('child ' + child);
$('.main-div').append(child);
});
$('.main-div').click(function(child) {
console.log('child ' + child);
$('.main-div').detach(child);
});
FIDDLE
Set ids for the containers
<div class="main-div">
</div>
<div class="container" id="container1">
<div class="contents">
A
</div>
</div>
<div class="container" id="container2">
<div class="contents">
B
</div>
</div>
And set a data attribute for the children on click to identify the parent element.
$(function() {
$('.container').click(function() {
var child = $(this).children();
child.attr("data-parentcontainer", this.id);
$('.main-div').append(child);
});
$('.main-div').click(function(child) {
var child = $(this).children();
child.appendTo($("#" + child.data("parentcontainer")));
});
});
JSFIDDLE
Use this JS snippet and let me know if it helps
$('.container').click(function() {
console.log('foo');
var child = $(this).html();
console.log(child);
$('.main-div').append(child);
});
$('.main-div').click(function() {
console.log('foo');
var main = $(this).html();
if(main.length != 0) {
$('.main-div').empty();
}
else
console.log('Main div is empty');
});
External DEMO
You can use .detach() and .appendTo(), but along with that you have to keep some identification to know from that .contents div was picked up. So I am making use of data-address attribute for the parent of picked .contents so as to attach it back there. See inline comments for detailed explanation on what will happen with the code.
$('.main-div').on('click', function(e) {
var elem = $(e.target); //capture click event on .main-div
if (elem.hasClass('contents')) { //check if click was on .contents div
var text = elem.text().trim(); //if yes then get its text
elem.detach();//detach the element
elem.appendTo($('div[data-address=' + text + ']')); //attach it based on attribute selector of jquery
}
});
$('.contents').on('click', function() {
var elem = $(this);//get the element
elem.closest('.container').attr('data-address', elem.text().trim())
//add or update data-address attribute of its closest parent i.e. .container
elem.detach();//detach the element
elem.appendTo($('.main-div')); //append it to .main-div
})
.main-div {
width: 200px;
height: 200px;
background: yellow;
cursor: pointer;
}
.container {
width: 150px;
height: 150px;
border: 2px solid purple;
}
.contents {
width: 50px;
height: 50px;
background: green;
position: relative;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-div">
</div>
<div class="container">
<div class="contents">
A
</div>
</div>
<div class="container">
<div class="contents">
B
</div>
</div>
You need to add some uniqueness on the div that have class container, you can add a class or id so that when reinserting back to the original div we can identify the div.
i don't think is there other solution to reinsert back to the original div, whenever we identify both div uniquely.
please change your html structure so that we can manipulate through jquery.