I can't get Ace syntax highlighter to work on my website.
HTML:
<textarea name="" id="upEditor" cols="30" rows="10"></textarea>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="monokai.css">
<link rel='stylesheet' href='style.css'>
<script src='jquery.js'></script>
<script src='ace.js'></script>
<script src='script.js'></script>
JS:
var editor = ace.edit("upEditor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
I have both mode-javascript.js and theme-monoki.js && monokai.css in the same directory.
the text editor do have font size and family as the correct example editor but there's no highlight.
please help -thanks
Looks like you aren't including the css links in the right place, so you don't get the css..
The css should be loaded in <head> and before </head>. while the textarea should be in the <body> section but above the scripts (should be last in body, but in this order.
Also I'm not sure the css monokai.css file is in the right place. you are calling it (and normalize.css and style.css from the same folder you have index.html but if as you mention in the question monokai.css is in the same folder as theme-monokai.js then the href should be ace/theme/monokai.css. check the other css files as well.
You should add type="text/javascript" to the script tag. older browsers may need this
Ace doesn't work with textarea, use pre tag instead
Related
For the program I'm writing I have a main navigation page where the user get landed after he / she log into the system.
On this screen I use 2 DIV's one div is for the navigation bar second one is used as an iFrame.
I'm using w3.css library to create the navigation bar but this actually mess up my CSS main CSS file when I load the target file in the second div. But it works fine if I use an iFrame which I really don't like to do.
If I could load my CSS file when the div loads the target link file the problem will be solved.
So my problem is how to load the CSS file in to the div when the external file loads.
This is my HTML:
<html>
<head>
<title>Time Sheet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="../../CSS/w3.css">
<link rel="stylesheet" type="text/css" href="../../CSS/main.css">
<!-- Java Scripts -->
<script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jScripts/navBar.js"></script>
<script language="JavaScript" type="text/javascript" src="../../jScripts/fileLoader.js"></script>
</head>
<body>
<div class="w3-bar w3-light-gray w3-card-4" style="z-index: 991">
Home
Link 1
Link 2
Link 3
</div>
<div id="My-container">
<!-- All pages load here -->
</div>
</body>
</html>
My NavBar JavaScript:
$(document).ready(function(){
$('#main').click(function () {
$('#My-container').load('listUser.php');
})
});
File loader JavaScript:
$(document).ready(function(){
if($("#my-container").size>0){
if (document.createStyleSheet){
document.createStyleSheet('../../CSS/main.css');
}
else {
$("head").append($("<link rel='stylesheet' href='../../CSS/main.css' type='text/css' media='screen' />"));
}
}
});
Above file loader function is not mine I found it on a site and tried to use it but when I do console throws an error saying "Size" is not a function. When I change it to length the error goes away but code doesn't work.
If any one asks why don't you just copy paste the nav bar to all the files my answer is I'm lazy.
Any way please show me the light.
It seems you want to check if that specific dom exist or not. For that you need to use length. Also the dom id seems to be My-container but not my-container.
You can try the following
if($("#My-container").length>0){
// rest of the code
}
I am having a problem with the jquery-ui datepicker widget. I have a simple html file where the widget displays and functions properly.
But when I try to incorporate the widget into my project the widget displays, and does function but the days of the month are way at the bottom:
Here is a simple html mockup file that has the same problem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/Chart.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script type="text/javascript" src="javascript/coffee-ratings.js"></script>
<script type="text/javascript" src="javascript/coffee-form.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<!-- <link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.css"/> -->
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css"/>
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/coffee.css"/>
<title>Create New Home Green Coffee Blend</title>
</head>
<body>
<table>
<tr><td>date: </td><td><input type="text" id="datepicker" name="date"/></td></tr>
</table>
</body>
</html>
since it works in the simple test file and not in the main project, it's not an OS thing. I've tried
doing a diff on the jquery-ui code in the test area and the main eclipse javascript folder, they are the same
adding and removing some of the different css files to see if that made a difference.
downloading a new copy of jquery-ui, copied to both folders, still got same behavior
The main app uses a new download of jquery, tried using the version that comes with jquery-ui was the same.
has to be some kind of css conflict. I did not see anything that grabbed me in firebug.
UPDATE
as I said in the comments, when I removed my main project css file, the datepicker rendered correctly. In playing around with my main css file, I was able to get the datepicker to display ok by commenting out the height in this block:
html, h1, div{
height: 100%;
padding: 0;
margin: 0;
}
but I need that in order to get the layout of the page to work.
any ideas?
thanks!
I have a web page in which I add a css file in head section using javascript code from the bootom of the page:
$(document).ready(function(){
var css=document.createElement('link');
css.type='text/css';
css.href='/css/user.css';
css.rel='stylesheet';
document.getElementsByTagName('head')[0].appendChild(css);
});
So I have a problem when user disable javascript then thic file can't be added to page so is there any way to include css file in that page using
<noscript>..Code..</noscript>
I can't add this file directly into my head Section.
So Is it possible to add css file into my html document without using
javascript?
with javascript:
$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: "/styles/yourcss.css"
}).appendTo("head");
http://api.jquery.com/jQuery/#jQuery2
without javascript:
<noscript>
<link rel="stylesheet" type="text/css" href="myStyles.css">
</noscript>
you can try this:
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
Yes it is possible to load css file without using javascipt
<head>
<link rel="stylesheet" type="text/css" href="user.css">
</head>
If you want to add css on the basis of some condition then use php if statement as shown below:
<?php if(YOUR CONDITION){ ?>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<?php } ?>
<noscript>
<link href="style.css" rel="stylesheet" type="text/css">
</noscript>
Now you can place this code in head section and it'll be called only when javascript is disabled.
Not sure how HTML compliant this is, but you can include a link within your body tag and still have it reference the class, given that you cannot edit the head section as stated.
Doing this did work for me, referencing the 'class1' from the style.css file
<head>
</head>
<body>
<div class="class1"></div>
<link href="style.css" rel="stylesheet" type="text/css">
</body>
Edit: in HTML 4.01 it is not acceptable, however using HTML5, this is perfectly acceptable markup. If referencing a larger CSS file this may cause some elements to be without style temporarily as the head section is intended to load such documents prior to displaying content, however if this is not a possibility, then this may be a solution for you.
I've been checking questions and answers here (and elsewhere) without getting a clear answer:
Are there any drawbacks with the following html to display an alternate image if javascript is disabled?
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"> </script>
<script src="path to local js script here"></script>
<noscript><img src="path to alt image here" /> </noscript>
<link rel="stylesheet" type="text/css" href="path to css here">
</head>
<body>
...
</body>
</html>
This appears to be working for me, but I've seen more complicated solutions suggested; Is there anything 'wrong' with making an alt image this way?
That is invalid HTML; you cannot put content in the <head>.
Move it to the <body> and it'll be fine.
Note that if the user has Javascript enabled, but a proxy is removing your scripts, that won't be displayed.
Instead, you can put a no-js class in your <html>, then add a bit of Javascript to the <head> that replaces it with a js class.
You can then write CSS rules that apply only if Javascript is actually working.
This is my code. It turns my text box into a date picker.
<script type="text/javascript" src="{{MEDIA_URL}}template/js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="{{MEDIA_URL}}template/js/jquery-ui-all.min.js"></script>
<script type="text/javascript">
$(function() {
$("#start_date").datepicker();
$("#end_date").datepicker();
});
</script>
Where do I put the ui-lightness folder? It contains the images and js of the theme. Right now, the images and CSS are blank on my page.
You can place it anywhere you like, but you need to link the the CSS file to have it affect your page.
You need the default CSS
<link type="text/css" rel="stylesheet" href="Content/jquery-ui.css" %>" />
And the control specific files as well, for instance the dialog would need.
<link type="text/css" rel="stylesheet" href="Content/ui.dialog.css" %>" />