[CSS] Tekst highlighten?

[F4T4L_3RR0R]

Ik heb een applicatie draaien die de mogelijkheid heeft om meerdere (3 in mijn geval) logfiles als html op te slaan of te uploaden.

Ik heb daarbij een webserver geinstalleerd en een simpele HTML pagina gemaakt met 3 iframes. In elke iframe een van de html logfiles.

De opmaak van de html logfiles zit in één .css bestandje.

Werkt allemaal prima.

Nu wil ik op een bepaald steekwoord meer aandacht vestigen op de webpagina met de iframes.

Nu vraag ik me af, bestaat er een css code waarmee ik een bepaald steekwoord een andere kleur kan geven?

[Verwijderd]

Ik denk dat je even een simpele highlighter moet schrijven bv. in PHP om dit te kunnen, hier zullen vast geen CSS codes voor zijn (99,99% zeker).

[F4T4L_3RR0R]

Dat is juist het lastige.

De inhoud staat in de iframes, niet op de webpagina zelf.

Bij de output van de applicatie kan ik een paar simpele dingen aanpassen zoals de BGCOLOR, maar dan houdt het ook echt op.

[disjfa]

Maar het script staat wel op dezelfde server? Dan kan je bv wel een javascriptje maken/zoeken die je kan inladen als de frame inlaad.

[Tofu]

F4T4L_3RR0R schreef op zondag 13 januari 2008 @ 23:22:
Dat is juist het lastige.

De inhoud staat in de iframes, niet op de webpagina zelf.

Bij de output van de applicatie kan ik een paar simpele dingen aanpassen zoals de BGCOLOR, maar dan houdt het ook echt op.

Je kan de HTML pagina's in PHP openen, en dan de woorden vervangen door woordjes met een kleurtje. Webserver > PHP pagina > include .html

[F4T4L_3RR0R]

disjfa schreef op zondag 13 januari 2008 @ 23:24:
Maar het script staat wel op dezelfde server? Dan kan je bv wel een javascriptje maken/zoeken die je kan inladen als de frame inlaad.

Ik zal het zo duidelijk mogelijk uit proberen te leggen:

Applicatie geeft 3 logfiles, 1.html, 2.html en 3.html.

In het pad op de webserver staan:

1.html
2.html
3.html
opmaak.css
index.html

Opmaak.css heeft betrekking tot 1.html, 2.html en 3.html.

In de index.html zitten de 3 iframes voor 1.html, 2.html en 3.html. In index.html zit ook weer een eigen css opmaak ingebakken, met o.a. betrekking tot het weglaten van de horizontale scrollbalken in de iframes.

[disjfa]

F4T4L_3RR0R schreef op zondag 13 januari 2008 @ 23:30:
[...]
In de index.html zitten de 3 iframes voor 1.html, 2.html en 3.html. In index.html zit ook weer een eigen css opmaak ingebakken, met o.a. betrekking tot het weglaten van de horizontale scrollbalken.

Jij zoekt een oplossing met alleen css. Die bestaat niet. Daarom geef ik je een idee met een javascriptje wat je buiten de html kan inladen

[Verwijderd]

Die scripts hoeven niet eens op die server te staan, kunt ze zo met curl inlezen. Ligt er alleen ff aan welke talen je beschikbaar hebt.

[ Voor 25% gewijzigd door Verwijderd op 13-01-2008 23:33 ]

[F4T4L_3RR0R]

disjfa schreef op zondag 13 januari 2008 @ 23:31:
[...]

Jij zoekt een oplossing met alleen css. Die bestaat niet. Daarom geef ik je een idee met een javascriptje wat je buiten de html kan inladen

Ik moet eerlijk bekennen dat ik de ballen verstand heb van javascript en php.

Ik heb wel php en mysql op de webserver draaien, dus mijn voorkeur gaan uit naar een php oplossing. (nu zeker vaststaat dat er geen css oplossing is)

[Zerora]

Met betrekking met wat disjfa zegt over het gebruik van een javascript, is dit misschien wel een leuke om te gebruiken:

http://www.tedpavlic.com/..._highlighting_example.php

Alleen geen idee of ie ook binnen een iframe zoekt. Maar je zou ook een php versie kunnen bakken van die index.html en dan de pagina's 1,2,3 includen in een scrollable div element (voor het iframe effect).

[ Voor 4% gewijzigd door Zerora op 13-01-2008 23:44 ]

