PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
M

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

Door Marlies Maalderink op 21-03-2017 18:25
1.877 views
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?
- SanThe -
21-03-2017 18:47 gewijzigd op 21-03-2017 18:49
Heb je wel de <script> tags verwijderd in het bestand?
En staat het na het ophalen van de jquery bestanden?
M Marlies Maalderink
21-03-2017 18:56
ja op beide.

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


$(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 -
21-03-2017 18:58
Marlies Maalderink op 21/03/2017 18:56:05

... ik weet niet zoveel van javascript:


En helaas weet ik niks van jquery.
Joakim Broden
21-03-2017 19:06
Je doet 
<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.
- SanThe -
21-03-2017 19:31
Er zit een foutje in de css:
.autovak {
widht: 100%;


Moet width zijn.
Joakim Broden
21-03-2017 19:44 gewijzigd op 21-03-2017 19:45
Verander $ in je menu-anchor.js eens in jQuery.


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;
            });
        }
    });
});
M Marlies Maalderink
21-03-2017 19:49 gewijzigd op 21-03-2017 19:50
- 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.



[size=xsmall]Toevoeging op 21/03/2017 19:51:30:[/size]

@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!!
Joakim Broden
21-03-2017 19:52 gewijzigd op 21-03-2017 19:52
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

[size=xsmall]Toevoeging op 21/03/2017 19:56:16:[/size]

Marlies Maalderink op 21/03/2017 19:49:13

[size=xsmall]Toevoeging op 21/03/2017 19:51:30:[/size]

@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).
M Marlies Maalderink
21-03-2017 20:32
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?

Joakim Broden op 21/03/2017 19:52:20

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


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.

Reageren

Inloggen om te reageren