Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and the Yahoo Answers website is now in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.
Trending News
jQuery and CSS3 plugin?
I'm making a very simple personal website with my very limited knowledge of html.
I came across this function and would like to implement it into my page, but I can't seem to get it to work.
http://cssdeck.com/labs/magnifying-glass-plugin-wi...
I copy and pasted the html, css and js codes from the site into their own respective files, and changed the <link> and <script> paths to reflect my local css and js files, but only the body{ portion of the css seems to be loading.
<!DOCTYPE html>
<html>
<head>
<body>
<div align="center">
<link href='css.css' rel='stylesheet' type='text/css'>
<div id="wrap">
<h1>Super Cool Magnifying Glass For Image Zoom</h1>
<h2>Demo</h2>
<div class="product"><img class="magniflier" src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg... width="300"/></div>
<div class="product"><img class="magniflier" src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg... width="300"/></div>
<div class="product"><img class="magniflier" src="http://thecodeplayer.com/uploads/media/00kih8g.jpg... width="300"/></div>
</div>
<!-- Time for jquery action -->
<script src="java.js"></script>
</div>
</body>
</html>
Is there something else I need to do to get this function to work?
I apologize if this is a dumb question, but I am in no way even remotely familiar with css,js and jquery.
Thank you in advance.
1 Answer
- Newms34Lv 64 years agoFavorite Answer
First, you never close your <head> tag. Remember that in HTML, if a <tag> isn't a self-closing, 'by-itself' tag (like <img> or <br/>), it needs a closing </tag>.
Right now, the page thinks everything is inside your head. This actually won't necessarily break anything, but it's generally a very bad idea. The HEAD of your page is just for non-displayed information stuff, NOT for actual page content. You need a closing </head> tag, and between the two head tags is where you should stick your css <link> tag.
Secondly, again a nitpick, but please don't name your JavaScript file "Java.js". JavaScript is NOT Java (the two bear much the same relationship as the words "car" and "carrot" - i.e., none), and naming it this is just asking for trouble later. I usually name mine "main.js" or something like that.
Okay, now into debugging. Open the page, then take a look at the dev console (Google Chrome: ctrl-shift-i or ctrl-shift-j on PC, and I believe cmd-shift-i on mac). Make sure the "console" tab is open, and then look for errors. You should see one that says "main.js:1 Uncaught ReferenceError: $ is not defined(…)". That's because jQuery isn't included. jQuery is a particular subset of JavaScript, so just because you have JavaScript does not mean you have jQuery. You need to stick <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4... right above your <script src="main.js"></script> tag, so that jquery loads first, and then your personal script*. If you're wondering why the dude's example on cssdeck.com didn't seem to need this, it's because the editor he's using allows you to load external js/css/etc. files using a graphical interface. So it IS loaded, just not in the normal way you should be loading it. Save that and reload the page.
Next, take a look in the console and see if any other files aren't loading. Is it loading your main.js file and the css file? Or is it saying "Failed to load resource" or something? If so, double-check the path in your HTML.
Finally, the opening <div> tag should not have a trailing slash. In other words,
<div/>some content</div> is wrong.
<div>some content</div> is right.
*Yes, load order DOES matter!
