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>
Related
Basic html page. Just starting and downloading packages. Checking if my Semantic UI setup is properly installed, but when I open up my index.html page and check the console I get 'GET file:///semantic/dist/semantic.min.css net::ERR_FILE_NOT_FOUND', along with 'GET file:///semantic/dist/semantic.min.js net::ERR_FILE_NOT_FOUND'. Which is strange!
These are my script tags within my head tag inside my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 boilerplate – all you really need…</title>
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/semantic/dist/semantic.min.css"
/>
<script src="/semantic/dist/semantic.min.js"></script>
</head>
<body id="home">
<h1>HTML5 boilerplate</h1>
</body>
</html>
I can click on the relative paths in both tags and it will take me to the actual file in my editor.
My current folder structure is:
Semantic
dist
semantic.min.css
semantic.min.js
index.html
What gives?
Try ./semantic/dist/semantic.min.css
I'm having problems in using mathquill on my website.
I'm new to this.
I'm stuck in this part
<link rel="stylesheet" type="text/css" href="/path/to/mathquill.css">`
<script src="/path/to/mathquill.min.js"></script>
I dont know what to put on the hrefs because I'm not seeing those files from mathquill file i got from github..
i downloaded the latest mathquill files and its inside htdocs(xampp) or www(wamp) together with my index.php.
Do i have to place my index.php inside mqthquill-0.10.1 folder?
Here is my
<link rel="stylesheet" href="/path/to/mathquill.css"/>
<script src="jquery-3.2.1.min.js"></script>
<script src="/path/to/mathquill.js"></script>
I appreciate if someone could give me the steps on how to use mathquill.
thanks in advance
Option 1
You can either download the mathquill.css and mathquill.js files from github and use them from your directory.
If you have your folder (directory) structure as below:
appFolder
.. scripts
.... mathquill.js
.... index.js
.. css
.... mathquill.css
myPage.html
Here's how you would reference the CSS and JS files:
<link rel="stylesheet" type="text/css" href="/css/mathquill.css">`
<script src="/scripts/mathquill.min.js"></script>
An easy way to check if your paths are correct is to put the entire URL in the browser's address bar. For example, if you are browsing the page as:
www.mydomain.com/mypage.html
The links to css and js files in the example folder structure I mentioned above would be:
www.mydomain.com/scripts/mathquill.js
www.mydomain.com/css/mathquill.css
Option 2
You could use the CDN to get the JS and CSS files on your page. Just copy the below two lines on to your html page, and you are ready to go.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.css">`
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.js" type="text/javascript"></script>
<!-- COPY AND PAST THIS CODE HTML IN SOME EDITOR FOR BETTER VISUALIZATION, AFTER RUN-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Run Mathquill</title>
<!-- YOU NEED mathquill.css , jquery and mathquill.js SEARCH AND PICK IT SOMEWHERE, SEARCH ON THE WEB IF THIS DOWN NOT RUN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.js"></script>
<!-- INFORM THE LATEST AVERSION INTERFACE WITH THIS CODE -->
<script>
var MQ = MathQuill.getInterface(2);
</script>
</head>
<body>
<!--EXAMPLE COMMON TEXT TRANSFORMED WITH MATHQUILL -->
<p>Solve <span id="problem">f(x) = ax^2 + bx + c + = 0</span>.</p>
<script>
var problemSpan = document.getElementById('problem');
MQ.StaticMath(problemSpan);
</script>
<!-- EXAMPLE TO CREATE AN EDITABLE MATH FIELD -->
<p><span id="answer">x=</span></p>
<script>
var answerSpan = document.getElementById('answer');
var answerMathField = MQ.MathField(answerSpan, {
handlers: {
edit: function() {
var enteredMath = answerMathField.latex(); // Get entered math in LaTeX format
checkAnswer(enteredMath);
}
}
});
</script>
</body>
</html>
What I'm trying to do is make a stock .html file with the nav, footer, basically anything I'd use on multiple pages and want to change easily. This is a small 20ish page site I'm working on and I really don't want to rely on php or something.
I've looked at other responses on here and followed them precisely but they don't seem to help me at all, although it's probably something I'm overlooking.
<!doctype html>
<html>
<head>
<link href='files/stylesheet.css' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
</head>
<body>
<!--Navigation-->
<div id='navigation'></div>
<script>$("#navigation").load("templete.html #nav");</script>
</body>
</html>
Thanks in advance! -Shy♥
Is it cust a typo templete.html (third line from below). Otherwis, take a look at the jQuery docs and the restrictions of the functions (http://api.jquery.com/load/).
I am having trouble linking a javascript file to a dynamic website i made through php. My file structure is simply just:
index.php, css folder (which is working correctly), jscript folder (does
not work) and a pages folder (has all my pages)
My pages are simple just
header.php, registrationContent.php and footer.php
My index just includes all 3 php and it works perfectly fine. My problem is no matter what I do, whether inline, or soft coded javascripting it does not work. I am certain my syntax in the javascript is fine, its just the linking.
My header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Safe Drive Website</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/regStyle.css" rel="stylesheet" type="text/css" />
<script src="jscript/javascripts.js" type="text/javascript"></script>
</head>
<body>
<div class="topBar" id="topBar"><input type="Submit" value="Contact Us" class="topNavButton"/></div>
<div id="bannerText"><h1 class="mainHeader">SafeDrive</h1><h2 class="subHeader">Developer's Tool</h2></div>
I close the tags in the footer.php
Javascript files are included directly in your html page.
use the following line in your html page:
<html>
<head>
<script type="text/javascript" src="path/to/your/javascript/file.js"></script>
</head>
...
This is probably uncommon, but I thought of answering my own question because I found a solution, so that anyone else having the same problem could try mine.
Basically, it was loaded, the only problem was that the javascript functions weren't loaded and so to do that, i had to add:
window.onload = myJscriptFunction();
on any tag (body, footer etc. refer to w3schools for that information)
I do hope this helps anyone facing the same problem ^_^
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