Develop Reference

How to use :root, instead of a class [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 11 months ago.
Improve this question
I want to use :root instead of a class here, how would I do that here?
Is this something that I am able to do?
That is all, or everything I am trying to do in the code.
This is what :root is.
:root {
}
And this is the working code I have. https://jsfiddle.net/s6xocny3/
How would I be able to do that if it is possible?
Can this one be updated and fixed? Can it be modified?
https://stackoverflow.com/a/71656076/17974392
Also, I am not using setInterval.
(function randomBackground() {
const classNames = [
"bg1",
"bg2",
"bg3",
"bg4",
"bg5",
"bg6",
"bg7",
"bg8",
"bg9"
];
const random = Math.floor(Math.random() * classNames.length);
document.querySelector("body").classList.add(classNames[random]);
}());
.bg1 {
--color-a: linear-gradient(120deg, #155799, #159957);
}
.bg2 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
.bg3 {
--color-a: linear-gradient(45deg, #102eff, #d2379b);
}
.bg4 {
--color-a: linear-gradient(90deg, #360033 30%, #0b8793 100%);
}
.bg5 {
--color-a: linear-gradient(115deg, #0a0e88, #00b1ce);
}
.bg6 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
.bg7 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
.bg8 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
.bg9 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: var(--color-a);
background-repeat: no-repeat;
}

Set into :root, your color vars, then change the background-image: var(--color-a); with the random color.
(function randomBackground() {
const varNames = [
"color-a",
"color-b",
"color-c"
];
const random = Math.floor(Math.random() * varNames.length);
document.body.style.backgroundImage = 'var(--' + varNames[random] + ')';
}());
:root {
--color-a: linear-gradient(120deg, #155799, #159957);
--color-b: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
--color-c: linear-gradient(45deg, #102eff, #d2379b);
/* ... */
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: var(--color-a);
background-repeat: no-repeat;
}

You can redefine the value of a custom css property using setProperty. For example:
document
.documentElement
.style
.setProperty('--dynamic-background', bgs[random]);
Here's a snippet similar to you that only uses 1 custom css property and updates its value through javascript:
function randomBackground() {
const bgs = [
"linear-gradient(120deg, #155799, #159957)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
"linear-gradient(45deg, #102eff, #d2379b)",
"linear-gradient(90deg, #360033 30%, #0b8793 100%)",
"linear-gradient(115deg, #0a0e88, #00b1ce)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
]
const random = Math.floor(Math.random() * bgs.length);
document
.documentElement
.style
.setProperty('--dynamic-background', bgs[random]);
};
randomBackground();
:root {
--dynamic-background: linear-gradient(120deg, lime, red);
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: var(--dynamic-background);
background-repeat: no-repeat;
}

How to add footer to the bottom of the page

I want to have footer at the bottom of the page according to data retrieve from the database, but footer is blocking some content under it.
Please check the image:
please tell me how to do that below is my css:
body{
padding-bottom: 15px;
position: relative;
height: auto;
min-height: 100%;
}
table{
padding-bottom: 15px;
}
form,table,h3,h4,#retrieveform{
text-align: center;
margin: 0px auto;
}
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
}
table tr:nth-child(even) {
background-color: hsla(120,100%,75%,0.3);;
}
table tr:nth-child(odd) {
background-color:hsla(120,100%,25%,0.3);;
}
table th {
background-color: #B0B0B0 ;
color: white;
}
.myButton {
-moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
-webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
box-shadow: 0px 1px 0px 0px #f0f7fa;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:-o-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 100%);
background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);
background-color:#33bdef;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #057fd0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px -1px 0px #5b6178;
}
.myButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:-o-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 100%);
background:linear-gradient(to bottom, #019ad2 5%, #33bdef 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);
background-color:#019ad2;
}
.myButton:active {
position:relative;
top:1px;
}
#footer {
position:fixed;
margin-top: -450px;
padding-top: 0;
color:white;
bottom:0;
text-align:center;
width:100%;
height:20px; /* Height of the footer */
background:black;
}
i have given id only to footer as "footer" and class button as "mybutton"
Please have a look at my jsp page:
<body>
<%#include file="/header.jsp" %>
<form>
<%
if (session.getAttribute("name") == null) {
out.println( "<p style=\"color:red\"><Strong>**Please Login First!**<strong></p> " );
response.sendRedirect("index.jsp");
}
String empid = request.getParameter("Emp_id");
String from = request.getParameter("From");
String to = request.getParameter("To");
Connection conn= null;
PreparedStatement ps = null;
ResultSet rs = null;
PreparedStatement ps1= null;
ResultSet rs1= null;
PreparedStatement ps2= null;
ResultSet rs2= null;
try {
conn = ConnectionProvider.getConn();
ps = conn.prepareStatement("SELECT * FROM logintable WHERE Emp_id=? and LoginDate BETWEEN ? AND ?; ");
ps1 = conn.prepareStatement("SELECT CAST((SEC_TO_TIME(SUM(TIME_TO_SEC(`Total`))) ) AS char) AS Total FROM logintable WHERE Emp_id=? AND LoginDate BETWEEN ? AND ?;");
ps2 = conn.prepareStatement("SELECT CAST((SEC_TO_TIME(SUM(TIME_TO_SEC(`Overtime`))) ) AS char) AS Overtime FROM logintable WHERE Emp_id=? AND LoginDate BETWEEN ? AND ?;");
ps.setString(1, empid);
ps.setString(2, from);
ps.setString(3, to);
ps1.setString(1, empid);
ps1.setString(2, from);
ps1.setString(3, to);
ps2.setString(1, empid);
ps2.setString(2, from);
ps2.setString(3, to);
%>
<br>
<table>
<tr>
<td> <strong>Employee Id:</strong></td><td><%=request.getParameter("Emp_id")%></td>
<td><strong>From Date:</strong></td><td><%=request.getParameter("From")%></td>
<td><strong>To Date:</strong></td><td><%=request.getParameter("To")%></td></tr></table>
<%
out.print("<table border=1>");
out.print("<caption><h4>TIMESHEET</h4></caption>");
rs = ps.executeQuery();
rs1=ps1.executeQuery();
rs2=ps2.executeQuery();
ResultSetMetaData rsmd=rs.getMetaData();
int total=rsmd.getColumnCount();
out.print("<tr>");
for(int i=1;i<=total;i++)
{
out.print("<th>"+rsmd.getColumnName(i)+"</th>");
}
out.print("</tr>");
while(rs.next())
{
out.print("<tr><td>"+rs.getString(1)+"</td><td>"+rs.getString(2)+"</td><td>"+rs.getString(3)+"</td><td>"+rs.getString(4)+"</td><td>"+rs.getString(5)+"</td><td>"+rs.getString(6)+"</td><td>"+rs.getString(7)+"</td><td>"+rs.getString(8)+"</td><td>"+rs.getString(9)+"</td><td>"+rs.getString(10)+"</td></tr>");
}
while (rs1.next())
{
String Total = rs1.getString("Total");
out.println("<tr><td><Strong>Total is:</strong></td><td>" + Total + "</td><br>");
}
while (rs2.next())
{
String Overtime = rs2.getString("Overtime");
out.println("<td><Strong>Overtime is:</strong></td><td>" + Overtime + "</td></tr><br>");
}
out.print("</table>");
}
catch(Exception e){
e.printStackTrace();
}
finally {
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (ps != null) {
try {
ps.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
%>
<a href="logout.jsp" class="myButton" >Logout</a></form>
<div id="footer">
</div>
</body>

Give padding-bottom = Height of footer and position :absolute to footer as follows
.content {
padding-bottom: 35px;
}
#footer {
bottom: 0;
font-size: 10pt;
height: 35px;
position: absolute;
width: 100%;
}

Try changing the following css as:
body{
position: relative;
height: auto;
min-height: 100%;
}
table{
margin-bottom: 15px;
}
#footer {
position:relative;
clear:both;
margin-top: -450px;
padding-top: 0;
color:white;
bottom:0;
text-align:center;
width:100%;
height:20px; /* Height of the footer */
background:black;
}

I believe the right answer to this is in design, not in code.
You basically need two, may be three sections of a page. One of them is scrollable, the other two aren't.
So, essentially, it would be something like:
<div class="header">
...content...
</div>
<div class="scrollable">
...content...
</div>
<div class="footer">
...content...
</div>

Most probably you need to give the container above footer margin-bottom equal to height of footer. I think in your cas it is the table:
table { margin-bottom: 20px; }
But consider putting the table into some other container. Like:
<header class="header">...</header>
<div class="content">
...
<table>
...
</table>
...
</div>
<footer class="footer">...</footer>

your css:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
your html:
<title>How To Keep Your Footer At The Bottom of The Page - CSSReset.com</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 7]>
<style type="text/css">
#wrapper { height:100%; }
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
</div><!-- #header -->
<div id="content">
</div><!-- #content -->
<div id="footer">
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

Please change the css for that footer and try again:
#footer {
padding-top: 0;
color:white;
bottom:0;
text-align:center;
width:100%;
height:20px; /* Height of the footer */
background:black;
}

