I am trying to get polymer installed and running my mac. I have downloaded all the files needed but when I use insert a test file I get an error saying that the "polymer field is not recognized". Can someone help please.Thanks.
<!DOCTYPE html>
<html>
<head>
<!-- Load platform.js for polyfill support. -->
<script src="bower_components/bower_components/platform/platform.js"></script>
<!-- import a custom element. -->
<link rel="import" href="bower_components/bower_components/polymer-ui-field/polymer-ui-field.html">
<link rel="import" href="bower_components/bower_components/polymer-ui-icon/polymer-ui-icon.html">
<!-- add a wee bit of styling. -->
<style>
html {
font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
font-size: 14px;
}
polymer-ui-field {
border: 1px solid #000;
margin: 10px;
height: 40px;
}
</style>
</head>
<body>
<polymer-ui-field>
<polymer-ui-icon icon="favorite"></polymer-ui-icon>
<input placeholder="This is a simple Polymer test using the polymer-ui-field and the polymer-ui-icon." flex>
</polymer-ui-field>
</body>
</html>
Your imports and script tag have bower_components doubled up. If this does not accurately reflect your file structure, you should remove the extra bower_components. If this does reflect your file structure, you should un-nest the second bower_components folder, as this may be interfering with relative file path references in the imported components.
Related
I created a processing JS code in an external IDE from my HTML and I want to put it on my HTML page. I went through many tutorials but I could not figure out why I have the following problem.
My 600x600 project should look like this:
Working
When I embed it on my website it looks like this:
Not Working
This is my HTML:
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="https://mhs-robotics.com/style/point-counter.css">
<script type="text/javascript" src="https://mhs-robotics.com/java/processing.js"></script>
</head>
<body>
<center>
<canvas id="can" width="10px" height="10px" data-processing-sources="https://mhs-robotics.com/java/counter.pde"></canvas>
</center>
</body>
This is my CSS:
#can {
width: 600px;
hight: 600px;
margin: auto;
border: 5px solid black;
}
I fixed it
I added:
void setup() {
size(600, 600);
}
I found myself with a problem. When I was using css I had no problem setting the properties of the html elements with css, but I'm now trying to use scss and, for some reason that I'm unaware of, I can´t change the properties using the scss variables.
I'd be thankful if anyone could give me a solution for this issue.
HTML
<html>
<head>
</head>
<body>
<div id="example"></div>
</body>
</html>
SCSS
$color-1 : #202020;
#example {
background-color: $color-1;
width: 200px;
height: 100px;
}
I've run npm run watch and received the message
This dependency was not found:
* in ./resources/assets/js/app.js
To install it, you can run: npm install --save
So I ran npm install --save but still get the same message.
From my understanding, I need npm run or npm run watch to load the Vue files in Laravel.
For example, in 'resources/assets/js/components/Example.vue' file, I made edits to it but when I load up 'resources/views/welcome.blade.php' file, which I have as follows, the update from Example.vue file does not load.
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#if (Auth::check())
Home
#else
Login
Register
#endif
</div>
#endif
<div id="app">
<example></example>
</div>
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<div class="links">
Documentation
Laracasts
News
Forge
GitHub
</div>
</div>
</div>
<script src='js/app.js'></script>
</body>
</html>
(I only added in the script src link and the div with the 'app' id and the 'example' component)
What must I do to load the changes made to the Example.vue file? After this, I need to create new components in Vue.js in Laravel as well for my application.
You need to run :
npm install
then :
npm run dev
Eventually I figured it out what happens. I don't know why exactly but I have got the answer:
You are trying to include a vue component in a non-layout page like welcome.blade.php. Try wrapping this single page in a layout and add your component, in this case <example></example>. Be sure you are linking to your app.js.
Updated:
This is what happens exactly: Answer.
I have read this highly useful post which unfortunately did not resolve my question: How may I use code in the HTA to scale down (shrink) the entire contents of the window, text and boxes both, in an HTA file? I'm using IE11 (or, it uses me), and I need to Ctrl-Scroll to downsize the window content every time I open it.
Now, I added meta http-equiv="x-ua-compatible" content="ie=edge" as suggested in comments, but now that breaks the placement of the file at position 1920,0 . Is there a solution which will allow resizing AND allow me to place the window where I need it?
<html><title>A Form </title>
<meta http-equiv="x-ua-compatible" content="ie=edge" />.
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#365ebf', gradientType='0');">
<head>
<script language="JavaScript">window.resizeTo(320,1080);</script>
<style type="text/css">
body {
transform: scale(0.9);
height: 90%;
background-color: #EFEFDC;
font-family: Arial Narrow;
font-size: 12px;
color: #343421;
margin: 2px;
filter: none !important;
}
b {
font-size: 16px;
padding: 1en;
}
</style>
<SCRIPT Language="VBScript">
Sub Window_Onload
window.moveTo 1920, 0
End Sub
</SCRIPT>
I reread your question and your comments and I think I understand your requirements better. To programmatically increase the zoom level of all your controls use something similar to:
<script>
document.body.style.zoom = "200%"
</script>
Feel free to add this code anywhere, I tried it at the end of the script body and it worked for me:
<html>
<head>
<title>A Form</title>
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
html {
height: 100%;
}
body {
-ms-zoom: 0.50;
background-image: linear-gradient(135deg, #C0CFE2, #365ebf);
}
</style>
</head>
<body>
What is your name?<p>
<input id="name" value="Luke"></input><p>
<input type="button" value="CLICK ME" onclick="alert('Obi-Wan says: Use the Force, ' + document.getElementById('name').value + '.')"><p>
</body>
<script>
window.moveTo(100, 300);
window.resizeTo(500, 300);
</script>
<script>
document.body.style.zoom = "200%"
</script>
</html>
I'm not getting rounded corners in IE8 mode within IE11.
I've tried both relative and absolute paths, and neither work.
The PIE.htc file is in the same folder as the html file. I'm running on Jetty and don't have a .htaccess file. The PIE.htc file can be loaded without any problem using http://localhost:8383/various_forms2_less/PIE.htc
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
span.command_link_buttoned {
background-color: #96AFCF;
display: block;
width: 130px;
height:30px;
position:relative;
border-radius: 5px;
behavior: url(PIE.htc);
/*behavior: url(http://localhost:8383/various_forms2_less/PIE.htc);*/
}
</style>
</head>
<body>
<span class="command_link_buttoned">
Button
</span>
</body>
</html>