Használata CSS-ben (külön médiához rendelt tag definíciókkal):
<STYLE type="text/css">
@media print {
BODY {
font-family: Arial;
font-size: 12 px;
line-height: 120%;
background: white;
color: black;}
}
@media screen {
BODY {font-size: medium; line-height: 1em; background: silver;}
}
</STYLE>
Külön CSS fájl hozzárendelése konkrét médiumokhoz:
<link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen, print" /> helyett külön-külön ==> <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
Lehet akár fő motivum és almutivummal a css-be szétosztani a megjelenítést:
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen, print" /> <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
Egyes (HTML) tagok (CSS) formázásának használata
Fejléc, lábléc, menü kikapcsolása a nyomtatási stílusban:
#header, #footer, #menu, #breadcrumb {
display: none;
}
Csak nyomtatásban látható formázású információk bekapcsolása a print stilusnál:
#csak_nyomtataskor {
display: block;
}
Margók beállítása a nyomtatási stílusnál:
@page {
margin-left: 1.5cm;
margin-right: 1.5cm;
margin-top: 2cm;
margin-bottom: 2cm;
}
Címsorok beállítása a nyomtatási stílusnál:
(Kiadványszerkesztési szabály szerint az oldal sosem fejeződhet be címsorral)
h1, h2, h3, h4, h5, h6 {page-break-after: avoid;}
Linkek beállítása a nyomtatási stílusnál:
a:after {content: " [" attr(href) "] ";}
a:link, a:visited, a:hover, a:active {text-decoration: underline; color: black;}
a:after {text-decoration: none;}
Reklámok kikapcsolása:
DIV.adbanner {display: none;}
Nyomtatás elindítása js paranccsal:
<a href="javascript:window.print()">Nyomtatás</a>
<a href="#" onClick=" window.print(); return false ">Nyomtatás</a>
Normál css és js betöltés (pl. HTML header részben):
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mie_main.css" />
<script type="text/javascript" src="mie_script.js"></script>
<!-- HTML4 and (x)HTML szintaktika <script type="text/javascript" src="javascript.js"></script> --> <!-- HTML5 szintaktika <script src="javascript.js"></script> -->
... </head> <body> ... </body> </html>
Dinamikus css és js betöltés és törlés hogyan csináljunk:
//–
//—— Csak JS dinamikus betöltés
//–
function loadjsfile() {
var element = document.createElement("script");
element.src = "mie_load.js";
document.body.appendChild(element);
}
//--
// HTML betöltési eseményre ültetett betöltés használat
if (window.addEventListener)
window.addEventListener("load", loadjsfile, false);
else if (window.attachEvent)
window.attachEvent("onload", loadjsfile);
else window.onload = loadjsfile;
//-------------------------------
//–
//—— JS és css dinamikus betöltés
//–
function loadjscssfile(filename, filetype){
if (filetype=="js"){
// file létezés ellenőrzés
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){ /
// file létezés ellenőrzés
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
if (typeof fileref!="undefined")
// Header részbe töltés
document.getElementsByTagName("head")[0].appendChild(fileref)
}
//---
loadjscssfile("mie_script.js", "js") // használat JS
loadjscssfile("mie_style.css", "css") // használat CSS
//–
//—— Lecserélés:
//–
function createjscssfile(filename, filetype){
if (filetype=="js"){
// A hívatkozott állomány javascript-e (mert más a meghívási szintaktika)
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", filename)
}
else if (filetype=="css"){
// A hívatkozott állomány css-e (mert más a meghívási szintaktika)
var fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("href", filename)
}
return fileref
}
//---
function replacejscssfile(oldfilename, newfilename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"
// használat szintaktika összerakása
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"
// megfelelő attributumok meghatározása
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){
// Megtalált, használt elemek törlése
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){
var newelement=createjscssfile(newfilename, filetype)
allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]) // hozzáadás
}
}
}
//---
replacejscssfile("regi_script.js", "uj_script.js", "js"); // használat a cseréhez
replacejscssfile("regi_style.css", "uj_style", "css") ; // használat a cseréhez
//----------------------------------------
//–
//—— Törlés:
//–
function removejscssfile(filename, filetype){
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"
//determine element type to create nodelist from
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"
//determine corresponding attribute to test for
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0; i--){
//search backwards within nodelist for matching elements to remove
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i]) // törlés
}
}
//---
removejscssfile("nem_kell_script.js", "js") // használat a törléshez
removejscssfile("nem_kell_style.css", "css") // használat a törléshez
//-------------------------------------------
Megjegyzések
Megjegyzés küldése