I am very new to Javascript (ok, I've done 'Hello World' alright =]) and my other web programming skills are very limited.
I am trying to implement jmHighlight into one of my already created webpages but found I can't even get it to work in a clean page of its own. I've obviously made a very rudimentary mistake somewhere but can't figure out where so I'm hoping someone can help.
Here's what I've tried which doesn't work:
<!DOCTYPE html>
<html>
<head>
<style>
.context {
font-size:14px;
font-family:verdana;
}
span.highlight {
background-color:#000000;
font-color:#ffffff;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="jquery.jmHighlight.min.js"></script>
</head>
<body>
<p class="context">some text</p>
<input type="button" value="Try it" onclick="myFunc()">
<script>
function myFunc(){
jQuery(".context").jmHighlight("some");
alert("Done!");
}
</script>
</body>
</html>
The alert works so I think the basic code is ok, I think its more the syntax of the plugin I've gotten wrong. The author shows his work here: here on GitHub and altered his syntax in section 2 for a fixed keyword ('some') instead of using a text box for now. The include is in the same location as my page, but doesn't show in the debugger when I preview the page as loaded...
I have also tried lifting the code from his basic example Fiddle here but still can't get it to work. I've also had a look at other jmHighlight questions here on SO, but can't manipulate them to work for me.
If someone could kindly point me in the right direction, or supply me with a very simple but complete working example that I can dissect myself to figure out where I went wrong, I'd be very appreciative!
This code is working in Chrome, I have tried it and here is a fiddle which also shows it is working.
The only thing I think may not be right is your path to jmHighlight or the version of jmHighlight.
jmHighlight was also renamed to jquery.mark. Here is a rawgit URL pointing to the .min.js:
https://rawgit.com/julmot/jquery.mark/master/dist/jquery.mark.min.js
Related
I have tried using JavaScript and jQuery with my HTML file, but it is not working properly. Here is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {white-space: nowrap;}
h1 {white-space: nowrap;}
</style>
<script src="jquery.js"type="text/javascript"></script>
<title>SolicitueCotizaciones</title>
</head>
<body>
<script>
function myFunction() {
$("input[type='button'][value='Agregar Pieza']").before("<p>new text</p>")};
</script>
<br/> Descripcion:
<br/>
<textarea id="improve" rows="3" cols="20"></textarea>
</p>
<div class="divider"/>
<div style="align-items:left"></div>
<p>
</p>
<p>
<input type="button" value="+Agregar Pieza" onclick="myFunction()">
</p>
</body>
</html>
I have also tried copying code from tutorial websites that work properly but when I run them in my computer, they stop working. Can anyone help me figure out what's happening and what I should do to solve it?
EDIT: What I'm trying to achieve is to add the new text above the "+agregar pieza" button and below the text input box labeled "descripcion" once you press the "+agregar pieza" button, but this never happens. I have tried the corrections that were posted in the comments, and I edited the code above to include them. However, as of this edit, it is still not working at all. I would like to use the .before command from jquery to achieve the desired result, but if there is a better way to do this, I would like to know.
First, jQuery is not native to your browser, you need to load it before using it. The tutorials should help you here.
Second, your code is not correct, it should be something closer to this:
$("input[type='button'][value='Agregar Pieza']").before("<p>new text</p>");
Live demo: http://jsfiddle.net/wKhap/
It isn't working because you need to import jQuery before using it. In order to do so, you need to add this tag:
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
Add this before any other references to scripts that use jQuery.
I know, this might get pretty damn complicated, maybe almost impossible, but maybe someone of you knows the way:
Im currently writing an editor for a self-created, plainsimple language (5 keywords, WUHA!) which works pretty well already. But that's not the point here, now I want to create an editor for it with syntax highlighting. Yes, I want it online if possible, so my only chance is JavaScript/jQuery.
I dont have much code yet, this is all I got so far:
<!DOCTYPE html>
<html>
<head>
<title>Kevcode Editor</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(){
var keywords = ["KEYWORD2", "KEYWORD3", "KEYWORD4"];
$("#editor").keydown(function(e) {
if(e.keyCode == 13) {
//GET THE LINE HERE
//mark keywords here
}
});
});
</script>
</head>
<body style="background-color: grey;">
<label for="editor"><textarea id="editor" style="width: 1200px; height: 800px;"></textarea></label>
</body>
</html>
So my plan was to create a textarea and if I press Enter (which is represented by the keycode 13), ill run a script which checks every line and recolors the keywords. But then I thought that it would be a huge waste of resources to check the whole script. Of course the scripts wont be too long with 5 keywords, but if I add more and more, it would be horrible to check the whole code. So i thought that just checking the current line where I changed something would save me a lot of time. But how can I implement such a logic? How can I tell jQuery in which line the cursor currently is?
Sorry if I explained something unclear, if you got any questions please ask and I will give as much information as possible.
Oh, and don't give me finished solutions please. Ill do this for training purposes.
This is will help you to find cursor position in textarea.
javascript:
var cursorPosition = $('#myTextarea').prop("selectionStart");
Html:
<textarea id="myTextarea" rows="40" cols="50"></textarea>
try this:
<textarea onkeyup="getLineNumber(this, document.getElementById('lineNo'));" onmouseup="this.onkeyup();"></textarea>
<div id="lineNo"></div>
<script>
function getLineNumber(textarea, indicator) {
indicator.innerHTML = textarea.value.substr(0, textarea.selectionStart).split("\n").length;
}
</script>
EDIT:[Honestly this works fine you can read my edit comment below.]
So I am very new to JavaScript. This book I have tells me that I can write the script code in another file that has a .js extension. What it doesn't tell me is what should be in that .js extension.
<html>
<head>
<title>Title of Document</title>
<script src="path/to/file/fileName.js"></script>
</head>
<body>
The content of
your page goes here.
</body>
</html>
Lets say I wanted to make an alert message in the java script file. Inside the "fileName.js" would all I write be:
alert("This is an alert box");
and then save it and call it quits? Cause that is what I have so far and nothing doing.
EDIT:
Ok I want to add this in for anyone in trouble like I was. Turns out, this works perfectly. The comments below are a great help for further information. But the thing I did not realize was that on my Mac I needed to start the path to file at /Users. I feel dumb but at least I figured it out. Thanks all for your help.
Use " instead of ”:
<script src="path/to/file/fileName.js"></script>
^ ^
Generally your js files will have objects and Methods that are called/used from you main page.
So you html wiil look like :
<html>
<head>
<title>Title of Document</title>
<script src="path/to/file/fileName.js"></script>
</head>
<body onload="showAlert();">
The content of
your page goes here.
</body>
</html>
and you js will look like:
function showAlert(){
alert("This is an alert box");
}
Look into events and listeners. For example, if you want the alert to come up when the page loads, your html file would have:
<body onload="functionName()">
</body>
And you javascript file would have:
function functionName() {
alert("alert message");
}
Usually you would write your Javascript code as a series of functions that you can call whenever you need. So yes, you can write a single statement the way you did but most times its functions.
I'm working on a project that I wish to have smooth scrolling on. I've taken a look at all available documentation from mootools.net and this post from David Walsh on the topic. Copy-pasting code doesn't seem to work, and the only difference that I see is the version of MooTools used(1.4.5 here)—and the function name seems to be the same as 1.2. Chrome 23 throws the error "Uncaught TypeError: undefined is not a function" but I can't find an error in Firebug. Doesn't scroll properly in Firefox either.
Code:
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
new Fx.SmoothScroll({
duration: 200
},window);
});
</script>
</head>
<body>
<a href='#one'>One</a>
<h3 id="one">One</h3>
</body>
I'm also relatively new to JavaScript as well, so if you could explain the process, it'd help a lot! Thanks in advance.
Looks like I've gotten it to work in this jsFiddle. Perhaps this will give you a clue as to what is going on? http://jsfiddle.net/6NNBV/
Update:
To have it load on page load, try this:
window.addEvent('domready', function() {
new Fx.SmoothScroll();
});
Edit: Disregard below:
I believe page anchors do not work on the id of the target element, but rather, the name property.
Try adding a name property to the h3 element.
I'm a complete newbie as far as jQuery is concerned. I also don't know much of JavaScript except for some very basic stuff.
I'm following this tutorial here: http://docs.jquery.com/How_jQuery_Works
And nothing's working! :-)
I created a folder on my machine's hard drive here: C:\rnd\jQuery
Then, in that folder, I put the jquery.x.x.js file that I downloaded from the jQuery website and I created a test.html file and wrote the following code in it:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
It just does the normal behavior of taking me to the jQuery website. I ran it on Chrome, IE and Firefox. I have JavaScript enabled in the browsers. It's all the same everywhere. It doesn't do anything that I expected it to do. It just takes me to the website.
Except on IE, it shows me that message box saying an error occurred in your script. When I click "Yes" to debug, it opens up the debugger but it doesn't highlight any line of code so I don't really know what's happening.
Then, when I had the following line to my code:
$("a").hide("slow");
And my complete code looks like this:
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<style type="text/css">
a.test { font-weight: bold; }
</style>
<script type="text/javascript">
$.(document).ready(function() {
$("a").addClass("test");
$("a").click(function(event) {
alert("Thanks for visiting.");
event.preventDefault();
$("a").hide("slow");
});
});
</script>
</head>
<body>
jQuery
</body>
</html>
At this, nothing different happens in Firefox and Chrome, but in IE, it breaks again into the debugger, this time with this line highlighted in yellow, and it reports that the identifier jQuery is not defined.
(function($) {
$.fn.textDropShadow = function(){
$(this).html('<span class="jq-shadow">'+$(this).html()+'</span><span>'+$(this).html()+'</span>');
return $(this);
}
})(jQuery);
And that, I believe is some JavaScript code on the jQuery website.
I feel completely lost. Any help would be appreciated.
Update:
I have my complete HTML and it is valid XHTML. It's too bad the browser displays that as an HTML response stream and I can't even get it to show up here as a script. Damn! How do you make HTML show up here?
I can see one issue. You have a . following the $ in the document ready statement.
$.(document).ready(function()
^--- remove the .!
It should look like this:
$(document).ready(function()
First off make sure you have the jQuery library referenced before writing any jQuery code (or loading any plugins)
<script type="text/javascript" src="{path to jquery.x.x.js}" ></script>
Also, it should be $(document).ready(function() { });
not $.(document)
Obviously the problem was an extra dot in the $.document part however here is a tip for you when learning jquery.
You may find yourself in the situation that you have another javascript library running on the page and it's using the $ symbol too. A good way to keep your jquery separate from the other library but still share the $ symbol is to alias $ inside your jquery init statement.. like so.
// the dollar symbol doesn't exist outside of this as we started it with jQuery so i personally like this approach.
jQuery(document).ready(function($) {
$('#...');
});
Did you include the line:
<script type="text/javascript" src="jquery.js"></script>
You need to show more of your page for us to know what's wrong.