html #MEDIA print {}, to hide markup leaves blank space in the print - javascript

i am using java script to print a selected area from in an html page..i used the #MEDIA print { .. to hide all headers, buttons and image from the page. It gets hidden but empty space remains. how do i align the print contents to print from the top of the page..
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#MEDIA print {
#top_part{
visibility:hidden;
}
#print{
margin-top: 5px;
}
}
</style>
</head>
<body>
<div id="top_part">
<button onclick="window.print();">print</button>
hello <br/>
<br/><br/><br/><br/><br/>
test if the printer avoids this content
<br/>
print this..
</body>
</html>
in the code the div top_part contains the buttons and text which i need to hide and it hides but how do i align the printable area from the top corner of the print

try
#MEDIA print {
#top_part{
display:none;
}

Related

Display webpage only on Desktop

I have created a webpage using HTML, CSS, JS (Paper.js)
But I want my webpage to be displayed only when opened in desktop sites
if it is opened in any smartphone the a message must appear like open in desktop nothing else must be loaded
because in touch screen devices all functions does not work properly
link to my webpage is -
https://sachinverma53121.github.io/Keypress-Sounds/key-sounds.html
You could use JS to not display the div/tag if the page is less than a certain width
Something like this might do:
<p id="demo">This only shows when the window is more than 500.</p>
<p id="message" style="display: none;">Please use this on a desktop.</p>
<script>
if (window.innerWidth < 500){
document.getElementById("demo").style.display = "none";
document.getElementById("message").style.display = "block";
}
</script>
You could also use CSS
<style>
#message {
display: none;
}
#media (max-width: 500px){
#demo {
display: none;
}
#message {
display: block;
}
}
</style>
<p id="demo">This only shows when the window is more than 500.</p>
<p id="message">Please use this on a desktop.</p>
you can do this in bootstrap like this. The paragraph hides on mobile size if you want to hide it on tablet size too, change the "sm" to "md" to find out how to use it visit this link https://getbootstrap.com/docs/4.2/utilities/display/:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>title</title>
</head>
<body>
<div class="d-none d-sm-block">
<p>hide me on mobile</p>
</div>
<div class="d-block d-sm-none">
<p><strong>show me on mobile</strong></p>
</div>
</body>
</html>
add a
<script>
var userAgent;
(function() {
userAgent = navigator.userAgent.toLowerCase();
if (typeof orientation !== 'undefined' || userAgent.indexOf('mobile') >= 0); {
alert('open in desktop');
} else {
document.body.innerHTML = 'your HTML as a string here';
}
})();
</script>

alert with following picture

I was was wondering if I could make an alert and a picture appear then disappear here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<center><h1>Are you human???</h1></center>
<button id="button">Yes</button>
<button onclick="no" id="no">No</button>
<script>
function no(){
alert("Really you are interesting")
}
There is no pictures in your code.
But if you mean - show alert popup window, you should add parentheses like so onclick = "no()"
You cannot customize alert window.
But if you want just show some picture after button click, you should add <img> with display: none to the page and onclick change it to display: block.
You can't put a picture in the alert box.You can achieve it by putting up an image in a div keeping the display:none for that and then show hide it like this
function no() {
alert("Really you are interesting")
$("#msg").fadeIn("slow").delay("100").fadeOut("slow");
}
div{
position:fixed;
background-color:rgba(0,0,0,0.8);
width:100%;
height:100%;
display:none;
}
<div id="msg">
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"/>
</div>
<center>
<h1>Are you human???</h1>
</center>
<button id="button">Yes</button>
<button onclick="no()" id="no">No</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Make the command bar unresponsive

