In the initial state the fonts should be the same color, i.e black or other color, but when someone hovers on one p text the hover text should change its color and the rest of them change it into strokes while text-color is transparent and vice-versa,
When I hover out on the text it should go back to its normal color. I want to apply this in CMS content so it needs to take a dynamic values, if not dynamic but needed to at least change the colors and strokes.
.style1 {
font-size: 30px;
position: absolute;
}
.Ancestors {
width: 500px;
height: 500px;
font-size: 30px;
text-align: center;
background: #00f;
color: rgba(0, 0, 0, 0);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}
.overAncestors {
width: 500px;
height: 500px;
font-size: 30px;
text-align: center;
color: black;
}
<table border="0" cellpadding="10" cellspacing="100" summary="">
<tr>
<td>
<span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">vita</span>
</td>
<td>
<span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">mege</span>
</td>
<td>
<span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">Hita</span>
</td>
<td>
<span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">nitml</span>
</td>
<td>
<span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">rage</span>
</td>
</tr>
</table>
The main problem with your code is that once the class Ancestors is added to the <span> tags, it is never removed again.
You can use jquery's hover() to adjust the span classes whenever there is a mouse over and mouse out event.
This is the idea of the algorithm:
$('.style1').hover(function(){
//mouse over...
//Add class 'overAncestor' in the span hovered
//Add class 'Ancestor' in the other spans
}, function(){
//mouse out...
//Remove class 'Ancestor' and 'overAncestor' of all spans
});
This is a snippet of the working code:
$(document).ready(function(){
$('.style1').hover(function(){
$('.style1').addClass('Ancestors');
$(this).addClass('overAncestors').removeClass('Ancestors');
}, function(){
$('.style1').removeClass('Ancestors').removeClass('overAncestors');
});
});
.style1 {
font-size: 30px;
position: absolute;
}
.Ancestors {
font-size: 30px;
text-align: center;
background: #00f;
color: rgba(0, 0, 0, 0);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}
.overAncestors {
font-size: 30px;
text-align: center;
color: black;
}
<table border="0" cellpadding="10" cellspacing="100" summary="">
<tr>
<td>
<span class="style1" valign="middle">vita</span>
</td>
<td>
<span class="style1" valign="middle">mege</span>
</td>
<td>
<span class="style1" valign="middle">Hita</span>
</td>
<td>
<span class="style1" valign="middle">nitml</span>
</td>
<td>
<span class="style1" valign="middle">rage</span>
</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
Good day.
I've been trying top figure out why the copy to clipboard not working despite of putting the correct form name, please advise what would be the best command, i've been trying so hard couldn't seem to make it work.
here is the sample of the form or template im working on
I was hoping to use the copy to clipboard function so i can copy the title and content of each line
if (window.event.srcElement == frm.copyform){
frm.holdtext.value = Template;
Copied=frm.holdtext.createTextRange();
Copied.execCommand('copy');
alert('Copied to Clipboard!');
}
<script>
<script> }
if (window.event.srcElement == frm.copyform){
frm.holdtext.value = Template;
Copied=frm.holdtext.createTextRange();
Copied.execCommand('copy');
alert('Copied to Clipboard!');
}
}
</SCRIPT>
<head>
<body>
<!--Special comment-->
<!--Style-->
<style type="text/css">
/* Some Generic styles */
H1 {
Color: #9c33ff;
font-size: 20px;
isplay: inline-block;
}
H2 {
font-size: 15px;
Color: #751aff;
font-size: 13px;
}
Body {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 580px;
height: 800px;
border: none;
font: normal 12px/1 "Trebuchet MS", Helvetica, sans-serif;
color: rgba(2,2,2,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: -webkit-linear-gradient(-45deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background: -moz-linear-gradient(135deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background: linear-gradient(135deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: Left;
}
input {
display: inline-block;
float: center;
}
TBODY {
font-size: 14px;
Color: #313133;
font-size: 13px;
}
#tickettemplate {
font-size: 15px;
Color: #313133;
font-size: 13px;
}
</style>
<!--Html starting point-->
<h1>i</h1>
<h2>i</h2>
<P align=center><IMG
src="" alt="" width="80" height="83"></P>
<FORM name=tickettemplate id=tickettemplate>
<!-- Table to contain page title and buttons -->
<TABLE>
<TBODY>
<TR>
<TD align=center colSpan=4>
<DIV></DIV></TD></TR>
<TR>
<TD><INPUT name=Reset onclick="resetForm();return false;" type=reset value="Clear All Fields">
</TD>
<TD><INPUT name=copyform onclick="val1();return false;" type=button value="Copy to Clipboard">
</TD></TR></TBODY></TABLE><!-- Table for General information --><BR>
<!--This is where i started-->
<TABLE
style="FONT-SIZE: 13pt; BORDER-TOP: gray solid; BORDER-RIGHT: gray solid; BORDER-BOTTOM: gray solid; BORDER-LEFT: gray solid"
14pt? FONT-SIZE:><STRONG>General Info</STRONG></TD></TR>
<TBODY>
<TR>
<TD vAlign=middle>Name:</TD>
<TD><INPUT name=cname_singleuser id=cname_singleuser size=50>
</TD>
<TR>
<TD vAlign=middle>User ID:</TD>
<TD><INPUT name=userid_singleuser0 id=userid_singleuser0 size=50> </TD></TR>
<TR>
<TD vAlign=top>Callback no.: </TD>
<TD><INPUT name="callback no" id=callbackno0 size=50></TD></TR>
<TR>
<TD vAlign=middle>Email Address:</TD>
<TD><INPUT name=emailaddy_singleuser id=emailaddy_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Office Location</TD>
<TD><INPUT name=oloc_singleuser id=oloc_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Current Location:</TD>
<TD><INPUT name=cloc_singleuser id=cloc_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Exisitng/Related:</TD>
<TD><INPUT name=exrelated_singleuser id=exrelated_singleuser
size=50></TD></TR>
<TD vAlign=top>Business Unit/Client:</TD>
<TD><INPUT name=client1 id=client1 size=50> </TD></TR></TBODY></TABLE><BR>
<TABLE width=750 cellSpacing=0 cellPadding=0>
<TBODY>
<TABLE
style="FONT-SIZE: 13pt; BORDER-TOP: gray solid; BORDER-RIGHT: gray solid; BORDER-BOTTOM: gray solid; BORDER-LEFT: gray solid"
14pt? FONT-SIZE:><STRONG>Brief Description</STRONG></TD></TR>
<TBODY>
<TR>
<TD vAlign=middle>Issue: </TD>
<TD><INPUT name=Issue id=issue0 size=50></TD></TR>
<TR>
<TD vAlign=top>Number of Users Affected: </TD>
<TD><INPUT name="Number of users Affected" id=numberofusers0
size=50></TD></TR>
<TR>
<TD vAlign=top>Business Impact:</TD>
<TD><SELECT name="Business Impact" id=businessimpact0 size=1 type="text">
<OPTION value="" selected></OPTION> <OPTION value=Minor>P4
Minor</OPTION> <OPTION value=Medium>P3 Medium</OPTION> <OPTION
value=High>P2 High</OPTION> <OPTION value=Major>P1
Major</OPTION></SELECT> </TD></TR>
<TR>
<TD width=400 vAlign=top><p>Additional information/
Incident Description:</p></TD>
<TD><TEXTAREA name=Description id=Description1 rows=8 cols=60 wrap=virtual></TEXTAREA></TD></TR></TBODY></TABLE>
<TABLE width=750>
<TBODY>
<TR><BR><STRONG>Choose the Category:</STRONG></TR></TBODY></TABLE>
Not sure where you got that code from, but seems to be wrong. If you are copying the text from an input it is pretty straight forward. Focus, select, and copy from a click action.
function copy(event) {
var selector = event.target.getAttribute('data-copy')
var elem = document.querySelector(selector)
elem.focus()
elem.select()
document.execCommand('copy')
}
document.querySelectorAll('[data-copy]').forEach( function () {
this.addEventListener('click', copy)
})
<textarea id="foo">Hello world</textarea>
<button type="button" id="btnCopy1" data-copy="#foo">copy</button>
<hr/>
<textarea id="bar">Hello world</textarea>
<button type="button" id="btnCopy2" data-copy="#bar">copy</button>
I want to show different images on different list's <td> element, whenever mouse is hovered on it. I am using Bootstrap to develop my page. I tried searching here, but no definite answers was found.
Code is here. Any help please:
<section>
<div class="container">
<div class="head-list" id="list">
<h3>OUR PRESTIGIOUS GOLD MEDALISTS</h3>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 black text-center">
<table class="table table-responsive">
<thead class="table" style="background-color:gold; color: black">
<tr>
<th width="70">SR.#</th>
<th width="255">STUDENT'S NAME</th>
<th width="180">POSITION</th>
<th width="120">EXAM</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Text 1 on which I want an img to hover when mouse is pointed here</td>
<td>simple txt 1a</td>
<td>1990</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Text 2 on which I want an img to hover when mouse is pointed here</td>
<td>Simple txt 2a</td>
<td>1995</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Text 3 on which I want an img to hover when mouse is pointed here</td>
<td>Simple txt 3a</td>
<td>1998</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
</section>
<div class="clearfix"> </div>
And relevant css for the above code is:
<style>
.head-list h3{
font-size: 3.2em;
color: #2A72D3;
font-family: 'Lato', sans-serif;
text-align: center;
text-transform: capitalize;
margin-bottom:30px;
letter-spacing:2.2px;
}
tbody {color: white;
font-weight: bold;
font-size: 1.1em;
font-family: 'Montserrat Alternates', sans-serif;
}
table, th, td { /*this is the relavant css styling for the above table in
question*/
text-align: center;
padding: 2px;
border: 1px solid gold;
}
table#t01 { /*This styling is for another table i created but on the same
page*/
text-align: left;
padding: 1px;
background-color: #3B3939;
border: 1px solid black;
}
</style>
I found the solution too. added some more styles in css and then displayed it in lists.
So in css i added these:
.hover_img a {
position: relative;
color: antiquewhite;
}
.hover_img a span {
position:absolute;
left: 80%;
top: 10px;
display:none; z-index: 99;
}
.hover_img a:hover span {
display: block;
width: 200px;
}
And in html portion i added this in every <td> element of my ordered lists:
<td> <div class="hover_img">
<a>My text<span><img src="images/f61.jpg" alt="image" height="100">
</span></a>
</div> </td>
So whenever cursor hover over "My text", an image is displayed. I adjusted image's position according to my layout. It is working fine in responsive view also.
I would appreciate it if you could suggest any optimization in regard of this code, page loading, server response, etc.
I am currently working on a project which was already done now it requires some enhancement.I will give you a slight jist of it.It has a search functionality and after clicking that name displayed in the result it displays additional details.Now the client has asked to add the print option also,which will print the displayed .I have also implement this functionality.Now the main problem is that the print preview page does not take any css of the last page.I have used css int the HTML page only.Please see the code.I have referred Print the contents of a DIV question .But it uses css externally.How could I use it when I have defined it internally.
I know this might be a very basic question But I am very new to the CSS world.
Thanks in advance...`
Edit: I have applied the #print tag.But it was not taking the css even after that.Thats why I have voted to remain this question as unique
P.S. I didnt code this piece of shit, someone else did.
<script type="text/javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
'.td{'+
' width:205px;'+
'margin-top:10px;'+
'margin-bottom:10px;'+
'margin-left:10px;'+
'}'+
'table{'+
'border-collapse:collapse;'+
'border:1px solid #FF0000;'+
'}'+
'table td{'+
'border:1px solid #000;'+
'}'
'</style>';
w=window.open();
w.document.write(printContent);
w.print();
w.close();
}
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #FFFFFF;
color: #000000;
font: 85% "Open Sans", Tahoma, sans-serif;
}
.dataGrid {
border: 1px solid #48627A;
padding: 0;
width: 99%;
height: 100%;
background: #FFFFFF;
text-align: left;
}
.title {
color: #004e90;
font-weight: bold;
font-family: "Open Sans", Tahoma, sans-serif;
font-size: 12px;
}
.res td{
font-size: 12px;
font-family: open sans, arial;
border-top: 1px solid #ddd;
width: auto;
padding: 4px;
}
.dataGridTitle{
border: 1px solid #0D1115;
padding-top: 1px;
padding-right: 3px;
padding-bottom: 1px;
padding-left: 3px;
background: #48627A;
color: #FFFFFF;
text-align: center;
font: bold 0.8em verdana, arial, helvetica, sans-serif;
}
.dataGridElement{
padding-top: 1px;
padding-right: 3px;
padding-bottom:1px;
padding-left: 3px;
background: #E8EAEA;
color: #000000;
font: 0.8em verdana, arial, helvetica, sans-serif;
}
.td{
width:205px;
font: verdana, arial, helvetica, sans-serif;
}
<form>
<div id="print">
<div class="dataGrid" style="margin-top:10px;margin-bottom:10px;margin-left:10px;" >
<h1 style="margin-top:10px;margin-bottom:10px;margin-left:10px;" >Partner Details</h1>
<table class="res" style="table-layout:fixed; margin-top:10px;margin-bottom:10px;margin-left:10px;" >
<tr>
<td class = "td title" ><label for="username">Name</label>
</td>
<td ><label for="username">{$item.partnername}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Address</label>
</td>
<td><label for="surname">{$item.address}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Contact Number</label>
</td>
<td><label for="surname">{$item.cnumber}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Contact Person</label>
</td>
<td class = "td res" ><label for="surname">{$item.cperson}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Email</label>
</td>
<td class = "td res" ><label for="surname">{$item.email}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">School Center</label>
</td>
<td class = "td res" ><label for="surname">{$item.school_center}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Training Date</label>
</td>
<td class = "td res" ><label for="surname">{$item.t_date}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Certification Date</label>
</td>
<td class = "td res" ><label for="surname">{$item.c_date}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">No.Teachers</label>
</td>
<td class = "td res" ><label for="surname">{$item.no_teacher}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label for="surname">Teachers Certified</label>
</td>
<td class = "td res" ><label for="surname">{$item.cert_teacher}</label>
</td>
</tr>
<tr>
<td class = "td title" ><label
</form>
</div>
</div>
at last I found an answer. I don't know the reason why #media was not working correctly. So I used css styling in the print function itself.
w.document.write('<style>h1{font-size:20px;color:#76C04E;width:90%;}</style>');
w.document.write('<style>body{background: #FFFFFF; color: #000000; font: 85% arial, verdana, helvetica, sans-serif; }</style>');
w.document.write('<style>.res td{font-size: 12px;font-family: open sans, arial; border-top: 1px solid #ddd; width: auto;padding: 4px;} </style>');
Now the css is correctly taken in the print preview page.
But it works only in firefox.Will update the answer accordingly when I find the solution for chrome
Thanks.
I forgot to mention that you need to link media query print tag in tag
<link rel="stylesheet" type="text/css" href="print.css" media="print">
I prefer to use external css file
Use media tag in css file:
All your print styles go here inside #media print{...}
#media print {
.header, .footer, .navigation{
display: none !important;
}
}
There are some rules, keep in mind that you don't need bunch of things while printing, menus, sidebars etc...
I have created one HTML page. I have done it in just french language now I am trying to add an option at the top of my website to translate language between French and English (there are 2 language flags in the link in paragraph below).
My idea is to have a table which contains a button of flag of France and England (French and English) in first row (something like this: http://prntscr.com/6yq4t2 ) now on changing the flag should switch to another table whose contents are written in the language of flag clicked using HTML and the existing table will be replaced by the table of flag-language clicked (actually there are 2 tables(one displayed at a time) having English and French contents which must switch on click to flags on the first row of default table-which is french).
See this part in code:
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
I have my HTML code below (it doesn't contain code for English table but it is assumed that the table have same HTML code except that the written content are in English and the switching has to be done between these two tables on respective flag selection):
<!DOCTYPE PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Axestrack</title>
<!--general stylesheet-->
<style type="text/css">
p {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, p, li {
font-family: Helvetica, Arial, sans-serif;
}
td {
vertical-align: top;
}
ul, ol {
margin: 0;
padding: 0;
}
.tab {
margin-left: 40px;
margin-right: 40px;
}
</style>
</head>
<body>
<div id="img_home"></div>
<table cellspacing="0" border="0" cellpadding="0" width="100%" align="center" style="margin: 0px;">
<tbody>
<tr valign="top">
<td valign="top">
<!--container-->
<table cellspacing="0" cellpadding="0" border="11" align="center" width="621" bgcolor="#f7f3e6" background="images/bg-stamp-2.jpg" style="border-width:11px; border-color:#ccc; border-style:solid; background-color:#f7f3e6; background-image: url('http://www.axestrack.com/wp-content/uploads/bg-stamp-2.jpg'); background-position: right top !important; background-repeat: repeat-x;">
<tbody>
<tr>
<td valign="top" border="0" style="border: none; ">
<table cellspacing="0" cellpadding="0" border="0" align="center" style="padding-bottom: 13px;">
<tbody>
<tr>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">
Language translation:
<img width="18" height="10" src="http://www.mapsofworld.com/images/world-countries-flags/france-flag.gif" alt="" onclick="myFunctionFrench()" />
<img width="18" height="10" src="http://vignette1.wikia.nocookie.net/mortalengines/images/b/b6/English_flag.png/revision/latest?cb=20100614220751" alt="" onclick="myFunctionEnglish()" />
</h1>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 19px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Michel</h1>
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Résidence étudiante</h1>
</td>
</tr>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:#33384f;">Recherche d'emploi(développement C/ C++/ C#/ Silverlight/ Wpf/ Asp.Net/ MVC-MVVM) </h1>
</td>
</tr>
<tr>
<td valign="top" colspan="2" style="padding:inherit"><img width="650" height="18" src="http://www.axestrack.com/wp-content/uploads/header-top.jpg" alt="" /></td>
</tr>
<!--Formation-->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px; color:red;">Formation: </h1>
</td>
</tr>
<!-- Paris -->
<tr>
<td valign="top" width="511" style="padding-top: 4px; padding-bottom:5px; padding-left: 21px;">
<h1 style="margin: 0; font-size: 12px;">2012-2014 :</h1>
<p class="tab" style="margin-right:0;font-size: 12px;">
Master en Génie informatique à paris. (Diplôme d'ingénieur)
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!---->
</tbody>
</table>
</tr>
<tr>
<td valign="top" colspan="2"><img width="599" height="6" src="http://www.axestrack.com/wp-content/uploads/double-spacer.jpg" alt="" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--faltu kaam here -->
<script>
function myFunctionFrench() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "yellow";
}
function myFunctionEnglish() {
document.getElementsByTagName("BODY")[0].style.backgroundColor = "green";
}
</script>
</body>
</html>
How to implement this switching of 2 tables on flag click which contains the language-flag in first row. Any idea ? (please take my html code as reference to answer my question).
Could some one please help me in doing this ?
After Wrick7 suggestion
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8" />
<title>JS Bin</title>
<script>
(function ()
{
$(".frc-tab").show();
$(".eng-tab").hide();
$('.eng').on('click', function (event)
{
alert('eng click');
$('.eng-tab').show();
$('.frc-tab').hide();
});
$('.frc').on('click', function (event)
{
alert('french click');
$('.eng-tab').hide();
$('.frc-tab').show();
});
})();
</script>
</head>
<body>
<div>
<button class="eng">english</button>
<button class="frc">french</button>
</div>
<div class="eng-tab">
<table class="table table-bordered">
<tr>
<td>english</td>
</tr>
</table>
</div>
<div class="frc-tab">
<table class="table table-bordered">
<tr>
<td>french</td>
</tr>
</table>
</div>
</body>
</html>
The output is:
http://prntscr.com/6zdj0r
You can set one table with visibility hidden and another with visible and then when a button is pressed you just change it in js....
function changeDisplay(view1,view2){
//var statev1 = document.getElementById(view1).style.visibility;
//var statev2 = document.getElementById(view2).style.visibility;
//if (statev1 === 'visible'){
document.getElementById(view1).style.visibility = 'hidden';
document.getElementById(view2).style.visibility = 'visible';
/*}else{
document.getElementById(view2).style.visibility = 'hidden';
document.getElementById(view1).style.visibility = 'visible';
}*/
}
.switch6 { max-width: 17em; margin: 0 auto;}
.switch6-light > span,
.switch-toggle > span { color: #000000; }
.switch6-light span span,
.switch6-light label,
.switch-toggle span span,
.switch-toggle label { color: #2b2b2b; }
.switch-toggle a,
.switch6-light span span { display: none; }
.switch6-light { display: block; height: 30px; position: relative; overflow: visible; padding: 0px; margin-left:0px; }
.switch6-light * { box-sizing: border-box; }
.switch6-light a { display: block; transition: all 0.3s ease-out 0s; }
.switch6-light label,
.switch6-light > span { line-height: 30px; vertical-align: middle;}
.switch6-light label {font-weight: 700; margin-bottom: px; max-width: 100%;}
.switch6-light input:focus ~ a,
.switch6-light input:focus + label { outline: 1px dotted rgb(136, 136, 136); }
.switch6-light input { position: absolute; opacity: 0; z-index: 5; }
.switch6-light input:checked ~ a { right: 0%; }
.switch6-light > span { position: absolute; left: -100px; width: 100%; margin: 0px; padding-right: 100px; text-align: left; }
.switch6-light > span span { position: absolute; top: 0px; left: 0px; z-index: 5; display: block; width: 50%; margin-left: 100px; text-align: center; }
.switch6-light > span span:last-child { left: 50%; }
.switch6-light a { position: absolute; right: 50%; top: 0px; z-index: 4; display: block; width: 50%; height: 100%; padding: 0px; }
<div class="switch6">
<label class="switch6-light">
<input type="checkbox">
<span>
<span onclick="changeDisplay('sign','log');">Log-In</span>
<span onclick="changeDisplay('log','sign');">Sign-In</span>
</span>
<a class="btn btn-primary"></a>
</label>
</div>
I have two pawns and I want to set them on the top-left corner while the text (cell number) is on left-bottom.
This is what I have:
This is what I want to have:
CSS:
td {
width: 80px;
height: 80px;
text-align: left;
vertical-align: bottom;
border: 1px solid black;
}
.soldiers
{
width:20px;
height:20px;
}
HTML:
<tr>
<td class="oddCellBorder" row="0" col="0">57
<img src="Resources/images/player_2.png" class="soldiers">
<img src="Resources/images/player_1.png" class="soldiers">
</td>
<td class="evenCellBorder" row="0" col="1">58</td>
<td class="oddCellBorder" row="0" col="2">59</td>
<td class="evenCellBorder" row="0" col="3">60</td>
<td class="oddCellBorder" row="0" col="4">61</td>
<td class="evenCellBorder" row="0" col="5">62</td>
<td class="oddCellBorder" row="0" col="6">63</td>
<td class="evenCellBorder" row="0" col="7">64</td>
</tr>
Wrap the number in a span and position it at the bottom, and vertical-align: top; everything else.
td {
position: relative;
vertical-align: top;
width: 80px;
height: 80px;
text-align: left;
border: 1px solid black;
}
td span {
position: absolute;
bottom: 0;
}
<table>
<tr>
<td>
<span>57</span>
<img src="http://placehold.it/20x20/ff6a00/ff6a00" alt="" />
<img src="http://placehold.it/20x20/fb235e/fb235e" alt="" />
</td>
</tr>
</table>
You are using way too much code. Using CSS counters you can make this problem completely trivial.
See this demonstration fiddle. I generate the board completely in JS, allowing you to use it in an array, and then use CSS counters (universally supported) with pseudo elements to put the numbers in there with absolute positioning.
For the background coloring I use trivial nested nth-child selectors. Then just apply vertical-align:top to the cell and let the flow do the job - I use text content here but images will flow the same as they're both inline content.
All the CSS needed:
table {
counter-reset:number 65;
}
td {
border:1px solid black;
counter-increment:number -1;
width:64px;
height:64px;
position:relative;
vertical-align:top;
}
tr:nth-child(odd) td:nth-child(even), tr:nth-child(even) td:nth-child(odd) {
background:#aaf;
}
td:after {
content:counter(number);
position:absolute;
bottom:0;
left:0;
}
Sample linked again here to be sure you don't miss it.
A way to do it without extra mark-up
Since you specified the dimensions of the icons (20x20), you can take advantage of that
and use the nth-child selector to position the two icons to the top left of the table cell.
However, you do need to set the left offset to a specific value based on the dimension
given in .soldier.
td {
width: 80px;
height: 80px;
text-align: left;
vertical-align: bottom;
border: 1px solid black;
position: relative;
}
.soldiers {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 5px;
position: absolute;
top: 0;
}
img:nth-child(1) {
left: 0;
}
img:nth-child(2) {
left: 25px;
}
<table>
<tr>
<td class="oddCellBorder" row="0" col="0">
57
<img src="http://placehold.it/10x10" class="soldiers">
<img src="http://placehold.it/10x10" class="soldiers">
</td>
<td class="evenCellBorder" row="0" col="1">58</td>
<td class="oddCellBorder" row="0" col="2">59</td>
<td class="evenCellBorder" row="0" col="3">60</td>
<td class="oddCellBorder" row="0" col="4">61</td>
<td class="evenCellBorder" row="0" col="5">62</td>
<td class="oddCellBorder" row="0" col="6">63</td>
<td class="evenCellBorder" row="0" col="7">64</td>
</tr>
</table>