[Verwijderd]

Zou dan iets worden in de richting van:

PHP:

<?php

$text = file_get_contents('logfile.html');
echo str_replace('vervangmij', '<span class="voormijstyle">voormij</span>', $text);

?>

[F4T4L_3RR0R]

Zerora schreef op zondag 13 januari 2008 @ 23:38:
Maar je zou ook een php versie kunnen bakken van die index.html en dan de pagina's 1,2,3 includen in een scrollable div element (voor het iframe effect).

Dat lijkt me de netste oplossing inderdaad.

De huidige html pagina stelt niet veel voor, maar deze opbouwen in php als php-noob zal me niet meevallen.

Ik ga even wat tutorials zoeken en kijken van Dreamweaver me te bieden heeft.

De huidige code van de index.html:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Privé</title>
<style type="text/css">
<!--
.style1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
}   
.style2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
    color: #CCCCCC;
}
.style3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: x-small;
    font-weight: bold;
    color: #CCCCCC;
}
body {
    background-color: #003366;
}
iframe {
    overflow-x: hidden;
}
a:link {
    text-decoration: none;
    color: #CCCCCC;
}
a:visited {
    text-decoration: none;
    color: #CCCCCC;
}
a:hover {
    text-decoration: none;
    color: #FF0000;
}
a:active {
    text-decoration: none;
    color: #CCCCCC;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="800" align="center">
  <tr>
    <td><span class="style1">1</span><span class="style2"><a href="1.html"> (klik hier voor alleen 1)</a></span></td>
    <td class="style2"><div align="right"><a href="1.txt" target="_blank" class="style3">Logfile 1 </a></div></td>
  </tr>
    <tr>
      <td valign="top" colspan="2"><iframe src="1.html" height="250" width="100%" frameborder="0" scrolling="yes">
      <p>Your browser does not support inline frames or is currently configured not to display inline frames.</p>
      </iframe>
      <br></td>
    </tr>
  <tr>
    <td><span class="style1">2</span><span class="style2"><a href="2.html"> (klik hier voor alleen 2)</a></span></td>
    <td class="style2"><div align="right"><a href="2.txt" target="_blank" class="style3">Logfile 2 </a></div></td>
  </tr>
    <tr>
          <td valign="top" colspan="2">
<iframe src="2.html" height="250" width="100%" frameborder="0" scrolling="yes">
<p>Your browser does not support inline frames or is currently configured not to display inline frames.</p>
</iframe>
<br></td>
    </tr>
  <tr>
    <td colspan="2"><span class="style1">3</span><span class="style2"><a href="3.html"> (klik hier voor alleen 3)</a></span></td>
  </tr>
    <tr>
          <td valign="top" colspan="2">
<iframe src="3.html" height="250" width="100%" frameborder="0" scrolling="yes">
<p>Your browser does not support inline frames or is currently configured not to display inline frames.</p>
</iframe>  </td>
  </tr>
</table>
</body>
</html>

EDIT:

Ik vrees dat ik het al op moet geven. Op de websites die in dit topic gelinkt worden, wordt zo in vakjargon geschreven, dat ik geen idee heb waar het over gaat.

PHP is echt nieuw voor mij.

[ Voor 73% gewijzigd door F4T4L_3RR0R op 14-01-2008 00:01 ]

[Tofu]

F4T4L_3RR0R schreef op zondag 13 januari 2008 @ 23:42:
Ik vrees dat ik het al op moet geven. Op de websites die in dit topic gelinkt worden, wordt zo in vakjargon geschreven, dat ik geen idee heb waar het over gaat.
PHP is echt nieuw voor mij.

Blackspot heeft de oplossing al gegeven. Neem gewoon die code over, en zet in je CSS een regel voor die span.. Als je met de scrollbare divjes wil werken moet je gewoon de code 3 maal achter elkaar plaatsen.

[Bozozo]

Je kunt het ook met javascript doen. Ik heb dit bedacht:

XHTML:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Hilighter</title>
    <meta http-equiv="content-type" 
        content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
  
  <script language="JavaScript" type="text/javascript">
    //<![CDATA[
    var words = new Array("woord1","woord2","woord3");
    
    function hiliteme(frameID,hilitewords) {
      var regexpstring = hilitewords[0]; 
      for (var i = 1; i<hilitewords.length; i++) {
        regexpstring += "|"+hilitewords[i];
      } 
      var hiliteregexp = new RegExp("("+regexpstring+")","gi");
      var frameBody = document.getElementById(frameID).contentWindow.document.body;
      frameBody.innerHTML = frameBody.innerHTML.replace(hiliteregexp,"<em>$1</em>");
    }
  //]]>
    </script>
  
</head>

<body>
<iframe id="iframe1" src="./somehtmlpage.html" onload="hiliteme('iframe1',words)"></iframe>
</body>
</html>

De woorden "woord1" "woord2" en "woord3" zullen overal worden vervangen door "<em>hetwoord</em>", waarbij je via CSS het 'em' element je favoriete hilite stijl kunt geven. Met een beetje moeite zou je deze code moeten kunnen ontleden en aanpassen. Regexps zijn misschien een beetje lastig voor een beginner, maar het is ideaal voor dit geval.

NB: somehtmlpage.html moet wel netjes een head en een body bevatten natuurlijk.

edit: functie aangepast zodat ie een veld een een variabel array van woorden slikt.

[ Voor 23% gewijzigd door Bozozo op 14-01-2008 15:52 ]

[F4T4L_3RR0R]

Als ik de volgende code toevoeg aan de css, krijg ik geen aangepaste kleur:

code:

em {
    color: #FF0000;
}

De gehighlighte tekst met de regexp code komt wel cursief in beeld te staan.

[Bozozo]

Je moet het wel in de CSS van het iframe zetten

[frickY]

Het is denk ik makkelijker om dit via javascript te doen in de frameset die je gebruikt.
Na het laden van de frames laat je een javascriptje de steekworden zoeken, en omringen met een HTML-tag. Die tag kun je vervolgens in je stylesheet stylen zoals je wilt, bijvoorbeeld met een achtergrondkleur om deze te highlighten.

[F4T4L_3RR0R]

Volgens mij is het gelukt Bozozo!

Nu alleen nog wachten op het te highlighten woord.

Bedankt!

[Bozozo]

Da's een aardige omschrijving van de functie die ik een post hoger heb opgeschreven

Klein updateje:

JavaScript:

    var words = new Array("bla","toet");
    
    function hiliteme(frame,hilitewords) {
      var regexpstring = hilitewords[0]; 
      for (var i = 1; i<hilitewords.length; i++) {
        regexpstring += "|"+hilitewords[i];
      } 
      var hiliteregexp = new RegExp("("+regexpstring+")","gi");
      var frameBody = frame.contentWindow.document.body;
      frameBody.innerHTML = frameBody.innerHTML.replace(hiliteregexp,"<em>$1</em>");
    }

XHTML:

<iframe id="iframe1" src="./somehtmlpage.html" onload="hiliteme(this,words)"></iframe>

Door this door te geven hoef je geen getElementById te doen... scheelt weer een paar microseconden

(en ja, dit is SoG)

[F4T4L_3RR0R]

Wat is SoG?

In de XHTML code, waar dient "this" voor?

Mag het bestand op de server een .html extensie hebben of een .xhtml extensie?

[Bozozo]

SoG is studie-ontwijkend gedrag. Ik moet tentamens leren en dan ga ik altijd spontaan nutteloze dingen doen

Het bestand mag gewoon .html zijn.

Over this: Artikeltje

[F4T4L_3RR0R]

Maar this is noodzakelijk?

In de vorige code stond daar de id van het iframe.

[ Voor 3% gewijzigd door F4T4L_3RR0R op 14-01-2008 20:45 ]

[Bozozo]

...
edit: wow, soort van forumbugje waardoor de helft al werd gepost zonder dat ik heb verstuurd

Het is ook de moeite waard om je eens te verdiepen is regular expressions. Je zou bijvoorbeeld woorden niet kunnen hiliten als ze onderdeel zijn van een ander woord, maar alleen als ze zelfstandig voorkomen.

This geeft het object dat de functie aanroept weer door aan de functie, zodat je het niet hoeft op te zoeken met document.getElementById. Dat scheelt dus een zoekactie, en je hoeft bij meerdere iframes niet steeds de functie aanroep te veranderen wat weer een paar toetdaanslagen scheelt

[ Voor 58% gewijzigd door Bozozo op 14-01-2008 20:48 ]

[F4T4L_3RR0R]

Het werkt voortreffelijk Bozozo.

Nogmaals bedankt!