doing some Vue.js challenges for school and having trouble with a function that should trigger on a hover.
I need the div with the class 'redBox' to grow 10 pixels taller each time it is hovered over.
Here's my code:
<html>
<head>
<title>v-on Event Handlers</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.box{width:200px; height:200px; background:green; border:2px solid black; text-align:center; line-height:200px; color:white;}
.hidden{display:none;}
.redBox{width: 100px; height: 100px; background-color: red; margin: 2em;}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{box:true, hidden:boxHidden}">{{message}}</div>
<button v-on:click="showhide();">{{buttonText}}</button>
<div class="redBox" v-on:hover="hoverGrow();"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data:{
boxHeight:200,
boxHidden : false,
message : 'Make me disappear!',
buttonText : "Hide",
hovered: false,
},
methods:{
showhide : function(){
console.log(this.boxHidden);
if(this.boxHidden){
this.boxHidden=false;
this.buttonText="Hide";
}else{
this.boxHidden=true;
this.buttonText="Show";
}
},
hoverBox : function(){
this.boxHeight = boxHeight + 10;
}
}
});
Any tips as to why this doesn't work? Right now nothing happens when I hover over the square.
Try using v-on:mouseover instead of v-on:hover. Also your function appears to be named hoverBox not hoverGrow. So v-on:mouseover="hoverBox();" should work in your redBox div.
Related
I am self-learning Vue.js and need help.
I am practicing event handlers now. I want the red box to become 100px wider when I hover over it. It works fine when I replace hover with click, But does not work with hover.
Appreciate it if you can point out what is wrong whit my code.
<!DOCTYPE HTML>
<html>
<head>
<title>v-on Event Handlers</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.redbox {
width: 100px;
height: 100px;
background: red;
}
.redboxwide {
width: 200px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{redbox:!redboxhover, redboxwide:redboxhover}" v-on:hover="redbox();">Hover over me</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
redboxhover: false
},
methods: {
redbox: function () {
this.redboxhover = !this.redboxhover;
}
}
});
</script>
</body>
</html>
You need to use v-on:mouseover instead of v-on:hover.
Also you might need v-on:mouseleave for cleanup.
Here you could find more info about existing Events and mouseover
Use #mouseover like this:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.redbox {
width: 100px;
height: 100px;
background: red;
}
.redboxwide {
width: 200px;
height: 100px;
background: red;
}
</style>
<div id="app">
<div v-bind:class="{redbox:!redboxhover, redboxwide:redboxhover}" #mouseover="redbox();">Hover over me</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
redboxhover: false
},
methods: {
redbox: function() {
this.redboxhover = !this.redboxhover;
}
}
});
</script>
With the help of #tauzN and #Alex Kosh, I changed my code to the following. I added both #mouseover and #mouseleave.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.redbox {
width: 100px;
height: 100px;
background: red;
}
.redboxwide {
width: 200px;
height: 100px;
background: red;
}
</style>
<div id="app">
<div v-bind:class="{redbox:!redboxhover, redboxwide:redboxhover}" #mouseover="redbox();" #mouseleave="!redbox();">Hover over me</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
redboxhover: false
},
methods: {
redbox: function() {
this.redboxhover = !this.redboxhover;
}
}
});
</script>
I have to add a custon SVG file instead of the navigation icon from ArcGIS in the 'locate' widget ('esri-icon-locate'). Here the problem is, the default icon is appearing top of the custom svg file. Is there any way to hide the default icon?
view.when(_ => {
const n = document.getElementsByClassName("esri-icon-locate");
if (n && n.length === 1) {
n[0].classList += " mapnavigation"
}
});
and the css,
.mapnavigation:before{
display: block;
background: url('mapnavigation.svg');
background-repeat: no-repeat;
background-size: 17px 17px;
background-color: #ffffff;
}
You were really close to the solution, you just need to make it the only class of the node. Take a look at the example I put for you,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Locate button | Sample | ArcGIS API for JavaScript 4.18</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.my-svg-icon {
background: url(https://openlayers.org/en/latest/examples/data/square.svg);
width: 20px;
height: 20px;
}
</style>
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Locate"
], function (Map, MapView, Locate) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-56.049, 38.485, 78],
zoom: 3
});
var locateBtn = new Locate({
view: view
});
// Add the locate widget to the top left corner of the view
view.ui.add(locateBtn, {
position: "top-left"
});
view.when(_ => {
const n = document.getElementsByClassName("esri-icon-locate");
if (n && n.length === 1) {
n[0].classList = 'my-svg-icon';
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
I've been trying to get <transition-group> to work but I just can't figure it out. Upon clicking the box, the element will change its position - which is suppose to trigger v-move class. This is the specific part of Vue documentation that I'm looking at.
Here is the link to my test app
<style>
.test-group-leave-to{
opacity: 0;
}
.test-group-move{
transition: transform 5s;
}
</style>
<body>
<div id='app'>
<test-comp></test-comp>
</div>
<script>
let arrary = ['1','2','3','4','5','6','7','8','9'];
new Vue({
el: "#app",
components: {
"test-comp":{
template: `
<div style='display:inline-block;'>
<transition-group name='test-group'>
<div
class='box'
v-for='(all,ind) in arr'
:key='all'
#click='del(ind, $event)'>{{ all }}</div>
</transition-group>
</div>
`,
data(){
return {
arr: arrary
}
},
methods: {
del(ind, e){
e.target.style.left = '100px';
this.arr.splice(ind,1);
}
}
}
}
});
</script>
A bit different approach in order to achieve smoother animations:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.19/lodash.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght#400;700&family=Indie+Flower&family=Nunito+Sans:wght#400;600;700;800;900&display=swap" rel="stylesheet">
<style>
body{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
font-family: 'Nunito', sans-serif;
}
.outer-box {
position: relative;
width: 100%;
padding: 5px 10px;
transition: all 1s;
}
.box{
border: 1px solid blue;
text-align: center;
width: 50px;
height: 50px;
user-select: none;
}
.animate_move-enter, .animate_move-leave-to {
opacity: 0;
transform: translateX(100px);
}
.animate_move-leave-active {
position: absolute;
}
</style>
</head>
<body>
<div id='app'>
<test-comp></test-comp>
</div>
<script>
let arrary = ['1','2','3','4','5','6','7','8','9'];
new Vue({
el: "#app",
components: {
"test-comp":{
template: `
<div>
<transition-group name='animate_move'>
<div v-for='(all,ind) in arr' :key='all' class="outer-box">
<div class='box' #click='del(ind, $event)'>{{ all }}</div>
</div>
</transition-group>
</div>
`,
data(){
return {
arr: arrary
}
},
methods: {
del(ind, e){
this.arr.splice(ind,1);
}
}
}
}
});
</script>
</body>
</html>
This way you can avoid jumping blocks after they are removed.
I suggest to use List Entering/Leaving Transitions instead of move transition and you should remove e.target.style.left = '100px'; :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.19/lodash.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght#400;700&family=Indie+Flower&family=Nunito+Sans:wght#400;600;700;800;900&display=swap" rel="stylesheet">
<style>
body {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
font-family: 'Nunito', sans-serif;
}
.box {
position: relative;
border: 1px solid blue;
margin: 10px;
text-align: center;
width: 50px;
height: 50px;
user-select: none;
}
.test-group-enter-active,
.test-group-leave-active {
transition: all 1s;
}
.test-group-enter,
.test-group-leave-to {
opacity: 0;
transform: translateX(100px);
}
</style>
</head>
<body>
<div id='app'>
<test-comp></test-comp>
</div>
<script>
let arrary = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
new Vue({
el: "#app",
components: {
"test-comp": {
template: `
<div style='display:inline-block;'>
<transition-group name='test-group'>
<div
class='box'
v-for='(all,ind) in arr'
:key='all'
#click='del(ind, $event)'>{{ all }}</div>
</transition-group>
</div>
`,
data() {
return {
arr: arrary
}
},
methods: {
del(ind, e) {
//e.target.style.left = '100px';
this.arr.splice(ind, 1);
}
}
}
}
});
</script>
</body>
</html>
I am new to vuetify. I need rtl v-text-field with top-right caption on it. How is that possible? I could not do that in inspector. This what i have for a now:
Any help would be appreciated
Added features in v1.1.0:
Vuetify supports RTL (right to left) languages through the rtl prop during bootstrap. This value is dynamic and will apply custom styles to change the orientation of your components.
To enable config level RTL support, add the rtl property to the Vuetify instance options:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
rtl: true
})
You can change this value anytime by directly modifying the $vuetify.rtl property from within your application.
If you are using the latest nuxt.js with vuetify you can add this in nuxt.config.js
buildModules: [
['#nuxtjs/vuetify', { rtl: true }],
...
],
For Vue 2.x, the way to set RTL to true is a bit different:
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
rtl: true,
})
or, as before, you can modify the rtl value on the vuetify object: this.$vuetify.rtl = true
there is no RTL support for vuetify right now.
but you can create your own CSS and change what you need.
first of all:
add dir=rtl to your app
and add this styles:
textarea:focus, input:focus, button:focus { outline: none !important; }
.list__tile__title {
text-align: right;
}
.toolbar__title {
margin-right: 16px;
}
.input-group--text-field label {
position: absolute;
top: 18px;
right: 0;
}
.input-group label {
text-align: right;
-webkit-transform-origin: top right;
transform-origin: top right;
}
.input-group.input-group--selection-controls label{
right: 32px;
left: auto;
}
.input-group.input-group--selection-controls .icon--selection-control {
left: auto;
right: 0;
}
.input-group--selection-controls__ripple {
-webkit-transform: translate3d(12px,-52%,0);
transform: translate3d(12px,-52%,0);
left: auto;
right: 0;
}
it's not complete. but fix some issues
You should use reverse property for input components. Also, don't forget to change the text direction of input. Here is an example:
input{
direction: rtl;
}
.v-list-item__content{
text-align: right
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-row>
<v-col cols="4" right order="2">
<v-select
reverse
outlined
:items="drinks"
label="نوشیدنی"
>
</v-select>
</v-col>
<v-col order="1">
<v-text-field
reverse outlined
label="توضیحات"
placeholder="شرایط نوشیدنی مطلوب شما"
>
</v-text-field>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
drinks: ['چای', 'قهوه']
}
})
</script>
</body>
</html>
I need to create a simple webpage where I can see the result of filters in arc online into it instead of creating the filter each day. By that, the results will be refreshed automatically each day when I log in into arc gis.
I heard that there is an API, is my idea is feasible ?
Assuming you want to filter a FeatureLayer--the original question is unclear, but FeatureLayer seems logical--you should set the definitionExpression property, as described in the FeatureLayer documentation.
Here's an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer - 4.3</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#filterDiv {
position: absolute;
top: 12px;
right: 12px;
padding: 12px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
],
function(
Map,
MapView,
FeatureLayer,
dom,
on
) {
var map = new Map({
basemap: "hybrid"
});
var view = new MapView({
container: "viewDiv",
map: map,
extent: {
xmin: -9177811,
ymin: 4247000,
xmax: -9176791,
ymax: 4247784,
spatialReference: 102100
}
});
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0",
definitionExpression: "Sci_Name = 'Ulmus pumila'"
});
map.add(featureLayer);
view.then(function() {
on(dom.byId("filterInput"), "change", updateFilter);
function updateFilter(ev) {
featureLayer.definitionExpression = ev.target.checked ?
"Sci_Name = 'Ulmus pumila'" :
undefined;
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="filterDiv">
<label>Filter
<input id="filterInput" type="checkbox" checked="yes">
</label>
</div>
</body>
</html>