I have a paper-dialog inside of another element looking like:
<paper-dialog id="modal" modal>
<h2>Login</h2>
<p>Lorem......</p>
<div class="buttons">
<paper-button dialog-confirm autofocus>Login</paper-button>
</div>
</paper-dialog>
I could declaratively add entry-animation and exit-animation but I'm really trying to do two effects at once like it shows in the docs
I tried using something like:
this.$.modal.animationConfig = {....}; //like the docs
and I set node to this.$.modal, but I'm pretty certain it doesn't read that variable at all because when I check this.$.modal.getAnimationConfig('exit') (or entry) I get nothing.
So where in the lifecycle can I do something like this.
The end goal for me is to apply to intertwined (one of them slightly delayed) animations to my paper-dialog on entry and exit like in (as he loves to be called :p ) "Bob Dod"'s polycast
If you don't know the answer, pointing me in a different direction also helps ;)
Since it seems my comment was helpful, here it is as an answer:
"Are you sure about this? I tried setting the animationConfig as this.$.modal.animationConfig = { ... } in this fiddle and everything worked just fine..."
I use polymer with angular 2 and this is the way I try to add animation:
if (dialog) {
dialog.animationConfig = {
'entry': {
name: 'transform-animation',
node: dialog,
transformFrom: 'translateY(100%)',
transformTo: 'translateY(0)'
},
'exit': {
name: 'transform-animation',
node: dialog,
transformFrom: 'translateY(0)',
transformTo: 'translateY(100%)'
}
};
dialog.open();
}
Related
I'm working with Angular v11.0.4 and TypeScript.
The idea is to show between one and eight progress spinner which represent different stock storages with different values.
The storages can be empty so I would like to show only the ones which actually have something inside, therefore I'm looking for someway to do that without repeating the same HTML code eight times.
This is the element I want to repeat.
<div class="col-sm">
<label><strong>Storage X:</strong></label>
<mat-progress-spinner
class="example-margin"
[color]="color"
[mode]="mode"
[value]="value">
</mat-progress-spinner>
</div>
If you have any idea or advise I'll appreciate your help. Thanks!
As described as a comment, the best way to not duplicate code, is to use *ngFor (Angular documation) and specify in your component what the values should be.
Here's a quick setup that should keep you moving.
Component.html
Add *ngFor="let progress of progressItems" to the surrounding div. It will now loop through all of the items that are in the component's defined array.
<div class="col-sm" *ngFor="let progress of progressItems">
<label><strong>Storage X:</strong></label>
<mat-progress-spinner class="example-margin" [color]="progress.color" [value]="progress.value" mode="determinate">
</mat-progress-spinner>
</div>
Component.ts
Define progressItems in your component, and give it values that belong to your needs (these are just random values for demonstration purposes only).
progressItems: progress[] = [
{
color: "primary",
value: 50
},
{
color: "accent",
value: 20
},
{
color: "primary",
value: 80
},
{
color: "warn",
value: 95
}
];
Since it's TypeScript and to make it more safe, I added a type of progress to it and declared that interface as well.
interface progress {
color: string;
value: number;
}
Two things to mention: do no not forget to import MatProgressSpinnerModule into your app's module and also add a Material theme to the CSS file, like below to see it actually working.
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
See this working example on StackBlitz for the overview of the steps we just did.
I am working with a Web Form (html) and a CSS file and I wanna know what do I need to write in the CSS to make an action on one class or id- affect an other class or id. For example: I have a
<p class="hh">
Hello!
</p>
(^^ this p tag's class is "hh")
And another one:
<p class="gb">
Goodbye!
</p>
(^^ this p tag's class is "gb")
I wanna write something in the CSS file so that whenever I click on whatever there is in the "hh" class, it will make something change in the "gb" class, so if I click on the text "Hello!" it will make the color of the text "Goodbye!" green. Please help me! I try to find out how to do it for a long long time...
Thank you!
This sounds more like you need a javascript solution. In general you are not really able to change something on a click event in CSS. Consider following solution:
const hh = document.getElementById("hh");
const gb = document.getElementById("gb");
hh.addEventListener("click", function() {
gb.style.color = "green";
});
gb.addEventListener("click", function() {
hh.style.color = "red";
});
<div id="hh">
Hello!
</div>
<div id="gb">
Goodbye!
</div>
A common practice for doing this is by using JavaScript, which is known as the programming language of the web. If you've never used JavaScript before it can be a little bit confusing but if you have experience in other general purpose programming languages such as Python or Java then it shouldn't take much time to pick up.
To do what you are asking, there are a few possible ways to do this. I will share what I believe to be the most simple although not the most robust. You can use JavaScript events to fire off certain functions when certain particular things happen to your elements. For example, you can modify your HTML like so:
<p class="hh" onclick="doSomething()">Hello!</p>
Then, either in a separate JavaScript file linked back to your html file or in the of your html file, you would define the doSomething() function:
function doSomething(){
document.getElementsByClassName("gb")...
}
The document.getElementsByClassName() function is one way to select HTML elements from a page and modify it via JavaScript, I suggest checking out the very good JavaScript tutorials on W3Schools for more and better ways to do this, but this is the general principal. You would then modify the HTML element any way you need to.
Hope this helps!
You need to do that using JavaScript. I have attached a example for that.
$(".one").on('click', function() {
$(".two").css('color', 'red');
})
.one{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="one"> Change below text to RED </p>
<p class="two"> Black text </p>
There is a way to use a :focus state to change the look of parents, but it wouldn't be possible to differentiate between which click caused the parent to focus.
Here's a simple example using JavaScript and jQuery.
var helloEls = document.querySelectorAll('#jsTest .hh');
var goodbyeEls = document.querySelectorAll('#jsTest .gb');
helloEls.forEach(function(elem) {
elem.addEventListener("click", function() {
goodbyeEls.forEach(function(el) {
if (el.className==='gb active'){
el.className = 'gb';
} else {
el.className = 'gb active';
}
});
});
});
var gbEls = $('#jqueryTest .gb');
$('#jqueryTest .hh').click(function(){
if (gbEls.hasClass('active')){
gbEls.removeClass('active');
} else {
gbEls.addClass('active');
}
});
.gb.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jsTest">
<p class="hh">
Hello!
</p>
<p class="gb">
Goodbye!
</p>
</div>
<div id="jqueryTest">
<p class="hh">
Hello!
</p>
<p class="gb">
Goodbye!
</p>
</div>
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>
My website was working fine before I added more code and features.
It may be because of the tags around the code.
I would like to know how to fix the buttons with numbers (the Cool Music button works fine).
My website is here
<script>
function btnClicked()
{
var audio = new Audio('http://a.tumblr.com/tumblr_lkfhhpM4M41qcmhugo1.mp3');
audio.playbackRate = 2.5;
audio.loop = true;
audio.play();
}
function changeImage1()
{
document.getElementById("image").src= "https://media0.giphy.com/media/sIIhZliB2McAo/200.gif";
}
function changeImage2()
{
document.getElementById("image").src= "https://www.clicktorelease.com/code/gif/1.gif";
}
function changeImage3()
{
document.getElementById("image").src= "http://www.kizoa.com/img/e8nZC.gif";
}
function changeImage4()
{
document.getElementById("image").src= "http://www.netanimations.net/flying_pig_by_rutabaga.gif";
}
</script>
<button onclick="btnClicked()">
Cool Music
</button>
<button onclick="changeImage1()">1</button>
<button onclick="changeImage2()">2</button>
<button onclick="changeImage3()">3</button>
<button onclick="changeImage4()">4</button>
This is not exactly an answer. But this could lead you to the answer.
You have document.getElementById("image").src="<some url>"; in your changeImage functions. But you don't have any DOM element with ID as image. Please check your console and you can find the error yourself.
You're trying to access an element called Image, but from looking through your code I can't find an element with the id of Image.
In the console it shows: "Uncaught TypeError: Cannot set property 'src' of null". This means that it couldn't find the DOM element you are referencing.
You are using document.getElementById("image") but looking at your source code, there is no element with the ID image.
I would like to know how to implement a simple LinkedIn HopScotch.
I tried to implement, but was unsuccessful in getting it done.
Below is my attempted implementation;
<h1 id="header">My First Hopscotch Tour</h1>
<div id="content">
<p>Content goes here...</p>
</div>
<button id="myBtn">Click Me</button>
<script>
var tour = {
id: "hello-hopscotch",
steps: [
{
title: "My Header",
content: "This is the header of my page.",
target: "header",
placement: "right"
},
]
};
$("#myBtn").click(function() {
hopscotch.startTour(tour);
});
</script>
Should I add a <div> with an id as hello-hopscotch as per tour object?
http://cdnjs.com/libraries/hopscotch is the source of my libraries; I've implemented hopscotch.min.css and hopscotch.min.js.
What am I doing wrong and how can I fix it?
Actually, you have set the placement to the "right" which is fine, but it is displaying the step off the screen. Because the step is displayed to the right of the element, which happens to be a block element. Switch it to bottom and you will see the item.
You can configure the placement per the documentation.
As I know from last day I've started with this plugin, hopscotch will not render if element that you targeted not found. If your target is an element with Id, you just need to set target with "#".