I was trying to create a lightbox, so that a form that I have to open in a lightbox. Bellow there is my javascript, html and css code. Everything is working fine. My only problem is that if I start maximizing or minimizing the explorer's window, the white content that includes the form does not keep the same fixed size that I gave at the beginning. I want it to keep the size that I gave it at the begining without changing size while minimizing or maximizing the window (i want it to be like the lightbox uses facebook when displays the photo). any ideas how to do this?
p><img src="img/add.jpg"/></p>
<div id="light" class="white_content">
<table border="0">
<td >
<fieldset style="width:530px; padding-left:5px; background-color:white " >
<h2><font color="#5D5D5D" size="2" face="caecilia-light', face="helvetica,arial,sans-serif" >
</br>
School</br>
<input name="school_1" type="text" size="73" value="<?php echo $user_data_profile_education['school_1']; ?>"/>
</br></br>
Study</br>
<input name="field_1" type="text" size="73" value="<?php echo $user_data_profile_education['field_1']; ?>"/>
</br></br>
Specialized </br>
<input name="specialized_subject_1" type="text" size="73" value="<?php echo $user_data_profile_education['specialized_subject_1']; ?>"/>
</br></br>
Degree</br>
<input name="degree_1" type="text" size="73" value="<?php echo $user_data_profile_education['degree_1']; ?>"/>
</br></br>
Grade</br>
<input name="grade_1" type="text" size="73" value="<?php echo $user_data_profile_education['grade_1']; ?>"/>
</h2></font>
</fieldset>
</td>
</table>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
</br><img src="img/done_editing.jpg"/> </a></div>
<div id="fade" class="black_overlay"></div>
and this is my CSS :
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 220%;
background-color: grey;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 45%;
left: 30%;
width: 32%;
height: 51%;
padding: 30px;
padding-left:50px;
border: 5px solid green;
background-color: white;
z-index:1002;
overflow: auto;
}
Looks like you're using percentages instead of a fixed unit to set the size of the lightbox.
Try this:
.white_content {
width: 320px;
height: 480px;
}
Related
I have some code that I need help with. This will be a google style search function and I will have a separate page for screen reader users. My form looks like this:
<div id="main">
<input type="text" name="search" tabindex="<?php echo $tab++; ?>" onfocus="display_results_table()"><br>
<input type="submit" name="submit" tabindex="<?php echo $tab++; ?>">
<input type="reset" name="reset" tabindex="<?php echo $tab++; ?>">
</div>
<div id="results">
</div>
The reason I am using PHP to do my tab indexes is so I don't have to put them in manually and I have an element called results beneath that. I have styled each element like so:
#main {
border-radius: 1em;
width: 50%;
margin: 25%;
background: #FFFFFF;
border: #000000 medium solid;
}
#results {
margin-left: 30%;
width: 40%;
margin-top: 10%;
background: #FFFFFF;
border: #000000 thin solid;
display: none;
}
My javascript looks like this:
<script type="text/javascript">
function display_results_table()
{
document.getElementById("main").style.marginLeft = "0%";
document.getElementById("main").style.width = "30%";
document.getElementById("main").style.borderRadius = "0";
document.getElementById("main").style.borderRight = "0";
document.getElementById("results").style.display = "block";
}
</script>
The element mail performs as expected however I cannot get the results element to display. Can you point me in the right direction?
Hi I just want to ask what's wrong with my program. Im doing this program where I have to choose a file. But the button is an image and I would like to add a tooltip that this image is for selecting a file. This block of codes is perfectly working in chrome. But when I run it in IE11 the title "Select File"is not showing in IE11. I didn't know that IE has a lot of restriction. Unlike in chrome.
.image-upload>input {
visibility: hidden;
width: 0px;
height: 0px;
margin: -10%;
}
div.item {
vertical-align: top;
display: inline-block;
text-align: center;
width: 250px;
img {
width: 90px;
height: 50px;
}
.caption {
display: block;
color: white;
}
div.space {
margin-top: -15px;
}
<div class="image-upload">
<label for="file-input">
<p align="left"><font face="Arial" color="black" size = "5"><b>   Select File    </b><span style="cursor:pointer" alt="Select File" title="Select File">
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p></label>
</label>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
You need to remove the inline style of pointer-events:none from the image tag if you want to be able to hover it.
By setting it to none, it means your mouse can't interact with the element and therefore it cannot hover it to show the title.
Try this:
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" id="img" title="Select File"/>
Example fiddle showing with and without pointer events
More information about pointer events
Also please note the following errors with your code:
the font tag is obsolete and should not be used - use css instead
  should have a semi colon after it:
there is an extra end label and I don't think you are allowed p tags inside - use a validator to check your code
<div class="image-upload">
<p align="left"><label for="file-input"><b> Select File </b>
</label></p>
<span style="cursor:pointer; display:inline-block;" alt="Select File" title="Select File"><label for="file-input"><img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" id="img" title="Select File"/>
</label></span>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
you could add another span ( for example ), give it position absolute, and on hover on the image, show it .
you can also you javascript ( jquery ) to show it in the same position your cursor is, but that's a bit more complicated.
See below if this is what you want
.title {
transition: 0.3s ease-out;
opacity: 0;
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
font-size: 15px;
background: #fff;
}
.wrapper {
display: inline-block;
position: relative;
}
.wrapper:hover .title {
opacity: 1;
}
<div class="image-upload">
<label for="file-input">
<p align="left"><font face="Arial" color="black" size="5"><b>   Select File    </b> <span class="wrapper" style="cursor:pointer" alt="Select File" title="Select File">
<span class="title">Select File</span>
<img src="http://icons.veryicon.com/ico/Folder/Black%20glamour/Files.ico" style="pointer-events: none" id="img" title="Select File"/></span></font></p>
</label>
</label>
<input id="file-input" type="file" name="file" onchange="onFileSelected(event)" onclick=getName() required>
</div>
This is a page code that shows attendance report of student.I want checkbox in colored if checked green else red.please help me to do this.I tried it but didn't work.Now i can click only on one checkbox that change color.check this image: http://i.stack.imgur.com/JgICk.png
<style>
.checkbox {
margin: 0 0 2em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input {
display: none;
}
.input + label {
-webkit-appearance: none;
background-color: red;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 9px;
display: inline-block;
position: relative;
}
.input:checked + label:after {
background-color: green;
color: #595959;
content: '\2714';
font-size: 10px;
left: 0px;
padding: 2px 8px 2px 2px;
position: absolute;
top: 0px;
}
</style>
<?php
if(isset($_POST["submit"]))
{
//Here goes array
for($i=0;$i<count($_POST['student']);$i++)
{
$name=$_POST['student'][$i];
echo $name;
}
}
?>
</head>
<body >
Report Attendance
<form name="myform" action="" method="post">
<div class="checkbox">
<table border="1" cellspacing="2" cellpadding="5" summary="">
<?php while ($row = mysql_fetch_assoc($res)){?>
<tr><td> <input type="checkbox" class="input" id="input" name="student[]" value="<?php echo $row['stu_id']; ?>" checked="checked" > <?php echo $row['stu_name'] ; ?> <label for="input"></label>
<br/></td></tr>
<?php }?>
</table>
<input type="submit" name="submit" value="submit"/>
</div>
</form>
</body>
</html>
You just need to make id as unique and labels should point to unique id. Here is the jsfiddle with static HTML https://jsfiddle.net/sua2wsm1/
below changes required in your HTML page
<table border="1" cellspacing="2" cellpadding="5" summary="">
<?php while ($row = mysql_fetch_assoc($res)){?>
<tr><td> <input type="checkbox" class="input" id="input<?php echo $row['stu_id']; ?>" name="student[]" value="<?php echo $row['stu_id']; ?>" checked="checked" > <?php echo $row['stu_name'] ; ?> <label for="input<?php echo $row['stu_id']; ?>"></label>
<br/></td></tr>
<?php }?>
Actually, duplicates ID can be the problem. A label is link to an input with the for attribute. So, if you click on the label, it'll be the same as clicking on the input. Your css is hiding the inputs, and using label:after as a box. So, if all inputs have the same id, clicking on a label will not work as expected
I've wired scenario here I've a php page which has multiple form not nested though.
they are all hidden div's they will popup once button click. the code below is show and hide the div that will record.
<style type="text/css">
.ontop4 {
z-index: 999;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: none;
position: absolute;
background-color: #434343;
opacity: .95;
/*filter: alpha(opacity = 90);*/
}
#popup4 {
border: 1px solid;
border-radius: 25px;
border-color: green;
width: 500px;
height: 500px;
position: absolute;
background-color: #ffffff;
top: 20%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
}
</style>
<form role="form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post" id="form_edit_note">
<input type="hidden" name="hidden_note_case_id" value="<?php echo $findCase->id; ?>" />
<input type="hidden" name="hidden_note_id" value="<?php ?>" />
<div id="popDiv3" class="ontop4">
<div class="row" id="popup4">
<div class="col-md-12">
<div class="portlet">
<div class="portlet-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea rows="2" cols="63" name="pic_note"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 ">
<div class="portlet-body form">
<div class="form-body pull-right">
Cancel
<input type="submit" name="saveAttach" id="saveAttach" value="Save" class="btn yellow btn-xs">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
the data i need to edit is displaying in my main form which is a simple php while loop. what i want to know how to set the below variable
<input type="hidden" name="hidden_note_id" value="<?php ?>" />
I would like to have this hidden_note_id value set dynamically i mean passing through on click edit on one of them notes to transfer note_id through ajax, jQuery or which ever way. Please help
I may not have conveyed my message properly but I'll make it simple that on my main page there are multiple notes are displayed user can edit any note but the form above is outside the scope of that form so how would I get the note id that user has decided to edit .
any idea?
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.