[html, css, js] voor dummies #21

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_107838629
Er gaat niets kapot nee, maar de scheiding tussen de verschillende lagen van je website/applicatie worden wel minder strak - aangezien je logica aan je HTML gaat hangen. Voor mijn gevoel neigt het toch een beetje naar inline styling.
Bleuh.
pi_107838714
Zou iemand hier even naar kunnen kijken? Kom er zelf echt niet uit:

Browser resizen naar iets kleins.
http://dahndesigns.net/summit/

In Chrome laat ie wel een andere backside zien, maar in Safari en op de iPhone gewoon de gespiegelde voorkant? :S
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
pi_107839460
Het heeft iig te maken met de position:absolute en de z-index die je op je .container hebt liggen. Als ik de .mobilemenu positioneer en een z-index geef die hoger ligt dan de .container krijg ik gewoon het gespiegelde element te zien wat over de container ligt. Ik zou dus de container display:none doen zodra je op de knop hebt geklikt.

Ofzo.
Bleuh.
pi_107840522
Ja dat heb ik nu, probleem alleen is nu dat je de rotatie niet meer ziet omdat die display:none meteen in werking gaat. Enig idee hoe ik die kan delayen?

Heb nu dit:

$(".container").toggleClass("containeractive");
$(".mobilemenu").toggleClass("mobilemenuactive")
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
pi_107841148
Pff display:none met een setTimeout ofzo doen. Maar da's meer een work-around dan een oplossing. Mijn ervaring met die CSS 3D-transforms enzo is dat het maar een hoop ellende oplevert - zeker wanneer je het combineert met CSS Transitions.
Bleuh.
pi_107841473
Workaround wordt het dan. Ik ben een nul in jQuery, dus als je met dit kleine probleempje nog zou willen helpen zou het super zijn. Hoe voeg ik een delay toe aan een toggleclass?
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
pi_107841562
Ik snap niet dat mensen een nul in jQuery zijn, maar ondertussen wel met HTML5 boilerplate, CSS transforms en transitions aan de slag gaan :D

Maar goed, volgens mij heeft jQuery gewoon een delay() functie. Dan zou het zoiets worden gok ik (al maanden geen jQuery gedaan):

1$(".container").delay(500).toggleClass("containeractive");
Bleuh.
pi_107841666
Die functie had ik al geprobeerd, werkt helaas niet.

H5BP en CSS heb ik geen jQuery voor nodig. :P
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
pi_107842972
quote:
0s.gif Op vrijdag 10 februari 2012 20:58 schreef Neraice het volgende:
Die functie had ik al geprobeerd, werkt helaas niet.

H5BP en CSS heb ik geen jQuery voor nodig. :P
http://lmgtfy.com/?q=delay+jquery
pi_107843130
Denk je dat ik dat niet al had geprobeerd? :P Ik kwam er gewoon niet uit, ben nu bezig met een andere oplossing.
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
pi_107843600
En het werkt, zelfs in IE :D
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
  maandag 13 februari 2012 @ 12:40:32 #212
87680 Mirel
Mirel wil een bongophone.
pi_107926158
Hoe kan ik de AddThis Like knop fixen zodat 'ie het ook in Firefox doet? Als je iets liket, dan zie je het tekstwolkje naast de like knop niet. Op het AddThis forum zeggen ze niks. Ik ben niet te spreken over hun behulpzaamheid. }:|
http://support.addthis.co(...)-it-right?new=176005

www.mirelmasic.nl random post

Code is gewoon:
1
2
3
4		<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
</div>
<script type="text/javascript" data-src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4f30145f710099d4" style="visibility:hidden;"></script>

Even iets anders. Ik wil een custom scrollbalk, die de gewone vervangt van de browser. Ik weet dan niet of ik hier moet wezen:
http://jscrollpane.kelvinluck.com/

