CODEWITHSUNDEEP
jqueryhtmlcss
user4951
user4951

Reputation: 33080

How exactly should we combine these 3 snippet parts into one html file

I saw this snippet consisting of three parts:

http://jsfiddle.net/nBzcb/

there is html. There is jquery. And css.

I tried to combine that into a single file like this

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Hello World</title>
<style>
#content {
    max-width: 400px;
    margin: auto;
    left: 1%;
    right: 1%;
    position: absolute;
}
</style>
<script>
$(function() {
    $(window).on('resize', function resize()  {
        $(window).off('resize', resize);
        setTimeout(function () {
            var content = $('#content');
            var top = (window.innerHeight - content.height()) / 2;
            content.css('top', Math.max(0, top) + 'px');
            $(window).on('resize', resize);
        }, 50);
    }).resize();
});
</script>
</head>

<body>
<div id="content" style="background:#f00">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</body>

</html>

It doesn't seem to work. It seems that jquery, which is a library, need to be "referred". But how?

What should I do to fix that?

Upvotes: 0

Views: 112

Answers (4)

user3526204
user3526204

Reputation: 509

You have to use a jquery library to run JQuery scripts.

Add CDNs similar to this before your scripts

 <script data-require="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

or simply

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" data-pagespeed-orig-type="text/javascript"></script>

You can vary the versions

Also preferably put all the Javascript/Jquery at the bottom just before the ending 'body' tag. This will load it last and help in page load speed.

Actually it is always advisable to load Javascript and CSS as separate files (.js / .css ) loaded asynchronously. Except for above the fold CSS that should (as per Google page Insight) be included inline in style tags.

Upvotes: 1

Gulam Hussain
Gulam Hussain

Reputation: 1763

You have to include Jquery library to run jquery script on your webpage.. Just place this line of code in your HTML head tag..

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

Or if You are using localhost then first you have to download jquery library from here and place that jquery file in HTML head tag as a external script.

Upvotes: 1

Tom O.
Tom O.

Reputation: 5941

Try placing this in the head:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Upvotes: 1

Johannes
Johannes

Reputation: 67768

you have to include jQuery in the head, for example like this:

<script
          src="https://code.jquery.com/jquery-3.1.1.js"
          integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
          crossorigin="anonymous">
</script>

Upvotes: 1

Related Questions