i want to make the title bar fixed(the bar containing my profile,change password) and so for that i have created a class
![when i am clicking on to change password then it does not take completely to the change password][1]
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
but it is not working well i meant to say that the look and feel is not good.
here is my code of index.html
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header> <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Dr. Sukant Kumar nayak</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div align="center" style="padding-top: 30px">
<table align="center" >
<tr >
</tr>
</table>
</div>
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
</td>
<td>
<label for="LastName">LastName</label>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
</td>
<td>
<label for="FirstName">First Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<label for="DateofBirth">Date of Birth</label>
</td>
</tr>
<tr>
<td height="30">
<b>Qualification</b>
</td>
<td>
<label for="LastName">Qualification</label>
</td>
</tr>
<tr>
<td height="30">
<b>Registration. No.</b>
</td>
<td>
<label for="RegistrationNo">Registration No</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country of Registration</b>
</td>
<td>
<label for="CountryofRegistration">Country of Registration</label>
</td>
</tr>
<tr>
<td height="30">
<b>Practice Name</b>
</td>
<td>
<label for="PracticeName">Practice Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
</td>
<td>
<label for="Phone">Phone</label>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
</td>
<td>
<label for="Email">Email</label>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<label for="Address">Address</label>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<label for="Street">Street</label>
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
</td>
<td>
<label for="City">City</label>
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
</td>
<td>
<label for="State">State</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
</td>
<td>
<label for="Country">Country</label>
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<label for="PinCode">Pin Code</label>
</td>
</tr>
<tr>
<td height="30">
<b>How do you know?</b>
</td>
<td>
<label for="HowDoYouKnow">How Do You Know</label>
</td>
</tr>
<tr>
<td height="30">
<b>Comment</b>
</td>
<td>
<label for="Comments">Comments</label>
</td>
</tr>
</table>
</div>
</div>
</div>
</article>
<!-- Article 1 end -->
<!-- Article 2 start -->
<div class="line"></div>
<article id="article2">
<h2>Change Password</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<img src="medical.jpg" width="620" height="340" />
</figure>
<p><div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old" type="password"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="newPsw" type="password"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm" type="password"></td>
</tr>
</table>
</div>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
dh
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
this is the style.css
*{
/* Universal reset: */
margin:0;
padding:0;
}
header,footer,
article,section,
hgroup,nav,
figure{
/* Giving a display value to the HTML5 rendered elements: */
display:block;
}
body{
/* Setting the default text color, size, page background and a font stack: */
font-size:0.825em;
color:#fcfcfc;
background-color:#355664;
font-family:Arial, Helvetica, sans-serif;
}
/* Hyperlink Styles: */
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration:underline;
}
a img{
border:none;
}
/* Headings: */
h1,h2,h3{
font-family:"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
text-shadow:0 1px 1px black;
}
h1{
/* The logo text */
font-size:3.5em;
padding:0.5em 0 0;
text-transform:uppercase;
}
h3{
/* The slogan text */
font-family:forte,"Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
font-size:2em;
font-weight:normal;
margin:0 0 1em;
}
h2{
font-size:2.2em;
font-weight:normal;
letter-spacing:0.01em;
text-transform:uppercase;
}
p{
line-height:1.5em;
padding-bottom:1em;
}
.line{
/* The dividing line: */
height:1px;
background-color:#24404c;
border-bottom:1px solid #416371;
margin:1em 0;
overflow:hidden;
}
article .line{
/* The dividing line inside of the article is darker: */
background-color:#15242a;
border-bottom-color:#204656;
margin:1.3em 0;
}
footer .line{
margin:2em 0;
}
nav{
background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;
padding:0 5px;
position:absolute;
right:0;
top:4em;
border:1px solid #FCFCFC;
-moz-box-shadow:0 1px 1px #333333;
-webkit-box-shadow:0 1px 1px #333333;
box-shadow:0 1px 1px #333333;
}
/* The clearfix hack to clear the floats: */
.clear:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* The navigation styling: */
nav ul li{
display:inline;
}
nav ul li a,
nav ul li a:visited{
color:#565656;
display:block;
float:left;
font-size:1.25em;
font-weight:bold;
margin:5px 2px;
padding:7px 10px 4px;
text-shadow:0 1px 1px white;
text-transform:uppercase;
}
nav ul li a:hover{
text-decoration:none;
background-color:#f0f0f0;
}
nav, article, nav ul li a,figure{
/* Applying CSS3 rounded corners: */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
/* Article styles: */
#page{
width:960px;
margin:0 auto;
position:relative;
}
article{
background-color:#213E4A;
margin:3em 0;
padding:20px;
text-shadow:0 2px 0 black;
}
figure{
border:3px solid #142830;
float:right;
height:300px;
margin-left:15px;
overflow:hidden;
width:500px;
}
figure:hover{
-moz-box-shadow:0 0 2px #4D7788;
-webkit-box-shadow:0 0 2px #4D7788;
box-shadow:0 0 2px #4D7788;
}
figure img{
margin-left:-60px;
}
/* Footer styling: */
footer{
margin-bottom:30px;
text-align:center;
font-size:0.825em;
}
footer p{
margin-bottom:-2.5em;
position:relative;
}
footer a,footer a:visited{
color:#cccccc;
background-color:#213e4a;
display:block;
padding:2px 4px;
z-index:100;
position:relative;
}
footer a:hover{
text-decoration:none;
background-color:#142830;
}
footer a.by{
float:left;
}
footer a.up{
float:right;
}
please tell me how to do that.
when i am clicking on my profile it is taking to the my profile page but the title bar disappears and similarily for the change password also
put this in css file
.pp
{
position:fixed;
top: 30px;
width: 944px;
z-index:1;
top:5px;
}
in body set the header to class pp
<header class="pp"> <!-- Defining the header section of the page with the appropriate tag -->
<hgroup style="float:left">
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
set the line1 id to this class above of articale2
<div class="line" id="line1"></div>
I don't understand why you are pointing p tag,there is no p tag present in your HTML code.
Add position:fixed to nav ul
nav ul{
background:white;
border-radius:6px;
position:fixed;
top:30px;
right:5px;
}
DEMO
As your bar in the nav tag, so you need to write css for nav tag to fixed it, while you have point that you have written css code for p tag.
Related
I am new to Javascript and also new to stackoverflow so if there are any mistakes please try to ignore.
I have an XML file and have applied an XSL transformation.
I am trying to change the content of the XML tags from the form which is in .xslt format and display the changed same using XSLT. Below is my XML and XSLT code.
So this is my XML file. What i want to do is chage the values of name, email and qualification. I used XSLT and displayed the XML in table format, so I should change the row contents when I change the XML contents.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="work.xsl"?>
<student>
<studentlist>
<S.No>1</S.No>
<Name>Student1</Name>
<E-mail>ab#xy.in</E-mail>
<Qualification>MCA</Qualification>
<createdon>6 Jan 2012</createdon>
<Image><img src="/home/walkingtree/Desktop/hemanth practice/new/edit.jpg"/>
<img src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg"/>
</Image>
</studentlist>
<studentlist>
<S.No>2</S.No>
<Name>Student2</Name>
<E-mail>cd#xy.in</E-mail>
<Qualification>BE</Qualification>
<createdon>7 Jan 2012</createdon>
<Image><img src="/home/walkingtree/Desktop/hemanth practice/new/edit.jpg"/>
<img src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg"/>
</Image>
</studentlist>
<studentlist>
<S.No>3</S.No>
<Name>Student3</Name>
<E-mail>ef#xy.in</E-mail>
<Qualification>B.TECH</Qualification>
<createdon>3 Jan 2012</createdon>
<Image><img src="/home/walkingtree/Desktop/hemanth practice/new/edit.jpg"/>
<img src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg"/>
</Image>
</studentlist>
<studentlist>
<S.No>4</S.No>
<Name>Student4</Name>
<E-mail>gh#xy.in</E-mail>
<Qualification>MCA</Qualification>
<createdon>23 Dec 2011</createdon>
<Image><img src="/home/walkingtree/Desktop/hemanth practice/new/edit.jpg"/>
<img src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg"/>
</Image>
</studentlist>
</student>
This is my XSLT file:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Login form</title>
<style>
input{
font: 1em sans-serif;
width: 300px;
box-sizing: border-box;
border: 1px solid #999;
}
.styled-select select {
}
.sel {
font: 1em sans-serif;
width: 230px;
height:31px;
box-sizing: border-box;
border: 2px solid #43C6DB;
height:31px;
background: #fafafa url("/home/walkingtree/Desktop/hemanth practice/editalll/hello.jpg") no-repeat 100% 50%;
index:-1;
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
}
#form-setting{
position:fixed;
left:35%;
top:30%;
width: 390px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 15px 1px;
background-color:#BDEDFF;
}
form div + div {
margin-top: 1em;
}
label {
display: inline-block;
width: 110px;
text-align: left;
}
input{
font: 1em sans-serif;
width: 230px;
height:31px;
box-sizing: border-box;
border: 2px solid #43C6DB;
}
.button {
background-color: #89C35C;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius:6px;
}
option{
height:20px;
}
.button2 {border-radius:6px;
background-color: #E55451;
float:right}
#close{position:fixed;
top:29%;
left:66%;
cursor:pointer;
}
#form-div{
display:none;
background-color:rgba(0,0,0,0.7);
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#edit-div{
display:none;
background-color:rgba(0,0,0,0.7);
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#edit-setting{
position:fixed;
left:35%;
top:30%;
width: 390px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 15px 1px;
background-color:#BDEDFF;
}
</style>
</head>
<body>
<div>
<table border="0" cellspacing="0" width="600px">
<tr>
<th>
<div style="background-color:#EF8224">
<table width="100%">
<tr>
<th style="float:left"><font color="white">StudentList</font></th>
<th style="float:right"><font color="Black">Add</font></th>
<th style="float:right"><img src="/home/walkingtree/Desktop/adding.png" width="17px" align="right"/></th>
</tr>
</table>
</div>
</th>
</tr>
<tr>
<td>
<table width="100%" id="myTable" class="myTab">
<tr bgcolor="#EF8224">
<th style="text-align:left" width="100px">S.No.</th>
<th style="text-align:left">Name</th>
<th style="text-align:left">Email</th>
<th style="text-align:left">Qualification</th>
<th style="text-align:left">CreatedOn</th>
<th style="text-align:left">Action</th>
</tr>
<xsl:for-each select="student/studentlist">
<tr style="background-color:#FFDFD6">
<td><xsl:value-of select="S.No"/></td>
<td><xsl:value-of select="Name"/></td>
<td><xsl:value-of select="E-mail"/></td>
<td><xsl:value-of select="Qualification"/></td>
<td><xsl:value-of select="createdon"/></td>
<td><xsl:for-each select="Image/img"><img width="25px" height="25px" src="{#src}" class="CalloutRightPhoto">
<xsl:attribute name="onclick">
<xsl:choose>
<xsl:when test="contains(#src, 'edit.jpg')">
<xsl:text>edit(this);</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:text>deleteRow(this); </xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</img>
</xsl:for-each>
</td>
</tr>
</xsl:for-each>
</table>
</td>
</tr>
</table>
</div><div id="form-div">
<div id="form-setting">
<p>
<img id="close" src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg" width="10px" height="10px" onclick="closeform()"/>
</p>
<p id="pname">
</p>
<form>
<table>
<tr>
<td>
<div>
<label for="name" >Name<font color="red">*</font>:</label>
<input type="text" id="name" name="user_name"/>
</div>
<div>
<label for="mail" >E-mail<font color="red">*</font>:</label>
<input type="email" id="mail" name="user_mail"/>
</div>
<div>
<label for="qual">Qualification:</label>
<select class="sel" id="selet">
<option value=""></option>
<option value="MCA">MCA</option>
<option value="B.Tech">B.Tech</option>
</select>
</div>
</td>
</tr>
<tr style="width:100%">
<td align="right" style="float:right">
<button type="button" class="button" onclick="sub()">submit</button>
<button class="button button2">reset</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<div id="edit-div">
<div id="edit-setting">
<p>
<img id="close" src="/home/walkingtree/Desktop/hemanth practice/new/close-icon-41.jpg" width="10px" height="10px" onclick="formclose()"/>
</p>
<p id="pname">
</p>
<form>
<table>
<tr>
<td>
<div>
<label for="name" >Name<font color="red">*</font>:</label>
<input type="text" id="ename" name="user_name"/>
</div>
<div>
<label for="mail" >E-mail<font color="red">*</font>:</label>
<input type="email" id="email" name="user_mail"/>
</div>
<div>
<label for="qual">Qualification:</label>
<select class="sel" id="sele">
<option value=""></option>
<option value="MCA">MCA</option>
<option value="B.Tech">B.Tech</option>
</select>
</div>
</td>
</tr>
<tr style="width:100%">
<td align="right" style="float:right">
<button type="button" class="button" onclick="editme()">edit</button>
<button class="button button2">reset</button>
</td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript">
var v=document.getElementById("form-div");
function poped(){
v.style.display="block";
}
function closeform(){
v.style.display="none";
}
function sub(){
var i;
var name=document.getElementById("name").value;
var mail=document.getElementById("mail").value;
var qual=document.getElementById("selet").value;
var table=document.getElementById("myTable");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
var cell4=row.insertCell(3);
var cell5=row.insertCell(4);
var cell6=row.insertCell(5);
cell1.innerHTML="";
cell2.innerHTML=name;
cell3.innerHTML=mail;
cell4.innerHTML=qual;
cell5.innerHTML="";
cell6.innerHTML="";
row.style.backgroundColor="#FFDFD6";
row.style.height="30px";
}
function deleteRow(r){
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(i);
}
var p=document.getElementById("edit-div");
function edit(e){
p.style.display="block";
}
function formclose(){
p.style.display="none";
}
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
<![CDATA[if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}]]>
};
xhttp.open("GET", "workxml.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName('Name')[0];
var y = x.childNodes[0];
document.getElementById("ename").innerHTML =
y.nodeValue;
}
</script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Im trying show a list of data in a table where when the user hovers the icon a small div appears below the icon which gives some links.
The problem that im having is when the image is hovered the hidden div appears but disappears before i try to click on that div. i need that div to hide when i take the mouse out of the div.
And also when i hover the div pushes the content down. How can i keep it in away that it doesnt push the content?
JS
$('.bubble').hide();
$("#bu tr td img").hover(function() {
$(this).nextAll(".bubble").first().show();
}, function(){
$(this).nextAll(".bubble").first().hide();
});
HTML
<table id="bu">
<tr>
<td>Data</td>
<td><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data</td>
<td><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data Input</td>
<td><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data Test</td>
<td><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
</table>
I have created a fiddle over here https://jsfiddle.net/livewirerules/qks2vdpv/2/
Any help will be appreciated
Try this. You don't need JS like everyone else said but I added some additional positioning so the rest of the elements don't shift on hover.
HTML:
<table id="bu">
<tr>
<td>Data</td>
<td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data</td>
<td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data Input</td>
<td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data Test</td>
<td class="image"><img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
</table>
CSS:
.image {
position: relative;
}
.image:hover .bubble {
display: block;
}
.bubble {
display: none;
z-index: 10;
position: absolute;
top: 40px;
left: -20px;
width: 75px;
height: 80px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -15px;
left: 50%;
}
This can be done without the use of Javascript:
.bubble {
position: relative;
width: 75px;
height: 80px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display:none;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -15px;
top: -15px;
left: 50%;
}
td:nth-child(2):hover .bubble {
display:block;
}
<table id="bu">
<tr>
<td>Data</td>
<td>
<img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data</td>
<td>
<img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data Input</td>
<td>
<img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
<tr>
<td>Data Test</td>
<td>
<img src="https://d13yacurqjgara.cloudfront.net/users/113776/screenshots/1338903/explore_icons_designed_by_mandar_apte_studio_for_lurnq_6_1x.png" style="width:30px" />
<div class="bubble">
<a>Test</a>
<br>
<a>test</a>
</div>
</td>
</tr>
</table>
You can hide all class .bubble opened before show the right once.
$('.bubble').hide();
$("#bu tr td img").mouseover(function() {
$(".bubble").hide(); // <-- this
$(this).nextAll(".bubble").first().show();
});
You can use display: none on your css and remove your first line.
I have a HTML table that includes 3 rows.
Each row has a column circle and a column panel (sometimes the panel column is before the circle, sometimes after).
<table>
<tr>
<td>
<div class="circle"></div>
</td>
<td>
<div class="panel-right></div>
</td>
</tr>
<tr>
<td>
<div class="panel-left></div>
</td>
<td>
<div class="circle"></div>
</td>
</tr>
<tr>
<td>
<div class="circle"></div>
</td>
<td>
<div class="panel-right></div>
</td>
</tr>
</table>
When hover panel, panel goes left or right from 10px.
table .panel-left:hover,
table .panel-left:focus {
margin-right: -10px;
margin-left: 10px;
}
table .panel-right:hover,
table .panel-right:focus {
margin-left: -10px;
margin-right: 10px;
}
With javascript, i want to modify the css of circle when hover the panel-left or panel right
$(document).ready(function() {
$(".panel-left").mouseover(function(){
$(".circle").css("border", "5px solid #16a085");
});
$(".panel-left").mouseout(function(){
$(".circle").css("border", "3px solid #cccccc");
});
$(".panel-right").mouseover(function(){
$(".circle").css("border", "5px solid #16a085");
});
$(".panel-right").mouseout(function(){
$(".circle").css("border", "3px solid #cccccc");
});
});
This is working well, except than all the circle are modified, when it should be only the circle inside of the row that contains the panel hovered.
What should be the javascript?
Is this what you want?:
HTML:
<table>
<tr>
<td class="circle-td">
<div class="circle"></div>
</td>
<td>
<div class="panel-right"></div>
</td>
</tr>
<tr>
<td>
<div class="panel-left"></div>
</td>
<td class="circle-td">
<div class="circle"></div>
</td>
</tr>
<tr>
<td class="circle-td">
<div class="circle"></div>
</td>
<td>
<div class="panel-right"></div>
</td>
</tr>
</table>
CSS:
.circle, .panel-right, .panel-left {
background-color:red;
width:200px;
height:200px;
border-radius:100%;
border:3px solid #cccccc;
}
.panel-right, .panel-left {
width:200px;
height:200px;
background-color:green;
}
.panel-left:hover,
.panel-left:focus {
margin-right: -10px;
margin-left: 10px;
}
.panel-right:hover,
.panel-right:focus {
margin-left: -10px;
margin-right: 10px;
}
Javascript
$(document).ready(function() {
$('.panel-left, .panel-right').mouseover(function() {
$(this).closest('td')
.siblings('.circle-td')
.find('.circle')
.css('border', '5px solid #16a085');
}).mouseout(function() {
$(this).closest('td')
.siblings('.circle-td')
.find('.circle')
.css('border', '5px solid #cccccc')
});
});
And here is the fiddle
inside td I am taking a table, but somehow table is not taking the td full height. can any one help me to fix this issue.
html for table:
<table style="height: auto">
<tr>
<td style="background-color: red">
<table style="background-color: orange">
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>
You can't force an object to take up 100% of the height of a cell without writing some JavaScript that will figure out the height of the cell and resize the table programatically.
I'm not really sure what your goal is with this, but you can achieve the look you seem to want by setting the background on the td and set a border to get the red outline.
<table style="height: auto">
<tr>
<td style="background-color: orange; border: solid red 1px">
<table>
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>
we are showing a centered popup when a user clicks on a logo in a table.
Everything works except ...
logos in the center of the screen(under where the popup is/will be) are not working, and
we need a close button on each the popup.
This is what we have so far:
<style type="text/css">
.main55{
position: fixed;
TOP:50%;
LEFT:50%;
width:400px;
height: 400px;
margin-top:-200px;
margin-left:-200px;
}
.menu0{ clear:both;
}
.menu0 div{
cursor:pointer;
}
#main0 div{
display: none;
}
#main0 div.block{
display: block;
}
</style>
<script>
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("div");
var mli=document.getElementById("main"+m).getElementsByTagName("div");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
</script>
<!-----------------------table with LOGOS as menu items------------------------->
<div class="menu0" id="menu0">
<table border=0 bordercolor=red width=900>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,1)">
LOGO1
</div>
</td>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,2)">
LOGO2
</div>
</td>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,3)">
LOGO3
</div>
</td>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,4)">
LOGO4
</div>
</td>
<td align=center valign=center width=180 height=200 background=frame55.gif >
<div onclick="setTab(0,5)">
LOGO5
</div>
</td>
</table>
</div>
<!-----------------DIVS WITH INFO TO POPUP--------------------->
<div class="main55" id="main0">
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO1
</td>
</table>
</div>
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO2
</td>
</table>
</div>
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO3
</td>
</table>
</div>
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO4
</td>
</table>
</div>
<div >
<table BORDER=1 width=400 cellpadding=0 background=androidbk.gif>
<td align=center>
INFO5
</td>
</table>
</div>
</DIV>
you html is ver complex try this may be this is what you want?
<p>May be you want this? here</p>
<div id="light" class="white_content">This is the popup content. Close</div>
<div id="fade" class="black_overlay"></div>
JS
function showpopup () {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function hidepopup () {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
CSS For Centered ligthbox
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
background-color: white;
z-index:1002;
overflow: auto;
}
n CSS for black overlay for light box effects
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
jsbin