Avatar billede ladyhawke Novice
26. januar 2009 - 13:57 Der er 15 kommentarer og
1 løsning

jquery: sæt én klasse på div med id og en anden på alle andre

Hvordan gør man ovenstående: i dette tilfælde vil jeg gerne vise 1 div og skjule alt andet indhold på siden (en print funktion), kan man det?
Avatar billede fennec Nybegynder
26. januar 2009 - 14:04 #1
Du kunne evt bruge media attributten. Ved at lave 2 style sheets og kalde dem begge, vil de blive brugt afhængig af mediaet de skal vises på. Sådan her:

<link rel="stylesheet" type="text/css" href="/style.css">
<link rel="stylesheet" type="text/css" href="/printStyle.css" media="print">

I dette tilfælde vil style.css blive brugt til alle media'er, mens printStyle.css "overstyre" hvis der skal printes.

I printStyle.css skriver du derfor noget ala:
div{display:none}
#printDivID{display:block}

Og resten klare sig selv...
Avatar billede ladyhawke Novice
26. januar 2009 - 14:06 #2
ja, det kender jeg, men det kræver en ændring af layout, så vidt jeg kan se...
Avatar billede fennec Nybegynder
26. januar 2009 - 14:11 #3
Det kommer an på hvordan dit layout er nu...

Men ellers kan du klare det via en iframe og lidt script:
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function udskriv() {
  var txt = document.getElementById("printArea").innerHTML;
  document.iframeNavn.document.write(txt);
  document.iframeNavn.document.close();
  document.iframeNavn.focus();
  document.iframeNavn.print();
}
//-->

</SCRIPT>
<iframe name="iframeNavn" frameborder="0" marginheight="0" marginwidth="0" scrolling="No" width="1" height="1"></iframe>

Den div som har id="printArea" vil så blive printet når du kalder udskriv funktionen.
Avatar billede ladyhawke Novice
26. januar 2009 - 14:43 #4
jeg er lige ved at teste den, men får en unterminated string fejl pt, vender tilbage når jeg har fundet sydneren :o)
Avatar billede fennec Nybegynder
26. januar 2009 - 14:59 #5
Her har du et eks på en fuld kode (bemærk at dette ikke behøver at være en div der printes):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
</head>
<body>

<table cellpadding="2" cellspacing="0" width="100%">
<tr>
    <td colspan="2"><a href="#" onclick="udskriv()">Print</a></td>
</tr>
<tr>
    <td width="150" valign="top">
        Menu 1<br>
        Menu 2<br>
        Menu 3<br>
        Menu 4<br>
    </td>
    <td valign="top" id="printArea">Date der bliver printet</td>
</tr>
</table>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function udskriv() {
  var txt = document.getElementById("printArea").innerHTML;
  document.iframeNavn.document.write(txt);
  document.iframeNavn.document.close();
  document.iframeNavn.focus();
  document.iframeNavn.print();
}
//-->

</SCRIPT>
<iframe name="iframeNavn" frameborder="0" marginheight="0" marginwidth="0" scrolling="No" width="1" height="1"></iframe>

</body>
</html>

Det kan måske hjælpe dig frem til at finde fejlen hos dig...

ps. Dette er en gammel kode en kolega har levet, og skulle jeg lave det idag, ville jeg bruge rigtig DOM i stedet. Hvis du kender til det, var det oplagt at leve det om til DOM med det samme, inden du komme for langt med at implementere det... Ellers skal jeg nok kigge på det på et tidspunkt, men har desværre ikke tid at "lege" med det lige nu.

Rigtig DOM vil sikkert også afsløre din "unterminated string" fejl.
Avatar billede ladyhawke Novice
27. januar 2009 - 08:02 #6
problemet med den ikke determinerede streng skyldes sikkert at denne side genereres dynamisk via noget c# kode så der er ingen intellisense eller lignende til at hjælpe med stave-glyfferne, der er ikke så meget andet end at generere koden og finde ud af hvor fejlen er...
Avatar billede fennec Nybegynder
27. januar 2009 - 08:33 #7
Kan du smide et link til siden?? Eller evt smide hele kildekoden ind, så vi kan se det??

