Here is a demo: https://jsfiddle.net/rv18kd6c/31/
I am having trouble trying to get the other 3 buttons to show, the same content as the 'recent' button. Can someone give me some pointers please?
The other three buttons need to also show the side bar and tables interacting in the same way as they do on the 'recent' button.
Thanks in advance :)
Below is all the code that has been written so far. The JQuery is to show and hide the content.
The javascript changes which tables are being shown, I think i need 3 more javascript queries but i am struggling to make it work.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.button-wrapper {
text-align: center;
padding: 10px;
}
.button-wrapper a {
text-decoration: none;
color: #fff;
margin: 10px
}
.content h1 {
text-align: center;
margin-top: 2em;
}
.top-button {
padding: 5px;
background-color: #00622b;
border: 1px solid black;
text-align: center;
width: 50px;
height: 5rem;
margin: 3px;
-webkit-border-radius: 12;
-moz-border-radius: 12;
border-radius: 4px;
}
.top-button a {
text-decoration: none;
color: black;
}
table {
width: 100%;
font-size: 2vw;
text-align: center;
}
table tr:nth-child(even) {
background-color: #98FB98;
}
table tr:nth-child(odd) {
background-color: mediumseagreen;
}
table th {
background-color: #98FB98;
color: #00622b;
}
* {
box-sizing: border-box
}
html,
body {
height: 100%;
width: 100%;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
}
/* Style the tab */
.tab {
float: left;
border: none;
background-color: #00622b;
width: 30%;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: #ffffff80;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 2vw;
}
/* Change background color of buttons on hover */
.tab button:hover {
color: #ffffffbf;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #00622b;
color: #fff;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
width: 70%;
border-left: none;
}
</style>
<div class="wrapper">
<div class="button-wrapper">
<a class="flip top-button" href="#first-div" target="" data-toggle="">Recent</a>
<a class="flip top-button" href="#second-div" target="" data-toggle="">Top</a>
<a class="flip top-button" href="#third-div" target="" data-toggle="">Standard</a>
<a class="flip top-button" href="#fourth-div" target="" data-toggle="">Rotten</a>
</div>
<div class="content" id="first-div">
<div class="tab">
<button class="tablinks" onclick="openRating(event, 'Value')" id="defaultOpen">Value for Money</button>
<button class="tablinks" onclick="openRating(event, 'Time')">Time Taken</button>
<button class="tablinks" onclick="openRating(event, 'Quality')">Quality of Work</button>
<button class="tablinks" onclick="openRating(event, 'Average')">Average Rating</button>
</div>
<div id="Value" class="tabcontent">
<h3>
Recent
</h3>
<table id="bottom5">
<tr>
<th>Value for Money</th>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
</div>
<div id="Time" class="tabcontent">
<h3>
Recent
</h3>
<table id="bottom5">
<tr>
<th>Time Taken</th>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
</div>
<div id="Quality" class="tabcontent">
<h3>
Recent
</h3>
<table id="bottom5">
<tr>
<th>Quality of Work</th>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
</div>
<div id="Average" class="tabcontent">
<h3>
Recent
</h3>
<table id="bottom5">
<tr>
<th>Average Rating</th>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
</div>
</div>
<div class="content" id="second-div" style="display:none">
</div>
<div class="content" id="third-div" style="display:none">
</div>
<div class="content" id="fourth-div" style="display:none">
</div>
<script>
function openRating(evt, ratingName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(ratingName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
// only show one panel at a time
jQuery(".flip").on("click", function(e) {
var target = jQuery(this).attr("href");
jQuery(target).slideToggle("fast");
jQuery(".content").not(target).hide();
e.preventDefault();
});
</script>
the issue here is that on page load you launch this :
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
but when you have multiple defaultOpen IDs only the first one is clicked (that is not a problem since only the first one is visible), then when you click another tab, you don't refresh witch new defaultOpen to choose. that is how you do it :
// only show one panel at a time
jQuery(".flip").on("click", function(e) {
var target = jQuery(this).attr("href");
jQuery(target).slideToggle("fast");
jQuery(".content").not(target).hide();
jQuery(target).find("#defaultOpen")[0].click();//here i find the default open IN the newly active tab
e.preventDefault();
});
but this will visually do nothing because your onclick="openRating(event, 'Value')" will only open the first #Value" div it finds :
from there two solutions:
1 You never use twice the same id for categories on the left (notice ids Valuetab2 instead of value for example)
<div class="content" id="second-div" style="display:none">
<div class="tab">
<button class="tablinks" onclick="openRating(event, 'Valuetab2')" id="defaultOpen">Value for Money</button><!--changed here -->
...
</div>
<div id="Valuetab2" class="tabcontent"><!--changed here -->
...
or 2 you use classes for categories and adapt a little your code so it opens every catagory with the same class
<div class="content" id="second-div" style="display:none">
<div class="tab">
<button class="tablinks" onclick="openRating(event, 'Value')" id="defaultOpen">Value for Money</button>
...
</div>
<div class="Value tabcontent"> <!--changed here -->
and replace document.getElementById(ratingName).style.display = "block";
by $("."+ratingName).css('display','block'); to display all categories with that same class (they will all be displayed, but inside invisible tabs for the other)
Related
After creating a table, when I implemented the Onclick text copier in table data, the Onclick text copier working well but the problem is after clicking on the table data tooltip message come, and then data shake right to left. In Laravel temple, I embedded this code in a big data table somewhere shaking somewhere not shaking. How can I solve this problem?
function textCopied(el){
var inp = document.createElement('input');
document.body.appendChild(inp);
inp.value = el.textContent;
inp.select();
document.execCommand('copy',false);
inp.remove();
var tt = el.parentNode.querySelector(".custom-tooltip");
tt.style.display = "inline";
setTimeout( function() {
tt.style.display = "none";
}, 1000);
};
.container {
display: flex;
justify-content: center;
height: 100vh;
}
.copy_button{
background-color:#fff;
border:0;
outline:0;
cursor:pointer;
opacity:1;
position:absolute;
width:40px;
height:40px;
z-index:9;
border-radius:24px;
}
.button-tooltip-container {
display: flex;
align-items: center;
margin-top: 16px;
min-height: 30px;
}
#custom-tooltip {
display: none;
margin-left: 40px;
padding: 5px 12px;
background-color: #000000df;
border-radius: 4px;
color: #fff;
}
table tbody tr td{
padding: 20px 80px;
}
<div class="container">
<table>
<thaed>
<tr>
<th>ID</th>
</tr>
</thaed>
<tbody>
<tr>
<td>
<div class="button-tooltip-container">
<span title="Click to Copy" onclick="textCopied(this);" class="copy_button">94426</span>
<span class="custom-tooltip" id="custom-tooltip">copied!</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="button-tooltip-container">
<span title="Click to Copy" onclick="textCopied(this);" class="copy_button">94425</span>
<span class="custom-tooltip" id="custom-tooltip">copied!</span>
</div>
</td>
</tr>
<tr>
<td>
<div class="button-tooltip-container">
<span title="Click to Copy" onclick="textCopied(this);" class="copy_button">94424</span>
<span class="custom-tooltip" id="custom-tooltip">copied!</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I'm learning javascript and I have a problem with a div... On my CV there are four divs that should be hidden and only the active div should be visible.
All fine with that but at the beginning, all is mixed together. I would like instead that only the general tabcontent will be visible...
Can you help with that?
https://github.com/DevFrancoisXavierPelletier/CV
if you want do this with js code ,just add this code somewhere in index.html :
<script>
openTab(event, 'General');
</script>
but it is not right way ! the best way and lightweight way is handle with css , put this css class in bottom of style.css :
.tabcontent{
display: none;
}
.tabcontent:first-child{
display: block;
}
In your CSS just add...
.tabcontent{
display: none;
}
#General {
display: block;
}
Then just add class active to the first link.
You can use display property in CSS
#General {
display: block;
}
.tabcontent{
display: none;
}
Also add active class on the first button (General).. so you will see General button in white (as selected)..
<button class="tablinks active" onclick="openTab(event, 'General')">Général</button>
function openTab(evt, tab) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the link that opened the tab
document.getElementById(tab).style.display = "block";
if(evt){
evt.currentTarget.className += " active";
}
}
html, body{
margin: 0;
padding: 0;
top: 0;
}
#sidebar{
background: #c5deea;
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%);
background: -webkit-linear-gradient(top, #c5deea 0%,#8abbd7 31%,#066dab 100%);
background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 );
position: fixed;
z-index: 1;
top: 0;
left: 0;
top: 0;
height:100%;
width:20%;
}
#photo{
width:100%;
height:40%;
}
.sidenav button {
width: 100%;
height: 75px;
padding: 6px 8px 6px 16px;
font-family: sans-serif;
font-size: 25px;
text-decoration: none;
text-align: center;
color: darkslategrey;
background-color: transparent;
border: none;
outline: none;
display: block;
}
.sidenav button:hover {
background-color: navajowhite;
}
.sidenav button.active {
background-color: white;
}
.tabcontent{
background: transparent;
position: fixed;
z-index: 1;
top: 0;
left: 20%;
top: 0;
padding: 2.5%;
height:97.5%;
width:75%;
}
h3{
font-family: sans-serif;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
border-radius: 25px;
font-family: sans-serif;
}
th, td {
text-align: left;
padding: 16px;
}
.bold {
background-color:antiquewhite;
font-weight: bold;
}
#General {
display: block;
}
.tabcontent{
display: none;
}
.container {
width: 100%; /* Full width */
background-color: #ddd; /* Grey background */
}
.skills {
text-align: right; /* Right-align text */
padding: 10px; /* Add some padding */
color: white; /* White text color */
}
.html {width: 90%; background-color: #4CAF50;} /* Green */
.css {width: 80%; background-color: #2196F3;} /* Blue */
.js {width: 65%; background-color: #f44336;} /* Red */
.php {width: 60%; background-color: #808080;} /* Dark Grey */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>My CV online</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="sidebar">
<div id="photo">
<img src="https://raw.githubusercontent.com/DevFrancoisXavierPelletier/CV/master/image.png" alt="Francois Xavier Pelletier" style="width:75%;height:75%; padding: 12.5%;">
</div>
<div class="sidenav">
<button class="tablinks active" onclick="openTab(event, 'General')">Général</button>
<button class="tablinks" onclick="openTab(event, 'Experience')">Expérience</button>
<button class="tablinks" onclick="openTab(event, 'Studies')">Etudes</button>
<button class="tablinks" onclick="openTab(event, 'Skills')">Compétences</button>
</div>
</div>
<div id="General" class="tabcontent">
<h3>Informations générales</h3>
<table class="table">
<tr>
<td class="bold">Prénom</td>
<td class="bold">Nom</td>
<td class="bold">Age</td>
</tr>
<tr>
<td>François Xavier</td>
<td>Pelletier</td>
<td>29 ans</td>
</tr>
<tr>
<td class="bold">Adresse</td>
<td class="bold">Code Postal</td>
<td class="bold">Ville</td>
</tr>
<tr>
<td>52 rue Madame de Maintenon</td>
<td>78120</td>
<td>Rambouillet</td>
</tr>
</table>
<h3>Contact</h3>
<table class="table">
<tr>
<td class="bold">Téléphone</td>
<td class="bold">Email</td>
</tr>
<tr>
<td>+33 **********</td>
<td>dev.francois.xavier.pelletier#gmail.com</td>
</tr>
</table>
<h3>Mobilité</h3>
<table class="table">
<tr>
<td class="bold">Permis</td>
<td class="bold">Véhicule</td>
</tr>
<tr>
<td>B</td>
<td>Non</td>
</tr>
</table>
</div>
<div id="Experience" class="tabcontent">
<h3>Experience</h3>
<table class="table">
<tr>
<td class="bold">Nom du projet</td>
<td class="bold">Adresse en ligne</td>
<td class="bold">Contact</td>
</tr>
<tr>
<td>Eagle-dev</td>
<td>www.eagle-dev.com</td>
<td>dev.francois.xavier.pelletier#gmail.com</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="Studies" class="tabcontent">
<h3>Etudes</h3>
<table class="table">
<tr>
<td class="bold">Année</td>
<td class="bold">Nom de l'établissement</td>
<td class="bold">Statut</td>
</tr>
<tr>
<td>2018-2019</td>
<td>IFOCOP (Paris) - Développeur intégrateur web</td>
<td>En cours</td>
</tr>
<tr>
<td>2014-2017</td>
<td>War Studies Academy (Varsovie) - Relations internationales</td>
<td>Licence obtenue</td>
</tr>
</table>
</div>
<div id="Skills" class="tabcontent">
<h3>Compétences</h3>
<p>HTML</p>
<div class="container">
<div class="skills html">90%</div>
</div>
<p>CSS</p>
<div class="container">
<div class="skills css">80%</div>
</div>
<p>JavaScript</p>
<div class="container">
<div class="skills js">40%</div>
</div>
<p>PHP</p>
<div class="container">
<div class="skills php">0%</div>
</div>
</div>
<script src="myScript1.js"></script>
</body>
First of all I would like you to know that before I make a post here I read a lot about this subject but still can't apply the idea so this post is after long time of searching...
This is HTML Code
<!DOCTYPE html>
<html>
<head>
<title>test₺</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid" style="margin: 0; padding: 0;">
<nav style="height: 30px; width: 100%; background-color: dodgerblue"></nav>
</div>
<div class="container">
<div class="row">
<div class="menu col-sm-6">
<div class="mealType burger">
<div class="categoryTitle">Burger</div>
<div class="categoryContent" id="burger">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Burger</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Burger</td>
<td>15<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Barbeque</td>
<td>12<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType seaFood">
<div class="categoryTitle">Sea Food</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Sliece</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fillet Fish</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td class="add">0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Hamour Fish</td>
<td>40<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType steak">
<div class="categoryTitle">Steak</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Steak</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Beef Steak</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
</div>
<div class="myCart col-sm-6">
<div class="myCartContaier">
<div class="myCartTitle">My Cart</div>
<div class="myCartDetails">
<table></table>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Javascript jQuery Code
'use strict';
// Start Remove the ability to select //
$(".mealType, .categoryTitle, .categoryContent, .table").attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
// End Remove the ability to select //
$(function(){
$('.categoryTitle').on('click', function(){
var $this = $(this);
$this.next('div').slideToggle(200);
});
$('.add').on('click', function(){
var $this = $(this),
$elementToClone = $this.parent(),
$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
if ($myCartDetails.children().hasClass('addCloned')) {
$($myCartDetails.children()).removeClass('addCLoned').detach();
} else {
$elementToClone.clone(true,true).appendTo($myCartDetails).addClass('addCloned');
}
});
});
CSS code if needed
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.menu {
background-color: white;
width: 200px;
}
.mealType {
background-color: red;
width: 400px;
margin: 0 auto;
box-shadow: 1px 1px 10px silver;
}
.menu, .myCart {
margin-top:0rem;
padding: 10px;
}
.categoryTitle {
background-color: dodgerblue;
width: 400px;
margin: 0 auto;
margin-top: 20px;
padding: 5px;
color: white;
font-weight: bold;
font-family: Calibri, sans-serif, Tahoma, Arial;
font-size: 18px;
text-shadow: 1px 1px 2px black;
cursor: pointer;
}
.categoryContent {
display: none;
}
.categoryTitle, .myCartTitle {
text-align: center;
}
table {
margin: 0 auto;
width: 400px;
}
table tr {
border-bottom: 1px solid silver;
}
table tr:nth-child(even) {
background-color: white;
}
table tr:nth-child(odd) {
background-color: #EEE;
}
table td {
padding: 5px 10px;
text-align: center;
color: black;
font-family: Calibri, sans-serif, Tahoma, Arial;
}
td img {
width: 30px;
}
table tr td:nth-of-type(4),table tr td:nth-of-type(5) {
cursor: pointer;
}
the idea is Add to cart by javascript I tried the clone with the argument (true,true) but still I am not able to apply the idea that I want I tried a lot of things but I am really unable to apply the idea that I want so I posted in stackoverflow hopefully there's a hero will guide me to the right way to apply like this idea and I really appreciate his effort I am waiting for you guys thanks a lot.
Click To See Simple Image Of The Idea
$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
You really need to go back and learn the fundamental concepts of javascript, html, and css before you even try to make a cart.
I am trying to call a JS event, depending on a button press, (there are three buttons) i want some CSS to change the font-size (differently for each button), but what i have does not work. can anyone help?
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="7Global.css"/>
<title> CSGO </title>
<script>
function textSizeS(){
document.getElementById("Maintbl").style.font-size = "3px";
}
function textSizeM(){
document.getElementById("Maintbl").style.font-size = "26px";
}
function textSizeL(){
document.getElementById("Maintbl").style.font-size = "45px";
}
</script>
</head>
<body>
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<table id = "Maintbl" class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</body>
</html>
Like this, where I added a wrapper div to set the font size to, corrected the syntax error from ...style.font-size to ...style.fontSize and removed that duplicated id's (as they should be unique).
function textSizeS(){
document.getElementById("MaintblWrapper").style.fontSize = "3px";
}
function textSizeM(){
document.getElementById("MaintblWrapper").style.fontSize = "26px";
}
function textSizeL(){
document.getElementById("MaintblWrapper").style.fontSize = "45px";
}
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<div id = "MaintblWrapper">
<table class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</div>
fontSize not font-size
Demo https://jsfiddle.net/eLrdeagq/
function textSizeS(){
document.getElementById("Maintbl").style.fontSize = "3px";
}
Uisng jQuery,i can bind the check box dynamically but their are some problems i am facing not able to solve.
1.in fiddle,if you click Add a name button a popup will open and get the name.After pressing submit button the related data are dynamically bind in a table,but it should be bind in a table in 1st <tr>.Now it is binding below 2nd <tr> but i want it to be append in 1st <tr> below the sample line already given.
2.On page load,id=list should be hide,but if i add this line $("#list").hide(); to hide i am not getting the output.
jQuery:
<script>
$(document).ready(function ()
{
$("#btnShowModal").click(function ()
{
ShowDialog(true);
});
$("#btnClose").click(function ()
{
HideDialog();
});
$("#btnSubmit").click(function ()
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone();
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").show();
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function ()
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").hide();
}
</script>
css:
<style>
.dialog_display
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.dialog
{
display: none;
position: fixed;
width: 220px;
height: 130px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-size: 10pt;
}
.dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
#dynamic{display:none;}
</style>
html
<body>
<table width="100%" cellpadding="0" cellspacing="0" id="rounded_border">
<tr>
<td colspan="4"><p><em>Please record the name of anyone involved</em></p></td>
</tr>
<tr>
<td><strong>Involved</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td>Add from list</td>
</tr>
<tr id="list" class="ir-shade"><div id="dynamic">
<td><span class="delete_icon">x</span>Attila Hun</td>
<td>
<input id="firstaid" onclick="addtreatment();" type="checkbox"/>
FirstAid needed
</td>
<td>
<input class="sickbay" onclick="addtreatment();" type="checkbox"/>
Sent to Sick bay
</td>
<td>
<input class="ambulance" onclick="addtreatment();" type="checkbox"/>
Ambulance
</td>
</div>
</tr>
<tr>
<td><strong>Reported by</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td><button>Add from list</button></td>
</tr>
</table>
<div id="overlay" class="dialog_display"></div>
<div id="dialog" class="dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="dialog_title">Type a name</td>
<td class="dialog_title align_right">
Close
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b> </b>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
</body>
You can see my code from this fiddle sample code
Please guide me to solve this.
You have to remove the id from the cloned tr's and unhide them when you add a new one, that's why you don't get any output if you hide #list
$("#btnSubmit").click(function (e)
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone().show().removeAttr("id");
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
e.preventDefault();
});