Styling tomahawk upload file component - javascript
I am trying to style the t:inputFileUpload element, I tried this solution styling an input type=file, which is putting another input element and an image to occupy the same place the t:inputFileUpload takes.That is my code
<div id="file-div">
<h:inputText styleClass="replace-upload" id="fake-input" />
<div class="browse-img">
<span class="browse-button">#{msgs.select}</span>
</div>
<t:inputFileUpload id="file" value="#{createListBean.uploadedFile}"
size="22" accept=".xls,.xlsx,.csv" type="file" style="z-index :2;opacity:0;position:relative;"
onchange="changeFakeFile()" styleClass="file-real" />
</div>
And my styling
.replace-upload {
border: 1px solid #EEEEEE !important;
border-radius: 3px 3px 3px 3px !important;
box-shadow: 2px 2px 0 0 #CCCCCC inset !important;
color: #333333 !important;
font-size: 14px !important;
margin-top: -5px;
padding: 5px !important;
width: 157px !important;
position: absolute;
z-index: 1;
}
.browse-img {
background-color: #333333;
color: #FFFFFF;
width: 76px;
position: absolute;
left: 171px;
top:-2px;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 1px #000000;
}
.browse-button {
color:#FFFFFF;
cursor: pointer;
display: block;
font-size: 12px;
font-weight: bold;
line-height: normal;
padding: 5px 18px;
text-decoration: none;
}
Now when user clicks on the fake input element he would be actually clicking over the tomahawk element , the main problem is the path he selected doesn't show over the fake input, that is why I added some javascript to it function
changeFakeFile(){
var x = $('.file-real').val();
$('.replace-upload').text(x);}
The problem is the fake input value is changed but the value doesn't show to the user,how to make it appear?
I replaced $('.replace-upload').text(x); with $('.replace-upload').val(x); and it worked.
Related
footer button in Android Browser
I am new to CSS and developing a simple template which will be showed inside an Android Browser. Basically my template only has two elements, an error message, and a button (should be placed at footer).
I have read a few posts at stackoverflow. People suggest to use
position:fixed;
bottom: 0;
to place an element at footer. However, when I added this my button css, it seems my button was just placed right below the error message instead of at the footer. Anyone has any ideas why?
.fulfill-application-button{
display: inline-block;
width: 100%;
zoom: 1;
margin: 0;
text-align: center;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 25px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
transition: background-color .2s ease-out;
background-clip: padding-box;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
0 2px 2px -1px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
}
.fulfill-application-button:hover{
background-color: #eee;
color: #555;
}
.fulfill-application-button:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.fulfill-application-button.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.fulfill-application-button.ok{
position: relative;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
.fulfill-application-button.ok:hover{
background-color: #ee5f5b;
}
.fulfill-application-button.ok:active{
background: #c43c35;
}
html,body
{
padding: 15px;
height: 100%;
background-color: black;
}
div.error-message{
color: white;
line-height: 120%;
padding-top: 20%;
font-size:30px;
}
</style>
<body>
<div class ="error-message">
${error}
</div>
<button id="ok" type="button" class="color ok fulfill-application-button">
OK
</button>
</body>
Change position: relative; to position: fixed; from class .fulfill-application-button.ok
Code :
.fulfill-application-button.ok{
position: fixed;
bottom: 0;
padding: 10px 90px;
background-color: #c43c35;
border-color: #c43c35;
}
Note : You can give right and left for the same, if you want.
How to automatically fit a paragraph into a div box
I'm using JQuery to prepend a <p> element into a div however if mainButtonText in the p element is too long, it will be outside of the div.
http://puu.sh/mvm7F/a99aba0b1e.jpg
I want it to look like this: http://puu.sh/mvmEy/c17db01e4a.jpg
Is it also possible to automatically resize the text font size?
html:
<div id="mainButton"></div>
css:
#mainButton {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
width: 100px;
height: 40px;
font-family: monospace;
font-size: 12px;
text-align: center;
line-height: 40px;
background: #808080;
color: #fff;
text-decoration: none;
border-radius: 10px;
box-shadow: inset 1px 1px 1px rgba(255,255,255,0.05), inset 0 0 35px rgba(0,0,0,0.6), 0 5px 5px -4px rgba(0,0,0,0.8);
}
#mainButton:hover {
background: #d3d3d3;
}
#mainButton:active {
top: 5px;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.4), inset 0 0 35px rgba(0,0,0,0.6), 0 1px 1px rgba(255,255,255,0.1), inset 0 6px 4px rgba(0,0,0,0.4);
}
javascript:
function changeMainButton() {
'use strict';
$('#mainButton').empty();
$('#mainButton').prepend('<p>' + mainButtonText + '</p>');
}
Thanks for any help! :)
Maybe this could help:
#mainButton {
...
overflow: hidden;
}
You can make the text adjust to its container using
#mainButton {
word-wrap: break-word;
}
You can also resize the font size in relation to its parent element using javascript like http://simplefocus.com/flowtype/ or http://fittextjs.com/ but if you want to control it in granular use #media, em and rem
Why does the login box appear without the link being clicked?
I am trying to make a login box modal dialog window with CSS, HTML and jQuery but the login box is appearing without me clicking the Login / Sign In link. My HTML code is fairly straightforward:
Login / Sign In
<div id="login-box" class="login-popup">
<img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" />
<form method="post" class="signin" action="#">
<fieldset class="textbox">
<label class="username">
<span>Username or email</span>
<input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
</label>
<label class="password">
<span>Password</span>
<input id="password" name="password" value="" type="password" placeholder="Password">
</label>
<button class="submit button" type="button">Sign in</button>
<p>
<a class="forgot" href="#">Forgot your password?</a>
</p>
</fieldset>
</form>
</div>
<link rel="stylesheet" type="text/css" href="login.css" />
The CSS is more complex:
#mask {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
opacity: 0.8;
z-index: 999;
}
#login-popup {
display: none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999;
/* CSS3 */
-moz-box-shadow: 0px 0px 20px #999;
/* Firefox */
-webkit-box-shadow: 0px 0px 20px #999;
/* Safari, Chrome */
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
/* Firefox */
-webkit-border-radius: 3px;
/* Safari, Chrome */;
}
img#btn_close {
Position the close button
float: right;
margin: -28px -28px 0 0;
}
fieldset {
border: none;
}
form#signin #textbox label {
display: block;
padding-bottom: 7px;
}
form#signin #textbox span {
display: block;
}
form#signin p, form#signin span {
color: #999;
font-size: 11px;
line-height: 18px;
}
form#signin #textbox input {
background: #666666;
border-bottom: 1px solid #333;
border-left: 1px solid #000;
border-right: 1px solid #333;
border-top: 1px solid #000;
color: #fff;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font: 13px Arial, Helvetica, sans-serif;
padding: 6px 6px 4px;
width: 200px;
}
form#signin input:-moz-placeholder {
color: #bbb;
text-shadow: 0 0 2px #000;
}
form#signin input::-webkit-input-placeholder {
color: #bbb;
text-shadow: 0 0 2px #000;
}
#button {
background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
background: -o-linear-gradient(top, #f3f3f3, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
border-color: #000;
border-width: 1px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color: #333;
cursor: pointer;
display: inline-block;
padding: 6px 6px 4px;
margin-top: 10px;
font: 12px;
width: 214px;
}
#button:hover {
background: #ddd;
}
The jQuery is new to me and there is most likely a few errors in there.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">
$(document).ready(function() {
$('a.login-window').click(function() {
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
Does anyone see some errors in that code that could be causing the problem? If so please tell me.
The problem is with HTML
<div id="login-box" class="login-popup">
and CSS
#login-popup {
display: none;
You use the # in the css selector which is for ids but the element has a class..
So the CSS rule should use .
.login-popup {
display: none;
Same error seems to exist for all your rules.. you use classes in the HTML but try to target them with id selectors in CSS
Implementing CSS on netbiscuits JSP
I just want to implement CSS on my JSP which has the net-biscuits code in it. I am directly starting my JSP code from the <FORM> tag. I worte:
Some code -----
<span class="cart_bubble"><bean:write name="keywordform" property="cartvalue"/></span>
Some code -----
but I cant see the CSS on this page though I am getting the value from the bean.
The CSS is:
.cart_bubble{
position: absolute;
right: 0px;
top: 0px;
padding: 5px;
width: auto;
background: -moz-linear-gradient(10% 64% 90deg,#AE1321, #FC7C4A);
background: -webkit-gradient(linear, 0% 0%, 0% 37%, from(#FC7C4A), to(#AE1321));
color: white;
line-height: 4px;
font-size: 11px;
font-weight: bold;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
cursor: pointer;
border: 0px solid white;
-moz-box-shadow: 1px 2px 2px #9a9b9b;
-webkit-box-shadow: 1px 2px 2px #9a9b9b;
margin: -3px 0px 0px -3px;
}
Please suggest a solution to my problem. Thanks in advance.
First you need to include the CSS file using the external tag like this: [external file="your.css"/] and then reference the style in your FORM biscuit: [FORM class="cart_bubble"]
Editing 2D arrays to display a "map"
So, I'm doing a "map overlay" for a 2D array in Javascript, but it keeps coming out like this:
Have a Fiddle:
http://jsfiddle.net/HcRVW/6/
Note that the map is being rendered in some strange order.
Cheers in advance, I've been looking at it for ages now.
<html>
<head>
<title>tileEngine - Isometric</title>
<style type="text/css">
#mapoverlay {
position: absolute;
z-index: 888;
top: 70px;
color: lightgreen;
width: 420px;
height: 300px;
padding: 10px 5px 5px 5px;
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
background-color: #666;
z-index: 900;
-moz-text-shadow: 3px 3px 3px #000;
-webkit-text-shadow: 3px 3px 3px #000;
text-shadow: 3px 3px 3px #000;
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px #000;
box-shadow: 3px 3px 3px #000;
}
.mN { width: 8px; height: 8px; display: inline-block; float: right; list-style-type: none; background-color: #fff; font-size: 1px; line-height: 1px; margin: 0px; padding: 0px; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var map = Array( //land
[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
[2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2],
[2,2,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,9,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,2,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2],
[2,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2],
[2,2,1,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,1,0,0,0,0,0,0,0,1,1,2,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,2],
[2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,1,1,1,1,0,1,1,1,1,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2],
[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2]
);
for(i=0;i<map.length;i++){
for(a=0;a<map[i].length;a++){
$('#mapoverlay').append('<li class="mN '+map[i][a]+'"> </li>');
}
}
$('.mN').each(function() {
if ($(this).hasClass('0')) {
$(this).css({'background-color':'green'})
} else if ($(this).hasClass('1')) {
$(this).css({'background-color':'blue'})
} else if ($(this).hasClass('2')) {
$(this).css({'background-color':'blue'})
} else {
$(this).css({'background-color':'green'})
}
});
});
</script>
</head>
<body align="center" style="text-align: center;">
<ul id="mapoverlay"></ul>
</body>
</html>
It's your css. See you have 57 items per array. That is 57x8=456px.
#mapoverlay {
position: absolute;
z-index: 888;
top: 70px;
color: lightgreen;
width: 456px;
border: 10px solid #666;
-moz-opacity:.50;
filter:alpha(opacity=50);
opacity:.50;
background-color: #666;
z-index: 900;
-moz-text-shadow: 3px 3px 3px #000;
-webkit-text-shadow: 3px 3px 3px #000;
text-shadow: 3px 3px 3px #000;
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px #000;
box-shadow: 3px 3px 3px #000;
overflow: hidden;
}
.mN { width: 8px; height: 8px; display: block; float: left; list-style-type: none; background-color: #fff; font-size: 1px; line-height: 1px; margin: 0px; padding: 0px; }
Here you go: http://jsfiddle.net/HcRVW/9/ Removed the fancy CSS stuff and updated the width to hold same amount of items as each "inner" array length. Also separated HTML, JS and CSS as jsFiddle supports it.
Heloo, i saw the fiddle example and i think u have to decrease the array size or increase overlay size. because i tried to decrease the array size like this http://jsfiddle.net/HcRVW/10/
Two off-topic points (hence this being a CW answer): 0, 1, and 2 are invalid CSS classes. In CSS, a class name must not start with a digit. Rather than calling Array as a function, recommend just using literal notation throughout as you have with the sub-arrays, e.g.: var map = [ [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2, // ... ];
Have a look here. Seems they do the same, but transforming to 3D also: http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/