I created a
<style media="print"> #header{ display: none; } </style>
to hide the header when user selects Browser's 'Print' Command. This will hide the header on all pages. I need to Display Header on first page but hide on all the others. Can any one advice how can this be done with the 'Media' Style?
You will need to use javascript for that, you can try something like
var urlPath= window.location.pathname;
if (urlPath.length > 1)
document.getElementById("header").style.display="none";
or with jquery
$("#header").hide();
Related
« Back to Inbox
has the same href value as
Refresh in one of my pages.
If I set custom CSS for one, the padding and margin values distort when I open another page with the same button. Do you know a way to distinguish both the entities (I'm guessing based on the content inside them?). I'd appreciate any help.
Here is a plain Javascript solution as requested.
var aTags = Array.prototype.slice.call(document.getElementsByTagName("a"));
var textToFind = "« Back to Inbox";
aTags.forEach(function(element){
if(element.textContent == textToFind) {
element.style.color = 'red';
}
})
« Back to Inbox
Refresh in one of my pages.
Here is also the CSS with HTML modification example as requested:
a[data-name="inbox"] {
color: red;
}
« Back to Inbox
Refresh in one of my pages.
Ref: JSFiddle
Goodluck!
Let me know if you want to see a JQuery solution!
$($('.mydiv').find("a")[1]).css("background-color", "green") //Play with second link js
.mydiv a:first-child{background-color:yellow} /*play with first link css*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='mydiv'>
« Back to Inbox<br/>
Refresh
</div>
I have built a page that is print-enabled using window.print(). Because of some really unusual requirements from management, I need to be able to capture the click event for the print menu that appears when window.print() is called. Specifically, in Chrome, I need to capture the click event for the Print (blue) and Cancel (gray) buttons.
I have to admit I don't even know where to start here. I inspected each element and can see that these are standard html elements. These buttons have classes (print default for the print button and cancel for the cancel button) but no IDs.
I also noticed that no DOM is visible beyond the print menu, and the print menu html tag has an ID of 'print-preview'.
How do I capture click events for the print menu buttons (in Chrome at least)?
You can not access Chrome's internal windows (printing dialog in this case) directtly from a regular web page.
To determine that printing dialog was opened or closed you can catch matchMedia events (webkit only):
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function(mql) {
if (mql.matches) {
console.log('before print dialog open');
} else {
console.log('after print dialog closed');
}
});
But you can not check if 'Print' or 'Cancel' button was clicked. This information is not accessible from regular web page.
To get information about Chrome's printer jobs you can only create extension for Chrome and listen onPrintRequested event in content script. Of course extension must be installed into browser of each page user.
Are you trying to block printing in a web page, if so please follow the below link.
http://webdesign.about.com/od/advancedcss/qt/block_print.htm
It's easy to use CSS to prevent people from printing your Web pages. You simply need to create a 1 line stylesheet named print.css that says:body { display: none; }Then load that stylesheet as a print stylesheet:<link rel="stylesheet" type="text/css" href="print.css" media="print" />The important part is indicated in bold - this is a print stylesheet. It tells the browser that if this Web page is set to print, switch the body to display nothing.
Then, all that will print will be the standard header and/or footer that the browser appends to printed pages.Block One Page at a TimeIf you don't need to block a lot of pages on your site, you can block printing on a page-by-page basis with the following styles pasted into the head of your HTML:<style type="text/css"> #media print { body { display:none } } </style>
Get Fancier with Your Blocked PagesBut what if you want to block printing, but don't want your customers too frustrated? You can get a little fancier and put in a message that will only display when your readers print the page - replacing the other content. To do this, build your standard Web page, and at the top of the page, right after the body tag, put:<div id="noprint">And close that tag after all your content is written, at the very bottom of the page:</div>Then, after you've closed the "noprint" div, open another div with the message you want to display when the document is printed:
<div id="print">
<p>This page is intended to be viewed online and may not be printed. Please view this page at http://webdesign.about.com/od/advancedcss/qt/block_print.htm</p>
</div>
Include a link to your print CSS document named print.css:<link rel="stylesheet" type="text/css" href="print.css" media="print" />And in that document include the following styles:#noprint { display: none; }
#print { display: block; }Finally, in your standard stylesheet (or in an internal style in your document head), write:
#print { display: none; }
#noprint { display: block; }This will insure that the print message only appears on the printed page, while the Web page only appears on the online page.
I have two classic HTML pages (just HTML and CSS) and links between them.
When I click on these links, the screen flickers (it quickly goes white between transitions).
I tried to place this in the head - without result:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />
I can usually open other sites without the flickering.
Browser is Firefox 16.0.1.
Just change your body background to:
body {
background: url("Images/sky01.jpg") repeat scroll 0 0 #121210;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}
background color will prevent white flickering while loading the background image.
That meta are for IE only, they don't work in FF.
You can't rely prevent flickering in plain HTML. The best solution I found is to replace every link with a JavaScript call where you download the page with AJAX and then you replace the document itself with the new content. Page refresh will be really fast and you won't see any blank screen while downloading.
Basic function may be something like this:
function followLink(pageUrl)
{
jQuery.ajax({
url: pageUrl,
type: "GET",
dataType: 'html',
success: function(response){
document.getElementsByTagName('html')[0].innerHTML = response
}
});
}
Then you have to replace you links from:
Link
With:
Link
More details about this: replace entire HTML document]1: how to replace the content of an HTML document using jQuery and its implications (not always so obvious).
Improvements
With this solution you force your users to use JavaScript, in case it's not enable they won't be able to click links. For this reason I would provide a fallback. First do not change <a> but decorate them with (for example) a CSS class like async-load. Now on the onload of the page replace all hrefs with their javascript: counterpart, something like this:
jQuery().ready(function() {
jQuery("a.asynch-load").each(function() {
this.href = "javascript:followLink(\"" + this.href + "\")";
});
});
With this you can handle a loading animation too (how it's implemented depends on what yuo're using and your layout). Moreover in the same place you can provide fade in/out animations.
Finally do not forget that this technique can be used for fragments too (for example if you provide a shared navigation bar and a content sections replaced when user click on a link the the navigation bar (so you won't need to load everything again).
Try to embed pictures as it delays final page loading and therefore white transition time
echo '<img src="data:image/png;base64,';
echo base64_encode(file_get_contents($file));
echo '"/>';
I've finished my website and completed the style sheet but now i have created a second style sheet (called other.css). What I'm trying to do is have 2 links on my home page, one with "normal.css" and one with "other.css". So basically i want the user to be able to choose between my 2 styles. Ive duplicated all my original pages and added "2" to their name, i have also created other.css and referenced it on these pages. "2" pages all display the alternative layout fine but i dont know how to let the user switch between styles... any help please?
N.B. my html come isn't changing at all, i'm only changing the css file.
Dave
Good question. The answer would greatly depend on the server-side technology that you are using. For example, with Google App Engine which I usually use, it's a simple matter of changing part of the header of the HTML that is generated to point to a different CSS file. But then it's not a static HTML file.
CSS Zen Garden is specifically a website to illustrate the same HTML file presented with different stylesheets. Maybe you can get some ideas of how to do this from there. You'll see again though that the pages with different styles, even though they have the same HTML source, are not static .html pages.
This W3C page not only explains how to do it, but also has a number of alternate stylesheets itself, so you can actually test it in action.
In most browsers, the user can switch stylesheets with something like View → Page Style. All that's necessary is for the menu bar to be visible...
If you have php on your server you could have the style sheet change based on a cookie. The following code would work:
if ($_COOKIE['style'] == '1') {
echo '<link rel="stylesheet" href="normal.css" type="text/css" />';
}
elseif ($_COOKIE['style'] == '2') {
echo '<link rel="stylesheet" href="other.css" type="text/css" />';
}
else {
echo '<link rel="stylesheet" href="normal.css" type="text/css" />';
}
Add a link to the bottom of the page:
Change Style
On the changestyle.php page have the following:
if ((isset($_COOKIE['style'])) AND ($_COOKIE['style'] == '1')) {
setcookie(style,2)
}
elseif ((isset($_COOKIE['style'])) AND ($_COOKIE['style'] == '2')) {
setcookie(style,1)
}
else {
setcookie(style,2)
}
I am creating a website and i want to allow personalization to individual users upto some extent like changing font family, background color etc. The problem with this is that, my default css file that i load has already default classes for everything. Now when i fetch the background color from my database, then if there is null value for background color then default css class of mystylesheet.css should be loaded and if the value is not null, then i want to override this with my default css. How is it possible? Thanks in advance :)
Load the default stylesheat in a style tag, and put your dynamic styles in a style tag after that.
Which style to use when different styles target the same element is determined by specificity, and if the selectors are the same, by order. The style that is found last is used.
The approach mentioned by zaf would require that you reload the page when you want to switch styles sheets. What I find to be a better approach is to add a classname to the body
if you have the option of using javascript
<body class="theme-1">
<div class="main"><div>
</body>
Then each of your style sheets should contain the theme name in the declarations:
--theme1.css
.theme-1 div.main {
background-color: #eee
}
--theme2.css
.theme-2 div.main {
background-color: #f30
}
To switch style sheets, you just remove the old theme name and add the theme you want to use.
Then you can even add style sheets dynamically if you provide an interface for the user to customize the look and feel of your page.
New Improved Answer:
I just found a nice solution implemented by the folks at extjs. It involves loading all the stylesheets you want using <link> tags. The trick is that you can set a disabled property on the link element which will cause it not to apply.
For an example, use firebug and look at
http://www.extjs.com/deploy/dev/examples/themes/index.html
Look for styleswitcher.js and look at the function setActiveStyleSheet
function setActiveStyleSheet(title) {
var i,
a,
links = document.getElementsByTagName("link"),
len = links.length;
for (i = 0; i < len; i++) {
a = links[i];
if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if (a.getAttribute("title") == title) a.disabled = false;
}
}
}
EDIT:
Reason for CSS property precedence?
One way is to produce the css file dynamically from a php script.
You would include the file like:
<link rel="stylesheet" type="text/css" href="css.php">
And the css.php file would look something like this:
<?php
header('Content-type: text/css');
// whatever you want to ouput depending on the user
?>