Archief - Facebook like-box verwijderen bij bepaalde width window.

krulle3 · 11 jun 2012

Helloah,

Ik ben constant bezig met Wakostdafestival.be bij te werken.
Het is nog verre van perfect want is een projectje dat ik vlug vlug ben opgestart begin maart. Ik zorg via media queries dat de index pagina ook goed oogt op je smartphone.
Nu zou ik graag de Facebook like-box niet meer weergeven vanaf een bepaalde breedte van je scherm.

De Google Share heb ik perfect kunnen laten tonen vanaf een breedte via Javascript.

Code:

<script type="text/javascript">
							if (document.body && document.body.offsetWidth) {
 winW = document.body.offsetWidth;
 winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
 winW = document.documentElement.offsetWidth;
 winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
 winW = window.innerWidth;
 winH = window.innerHeight;
}

if(winW >= 978){
	document.getElementById('gplus').innerHTML = '<g:plus href="https://plus.google.com/106673472411278200397" rel="publisher" width="299" height="308" theme="light"></g:plus>';
}
//document.writeln('Window width = '+winW);
//document.writeln('Window height = '+winH);
						</script>

Nu gaat lukt me dit bij facebook via de bovenstaande methode niet door één of andere reden waar ik zelf nog niet ben achter gekomen. Iemand die hetzelfde ook al heeft voorgehad en hiervoor een oplossing heeft?

Alvast bedankt.

breez · 11 jun 2012

Ik heb een tijdje geleden iets gelijkaardigs gedaan (een newsticker in een div die aan de rechterkant van het beeld inschuift of wegschuift afhankelijk van de breedte van het browser-window).

Voor iets als dit kun je naar mijn mening best jquery gebruiken:

Code:

$(document).ready(function(){
	//Ticker
	showHideTicker();
	
	function showHideTicker(){
		if($(window).width() < 1200){
			$('.ticker').animate({
				right: -250
			});
		}
		else{
			$('.ticker').animate({
				right: 0
			});
		}	
	}
	  
	var resizeTimer;
	$(window).resize(function() {
		if(userClicked == false){
			clearTimeout(resizeTimer);
    			resizeTimer = setTimeout(showHideTicker, 100);
		}
	});
});

De timer zorgt voor een kleine delay want anders zou showHideTicker() constant aangeroepen worden bij de minste resize

adrianhates · 11 jun 2012

waarom zet je een omvattende div niet gewoon op display:none als je een max-width media query hebt?

krulle3 · 11 jun 2012

adrianhates zei:
waarom zet je een omvattende div niet gewoon op display:none als je een max-width media query hebt?

Gedaan en werkt niet met die like-box. 'k pas dit trouwens al toe bij andere div's.

-BVR- · 11 jun 2012

Kan je dan eens een test case geven? Zou moeten werken.

Edit: never mind.

Wat ge dus niet moogt doen: een element twee ID's toewijzen, dat loopt fout. Daarmee waarschijnlijk dat uw script niet werkt.

Code:

@media (max-width:480px){
	
	.containerResize{
		width: 210px;
	  	margin-left: auto;
	  	margin-right: auto;
	  	*zoom: 1;
	}
	.container{
		width:100%;
		margin-left:30px;
		margin-bottom:30px;
	}
	.span9, .full, .span8Wedstrijd, .span4, #fb {
	  display:none;
	  visibility: hidden;
	}
}

En HTML:

HTML:

<li class="span3" id="fb">
...
</li>

krulle3 · 12 jun 2012

'k zal het morgen eens bekijken en een testcase online zetten indien 't niet werkt.
Maar eerst theorie datacenter & virtualisatie blokken voor morgen.

Archief - Facebook like-box verwijderen bij bepaalde width window.

krulle3

Legacy Member

breez

Legacy Member

adrianhates

Legacy Member

krulle3

Legacy Member

-BVR-

Legacy Member

krulle3

Legacy Member