Print af popup

Hvad med...
Et "Print mig" link i hjørnet, som overfører indholdet af div'en til et printer-parat dokument (brevhoved, åbningstid osv.) i et popop-vindue og dérfra kalde print på normal vis.

<div id='pop4711'>
Snik snak. Lirum larum, blablabla. Fyld selv op efter behov : )
<a href="java script:printDiv('pop4711')">Print mig</a>
</div>

function printDiv(id)
  {
  var pop = window.open(...printklar.html...)
  pop.getElementById("content").innerHTML = document.getElementById(id).innerHTML
  pop.print();pop.close()
  }

                                                                                      Det var sgu en god idé, hvis jeg selv skal sige det : )

Hej T4NK3R

Der er lige et problem efter jeg har prøvet mig frem med denne kode du har lavet så virker det ikke, nu kommer tooltipen (popup window) ikke frem.

og skal man endenligt lave en side der hedder printklar.html før den kan finde den??

Noget helt andet kan et div godt have flere ider??


Her har du koden som den ser ud nu:


<script type="text/javascript">
function showTip(id) {
    var e = document.getElementById(id);
    if (e.style.display == '' || e.style.display == 'none') {
        e.style.display = 'block';
    }
}
function hideTip(id) {
    var e = document.getElementById(id);
    e.style.display = 'none';
}



function printDiv(id)
  {
  var pop = window.open(...printklar.html...)
  pop.getElementById("content").innerHTML = document.getElementById(id).innerHTML
  pop.print();pop.close()
  }


</script>

Min "kode" var jo ikke komplet, kun en skitsering af en mulug løsning..
- window.open skal have en bunke parametre..
- Og der manglede lidt =>
pop.document.getElementById("content").innerHTML = document.getElementById(id).innerHTML

Ja, der skal findes en html-side som du kan overføre indholdet fra tool-tip'et til (en valid HTML-side)
- det kommer lidt an på dit "miljø" - jeg kan se at siden er .aspx (ukendt land for mig..), har du mulighed for at lægge en "flad" html-fil et sted - eller evt. oprette én i "aspx"?

Nej, kun  ét id på objekt.

Problemet er at dette laves i et CMS system hvor jeg kan indsætte html, css og javascript.

Jeg kan ikke tilføje en html side.

Så må du spørge en af de voksne, om de kan oprette den for dig : )
- Vis dem ideen, så bliver de sikkert fyr og flamme, for det ER rocker smart!

Hej igen :)

jeg kommer nok med et dumt spørgsmål her men kan man ikke lave et link med target="_blank" :)

Et Eks:


<a class="link" title="www.brandeskiklub.dk" target="_blank" href="http://www.brandeskiklub.dk">Ikast brande skiklub </a>

Joda. Det betyder at linket åbnes i et nyt vindue/faneblad.

jamen kan man bruge dette til nogen med hensyn til det javascript du har lavet ?

istedet for "printklar.html"


function printDiv(id)
  {
  var pop = window.open(...printklar.html...)
  pop.getElementById("content").innerHTML = document.getElementById(id).innerHTML
  pop.print();pop.close()
  }

Ikke rigtig - det er jo dét window.open gør.

Men til forskel, returnerer window.open et "handle" (i variablen pop) så du bagefter kan overføre indholdet at popop'en til "print-dokumentet".

Hej igen nu har jeg prøvet at lave et eks. på min egen maskine her hjemme for at få en forståelse af hvordan det virker:

Men kan ikke få det til at virke. og jeg har lavet en tom side med navnet: printklar.html

Det kommer bare med beskeden om at "Siden blev ikke fundet" oppe i browservinduet står dette:

Altså her bliver man sendt til når man trykker på print mig linket:

http://localhost/divprint/java%20script:printDiv('tip1')

Håber dette giver mening.

Jeg sender lige koden med som den ser ud nu:


<script type="text/javascript">
function showTip(id) {
    var e = document.getElementById(id);
    if (e.style.display == '' || e.style.display == 'none') {
        e.style.display = 'block';
    }
}
function hideTip(id) {
    var e = document.getElementById(id);
    e.style.display = 'none';
}




</script>



<script type="text/javascript">
function printDiv(id)
  {
  var pop = window.open(...printklar.html...)
  pop.document.getElementById("content").innerHTML = document.getElementById(id).innerHTML
  pop.print();pop.close()
  }
</script>


<style type="text/css">




