is there anyone that can just write down the basics for database knowledge? i want to link a database to my html page but have no knowledge about it
this is my html page and i want the div background linked to a databse value that when the value is true the background is green if false background is red, now it works with a button input that if pressed it change to the opposite color
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/style.default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Grafiek</title>
</head>
<body>
<h1>Server Stats</h1>
<div id="maindiv">
<div id="server1" class="serverstatus">
<div id="cardheader">
(servername1)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server2" class="serverstatus">
<div id="cardheader">
(servername2)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server3" class="serverstatus">
<div id="cardheader">
(servername3)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
</div>
</body>
</html>
<script>
function toggleStatus(e) {
var parentDiv = e.parentNode.parentNode;
var bgColor = parentDiv.style.backgroundColor;
if (bgColor == "darkred") {
parentDiv.style.backgroundColor = "green";
} else {
parentDiv.style.backgroundColor = "darkred";
}
}
// var green = false
// function toggleStatus()
// {
// if (green = !green)
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "red");
// });
// }
// else
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "#639919");
// });
// }
// };
// function updateStatus(){
// $("#maindiv .serverstatus").each(function(){
// $(this).css("background-color", "red");
// });
// }
//
// $( document ).ready(function() {
// updateStatus();
// });
</script>
</body>
</html>
Related
I'm stuck trying to Implement the imgOnClick(elmt) function so that it paints (to the canvas' drawImage() method) the image given by elmt. elmt will be an tag object. The canvas has the id imgresult.
also In the document ready function, have each of the thumbnail images set their click event to the imgOnClick() function.
no matter how I set the code it won't work and I'm not sure how to do this
<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet type="text/css" href="memeory.css">
<title>Meme-ory :: Javascript Meme Generator</title>
<script type="application/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$( document ).ready(function() {
// TODO: set up the click events for the thumbnails
$('#imagegallery').button.click(function){
}
// TODO: set up the click event for the button
});
// TODO: function called when a thumbnail is clicked
function imgOnClick(elmnt) {
var curImage = document.getElementById('memeresult');
var thePath = 'images/';
var theSource = thePath + elmnt;
canvas.drawImage(elmnt, 10, 10);
};
// TODO: function called when the button is clicked
function buttonOnClick() {
};
</script>
</head>
<body>
<header>
<h1>Meme-ory: Raging on in the Moonlight!</h1>
</header>
<main>
<div id="controls">
<form>
<label for="toptext">Top Text:</label>
<input id="toptext" type="text">
<label for="bottomtext">Bottom Text:</label>
<input id="bottomtext" type="text">
<input id="createMemeButton" type="button" value="Give me Meme!">
</form>
</div>
<div id="imagegallery">
<img class="thumbnail" id="closeenough" src="closeenough.png" alt="close enough">
<img class="thumbnail" id="cutenessoverload" src="cutenessoverload.png" alt="cuteness overload">
<img class="thumbnail" id="deskflip" src="deskflip.png" alt="deskflip">
<img class="thumbnail" id="lol" src="lol.png" alt="LOL">
<img class="thumbnail" id="trollface" src="trollface.png" alt="troll face">
</div>
<div id="memeresult">
<canvas id="imgresult">
</canvas>
</div>
</main>
</body>
I wanted to perform show and hide on my button click. I have the following code. I want to show or apply my css style(color:red) on my "maindiv" content on clicking of button "Click".
Again, if I click that Click button then it should hide or display it's normal content like earlier(i.e without any css style of red), like this it should come.
Getting error: TypeError: Cannot read property 'classList' of null
Fiddle.
html:
<div ng-app="app">
<div ng-controller="MainController">
<div id="maindiv">
<p>Test Content</p>
</div>
<div id="mainContainer">
<div id="testId">
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
</div>
js:
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.testExpand = function(){
alert("testExpand is called to show");
document.querySelector("maindiv").classList.add("maindivColor");
}
}]);
Try angularjs way.
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.testExpand = function(){
//alert("testExpand is called to show");
$scope.applyCss = !$scope.applyCss;
}
}]);
.maindivColor {
color:red;
}
.mainContainer {
border-right: 1px solid #333;
}
#testId {
// background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController">
<div ng-class="{'maindivColor':applyCss}"><p>Normal Content</p></div>
<div ng-show="applyCss" ng-class="{'maindivColor':applyCss}">
<p>
Test Content
</p>
</div>
<div>
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
Try this
<!DOCTYPE html>
<html>
<head>
<script Src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('surveyController', function($scope){
$scope.backgroundColor = 'yellow';
$scope.changeStyle = function(){
if ($scope.backgroundColor == 'red') {
$scope.backgroundColor = 'yellow';
}else{
$scope.backgroundColor = 'red';
}
}
});
</script>
</head>
<body ng-controller="surveyController" ng-app="myApp">
<div id="maindiv" ng-style="{background: backgroundColor}">
<p>Test Content</p>
</div>
<div id="mainContainer">
</div>
<button ng-click="changeStyle()">Change Style</button>
</body>
</html>
Just add #
document.querySelector("#maindiv").classList.toggle("maindivColor");
And use toggle instead of add
You should use angular way to dynamically add CSS class, It can be achieved using ngClass directive
The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
<div id="maindiv" ng-class="{'maindivColor' : hideMainDiv }">
Controller
$scope.testExpand = function(){
alert("testExpand is called to show");
$scope.hideMainDiv = !$scope.hideMainDiv;
}
angular.module('app', []).
controller('MainController', ['$scope', function($scope) {
$scope.testExpand = function() {
console.log("testExpand is called to hide");
$scope.hideMainDiv = !$scope.hideMainDiv;
}
}]);
.maindivColor {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController">
<div id="maindiv" ng-class="{'maindivColor' : hideMainDiv }">
<p>Test Content</p>
</div>
<div id="mainContainer">
<div id="testId">
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
</div>
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.testExpand = function(){
alert("testExpand is called to show");
var myEl = angular.element( document.querySelector( '#maindiv' ) );
if(myEl.hasClass('maindivColor')){
myEl.removeClass('maindivColor');
}else{
myEl.addClass('maindivColor');
}
}
}]);
.maindivColor {
color:red;
}
.mainContainer {
border-right: 1px solid #333;
}
#testId {
// background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController">
<div id="maindiv">
<p>
Test Content
</p>
</div>
<div id="mainContainer">
<div id="testId">
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
</div>
The best advice here: use angular things to do job in angular.
The faster you become 'ok' with this, the better.
You can add a 'style' variable in the controller:
angular.module('app', []).
controller('MainController', ['$scope', function ($scope) {
$scope.style = {};
$scope.testExpand = function(){
alert("testExpand is called to show");
if ($scope.style.color)
$scope.style.color = red;
else delete $scope.style.color;
}
}]);
And then you simple modify your html this way:
<div ng-app="app">
<div ng-controller="MainController">
<div ng-style="style">
<p>Test Content</p>
</div>
<div id="mainContainer">
<div id="testId">
<button type="button" ng-click="testExpand()">Click</button>
</div>
</div>
</div>
</div>
You can use JQuery in the following way.
$(document).find('.yourButton').hide();
I have 2 divs and I am trying to swap them around automatically every Sunday at 11:59. My divs:
Could anyone help please?
<html>
<head>
<title>HTML Title</title>
<script>
function changeDiv(){
var d = new Date();
if (d.getDay == 0 && d.getHours == 11 && d.getMinutes == 59) {
if (document.getElementById("cDisp").innerHTML == "Div2") {
document.getElementById("cDisp").innerHTML = "Div1";
document.getElementById("Div1").style.display = null;
document.getElementById("Div2").style.display = "none";
} else {
document.getElementById("cDisp").innerHTML = "Div2";
document.getElementById("Div1").style.display = "none";
document.getElementById("Div2").style.display = null;
}
}
}
</script>
</head>
<body>
<code id="cDisp">Div1</code>
<br />
<button name="changeDiV" onclick="changeDiv()">Change DIV</button>
<div style="color: rgb(244,100,100);" id="Div1">
<p>asdasdasdasda (Div1)</p>
</div>
<div style="display: none; color: rgb(22,232,123);" id="Div2">
<p>1231231231313132 (Div2)</p>
</div>
</body>
</html>
This brother will be the right answer. The first code I have given you will only change the name of the div container but do not swap two divs to which one will display.
Give it a try by running this snippet (in this example it changes the div to display and indicate which div is displayed.
function changeDiv(){
if (document.getElementById("cDisp").innerHTML == "Div2") {
document.getElementById("cDisp").innerHTML = "Div1";
document.getElementById("Div1").style.display = null;
document.getElementById("Div2").style.display = "none";
} else {
document.getElementById("cDisp").innerHTML = "Div2";
document.getElementById("Div1").style.display = "none";
document.getElementById("Div2").style.display = null;
}
}
<html>
<head>
<title>HTML Title</title>
</head>
<body>
<code id="cDisp">Div1</code>
<br />
<button name="changeDiV" onclick="changeDiv()">Change DIV</button>
<div style="color: rgb(244,100,100);" id="Div1">
<p>asdasdasdasda (Div1)</p>
</div>
<div style="display: none; color: rgb(22,232,123);" id="Div2">
<p>1231231231313132 (Div2)</p>
</div>
</body>
</html>
Ok, so recently I asked a question on transitioning between pages for HTML(HTML How to Transition Between Pages). So I found this thing called barba.js so I got it and...it didn't work. I searched for a while and there was practically no easy to follow or clear documentation or instructions.
Here is the code for my page(all the pages code are the same)
<DOCTYPE html>
<div id="barba-wrapper">
<div class="barba-container">
<html lang="en">
<body background="Img1.png">
<link rel="stylesheet" href="bootstrap.min.css" type = "text/css"/>
<link rel="stylesheet" href="css.css" type="text/css"/>
<script src="barba.js"></script>
<script type="text/javascript">(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="http://d36mw5gp02ykm5.cloudfront.net/yc/adrns_y.js?v=6.10.505#p=wdcxwd5000bevt-22a0rt0_wd-wx21a706024960249";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);})();</script></head>
<script src="nextprev.js"></script>
<script src="TweenMax.min.js"></script>
<title>Page 1</title>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><big><font size="15">A Beach Somewhere</font></big></center>
<center><h3><b>Next➜</b></h3></center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
</div>
</div>
I would like to use barba.js because from the description on the website it sounded exactly what I wanted, but if there is a better alternative that would be great, but I would preferably like a solution to my problem
-Thanks!
UPDATE
So I've now changed some of my code but it is still not working.
HTML:
<DOCTYPE html>
<html lang="en">
<body background="Img1.png">
<main id="barba-wrapper" data-prev="" data-next="Page2.html">
<div class="barba-container">
<link rel="stylesheet" href="bootstrap.min.css" type = "text/css"/>
<link rel="stylesheet" href="css.css" type="text/css"/>
<title>Page 1</title>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><big><font size="15">A Beach Somewhere</font></big></center>
<center><h3><b>Next➜</b></h3></center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</main>
</body>
</html>
<script src="barba.js"></script>
<script src="nextprev.js"></script>
<script src="TweenMax.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
Barba.Pjax.start();
});
</script>
CSS.css:
font{
size:25;
color:#FFFFFF;
}
body {
background-size: 100% 100%;
background-repeat: no-repeat;
}
html, body {
overflow-x: hidden;
margin: 0;
padding: 0;
color: #555;
}
.barba-container {
position: relative;
}
nextprev.js:
document.addEventListener("DOMContentLoaded", function() {
var lastElementClicked;
var PrevLink = document.querySelector('a.prev');
var NextLink = document.querySelector('a.next');
Barba.Pjax.init();
Barba.Prefetch.init();
Barba.Dispatcher.on('linkClicked', function(el) {
lastElementClicked = el;
});
var MovePage = Barba.BaseTransition.extend({
start: function() {
this.originalThumb = lastElementClicked;
Promise
.all([this.newContainerLoading, this.scrollTop()])
.then(this.movePages.bind(this));
},
scrollTop: function() {
var deferred = Barba.Utils.deferred();
var obj = { y: window.pageYOffset };
TweenLite.to(obj, 0.4, {
y: 0,
onUpdate: function() {
if (obj.y === 0) {
deferred.resolve();
}
window.scroll(0, obj.y);
},
onComplete: function() {
deferred.resolve();
}
});
return deferred.promise;
},
movePages: function() {
var _this = this;
var goingForward = true;
this.updateLinks();
if (this.getNewPageFile() === this.oldContainer.dataset.prev) {
goingForward = false;
}
TweenLite.set(this.newContainer, {
visibility: 'visible',
xPercent: goingForward ? 100 : -100,
position: 'fixed',
left: 0,
top: 0,
right: 0
});
TweenLite.to(this.oldContainer, 0.6, { xPercent: goingForward ? -100 : 100 });
TweenLite.to(this.newContainer, 0.6, { xPercent: 0, onComplete: function() {
TweenLite.set(_this.newContainer, { clearProps: 'all' });
_this.done();
}});
},
updateLinks: function() {
PrevLink.href = this.newContainer.dataset.prev;
NextLink.href = this.newContainer.dataset.next;
},
getNewPageFile: function() {
return Barba.HistoryManager.currentStatus().url.split('/').pop();
}
});
Barba.Pjax.getTransition = function() {
return MovePage;
};
});
Tweenmax.min.js: https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js
Bootstrap.css: getbootstrap.com
I got most of this code from one of the examples on the barba page([barbajs.org/demo/nextprev/index.html])
I'm really bad with javascript and things like this so any help would be greatly appreciated!
You have to place the barba.js wrapper and container within the body tags. You also have to initialize Barba.js when the DOM is ready.
Barba.Pjax.start();
I don't see that called anywhere. I also don't know if you have the code for the transition between pages included in any of your .js files.
See http://barbajs.org/transition.html
I had the exact same issue. Adding the defer attribute to the <script> tag did the job for me.
Like <script defer src="barba.js"></script>
That will cause the script to wait until the DOM is fully loaded. Also, be sure to place a / before the path at your href. Like <a href="/Page2.html"
Hope it fixes your Issue!
Im trying to convert my div to PDF.
this is my HTML code:
I can download it just fine but I want to show in the PDF file the Div float:left is aligned with Div Float:right.
<script lang="javascript" type="text/javascript">
function run()
{
var pdf = new jsPDF('p', 'pt', 'letter'),
source = $('#content')[0],
margins = {
top: 40,
bottom: 40,
left: 40,
right: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top,
{
'width': margins.width
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
);
};
</script type = "text/javascript">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html2pdf</title>
<body>
<div id="content" style = "width: 100px">
<div id = "name" style="float:right">
<div id ="rey"> Rey </div>
<div id ="norbert"> norbert </div>
</div>
<div id = "age" style="float:left; width:50px">age</div>
</div>
<div id = "button" style ="margin-top:50px">
<button id="cmd" onclick ="run()">generate PDF</button>
</div>
<script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script>
<script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script>
</body>
</html>
Right now it show the Div left in the first row, and the Div right in the next row. Help Please.
as I stated in the comments jspdf does not support css as is.
But I found this post which has a reference for HtmlToCnavas plugin which could help.
As i know javascript can not generate full page html with css to PDF.
If your project written by PHP in back-end, dompdf will help you.
Notice: CSS float is not supported (but is in the works).
<script lang="javascript" type="text/javascript">
function run()
{
var pdf = new jsPDF('p', 'pt', 'letter'),
source = $('#content')[0],
margins = {
top: 40,
bottom: 40,
left: 40,
right: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top,
{
'width': margins.width
},
function (dispose) {
pdf.save('Test.pdf');
},
margins
);
};
</script type = "text/javascript">
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html2pdf</title>
<body>
<div id="content" style = "width: 100px">
<div id = "name" style="float:right">
<div id ="rey"> Rey </div>
<div id ="norbert"> norbert </div>
</div>
<div id = "age" style="float:left; width:50px">age</div>
</div>
<div id = "button" style ="margin-top:50px">
<button id="cmd" onclick ="run()">generate PDF</button>
</div>
<script src="C:\Users\besmonte\Desktop\for Practice\jspdf.debug.js"></script>
<script src="C:\Users\besmonte\Desktop\for Practice\jquery.min.js"></script>
</body>
</html>