Hallo allemaal,

Momenteel ben ik bezig met een website, waarbij ik bij een :hover bepaalde inhoud laat zien.

Op de volgende pagina's heb ik over de plusjes in de afbeelding een onzichtbare div gezet, waarbij uitleg zichtbaar wordt na een hover :

http://ontwikkeling2.tipict.nl/wonin...mer-en-toilet/

Het probleem is echter dat dit dus niet op iOs devices werkt maar wel op mijn Android telefoon (bij een onclick).

Ik heb veel gelezen over de onmogelijkheden van :hover op iOs devices. Ik wil graag dat de "infobox" op een iPad wordt getoond bij een onclick en weer verdwijnt bij een klik elders op het scherm of op een andere plus.

Ik ben best wel behendig met html/css, maar niet bepaald met jquery/javascript. Heeft iemand suggesties voor een eenvoudige oplossing?

Detecteer of je bezoeker touch heeft met http://modernizr.com/ en attach dan een onclick event die je hidden div laat zien.

Detecteed met JQuery of de gebruiker erop heeft geklikt met mouseover() en laat dan de div zien. En kijk daarna met mouseout() wanneer de gebruiker ergens anders klikt, en laat het divje dus weer verdwijnen ;)

Origineel gepost door gast31394

Detecteed met JQuery of de gebruiker erop heeft geklikt met mouseover() en laat dan de div zien. En kijk daarna met mouseout() wanneer de gebruiker ergens anders klikt, en laat het divje dus weer verdwijnen ;)

Mouseover is net als hover... dat werkt niet op touch devices.

Ik wil er juist geen plugins aan koppelen. Het zou prima zijn als een klik op de plus ervoor zorgt dat het vakje zichtbaar wordt. Een tweede klik op de plus (en/of eventueel elders op het scherm) moet er dan voor zorgen dat het vakje weer verdwijnt.. Ik denk dat dit met JavaScript te maken zou zijn, maar ik weet niet hoe..

Origineel gepost door Wilbert E.

Mouseover is net als hover... dat werkt niet op touch devices.

Het werkt wel degelijk met Android en IOS... En anders vervang je de mouseover() met click()

Het punt is dat ik het nu met CSS heb geregeld (via :hover)
Ik ben dus op zoek naar een simpel scriptje waarmee ik een functie aan de <div> tags kan toevoegen, zodat bij 1x klikken de tekst verschijnt en nog een x klikken (op plusje of elders) de tekst weer verdwijnt..

Code:

//Onzichtbaar maken van de span 
//in apparte functie omdat deze op meerdere plekken wordt aangeroepen
var hideSpan = function(span){
    span.css({"visibility":"hidden"});
}

//Als er op de div wordt geklikt:
$("div.plus").on("click",function(){  

 //De span in de div opzoeken
 var span = $(this).find("span");

 //controleren of je span onzichtbaar is
 if(span.css("visibility","hidden")){

     //span zichtbaar maken
     span.css({"visibility":"visible"});

     //Detecteren of er ergens anders op wordt geklikt. Dan hiden we de span weer
     //one verwijderd zichzelf weer na de actie i.t.t on
     $(document).one("click",function(){
          hideSpan(span);
     });
     

 }else{

     //span is zichtbaar dus hij moet weer onzichtbaar
     // execute functie die we als eerst hebben aangemaakt
     hideSpan(span);
 }

});

Ik zag dat het alleen "visible" maken van je span niet genoeg is. Je kan meer CSS toevoegen aan de regels waar de css wordt aangepast

Code:

span.css({"visibility":"visible"});
//wordt dan:
span.css({"visibility":"visible", "nogEenStyle":"value", "nogEenStyle":"value"});

Nog mooier is het als je met classes werkt en de class toevoegt of removed bij een onclick.

Thanks Wilbert E.! Dit kan ik dus wel lezen/begrijpen maar ik ben zelf gewoon niet zodanig behendig met JavaScript dat ik het zelf kan schrijven. Ik laat weten als het is gelukt. Kan wel weekje duren ivm werkzaamheden.