Using php to write a query to mysql which produces a json rest return that I am manipulating with angularjs.
My data appears as 2 columns: Parent, Child.
PARENT | CHILD
parent1 | child1
parent1 | child2
parent2 | child1
parent3 | child1
parent3 | child2
I am attempting to make an html table of Parents. After expanding the row, all children will be listed underneath.
I would like only 1 row per parent.
However (using the fake data from above)my current html table is displaying..essentially repeating parents
Parent1
|-Child 1
|-Child 2
Parent1
|-Child 1
|-Child 2
...
Is there something I can do with angular, or perhaps a way of modifying my json object in a way to make the desired result possible?
<tr ng-repeat-start="parent in parents | filter:search_query track by $index">
<td>
<button class="btn btn-warning" ng-if="parent.expanded" ng-click="parent.expanded = false">-</button>
<button class="btn btn-info" ng-if="!parent.expanded" ng-click="parent.expanded = true">+</button>
</td>
<td>{{parent.name}}</td>
</tr>
<tr ng-if="parent.expanded" ng-repeat-end="">
<td ng-repeat="parent in parent" colspan="3">{{parent.child}}</td>
</tr>
</tr>
Html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="expandCollapseApp">
<div ng-controller="expandCollapseCtrl">
<div class="container">
<div class="expandcollapse-item">
<div ng-click="active = !active" ng-class="{'expandcollapse-heading-collapsed': active, 'expandcollapse-heading-expanded': !active}">
<p>Parent 1</p></p>
</div>
<div class="slideDown" ng-hide="active">
<div class="expand-collapse-content">
<table>
<tr>
<td>
child1
</td>
<td>
child2
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="expandcollapse-item">
<div ng-click="active1 = !active1" ng-class="{'expandcollapse-heading-collapsed': active1, 'expandcollapse-heading-expanded': !active1}">
<p>Parent 2</p>
</div>
<div class="slideDown" ng-hide="active1">
<div class="expand-collapse-content">
<table>
<tr>
<td>
child1
</td>
<td>
child2
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Controller
var expandCollapseApp = angular.module('expandCollapseApp', ['ngAnimate']);
expandCollapseApp.controller('expandCollapseCtrl', function ($scope) {
$scope.active = true;
$scope.active1 = true;
});
CSS
.container {
margin-top:100px;
border: 1px solid blue;
border-right: 1px solid blue;
}
.expandcollapse-item {
overflow: hidden;
border-top:1px solid blue;
}
.expandcollapse-heading-collapsed {
cursor: pointer;
padding: 15px 20px;
position: relative;
z-index: 100000000;
color: black;
background-color: white;
}
.expandcollapse-item:first-of-type {
border-top:0px;
}
.expandcollapse-heading-collapsed p{
font-size: 16px;
font-weight: normal;
margin:0px;
}
.expandcollapse-heading-expanded {
cursor: pointer;
z-index: 100000000;
padding: 15px 20px;
position: relative;
color: white;
background-color: black;
border: 1px solid blue;
}
.expandcollapse-heading-expanded p{
font-size: 16px;
font-weight: bold;
margin:0px;
}
.expandcollapse-heading-collapsed > span,
.expandcollapse-heading-expanded > span {
position:absolute;
top: 25px;
right: 15px;
font-size: 20px;
line-height: 0px;
}
.expand-collapse-content {
padding: 20px;
}
/*
animation:*/
.slideDown.ng-hide {
height:0;
transition:height 0.35s ease;
overflow:hidden;
position:relative;
}
.slideDown {
height:141px;
transition:height 0.35s ease;
overflow:hidden;
position:relative;
}
.slideDown.ng-hide-remove,
.slideDown.ng-hide-add {
/* remember, the .hg-hide class is added to element
when the active class is added causing it to appear
as hidden. Therefore set the styling to display=block
so that the hide animation is visible */
display:block!important;
}
.slideDown.ng-hide-add {
animation-name: hide;
-webkit-animation-name: hide;
animation-duration: .5s;
-webkit-animation-duration: .5s;
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
}
.slideDown.ng-hide-remove {
animation-name: show;
-webkit-animation-name: show;
animation-duration: .5s;
-webkit-animation-duration: .5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
Demo
Related
I would like to be able to distinguish the row of the cell which a user has selected in the html table.
Is there a way to do that with Css and styles or do I need to program it with JQuery and JavaScript?
For example the user may click on the BA cell in the first row. After that I want the background of the first row be light blue.
example screenshot
var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');
$('.table-add').click(function() {
var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
$TABLE.find('table').append($clone);
});
$('.table-remove').click(function() {
$(this).parents('tr').detach();
});
$('.table-up').click(function() {
var $row = $(this).parents('tr');
if ($row.index() === 1) return;
$row.prev().before($row.get(0));
});
$('.table-down').click(function() {
var $row = $(this).parents('tr');
$row.next().after($row.get(0));
});
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;
$BTN.click(function() {
var $rows = $TABLE.find('tr:not(:hidden)');
var headers = [];
var data = [];
$($rows.shift()).find('th:not(:empty)').each(function() {
headers.push($(this).text().toLowerCase());
});
$rows.each(function() {
var $td = $(this).find('td');
var h = {};
headers.forEach(function(header, i) {
h[header] = $td.eq(i).text();
});
data.push(h);
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,500');
body {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
position: relative;
padding: 0;
margin: 10;
font-family: "Raleway", sans-serif;
font-weight: 300;
font-size: 40px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
#import "compass/css3";
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
table {
width: 750px;
border-collapse: collapse;
margin: 50px auto;
}
td,
th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
.table-remove {
color: #700;
cursor: pointer;
&:hover {
color: #f00;
}
}
.table-up {
color: #007;
cursor: pointer;
&:hover {
color: #00f;
}
}
.table-down {
color: #007;
cursor: pointer;
&:hover {
color: #00f;
}
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
&:hover {
color: #0b0;
}
}
<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title> JavaScript editable table </title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style>
</style>
<body>
<div class="container">
<h1> JavaScript Editable Table </h1>
<div id="table" class="table-editable">
<table class="table">
<tr>
<th> Name</th>
<th> Roll No </th>
<th> Class </th>
<th> Marks </th>
</tr>
<tr>
<td contenteditable="true"> Ram </td>
<td contenteditable="true"> 1 </td>
<td contenteditable="true"> BA </td>
<td contenteditable="true"> 48 </td>
</tr>
<tr>
<td contenteditable="true"> Rama </td>
<td contenteditable="true"> 10 </td>
<td contenteditable="true"> BSC </td>
<td contenteditable="true"> 40 </td>
</tr>
<tr>
<td contenteditable="true"> sham </td>
<td contenteditable="true"> 8 </td>
<td contenteditable="true"> BCA </td>
<td contenteditable="true"> 34 </td>
</tr>
<tr>
<td contenteditable="true"> shama </td>
<td contenteditable="true"> 3 </td>
<td contenteditable="true"> BCA </td>
<td contenteditable="true"> 30 </td>
</tr>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</body>
</html>
jquery implement a has selector that you select all parent that has a specific child attribute
$('td[contenteditable="true"]').click(function() {
$( "tr" ).has('td[contenteditable="true"]').removeClass('selected');
$( "tr" ).has('td[contenteditable="true"]:focus').addClass('selected');
});
the selector to select the td that have the focus is td[contenteditable="true"]:focus
var $TABLE = $('#table');
var $BTN = $('#export-btn');
var $EXPORT = $('#export');
$('.table-add').click(function() {
var $clone = $TABLE.find('tr.hide').clone(true).removeClass('hide table-line');
$TABLE.find('table').append($clone);
});
$('.table-remove').click(function() {
$(this).parents('tr').detach();
});
$('.table-up').click(function() {
var $row = $(this).parents('tr');
if ($row.index() === 1) return;
$row.prev().before($row.get(0));
});
$('.table-down').click(function() {
var $row = $(this).parents('tr');
$row.next().after($row.get(0));
});
jQuery.fn.pop = [].pop;
jQuery.fn.shift = [].shift;
$BTN.click(function() {
var $rows = $TABLE.find('tr:not(:hidden)');
var headers = [];
var data = [];
$($rows.shift()).find('th:not(:empty)').each(function() {
headers.push($(this).text().toLowerCase());
});
$rows.each(function() {
var $td = $(this).find('td');
var h = {};
headers.forEach(function(header, i) {
h[header] = $td.eq(i).text();
});
data.push(h);
});
});
$('td[contenteditable="true"]').click(function() {
$( "tr" ).has('td[contenteditable="true"]').removeClass('selected');
$( "tr" ).has('td[contenteditable="true"]:focus').addClass('selected');
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,500');
body {
font-family: 'Montserrat', sans-serif;
padding: 0;
margin: 0;
text-align: center;
}
h1 {
position: relative;
padding: 0;
margin: 10;
font-family: "Raleway", sans-serif;
font-weight: 300;
font-size: 40px;
color: #080808;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
tr:nth-of-type(odd) {
background: #eee;
}
.selected {
background-color: red !important;
}
th {
background: #3498db;
color: white;
font-weight: bold;
}
.table-editable {
position: relative;
.glyphicon {
font-size: 20px;
}
}
table {
width: 750px;
border-collapse: collapse;
margin: 50px auto;
}
td,
th {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
font-size: 18px;
}
.table-remove {
color: #700;
cursor: pointer;
&:hover {
color: #f00;
}
}
.table-up {
color: #007;
cursor: pointer;
&:hover {
color: #00f;
}
}
.table-down {
color: #007;
cursor: pointer;
&:hover {
color: #00f;
}
}
.table-add {
color: #070;
cursor: pointer;
position: absolute;
top: 8px;
right: 0;
&:hover {
color: #0b0;
}
}
<! DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title> JavaScript editable table </title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style>
</style>
<body>
<div class="container">
<h1> JavaScript Editable Table </h1>
<div id="table" class="table-editable">
<table class="table">
<tr>
<th> Name</th>
<th> Roll No </th>
<th> Class </th>
<th> Marks </th>
</tr>
<tr>
<td contenteditable="true"> Ram </td>
<td contenteditable="true"> 1 </td>
<td contenteditable="true"> BA </td>
<td contenteditable="true"> 48 </td>
</tr>
<tr>
<td contenteditable="true"> Rama </td>
<td contenteditable="true"> 10 </td>
<td contenteditable="true"> BSC </td>
<td contenteditable="true"> 40 </td>
</tr>
<tr>
<td contenteditable="true"> sham </td>
<td contenteditable="true"> 8 </td>
<td contenteditable="true"> BCA </td>
<td contenteditable="true"> 34 </td>
</tr>
<tr>
<td contenteditable="true"> shama </td>
<td contenteditable="true"> 3 </td>
<td contenteditable="true"> BCA </td>
<td contenteditable="true"> 30 </td>
</tr>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</body>
</html>
By adding the following code in the style ,with use of has, the selected row would be shown in different color. There is no need for having jquery or javascript code.
tr:has(td:focus-visible) {
background-color: aquamarine;
}
I've looked up a few things online but nothing has quite solved the issue I'm facing. I'm making a crypto currency API web app. I haven't connected the API yet because I simply want to solve this issue first.
The goal for now. When the user clicks the Magnifying glass it generates a new div with the Bitcoin info, to the right of the parent Bitcoin div. I am using bootstrap so ideally, each row would fill up with 4 Bitcoin divs. Once the row is filled the next row would begin to fill from left to right as before.
Here is what I have so far
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Crytocurreny Generator</title>
</head>
<body>
<!-- Search bar-->
<section>
<div class="container-fluid search">
<div class="row text-center align-items-center">
<div class="col-12">
<input type="search" placeholder="" class="text-uppercase">
<i class="fas fa-search fa-2x" class="icon-unlock" id="magnifying-glass" onclick="newDiv()"></i>
</div>
</div>
</div>
</section>
<!-- End of Search bar-->
<!-- Crypto Divs -->
<section>
<div class='container-fluid mt-5'>
<div class='row mx-auto'>
<div class='col-3'>
<div class='crypto-div p-3' max-width="280" id='crypto-div'>
<h1>Bitcoin</h1>
<p1>Price: $45,000</p1>
<br>
<p3 class='mt-3'>24hr high: $50,000</p3>
<br>
<p3 class='mt-3'>24hr low: $42,000</p3>
<br>
<p5>Ranking: 1</p5>
</div>
</div>
</div>
</div>
</section>
<!-- End of Crypto Divs -->
<script src="https://kit.fontawesome.com/886c2c3378.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0;
}
body {
background-color: #ffd480 !important;
}
/* Search Bar*/
.search {
margin-top: 100px;
}
input {
border: none;
border-radius: 24px;
padding: 10px;
outline:none;
font-size: 120% !important;
color: #818181;
font-color: ;
font-weight: bold;
background-color:;
transition: all .4s ease-out;
}
input:hover{
transition: all .4s ease-in;
transform: scale(1.07);
background-color: #01A08B;
color: white;
}
/* End of Search Bar*/
/* Magnifying glass icon*/
i{
color: white;
margin-left: px;
transition: all .3s ease-out;
padding: 4px;
border-radius: 50%;
margin-left: 10px;
}
i:hover {
transition: all .3s ease-in;
cursor: pointer;
transform: scale(1.2);
color: #01A08B;
}
/* end of Magnifying glass icon*/
/*Universal Crypto Div*/
.crypto-div{
font-weight: bold;
background-color:white;
color: #01A08B;
border-radius: 20px;
max-width: 280px;
min-width: 200px;
transition: all .4s ease-out;
}
.crypto-div:hover {
transition: all .4s ease-in;
transform: scale(1.07);
background-color: #01A08B;
color: white;
cursor:pointer;
}
/* End of Universal Crypto Div*/
/* new div thats generated */
.new-div{
font-weight: bold;
background-color:white;
color: #01A08B;
border-radius: 20px;
max-width: 100px;
min-width: 200px;
transition: all .4s ease-out;
}
.new-div:hover {
transition: all .4s ease-in;
transform: scale(1.07);
background-color: #01A08B;
color: white;
cursor:pointer;
}
/* end of new div thats generated */
JavaScript
//my attempt at creating a div generator
function newDiv() {
let div = document.createElement('div')
div.className ="new-div";
div.innerHTML = "<div class='p-3 mt-3 mx-auto' id='crypto-div'><h1>Bitcoin</h1><p1>Price: $45,000 </p1><br><p3 class='mt-3'>24hr high:$50,000 </p3><br><p3 class='mt-3'>24hr low: $42,000</p3><br><p5>Ranking: 1 </p5></div>";
document.body.appendChild(div);
}
I did not get it... Is the problem that the generated div is not next to the already existing div? If the problem is that, just put an ID to your row for example id="parent" and then instead of
document.body.appendChild(div);
make
let parent = document.getElementById('parent')
parent.appendChild(div)
My personal suggestion if you already know the html and all the information inside is to add a display and visibility element to the div you want hidden/shown in CSS then have the click function change the display and visibility property for it to be seen. This should help make styling easier in the future too if needed.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<title>Crytocurreny Generator</title>
</head>
<body>
<!-- Search bar-->
<section>
<div class="container-fluid search">
<div class="row text-center align-items-center">
<div class="col-12">
<input type="search" placeholder="" class="text-uppercase">
<i class="fas fa-search fa-2x" class="icon-unlock" id="magnifying-glass" onclick="showNewDiv()"></i>
</div>
</div>
</div>
</section>
<!-- End of Search bar-->
<!-- Crypto Divs -->
<section>
<div class='container-fluid mt-5'>
<div class='row mx-auto'>
<div class='col-3'>
<div class='crypto-div p-3' max-width="280" id='crypto-div'>
<h1>Bitcoin</h1>
<p1>Price: $45,000</p1>
<br>
<p3 class='mt-3'>24hr high: $50,000</p3>
<br>
<p3 class='mt-3'>24hr low: $42,000</p3>
<br>
<p5>Ranking: 1</p5>
</div>
<div class='p-3 mt-3 mx-auto' id='crypto-div2'>
<h1>Bitcoin</h1>
<p1>Price: $45,000 </p1>
<br>
<p3 class='mt-3'>24hr high:$50,000 </p3>
<br>
<p3 class='mt-3'>24hr low: $42,000</p3>
<br>
<p5>Ranking: 1 </p5>
</div>
</div>
</div>
</div>
</section>
<!-- End of Crypto Divs -->
<script src="https://kit.fontawesome.com/886c2c3378.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</body>
</html>
JS
function showNewDiv() {
newDiv = document.getElementById('crypto-divs2');
newDiv.style.display = 'block';
newDiv.style.visibility = 'visible';
}
CSS
#crypto-div2{
display: hidden;
visibility: none;
font-weight: bold;
background-color:white;
color: #01A08B;
border-radius: 20px;
max-width: 100px;
min-width: 200px;
transition: all .4s ease-out;
}
#crypto-div2:hover {
transition: all .4s ease-in;
transform: scale(1.07);
background-color: #01A08B;
color: white;
cursor:pointer;
}
Edit: Alternate JS file and suggestion adding an id to the div where you want the new div to be created and changing the JS.
JS
function newDiv() {
let firstDiv = document.getElementById('div-id-to-append');
let div = document.createElement('div');
div.className ="new-div";
div.innerHTML = "<div class='p-3 mt-3 mx-auto' id='crypto-div'>
<h1>Bitcoin</h1><p1>Price: $45,000 </p1><br><p3 class='mt-
3'>24hr high:$50,000 </p3><br><p3 class='mt-3'>24hr low:
$42,000</p3><br><p5>Ranking: 1 </p5></div>";
firstDiv.appendChild(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>
I have a menu that slides from left to right that I use for mobile devices. It is to open and close on click of the menu button. It works great on the iPhone. But when I try it on the Ipad, the menu is automatically open and there is no functionality to it. Pressing the menu button that usually would close the menu does nothing. Here is the code.
JavaScript:
<script src="https://example.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="m.login.css"/>
</head>
<body>
<div class="container">
<nav>
Home<br />
<hr/>
Order Now<br />
<hr/>
How It Works<br />
<hr/>
Pricing <br />
</ul>
</nav>
<div class="content">
<div class="home_background">
<div class="home_white_header">
<table width="380" border="0" cellspacing="0">
<tbody>
<tr>
<td width="200" class="menu_button_table"> </td>
<td width="100" class="logo_table"><img src="images/logo_black.png" width"115" height="30" alt=""/></td>
</tr>
</tbody>
</table>
</div>
<hr />
<div class="login_box">
<div class="login_box_logo">
<center><img src="images/logo_white.png" width="230" height="60" alt=""/></center>
</div><!-- end login box logo -->
</div><!-- end login box -->
Login form goes here
<!-- home background end --> </div>
JavaScript for menu is placed here
<!-- content end --></div>
<!-- container end --></div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
font-size: 16px;
overflow: hidden;
width: 1020px;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
padding-top: 20px;
padding-left: 0px;
width: 230px;
background-color: #d6d6d6;
transform: translate3d(-230px, 0, 0);
transition: transform 0.4s ease;
font-family: "Open Sans"; color: #000;
font-size: 20px;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 0px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 10px;
width: 38px;
height: 32px;
background-image: url(images/m.menu-button-white.png);
}
.content {
padding-top: 0px;
height: 2350px;
background-color: #fff;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(230px, 0, 0);
}
One thing I tried was to load the jquery-3.1.0.min.js to my local server but that didn't help. I am still learning JavaScript so I am not sure what to try next. Can someone please help?
I have created page that would allow the user to enter information then submit that to js for validation and modification of a database. The page should have a pop up that notifies the user is successful or not. The pop up is color coded for errors or informational messages.
However, it needs a way to remove the pop once the user acknowledges the message. There is a button on the pop up (div) that appears and had the event listener on the button but the button is not clickable.
The html code:
<div id="panel">
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/static/css/msd.css"></link>
<script src="/static/lib/d3-3.3.8.min.js"></script>
</head><div id="info-msg">
<p></p>
<button id="ok">Ok</button>
</div>
<div id="reportAnomaly" >
<table id="anomaly-table" cols="2">
<tr>
<td>
<input id="submit" type="submit" value="Submit">
</td>
<td>
<input id="reset" type="reset" value="Reset Form">
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="static/js/dbanomaly.js"></script>
</body>
</html>
The JavaScript code:
var infoMsgDiv = d3.select("#info-msg");
d3.select("#submit").on('click', reportAnomaly);
d3.select("#reset").on('click', resetForm);
d3.select("#ok").on('click', resetForm);
function reportAnomaly() {
insertResults();
}
function insertResults () {
displayMessage('warn', "Successfully added.");
}
function resetForm () {
_log("resetForm");
infoMsgDiv.style("opacity", 0);
}
function displayMessage (level, message) {
_log("displayMessage");
if (level === 'crit') {
infoMsgDiv.style("background-color", "red");
} else if (level === 'warn') {
infoMsgDiv.style("background-color", "yellow");
}
infoMsgDiv.style("opacity", 1);
infoMsgDiv.select("p").html(message);
}
the CSS is:
#info-msg {
position: absolute;
top: 0;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
border: 1px solid #ddd;
border-radius: 10px;
font: 10pt sans-serif;
text-align: center;
line-height: 1.2em;
opacity: 0;
transition: opacity 500ms ease-in 250ms;
pointer-events: none;
color: black;
}
#info-msg{
top: 50%;
left: 50%;
padding: 10px;
background-color: #FFFF9F;
}
Any ideas why the "#ok" button would not be clickable?