This is what I want 1, 2, 3, 4, 5.
They should all be styled the same.
But when I run my code I only get (5);
Can someone please help?
<p id= "text-1"> this </p>
p#text-1{
color:blue;
font-size:20px;
padding:10px;
width:20px;
height:20px;
background:gold;
text-align:center;
}
function forloop(){
for( x = 0; x<=3; x++){
document.getElementById('text-1').innerHTML = x;
}
}
forloop();
If you're trying to programatically create a list going from 1 to 3, then you can do it like this:
<html>
<head>
<style>
p#text-1{
color:blue;
font-size:20px;
padding:10px;
width:20px;
height:20px;
background:gold;
text-align:center;
}
</style>
<script>
function forloop(){
var MAX = 3;
for( x=1; x<=MAX; x++) {
document.getElementById('text-1').innerHTML += x;
if(x < MAX) {
document.getElementById('text-1').innerHTML += ", ";
}
}
}
</script>
</head>
<body onLoad="forloop()">
<p id= "text-1"></p>
</body>
</html>
Note that just based on what you've said here, it would be simpler to just put the contents you want into the page directly. This answer is based on the assumption that you won't always want a list of exactly 3 numbers.
Note also that your div is not wide enough to contain all 3 numbers. You will need to make sure that your styling is what you want, but that is beyond the scope of this answer.
EDIT: If you want each number in its own box, then it will be changed like so:
<style>
span.numblock {
color:blue;
font-size:20px;
padding:10px;
width:20px;
height:20px;
background:gold;
text-align:center;
}
</style>
and
<script>
function forloop(){
var MAX = 3;
for( x=1; x<=MAX; x++) {
document.getElementById('text-1').innerHTML += "<span class='numblock'>"+x+"</span>";
if(x < MAX) {
document.getElementById('text-1').innerHTML += ", ";
}
}
}
</script>
The onload() was just to get the script to run. You might not need it, depending on the context in which this will exist.
Related
I keep trying to make it work but it simply won't. Please help.
Btw I want it so that when you die it resets.
<!DOCTYPE html>
<html>
<head>
<style>
html,button{
font-family: monospace, monospace;
width:20%;
padding:0%;
margin:0%;
}
button{
text-align: left;
height:150px;
position:absolute;
background-color:transparent;
border:transparent;
outline:none;
}
div{
position:absolute;
transform:translate(20px,-40px);
}
</style>
<script>
var roll = 0;
function play(){//begin
var rep = Math.floor(Math.random() * 6);
if (rep == 0 && roll !== 6){
roll+=1
document.getElementById("hk").innerHTML = "._______<br>\\(#)----'<br>/ /\\<br>(_(<br>";
setTimeout(4000);
setTimeout(function(){
document.getElementById("hk").innerHTML = ",_______<br>\\(=)----*#<br>/ //<br>(_(<br> DEAD";
}, 500);
}else if (rep !== 0 || roll == 6){
document.getElementById("hk").innerHTML = "._______<br>\\(#)----'<br>/ /\\<br>(_(<br>";
setTimeout(function(){
document.getElementById("hk").innerHTML = ",_______<br>\\(=)----'<br>/ //<br>(_(<br>Click";
}, 500);
var roll = 0;
}
}//end
</script>
</head>
<body>
<h1>Russian<br>Roulette</h1>
<button onClick="play()">
<div id="hk">
,_______<br>
\(=)----'<br>
/ /\<br>
(_(<br>
</div>
</button>
<p>click the gun</p>
</body>
</html>
Please no jquery or anything like it.
The javascript and only the javascript do I need help with.
It doesn't let me post this without adding more text so I am currently adding more text so I can post this.
I am currently trying to write a ''web application'' that has a simple text area inside, in which I want the letters of the text written to be pointed out.
For example, if I write:
''How old are you? I am 19 years old''
I need a code to tell me how many 'A's and 'Y's and 'D's (and all letters of the alphabet from 0-26) are used in this sentence when I press a button on a HTML/ CSS page.
Could you please tell me what I must write into my .JS file and what I should write into my .HTML file to do this with a click of a button when something is written in the ?
I hope my explanation was detailed enough. Thanks!
Edit (I'm very sorry for the problems I caused) - What I have done so far looks like this:
HTML:
<link rel="stylesheet" type="text/css" href="theme.css">
<meta charset="utf-8">
<script src="test.js" type="text/javascript"></script>
<div class='header'>
Al.Fa.Be
</div>
<div class='yaz'>
<textarea></textarea>
</div>
<div class='description'>
<a href='http://www.google.com'>Ara</a>
</div>
<div class='description2'>
<input id="clickMe" type="button" value="Hesapla" onclick="doFunction();" />
</div>
CSS:
body{
background:white;
}
selection{
background:#CCC;
}
#clickMe{
background:#CCC;
border:1px solid #333;
}
.header{
font-size:70px;
font-weight:bold;
font-family:Arial;
color:#333;
margin-left:580px;
padding-top:200px;
}
textarea{
width:1210px;
height:40px;
color:black;
margin-top:20px;
margin-left:100px;
padding-left:10px;
padding-top:10px;
font-size:18px;
font-family:Arial;
}
.description{
background:#f2f2f2;
padding:6px;
width:50px;
text-align:center;
border:1px solid #ddd;
font-family:Arial;
margin-left:620px;
margin-top:20px;
font-size:14px;
}
.description a{
color:#555;
text-decoration:none;
}
.description2{
background:#f2f2f2;
padding:6px;
width:60px;
text-align:center;
border:1px solid #ddd;
font-family:Arial;
margin-left:750px;
margin-top:-30px;
font-size:14px;
}
.description2 a{
color:#555;
text-decoration:none;
}
.yaz{
color:white;
}
Javascript:
// Input name. Count number of alphabets a-z
class program
{
public static void main(String[] args)
{
String name = args[0];
int count[] = new int[29];
int i,p;
int n = name.length();
name = name.toUpperCase();
char c;
for (i=0; i<29; i++)
{
count[i] = 0;
}
for (i=0; i<n; i++)
{
c = name.charAt(i);
p = (int) c;
count[p-65]++;
}
for (i=0; i<29 ; i++)
{
if (count[i] >0)
{
System.out.println((char)(i+65) + " occurs " + count[i] + " times");
}
}
}
}
PS: Please remember that I really suck at this and I need to know how to do this in a specific way.
This is how I would do it.
var count = {};
var msg = "Your message";
for(var i = 0; i < msg.length; i++) {
var c = msg[i];
c = c.toLowerCase();
if(typeof(count[c]) == "undefined") {
count[c]=1;
}
else {
count[c]++;
}
}
If you want, you can check for only letters like this:
if('a'.charCodeAt(0) <= c <= 'z'.charCodeAt(0))
//This is a small letter
Try this:
var str = "How old are you? I am 19 years old";
str = str.toLowerCase();// search is case sensitive
var counta = str.match(/a/g);
var countd = str.match(/d/g);
var county = str.match(/y/g);
alert("a:"+counta.length+" d:"+countd.length+" y:"+county.length);
Fiddle here:
Check out this article: http://davidwalsh.name/javascript-unique-letters-string.
It's just what are you looking for.
Edit:
HTML:
<link rel="stylesheet" type="text/css" href="theme.css">
<meta charset="utf-8">
<script src="test.js" type="text/javascript"></script>
<textarea rows="5" cols="10" id="str" value="Insert the string" />
<input type="button" value="Submit" id="button" />
JS:
document.getElementById('button').onclick = function() {
/* returns the size/length of an object */
Object.size = function(obj) {
var size = 0;
for(key in obj) {
if(obj.hasOwnProperty(key)) size++;
}
return size;
}
//initial vars
var str = document.getElementById('str').val;
var letters = new Object;
//loop, figure it out
for(x = 0, length = str.length; x < length; x++) {
var l = str.charAt(x)
letters[l] = (isNaN(letters[l]) ? 1 : letters[l] + 1);
}
//output count!
for(key in letters) {
console.log(key + ' :: ' + letters[key]);
}
console.log(Object.size(letters));
}
PS: your "javascript" doesn't look like javascript... It looks like java...
I would like to know how to resize a textbox to prevent text nearby it from overflowing.
I have 3 elements in a row, a label, a text box, and a button. the label however, can have words of varying lengths. if the word is too long it will move the text input too far to the side and the button will overflow onto the next line. to preserve the style of the page, I would prefer that the button stays on the same line as the other 2 elements.
I am trying to get the text box to shrink only as much as necessary to allow room for the other elements.
can I do this with JQuery?
Edit: here's the JFiddle thing:
http://jsfiddle.net/425ve/2/
and here's the main code:
<html>
<head>
<style>
body{
background-color:#000000;
color:#cccccc;
}
#chatbox{
width:100%;
height:85%;
border-style:solid;
border-color:#000000;
overflow:auto;
}
#mainchat{
width:82%;
float:left;
margin:0;
}
#sidebar{
float:left;
height:97%;
width:17%;
border-style:dashed;
border-width:1px;
border-color:#AAAAAA;
border-right:0;
border-top:0;
border-bottom:0;
overflow:auto;
}
#topbar{
border-style:dashed;
border-width:1px;
border-color:#AAAAAA;
border-left: 0;
border-top: 0;
float:left;
width:82%;
}
a{
color:#cccccc;
text-decoration:none;
}
a:hover{
color:#CCCCEE;
background-color:111122;
}
#topbarname{
float:right;
}
#message{
width: 90%;
background-color:#000000;
border-color:#CCCCCC;
border-style:solid;
border-width: 1px;
color:CCCCCC;
}
#submitbutton{
background-color:#000000;
border-color:#CCCCCC;
border-style:solid;
border-width: 1px;
color:#CCCCCC;
}
</style>
<script>
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
}
else
{
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1) {
end = dc.length;
}
}
return unescape(dc.substring(begin + prefix.length, end));
}
function doSomething() {
var myCookie = getCookie("IceID");
if (myCookie == null) {
window.location="login.php"
}
else {
// do cookie exists stuff
}
}
doSomething();
</script>
</head>
<body>
<div id="topbar">
| Information | Logs | characters | Profile | Private logs | Messages | Logout |
</div>
<div id="mainchat">
<div id="chatbox">
<?php
include("getpost.php");
//improve this with AJAX!
?>
</div>
<div id="input">
<form id="inputchat">
<b id="name">
<?php
echo $_COOKIE['IceID'];
?>
</b>
<input type="text" name="message" id="message"></input>
<input type="submit" id="submitbutton" value="say"></input>
</form>
</div>
<div id="utools">
</div>
</div>
<div id="sidebar">
<div id="title">
A
</div>
<div id="list">
</div>
</div>
</body>
</html>
Edit:to clarify, the name doesn't actively change while the page is being used(only right before being displayed), but it will be different depending on who loads the page. their username fits into that label.
You don't need jQuery. jQuery could make it much simpler though. I prefer vanilla.
var left = document.getElementById('name')
var resizable = document.getElementById('message')
var right = document.getElementById('submitbutton')
realign()
window.addEventListener('resize', realign)
function realign() {
resizable.style.width = '0'
var extraWidth = getWidth(resizable) // Measure the border and padding on it's own.
resizable.style.width = getWidth(resizable.parentNode) - getWidth(left) - getWidth(right)
function getWidth(element) { // Superior to offsetWidth because it measures fractions of a pixel which is even more relevant when using the browser zoom feature.
var rect = element.getBoundingClientRect() // A accurate way to measure location on the screen.
return rect.right - rec.left // The accurate width.
}
}
The only adjustment you need would be to fix my typo(s) if I made any and then if you want to support older versions of IE, you need to use the alternative to addEventListener, Google it.
I got a star rating js from http://nofunc.org/AJAX_Star_Rating/
this js works with two colors only,red and blue.
When a person moves his mouse on stars then the original rating gets hidden and new rating is shown on mouse move i.e. if we move our mouse on stars then we cant see the original rating unless we move our mouse away from stars.
What i want is that when a person moves his mouse then original rating should be diplayed in some light color and the one that we are doing should come in dark color(not red as its the color of fixed rating display) and once we fix it then it shud b diplayed in the same red and blue colors.
How can i do that now? i tired to play with css and js but it was of no help as im not very good at it :(
Help would be highly aprreciated!!
P.S.
please dont suggest some big js's as I cant go for them...i need a js as small as it can be for this rating thing thats why i opted this nofunc js.....
try this. this is what i did for a website
html code
<div id="rating">
<div id="star1">
<img src="images/on.png" alt="1"/>
</div>
<div id="star2">
<img src="images/on.png" alt="2"/>
</div>
<div id="star3">
<img src="images/on.png" alt="3"/>
</div>
<div id="star4">
<img src="images/on.png" alt="4"/>
</div>
<div id="star5">
<img src="images/on.png" alt="5"/>
</div>
</div>
<input type="hidden" name="ratingval" id="ratingval" value="0" />
js script
$(document).ready(function(){
stars = ['off','off','off','off','off','off'];
clearRating();
$('#star1 img').click(function(){ rateTheStar(1);});
$('#star2 img').click(function(){ rateTheStar(2);});
$('#star3 img').click(function(){ rateTheStar(3);});
$('#star4 img').click(function(){ rateTheStar(4);});
$('#star5 img').click(function(){ rateTheStar(5);});
});
// Bl holder functions
function clearRating() {
count = 1;
for(count = 1; count <= 5; count++) {
strTarget = '#star'+count+' img';
$(strTarget).animate({'opacity':0});
}
}
function rateTheStar(targetno) {
if(stars[targetno] == 'off') {
target = '';
i = 0;
j = 0;
for(j = 1; j <= targetno; j++) {
target = '#star'+j+' img';
stars[j] = 'on';
$(target).animate({'opacity':1},'slow');
}
document.getElementById('ratingval').value = targetno;
for(i = targetno+1; i <= 5; i++) {
str = '#star'+i+' img';
$(str).animate({'opacity':0},'slow');
}
//alert(stars[1]+" "+stars[2]+" "+stars[3]+" "+stars[4]+" "+stars[5]);
}
else if(stars[targetno] == 'on') {
document.getElementById('ratingval').value = targetno;
i = 0;
newTargetNo = targetno + 1;
for(i = newTargetNo; i <= 5; i++) {
str = '#star'+i+' img';
stars[i] = 'off';
$(str).animate({'opacity':0},'slow');
}
}
}
css file
#rating {
width:120px;
height:34px;
display:inline;
overflow:hidden;
display:block;
}
#rating img {
background-image:url(../images/off.png);
}
#star1 {
width:20px;
height:32px;
float:left;
background-image:url(../images/off.png);
}
#star2 {
width:20px;
height:32px;
float:left;
background-image:url(../images/off.png);
}
#star3 {
width:20px;
height:32px;
float:left;
background-image:url(../images/off.png);
}
#star4 {
width:20px;
height:32px;
float:left;
background-image:url(../images/off.png);
}
#star5 {
width:20px;
height:32px;
float:left;
background-image:url(../images/off.png);
}
images : http://thewoodhouse.net/jukebox/images/on.png and http://thewoodhouse.net/jukebox/images/off.png
you can try the code in this sample html file http://thewoodhouse.net/jukebox/admin.html
hello i think this tutorials will help you
its a nice one
http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/
I have a nested for loop inside a for loop that is supposed to change the link text to a random number between 1 and 5. The ID of the links are "aX_Y", X and Y being numbers. The links are arranged in a 4x3 square. The problem is that the random numbers for the link text is only displayed for the last row:
<!DOCTYPE html>
<html>
<head>
<title>RISK</title>
<style type="text/css" media="screen">
a:link, a:visited {color: #eee;border:3px solid #ccc;text-decoration:none;padding:20px;}
.one {background: #7B3B3B;}
.two {background: #547980;}
#status {color: #eee;padding:1px;text-align:center}
.current {border:3px solid #000;}
</style>
<script type="text/javascript" charset="utf-8">
var xTurn = true;
var gameOver = false;
var numMoves = 0;
function newgame()
{
var status = document.getElementById('status');
numMoves = 0;
gameOver = false;
xTurn = true;
status.innerHTML = 'Player One\'s turn';
for(var x = 0; x < 4; x++)
{
for(var y = 0; y < 3; y++)
{
document.getElementById('a' + x + '_' + y).innerHTML = Math.floor(Math.random()*5 + 1);
console.log('a' + x + '_' + y);
}
}
}
function current(selected)
{
var status = document.getElementById('status');
var value = selected.value;
}
//document.getElementById("status").setAttribute("class", "two");
</script>
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body onload='newgame();'>
<p id="status" class="one">Player One's turn</p>
<br />
<br />
<br />
<br /><br />
<p><input type="button" id="newgame" value="New Game" onclick="newgame();" /></p>
</body>
</html>
Here is a direct link to it:
https://dl.dropbox.com/u/750932/iPhone/risk.html
This change to your CSS fixes the issue:
a:link, a:visited
{
color: #eee;
border:3px solid #ccc;
text-decoration:none;
display:inline-block;
padding:20px;
}
(Tested in Firefox)
Your Javascript code is fine; all of the grid squares are getting populated with random numbers. What I am seeing instead is that each row of links is overlapping the previous row, so the numbers in the previous row are being hidden.
Is the overlapping intentional?
All the random numbers are being generated correctly. The top 2 rows are just hidden due to your CSS rules. You can prove this by making the following CSS change:
Change the line that looks like this:
a:link, a:visited {color: #eee;border:3px solid #ccc;text-decoration:none;padding:20px;}
to this:
a:link, a:visited {color: #eee;border:3px solid #ccc;text-decoration:none;}
And voila, it's all working beautifully.
Heh, I'm pretty sure it is working...the other boxes are just overlapped by the ones in front and you can't see them. Firebug shows values inside all the boxes.
a {
display:block;
float:left;
}
br {
clear:both;
}
...though actually those top-level elements shouldn't be restyled like that necessarily, I'd put it all in a <div id="game"></div> and make them .game a and .game br.