Heb de bestanden gedownload en in een map gezet, en dit geprobeerd in de head, maar het werkt niet:
1
2
3
4
5
6
7
8		<link type="text/css" href="<?php bloginfo('stylesheet_url'); ?>/js/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="<?php bloginfo('stylesheet_url'); ?>/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_url'); ?>/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="<?php bloginfo('stylesheet_url'); ?>/js/jquery.jscrollpane.min.js">
$(function(){
    $('#section-scroll').jScrollPane();
});
</script>


[ Bericht 20% gewijzigd door Mirel op 13-02-2012 13:03:04 ]
When all else fails, you always have delusion.
pi_107929981
Hoi!

Ik wil iets dat er een winner geselecteerd wordt uit een x aantal namen. Gezocht en dit gevonden: http://primaryschoolict.com/random-name-selector/. Het werkt en het ziet er nog eens mooi uit ook!

Code ietwat aangepast en getest, het werkt. Yay! (Voorbeeld met 10 namen: http://fok.zargon.nl/topic/1762349/naam.html.)

Maar nu kom ik erachter dat wanneer veel namen in de array zet, de winnaar pas een aantal seconden later gehighlight wordt. (Voorbeeld met véél meer namen: http://fok.zargon.nl/topic/1762349/namen.html.)

Te traag... Is er een manier om het hightlighten vlotter te maken? Ik heb gespeeld met de tijden en dergelijke, maar het ligt echt aan het aantal namen.

Of weten jullie misschien een betere methode?
pi_107930851
Aangezien het script de winnaar al heeft bepaald voordat 'ie uberhaupt gaat spinnen kan je eventueel voor een luie fix met css gaan:

1
2
3
4
5		#result1 {
 background-color: black; 
 color: rgb(223, 223, 223);
 height: 117px;
}
pi_107934585
Thanks! Dat werkt inderdaad. Beter dan niets!

Alleen... dat de winnaar pas gehighlight wordt op het einde wil ik graag behouden. Enig idee hoe dat kan? :P.
pi_108041283
Ik wil er met een scriptje voor zorgen dat een div (Of iets anders, als het moet) met de pagina meescrollt. Zoals de "Frontpage | Sport |Etc"-balk bovenin van FOK!.

Is het vmogelijk om een knopje te maken waarmee je die div vastzet? Voor gebruikers met een te klein scherm, voor als de div te lang wordt?

Bedankt O+
  donderdag 16 februari 2012 @ 12:45:24 #217
56176 Catch22-
Ben je Blind?!
pi_108041717
quote:
0s.gif Op maandag 13 februari 2012 16:43 schreef zarGon het volgende:
Thanks! Dat werkt inderdaad. Beter dan niets!

Alleen... dat de winnaar pas gehighlight wordt op het einde wil ik graag behouden. Enig idee hoe dat kan? :P.
maak er .done #result1 van en voeg de .done class toe aan een parent als eea klaar is?
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_108043341
quote:
0s.gif Op donderdag 16 februari 2012 12:31 schreef RenRen- het volgende:
Ik wil er met een scriptje voor zorgen dat een div (Of iets anders, als het moet) met de pagina meescrollt. Zoals de "Frontpage | Sport |Etc"-balk bovenin van FOK!.

Is het vmogelijk om een knopje te maken waarmee je die div vastzet? Voor gebruikers met een te klein scherm, voor als de div te lang wordt?

Bedankt O+
Dat is mogelijk.
pi_108045230
welkom in de wondere wereld van jQuery..die ik nog niet begrijp :')

ben er een beetje mee aan het spelen
maar ik snap m nie..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23		<script type="text/javascript">
$(document).ready(function(){
     $(".??").mouseenter(function(){
        $(".??").animate({top:"-40px"},"fast");
       $(".??").animate({top:"-20px"},"fast");
  });
     $(".??").mouseleave(function(){
       $(".??").animate({top:"20px"},"fast");
        $(".??").animate({top:"0px"},"fast");
});
});
</script>
</head>
<body>

<br /><br />
    <div id="test">
<img src="facebook.png" />
        <ul class="gallery">
            <li><img src="facebook.png" /></li>
            <li><img src="facebook.png" /></li>
        </ul>
    </div>

Als probeerseltje wil ik een icoontje een beweging laten maken
Nu lukt het wel om een div of class de beweging te laten maken zodat alle icons bewegen.
Hoe kan ik alle icoontjes nu aparte laten bewegen? Kan dit wel op mijn manier? Wat moet ik dan op de ?? zetten
  donderdag 16 februari 2012 @ 14:54:09 #220
84244 Scorpie
Abject en infaam!
pi_108045331
1
2
3		<?php
$(".test img") 
?>

Geeft alle images binnen elementen met id "test"

1
2
3		<?php
$(".test") 
?>

Geeft alle elementen met id "test" terug.

1
2
3		<?php
$("#test") 
?>

Geeft alle elementen met class "test" terug.
Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
pi_108045517
quote:
0s.gif Op donderdag 16 februari 2012 14:54 schreef Scorpie het volgende:

[ code verwijderd ]

Geeft alle images binnen elementen met id "test"
[ code verwijderd ]

Geeft alle elementen met id "test" terug.
[ code verwijderd ]

Geeft alle elementen met class "test" terug.

Maar dan net andersom ;)
zcflevo.nl
pi_108046321
is dit dan gelijk aan img?
$(":image") All input elements with type="image"
is volgens w3schools

