I am new in PHP. I have a code file which contain php and html code. In my code i print an HTML page by
<script type="text/javascript">
window.print();
</script>
I use some CSS for my print page like i set page size etc. But problem is that if content on the page is increase its result will be destroy of formatting of page. I want to restrict that content will be on only ONE page. Is it possible?
My CSS
<style>
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.page {
width: 210mm;
min-height: 297mm;
padding: 20mm;
margin: 8mm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px solid;
height: 257mm;
outline: 2cm #FFEAEA solid;
}
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-top: 2px solid #009;
}
}
</style>
You can use word counting ... I'm just breaking it up on spaces so it obviously isn't going to be an exact science but it will probably work for most cases.
<script>
(function($){
$(function(){ //document.ready
var data = $("#myContent").text();
var arr = data.split(' ');
var count = arr.length;
runResize(count);
$( window ).resize(runResize(count));
}); /end document ready
function runResize(count) {
if (count > 500) {
$("#myContent").css('font-size', '90%');
} else if (count > 1000) {
$("#myContent").css('font-size', '80%');
} else if (count > 1500) {
// etc..
} else {
$("#myContent").css('font-size', '100%');
}
};
})(jQuery);
</script>
Create the following .htaccess file under "static-files":
Order Deny,Allow
Deny from all
Allow from 000.000.000.000
<?php
session_start();
session_regenerate_id();
if((!isset($_SESSION['username']))&&(!isset($_SESSION['name']))&&(!isset($_SESSION['role']))){ // if there is no valid session
header("Location: login.html");
}
if($_SESSION['role']=='1'){
$login=$_SESSION['name'];
}
if($_SESSION['role']=='0'){
$login='Hello '.$_SESSION['name'].' you have successufully logged in as User!';
}
?>
Use Sessions for such kind of restriction.
Authoriz the user by checking its type
If unauthorized then redirect them to some error dispaying page.
Related
This question already has an answer here:
Print in Landscape format [duplicate]
(1 answer)
Closed 1 year ago.
I created a project using JavaScript where user can generate PDF document on button click. Everything is perfect except two things though I am not sure if it can be made worked. So here's the below that I did so far:
HTML:
<div class="card-body" id="card">
</div>
<input type="button" id="createDoc" value="Generate PDF" />
JavaScript:
//Generate pdf
$("body").on("click", "#createDoc", function () {
var sTable = document.getElementById('card').innerHTML;
var style = "<style>";
style = style + "body { border: 2px solid #1f497d; padding: 4%; margin: 0; }";
style = style + "table { width: 100%; font: 17px Calibri; } #showImages { height: 140px; width: 180px; } #BoxLeft { font-size:14px; width: 100%; margin: 0 auto; margin-top: 6%; height: 40px; } .Box1, .Box2 { float: left; width: 15%; } .box { height: 25px; border: 1px solid #bdbdbd; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px #bdbdbd; -webkit-box-shadow: 0 0 10px #bdbdbd; box-shadow: 0 0 10px #bdbdbd; } .Box1 { background-color: #1f497d; color:white; -webkit-print-color-adjust: exact; } .Box2 { background-color: white; -webkit-print-color-adjust: exact; } #BoxRight { font-size:14px; width: 100%; margin: 0 auto; margin-top: -12%; height: 40px; } .Box3, .Box4 { float: right; width: 15%; } .Box3 { -webkit-print-color-adjust: exact; } .Box4 { background-color: #1f497d; color:white; -webkit-print-color-adjust: exact; }";
style = style + "table, td { border: solid 2px #1f497d; border-collapse: collapse; font-size:14px;";
style = style + "padding: 2px 3px;text-align: center; } #projects th { height:10px; font-size:14px; background-color: #1f497d; -webkit-print-color-adjust: exact; color: white; }";
style = style + ".detailsWidth { width:60%; } .checked { color: gray; } #projects { margin-top: 9%; } .action, .hideId, .hide, .hideDate { display:none; } .top { margin-top: -5%; margin-left: 4%; } .topAside { margin-top: -5%; margin-left: 4%; } .heading { margin-top:3%; text-align:center; } .logoGpp { -webkit-print-color-adjust: exact; height: 140px; width: 250px; display: block; margin-left: auto; margin-right: auto; }";
style = style + "</style>";
var win = window.open('', '', 'height=700,width=700');
win.document.write("<html><head>");
win.document.write(style);
win.document.write("</head>");
win.document.write("<body><img class='logoGpp' src='/img/logo.jpg' /><div class='top topAside'><div id='BoxLeft'><div class='Box1'><div class='box'><h4 class='heading'>Job Reference: </h4></div></div><div class='Box2'><div class='box'><h4 class='heading'>" + $(".card-title").html() + "</h4></div></div></div></div>");
win.document.write("<div class='top'><div id='BoxRight'><div class='Box3'><div class='box'><h4 class='heading'>" + $(".card-title").html() + "</h4></div></div><div class='Box4'><div class='box'><h4 class='heading'>Initiation Date: </h4></div></div></div></div><br />");
win.document.write(sTable);
win.document.write("</body></html>");
win.document.close();
win.print();
});
So using the above, I am retrieving all data from a table that's appended to div a card (With a id). It renders content perfectly in the print preview with PDF format. But I am willing to know if it's possible to render the format in landscape and A4 paper size using the above JavaScript code, so I can render it by default with those properties. Right now, I've to do it manually in the print preview section.
There is an experimental CSS feature to set a suggestion for the default settings inside the print preview dialog, currently only supported by Chrome and browsers with a Chromium base:
https://developer.mozilla.org/en-US/docs/Web/CSS/#page/size
But in general, my impression of your provided code is that it's not generating a PDF file but it opens a new window or tab with an HTML page so the user has to print this page using a virtual PDF printer.
There are many libraries for PHP which generate a real PDF file from HTML content. Maybe one of them could be a sustainable solution for you.
One of many libraries doing that is Dompdf:
https://github.com/dompdf/dompdf
I am trying to get a delete button working on my To Do List project. I have tried a lot of different things but I am not having any luck. I believe the issue stems from the fact that I am trying to reference a button in an HTML li tag that is created by Javascript/jQuery when a user enters a new task in the To Do List. I probably am messing up the syntax relation between the two. Any help would be greatly appreciated. Thanks ahead of time.
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>Project 4 - To Do List</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="page">
<h1 id="header"></h1>
<h2>To Do List <span id="counter"></span></h2>
<h3>"If you can dream it, you can do it" - Walt Disney</h3>
<div id="newItemButton"><button href="#" id="showForm">New Entry</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Enter goal" />
<input type="submit" id="add" value="Submit"/>
</form>
<ul>
<!--<li id="one">Exercise</li>
<li id="two">Study</li>
<li id="three">Practice a New Language</li>
<li id="four">Work on Personal Project</li>-->
</ul>
</div>
<div class="about">
<a id="link" href="x">About</a>
</div>
<script src="jquery-1.11.0.js"></script>
<script src="javascript_jquery.js"></script>
</body>
<footer>
<div id="footer">To do List Icons made by <a id="link" href="http://www.freepik.com" title="Freepik">Freepik</a> from <a id="link" href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a id="link" href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
</div>
<div id="footer">Trash Icons made by <a id="link" href="https://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from <a id="link" href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a id="link" href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
</footer>
</html>
Here is the Javascript/jQuery. The focus of my issue is on the Delete function at the bottom and probably the .append part under "Check as Complete."
/*eslint-env jquery*/
/* eslint-env browser */
$(document).ready(function() {
// SETUP
var $list, $newItemForm, $newItemButton;
var item = ''; // item is an empty string
$list = $('ul'); // Cache the unordered list
$newItemForm = $('#newItemForm'); // Cache form to add new items
$newItemButton = $('#newItemButton'); // Cache button to show form
// ITEM COUNTER
function updateCount() { // Create function to update counter
var items = $('li[class!=complete]').length; // Number of items in list
$('#counter').text(items); // Added into counter circle
}
updateCount(); // Call the function
// SETUP FORM FOR NEW ITEMS
$newItemButton.show(); // Show the button
$newItemForm.hide(); // Hide the form
$('#showForm').on('click', function() { // When click on add item button
$newItemButton.hide(); // Hide the button
$newItemForm.show(); // Show the form
});
// ADDING A NEW LIST ITEM
$newItemForm.on('submit', function(e) { // When a new item is submitted
e.preventDefault(); // Prevent form being submitted
var text = $('input:text').val(); // Get value of text input
$list.append('<li>' + text + '</li>'); // Add item to end of the list
$('input:text').val(''); // Empty the text input
updateCount(); // Update the count
});
//Check as Complete
$list.on('click', 'li', function() {
var $this = $(this);
var complete = $this.hasClass('complete');
if (complete !== true) {
item = $this.text(); // Get the text from the list item
$this.remove(); // Remove the list item
$list // Add back to end of list as complete
.append('<li class=\"complete\">' + item + '<button type="button" class="trashbutton" src="/images/icon-trash.png" alt="Trash Icon"></button>' + '</li>')
.hide().fadeIn(300); // Hide it so it can be faded in
complete = true;
}
updateCount();
});
/*//Check as Incomplete
$list.on('click', 'li', function() {
var $this = $(this);
var complete = $this.hasClass('complete');
if (complete === true) {
item = $this.text();
$this.remove();
$list
.append('<li>' + item + '</li>')
.hide().fadeIn(300);
}
updateCount();
});*/
// Delete
$list.on('click', 'li', function() {
var $this = $(this);
var readyToDelete = $this.hasClass('trashbutton');
if(readyToDelete === true) {
$this.animate({
opacity: 0.0,
paddingLeft: '+=180'
}, 500, 'swing', function() {
$this.remove();
});
}
updateCount;
});
});
Here is the CSS just in case.
#import url(http://fonts.googleapis.com/css?family=Oswald);
body {
background-color: whitesmoke;
font-family: 'Oswald', 'Futura', sans-serif;
margin: 0;
padding: 0;
}
#page {
background-color: black;
margin: 0 auto 0 auto;
position: relative;
text-align: center;
}
/* Responsive page rules at bottom of style sheet */
h1 {
background-image: url('/images/icon.png');
background-repeat: no-repeat;
background-position: center center;
text-align: center;
text-indent: -1000%;
height: 75px;
line-height: 75px;
width: 117px;
margin: auto auto auto auto;
padding: 30px 10px 20px 10px;
}
h2 {
color: #fff;
font-size: 24px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
letter-spacing: .3em;
display: inline-block;
margin: 0 0 23px 0;
}
h2 span {
background-color: #fff;
color: green;
font-size: 12px;
text-align: center;
letter-spacing: 0;
display: inline-block;
position: relative;
border-radius: 50%;
top: -5px;
height: 22px;
width: 26px;
padding: 4px 0 0 0;
}
h3 {
color: white;
}
ul {
border:none;
padding: 0;
margin: 0;
}
li {
background-color: yellowgreen;
color: black;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
font-size: 24px;
letter-spacing: .05em;
list-style-type: none;
text-shadow: 1px 1px 1px grey;
text-align: left;
height: 50px;
padding-left: 1em;
padding-top: 10px;
padding-right: 1em;
}
/* unvisited link */
#link:link {
color: yellowgreen;
}
/* visited link */
#link:visited {
color: green;
}
/* mouse over link */
#link:hover {
color: darkseagreen;
}
/* selected link */
#link:active {
color: forestgreen;
}
.about {
text-align: center;
}
#footer {
background:none;
color: black;
text-align: center;
}
.complete {
background-color: #999;
color: white;
border-top: 1px solid #666;
border-bottom: 1px solid #b0b0b0;
text-shadow: 2px 2px 1px #333;
}
.trashbutton {
background-image: url('/images/icon-trash.png');
background-position: center;
background-repeat: no-repeat;
background-size: 12px 12px;
margin: auto !important;
position: relative;
top: 35%;
transform: translateY(-50%);
}
/* FORM STYLES */
form {
padding: 0 20px 20px 20px;
}
input[type='text'], input[type='password'], textarea {
background-color: whitesmoke;
color: black;
font-size: 24px;
width: 96%;
padding: 4px 6px;
border: 1px solid #999;
border-radius: 8px;}
input[type='submit'], a.add, button, a.show {
background-color: yellowgreen;
color: black;
border-radius: 8px;
border: none;
padding: 8px 10px;
margin-top: 10px;
font-family: 'Oswald', 'Futura', sans-serif;
font-size: 18px;
text-shadow: 1px 1px 1px grey;
text-decoration: none;
text-transform: uppercase;}
input[type='submit'], button {
float: right;
}
input[type='submit']:hover {
background-color: green;
color: #fff;
cursor: pointer;
}
/* form example */
#newItemButton {
padding: 10px 20px 75px 20px;
display: none;
}
#newItemForm {
padding-top: 20px;
}
#itemDescription {
width: 325px;
}
#newItemForm input[type='submit'] {
margin-top: 0;
text-align: center;
}
/* Attributes example */
#group {
margin: 10px;
border: 2px solid #fff;
}
/* Small screen:mobile */
#media only screen and (max-width: 500px) {
body {
background-color: #403c3b;
}
#page {
max-width: 480px;
}
}
#media only screen and (min-width: 501px) and (max-width: 767px) {
#page {
max-width: 480px;
margin: 20px auto 20px auto;
}
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#page {
max-width: 480px;
margin: 20px auto 20px auto;
}
}
/* Larger screens act like a demo for the app */
#media only screen and (min-width: 960px) {
#page {
max-width: 480px;
margin: 20px auto 20px auto;
}
}
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
h1{
background-image: url('/images/icon.png');
background-size: 100px 100px;
}
}
Some screenshots of what works so far. You can see the tasks as incomplete in green, completed in grey, and the trash button shows up when the task is grey.
When app first loads
One incomplete task and one complete task. Notice trash button that does not work.
NOTE: I should mention that, while heavily altered, the HTML and JS code is derived from an example from Jon Duckett's Javascript and jQuery book. This is my first time ever working with jQuery and the purpose of this assignment is to learn the basics.
Here is how you can get it working:
Change $list.on('click', 'li', function() { to $list.on('click', 'li > button', function() { (your list items doesn't have 'trashbutton' class).
Update code you use to delete element since after clicking on a button you have to delete parent element (li), not the button itself.
Take a look at this in action:
$(document).ready(function() {
// SETUP
var $list, $newItemForm, $newItemButton;
var item = ''; // item is an empty string
$list = $('ul'); // Cache the unordered list
$newItemForm = $('#newItemForm'); // Cache form to add new items
$newItemButton = $('#newItemButton'); // Cache button to show form
// ITEM COUNTER
function updateCount() { // Create function to update counter
var items = $('li[class!=complete]').length; // Number of items in list
$('#counter').text(items); // Added into counter circle
}
updateCount(); // Call the function
// SETUP FORM FOR NEW ITEMS
$newItemButton.show(); // Show the button
$newItemForm.hide(); // Hide the form
$('#showForm').on('click', function() { // When click on add item button
$newItemButton.hide(); // Hide the button
$newItemForm.show(); // Show the form
});
// ADDING A NEW LIST ITEM
$newItemForm.on('submit', function(e) { // When a new item is submitted
e.preventDefault(); // Prevent form being submitted
var text = $('input:text').val(); // Get value of text input
$list.append('<li>' + text + '</li>'); // Add item to end of the list
$('input:text').val(''); // Empty the text input
updateCount(); // Update the count
});
//Check as Complete
$list.on('click', 'li', function() {
var $this = $(this);
var complete = $this.hasClass('complete');
if (complete !== true) {
item = $this.text(); // Get the text from the list item
$this.remove(); // Remove the list item
$list // Add back to end of list as complete
.append('<li class=\"complete\">' + item + '<button type="button" class="trashbutton" src="/images/icon-trash.png" alt="Trash Icon"></button>' + '</li>')
.hide().fadeIn(300); // Hide it so it can be faded in
complete = true;
}
updateCount();
});
/*//Check as Incomplete
$list.on('click', 'li', function() {
var $this = $(this);
var complete = $this.hasClass('complete');
if (complete === true) {
item = $this.text();
$this.remove();
$list
.append('<li>' + item + '</li>')
.hide().fadeIn(300);
}
updateCount();
});*/
// Delete
$list.on('click', 'li > button', function() {
var $this = $(this);
var readyToDelete = $this.hasClass('trashbutton');
if(readyToDelete === true) {
$this.parent().animate({
opacity: 0.0,
paddingLeft: '+=180'
}, 500, 'swing', function() {
$(this).remove();
});
}
updateCount;
});
});
#import url(http://fonts.googleapis.com/css?family=Oswald);
body {
background-color: whitesmoke;
font-family: 'Oswald', 'Futura', sans-serif;
margin: 0;
padding: 0;
}
#page {
background-color: black;
margin: 0 auto 0 auto;
position: relative;
text-align: center;
}
/* Responsive page rules at bottom of style sheet */
h1 {
background-image: url('/images/icon.png');
background-repeat: no-repeat;
background-position: center center;
text-align: center;
text-indent: -1000%;
height: 75px;
line-height: 75px;
width: 117px;
margin: auto auto auto auto;
padding: 30px 10px 20px 10px;
}
h2 {
color: #fff;
font-size: 24px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
letter-spacing: .3em;
display: inline-block;
margin: 0 0 23px 0;
}
h2 span {
background-color: #fff;
color: green;
font-size: 12px;
text-align: center;
letter-spacing: 0;
display: inline-block;
position: relative;
border-radius: 50%;
top: -5px;
height: 22px;
width: 26px;
padding: 4px 0 0 0;
}
h3 {
color: white;
}
ul {
border:none;
padding: 0;
margin: 0;
}
li {
background-color: yellowgreen;
color: black;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
font-size: 24px;
letter-spacing: .05em;
list-style-type: none;
text-shadow: 1px 1px 1px grey;
text-align: left;
height: 50px;
padding-left: 1em;
padding-top: 10px;
padding-right: 1em;
}
/* unvisited link */
#link:link {
color: yellowgreen;
}
/* visited link */
#link:visited {
color: green;
}
/* mouse over link */
#link:hover {
color: darkseagreen;
}
/* selected link */
#link:active {
color: forestgreen;
}
.about {
text-align: center;
}
#footer {
background:none;
color: black;
text-align: center;
}
.complete {
background-color: #999;
color: white;
border-top: 1px solid #666;
border-bottom: 1px solid #b0b0b0;
text-shadow: 2px 2px 1px #333;
}
.trashbutton {
background-image: url('/images/icon-trash.png');
background-position: center;
background-repeat: no-repeat;
background-size: 12px 12px;
margin: auto !important;
position: relative;
top: 35%;
transform: translateY(-50%);
}
/* FORM STYLES */
form {
padding: 0 20px 20px 20px;
}
input[type='text'], input[type='password'], textarea {
background-color: whitesmoke;
color: black;
font-size: 24px;
width: 96%;
padding: 4px 6px;
border: 1px solid #999;
border-radius: 8px;}
input[type='submit'], a.add, button, a.show {
background-color: yellowgreen;
color: black;
border-radius: 8px;
border: none;
padding: 8px 10px;
margin-top: 10px;
font-family: 'Oswald', 'Futura', sans-serif;
font-size: 18px;
text-shadow: 1px 1px 1px grey;
text-decoration: none;
text-transform: uppercase;}
input[type='submit'], button {
float: right;
}
input[type='submit']:hover {
background-color: green;
color: #fff;
cursor: pointer;
}
/* form example */
#newItemButton {
padding: 10px 20px 75px 20px;
display: none;
}
#newItemForm {
padding-top: 20px;
}
#itemDescription {
width: 325px;
}
#newItemForm input[type='submit'] {
margin-top: 0;
text-align: center;
}
/* Attributes example */
#group {
margin: 10px;
border: 2px solid #fff;
}
/* Small screen:mobile */
#media only screen and (max-width: 500px) {
body {
background-color: #403c3b;
}
#page {
max-width: 480px;
}
}
#media only screen and (min-width: 501px) and (max-width: 767px) {
#page {
max-width: 480px;
margin: 20px auto 20px auto;
}
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#page {
max-width: 480px;
margin: 20px auto 20px auto;
}
}
/* Larger screens act like a demo for the app */
#media only screen and (min-width: 960px) {
#page {
max-width: 480px;
margin: 20px auto 20px auto;
}
}
#media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
h1{
background-image: url('/images/icon.png');
background-size: 100px 100px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<h1 id="header"></h1>
<h2>To Do List <span id="counter"></span></h2>
<h3>"If you can dream it, you can do it" - Walt Disney</h3>
<div id="newItemButton"><button href="#" id="showForm">New Entry</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Enter goal" />
<input type="submit" id="add" value="Submit"/>
</form>
<ul>
<!--<li id="one">Exercise</li>
<li id="two">Study</li>
<li id="three">Practice a New Language</li>
<li id="four">Work on Personal Project</li>-->
</ul>
</div>
<div class="about">
<a id="link" href="x">About</a>
</div>
<script src="jquery-1.11.0.js"></script>
<script src="javascript_jquery.js"></script>
It would be easier for you to accomplish your task by giving the trashbutton class a click event to remove its parent li from the list. This can be accomplished with the following code.
// Delete
$('.trashbutton').click(function (e) {
e.preventDefault();
$(this).parent().animate({
opacity: 0.0,
paddingLeft: '+=180'
}, 500, 'swing', function() {
$(this).parent().remove();
});
}
updateCount();
})
Hi I am very new to web development and was practicing some of the things I learned.
I built a basic program to toggle day and night. When you click the sun the moon appears and vise versa. You can see that the text "Good Afternoon!" and "Good Night!" appear as a default. I would like to be able to have "Good Afternoon!" appear only when the sun is present and "Good Night!" to appear only when the moon is present. Any help would be appreciated.
Here is the fiddle.
I tried something along the lines of this to mimic the other code but I know it is incorrect.
/*toggle text*/
if ($('#daytext').hasClass('visible')) {
$('#daytext').removeClass('visible');
} else {
$('#daytext').removeClass('visible');
}
You can use CSS properties to achieve that.
Look at visibility : hidden; and display : none;.
From here, "Another common display value is none. Some specialized elements such as script use this as their default. It is commonly used with JavaScript to hide and show elements without really deleting and recreating them.
This is different from visibility. Setting display to none will render the page as though the element does not exist. visibility: hidden; will hide the element, but the element will still take up the space it would if it was fully visible."
Updated fiddle.
You've just to hide the Good Night! by default then toggle the visibility when you click using the jQuery methods show()/hide():
if ($('#orb').hasClass('sun')) {
$('#daytext').hide();
$('#nighttext').show();
$('#orb').removeClass('sun').addClass('moon');
} else {
$('#daytext').show();
$('#nighttext').hide();
$('#orb').removeClass('moon').addClass('sun');
}
Hope this helps.
$(document).ready(function() {
$('#orb').click(function() {
/*Day and night toggle*/
if ($('#orb').hasClass('sun')) {
$('#daytext').hide();
$('#nighttext').show();
$('#orb').removeClass('sun').addClass('moon');
} else {
$('#daytext').show();
$('#nighttext').hide();
$('#orb').removeClass('moon').addClass('sun');
}
if ($('#sky').hasClass('day')) {
$('#sky').removeClass('day').addClass('night');
} else {
$('#sky').removeClass('night').addClass('day');
}
/*toggle visible moonspots*/
if ($('#moonspot1').hasClass('visible')) {
$('#moonspot1').removeClass('visible');
} else {
$('#moonspot1').addClass('visible');
}
if ($('#moonspot2').hasClass('visible')) {
$('#moonspot2').removeClass('visible');
} else {
$('#moonspot2').addClass('visible');
}
if ($('#moonspot3').hasClass('visible')) {
$('#moonspot3').removeClass('visible');
} else {
$('#moonspot3').addClass('visible');
}
/*toggle text*/
if ($('#daytext').hasClass('visible')) {
$('#daytext').removeClass('visible');
} else {
$('#daytext').removeClass('visible');
}
});
});
#orb {
height: 300px;
width: 300px;
border-radius: 100%;
padding: 20px;
margin: auto;
position: absolute;
top: 0;
left: 0;
botton 0;
right: 0;
}
#sky {
height: 100%;
width: 100%;
}
.sun {
background-color: #ffdd00;
border: 10px solid #f1c40f;
}
.sun:hover {
border: 20px solid #f1c40f;
}
.moon {
background-color: #bdc3c7;
border: 10px solid #eaeff2;
}
.moon:hover {
border: 20px solid #eaeff2;
}
.night {
background-color: #2c3e50;
}
.day {
background-color: #aaecf2;
}
#moonspot1 {
height: 50px;
width: 50px;
border-radius: 100%;
float: right;
margin: 20px;
}
#moonspot2 {
height: 80px;
width: 80px;
border-radius: 100%;
float: right;
margin: 20px;
}
#moonspot3 {
height: 150px;
width: 150px;
border-radius: 100%;
float: right;
margin: 20px;
}
.visible {
background-color: #eaeff2;
}
#daytext {
font-size: 50px;
font-family: Optima;
}
#nighttext {
font-size: 50px;
font-family: Optima;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="sky" class="day">
<div id="orb" class="sun">
<div id="moonspot1"></div>
<div id="moonspot2"></div>
<div id="moonspot3"></div>
</div>
<div id = "daytext">Good Afternoon!</div>
<div id = "nighttext" style='display:none'>Good Night!</div>
</body>
No need for so many classes to be toggled. I cleaned up your code to show you how to accomplish the same thing with only toggling between the .day and .night class. I'm using display: none to hide irrelevant elements depending on that state.
$(document).ready(function() {
$('#orb').click(function() {
/*Day and night toggle*/
if ($('#sky').hasClass('day')) {
$('#sky').removeClass('day').addClass('night');
} else {
$('#sky').removeClass('night').addClass('day');
}
});
});
#sky {
height: 100%;
width: 100%;
}
.night {
background-color: #2c3e50;
}
.day {
background-color: #aaecf2;
}
#orb {
height: 300px;
width: 300px;
border-radius: 50%;
padding: 20px;
margin: auto;
position: absolute;
top: 0;
left: 0;
botton 0;
right: 0;
}
.sun {
background-color: #ffdd00;
border: 10px solid #f1c40f;
}
.sun:hover {
border: 20px solid #f1c40f;
}
/* styling the #sky.night .sun to be the moon */
.night .sun {
background-color: #bdc3c7;
border: 10px solid #eaeff2;
}
.night .sun:hover {
border: 20px solid #eaeff2;
}
/* common styles for the 3 moonspots */
.moonspot {
background-color: #eaeff2;
border-radius: 50%;
float: right;
margin: 20px;
}
/* hide moonspots during day */
.day .moonspot {
display: none;
}
#moonspot1 {
height: 50px;
width: 50px;
}
#moonspot2 {
height: 80px;
width: 80px;
}
#moonspot3 {
height: 150px;
width: 150px;
}
.text {
font-size: 50px;
font-family: Optima;
/* position & z-index to put text above other elements */
position: relative;
z-index: 1;
}
/* hide the irrelevant text based on day/night */
.day #nighttext {
display: none;
}
.night #daytext {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="sky" class="day">
<div id="orb" class="sun">
<div class="moonspot" id="moonspot1"></div>
<div class="moonspot" id="moonspot2"></div>
<div class="moonspot" id="moonspot3"></div>
</div>
<div class="text" id="daytext">Good Afternoon!</div>
<div class="text" id="nighttext">Good Night!</div>
</body>
You can do several things. Since you are using jQuery, the following is an option.
On $(document).ready() you can add the following.
$('#nighttext').toggle();
Then in you click function you can do the following:
$('#daytext').toggle();
$('#nighttext').toggle();
You could also create a single div for the text and change the text on click, together with it's class.
Not really sure why there's extra space above and below my boxes that I'm appending in a simple for loop.
HTML:
<body>
<div id="header">
Snake
</div>
<div id="game-container"></div>
</body>
CSS: (I tried a lot of go-tos)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}
html, body {
border: 0;
padding: 0;
margin: 0;
}
#header {
text-align: center;
font-size: 5em;
color: rgb(0, 50, 105);
}
#game-container {
width: 280px;
padding: 0;
margin: 0 auto;
}
.one-square {
width: 14px;
height: 14px;
border: 1px solid grey;
display: inline-block;
margin: 0;
padding: 0;
}
JQUERY:
$(document).ready(function(){
var div = '<div class="one-square"></div>';
for(var i = 0; i < 300; i++){
$('#game-container').append(div);
}
});
Clearly I'm missing something obvious. Quick codepen to demonstrate: http://codepen.io/anon/pen/WrperX
Just add line-height:0px; to your #game-conatiner div.
#game-container {
width: 280px;
padding: 0;
margin: 0 auto;
line-height:0px; /* ADDED */
}
Working Fiddle
Explanation: While your div has some line-height by default which has height more than your one-square div's so it has space above and below. Adding line-height:0px it will remove it.
Change
.one-square {
display: inline-block;
}
To:
.one-square {
display: block;
float: left;
}
See this updated code-pen
Add line-height: 0em; for the #game-container.
#game-container {
width: 280px;
padding: 0px;
margin: 0px auto;
line-height: 0em;
}
Hope this will solve your problem.
In my project, I have this <div> which receives, via jquery function, the content read from several pages and display them as a popup window:
<div id="popup">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
The css associated to this is the following:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
width: 1000px;
height: 900px;
max-width: 1500px;
max-height: 1000px;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
background-color: #FFFFFF;
border-style: solid;
border-color: #E0E0E0;
text-decoration-color: #E0E0E0;
font: 24px sans-serif;
overflow: auto;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
and the content is appended in this <div> through this jquery code:
<script>
$('document').ready(function(){
$('#popup').draggable({
cointainment: "#container"
});
$('#popup').resizable({
cointainment: "#container"
});
$('#popup').hide();
$('#button').click(function(){
$('#popup').hide();
});
$('a').click(function(e){
if($(this).attr('href') != '<c:out value="${pageContext.request.contextPath}/acesso/logout.html"/>') {
e.preventDefault();
$.get($(this).attr('href'), function(data){
var $temp = $('<div/>', {html:data});
$('#title').text($temp.find('title').text());
$('#text').html($temp.remove('head').html());
$('#popup').show();
});
}
});
});
</script>
My problem is the content attached to <div> being displayed ou of the boundaries of the popup, like this:
Someone knows how to solve this?
UPDATE
new code for the css file:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
max-width: 85%;
max-height: 85%;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
overflow: scroll-y;
}
It depends on how you want to solve it:
Make the popup scroll:
#popup {
overflow:scroll-y;
}
The ideal thing is to make the popup fit the content. But the problem is, that size depends on what is generated inside the popup. If it is predictable, maybe you can define some styles to force the geerated stuff to use relative (%) sizes, in this case your problem is solved. I mean, kind of:
#popup {
position:relative;
display:block;
}
#popup > div {
width: 100% !important;
height: 100% !important;
}
This will work if inside #popup there's one div with the rest of the contents. Find out what's inside to make this fit your needs. You can overwrite styles with the !important tag.
If, on the other hand, you really have no idea what will be inside the popup, or everytime is different, you can detect the size of what's inside via javascript, and adjust #popup accordingly. Take a look at clientHeight and clientWidth properties of DOM elements.