I've tried making a fixed width for the body tag but it seem to not work like it does to others... i'm obviously doing something wrong.
My question is : how do i make the screen not shrink and cause objects to be out of place
either by minimizing the screen or using a lower resolution?
I tried using percentages, as it is currently but it's not flawless.
if you want to view the page yourself here it is
<style type="text/css">
div.register {
border-style: hidden;
position: absolute;
right: 20.1%;
left: 20.1%;
top: 25%;
bottom: 5%;
background-color: lightblue;
border-radius: 5px;
font: 150% simple CLM;
box-shadow: 2px 2px 20px #c1b7b7;
}
input.button {
font:15px simple CLM;
width:100px;
border-style:none;
border-radius:3px;
}
div.sleve {
background-color: white;
position: fixed ;
right:20%;
left: 20%;
top: 1px;
bottom: 1px;
box-shadow: 0px 5px 20px #c1b7b7;
border-radius:10px
}
div.bar {
position: absolute;
right: 20%;
left: 20%;
top: 17.5%;
background-color: #2D95B5;
font: 100% simple CLM;
color: white;
height: 40px;
border-top-width:1px;
border-bottom-width:1px;
border-left-width:0px;
border-right-width:0px;
border-style:solid;
border-color:black;
}
td.barbutton {
width:200px;
height:35px;
left:50px;
right:50px;
text-align:center;
}
td.barbutton:hover {
background-color: #30A3C6;
}
div.register2 {
position: fixed;
height: 75%;
width: 70%;
left: 15%;
top: 10%;
background-color: lightblue;
border-color: navajowhite;
box-shadow: 0px 1px 20px 1px #c1b7b7;
border-radius: 10px;
opacity: 0;
font: 125% simple CLM;
}
div.register3 {
position: fixed;
height: 75%;
width: 70%;
left: 15%;
top: 10%;
background-color: lightblue;
border-color: navajowhite;
box-shadow: 0px 1px 20px 1px #c1b7b7;
border-radius: 10px;
opacity: 0;
display: none;
font: 125% simple CLM;
}
input.text {
width: 150px;
height:20px;
border-style:none;
border-radius:3px;
font-size:60%;
text-align:left
}
input.password {
width: 150px;
height: 20px;
border-style: none;
border-radius: 3px;
font-size: 60%;
text-align:left
}
input.button:hover {
background-color: #EBE7E7;
border-color: white;
}
</style>
<div class="sleve"></div>
<div class="bar">
<table>
<tr>
<td class="barbutton" onclick="window.location='Main.aspx'">ראשי</td>
<td class="barbutton">טקסט</td>
<td class="barbutton">טקסט</td>
<td class="barbutton">טקסט</td>
<td class="barbutton">טקסט</td>
<td class="barbutton" onclick="window.location='Register.aspx'">הירשם</td>
</tr>
</table>
</div>
<div class="register" id="register1" dir="ltr" >
<center style="font-size:150%; margin-top:5%;"><font face="simple clm">הרשמה לאתר</font></center>
<form action="">
<table dir="rtl" style="position:relative; margin-top:5%; margin-right:10%; font-size:100%" cellpadding="17.5%" cellspacing="15%;">
<tr>
<td>שם משתמש</td>
<td><input class="text" dir="ltr" id="ID" name="ID" /> <br /><p id="iderror" style="position:absolute; top:11%; color:red; font:65% arial; display:none">חייב להכיל בין 3 עד 16 תווים</p></td>
</tr>
<tr>
<td>סיסמא</td>
<td><input dir="ltr" class="password" type="password" id="PW" name="PW" /><br /><p id="pwerror" style="position:absolute; top:30.5%; color:red; font:65% arial; display:none">חייב להכיל בין 6 עד 24 תווים</p></td>
</tr>
<tr>
<td>אימייל</td>
<td><input class="text" dir="ltr" id="EMAIL" name="EMAIL" /><br /><p id="emailerror" style="position:absolute; top:50%; color:red; font:65% arial; display:none">חובה להכניס אימייל תקין</p></td>
</tr>
<tr>
<td>שנת לידה</td>
<td><input class="text" id="BDyear" maxlength="4" style="width:8%" /> / <input class="text" id="BDmonth" maxlength="2" style="width:5%" /> / <input class="text" id="BDday" maxlength="2" style="width:5%" /><br />
<p id="bderror" style="position:absolute; top:70%; color:red; font:65% arial; display:none"> תאריך לידה לא תקין</p>
<p id="bderroryoung" style="position:absolute; top:70%; color:red; font:65% arial; display:none"> חובה להיות מעל גיל 13</p>
</td>
</tr>
<tr>
<td colspan="2"><center></center></td>
</tr>
<tr>
</tr>
</table>
<input type="button" id="SEND" name="SEND" value="המשך" class="button" onclick="validate()" style="position:absolute; left:50%; bottom:25%" />
<p style="position:absolute; left:45%; bottom:10%; font-size:medium" >כבר יש לך משתמש?  התחבר</p>
</form>
</div>
<div class="register2" id="register2" style="display:none">
<center style="font-size:150%; margin-top:5%;"><font face="simple clm">עריכת פרופיל</font></center>
<table style="position:absolute; bottom:30%; right:30%">
<tr>
<td></td>
<td></td>
</tr>
</table>
<form>
<table dir="rtl" style="position:absolute; right:15%; bottom:15%" cellpadding="15%" cellspacing="20%">
<tr>
<td>שם מלא</td>
<td><input class="text" id="fullname" name="fullname" /></td>
</tr>
<tr>
<td>מין</td>
<td><input style="height:15px; width:30px" type="radio" id="male" name="gender" value="זכר" />זכר <input type="radio" style="height: 15px; width: 30px" id="female" name="gender" />נקבה</td>
</tr>
<tr>
<td>עיסוקים\תחביבים</td>
<td><input class="text" id="hobbies" name="hobbies" /></td>
</tr>
<tr>
<td>איזור בארץ</td>
<td><input class="text" id="livingarea" name="livingarea" /></td>
</tr>
<tr>
<td>קצת על עצמך</td>
<td><textarea style="width: 200%; height: 100px; border-style: none; border-radius: 3px; font-size: 80%; "></textarea></td>
</tr>
</table></form>
<p style="position: fixed; left: 15.5%; top: 22.5%; width: 20%; font: 100% simple CLM;">תמונת פרופיל</p>
<img style="position: absolute; left: 17%; top: 25%; width: 12%; box-shadow: 0px 1px 20px #c1b7b7;" src="img/placeholder.png" />
<input class="button" type="button" value="העלה" style="position: fixed; left: 31.5%; top: 45.5%; width: 80px; font: 75% simple CLM;" />
<input class="button" type="button" value="קישור" style="position: fixed; left: 26.5%; top: 45.5%; width: 80px; font: 75% simple CLM;" />
<p style="position:absolute; right:20%; bottom:10%; font: small arial; color:red">*לא חובה למלא פרטים אלה</p>
<input class="button" type="button" style="position:absolute; width:200px; height:30px; right:40%; bottom:5%; font: large simple CLM" value="הירשם" onclick="done()" />
<input class="button" type="button" style="position:absolute; width:200px; height:30px; right:5%; bottom:5%; font: large simple CLM" value="חזרה" onclick="backwards()" />
</div>
<div id="register3" class="register3" >
<center style="font-size:150%; margin-top:5%;"><font face="simple clm">ההרשמה בוצעה בהצלחה</font></center>
<center><p id="finishtext" style="margin-top:10%"></p></center>
<input type="button" class="button" style="position:absolute; left:43%; bottom:20%; width:200px; height:30px" value="חזרה לעמוד הראשי" onclick="location = 'register.aspx'" />
</div>
</body
this does not include any of the javascript functions and will not do anything if you click. it's just an example of what happens - full hd users will see it perfectly and as you take down the resolution it starts to get out of place
If you're talking about preventing the body from going below a certain width, it seems you may want to look at min-width
E.g:
html,body{
width:100%;
min-width:980px;
}
More from MDN
The min-width CSS property is used to set the minimum width of a given
element. It prevents the used value of the width property from
becoming smaller than the value specified for min-width.
The value of min-width overrides both max-width and width.
If you're thinking along the lines of scaling content based on viewport size, you should look at vh or vw units.
Viewport-percentage lengths defined a length relatively to the size of
viewport, that is the visible portion of the document. Only
Gecko-based browser are updating the uw3e values dynamically, when the
size of the viewport is modified (by modifying the size of the window
on a desktop computer or by turning the device on a phone or a
tablet).
If you want the page to be reactive depending on size- most likely your best solution will be to use media queries in order to help you specifically dictate how content should appear at certain sizes/resolutions.
A media query consists of a media type and at least one expression
that limits the style sheets' scope by using media features, such as
width, height, and color. Media queries, added in CSS3, let the
presentation of content be tailored to a specific range of output
devices without having to change the content itself.
Related
So I working on my integration of JS into my HTML and I want my web page to look some what presentable for a low level programmer. I've tried putting different divisions around and image (so two on the left vertically aligned and then an image the is the height of them combined in the gap on the right to fill the rest of that row.
I've tried the normal method of:
#insertDivIdHere{
float:left;
}
#otherDivIdHere{
float:left;
}
#insertImgIdHere{
float:left;
}
This method ends up with some weird formatting issues where the divisions overlap and the objects (ie buttons and text boxes) disappear and the image is to low.
Here is the HTML and CSS if you want to try it out (but I've left out my JS because I see no point in sharing it:
#header{
font-size: 16px;
background-color:lightsteelblue;
padding:12px;
text-align:center;
}
#form{
height: 30px;
width: 100px;
}
#formdiv {
background-color: lightcyan;
padding:12px;
height: 200px;
width:300px;
float: left;
}
#ageRange{
height: 30px;
width: 120px;
}
#ageRangeDiv{
background-color: lightgrey;
padding:12px;
height:140px;
width:300px;
float: left;
}
#creds{
border-radius: 5%;
box-shadow: lightskyblue;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
padding:3px;
}
#age{
border-radius: 5%;
box-shadow: lightskyblue;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
position: relative;
padding:3px;
}
#image{
width: auto;
height: 340px;
float:left;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700"rel="stylesheet">
<title>Intergration</title>
<script src="script.js"></script>
</head>
<body>
<div id="header">
<h1>Web intergration</h1>
</div>
<div>
<div id="formdiv" name="formdiv">
<form id="form" name="form">
First Name <input type="text" name="firstName" ><br>
<br>
Last Name <input type="text" name="lastName" ><br>
<br>
Email <input type="email" name="email"><br>
</form>
<br><br><br><br><br><br><br>
<button type="button" id="creds" onclick="validCreds()">Confirm</button>
</div>
<div id="ageRangeDiv">
<form id="ageRange" name="ageRange">
<input type="radio" name="R1" id="U13" checked>Under 13 <br>
<input type="radio" name="R1" id="U18">13-18 <br>
<input type="radio" name="R1" id="U30">19-30 <br>
<input type="radio" name="R1" id="U50">31-50 <br>
<input type="radio" name="R1" id="O50">Over 50 <br>
</form>
<br><br><br><br>
<button type="button" id="age" onclick="validAge()">Confirm</button>
</div>
<div>
<img src="eve.jpg" id="image">
</div>
</div>
</body>
</html>
This is an example of how to use the inline-flex to align your content i hope you can modify them to do your layout.
#media only screen and (min-width: 600px) {
.container {
display: inline-flex;
}
.container div {
border: 1px solid red;
padding: 1em;
margin: 1em;
}
.container>div+div {
margin: auto;
}
}
#media only screen and (max-width: 600px) {
.container div:not(first-child) {
border: 1px solid red;
}
}
<div class="container">
<div>
<div>
1
</div>
<div>
2
</div>
</div>
<div>
3
</div>
</div>
I have a div with table inside. The div is full in width, but whenever I resized the screen, the div will reduce its size then its content will overlapped the div.
Now, I want the minimum width of the div based on the contents(table).
My main div is class="search".
Here is the link for my codes:
.search {
border: 2px solid #FDBF3B;
background-color: #FFEBC1;
padding: 10px;
margin: 5px 0;
}
.search table {
border: none;
}
.search .header {
margin-bottom: 5px;
border-bottom: 1px solid #FDBF3B;
padding-bottom: 2px;
color: #000F1F;
font-weight: bold;
overflow: hidden;
}
.search .buttons {
margin-top: 5px;
border-top: 1px solid #FDBF3B;
padding-top: 8px;
white-space: nowrap;
}
.inner {
padding: 7px;
min-height: 480px;
z-index: 1;
overflow: auto;
}
<DIV class=inner>
<DIV class=search sizset="false" sizcache017720493147691946="40 33 1">
<DIV class=header>Search Options </DIV>
<TABLE sizset="false" sizcache017720493147691946="40 33 1">
<TBODY sizset="false" sizcache017720493147691946="40 33 1">
<TR>
<TD></TD>
<TD class=LABEL>
<SPAN id=LBL_NAME>Name:</SPAN>
</TD>
<TD>
<INPUT name=NAME style="BACKGROUND-COLOR: #ffffff" type=text size=15 maxLength=10 data-dpmaxz-eid="4">
</TD>
</TR>
<TR>
<TD></TD>
<TD class=LABEL>
<SPAN id=LBL_ADDRESS>Address:</SPAN>
</TD>
<TD>
<INPUT name=ADDRESS style="BACKGROUND-COLOR: #ffffff" type=text size=40 maxLength=50 data-dpmaxz-eid="5"> </TD>
</TR>
</TBODY>
</TABLE>
<DIV class=buttons>
<INPUT name=SEARCH class=BUTTON type=button value=Search>
<INPUT name=SEARCH class=BUTTON type=button value=Clear>
<INPUT name=CREATE class=BUTTON type=button value=Create> </DIV>
</DIV>
</DIV>
apply min-width to parent div and manage overflow in body. Whenever you reduce widnow width lesser then search div's width, there will be a scroll in body.
.body{
overflow: scroll;
}
.search {
min-width:380px;
}
<div class="QuestionBody">
<table role="presentation" class="ChoiceStructure" cellpadding="0" cellspacing="0" border="0">
<tbody> <tr>
<td width="20%" class="LabelContatiner ">
<span class="LabelWrapper">
<label for="QR~QID9~1" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected" style="padding-top: 0px; padding-bottom: 20px;">
<span>0-5</span>
</label>
</span>
<label for="QR~QID9~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label>
</td>
<td width="20%" class="LabelContatiner alt">
<span class="LabelWrapper">
<label for="QR~QID9~2" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected" style="padding-top: 0px; padding-bottom: 20px;">
<span>6-10</span>
</label>
</span>
<label for="QR~QID9~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label>
</td>
<td width="20%" class="LabelContatiner ">
<span class="LabelWrapper">
<label for="QR~QID9~3" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected" style="padding-top: 0px; padding-bottom: 20px;">
<span>11-15</span>
</label>
</span>
<label for="QR~QID9~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label>
</td>
<td width="20%" class="LabelContatiner alt">
<span class="LabelWrapper">
<label for="QR~QID9~4" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected" style="padding-top: 0px; padding-bottom: 20px;">
<span>16-20</span>
</label>
</span>
<label for="QR~QID9~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> </td> <td width="20%" class="LabelContatiner ">
<span class="LabelWrapper">
<label for="QR~QID9~5" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.5.Selected" style="padding-top: 0px; padding-bottom: 20px;">
<span>20+</span>
</label>
</span>
<label for="QR~QID9~5" class="q-radio" data-runtime-class-q-checked="runtime.Choices.5.Selected"></label>
</td>
</tr>
<tr>
<td style="width: 20%;" class="ControlContainer ">
<input choiceid="1" class="radio QR-QID9-1" type="radio" name="QR~QID9" id="QR~QID9~1" value="1" data-runtime-checked="runtime.Selected">
</td>
<td style="width: 20%;" class="ControlContainer alt">
<input choiceid="2" class="radio QR-QID9-2" type="radio" name="QR~QID9" id="QR~QID9~2" value="2" data-runtime-checked="runtime.Selected">
</td>
<td style="width: 20%;" class="ControlContainer ">
<input choiceid="3" class="radio QR-QID9-3" type="radio" name="QR~QID9" id="QR~QID9~3" value="3" data-runtime-checked="runtime.Selected">
</td>
<td style="width: 20%;" class="ControlContainer alt">
<input choiceid="4" class="radio QR-QID9-4" type="radio" name="QR~QID9" id="QR~QID9~4" value="4" data-runtime-checked="runtime.Selected">
</td>
<td style="width: 20%;" class="ControlContainer ">
<input choiceid="5" class="radio QR-QID9-5" type="radio" name="QR~QID9" id="QR~QID9~5" value="5" data-runtime-checked="runtime.Selected">
</td>
</tr>
</tbody>
</table>
</div>
Being a beginner to programming, I'm trying to make my questionnaire Copie look like this Prototype . I need a slider that connects all the answer-choices and progresses from left to right according to the answer.Unfortunately, it is not possible to change the HTML code of the website so it must be done either by adding JavaScript or CSS. Any ideas that could help?
Yeah this is pretty simple. I'd first tackle the bar which you want to light up with the progress. For this I'd start with a containing div.
<div class="Progress"></div>
I'd then style this to be the base bar background, looking at your design, something along the lines of:
.Progress {
position: relative;
width: 600px;
height: 15px;
background: #888;
}
Then I'd make the process bar, which is the bar which will run in the background leading its way with the dots.
<div class="Progress">
<div class="Progress__glow"></div>
</div>
The style for this would be something along the lines of:
.Progress__glow {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
background: lightblue;
width: 0%;
}
This will follow the path of the containing div. Changing the width of the element will then change the width of the process. For example.
<div class="Progress_glow" style="width: 50%"></div>
You can set this with Javascript.
For the dots, I'd do something like this.
.Dot {
position: absolute;
top: -5px;
height: 25px;
width: 25px;
border-radius: 50%;
background: #fff;
}
.Dot--active {
background: lightblue;
}
.Dot--one {
left: 0%;
}
.Dot--two {
left: 25%;
}
.Dot--three {
left: 50%;
}
.Dot--four {
left: 75%;
}
.Dot--five {
left: 100%;
}
You can then along with setting the % width of the glow set the active state on which dots have been passed with Javascript.
An example of the CSS working: http://codepen.io/JosephSmith127/pen/KVpxoz
Obviously you can see some tweaks are needed. But this should give you a great start!
I've modified the codepen.io example from JosephSmith to include jquery events when you click on the dots to move the glowline to the clicked on dot: http://codepen.io/anon/pen/GZNGVR
HTML HEAD:
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
HTML:
<div class="container">
<div class="Progress">
<span id="dotOne" class="Dot Dot--one Dot--active"></span>
<span id="dotTwo" class="Dot Dot--two"></span>
<span id="dotThree" class="Dot Dot--three"></span>
<span id="dotFour" class="Dot Dot--four"></span>
<span id="dotFive" class="Dot Dot--five"></span>
<div class="Progress__glow" style="width: 0%;"></div>
</div>
</div>
CSS:
/* You don't need this bit */
.container {
margin: 50px;
}
.Progress {
position: relative;
border-radius: 99em;
width: 600px;
height: 15px;
background: #888;
}
.Progress__glow {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
background: lightblue;
width: 0%;
}
.Dot {
display: block;
position: absolute;
width: 25px;
height: 25px;
top: -5px;
border-radius: 50%;
background: #ccc;
z-index: 2;
}
.Dot--active {
background: lightblue;
}
.Dot--one { left: 0%; }
.Dot--two { left: 25%; }
.Dot--three { left: 50%; }
.Dot--four { left: 75%; }
.Dot--five { left: 98%; }
JS:
$('#dotOne').click(function() {
$('.Progress__glow').css('width', '0%');
$('#dotOne').addClass('Dot--active');
$('#dotTwo').removeClass('Dot--active');
$('#dotThree').removeClass('Dot--active');
$('#dotFour').removeClass('Dot--active');
$('#dotFive').removeClass('Dot--active');
});
$('#dotTwo').click(function() {
$('.Progress__glow').css('width', '26%');
$('#dotOne').addClass('Dot--active');
$('#dotTwo').addClass('Dot--active');
$('#dotThree').removeClass('Dot--active');
$('#dotFour').removeClass('Dot--active');
$('#dotFive').removeClass('Dot--active');
});
$('#dotThree').click(function() {
$('.Progress__glow').css('width', '51%');
$('#dotOne').addClass('Dot--active');
$('#dotTwo').addClass('Dot--active');
$('#dotThree').addClass('Dot--active');
$('#dotFour').removeClass('Dot--active');
$('#dotFive').removeClass('Dot--active');
});
$('#dotFour').click(function() {
$('.Progress__glow').css('width', '76%');
$('#dotOne').addClass('Dot--active');
$('#dotTwo').addClass('Dot--active');
$('#dotThree').addClass('Dot--active');
$('#dotFour').addClass('Dot--active');
$('#dotFive').removeClass('Dot--active');
});
$('#dotFive').click(function() {
$('.Progress__glow').css('width', '101%');
$('#dotOne').addClass('Dot--active');
$('#dotTwo').addClass('Dot--active');
$('#dotThree').addClass('Dot--active');
$('#dotFour').addClass('Dot--active');
$('#dotFive').addClass('Dot--active');
});
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 7 years ago.
Improve this question
I`m trying to make a form that has 3 inputs:
image (file) upload
1st text field
2nd text field (that saves entered text as .txt file and displays a link in the third column)
After entering all 3 inputs, I would like to add the data into existing html table as an additional row.
Could you please suggest where should I start? Do I need to use mySQL in order to accomplish this? Or I can only use PHP and jQuery?
Here is the link to my page: https://jsfiddle.net/tvLn0qw7/
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:white;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:orange;
}
p {
line-height:1.5;
margin:0 0 1em;
}
div#container {
position: relative; /* needed for footer positioning*/
margin: 0 auto; /* center, not in IE5 */
width: 1000px;
background-color: #FFFFFF;
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%;
border: 2px solid #000000;
}
div#header {
padding: 1em;
background: #ddd url("../csslayout.gif") 98% 10px no-repeat;
border-bottom: 6px double gray;
text-align: center;
margin: 0 auto;
}
div#header p {
font-style:normal;
font-size:1.1em;
margin:0;
}
div#content {
padding:0em 0em 5em; /* bottom padding for footer */
border-color: #000000;
border: 2px;
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
text-align:center;
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
background:#ddd;
border-top:6px double gray;
}
div#footer p {
padding:0.5em;
margin:0;
}
table {
margin: auto;
text-align: center;
color: #0454A8;
font-size: xx-large;
font-style: normal;
font-weight: bold;
border: 1px;
border: #000000;
}
body,td,th {
color: #000000;
}
#upload {
margin: auto;
text-align: center;
}
a:link {
color: #3757A3;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/crown1.png" width="108" height="77" alt=""/><br><br>
<p>Databse</p>
</div>
<div id="content">
<br><br>
<table width="600px" border="2" cellpadding="15" cellspacing="5">
<tbody>
<tr>
<th style="font-size: medium" scope="col"><div align="center">SCREENSHOT</div></th>
<th style="font-size: medium" scope="col">#</th>
<th style="font-size: medium" scope="col">TEXT FILE</th>
</tr>
<tr>
<th width="111" style="font-size: medium" scope="col"><div align="center"><img src="images/b0.png" width="200" height="113" alt=""/></div> </th>
<th width="8" style="font-size: medium" scope="col">1</th>
<th width="79" style="font-size: medium" scope="col">sample.txt</th>
</tr>
</tbody>
</table>
<br><br> <br>
<<br> <br><br>
<div id="upload"><form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
<br><br>
Type #:
<input type="text" size="100">
<br><br>
Insert text here:
<input type="text" size="100">
</form>
</div>
<br><br><br>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
Thank you very much.
You're going to need to use mySQL and PHP to do it. PHP is server side scripting and mySQL is database management. You could use jQuery Ajax, but you are going to need some kind of database to accomplish what you're after.
Edit: Forgot to specify if you want it forever it needs to be in some kind of database.
I have coded a simple HTML5 audio player (javascript and css) thats starts when the user clicks play. I have got it to work with one file on the page. I have copied and pasted the code several times so I can have several files on the same page, the player breaks and won't play any of them. Please, any help is appreciated! Below is my HTML:
<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>
Here is the css:
/* globals */
html {
font:62.5%/1 "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
background: url('background.png');
background-repeat: no-repeat
}
body {
margin: 0 auto;
text-align: center;
}
#audioplayer {
display: block;
overflow: hidden;
width: 30px;
height: 30px;
position: relative;
}
.play,.pause {
background: #fff;
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
margin: 5px;
display: block;
overflow: hidden;
text-indent: -1000px;
}
.play:after {
border-color:transparent transparent transparent #000;
border-style:solid;
border-width: 5px 5px 5px 10px;
width:0;
height:0;
position: absolute;
top: 5px;
left: 6px;
content: '';
}
.pause:after {
border-color: #000;
background: #fff;
border-style:solid;
border-width: 0 3px 0 3px;
width:2px;
height:10px;
position: absolute;
top: 5px;
left: 6px;
content: '';
}
And last but not least my Javascript:
var audio=document.getElementById("audio");var canvasWidth=canvasHeight=30;var radius=canvasWidth/2;var audioplayer=document.getElementById("audioplayer");canvas=document.createElement("canvas");canvas.setAttribute("width",canvasWidth);canvas.setAttribute("height",canvasHeight);canvas.setAttribute("id","canvas");audioplayer.appendChild(canvas);function updateUI(){var f=audio.currentTime;var g=audio.duration;var b=document.getElementById("canvas");var e=b.getContext("2d");var a=y=radius=canvasWidth/2;var d=-Math.PI/2;var c=d+((f/g)*Math.PI*2);b.getContext("2d").clearRect(0,0,canvasWidth,canvasHeight);e.fillStyle="#000";e.beginPath();e.moveTo(a,y);e.arc(a,y,radius,d,c,false);e.closePath();e.fill()}audio.addEventListener("play",function(a){document.getElementById("playpause").innerHTML='Pause'},true);audio.addEventListener("pause",function(a){document.getElementById("playpause").innerHTML='Play'},true);audio.addEventListener("ended",function(a){document.getElementById("playpause").innerHTML='Play'},true);document.getElementById("playpause").addEventListener("click",function(){if(audio.paused){audio.play()}else{if(audio.ended){audio.currentTime=0;document.getElementById("playpause").innerHTML='Pause';audio.play()}else{audio.pause()}}},true);audio.ontimeupdate=updateUI;audio.addEventListener("timeupdate",updateUI);
Iframe added to the HTML:
<tbody>
<tr>
<td style="vertical-align: top;">
<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>
</div>
<br>
</td>
<td style="vertical-align: top;">
<div style="text-align: right;">
</div>
<div style="text-align: right;"><big><big><span style="font-weight: bold;"><small><span class="style2"><span class="style6">May 6, 2011 <span style="font-style: italic;">(Right Click and select Save As to download to your iPod or other MP3 player)</span></span></span></small></span></big></big><br>
<big>
</big></div>
</td>
</tr>
<tr>
<td style="vertical-align: top;"> <iframe src=<div id="audioplayer">
<audio id="audio" src="052011.mp3"></audio>
<span id="playpause" title="Play/Pause">Play</span>
<script type="text/javascript" src="audioplayer-min.js"></script>"></iframe> <br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
<tr>
<td style="vertical-align: top;"><br>
</td>
<td style="vertical-align: top;"><br>
</td>
</tr>
</tbody>
</table>
A couple of months ago I built a jQuery plugin that replaces element with a little of custom HTML code. By adding some CSS you get a whole new player which looks the way you want and has the same functionality as the default player. There is no direct way to style the element. But the HTML5 DOM has methods, properties, and events for the element and thus makes it quite easily manipulable.
try this
http://osvaldas.info/audio-player-responsive-and-touch-friendly
Try to enclosure another player in Iframe or HTML tag