I'm new to vue js, so I have simple function to hide the progress bar created in methods, but doesn't seem to work, I'm wondering if I need to add event or bind it, I think it's something simple, but I can't figure it out.
methods: {
hideProgressBar: function() {
const hideProgress = document.querySelector(".progress-bar");
if (hideProgress) {
hideProgress.classList.add(hide);
} else {
hideProgress.classList.remove(hide);
}
}
}
.progress-bar {
height: 1rem;
color: #fff;
background-color: #f5a623;
margin-top: 5px;
}
.hide.progress-bar {
display: none;
}
<div class="progress-bar" role="progressbar"></div>
If you want to invoke the method when the page is loaded, add the following created option after your methods option
created: function(){
this.hideProgressBar()
}
otherwise if you want to invoke the method based on an event then you would need to add your event.
If you're using vue.js you'd want to use the inbuilt directives as much as you can.
This means you can avoid the whole hideProgressBar method.
<button #click="hideProgressBar = !hideProgressBar">Try it</button>
<div class="progress-bar" v-if="!hideProgressBar">
Progress bar div
</div>
And you script would have a data prop that would help you toggle the hide/show of the progress bar
data () {
return {
hideProgressBar: false
}
}
just try like this:
methods: {
hideProgressBar: function() {
var element = document.getElementsByClassName("progress-bar")[0];
if (element.classList.contains('hide')) {
element.classList.remove('hide');
} else {
element.classList.add('hide');
}
}
}
<div class="progress-bar">
Progress bar 1 div
</div>
<div class="progress-bar hide">
Progress bar 2 div
</div>
I have used two progress bar for demonstration. Initially,
The first progress bar doesn't contain the hide class so hide class will be added.
Then the second progress already has hide class so it will be removed
DEMO:
//hides first progress bar by adding hide class.
var element = document.getElementsByClassName("progress-bar")[0];
if (element.classList.contains('hide')) {
element.classList.remove('hide');
} else {
element.classList.add('hide');
}
//display second progress bar by remove hide class
var element = document.getElementsByClassName("progress-bar")[1];
if (element.classList.contains('hide')) {
element.classList.remove('hide');
} else {
element.classList.add('hide');
}
.progress-bar {
height: 1rem;
color: #fff;
background-color: #f5a623;
margin-top: 5px;
}
.hide.progress-bar {
display: none;
}
<div class="progress-bar">
Progress bar 1 div
</div>
<div class="progress-bar hide">
Progress bar 2 div
</div>
Related
I am using Vue 3 to show a set of links for which I am assigning event handlers dynamically(based on link id).
The issues is: The first time when any link is clicked, the corresponding event is not triggered. But subsequently clicks are perfectly working.
The updated code is below:
<script setup>
const makeSizer = ([...sizes]) => {
sizes.map((size) =>{
console.log('size-' + size);
document.getElementById('size-' + size).style.display = "";
document.getElementById('size-' + size).onclick = ((e) =>{
e.preventDefault();
document.body.style.fontSize = e.target.text + 'px';
e.target.style.display = "none";
});
});
};
function zoomIt(){
return {
zoom: makeSizer([12,14,16,18])
}
}
</script>
<template>
<div class="greeting"> {{zoom}}
<p>Some paragraph text</p>
<h1>some heading 1 text</h1>
<h2>some heading 2 text</h2>
<div class="link">
12
</div>
<div class="link">
14
</div>
<div class="link">
16
</div>
<div class="link">
18
</div>
</div>
</template>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
.link{
padding:5px; display:inline-table;
}
.greeting {
color: red;
font-weight: bold;
}
.greeting a{
border:2px solid blue;
padding:3px;
color:white;
background-color:blue;
}
#size-12{ font-size:12px;}
#size-14{ font-size:14px;}
#size-16{ font-size:16px;}
#size-18{ font-size:18px;}
</style>
The bad news is, the way you approach it is an anti-pattern in Vue. The good news is, with some small changes you will end up with code that is much more simple to read and maintain!
You are doubling your event listeners by calling onclick() inside makeSizer() and defining click events via #click.
However, let us not just fix the bug by altering the existing code. What we want to do is to get rid of the anti-patern. So instead, we try passing the desired value of 'zoom' to the handler directly and avoid the beforementioned duplications altogether.
// Script
// We define a function that adjusts zoom value using only the value that is being passed to it as an argument
setZoom(size) {*code*}
// Template
<button #click.prevent="setZoomTo(12)">
This is a general idea. I modified your code a bit more to make it more maintainable and added comments where changes were made. I hope this helps.
Script
<script setup>
import { ref } from "vue";
const currentZoom = ref(12); // Let us set default zoom to 12
const zoomOptions = [12, 14, 16, 18]; // We define zoom options as an array to dynamically generate buttons
function setZoomTo(size) {
currentZoom.value = size; // Set current zoom value
document.body.style.fontSize = currentZoom.value + "px"; // Adjust fontSize on body
}
</script>
Template
<div class="links">
<button // We use button tag for semantic correctness
v-for="zoom in zoomOptions" // For every value in zoomOptions a button is created
:key="zoom"
:disabled="zoom === currentZoom" // If zoom value represented by the button is also currentZoom value => add disabled attribute to the button
#click.prevent="setZoomTo(zoom)" // Adjust currentZoom value according to the zoom value represented by the button
>
{{ zoom }} // Button's zoom value
</button>
</div>
Style
.links {
display: flex;
gap: 16px;
}
.links button {
border: 2px solid blue;
padding: 3px;
color: white;
background-color: blue;
cursor: pointer;
}
.links button:disabled {
opacity: 0.7; // For better UX we change button's opacity instead of hiding it
}
I just started learning Vue and I was wondering, why should I use v-bind for style and not write it regularly in html/css file
Let's say you need to create a progress bar that is not static. You will then need to update the style attribute width for-example.
To accomplish this, we need to programatically edit the width of the element. We 'cannot' to this in plain css, therefore the :style attribute comes in handy.
Let's create an example:
Codepen
HTML
<div id="vue">
<div class="progress-bar">
<div :style="{'width':progress + '%'}" class="progress" />
</div>
<button #click="fakeProgress">Init fake progress</button>
</div>
Css;
.progress-bar, .progress {
border-radius: 20px;
height: 20px;
}
.progress-bar {
width: 250px;
background-color: gray;
}
.progress {
background-color: blue;
width: 0;
transition: all 1s ease;
}
Javascript
new Vue({
el: '#vue',
data: {
progress: 0
},
methods: {
fakeProgress() {
let progress = setInterval(() => {
if(this.progress == 100) {
clearInterval(progress)
} else {
this.progress += 1;
}
}, 50)
}
}
})
As you see here, we bind the progress data attribute to the width value on the fake progress bar. This is just a simple example, but I hope this makes you see its potential. (You could achieve this same effect using the <progress> tag, but that would ruin the explanation.
EDIT; Also want to point out that you are supposed to write all your css as normal as you point out in your question. However, :style is used in cases that you cannot normally use css for. Like the example above where we need css to change from a variable.
I made a simple vertical content slider based on tabs and found optical issue when animating . If you click on different tab, current content slides up and in the same time new one slides down. All contents have same height. The problem is that the height is changing a little bit during the animation (focus on bottom border). I don't really know how to fix it. Is there any way to prevent it?
Here is the complete code:
http://jsfiddle.net/YGY26/8/
JS:
var active = 1;
function item(id) {
if (id !== active) {
$("#description" + active).slideUp("slow");
if (active !== id) {
$("#description" + id).slideDown("slow");
active = id;
}
}
}
HTML:
<div class='slider_box' onclick='item(1);'>
<h3>Content1</h3>
<div id='description1' class='slider_content' style='display: block'>
some content to show
</div>
</div>
<div class='slider_box' onclick='item(2);'>
<h3>Content2</h3>
<div id='description2' class='slider_content'>
some content to show
</div>
</div>
<div class='slider_box' onclick='item(3);'>
<h3>Content3</h3>
<div id='description3' class='slider_content'>
some content to show
</div>
</div>
Basic CSS:
.slider_box {
position: relative;
width: 330px;
}
.slider_box h3 {
color: white;
background: black;
}
.slider_content {
height: 330px;
display: none;
}
I need to keep the color of the clicked div until another div of the same class gets clicked. Right now I have this code:
$('.aaa').mouseenter(function () {
$(this).css('background', '#dddddd');
});
$('.aaa').mouseleave(function () {
$(this).css('background', '#888888');
});
$('.aaa').click(function () {
$(this).css('background', '#555555');
$('.aaa').not(this).css('background', '#111111');
$(this).off('mouseenter mouseleave');
$('.aaa').not(this).on('mouseenter mouseleave');
});
http://jsfiddle.net/5jUP7/
Only problem here is that I can't re-enable previously disabled events (for previously clicked elements).
How can this be achieved?
Put your handlers in functions, to make it easy to refer to them in multiple places.
$(".aaa").on({
mouseenter: mouseEnter,
mouseleave: mouseLeave
});
function mouseEnter() {
$(this).css('background', '#dddddd');
}
function mouseLeave() {
$(this).css('background', '#888888');
}
$(".aaa").click(function() {
$(this).css('background', '#555555');
$(".aaa").not(this).css('background', '#111111');
$(this).off('mouseenter mouseleave');
$(".aaa").not(this).on({
mouseenter: mouseEnter,
mouseleave: mouseLeave
});
});
FIDDLE
Have a look at this fiddle
You can do most of your work using simple CSS
HTML
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>
CSS
.aaa {
display:block;
background:#888;
width: 300px;
height: 30px;
border: 1px solid #000;
}
.aaa:hover,
.aaa.disabled:hover{
display:block;
background:#ddd;
}
.aaa.active {
background:#111;
}
.aaa.disabled {
background:#555;
}
JAVASCRIPT
$('.aaa').click(function () {
$('.aaa').removeClass('active disabled');
$(this).addClass('active');
$('.aaa').not($(this)).addClass('disabled');
});
Don't disable anything. Just keep track of the previously clicked element.
var lastObjClicked;
function clicked(this){
var thisClass = this.className;
if( lastObjClicked.className == thisClass){
document.getElementById(lastObjClicked.id).style.color = '#FF0000';
document.getElementById(this.id).style.color = '#FF0000';
}else{
lastObjClicked = this;
}
}
I have a page that's utilizing jQuery navigation buttons that should slide content into view when each is clicked. However, when another button is clicked, I need the currently viewed content to slide back out of view before the new content slides into view.
This is what I've done so far:
$("#rules-btn").click(function () {
var effect = 'slide';
var options = { direction: 'left' };
var duration = 700;
$('#rules-pane').toggle(effect, options, duration);
});
Here's my jsfiddle that shows how it acts now. Can anyone tell me how to hide currently viewed content when another button is clicked? Thanks.
By the way, I'm very new to jQuery...
Demo: http://jsfiddle.net/e6kaV/6/
HTML:
<div id="rules" class="pane-launcher"></div>
<div id="rules-pane" class="pane"></div>
<div id="scenarios" class="pane-launcher"></div>
<div id="scenarios-pane" class="pane"></div>
JS:
$(".pane-launcher").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'left' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});
CSS:
.pane-launcher{
position:absolute;
top: 0;
width:20px;
height:20px;
background-color:#000;
display:block;
}
#rules {
left:0px;
}
#scenarios {
left:40px;
}
.pane{
position:absolute;
left: 0;
height:50px;
display:none;
opacity:0.5;
}
#rules-pane {
top:50px;
width:200px;
background-color:#999;
}
#scenarios-pane {
top:60px;
width:170px;
background-color:#F00;
}
Remember: instead of dealing with lots of ids, it's better to use classes, both to add styles and event handlers.