I want to use office-ui-fabric with angularjs, so I am trying to use ng-office-ui-fabric.
In the following example, when the wide of the screen is limited, we can observe that the span (eg, 3rd, 14) are hidden. This is not what I want; I want them to be always displayed no matter the width of the screen.
Does anyone know how to make the command bar unresponsive?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script>
</head>
<body ng-app="YourApp">
<div ng-controller="YourController">
<uif-command-bar>
<uif-command-bar-main>
<uif-command-bar-item>
<uif-icon uif-type="save"></uif-icon>
<span>3rd</span>
</uif-command-bar-item>
<uif-command-bar-item>
<span>14</span>
<uif-icon uif-type="chevronDown"></uif-icon>
</uif-command-bar-item>
</uif-command-bar-main>
</uif-command-bar>
</div>
<script type="text/javascript">
angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
.controller('YourController', function () {})
</script>
</body>
</html>
By default the text is set to not display in the css. Ie:
CommandBarItem .ms-CommandBarItem-commandText {
display: none;
}
Then they using media queries to only show those elements when the width is over 640px
ie:
#media only screen and (min-width: 640px)
fabric.components.min.css:6
.ms-CommandBarItem .ms-CommandBarItem-chevronDown, .ms-CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
You could override their styles by supplying your own that don't use media queries and just be sure that your css loads after their css (so it takes precedence). ie:
CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
Here is a sample app demonstrating this. Note that I had to add the styles in the head tag inline in a style tag b/c of how the inline editor loads its assets. Normally you would just load your own custom css in a link tag (make sure its loaded last).
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script>
<style>
.ms-CommandBarItem .ms-CommandBarItem-chevronDown,
.ms-CommandBarItem .ms-CommandBarItem-commandText {
display: inline;
}
</style>
</head>
<body ng-app="YourApp">
<div ng-controller="YourController">
<uif-command-bar>
<uif-command-bar-main>
<uif-command-bar-item>
<uif-icon uif-type="save"></uif-icon>
<span>3rd</span>
</uif-command-bar-item>
<uif-command-bar-item>
<span>14</span>
<uif-icon uif-type="chevronDown"></uif-icon>
</uif-command-bar-item>
</uif-command-bar-main>
</uif-command-bar>
</div>
<script type="text/javascript">
angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components'])
.controller('YourController', function() {})
</script>
</body>
</html>
This is how I figured this out. Using chrome dev tools, I right mouse clicked on the text and choose inspect. This shows the element and the styles associated with it. The default style was to have display: none; applied. When you resize the browser more than 640px wide, you'll see the media query being applied that now says to display: inline; the element.

Collapsible <div> onclick of link

I have something like the below:
$grabarticles = $db->prepare("
SELECT title, message
FROM articles
");
$grabarticles->execute();
foreach($grabarticles as $articles) {
echo $articles["title"];
//when a user clicks the text above, reveal the below
echo "<div id='article'><br/><br/>";
echo " ".$articles["message"];
echo "</div><br/><br/>";
//when a user clicks the $articles["title"] again, it then collapses
}
I'm not too well versed in Javascript to know, but is there some kind of thing I can do to make the $articles["title"] clickable, and onclick expand below to display the contents of $articles["message"], but also be reversible with another onclick? Here's an image to illustrate:
I want each <div> to be separate from another, so if I open #1 by clicking $article["title"] //1, and then open #2 by clicking the appropriate text, I can then close #1 by reclicking it without interfering with #2.
Wrap the article title in a DOM element that can have events bound to it, such as a span. Then give it a class so we can easily target it.
echo '<span class="article-title">', $articles["title"] ,'</span>';
Next, your id in your foreach loop should be a class, as you're generating multiple elements and only one element can have a single ID.
echo "<div class='article' style='display:none;'><br/><br/>"; // <--note the "class" instead of "id"
Now just make a click function to toggle the visibility of the element.
$('.article-title').click(function(){
$(this).next().toggle(); // find the next element after this one and toggle its visibility
});
Use jscript
<script type="text/javascript">
$(function () {
$('#testTitle').click(function (e) {
if ($("#testcontent").is(":visible")) {
$("#testcontent").slideUp("slow");
}
else {
$("#testcontent").slideDown("slow");
}
});
});
You want to use this collapsible DIV jQuery plugin written by John Snyder. It does exactly what you are looking for.
I use this on my blog you can see an example of it here and here
Sample HTML
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="/stylesheet.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.collapsible.js"></script>
<div class='collapsible'>
Header Text 1<span></span>
</div>
<div class='container'>
<div class='content'>
<div>
Body Text 1
</div>
</div>
</div>
<div class='collapsible'>
Header Text 2<span></span>
</div>
<div class='container'>
<div class='content'>
<div>
Body Text 2
</div>
</div>
</div>
</html>
CSS to go along with it
/* START SECTION FOR COLLAPSEIBLE DIV */
.collapse-open {
/* background:#000;
color: #fff;*/
}
.collapse-open span {
display:block;
float:left;
padding:10px;
background:url(/images/minus.png) center center no-repeat;
}
.collapse-close span {
display:block;
float:left;
background:url(/images/plus.png) center center no-repeat;
padding:10px;
}

print Selected data from web page

I want to print the data of selected div instead of whole page,
I am using window.print() but its printing the whole web page.
Do as shown in following example:
<html>
<head>
<style type="text/css" media="print">
#media print
{
#non-printable { display: none; }
#printable {
display: block;
width: 100%;
height: 100%;
}
}
</style>
</head>
<body>
<div id="printable" >
Your content to print
</div>
<div id='non-printable'>
this is not printable section
</div>
<input type="button" id="non-printable" class=normaltext onclick="JavaScript:window.print();" value="print" />
</body>
</html>
for more detail or download visit the site:
http://blog.developeronhire.com/print-selected-div-in-web-page/
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
How about writing a style sheet for print and set it up to show the relevant elements on the page.
If you know which segments you want to print before hand, you can use media based CSS to hide unwanted segments of the page in print. Have a look at
http://www.killersites.com/articles/newsletterArchive/Newsletter_Nov3_2003.htm

Categories

Resources