javascript - jquery not loading in html -
i have started web development. have been trying make pages jquery on them, have been having bunch of trouble. code write , link html page won't load, , when @ console in browser, doesn't show scripts being loaded. way can them load wrapping code in <script> tags in html document itself, , works fine. have tried using <script src="source.js"> in <head> tags, before closing <body> tag nothing happens. .css file loads , aside javascript, website works fine. if see else doing wrong, such formatting code itself, or using bad style, please point out well. trying going developer, give appreciated. here files 1 of many sites have trouble with:
<!doctype html> <html> <head> <meta content="text/html; charset=windows-1252" http-equiv="content-type"> <link rel="stylesheet" href="dot_grid.css"> <script src="dot_grid.js"></script> <title></title> </head> <body> <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <br> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <br> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <br> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <br> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <br> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <br> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <br> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <br> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <br> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="reset">reset</div> <div id="opac">change opacity</div> </body> </html> all <div> tags making grid... if there's better way, means, let me know :p
css:
div div{ height:25px; width:25px; display:inline-block; border-radius:100%; background:orange; position:static; border:none; } .other1 { background:teal; } #addrow { height:25px; width:35px; background:#334477; border-radius:5px; text-align:center; } #reset { height:1em; width:3.25em; font-size:1em; padding:5px; text-align:center; border-radius:5px; opacity:0.3; background:blue; color:white; border:1px solid black; } #reset:hover { color:black; background:#666600; text-decoration:underline; } #opac { height:1em; width:6.5em; font-size:1em; padding:5px; text-align:center; border-radius:5px; background:blue; color:white; opacity:0.3; border:1px solid black; } #opac:hover { color:black; background:#666600; text-decoration:underline; } ...and jquery file:
$(document).ready(function() { $("div div").mouseenter(function(){ $(this).css("background","red"); }); $("div div").mouseleave(function(){ $(this).css("background","orange"); }); $(".other1").mouseenter(function(){ $(this).css("background","blue"); }); $(".other1").mouseleave(function(){ $(this).css("background","teal"); }); $("div div").click(function(){ $(this).fadeto("slow",0); }); $("#reset").click(function(){ $("div div").fadeto("slow",1); }); $("#reset").mouseenter(function(){ $(this).fadeto("fast",1); }); $("#reset").mouseleave(function(){ $(this).fadeto("fast",0.3); }); $("#opac").click(function(){ $("div div").fadeto("slow",math.random()); }); $("#opac").mouseenter(function(){ $(this).fadeto("fast",1); }); $("#opac").mouseleave(function(){ $(this).fadeto("fast",0.3); }); }); i'm sorry files long, again, if me, great.
you forgot include jquery library in file. try head tag, , let know if found more problems.
<head> <meta content="text/html; charset=windows-1252" http-equiv="content-type"> <link rel="stylesheet" href="dot_grid.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="dot_grid.js"></script> <title></title> </head> you can download here, put in .js directory , add did dot_grid.js
Comments
Post a Comment