For some reason vue is removing both the style attribute and the background image. This tag
<section style="background:
url(images/banners/profiles/profile-banner-1.png);" class="profile-banner flex items-end md:items-end md:justify-center p-8">
</section>
The background image will flash when I reload the page, but then be removed.
I commented all of my components out and it seems that it's the Vue root instance.
const app = new Vue({
el: '#app',
/*data() {
return {
modal: false,
content_type: ''
}
},
methods: {
openModal: function(content_type){
this.modal = !this.modal;
}
} */
});
The stranger thing is that it seems to just have a problem with the background: url property since when I use something like this it works perfectly fine:
<section style="background: black;" class="profile-banner flex items-end md:items-end md:justify-center p-8">
</section>
I'm wondering if this is a bug, or maybe Vue has reserved url?
Maybe it's because :url() ?
If so how do I escape this?
The style attribute should not have any newline characters. This works just fine
<section style="background: url(images/banners/profiles/profile-banner-1.png);" .../>
Demos:
Working ~ http://jsfiddle.net/krz1gvqt/
Not working ~ http://jsfiddle.net/krz1gvqt/2/
Related
I have this little problem happen on firefox (works fine on chrome), i have list of buttons that have anchor with different in page destination, im using id, but (on firefox) the anchor only work on second click, the first click only change the URL.
button 1
button 2
destination
<section id="section1">
some content
</section>
<section id="section2">
some content
</section>
ive also already try name="" but its still need double clikc to work, is there method to resolve this or is it a bug on firefox?
I can verify the issue exists in Firefox and Safari. This can be solved without JS by configuring your router's scrollBehavior as mentioned in the docs (Router v3 | Router v4):
A solution would look like this for Router V3:
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return { selector: to.hash };
}
}
Or for Router V4:
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return { el: to.hash };
}
}
Try this :
<a href="javascript:document.getElementById('section1').scrollIntoView(true);">
Button 1
</a>
<a href="javascript:document.getElementById('section2').scrollIntoView(true);">
Button 2
</a>
Destination :
<section id="section1">
some content
</section>
<section id="section2">
some content
</section>
I have been working on this piece of code for like two days now. I am using Angular to create a web app, and I need some numbers to change color when they reach a certain value. (EXAMPLE: if num > 45 color = green else color = red) I would like to be able to pass the value of color between my typescript and HTML, but I'm having trouble with that. The color value passes to HTML just fine, but I can't put the color value into any type of style.
Here is my code. Thanks for the help!
Typescript:
colorOption=''
if(this.Classyaverage > 45){
console.log('red')
this.colorOption='#FF0000'
}
else{
console.log('green')
this.colorOption='#00FF00'
}
HTML:
<body>
<div class="pagecolor">
<div class="box">
<canvas class="offset"
id="lineChart"
width="240"
height="180"
>
</canvas>
//This is what I want...
<style>
h1{ color:{{colorOption}};}
</style>
<h1>
{{Classyaverage}}
</h1>
</div>
</div>
</body>
So is I can't import a Typescript like that, is it possible to export HTML or CSS into typescript?
Create a css class where you will apply the color:
.myColor {
color: var(--colorVariable);
}
Assign the value of the css variable from the typescript according to what you need in this way:
document.documentElement.style.setProperty( '--colorVariable', '#00FF00' );
You can modify it from any calculation or event of the application.
To achieve expected result, use ngStyle on h1 tag (https://angular.io/api/common/NgStyle)
<h1 [ngStyle]="{'color': colorOption}">
{{Classyaverage}}
</h1>
I think what you are looking for is the ngClass directive.
Here is the documentation from Angular. https://campuslabs.visualstudio.com/Student%20Assessment/_workitems/edit/59235
// .css
.red{
color: #f00;
}
.green: {
color: #0f0
}
-
// .html
<h1 [ngClass]="{'red': Classyaverage > 45, 'green': Classyaverage <= 45}"></h1>
This might be more than you need, but if you wanted to style multiple elements (such as all of a class or tag name) you could do the following.
HTML:
<h1 class="color-change">
{{Classyaverage}}
</h1>
<h2 class="color-change" *ngFor"let el of arr">
test
</h2>
TypeScript:
#ViewChildren(".color-change") private colorChange: QueryList<ElementRef>;
constructor(private renderer: Renderer2) { }
ngAfterViewInit(): void {
this.colorChange.subscribe(() =>
this.colorChange.forEach((element: ElementRef) => {
this.renderer.setStyle(
element.nativeElement,
'color',
this.colorOption
})
})
);
}
...
This would take care of multiple elements as well as asynchronous elements
Everytime I insert tag in my main app it always rendering a new line, couldn't it be inline? I want to achieve something like this :
<p>This is a component :<component></component></p>
<!--worked with other html tags-->
Result instead :
This is a component :
component content
Of course I can insert prefix This is a component : as props in the component so it can be inline, at least for displaying, but that's not always I intended to be..
I wonder also where Vue store css template for component.
Thanks community.
Your component isn't rendering on a new line. It is rendering based on the rendering rules for HTML. If your component's root tag is a block element, then it will be rendered on the next line. If it is an inline element, then it will be rendered inline.
console.clear()
const Inline = {
template: `<span>This is inline</span>`
}
const Newline = {
template: `<div>This is on a new line</div>`
}
new Vue({
el: "#app",
components: {
Inline,
Newline
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<p>This is an inline component:
<component is="Inline"></component>
</p>
<p>This is a block component:
<component is="Newline"></component>
</p>
</div>
In the above example, the Inline component's root tag is a span. Spans are inline elements. The Newline component's root tag is a div. Divs are block level elements and the text is on the next line.
You could also use display: inline on a div and cause the component to be rendered inline.
console.clear()
const Newline = {
template: `<div style="display: inline">This is on the same line</div>`
}
new Vue({
el: "#app",
components: {
Newline,
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<p>This is a block component that displays inline:
<component is="Newline"></component>
</p>
</div>
The HTML rendered by Vue follows all the layout rules of HTML you hand write. There's no magic involved.
I'm developing a Vue.js application and I'm having trouble to link an anchor to a certain div within a component.
I have the following anchor:
Porto, Portugal
and the following div:
<div id="porto" class="fl-porto">
I'm using vue-router in hash mode.
The problem is, whenever I click the "porto-button" it will redirect me to the "home" page ( ' / ' )
I'm using Vue.js 1.X and I tried using history mode (URL without the hashbang) but it gives me a cannot GET '/page' error upon refreshing a page.
Am I doing something wrong? What can I do about this?
Because you are using router in hash mode, you will not be able to scroll that easily because scrolling to /#something will actually redirect you to 'something' page.
You will have to emulate scrolling behaviour on your own, try doing something like that:
//P.S. the code is written for Vue 2.
//You will have to adjust it to Vue 1.
//Your view:
<a class="porto-button" #click="scrollMeTo('porto')">Porto, Portugal</a>
...
<div ref="porto" class="fl-porto">
//Your code:
methods: {
scrollMeTo(refName) {
var element = this.$refs[refName];
var top = element.offsetTop;
window.scrollTo(0, top);
}
}
How it works:
Set the references through ref attribute to the element you would like to scroll to;
Write a function that will programmatically set window.scrollY to the top of the referenced element.
Job is done :)
Update 1:
jsfiddle https://jsfiddle.net/5k4ptmqg/4/
Update 2:
Seems that in Vue 1 ref="name" looked like el:name (docs), here is an updated example:
https://jsfiddle.net/5y3pkoyz/2/
Another method is to use "scrollIntoView()"
So, euvl's code still stands, except you would change the method slightly:
new Vue({
el: '#app',
methods: {
goto(refName) {
var element = this.$els[refName];
element.scrollIntoView();
}
}
})
If you wanted to get fancy and make the scroll smooth, you can even add the following:
element.scrollIntoView({ behavior: 'smooth' });
Note that this will need a polyfill for older browsers.
What worked for me
<router-link to="#leaders">Leaders</router-link>
or dynamic
<router-link :to="`#${subMenuItem.linkTarget}`" class="page-submenu-list__link">
{{subMenuItem.linkTitle}}
</router-link>
in router
routes:[],
scrollBehavior (to, from, savedPosition) {
//https://router.vuejs.org/guide/advanced/scroll-behavior.html
if (to.hash) {
return { selector: to.hash }
} else if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 }
}
}
An alternative solution is to use the v-scroll-to directive (webpage, github).
I find this solution to be clean, simple, flexible and effective. To use:
Install it:
npm install --save vue-scrollto
Have Vue 'use' it:
var VueScrollTo = require('vue-scrollto');
Vue.use(VueScrollTo)
Apply it as a directive in your Vue component's template:
Scroll to #element
<div id="element">
Hi. I'm #element.
</div>
Or apply it programmatically in your Vue component's methods:
this.$scrollTo('#element', 500, { easing: 'ease-in-out' })
Or apply it programmatically in your Vuex actions:
import { scrollTo } from 'vue-scrollto'
scrollTo('#element', 500, { easing: 'ease-in-out' })
Another solution, if you're already using Vuetify, you may prefer to use Vuetify's built-in programmatic scrolling method, $vuetify.goTo():
<v-btn #click="$vuetify.goTo('#element', {duration: 500, easing: 'easeInOutCubic'})">
Scroll to #element
</v-btn>
<div id="element">
Hi. I'm #element.
</div>
If you set a ref="something" on an element, you could also use this oneliner with #click:
<a #click="$refs.something.$el.scrollIntoView()">
Go to something
</a>
I am currently working with Vuejs and routing to other pages. For my link to photos, I would like a main cover photo that covers the entire screen.
<template>
<div id="album-container">
<div class="cover-image"></div>
<section class='intro'>Lorem </section>
<div class="image-flex-wrap">
<div class="image-cell" v-for="image in images">
<img :src="image">
</div>
</div>
</div>
</template>
.cover-image {
background: url('my photo') #fff no-repeat center center;
background-size: cover;
height: 100vh;
}
This displays the page the way I want it, but the problem arises when I am routed to this page from a page where I have previously scrolled down. Instead of starting at the top of the page, it begins around the middle of my cover-image div. I believe the problem has something to do with the height: 100vh because if I replace it with position: absolute and a width of 100%, then the page will start at the top. However, I would like to refrain from using absolute positioning but don't know enough css to understand why this is occurring.
Thanks for the suggestions.
The issue turned out to be unrelated to Vuejs. I had failed to mention I was using Material Design Lite since I didn't expect it to be the cause but unfortunately it was. Due to the way it works, you no longer scroll on the window object by rather the .mdl-layout__content class supplied by MDL. This was why all scroll properties relating to window was returning 0.
I simply set up a watch method on my routes to force scrollTop.
watch: {
$route() {
document.getElementsByClassName('mdl-layout').scrollTop = 0;
}
}
It can probably be related to scrollBehaviour of your vue-router config as well, try to add following scrollBehaviour in the config:
export default new Router({
mode: 'history',
scrollBehavior: (to, from, savedPosition) => {
if (to.hash) {
return {selector: to.hash}
} else {
return {x: 0, y: 0}
}
},
routes: [
{ path: '/', component: landingView },
....
....
{ path: '/healthcheck', name: 'healthcheck', component: healthCheckView }
]
})