A:link {text-decoration: none; color:#777777}
A:visited {text-decoration: none;color:#777777}
A:active {text-decoration: none;color:#777777}
A:hover { text-decoration:underline;color:#777777}


.link { text-decoration: none; color:#777777;}
.link:visited { text-decoration: none; color:#777777;}
.link:active  { text-decoration: none; color:#777777;}
.link:hover  { text-decoration: underline; color:#666666;}





.tooltip {
    display: none;
    width: 500px;
    height:auto;
    padding:10px;
    border: 1px solid black;
    font-family: Verdana, Geneva, sans-serif;
    font-size:11px;
    background-color:#FFF;
    font-weight:normal; line-height:16px;
    float:left;
    position: absolute;
    margin-top:-40px;
    margin-left:0px;
        z-index:2;

}
   


</style>
   



<!-- Ikast Brande ski  --><a title="Rul på Hagelskærvej" onClick="showTip('tip1');" alt="Rul på Hagelskærvej" href="#"><font style="BACKGROUND-COLOR: #ffffff">Rul p&aring; Hagelsk&aelig;rvej!</font></a> <br />
<div id="tip1" class="tooltip ">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="java script:printDiv('tip1')">Print mig</a>
<a onClick="hideTip('tip1');" href="#"><img style="FLOAT: right" title="Luk" alt="Luk" src="../../billeder/close-button-lightbox.png" /></a> <br /><br />
<p style="FONT-WEIGHT: bold; margin-top:-25px;" align="left">Ikast-Brande Skiklub<br />Rul p&aring; Hagelsk&aelig;rvej! <br /><br />Sted: P-pladsen, &oslash;st, ved nordre Skole og Fritidshjemmet <br />Dato: 1. september &nbsp; Tid: 17.45-20.00 </p>
<img style="MARGIN-TOP: -100px; FLOAT: left; MARGIN-LEFT: 370px" title="Ikast-brande skiklub" alt="" src="../../billeder/logo-webbillede.png" />
<p align="left">Kom og pr&oslash;v rulleski - vi holder &aring;ben gade, hvor der ogs&aring; er en demonstration af rulleski for folk, der aldrig har pr&oslash;vet det f&oslash;r. Der er ikke tidtagning. Medbring cykelhjelm og gerne kn&aelig;beskyttere til denne event. <br /><br />Ruten er p&aring; cykelstien fra Nordre Skole til Tulstrup p&aring; den side hvor skolen ligger og p&aring; Hagelsk&aelig;rvej ud til krydset, hvor Overg&aring;rdsvej m&oslash;des med Hagelsk&aelig;rvej. <br /><br />Instruktion for begyndere og andre interesserede p&aring; l&aelig;rernes P-plads ved Nordre Skole. Der er parkering ved Fritidshjemmet og Nordre Skole. <br /><br /><b>Hjemmeside: </b> &nbsp; &nbsp; <a class="link" title="www.brandeskiklub.dk" target="_blank" href="http://www.brandeskiklub.dk"><br />Ikast brande skiklub </a>

<div style="width:100px; height:auto; float:left; margin-top:-40px; margin-left:150px; padding-left:5px; "><b>Adresse: </b><br />
Nordre Skole
Hagelskærvej
7430 Ikast

</div>

<div style="width:150px; height:auto; float:left; margin-top:-65px; margin-left:290px; padding-left:5px; "><b>Kontakt: </b><br />
Jens Ole Krogh
<a href="mailto:kroghrosenberg@webspeed.dk">kroghrosenberg@webspeed.dk</a>
Tlf:&nbsp;29292627

</div></p>

</div>
<!-- Ikast Brande ski slut --><br />

Hej du, nu blev jeg sgu lige nødt til at prøve det "i virkeligheden" : )

Og jo, det virker fint - 2 filer. Gem dem på din desktop:

Først den med div'en som skal printes: Gem nedenstående som "side.html"

Og den som som er sat pænt op til print: Gem nedenstående "divPrinter.html"

NB: I linket i den første fil: href="java script:printDiv('info..."
skal mellemrummet mellem "java" og "script" fjernes (Det tilføjes af Eksperten.dk's editor).

PS: Ved nærmere eftertanke kunne det faktisk gøres endnu mere snedigt - så al koden "bor" i printer-dokumentet, som blot åbnes via et normalt link med div'ens id som parameter..
- Men nu er det, i dén grad, spisetid!

Den snedigere - stadig 2 dokumenter

Dét med div'en som skal printes:

Og divPrinter.html

Super super sejt! :)

Det køre bare mange tak for hjælpen

Kom lige med et svar så giver jeg point;)


God WEEKEND ;)

Tak, i lige måde :)

Hej igen har lige et lille tillægsspørgsmål.

Da jeg nu fik det til at virke på min egen maskine har jeg prøver at uploade den fil der hedder: divPrinter.html til en server hvor jeg har nogle andre hjemmeside liggende men så kan jeg ikke få det at virke.

Jeg har lavet linket såndan at den nu bliver sendt til denne ardresse:

<a target="_blank" href="http://www.aku-zonia.dk/divPrinter.html?id=info">Print</a>

Men så tager den ikke indholdet med.


Nu ser konden sådan her ud:



<style>
.printKnap {text-align:right;}
</style></head><body>

Dette er den normale side. Lirum larum.<br>

<div id="info" style="border:1px solid red; padding:6px; width:500px; background-color:#FED;">
<b>Vigtig information:</b><br><br>
Bygning 42, anden sal, dør nr. 7:<br>
Bank 2 gange, og vent 9 minutter. Bank én gang til.<br>
Tæl langsomt til 2. Døren kan nu åbnes. Gå hurtigt ind.<br>
Velkommen til SKAT - Affør Dem hat og benklæder.<br>
En servicemedarbejder vil betjene Dem. Vent!
<div class="printKnap"><a target="_blank" href="http://www.aku-zonia.dk/divPrinter.html?id=info">Print</a></div>
</div>

Her fortsætter den normle side. Lirum larum

De to dokumenter SKAL bo i samme domæne, for at kunne læse hinandens indhold.
- ellers er det cross-site-scripting.

okay så man ikke linke/sende til en fil hvis den ligger på en anden server?

http://ibk.ikast-brande.dk/kulturfritid/divPrinter.html

Nej.
Tænk hvis et site kunne se hvad der stod på den side du kom fra - det ku' være din netbank...

okay ja det kan jeg godt se det giver mening.

Tak for svaret