JavaScript gallery moves with sticky header

I have a "Sticky" header and a simple JavaScript gallery. The problem is when i move my page down the header and the gallery both move down.
Here is the JavaScript for the Gallery:
<script language="JavaScript">
var i = 0; var path = new Array();
path[0] = "photo1.png";
path[1] = "photo2.jpg";
path[2] = "photo3.jpg";
path[3] = "photo4.jpg";
path[4] = "photo5.jpg";
path[5] = "photo6.jpg";
path[6] = "photo7.jpg";
function swapImage()
{
document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0;
setTimeout("swapImage()",2000);
}
window.onload=swapImage;
</script>
and the CSS for the header:
#header_container {
background: #b8df50;
background: -moz-linear-gradient(top, #b8df50 0%, #93ad4c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8df50), color-stop(100%,#93ad4c));
background: -webkit-linear-gradient(top, #b8df50 0%,#93ad4c 100%);
background: -o-linear-gradient(top, #b8df50 0%,#93ad4c 100%);
background: -ms-linear-gradient(top, #b8df50 0%,#93ad4c 100%);
background: linear-gradient(to bottom, #b8df50 0%,#93ad4c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8df50', endColorstr='#93ad4c',GradientType=0 );
border:1px solid #666;
height:120px;
left:0;
position:fixed;
width:100%;
top:0;
}

Please check this link:
Demo
JavaScript Code
(function(win){
var i = 0, path = new Array();
path[0] = "https://www.google.co.in/images/srpr/logo11w.png";
path[1] = "http://www.findthatlogo.com/wp-content/gallery/microsoft-logos/microsoft-logo-icon.png";
path[2] = "http://allenmeyerdesign.com/wp-content/uploads/2013/09/new-yahoo-logo.jpg";
path[3] = "http://images2.fanpop.com/images/photos/4200000/old-apple-logo-apple-4235002-294-394.jpg";
win.swapImage = function ()
{
document.getElementById('slide').src = path[i];
if(i < path.length - 1) {
i++;
}
else {
i = 0;
}
setTimeout(function() {
win.swapImage();
},2000);
}
win.swapImage();
})(window);
HTML
<div id="header_container"></div>
<div class="slide-div">
<img id="slide"/>
</div>
CSS
#header_container {
background: #b8df50;
background: -moz-linear-gradient(top, #b8df50 0%, #93ad4c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8df50), color-stop(100%,#93ad4c));
background: -webkit-linear-gradient(top, #b8df50 0%,#93ad4c 100%);
background: -o-linear-gradient(top, #b8df50 0%,#93ad4c 100%);
background: -ms-linear-gradient(top, #b8df50 0%,#93ad4c 100%);
background: linear-gradient(to bottom, #b8df50 0%,#93ad4c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8df50', endColorstr='#93ad4c',GradientType=0 );
border:1px solid #666;
height:120px;
left:0;
position:fixed;
width:100%;
top:0;
}
div.slide-div {
margin: 150px auto 0;
height: 2000px;
}
Thanks!!!

I would like to change these image's title tags into div tags

as you can see at www.thetotempole.ca/javascriptproject2/ I have title attribute's that pop out when hovering over my table's image tags. Instead of titles I need div. Any help will be amazingly appreciated. Thanks guys!
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<meta charset="utf-8">
<title>Arrays</title>
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
#tbl img {
-webkit-transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
}
#tbl td:hover img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
td {text-align: center;}
</style>
</head>
<body>
<center><table id="tbl" border="1">
<tr>
<th>Product Name</th>
<th>Product Description</th>
<th>Product Images</th>
</tr>
</table>
<script>
var products = [
{
name: "Apple",
description: "It might be fruit, or it might be an iPhone",
imageUrl: "images/apple.jpg",
title: "www.apple.com/ca/iphone"
}, {
name: "Dell",
description: "Buy this one online at dell.com",
imageUrl: "images/dell.jpg",
title: "www.dell.com/ca/p/laptops"
}, {
name: "IBM",
description: "If you want a mainframe they still have some",
imageUrl: "images/ibm.jpg",
title: "oldcomputers.net/ibm5150.html"
}, {
name: "Toshiba",
description: "Get a discount through SAIT (maybe)",
imageUrl: "images/toshiba.jpg",
title: "www.toshiba.com/us/computers"
}, {
name: "Atari",
description: "Try a classic gaming machine",
imageUrl: "images/atari.jpg",
title: "www.nintendosforsale.com/"
}, {
name: "Commodore",
description: "64k should be enough for anyone",
imageUrl: "images/commodore.jpg",
title: "http://oldcomputers.net/c64.html"
}
];
var table = document.getElementById("tbl");
products.forEach(function(product) {
var row = document.createElement("tr");
row.appendChild(createCell(product.name));
row.appendChild(createCell(product.description));
row.appendChild(createImageCell(product.imageUrl, product.title));
table.appendChild(row);
});
function createCell(text) {
var cell = document.createElement("td");
cell.innerText = text;
return cell;
}
function createImageCell(url,title){
var image = document.createElement("img");
image.setAttribute("src", url);
image.setAttribute("title",title);
var cell = document.createElement("td");
cell.appendChild(image);
return cell;
}
</script>
<script>
// Table background color
$("tr:even").css("backgroundColor" , "yellow");
$("tr:odd").css("backgroundColor" , "violet");
$("th").css("backgroundColor" , "green");
<!-- End of jquery styling -->
</script>
</center>
</body>
</html>

You can use this at the end of your javascript.
$('td:last-child').hover(function(){
var link = $(this).find('img').attr('title')
var div = $('<div class="tooltip">'+link+'');;
$(this).append(div);
},function(){
$('.tooltip').remove();
});
Now all you have to do is to style div class tooltip (hovered 'td' is his parent).
http://jsfiddle.net/v6tA8/16/

Not quite sure what you are needing to do with having a div wrapped around the title but this solution might help you as it lets you style the title as you wish.
CSS
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
Demo http://jsfiddle.net/tDQWN/
Answer by Andres Ilich / steveax at How to change the style of Title attribute inside the anchor tag?

A div will not appear when i click a trigger

I am making an OS called JSOS and in the bottom
corner is a start button i have some jquery to make the menu appear when i click the button
but it wont appear... heres the code:
JQuery:
$("#startbutton").click(function () {
$("#startmenu").toggle("blind");
});
CSS:
.startmenu {
color:gray;
width:400;
height:650;
}
HTML:
<div id="startmenu" class="startmenu"></div>
<footer id="taskbar" class="taskbar">
<div id="startbutton" style="width:25px; height:25px;">
<img src="start.png" id="startbutton" style="width:25px; height:25px;"></img>
</div>
</footer>

I make you a couple of demos on jsFiddle, it's Windows based Start menu and here's a Fiddle
HTML
<footer id="taskbar" class="taskbar">
<div id="startbutton">
<img src="start.png" alt="Start"/>
</div>
</footer>
CSS
#startmenu {
background: #666;
position: absolute;
display: none;
bottom: 25px;
left: 0;
color: gray;
width: 400px;
height: 650px;
}
#taskbar {
background: #444;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
#startbutton {
background: #ccc;
width: 50px;
height: 25px;
cursor: pointer;
}
jQuery
// DEMO 1
$(function() {
$('#startbutton').click(function() {
$('#startmenu').fadeIn('slow');
});
$('#startmenu').mouseleave(function() {
$(this).fadeOut('slow');
});
});
// DEMO 2
$(function() {
$('#startmenu').css({ height: '0', display: 'block' });
$('#startbutton').click(function() {
$('#startmenu').stop().animate({ height: '650px' }, 600 );
});
$('#startmenu').mouseleave(function() {
$(this).stop().animate({ height: '0' }, 600 );
});
});

1.- To start with you have to have unique IDs. You have #startbutton to both div and img elements.
2.- You need to have visible content in the div you want to show/hide, or add some height/width/border, etc with CSS so you can actually see it. otherwise its there but you don't see it.
<div id="startmenu" class="startmenu">CONTENT</div>, by adding text one can see it; and/or give it height/width/background-color/border with CSS.
Demo here

Try this
Add this to your css display:none; so as to hide the div on the page load and then you can try your code,it works
Working DEMO
Cleaned Code
<html>
<head>
<title>Desktop</title>
<link rel="stylesheet" href="dotluv.css" />
</head>
<body>
<style>
.taskbar {
background-image: linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -o-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -moz-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -webkit-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -ms-linear-gradient(bottom, #1F5E3E 32%, #1BC27A 66%, #0CC9C9 83%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.32, #1F5E3E),
color-stop(0.66, #1BC27A),
color-stop(0.83, #0CC9C9)
);
width:100%;
height:25px;
position: fixed;
bottom: 0px;
cursor:pointer;
}
.background {
background-image: linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -o-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -moz-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -webkit-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -ms-linear-gradient(bottom, #F08C11 22%, #21FCFC 61%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.22, #F08C11),
color-stop(0.61, #21FCFC)
);
width:1350;
height:628;
}
.window {
width:640;
height:530;
color:aqua;
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}
#startmenu{
display:none;
}
.startmenu {
background:gray;
width:400;
height:650;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#welcomedialog" ).dialog({
height: 140,
modal: true,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#internetwindow" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#internetopener" ).click(function() {
$( "#internetwindow" ).dialog( "open" );
});
$( "#startbutton" ).click(function() {
$( "#startmenu" ).toggle( "blind" );
});
});
</script>
<div id="background" class="background">
<div id="welcomedialog" title="Welcome">
<span style="color:#cf00ff;">H</span><span style="color:#d727c3;">e</span><span style="color:#df4e87;">l</span><span style="color:#e6744b;">l</span><span style="color:#ee9b0f;">o</span><span style="color:#f2b40b;"> </span><span style="color:#f7cd08;">a</span><span style="color:#fbe604;">n</span><span style="color:#ffff00;">d</span><span style="color:#bfff00;"> </span><span style="color:#80ff00;">w</span><span style="color:#40ff00;">e</span><span style="color:#00ff00;">l</span><span style="color:#00ff40;">c</span><span style="color:#00ff80;">o</span><span style="color:#00ffbf;">m</span><span style="color:#00ffff;">e</span><span style="color:#00bfff;"> </span><span style="color:#0080ff;">t</span><span style="color:#0040ff;">o</span><span style="color:#0000ff;"> </span><span style="color:#4000bf;">J</span><span style="color:#800080;">S</span><span style="color:#bf0040;">O</span><span style="color:#ff0000;">S</span>
</div>
<div id="startmenu" class="startmenu"></div>
</div>
<footer id="taskbar" class="taskbar"><div id="startbutton" style="width:25px; height:25px;"><img src="start.png" style="width:25px; height:25px;"></img></div></footer>
</body>
</html>