Very frustrating, not sure what's going on. I can't find exactly what I need to import to get the paper-dropdown-menu menu to pop up like in the demo -- I've imported the same components that are in the demo, plus some, but to no avail. I've taken it in an entirely separate file and it's not working still. Any ideas?
<paper-dropdown-menu label="versions">
<paper-dropdown layered class="dropdown">
<core-menu class="menu">
<paper-item>version 1</paper-item>
<paper-item>version 2</paper-item>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
Can anyone tell me or point me to the page which states exactly which components I need to import? I can't seem to find it anywhere.. Any help would be appreciated! Thanks!
edit just ran the demo file on my appengine test server and it's not showing the overlayed menu either.. hmmmmm
edit my import statements:
<script type="text/javascript" href="/bower_components/webcomponentsjs/webcomponents.js'.
</script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-elements/paper-elements.html">
<link rel="import" href="bower_components/core-elements/core-elements.html">
edit I've tried re-downloading the 5.1 paper-dropdown-menu folder directly from Git, no dice. The demo.htmlincluded also doesn't run when I ran it on my test server
edit After importing the paper-dropdown-menu.html file separately from the paper-elements.html file the top-tier paper-dropdown appears to be working. I guess that the paper-dropdown-menu isn't included in the latest version of paper-elements.html? I'm back to my original issue of my overlay still not working, however. I'm not sure what element I need to import in order to get this to work. I was under the impression that it used the paper-dropdown-transition but I'm not sure, I can't seem to find it in the documentation anywhere. Halp!
I've solved my issue! I needed to have both of these imported in order to get it to appear!
<link rel="import" href="bower_components/web-animations-next/web-animations.html">
<link rel="import" href="bower_components/web-animations-js/web-animations.html">
I only had the web-animations-next imported previously. I wish I knew where this stuff was documented if anyone wants to post a link still!
Pretty sure paper item, not sure though. Give it a try.
Or, better yet, just import paper elements and get everything.
Related
Im trying to style a page but in the chrome dev tools there is an scss file that i dont have anywhere local.
When I hover the style below, I get this link :
https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/scss/_reboot.scss
Im trying to get it to connect to the css file but the normal
<link href="css/style.css" rel="stylesheet">
doesn't work.
Thank for your help
Let me try to help you.
From the docs that i read, to link the external resource element to our html was similar with your code.
<link href="/media/examples/link-element-example.css" rel="stylesheet">
But, i think we have to make sure that your href was correct to the css file that you need.
It was really important. Because if we didn't input the correct relative path, the css file will never be can use in the project.
Thank you
I was trying to see the source code of this website so that I could experiment with it.
https://supermedium.com/superframe/components/audioanalyser/examples/volume/
So, using the 'view page source' option (right click), I copy-pasted the code into https://glitch.com/. Unfortunately, it didn't do any of the animation or audio! Could anyone please help? I have a project coming up soon and it would be really helpful. Thank you!
copy-pasting will not work mainly because of these lines:
<head>
...
<script src="../build.js"></script>
<script src="../components/audioanalyser-volume-scale.js"></script>
...
</head>
those are relative paths that won't be pointing to the correct resources. You would need to recreate the folder structure and include those files or rewrite it so it is accessible
Firstly, I could not find any answers what would solve this (hope simple) issue. So I've just moved the whole website, all its pages and stylesheets to a new directory through my host and now it just cannot load any style for itself. I guess it's about a little problem but already working to find that piece but couldn't get at all.
So to simplify it, in cPanel's File Manager I catched all files and moved to an addon domain like below:
/www/public_html <--- This was the main directory but I moved it to
/www/public_html/addondomainname's directory
The above location is now the current for all pages like index, account, dashboard etc. and all of them are .php files.
Also, I call css sheets to individual pages like
<link rel="stylesheet" href="css/styles.css">
Note that too, there is no full-named links on single pages, I use all my links as they are in-page like so:
Help
Would be just
Help // Or without the DOT and SLASH
And finally I use BS 3 and Font Awesome as sources of my website. I could say it relies on Bootstrap mainly and yes, I included all necessity of script and js implementation within the .
Full code of BS and FA in index.php:
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I tried linking the css like
<link rel="stylesheet" href="mysite.com/css/styles.css/>
But both, with or without the mysite.com href did not work. And yes, the addon domain's directory structured like the root (after public_html/addon) contains index.php, dashboard.php, otherpage.php etc. and folder called css holds all sheets what I would like to use.
Any suggestions would be appreciated guys!
Can you try loading the CSS in the following methods:
<link rel="stylesheet" href="http://www.example.com/css/styles.css" />
Or try:
<link rel="stylesheet" href="/css/styles.css" />
When loading from your addon domain e.g. http://www.example.com
I'm so sorry to everybody who wasted his/her time trying to help me. The issue occured by my stupidity and everything was just fine. What I did is like I ensured that preventing hotlinking my files e.g. jpg, gif and such as CSS does really work. I've just removed the extension of css to be prevented from hotlinking and it works like a charm. Really, sometimes people do not know what are they doing and again I'm sorry who answered my question!
PS: We should log ourselves what are we doing while remaking any of the projects, stuff or materials.. :)
Best wishes,
Christian
I was under the impression that if I vulcanized my index.html, it would extract and concatenate my html imports. Here's a snippet from my index:
<!doctype html>
<html unresolved>
<head>
<base href="/">
<script src="/assets/traceur-runtime.js"></script>
<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="/bower_components/core-icon/core-icon.html">
<link rel="import" href="/bower_components/core-item/core-item.html">
<link rel="import" href="/bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="/bower_components/core-toolbar/core-toolbar.html">
and so forth. I am including just the polymer bits I need. I don't have any self-defined custom elements (I'm just assembling a UI from core- and paper- components).
I was under the impression that some combination of --inline and other flags would result in a very long index.html that no longer directly imported the bower_component files. I could be wrong about that, I suppose, but that's my goal. It's not that big of a deal; I am not even sure that the correct answer here is making my index.html huge in order to avoid 20 extra loads, especially with caching and all that. Still, there's no way to test this without having an inline version to test.
Edit:
I'm running vulcanize in the root of my built dist directory:
dist/
index.html
bower_components/
and it runs, I've tried with --inline and --csp and both, and it basically just spits index.html back out into vulcanized.html. If I do --strip, it strips whitespace, but that's it.
I have never tried to Vulcanize my Index.html, I always have an elements.html file which has all my imports and I finally import the elements.html in my Main file.
Whenever I try to Vulcanize my elements.html file it works as expected by concatenating all the Elements' definitions into one file for decreasing the number of http requests the browser has to make.
The problem might be that you are using the very latest version of Volcan which has been reworked on and the --csp feature has been moved to a standalone cli app by itself and the --strip has also be moved to the html-minifier app.
You might want to check that out.
https://github.com/PolymerLabs/crisper
https://github.com/kangax/html-minifier
Aha, I figured it out- I was using href="/bower_components/core-icon/core-icon.html" when I should have been using href="bower_components/core-icon/core-icon.html".
Note the lack of the leading slash. Now I just need to figure out how to wire it up so it can find bower_components properly.
I have created a core-scaffold based element in the Polymer Designer.
Using the Polymer Generator with Yeoman, I created a basic app and it displayed the page as expected. https://github.com/yeoman/generator-polymer/
I want to use the output from the designer in my app. I renamed designer.html (from gist) to dashboard.html, changed
<polymer-element name="my-element"> to
<polymer-element name="dashboard">
saved the designer output as: app/elements/dashboard/dashboard.html
changed all of the imports to the correct path, e.g.
<link rel="import" href="../core-scaffold/core-scaffold.html"> to
<link rel="import" href="../../bower_components/core-scaffold/core-scaffold.html">
when I add
<link rel="import" href="dashboard/dashboard.html">
to elements.html and the page reloads, it is now blank. This is without changing anything in index.html
Hints as to what else needs to be changed in the designer output for it to be imported to this app?
The problem is that all Polymer elements MUST be hyphenated.