I'm trying to get started with Google's Polymer Paper Elements 1.0 by displaying a simple message dialog:
<html>
<head>
<script src="scripts/polymer/webcomponentsjs/webcomponents.min.js"></script>
</head>
<body>
<paper-dialog opened="true">Dialog test</paper-dialog>
</body>
</html>
The words "Dialog test" appear on the page, but there's no dialog. Does anyone know what I'm missing?
You are missing a reference to the paper-dialog element definition.
<html>
<head>
<title>Example</title>
<script src="path/to/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="path/to/paper-dialog/paper-dialog.html" />
</head>
<body>
<paper-dialog opened="true">Dialog test</paper-dialog>
</body>
</html>
Including the proper import (<link rel="import" href="path/to/paper-dialog/paper-dialog.html" />) will allow the element to be recognized by the browser and provide the functionality you expect including behavior and style.
For an interactive tutorial on using web components you can check out the tutorial on component.kitchen.
Related
I am trying to use particle-js for my website. My code is quite simple, since it is the very first thing I tried to implement.
My project consists of 4 files: code.html, particles-config.json, particles.js and style.css. With the last one still being empty.
The code.html file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="particles.js"></script>
</head>
<body>
<header>
<p>Test 1</p>
<div id="particle-div"></div>
<button id="particle-button">Start</button>
<p>Test 2</p>
<script>
$("#particle-button").click(function(){
particlesJS.load('particle-div', 'particles-config.json')
});
</script>
</header>
</body>
</html>
And the config file is just with the content from the one provided on this github under particle.json. And the particle.js is the exact same file from the github.
However when I run the code, I dont see the particles. It just opens up an empty white space between Test 1 and test2. I amlso not getting any error messages in the browser console (I use Firefox).
Could anyone tell me what am I doing wrong?
EDIT:
Here is a screen shot of the network tab:
I'm just starting on JavaScript and I'm following along this online course where it claims that if I insert <script> tags at the bottom of the page just before the <body> closing tag I should be able to see the website render first followed by the JavaScript code, but it is actually executing the other way around, the JavaScript code executes first and it's not until after I click "OK" on the message popping up that I'm able to see the website fully rendered.
Here is the code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script src="scripts.js"></script>
</body>
</html>
scripts.js
alert("This text should appear after page is fully rendered");
I honestly don't know if this is how the code is supposed to work. Do alert(); scripts always execute first? Maybe the browser has something to do with it? (I'm using the latest version of Chrome). Anyhow, a well explained answer of what's happening would be much appreciated.
Personally, I would do something more like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script>
window.onload = function() {
alert('This should now load after the page.');
}
</script>
</body>
</html>
The window.onload = fun... says "wait until the page has finished loading". Depending on what the browsers decide to (with images, layout, plugins etc.), this may or may not work for you.
Or even something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>JavaScript Basics</title>
</head>
<body>
<div class="container">
<h1>Where to place your JavaScript code.</h1>
</div>
<script async defer src="scripts.js"></script>
</body>
</html>
With this example, the async attribute means "grab this script file in the background" and the defer means "wait until the page has loaded to execute it".
Sorry for the basic question. I'm new to coding and I've already googled "how to run code from node modules" "how to use code from node modules" etc. for a few hours without any real progress.
Basically, I want to create a editable div with the text editor (https://github.com/yabwe/medium-editor) and I already manually downloaded and followed the directions to inserting the code inside the editor (can be found on the GitHub page).
Here is my code for the editable div in its entirety:
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<link rel="stylesheet" type="text/css" href="post.css">
<script src="other.js"></script>
<link rel="stylesheet" href="css/medium-editor.css">
<link rel="stylesheet" href="css/themes/default.css">
<script src="js/medium-editor.js"></script>
<div contenteditable="true" class= ".editable" id="posteditor"> <p> test words</p></div>
</body>
Javascript (other.js -referenced in html code):
var elements = document.querySelectorAll('.editable'),
editor = new MediumEditor('.editable');
I also copy and pasted the files from the downloaded file into a new file folder holding the HTML/CSS/Javascript code for the editable div (not sure if this even makes a difference).
Thank you so much for helping a new coder.
EDIT: Figured it out! My paths were in the wrong order and I wasn't referencing some of the necessary code in the
You need some simple html css js basics knowledge to start dealing with such code
here are some tips:
*put link tag in the head
*put script tags in before the ending of the body
try now to run this code and double tap the word you want to edit
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<div class="editable"><h4>hi I am editable</h4></div>
<script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
<script>var editor = new MediumEditor('.editable');</script>
</body>
</html>
I am not sure what I am doing wrong but in my application when I try to do something like
$('#root').text();
I get
VM269:1 Uncaught TypeError: Cannot read property 'val' of null(…)
I have no clue why as I am referencing jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="UTF-8">
<title>Document</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--materialize does not understand jquery if I use it as import-->
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
I am using reactjs but I don't think that should be a problem and the fact that I have no problems with firebug in firefox when I do the same command.
Edit
My bad $('#test') is something rendered into "root" div but same issue. So I just updated my query to do $('#root').text()
but doing $('#root') works it finds the element and like I said in firebug everything works.
You are trying to get the value from a tag with id='test' and you don't have one in your HTMl.
If you have used $('#root').val() it'd work.
Helpful selector link
I believe you want the value of id="test". However, I do not see id="test" on your html file that you have included. Furthermore, you can also try $('#test').text() that will grab html text.
Supposed I have a html page like this:
Before:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="http://www.domain.com/css1.css">
</head>
<body>
<style type="text/css">
.test1{clear:both}
.test2{width:110px}
...
</style>
</body>
</html>
After:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="http://www.domain.com/css1.css">
<style type="text/css">
.test1{clear:both}
.test2{width:110px}
...
</style>
</head>
<body>
</body>
</html>
Just curious if it could be done via Regex replacement?
Thanks a lot.
PS: Or did anybody know how google pagespeed apache2 extension does move the css to head?
You could write a little application that parses through the html file, filters the style tags out, deletes them from the tags and creates a style tag in the head and saves the html file again.
But lets face it, when we are talking here about one or two html files, then you will spend much more time on developing that app than just clean up your mess by hand.
I am working on same task in my one project, I have made a javascript regex which selects all inline styles, you can use this in your project.
/<(style)[^>]*?>(?:.|\n)*?</\s*\1\s*>/igm
You can test this regex at: http://www.regexr.com