I've been fiddling with this HTML and javascript for an hour or two now...and I can't figure out why it's not working. I've been trying to learn html, css, and javascript on my own...but I don't think Eclipse is debugging my stuff very well...what's going on?
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Catlard.com</title>
<link rel=StyleSheet href="styles/menuStyle.css" type="text/css"/>
<script type="text/javascript">
function RandomQuote()
{
var quotes= new Array();
quotes[0] = "...believes it may be useful in a time of need."
quotes[1] = "...knows you have a problem, but accepts you anyway."
quotes[2] = "...believes the aliens were involved at Oak Island."
quotes[3] = "...demands to know the location of your hidden rebel base!"
quotes[4] = "...SAW you take the cookie from the cookie jar."
return quotes[Math.floor(Math.random() * 4.99);
}
</script>
</head>
<body>
<div id="framecontent">
<div class="innertube">
<h1>CSS Top Frame Layout</h1>
<span style="font-family : Courier;color: #000000;">
Resume
Blog
Arts n' Farts
Contact
Games
</span>
</div>
</div>
<div id="maincontent">
<div class="innertube">
document.write(RandomQuote());
<p style="text-align: center">Blah blah blah </p>
</div>
</div>
</body>
</html>
You have an error on the return quotes line. It should close with )]; not );
Also, each of your quotes[n] lines should end with a semicolon.
And, you should have document.write() inside of script tags.
Your "document.write" line needs to be in a <script> area. You are also missing the "]" bracket on your return line.
You need to check your code a bit more clearly. Perhaps use a syntax highlighting programming editor such as SciTe.
Even though you did not explicity tell us the problem you have (just said its not working) the first thing that jumps out at me is this line:
return quotes[Math.floor(Math.random() * 4.99);
You forgot the ending ] on the array.
You are missing the ending ] in the return command.
2 things:
return quotes[Math.floor(Math.random() * 4.99)];
You're missing the closing tag for your quotes array.
<script language="javascript" type="text/javascript">
document.write(RandomQuote());
</script>
Your javascript has to be wrapped in that script tag, or else it's just rendered as HTML.
Related
I'm using textillate.js to add animation to text. My html page looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Textillate</title>
<link rel="stylesheet" href="animate.min.css">
<script src="jquery-3.5.1.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
</head>
<body>
<div class="tlt">
Hello world
</div>
<script>
$('.tlt').textillate({ in: { effect: 'bounceInDown' } });
</script>
</body>
</html>
where the included scripts and css are taken from the following links:
https://raw.githubusercontent.com/jschr/textillate/master/jquery.textillate.js
https://code.jquery.com/jquery-3.5.1.min.js
https://raw.githubusercontent.com/davatron5000/Lettering.js/master/jquery.lettering.js
https://raw.githubusercontent.com/animate-css/animate.css/master/animate.min.css
The problem is that whatever I set as effect in the in object, the result is always the default textillate animation: the chars appear one after the other from left to right, and I can control the order of the appearing letters (e.g. setting shuffle: true, etc..), but not the animation type.
This is pretty much the example code that textillate offers on his github page, so I don't have any idea on where is the problem.
I think the problem is related to animate.css reference, i change it and it works. Hope it helps.
$('.tlt').textillate({ in: { effect: 'flipInY' } });
$('.tlt2').textillate({ in: { effect: 'rollIn' } });
$('.tlt3').textillate({"loop":true,"in":{"effect":"fadeInDownBig","shuffle":false,"reverse":false,"sync":false},"out":{"effect":"hinge","shuffle":true,"reverse":false,"sync":false}});
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>
<div class="tlt">
Hello world
</div>
<div class="tlt2" >
Hello world
</div>
<div class="tlt3" >
Hello world
</div>
Why I am asking this: There are many questions similar to this one, but none of them are having a satisfactory answer.
Question:
It seems like, using Regular expression in a content editable HTML element for replacing specified string badly disturbs user's experience with caret positioning
What happens after using Ragex:
1:'Enter key'(earlier which was able to add line break) will stop working.
2:During any manual edit, caret assumes initial position (which is beginning of the editable HTML element).
So far the answers that I was able to find, have bugs!
My snippet with contenteditable="true" HTML element
```
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<meta name="viewport" width="device width, initial-scale=1.0">
<style>
#spanone{
color:red;
}
#spantwo{
color:yellow;
}
</style>
</head>
<body style="background:royalblue;">
<p id="inp" contenteditable="true" style="height:90vh; width:90vw; background:black; color:white; font-weight:bold;">
{This} [is] {HTML} [rendered], {replaced string} [using ragex]! edit me!
</p>
<script>
$(function(){
$("#inp").on("input" , function(){
var str = $("#inp").text();
var new_str = str.replace(/(\[(?:[\w\s]*)*\])/g, function(match){
return match.replace(/(\w+)/g, '<span id="spanone">$1</span>');
});
var result = new_str.replace(/(\{(?:[\w\s]*)*\})/g, function(match){
return match.replace(/(\w+)/g, '<span id="spantwo">$1</span>');
});
$("#inp").html(result);
});
});
</script>
</body>
</html>
I would add class when I have different language on paragraph or div like arabic language to make anther font and direction
and I would make it automatic .
<div class="paragraph">
<p>عربي لغة عربية تغير الاتجاه هنا</p>
</div>
<div class="paragraph">
<p>example</p>
</div>
<script type="text/javascript">
var regoo = "example|assignment";
var re = new RegExp(regoo, 'ig');
if($('div, p').text().match(re)) {
$(this).addClass('gold');
}
</script>
It could be done like this
function HasArabicCharacters(text){
var arregex = /[\u0600-\u06FF]/;
return arregex.test(text);
}
var textBlock = document.querySelector('#app p');
if(HasArabicCharacters(textBlock.textContent)){
textBlock.classList.add('arabic');
}
.arabic{
color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Arabic test</title>
</head>
<body>
<div id="app">
<p class="text">عربي لغة عربية تغير الاتجاه هنا</p>
</div>
</body>
</html>
HasArabicCharacters function is collected from here Regular Expression For Arabic Language
Use square brackets in your regex, and supply all the characters of the arabic language and it will match any of the characters supplied in any order. It is the same as (a|b|c|d) but less code. If it doesnt work try prefixing your characters with a backslash, because they might be classed as special characters. Note, if you use backslash within quotes then you need to use two backslashes per character.
example:
var re = new RegExp('[\\ه\\ن\\ا]','gi')
Why won't the text inside the tags change, when it clearly should change? Can anyone help?
Here is my HTML and JS code:
function pickStick(); {
weapon = "Stick";
weapondamage = 1;
document.getElementById("weapon").innerHTML = "Weapon: ";
}
And...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<br><br>
<div id="weapon">You see a stick. You can pick it up.</div>
</body>
</html>
You have a semicolon after your function name ( function pickStick(); ), you need to remove that:
function pickStick() {
weapon = "Stick";
weapondamage = 1;
document.getElementById("weapon").innerHTML = "Weapon: ";
}
Then you may want to remove the href from your <a> so it doesn't move to a new page, or replace it with href="#":
pick it up.
You need to update 2 things
JS update
Replace
function pickStick(); {
with
function pickStick() {
Markup update
Replace
<a href="" onclick="pickStick()">
with
<a href="#" onclick="pickStick()">
or
<a href="javascript:void(0);" onclick="pickStick()">
For reference - http://plnkr.co/edit/wu1y9OA1Ml1gQPCEQImB?p=preview
This works:
function pickStick() {
weapon = "Stick";
weapondamage = 1;
document.getElementById("weapon").innerHTML = "Weapon: ";
}
<div id="weapon">You see a stick. You can pick it up.
So the problem is probably due to you having a semi-colon in your function definition, or the missing pound sign (#) in your anchor.
I am trying to duplicate Expanding Text Areas Made Elegant
Basically it explains how we can achieve something like fb comment box, where its size increases as text files the textarea.
I have this in my index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script src="test.js"></script>
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
</body>
</html>
And my test.js looks like:
This doesn't really works.
However if I move everything inside the js file to a script tag inside body then it works fine. So my index file would look like:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<figure>
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</figure>
<script>
function makeExpandingArea(container) {
var area = container.querySelector('textarea');
var span = container.querySelector('span');
if (area.addEventListener) {
area.addEventListener('input', function() {
span.textContent = area.value;
}, false);
span.textContent = area.value;
} else if (area.attachEvent) {
// IE8 compatibility
area.attachEvent('onpropertychange', function() {
span.innerText = area.value;
});
span.innerText = area.value;
}
// Enable extra CSS
container.className += ' active';
}var areas = document.querySelectorAll('.expandingArea');
var l = areas.length;while (l--) {
makeExpandingArea(areas[l]);
}
</script>
</body>
</html>
You're not actually using onload
Your formatting is so messed up it's hard to tell, but your init code is in a while loop at the bottom after your onload function.
When you include it in the <head> it runs before any elements exist. That's why the position of it matters.
In your browser(I recommend Chrome for testing) open up the developer tools(via right click and selecting inspect element) and make sure your test.js file's path is correct. Do this by selecting the 'Sources' tab on the top of the developer tools window and then selecting the test.js file on the list of sources.
I also consider it best practice to load your js files at the bottom of your web documents(before the last body tag) to guarantee they load AFTER your dom elements load.
try this in your code:
I have used inside a table andapply a css class "form-control". The properties of this text areas are in side tag in side
html code:
<html>
<body>
<table>
<tr>
<td>Description:</td>
<td><textarea name="DESCRIPTION" id="DESCRIPTION" class="form-control"></textarea></td>
<td></td>
</tr>
</table>
//css-code required inside html:
<style>
textarea.form-control {
height: auto;
resize: none;
width: 300px;
}
</style>
</body>
</html>