My website needs a print option but i've been trying and googling for weeks and i can not figure it out. The site has a div on it that has a scrollbar in it. When i print, only the visible area prints.
I've tried tons of things i've found online from javascript to #media print, i can't make it work.
This is my div:
<div style="overflow:scroll; height:814px" id="results">
<table>
...contents, some tables, text and images...
</table>
</div>
As soon as i remove the "overflow:scroll" printing works fine, it's the scrolling that keeps messing me up. I really need step by step hold-my-hand instructions on how to make this work.
Hope someone can help me,
Jay
Use this JS function:
Printable DIV is results
function printpage()
{
var originalContents = document.body.innerHTML;
var printReport= document.getElementById('results').innerHTML;
document.body.innerHTML = printReport;
window.print();
document.body.innerHTML = originalContents;
}
https://github.com/jasonday/printThis
pay close attention to the removeInline feature, which will remove inline styles for printing.
Related
First of all, I'm sorry for my bad English.
Recently I'm doing project using Spring Boot and
I'm struggling with hiding or showing all the divs created by th:each
<button class="category" onclick="showBar()">BAR</button>
<div id="barList" th:each="m: ${MERCH}" th:if="${m.cat.catId}==1">
<tr>
<p th:text="${m.getMName()}"></p><br>
<p th:text="${#numbers.formatInteger(m.price, 1, 'COMMA')}"></p>
</tr>
</div>
<script>
function showBar() {
$('#barList').hide();
}
</script>
this is part of HTML that I'm struggling with
What I see on devtool in chrome is that first div seems to work(style="display : none;" is created) but other divs come out after doesn't work at all.
How can I hide or show all the divs came out from th:each... T.T
Even if it doesn't use JQuery, it doesn't matter. I just want to hide all.
Again sorry for my bad Enlgish.. Hope you understood..
Thanks!
I currently have a div with some information in it. See the example below:
<div class="verstuurd" onclick="alert('clicked!');">
<div class="titel"><span>Title</span><img src="imageurl"/></div>
<div class="image"><img src="imageurl"/></div>
<div class="tekst"><p>some text</p></div>
<div class="hover">
VISIBLE TEXT
</div>
<div class="delen">
VISIBLE AFTER HOVER
</div>
</div>
</div>
The :hover function works perfectly and the "delen" part is shown and the "hover" part is hidden. I only got a problem on mobile devices. If I scroll down the page on a mobile device and I touch the div, the hover will be triggered.
The answer I am looking for is; how am I able to use :hover on PC's and some sort of click event on mobile devices? So that I have to click in order to change the content and a second click will trigger the onclick of the div.
As an example of my inspiration see the website.
If you hover an item it will show the heart icons. PC uses this with hover and mobile needs a click to be shown. Unfortunately I can't find the source code which triggers this.
Are you talking about, you want an onClick="theFunctionNameToBeCalled()" fired when a div is touched (specifically on a mobile device?)
if you want that, you can use
$( "#divIdToBeTouced" ).click(function() {
//do something with a function here
});
or you could use plain ol' JavaScript to do the task.
<!DOCTYPE html>
<html>
<head>
<title>Coty's Title</title>
</head>
<body>
<div id="divIdToBeTouched" onmouseover="theFunctionToBeCalled()" onClick="theFunctionToBeCalled()">
I'm a div
</div>
<script>
var i = 0;
function theFunctionToBeCalled(){
i++;
if(i == 2) {
//do what you wanted once the onClick event was fired
alert("i == 2");
//now make sure to reset the flag that was made so it will work next time
i = 0;
}
else {
//change the content
alert("i == 1");
}
//do something interesting here if you want to
}
</script>
</body>
</html>
paste that code on this page http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default? and you can try it out on a browser computer
and try it on a mobile device and it should work
I tested it
Now make the hover event also call this function and it'll cover both evens
Extra info:
I've heard arguments with two possible paths to go from here and some say one way is "dangerous", I'll list the sides below If you wanted to know...
cont'd
the other argument is there needs to be an event listener added instead of a direct function call
This seems more safe. I think because it can help hide the function call its self..? I'm not sure.
Hope this helps
I am unable to place my ads at the center of my site www.ios7.me
this is the script:
<script type="text/javascript">
ch_client = "verronica";
ch_width = 250;
ch_height = 250;
ch_type = "mpu";
ch_sid = "Chitika Default";
ch_color_site_link = "0000CC";
ch_color_title = "0000CC";
ch_color_border = "FFFFFF";
ch_color_text = "000000";
ch_color_bg = "FFFFFF";
</script>
<script src="http://scripts.chitika.net/eminimalls/amm.js" type="text/javascript">
</script>
I have tried various attempts like:
<div align="center">
script
</div>
<center>
script
</center>
<td allign="center">
script
</td>
but all did not go so well Its all just alligned to left.
I have run out of all clues as I am very poor in css
Its simple, just assign some hard code WIDTH and apply MARGIN to AUTO to your DIV (which is wrapping your ADs).
For Example:
<div style="width:1024px; margin:auto;">
<!-- Your Ad related code here -->
</div>
or simply if you want to get width dynamicaly as soon as your page loads, then do let me know in your comment, i will surely get that done for you :)
All the Best !
The <center> element is deprecated - see http://www.codehelp.co.uk/html/deprecated.html
. Use CSS instead so, <p style="text-align:center;">script</p>
. Also try margin: auto;
If you could show a live example (use something like http://jsfiddle.net/) that would really help as there are various dependancies that CSS relies on to work correctly.
Hope this helps
i do this it works .... please try and check it
The element is deprecated - see http://www.codehelp.co.uk/html/deprecated.html . Use CSS instead so, script . Also try margin: auto;
If you could show a live example (use something like http://jsfiddle.net/) that would really help as there are various dependancies that CSS relies on to work correctly.
I have a website that is primarily used in K-12 schools. I have some social media buttons on it like Facebook 'like' and Pinterest 'pin it'. However, I'd like to have these buttons be hidden....where you have to click once on something (like an image that is covering them up but disappears when clicked....or a tab that just sort of scrolls away to reveal the buttons behind it).
The reason for this is because these sites are usually blocked in schools (I realize there's probably nothing I can do about this) and these buttons look kind of ugly when they're blocked (it'll show a question mark or or something in place of the button in these cases). However, I do want the people who do not have them blocked to be able to access and see them easily.
I am in search of a simple solution to this where the buttons wouldn't be immediately visible until you click on something.
If you're using JQuery or any other support library, you would have plenty of way to achieve your goal, even with a lot of visual effects.
Anyway, the simplest way to achieve it is by playing with the "display" attribute of the element.
Add this in your html head tag:
<script type="text/javascript>
function showElement(){
// get a reference to your element, or it's container
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
Now add a click event on the element you want to use to show your hidden content:
<img id="imageId" onclick="showElement()" src="..."/>
If you want to hide your "hidden" element by default, add a inline style:
<div id="elementId" style="display:none">...your buttons here...</div>
Obviously, there are a lot of better ways to achieve it (eg. changing css classes), but I think you would be able to work with the above instructions.
Edited to improve the answer:
Create an HTML structure like the following:
<div>
<img id="imageId" alt="" src="..." onclick="showElement()">
<div id="elementId" style="display:none">
<!-- your buttons, anchors or anything else you want to be hidden by default-->
</div>
</div>
So, when you click the image, the buttons appear and the image disappear.
Thanks for your help! I tried this and it works well. I think it was a pretty simple solution (even though I don't know javascript) and accomplished just what I wanted to do, which was to basically hide those buttons until an image that is covering them is clicked. Just for the record, here's the exact code I used:
<script type="text/javascript">
function showElement(){
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
(All I changed was adding the missing quotation mark on the first line and took out that one line about referencing to the element since I assume that is something optional.) For the html part, here's exactly what I did:
<div>
<img id="imageId" src="/images/cover.jpg" alt="cover" onclick="showElement()" width="185" height="124" />
<div id="elementId" style="display:none">
(hidden content went here)
</div>
</div>
(I didn't change much on this part either other than closing the image tag, putting in the dimensions for the image, etc.) Hopefully, I didn't do any of this wrong, but it seems to work as intended. The only other thing that would be a nice touch would be if there was a way to make it have the 'hand with pointing finger' symbol appear when you hover over it....in order to make it clear that it is a clickable image, but if not, it's not essential.
I would like to preview the content of a div with imgPreview
I tried to do this:
<div id="five" style="background-image:url(1.jpg);"></div>
In script:
<script type="text/javascript">
$('div#five').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
I would like that when it passes over muose make preview of 1.jpg
Help me! Many thanks, ando sorry for my bad english! :).
From "imgPreview demos" # james.padolsey.com:
The image preview shows up in a tooltip-like box appearing alongside
the user's cursor when hovering over a link. The plugin is entirely
unobtrusive; it does not require any hooks to target specific links
(no non-semantic classes); it will automatically detect the anchors
that are linking to images and will only apply the preview effect to
them.