Jeg sad desuden og rodede med en DOM udgave igår og kom frem til dette:
http://henriknygaard.dk/experten/861267/index.htm

Der er dog 2 problemer.
1. I IE vil den ikke kopiere data til iFramen, men godt printe.
2. I FF vil den godt kopiere data til iFramen, men ikke printe.

:(
Avatar billede ladyhawke Novice
27. januar 2009 - 13:31 #8
Nej, jeg kan ikke linke til siden, det er et internt projekt jeg arbejder på, men koden er noget i den her stil (kaldes når der skal laves et preview af noget tekst, med et bestemt layout):

function PrintPreview()
{
  var title = document.getElementById('edTitle');   
  var description ='';
  var print_text = "<%=bc.GetString("print_button")%>";
  var close_text = "<%=bc.GetString("CloseButton")%>";
  var header_text = "<%=bc.GetString("CMSTitle")%>";
  var warning_text="<%=bc.GetString("PreviewWarning")%>";       

  description = tinyMCE.get('taText').getContent();   
   
  //Creating new page or reusing the old window, if already there...
  if (pp == null || pp.closed)
  {                   
      pp = window.open("", "_blank", "toolbar=0, status=no, location=0, menubar=0, scrollbars=yes, resizable=yes, dependent=yes, width=600, height=500");
  }               
  pp.focus();
               
  //Adding HTML opening tag with <HEAD> … </HEAD> portion
  pp.document.writeln('<HTML><head><title>Preview</title>');       
           
  pp.document.writeln('<base target="_self">');
  pp.document.writeln('<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/ows.css">');
  pp.document.writeln('<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/menu.css">');
  pp.document.writeln('<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/sps.css">');
 
  pp.document.writeln('<script LANGUAGE="JavaScript" TYPE="text/javascript">');
  pp.document.writeln('    function udskriv() {');
  pp.document.writeln('    var txt = document.getElementById(\'Content\').innerHTML;');
  pp.document.writeln('    document.iframePint.document.write(txt);');
  pp.document.writeln('    document.iframePint.document.close();');
  pp.document.writeln('    document.iframePint.focus();');
  pp.document.writeln('    document.iframePint.print();');
  pp.document.writeln('    }');
  pp.document.writeln('</script>');
     
  pp.document.writeln('</head>');
  pp.document.writeln('<iframe name="iframePint" frameborder="0" marginheight="0" marginwidth="0" scrolling="No" width="1" height="1"></iframe>');

  //Adding Body Tag
  pp.document.writeln('<body>');           
  //Adding form Tag
  pp.document.writeln('    <form method="post">');               
  //Creating two buttons Print and Close within a HTML table
  pp.document.writeln('        <TABLE id="top_part" class="ms-main" width="100%">');
  pp.document.writeln('          <TR><TD class="NewsFullText" style="font-size: 11px;">' + warning_text + '</TD><TD align=right>');
  pp.document.writeln('        <INPUT ID="PRINT" type="button" value=' + print_text + ' onclick="udskriv();">');
  pp.document.writeln('        ');
  pp.document.writeln('        <INPUT ID="CLOSE" type="button" value=' + close_text + ' onclick="window.close();">');
  pp.document.writeln('        </TD></TR><TR><TD colspan="2"></TD></TR></TABLE>');   
  pp.document.writeln('        <br />');                                               
   
  pp.document.writeln('        <table id=contents class="ms-main" cellSpacing="0" cellPadding="0" width="100%">');
  pp.document.writeln('            <tbody style="font-size: 11px;">');
  pp.document.writeln('                <tr class="ms-WPHeader">');
  pp.document.writeln('                    <td colspan="2">');
  pp.document.writeln('                        <div class="ms-WPTitle">' + header_text + ' </div>');
  pp.document.writeln('                    </td>');
  pp.document.writeln('                </tr>');
  pp.document.writeln('                <tr>');
  pp.document.writeln('                    <td class="ms-WPBorder" vAlign="top" width="100%">');
  pp.document.writeln('                        <br />');
  pp.document.writeln('                        <div id="Content">');
  pp.document.writeln('                            <?xml version="1.0" encoding="utf-16"?>');
  pp.document.writeln('                            <table cellspacing="0" cellpadding="0" width="100%" xmlns:DateConverter="urn:DateConverter" xmlns:Translator="urn:Translator" xmlns:Common="urn:Common">');
  pp.document.writeln('                        <tr>');
  pp.document.writeln('                        <td>');
  pp.document.writeln('        <div class="NewsDetailsTitle">');
  pp.document.writeln('                    <h1>');
  pp.document.writeln('                ' + title.value);
  pp.document.writeln('              </h1>');
  pp.document.writeln('        </div>');
  pp.document.writeln('                </td>');
  pp.document.writeln('            </tr>');
  pp.document.writeln('            <tr style="display:block">');
  pp.document.writeln('<td valign="top" class="NewsDetailsText" colspan="1"  style="font-size: 11px;">');
  pp.document.writeln('    ' + description);
  pp.document.writeln('        <br />');
  pp.document.writeln('            </td>');
  pp.document.writeln('                </tr>');
  pp.document.writeln('                            </table>');               
  pp.document.writeln('                        </div>');               
  pp.document.writeln('                    </td>');               
  pp.document.writeln('                </tr>');               
  pp.document.writeln('            </tbody>');
  pp.document.writeln('        </table>');           
  pp.document.writeln('    </form>');               
  pp.document.writeln('</body>');
  pp.document.writeln('</HTML>');
  pp.document.close();

------------------
ignorer kodelayout, jeg ved det ikke er kønt...
Avatar billede olebole Juniormester
27. januar 2009 - 13:51 #9
<ole>

XML, document.write, iframe og innerHTML. Der er vist ikke meget, der hænger sammen her

/mvh
</bole>
Avatar billede ladyhawke Novice
27. januar 2009 - 14:11 #10
måske ikke, men indholdet i content er pakket ind i noget eksisterende layout (SharePoint faktisk), og det skal bare være sådan at når man har set sit preview og klikker på print knappen, så udskrives indholdet af af div, med id="Content".

XML'en skyldes noget legacy kode, tror jeg kan fjerne det, men det er ikke opgaven her... (det benyttes til at formattere nogle datoer fra en xml datakilde, men da jeg højst sandsynligt ikke har datoer med her, så ryger det ud...)
Avatar billede ladyhawke Novice
30. januar 2009 - 12:55 #11
fennec>> læg et svar, dit forslag virkede, jeg skulle bare ændre:

pp.document.writeln('</script>');
til
pp.document.writeln('</scr'+'ipt>');

Jeg aner ikke hvorfor det er sådan, men min "unterminated" string fejl holdt i hvert fald op bagefter....
Avatar billede roenving Novice
30. januar 2009 - 14:07 #12
-- et klassisk problem, fordi hele script-blokken termineres ved forekomsten af </script>-tagget !-)
Avatar billede ladyhawke Novice
30. januar 2009 - 14:10 #13
ok tak skal du have!
Avatar billede ladyhawke Novice
02. februar 2009 - 13:27 #14
fennec læg et svar...
Avatar billede ladyhawke Novice
04. februar 2009 - 08:54 #15
lukker spørgsmålet, hvis ikke jeg får svar i dag... (så må fennec henvende sig i spørgsmålet, hvis der skal uddeles point senere)
Avatar billede ladyhawke Novice
06. februar 2009 - 13:45 #16
ok, lukker....
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester