jquery doesn't work, can't find the right answer here
Question
My html code with the jquery link
<!DOCTYPE html>
<html>
<head>
<!-- metadata -->
<meta charset="UTF-8">
<meta name="keywords" content="bas webdesign, beverwijk, heemskerk, uitgeest, ijmuiden, velsen, noord holland, noord-holland, nederland, responsive webdesign, website bouwen, goedkoop, kwaliteit, betrouwbaar, html 5, css 3, javascript, huisstijl, huisstijlen">
<meta name="viewport" content="width=device-width user-scalable=no">
<!-- socialmedia -->
<meta property="og:site_name" content="www.bas-webdesign.nl"/>
<meta property="og:title" content="Investeer in je bedrijf, investeer in een goede website!"/>
<meta property="og:description" content="Bas webdesign maakt websites op maat voor elk budget. Jij bepaalt, Bas maakt. Advies is bij Bas een service. En service is gratis, zoals het hoort! Neem gerust contact op en kom eens op de koffie voor een vrijblijvend gesprek."/>
<meta property="og:image" content="afb/sociaal/socialeMediaThumbnail.jpg">
<meta property="og:url" content="http://bas-webdesign.nl/">
<meta property="og:type" content="Webdesign"/>
<!-- socialmedia -->
<!-- metadata -->
<!-- links -->
<!-- favicon -->
<link rel="shortcut icon" href="afb/logo/favicon.png" type="image/x-icon">
<link rel="icon" href="afb/logo/favicon.png" type="image/x-icon">
<!-- favicon -->
<!-- fonts -->
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- fonts -->
<!-- standaard -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- standaard -->
<!-- links -->
<!-- script -->
<!-- jquery -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- jquery -->
<script src="js/actions.js"></script>
<script src="js/smooth-scroll.js"></script> <!-- gebruik "data-scroll" in de a tag voor smoothscroll -->
<!-- script -->
<title>Bas Webdesign</title>
</head>
<body>
<!-- omhuller -->
<div class="omhuller">
<!-- header -->
<header id="header">
<!-- logo -->
<img src="afb/logo/logo.png">
<!-- logo -->
<!-- hoofdmenu -->
<section id="hoofdmenu">
<ul>
<li>
<span id="menuIcoon_website" class="fa fa-globe" onmouseover="hoverAan(menuIcoon_website, menuTekst_website)"></span>
<a href="websites/" id="menuTekst_website" class="onzichtbaar" onmouseout="hoverUit(menuIcoon_website, menuTekst_website)">websites</a>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</section>
<!-- hoofdmenu -->
</header>
<!-- header -->
</div>
<!-- omhuller -->
<script>
smoothScroll.init();
</script>
</body>
</html>
And here I want to start my hover function.
$( document ).ready(function() {
// globale variabelen
// globale variabelen
// functies
// hover
function hoverAan(onzichtbaar, zichtbaar){
onzichtbaar.style.display = "none";
zichtbaar.style.display = "inline";
}
// hover
// functies
});
The thing is... Without the jquery link and .ready() (so plain js) it does work. Is it the position of the jquery link? or is there something else I do wrong? because I want to write a lot of jquery instead of js . So I wanted to make sure it does the job from the very beginning.. and now it does not.
1 answers
solution1
0 2015-11-11 13:28:50
You want to keep all your JavaScript functions outside of your $(document).ready(function () {}); . This way, your functions will be loaded in-line with your HTML, instead of your functions being loaded after your HTML is loaded.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.