(jquery) script werkt niet als hij in externe file staat

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Marlies Maalderink

Marlies Maalderink

21/03/2017 18:25:15
Quote Anchor link
Ik heb een stukje javascript (jquery) van internet gevist om de pagina geanimeerd naar een anchorpoint te laten scrollen (in plaats van er in 1x heen te springen).

Nu loop ik tegen het volgende aan. Als ik de code binnen <script type="text/javascript"></script> tags in de header van een site zet (na includen van jquery) dan werkt het prima.
Als ik dezelfde code in een los .js bestand zet en dit js bestand in de header include:

<script type='text/javascript' src='/js/menu-anchor.js'></script>

Dan werkt het niet. Er zit geen fout in het pad, de andere js bestanden uit die map werken wel. En ik kopieer de code direct, dus de code zoals ik hem in het js bestand is exact hetzelfde als dat ik hem gewoon in de header zet. Iemand enig idee waarom?
 
PHP hulp

PHP hulp

29/03/2024 08:35:01
 
- SanThe -

- SanThe -

21/03/2017 18:47:30
Quote Anchor link
Heb je wel de <script> tags verwijderd in het bestand?
En staat het na het ophalen van de jquery bestanden?
Gewijzigd op 21/03/2017 18:49:18 door - SanThe -
 
Marlies Maalderink

Marlies Maalderink

21/03/2017 18:56:05
Quote Anchor link
ja op beide.

Dit is trouwens het script, misschien staat er wel iets heel raars in, ik weet niet zoveel van javascript:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){

    $("a").on('click', function(event) {

        if (this.hash !== "") {

            event.preventDefault();

            var hash = this.hash;

            $('html, body').animate({
            scrollTop: $(hash).offset().top
            }, 800, function(){

            window.location.hash = hash;
            });
        }

    });

});
 
- SanThe -

- SanThe -

21/03/2017 18:58:45
Quote Anchor link
Marlies Maalderink op 21/03/2017 18:56:05:
... ik weet niet zoveel van javascript:


En helaas weet ik niks van jquery.
 
Joakim Broden

Joakim Broden

21/03/2017 19:06:22
Quote Anchor link
Je doet
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<script type="text/javascript" src="/js/menu-anchor.js"></script>
wel nadat je jQuery in geladen hebt toch? En heb je een online demo (of een foutmelding uit het JavaScript console), daar kunnen we wat meer mee.
 
Marlies Maalderink

Marlies Maalderink

21/03/2017 19:17:47
Quote Anchor link
Hier werkt hij niet

http://topsecreet.nl/wordpress/


Dit is wordpress, maar hier:

http://www.prinsoccasions.nl/ (geen wordpress) werkte hij ook niet als ik hem include en werkt hij nu, uitgeschreven in de header, wel.
 
- SanThe -

- SanThe -

21/03/2017 19:31:31
Quote Anchor link
Er zit een foutje in de css:
.autovak {
widht: 100%;


Moet width zijn.
 
Joakim Broden

Joakim Broden

21/03/2017 19:44:35
Quote Anchor link
Verander $ in je menu-anchor.js eens in jQuery.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
jQuery(document).ready(function(){
    jQuery("a").on('click', function(event) {
        if (this.hash !== "") {
            event.preventDefault();

            var hash = this.hash;

            jQuery('html, body').animate({
                scrollTop: jQuery(hash).offset().top
            }, 800, function(){
                window.location.hash = hash;
            });
        }
    });
});
Gewijzigd op 21/03/2017 19:45:45 door Joakim Broden
 
Marlies Maalderink

Marlies Maalderink

21/03/2017 19:49:13
Quote Anchor link
- SanThe - op 21/03/2017 19:31:31:
Er zit een foutje in de css:
.autovak {
widht: 100%;


Moet width zijn.


Jeetje wat suf - schaam.... Dank je dat je me er even op wijst.



Toevoeging op 21/03/2017 19:51:30:

@Joakim, ik dacht eerst dat het niet werkte maar was er nog een vergeten. Het werkt nu wel!

Gek, ik zet altijd een stukje code in de functions file in wordpress dat dat automatisch moet regelen maar dat werkte dan blijkbaar niet.

Super bedankt, opgelost dus!!
Gewijzigd op 21/03/2017 19:50:27 door Marlies Maalderink
 
Joakim Broden

Joakim Broden

21/03/2017 19:52:20
Quote Anchor link
Hele website zit nog vol met fouten :-) Krijg in console al 10 errors:
"NetworkError: 404 Not Found - http://topsecreet.nl/wordpress/wp-content/plugins/topsecreet_gallery/public/js/plugin-name-public.js?ver=1.0.0";
"NetworkError: 404 Not Found - http://topsecreet.nl/wordpress/wp-content/plugins/topsecreet_agendaBP/public/css/plugin-name-public.css?ver=1.0.0";
"NetworkError: 404 Not Found - http://topsecreet.nl/wordpress/wp-content/plugins/topsecreet_agendaBP/public/js/plugin-name-public.js?ver=1.0.0";
etc etc

Toevoeging op 21/03/2017 19:56:16:

Marlies Maalderink op 21/03/2017 19:49:13:
Toevoeging op 21/03/2017 19:51:30:

@Joakim, ik dacht eerst dat het niet werkte maar was er nog een vergeten. Het werkt nu wel!

Gek, ik zet altijd een stukje code in de functions file in wordpress dat dat automatisch moet regelen maar dat werkte dan blijkbaar niet.

Super bedankt, opgelost dus!!


In je jQuery bestand had je iets met jQuery.noConflict() staan. Waardoor je alle jQuery code daarna met $ moet vervangen voor jQuery (geloof ik, weet ik niet 100% zeker). Maar interne JavaScript word altijd eerder uitgevoerd dan externe JavaScript. Daardoor werkte interne JavaScript wel, en externe JavaScript niet.

En jQuery.noConflict(); is eigenlijk nergens voor nodig, je krijgt alleen conflicten als je met te veel JavaScript libraries werkt (dubbele jQuery etc).
Gewijzigd op 21/03/2017 19:52:48 door Joakim Broden
 
Marlies Maalderink

Marlies Maalderink

21/03/2017 20:32:28
Quote Anchor link
Joakim Broden op 21/03/2017 19:52:20:
In je jQuery bestand had je iets met jQuery.noConflict() staan. Waardoor je alle jQuery code daarna met $ moet vervangen voor jQuery (geloof ik, weet ik niet 100% zeker). Maar interne JavaScript word altijd eerder uitgevoerd dan externe JavaScript. Daardoor werkte interne JavaScript wel, en externe JavaScript niet.

En jQuery.noConflict(); is eigenlijk nergens voor nodig, je krijgt alleen conflicten als je met te veel JavaScript libraries werkt (dubbele jQuery etc).


Bedankt voor je uitleg. Wordpress doet dit automatisch zodra je jQuery gaat gebruiken. Dus voor topsecreet.nl is het gewoon de schuld van wordpress. Wat ik gekker vind is dat ik het ook terug vind in de jQuery code die ik op prinsoccasions.nl heb geinclude. Daar heb ik deze link gebruikt:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Ervan uitgaande dat dat precies was wat ik moest hebben, zonder dat ik jQuery hoefde te downloaden enzo. Maar dat is dus schijnbaar niet helemaal zo?



Ik weet het, site is nog niet klaar. :) foutmeldingen komen uit plugins weg waarvan ik de afbeeldingen nog moet maken en de framework code nog moet opschonen.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.