I have a webpage with a table. If a user logs in, they can click on the row headers to enter the edit page. To make the printed version look the same for both logged in and not logged in users, I use CSS to style the link as regular text.
The problem is, that the Save as PDF feature in chrome saves the links with their href, making them open a webpage if clicked on in the saved pdf. Is there any way, to remove this href during this 'print', other than the obvious way of having two elements and showing only the clickable one in #media not print and showing only the non clickable one in #media print?
I prefer not using JavaScript to change the href during printing.
You can use pointer-events, see here the browser compatibility for that http://caniuse.com/#search=pointer-events . It will disable your link.
#media print {
a {
pointer-events: none;
color: #000;
text-decoration: none;
}
}
use like this remove anchor tag and put div...like
<style>
#d:active {
load-url: (http://google.com/
}
</style>
<div class="click" id="d" >
</div>
You can use the onclick attribute to open the edit page:
<th onclick="location.href='?edit=ID'">Item #1</th>
To style it as a link, use the th[onclick] CSS selector:
#media not print {
th[onclick], td[onclick] {
color: #00e;
text-decoration: underline;
cursor: pointer;
}
}
Related
I would like to create a button using only HTML, to print the web page just as the way it appears on the browser.
But this basic code prints even the hidden blocks.
<a class="print-page" href="javascript:window.print()"><i class="fas fa-print"></i> Print This Page</a>
Could someone help me please!
Here The button generates this pdf with above code.
but the problem, it takes the whole body of the page, which has blocks hidden for computers but visible for mobile phones.
It is printing all the body including hidden blocks.
like in this below screen shot, this are normally hidden blocks for computer browsers.
I solve this problem by including some #media print rules in a stylesheet.
.print-only{
display: none;
}
.screen-only{
display:block;
}
#media print {
.print-only{
display: block;
}
.screen-only{
display:none;
}
.something1,
.something2 {
display:none;
}
}
I basically wanted to know how I could remove the button in the top right of this website . I could not find the actual button within the CSS of the website, so I will have to result to this. Anyone has an idea?
add this css to hide it
#genesisexpo_button_5dca4f5d12381 {
display: none;
}
if you need to hide it on home page only please add bellow code
.home #genesisexpo_button_5dca4f5d12381 {
display:none;
}
.home .header_button .genesisexpo_module_button a {
display: none;
}
can try this , this is only to hide on home page
What is a custom HTML code for having a link (say abc123.com) which is of certain size and color and which opens in a new/blank tab.
Have tried blank standalone with link but need to know how to change the size and font color of the the link word "SUBMIT"
Ok, so what you need is to use the anchor tab which is In this to put the url is to use the href attribute and then the url. To chance the color and size and all of that would require you to have a class or id for the link. Then using CSS, you could format this link. use the color tag to change text color, and font-size to change the font size. For example, this is what I would do.
<style>
.link {
color: blue;
font-size: 30px;
}
</style>
Submit
Or, if that isn't what you want, you could try using a button and then an onclick function that opens a new link in a new tab. Try this code :
function submit() {
window.open('abc123.com');
}
<style>
.submit-button {
outline: none;
border: none;
background-color: transparent;
color: blue;
font-size: 40px;
}
.submit-button:hover {
text-decoration: underline;
}
</style>
<button class="submit-button" onclick="submit()">Submit</button>
I'm working on my first custom Tumblr theme, and the pagination isn't working correctly. I have the links for "Next" and "Previous" set to go to {NextPage} and {PreviousPage} instead of URLs, but they only link right back to the same page they're on instead of going backward or forward. My html looks like this:
{block:Pagination}
<p id="pagination">
{block:PreviousPage}
←
{/block:PreviousPage}
Page {CurrentPage}/{TotalPageCount}
{block:NextPage}
→
{/block:NextPage}
</p>
{/block:Pagination}
CSS:
#pagination {
font-size: 25px;
color: silver;
text-decoration: none;
}
#pagination a {
font-size: 50px;
text-decoration: none;
margin-top: -20px;
}
When I click on the links, they take me to the exact same page I'm clicking from (i.e. if I'm on the homepage, the link is the homepage; if I'm on page 5, they take me to page 5). Does anyone know why they're not linking correctly?
The only thing I see is
{TotalPageCount}
should be
{TotalPages}
Although I don't suspect that would cause prev/next to output current page. Any other html or template tags interfering?
i am making a website for my college as a project.To show you i have hosted the same on a free
hosting site. link http://vivace.net23.net/ .Now in the informal section of menu i wanted to put a pop up modal here is the fiddle..http://jsfiddle.net/karn21/73QXx/.
Click Me
<div id="openModal" class="modalDialog">
<div>
X
</div>
</div>
But on click it is not working.Please help me
Instead of setting it as a target, you could set an onclick event for the Click Me button that triggers a JavaScript function to append the id target to the div (or another class). Then, change .modalDialog:target to .modalDialog.target. Then, just remove the class when the close button is clicked.
New Fiddle: http://jsfiddle.net/73QXx/2/
That shouldn't interfere with your hastag scrolling script.
Also, if you still wanted it to appear as a link, you can add this:
CSS:
a {
color: #0645AD;
text-decoration: underline;
cursor: hand;
cursor: pointer;
}
a:visited {
color: #663366;
}
EDIT:
This line is only supported by IE11+:
pointer-events: none;
Here is an alternative that you can add using an HTML IF to check if the version is IE10 or less:
pointer-events: none; => z-index: -1;
pointer-events: auto; => z-index: 10; /*This may need to be increased depending
on the elements on the page*/
New Fiddle for IE9 (and many other versions including anything that the old version can support): http://jsfiddle.net/73QXx/3/
However, the downside and why this should not be used for anything except IE9 or lower (which is possible with HTML IF) is that the box suddenly appears instead of fading in.