met
$(".test:img")
gaat toch alles mee...
misschien heb ik mijn probleem niet heel goed omschreven
maar van een rij icoontjes wil ik dat degene beweegt waar ik met de muis op kom
alleen die..en niet alle andere img die in de zelfde div of class staan

op ed.nl (halverwege de pagina) staat eigenlijk wat ik wil
probeer dit na te maken, om van te leren
Ik kan het trouwens niet zien hoe ze het daar gemaakt hebben :( toch wel :)

[ Bericht 39% gewijzigd door MrNiles op 16-02-2012 15:39:31 ]
pi_108046623
daar hebben ze "this" voor uitgevonden.
zcflevo.nl
pi_108087256
Ik heb de volgende code in m'n site om portfolio items via Ajax te laden. In die items wil ik graag een slider, maar die moet ik dan pas initiaten nadat de content is geladen met Ajax. Ik heb al een hoop gekloot met event re-binding etc maar ik kom er niet uit. Iemand die kan helpen?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40		// FlexSlider <- dit moet geladen worden in de ajax content
$(window).load(function() {
    $('.flexslider').flexslider({
        animation: "slide"
    });
});

$(document).ready(function() {  
  
    // Check for hash value in URL  
    var hash = window.location.hash.substr(1);  
    var href = $('.menu li a').each(function(){  
        var href = $(this).attr('href');  
        if(hash==href.substr(0,href.length-5)){  
            var toLoad = hash+'.html #portfolio';  
            $('#portfolio').load(toLoad)  
        }  
    });  
  
    $('.menu li a').click(function(){  
  
    var toLoad = $(this).attr('href')+' #portfolio';  
    $('#portfolio').slideUp('fast',loadcontent);  
    $('#load').remove();  
    $('#wrapper').append('<span id="load">LOADING...</span>');  
    $('#load').fadeIn('normal');  
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);  
    function loadcontent() {  
        $('#portfolio').load(toLoad,'',showNewcontent())  
    }  
    function showNewcontent() {  
        $('#portfolio').slideDown('slow',hideLoader());  
    }  
    function hideLoader() {  
        $('#load').fadeOut('normal');  
    }  
    return false;  
  
    });  
});  


[ Bericht 49% gewijzigd door Neraice op 17-02-2012 17:42:20 ]
"A goal without a plan is just a wish." - Antoine de Saint-Exupery
  vrijdag 17 februari 2012 @ 17:38:23 #225
134533 donroyco
dus niet Donroyco
pi_108087306
Zet je code eens in codebrackets.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
actieve topics nieuwe topics
abonnement Unibet Coolblue
[html, css, js] voor dummies #21
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')