I have a page on my website called printUsers.html.
On it there is a button which prints the page using 'javascript:window.print()'.
I am also using '#media print' on the page to hide some buttons when the page is printed.
This is all working well and I have no problems here.
The problem is the following:
All the pages on the site, extend from the main page. So at the top of printUsers.html I have:
#{extends 'App/main.html' /}
This includes styles and a header which has buttons and drop-downs.
When the user clicks the print button, I want to hide all the header and buttons etc, which come from the main.html.
I tried wrapping it into a div, giving it an id and hiding it but this didn't work.
I have just started using javascript so any help would be much appreciated.
Thanks.
The CSS way
#media print
Use #media Print as you stated in your question, but include all the elements you don't want to see in your printed result, and put display:none to them. You can also apply some margin:0 auto; text-align:center; to your main content if you want to center it into your page.
Edit: You can hide any element, such as header this way:
header
{
display:none;
}
footer
{
display:none;
}
The Javascript way
Button's onClick
Your button's onclick:
Button onClick()
<button id="printThatText" name="printThatText" onclick="printPage();">Print this page</button>"
Your javascript code in the header (or at the end of the page)
Javascript
function printPage()
{
var myDropDown = document.getElementById('myDropDown');
myDropDown.style.display = "none";
//Whatever other elements to hide.
window.print();
myDropDown.style.display = "block";
return true;
}
You could also put all of these elements in an array and make a for ... in ... loop to show/hide them.
Wrap the contents with an element that encapsulates all of stuff you want to hide. In the print CSS, set the display to none.
The CSS:
#media print {
#myHeader, #myFooter { display: none }
}
The HTML:
<div id="myHeader">
<ul>
<li>
<a>My link</a>
</li>
</ul>
</div>
<div id="myContent">
<p>This will print fine</p>
</div>
<div id="myFooter">
<p>This will not print</p>
</div>
You could always use HTML5 header/footer elements!
Maybe try the opposite--print only a particular div--rather than hiding other divs: Print <div id=printarea></div> only?
Related
I currently have a div in my HTML that is initially hidden (using display:none).
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!</p>
</div>
I then use the following Javascript so when the .autocompleteitem item is clicked, it displays:
$(document).ready(function() {
$(document).on('click','.autocompleteitem:not(.autocompleteitemwithcontainer)',function(){
$("div.fulladdress").show();
});
});
However, if Javascript is disabled, the full address will never display. How do I resolve this?
Maybe try working with the tag <noscript>. It runs the code inside it if the javascript is disabled.
Use following HTML code. Now user can see the div when javaScript disabled by user or device not support javaScript. You can customize your div by select .fulladdress class on CSS.
<noscript>
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!
</p>
</div>
</noscript>
You can try something like this.
If javascript enabled - Hide div on document ready and then show on click event
If javascript disabled your document ready function wont execute and it wont hide the div
$(document).ready(function() {
$("div.fulladdress").hide();
$("#button").on('click',function(){
$("div.fulladdress").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fulladdress">
<p>Only display the contents of this div when an element is clicked!</p>
</div>
<div class="button">
<button id="button">display</button>
</div>
Try this
<noscript>
<style type="text/css">
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
You don't have javascript enabled.
</div>
</noscript>
If you absolutely have to have your div hidden at first even with JavaScript disabled and only then revealed, then there are some ways to deal with it.
You can detect if JavaScript is disabled and request the user to enable it, and not show the page unless the user does so. How to detect if JavaScript is disabled?
You can use CSS properties to show/hide .fulladdress on hover instead of on a click (you might want to modify your div for that, or put it inside a <noscript> tag).
You might want to use 'hacks' to detect a click without using JavaScript. Here are a few examples:
Show / hide div on click with CSS
What is the simplest way to implement pure css show/hide?
Hope this helps!
HTML
<a data-info-id="info1" onclick="toggleLink();" href="#">Click here for more information</a>
<div id="info1" border="0">
More information here
</div>
CSS
#info1 {
display:none;
}
JS
function toggleLink()
{
var elem=document.getElementById("info1");
var hide = elem.style.display =="none";
if (hide) {
elem.style.display="block";
}
else {
elem.style.display="none";
}
}
PROBLEM
When the CSS is external and not inline it requires you to initially click the link twice before it properly shows and hides the info1 DIV.
SOLUTION IS TO MAKE THE STYLE INLINE, BUT WHY?
<a data-info-id="info1" onclick="toggleLink();" href="#">Click here for more </a>
<div id="info1" border="0" style="display:none";>
More information here
</div>
I want to use it with the following CSS then create an array with a listener for id=info1, id=info2 .... id=info20.
[id^="info"] { /* gets all elements where id starting with info */
display: none;
}
Link to Fiddle
Try this:
var hide = window.getComputedStyle(elem, null).display =="none";
instead of:
var hide = elem.style.display =="none";
Fiddle: http://jsfiddle.net/Wfxpu/85/
Edit (explanation): This works because it checks for the computed style, which includes any styles set by classes or in stylesheets as well as inline styles. What you had originally only checked for the style in the inline style tag, which is not present when you are using a class/style from a stylesheet (in your case your code worked after the second click because after clicking you added an inline style). Hope that helps!
I am working on a collapsible panel menu. Everything is looking great except for the title in the collapsible panel tab. So, here's what I'm trying to do, if the collapsible panel content is open, I want the collapsible panel tab to show a specific span class. For example, it will show a minus or (-) sign if it is open. And if it is close, it will show a plus or (+) sign.
Here's the code:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">
<span class="closedmenu">+</span>
<span class="openmenu">-</span>
</div>
<div class="CollapsiblePanelContent">
<ul>
<li>LINK1titleHERE</li>
<li>LINK2titleHERE</li>
</ul>
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
</script>
Or, if the collapsible panel content is open, I would like the class .closedmenu to have a css of display:none. And if the collapsible panel content is closed, the class .openmenu to have a css of display:none.
In css, the idea is like:
.CollapsiblePanelOpen .CollapsiblePanelTab {
.closedmenu {display:none;} }
.CollapsiblePanelClosed .CollapsiblePanelTab {
.openmenu {display:none;} }
But of course, this does not work. So, I think a javascript is needed.
I need a very simple answer to this one, if anyone can, please. Thank you! I hope this question is clear and understandable. :)
I'm not familiar with the hooks you can use in Spry, but you could functions like this:
function clickPlus() {
document.getElementById("openButton").style.display = "none";
document.getElementById("closeButton").style.display="inline";
}
function clickMinus() {
document.getElementById("openButton").style.display = "inline";
document.getElementById("closeButton").style.display="none";
}
And on your spans do something like this:
<span id="openButton" onclick="clickPlus();">+</span>
<span id="closeButton" onclick="clickMinus();">-</span>
This all assumes that you start off with specifying display:none; in your css for closeButton.
EDIT: I changed the code to be a bit more specific, and noted the requirement for display:none; in the css
I have the following code:
<a class="button" href="javascript:ShowHide('elaborate_1')" style="font-size:24px; padding:0 10px; margin-left:10px;">COLLAPSE</a>
<div id="elaborate_1" class="expandable-box" style="display:none;">
<div class="description"><?php //USE THIS CLASS 'description' ON A 'div' TAG FOR A GRAY BOX TO DISPLAY CONTENT ?>
<p class="nomargin nopadding">HELLO</p>
</div><!-- .descpription -->
</div>
The web page currently hides this message "hello" until I click "COLLAPSE" however I want the content to be shown automatically until I click "collapse.
How can I do this?
Change the display:none to display:block on your elaborate_1 div.
Remove the display:none from the containing element:
<div id="elaborate_1" class="expandable-box">
If your ShowHide function is correct, it should work just like that. If not, you should post the code from the function.
Just remove style="display:none;" from your html element
and add following code to your js function (for reference)
document.getElementById("elaborate_1").style.display = "block";
Personally I would suggest taking a look at JQuery. It allows you to take advantage of controlling various effects, like show, hide, toggle, fade, and custom animation, etc. Here is the link: http://api.jquery.com/category/effects/ which might be useful to you.
A little Jquery sample code:
$('a.button').click(function(){
$('#elaborate_1').toggle("slow");
});
I have a fairly novice understanding of CSS and HTML, and I'm trying to do something that I think should be relatively simple (in a custom tumblr theme I'm creating), but I can't find a straightforward answer. I have a feeling there might be a super easy way to do what I want in JavaScript.
I'd like to display a DIV only on the main index page (i.e. homepage) of the tumblr blog. It seems the documentation tumblr provides allows you to do this to some extent (through the {Block:IndexPage} variable), but the problem is the code within this element displays on all index pages (i.e. instead of just showing up at the root level on /page/1, it will show up on subsequent "index" pages like /page/2, etc.
Here's the code I have, which successfully does not show the div on permalink pages:
{block:IndexPage}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:IndexPage}
Any ideas? Any help is much appreciated!
This will work:
{block:IndexPage}
<div id="index"
{block:SearchPage}style="display: none;"{/block:SearchPage}
{block:TagPage}style="display: none;"{/block:TagPage}>
This is displayed only on the index page.
</div>
{/block:IndexPage}
More info: http://ejdraper.com/post/280968117/advanced-tumblr-customization
I was was looking to show code on post pages, but not on the index, search, etc page (i.e. pages with multiple posts. Thanks to the above, I figured out how to do it and wanted to share in case it helps somebody else.
<div id="splashbox" style="display:none">
This is the content I wanted to show on the post pages only.
</div>
<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
//alert('location identified as ' + location.href);
if (self.location.href.indexOf("post") > -1 ) {
document.getElementById('splashbox').style.display='block';
}
}
</script>
You can also do it just with CSS.
#box{
display:none;
}
.page1 #box{
display:block;
}
<body class="page{CurrentPage}">
<div id="box">
Only displayed in first page.
</div>
</body>
display:none will hide it but thats, a hidden element can still mess with your layout.
We could use the comment code* to turn the div into a comment that wont mess with anything.
*<!-- comment -->
ex.
{block:IndexPage}
{block:SearchPage}<!--{/block:SearchPage}
{block:TagPage}<!--{/block:TagPage}
<div style="width:400px; heigth:200px">
blah blah
</div>
{block:SearchPage}-->{/block:SearchPage}
{block:TagPage}-->{/block:TagPage}
{/block:IndexPage}
The {block:IndexPage} block, as you have discovered, is for all index pages. To target only the first page you can use {block:Post1} inline or {CurrentPage} in script. {block:Post1} will display only on the page with the first post, which achieves what you want. The <div> can then be styled to put it wherever you want.
{block:Post1}
<div class="mid2">
<div class="midLeft2">
<p>test</p>
</div>
</div>
{/block:Post1}
Or:
<script>
if( {CurrentPage} == 1 ) {
//display div
};
</script>
I ended up killing off the {Block:IndexPage} tag altogether and changing the original div callout to this:
<div id="splashbox" class="mid2" style="display:none">
Followed by this script:
<script type="text/javascript">
window.onload=showsplashbox();
function showsplashbox() {
//alert('location identified as ' + location.href);
if (location.href == 'http://site.tumblr.com/' || location.href == 'http://site.tumblr.com') {
//alert('location match, show the block');
document.getElementById('splashbox').style.display='block';
}
}
</script>
This is solved by using div:not() operator.
The HTML Markup will be
{block:IndexPage}
<div id="banner">
<div class="banner_{CurrentPage}">
This Content will appear in only on home page
</div>
</div>
{/block:IndexPage}
Now add this CSS to
#banner div:not(.banner_1)
{
display:none;
}
{block:SearchPage}
#banner
{
display:none;
}
{/block:SearchPage}
{block:TagPage}
#banner
{
display:none;
}
{/block:TagPage}
The background: {CurrentPage} is a Tumblr theme variable which returns the page number of index pages (like 1, 2, 3, ...). Thus the home of any Tumblr blog is page number "1". Now I have defined the class of a div with this page number concatenated with a string "banner_" (Class can not be numeric. WTF why?) - making the class name "banner_1" on homepage. Next, in CSS, I have added display:none property to :not selector of that banner_1 class div. Thus excluding div with banner_1 class, all other div in under #banner div will disappear. Additionally, div with id #banner is hidden in search and tag pages.
Note: <div id="#banner" > is required. Without this, :not will hide all divs in the html.
Warning: IE users (is there anyone left?) need to change their habit. This is only supported in FF, Chrome, Safari and Opera.
I have implemented this in http://theteazone.tumblr.com/ The Big Banner (Tea is a culture) is absent in http://theteazone.tumblr.com/page/2
{block:IndexPage}
<script>
if( {CurrentPage} != 1 ) {document.write("<!--");};
</script>
<div id="banners">
blablabla
</div> -->
{/block:IndexPage}
Alternatively, you can use this tag: {block:HomePage}.
This block renders, as its name implies, on the home page only (ie not on search pages, tag pages etc).
References:
https://www.tumblr.com/docs/fr/custom_themes