Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 11 months ago.
Improve this question
I have this snack bar, it works perfectly, but it displays under a headerBar.
Sometimes, I have to scroll up to see it. User will missed the important alert message, and don't know what is going on. I'm hoping to display it on top of all other components.
<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>
<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">
<template id="mainbox">
<v-container>
<v-row>
<v-col cols="12">
<v-card outlined>
<div class="text-overline mb-4">
{{ title }}
</div>
<!-- -------------------------------------------------------------------------- -->
<div class="py-10"></div>
<!-- -------------------------------------------------------------------------- -->
<!-- TEST CODE -->
<!-- --------- -->
<v-app-bar app color="green lighten-2" dark v-if="showAppBar">
<v-toolbar-title>App Bar </v-toolbar-title>
</v-app-bar>
<v-snackbar transition="true" timeout="2000" v-model="alert" absolute top :color="alertColor" outlined right>
<strong>
{{ alertMessage }}
</strong>
</v-snackbar>
<v-btn color="green lighten-1" #click="doSomething()">
Toggle App Bar
</v-btn>
<!-- -------------------------------------------------------------------------- -->
<div class="py-10"></div>
<!-- -------------------------------------------------------------------------- -->
<!-- END TEST CODE -->
<!-- --------- -->
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<v-app id="app">
<!-- -------------------------------------------------------------------------- -->
<!-- TITLE -->
<!-- ----- -->
<mainbox title="$CODE_08" />
<!-- -------------------------------------------------------------------------- -->
</v-app>
<script type="text/javascript">
const mainbox = Vue.component('mainbox', {
template: '#mainbox',
props: {
title: String
},
data() {
return {
showAppBar: true,
alert: true,
alertColor: 'green',
alertMessage: 'Success Message Test .... !!!! '
}
},
methods: {
doSomething() {
this.showAppBar = !this.showAppBar
this.alert = true,
this.alertColor = 'green',
this.alertMessage = 'test'
}
}
});
new Vue({
el: "#app",
vuetify: new Vuetify(),
components: {
mainbox
}
});
</script>
The v-snackbar by default has a fixed position with a z-index: 1000. With absolute property set, the z-index become 1. So, if there is no absolute need for the absolute prop, remove it and it should solve the problem.
Related
In a regular php web page I would include Vue.js via cdn and my component like this:
<!--Load Vue-->
<script src="https://unpkg.com/vue"></script>
<!--Load the web component polyfill-->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-loader.js"></script>
<script src="./my-custom-element.js"></script>
<!--Use my custom element-->
<my-custom-element msg="Hello..."></my-custom-element>
Is this somehow possible in a Wordpress site?
You just need to provide a div element with an id for Vue to use:
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<div id="app">
</div>
<script>
Vue.component('MyButton',{
template:'<button><slot></slot></button>'
})
new Vue({
el: '#app',
data : ()=>({
items : ['a','b','c'],
}),
template: `<div>
<my-button v-for="i in items" :key="i">{{i}}</my-button>
</div>`
})
</script>
https://jsfiddle.net/ellisdod/2yn7metj/
Description
My goal is to use the polymerfire element to send a request to a Firebase endpoint to detect if there is data there and, if so, its content.
Please include in your answer a working demo if possible and extra points if you point to some good documentation as the current documentation is insufficient.
Expected outcome
I expect the demo page to look like:
CLICK ME
ornithischia
foo bar baz
And when the CLICK ME button is pressed, the following to appear in the console:
"You clicked me!"
"triceratops"
"{appeared: -68000000, height: 3, length: 8, order: "ornithischia", vanished: -66000000, weight: 11000}"
Actual outcome
The the demo page looks like:
CLICK ME
foo bar baz
And when the CLICK ME button is pressed, the following actually appears in the console:
"You clicked me!"
"triceratops"
"{}"
Live Demo
http://jsbin.com/fasovaxonu/1/edit?html,console,output
<!doctype html>
<head>
<meta charset="utf-8">
<!-- Source: https://github.com/Download/polymer-cdn -->
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymerfire/polymerfire.html">
<link rel="import" href="paper-button/paper-button.html">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<firebase-app name="my-app"
auth-domain="dinosaur-facts.firebaseapp.com"
database-url="https://dinosaur-facts.firebaseio.com/"
>
</firebase-app>
<p>
<paper-button on-tap="_onTap">Click Me</paper-button>
</p>
<!---->
<firebase-query
app-name="my-app"
path="https://dinosaur-facts.firebaseio.com/dinosaurs"
data="{{dinosaurs}}"
>
</firebase-query>
<firebase-document
app-name="my-app"
path="https://dinosaur-facts.firebaseio.com/dinosaurs/triceratops"
data="{{triceratops}}"
>
</firebase-document>
[[triceratops.order]]
<br /><br />
<template is="dom-repeat" items="[[dinosaurs]]">
[[item.order]]
</template>
<template is="dom-repeat" items="[[test]]">
[[item]]
</template>
<!---->
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
dinosaurs: Array,
test: {
value: function() {
return ['foo', 'bar', 'baz'];
}
},
},
_onTap: function() {
console.log('You clicked me!');
console.log('triceratops', JSON.stringify(this.triceratops));
}
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
You first need to include <firebase-app> to initialize firebase.
<firebase-app
database-url="dinos-89701.firebaseio.com"
api-key="AIzaSyDLkCy3RNC5uFomEjVsLUehpzKFDrfAplU"
auth-domain="dinos-89701.firebaseio.com">
</firebase-app>
Get your api-key here:
https://console.firebase.google.com/project/YOUR_PROJECT/settings/general/
Demo:
http://jsbin.com/joxatuz/1/edit?html,console,output
I want to use the polymerfire element to fetch the data at https://dinosaur-facts.firebaseio.com/dinosaurs and display the data in a dom-repeat element.
What am I doing wrong? How do I do that correctly?
Here is the jsBin.
http://jsbin.com/zeyimotasa/1/edit?html,console,output
<!doctype html>
<head>
<meta charset="utf-8">
<!-- Source: https://github.com/Download/polymer-cdn -->
<base href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/">
<!--- ->
<base href="https://polygit.org/components/">
<!--- ->
Toggle below/above as backup when server is down
<!--- ->
<base href="https://polygit2.appspot.com/components/">
<!---->
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="polymerfire/polymerfire.html" rel="import">
<link href="paper-button/paper-button.html" rel="import">
</head>
<body>
<dom-module id="x-element">
<template>
<style></style>
<p>
<paper-button on-tap="_handleClick">Click Me</paper-button>
</p>
<!---->
<firebase-document
path="https://dinosaur-facts.firebaseio.com/dinosaurs"
data="{{dinosaurs}}"
>
</firebase-document>
<template is="dom-repeat" items="[[dinosaurs]]">
[[item.order]]
</template>
<template is="dom-repeat" items="[[test]]">
[[item]]
</template>
<!---->
</template>
<script>
(function(){
Polymer({
is: "x-element",
properties: {
dinosaurs: Array,
test: {
value: function() {
return ['foo', 'bar', 'baz'];
}
},
},
_handleClick: function() {
console.log('You clicked me!');
}
});
})();
</script>
</dom-module>
<x-element></x-element>
</body>
To get data in array/collection form, you need to use the <firebase-query> element, not <firebase-document>. You also need to initialize your application with <firebase-app>:
<firebase-app api-key="XXX" database-url="yyy" auth-domain="zzz"></firebase-app>
<firebase-query path="/dinosaurs" data="{{dinosaurs}}"></firebase-query>
<template is="dom-repeat" items="[[dinosaurs]]">
<!-- ... -->
</template>
You need a <firebase-app> to initialize the Firebase App, don't you?
All assemble users who uses layouts knows that "{{> body }}" marks the point of insertion of contents of any page who uses the layout. But is it possible to define multiple points of insertions, instead of tossing everything at where the {{> body }} is?
For instance, in my page I would like to define a specific piece of javascript, but I like that custom javascript to be at the very bottom of the page along with out javascript tags. If it only puts everything where the {{> body }} is, this is not possible, since the script will just be appended to the content.
In other words, it would be useful to have {{> script }} or even customizable tags marking different points of insertion, and in the page using the layout, these tags are specifically defined.
Above is my ideal use case, does anyone know if assemble supports anything like this?
#Xavier_Ex check out the assemble handlebars helper repo https://github.com/assemble/example-layout-helpers
And this particular pull request https://github.com/assemble/handlebars-helpers/pull/75
We added some layout helpers about a month ago that allow you to "extend" a layout and include different content sections. Notice that you'll have to include your layout as a partial in the assemble gruntfile setup for this to work properly...
assemble: {
options: {
flatten: true,
assets: 'docs/assets',
partials: ['src/includes/*.hbs', 'src/layouts/*.hbs'],
layout: false,
data: ['src/data/*.{json,yml}', 'package.json']
},
pages: {
src: 'src/*.hbs',
dest: 'docs/'
}
}
Layout (default.hbs)...
<!DOCTYPE html>
<html lang="en">
<head>
{{#block "head"}}
<meta charset="UTF-8">
<title>{{title}} | {{site.title}}</title>
<link rel="stylesheet" href="{{assets}}/{{stylesheet}}.css">
<link rel="stylesheet" href="{{assets}}/github.css">
{{/block}}
</head>
<body {{#is stylesheet "bootstrap"}}style="padding-top: 40px;"{{/is}}>
{{#block "header"}}
{{! Navbar
================================================== }}
{{> navbar }}
{{/block}}
{{! Subhead
================================================== }}
<header class="{{#is stylesheet "bootstrap"}}jumbotron {{/is}}{{#is stylesheet "assemble"}}masthead {{/is}}subhead">
<div class="container">
<div class="row">
<div class="col col-lg-12">
<h1> DOCS / {{#if title}}{{ uppercase title }}{{else}}{{ uppercase basename }}{{/if}} </h1>
</div>
</div>
</div>
</header>
{{! Page content
================================================== }}
{{#block "body"}}
<div class="container">
<div class="panel panel-docs">
{{> body }}
</div>
</div>
{{/block}}
{{#block "script"}}
<script src="{{assets}}/highlight.js"></script>
<script src="{{assets}}/holder.js"></script>
{{/block}}
</body>
</html>
Some page
{{#extend "default"}}
{{#content "head"}}
<link rel="stylesheet" href="assets/css/home.css" />
{{/content}}
{{#content "body"}}
<h2>Welcome Home</h2>
<ul>
{{#items}}
<li>{{.}}</li>
{{/items}}
</ul>
{{/content}}
{{#content "script"}}
<script src="assets/js/analytics.js"></script>
{{/content}}
{{/extend}}
Hope this helps.
I was implementing handlebar.js for my sample app.As per the handlebar.js documentation, it tried with the example as mentioned. But the values are loaded on the dom inside the script, but not visible on browser.
HTML
<body>
<h1>Handlebar</h1>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/handlebars.js"></script>
<script src="js/app.js"></script>
</body>
app.js
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"}
var html = template(context);
$("#entry-template").html(template(context));
When the browser gets loaded i am getting a blank screen, but while debugging via firebug able to find the values title and body
You're replacing the content of a <script> element:
$("#entry-template").html(template(context));
and #entry-template is a <script>:
<script id="entry-template" type="text/x-handlebars-template">
Browsers don't display the content of <script>s with that type. You want to put your filled in template into something like a <div> that will be displayed:
<h1>Handlebar</h1>
<div id="html-goes-here"></div>
and then:
$("#html-goes-here").html(template(context));