Archief - CSS vraagje + JS vraagje

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
B

Brando[n]

Legacy Member
1) CSS: Op Scaldis Salvage & Marine Contractors NV heb ik een H3 staan, de titel van het nieuwsartikel. Hier wil ik de 'underline' weg.

Nu maakte ik een aparte style aan voor deze h3, zonder resultaat, deze vloekt waarschijnlijke met de algemene style. Tip?

PHP: 
a {
	text-decoration: underline;
	color: #222222;
}

a:hover {
	text-decoration: none;
}

h3 a { 
	font-size: 0.8em;
        color: #000000;
	font-weight: bold;
 	text-transform: uppercase;
        margin: 0px;
        text-decoration: none;
}

2) JS: Op diezelfde pagina heb ik ook toggle script, als je op 'Read more' klikt lees je dus het volledige artikel. Nu als dit volledig openstaat blijft er 'Read more' staan, hoe kan ik er dan bijvoorbeeld 'Close' zetten.

PHP: 
  <script type="text/javascript">
  function toggleDiv(divid){
  var div = document.getElementById(divid);
  div.style.display = div.style.display == 'block' ? 'none' : 'block';
  }
  </script>

PHP: 
        <a href="#news02"><h3>01/09/2012 - Scaldis installs 16 heavy base foundations in Sweden for the Kårehamn Wind Farm</h3></a>
        <p>wwwww</p>
       <div id="news02" style='display:none'>
        <p>xxxxx</p>
        <p>xxxxxxxxxx</p>
        </div>
        <p><a href="javascript:toggleDiv('news02');">Read more</a></p>
W

W0utR

Legacy Member
1) Je <h3> zit in je <a> tag, je gaat hem dus op een andere manier moeten selecteren.

Beter is om je <a> in je <h3> tag te zetten, dan zou je selector wel moeten werken.

2) Gewoon met een simpele if/else
Code: 
if(div.style.display == "block") {
   div.innerHTML = "Close";
} else {
   div.innerHTML = "Read more";
}
B

Brando[n]

Legacy Member
1) Opgelost, ik heb wel de font-size naar 1.0em moeten veranderen omdat hij niet dezelfde size nam als de style h3 (0.8em). Nu is de font-size idem als de style h3 ondanks verschillende size, beetje raar.

2) Krijg ik niet werkend...
s

samn

Legacy Member
Heb vlug iets in elkaar geflanst, je kan het misschien beter schrijven, maar dit zou moeten werken:

PHP: 
<script type="text/javascript"> 
    var toggle=false;
function toggleDiv(divid){ 
  
  if(toggle){
		$('.readmore').text('Read more');
		toggle=false;
		}else{
		$('.readmore').text('Close');
		toggle=true;
	}
  var div = document.getElementById(divid); 
  div.style.display = div.style.display == 'block' ? 'none' : 'block'; 
	
  } 
  </script>

En dan een class geven aan je Read more link:
HTML: 
 <p><a class="readmore" href="javascript:toggleDiv('news02');">Read more</a></p>
B

Brando[n]

Legacy Member
Thanks!

Maar als ik op het 1e artikel op 'Read more' klik dan verschijnt in het 2e artikel ook 'Close', dit moet dan wel op 'Read more' blijven staan. Waarschijnlijk omdat het in hetzelfde css id zit?
-

-BVR-

Legacy Member
Fiddle
Code: 
$("a.read-more").click(function() {
    var $this = $(this),
        content = $this.parent().prev("div.news-content");
    if (content.is(":visible")) {
        content.fadeOut("fast");
        $this.hide().text("Read more").fadeIn("fast");
    } else {
        content.fadeIn("fast");
        $this.hide().text("Close").fadeIn("fast");
    }
});
W

W0utR

Legacy Member
En om het nog wat korter te doen:
Code: 
$("a.read-more").click(function() {
    var $this = $(this),
        content = $this.parent().prev("div.news-content");
    content.toggle();
    $this.hide().text((content.is(":visible") ? "Close" : "Read more")).fadeIn("fast");
});
B

Brando[n]

Legacy Member
Hmz, kan er iemand de volledige JS code bezorgen? Loopt ergens fout...
-

-BVR-

Legacy Member
$(document).ready(function moest je zelf nog toevoegen. :)

Code: 
$(document).ready(function() {
    $("a.read-more").click(function(e) {
        var $this = $(this),
            content = $this.parent().prev("div.news-content");
        content.toggle();
        $this.hide().text((content.is(":visible") ? "Close" : "Read more")).fadeIn("fast");
        e.preventDefault();
    });
});

En seg, ge draait twee versies van jQuery (en dan nog twee verouderde).

Verwijder dit uit je head:
HTML: 
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>

En zet als eerste script (dus wel na je stylesheets, maar voor je andere scripts, dit:
HTML: 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
B

Brando[n]

Legacy Member
Hmm, browser is afgesloten en dan was het terug zoals het moet.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan