Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I link the jQuery plugin in html document

I want to link the Social FloatingShare jQuery plugin in HTML document. I have try to link this jQuery plugin, But calling the plugin function floatingShare() is not working as I excepted.

I have two questions:

  1. How to link a jQuery in my html document?
  2. What mistake I have done in my code?

My Source Code:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jquery Plugin</title>
    <style>
        body { margin: 0px; padding: 0px; background: #ccc; }
        .container { height: 500px; width: 1000px; margin: 0px auto; padding: 0px; }
    </style>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
    <script type="text/javascript">
        $(function(){
            $("body").floatingShare();
        });
    </script>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.floating-share.js" type="text/javascript"></script>
</body>
</html>
like image 590
Asif Raza Avatar asked Oct 27 '14 06:10

Asif Raza


People also ask

How do I link jQuery to my HTML?

By downloading the jQuery library locally 0. min. js file in a directory of your website, e.g. /jquery. We can link jQuery in an HTML page by using a script tag and providing the downloaded jQuery library file address as the src attribute.

How do you add a plugin to HTML?

Plug-ins can be added to web pages with the <object> tag or the <embed> tag. Plug-ins can be used for many purposes: display maps, scan for viruses, verify your bank id, etc. To display video and audio: Use the <video> and <audio> tags.

Can I use jQuery in HTML?

At its core, jQuery is used to connect with HTML elements in the browser via the DOM. The Document Object Model (DOM) is the method by which JavaScript (and jQuery) interact with the HTML in a browser. To view exactly what the DOM is, in your web browser, right click on the current web page select “Inspect”.

How will you use plugins in jQuery?

How to use Plugins. To make a plug-in's methods available to us, we include plug-in file very similar to jQuery library file in the <head> of the document. We must ensure that it appears after the main jQuery source file, and before our custom JavaScript code.


1 Answers

You need to include jquery plugins before its use because all the jQuery or jQuery functions should be available before using, so change the jquery library and script sequence as show below -

NOTE - It is good practice to keep script tag directly into <body> or <head> tag instead of any other html element.

<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="js/jquery.floating-share.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function(){
   $("body").floatingShare();
  });
</script> 
<div class="container"> 

</div>

</body>
like image 100
Bhushan Kawadkar Avatar answered Oct 09 '22 02:10

Bhushan Kawadkar