I can not connect an external JavaScript file to my html page.
When I put the script in the page with the tag it all works
but when I insert it in an external file is not working, what is wrong?
<!DOCTYPE!>
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- JQuery da Google -->
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!---------------------->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<!-- CSS -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- JS-->
<script src="js/function.js" type="text/javascript"></script>
</head>
<body>
<footer>
<img class="info" src="img/newsletter.png" width="32" height="32" alt="info" />
</footer>
<div id="info">
<ul class="infomenu">
<li class="newsletter">NEWSLETTER</li>
<li>PRIVACY</li>
<li>CONTACT</li>
<li>FOLLOW US</li>
</ul>
</div>
</body>
</html>
Javascript
//Jquery Info
$(document).ready(function(){
$(".info").hover(function(){
$("#info").fadeIn("slow");
});
$(".close").click(function(){
$("#info").fadeOut("slow");
});
});
You really messed up your html code, try googling for the HTML(5) basics, first of you should learn the basic construction of it like following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<title>Welcome</title>
<link type="text/css" href="styles/default.css">
</head>
<body>
<!-- HTML Content -->
<script type="text/javascript" src=".."></script>
<script>
// Javascript inside this file
</script>
</body>
</html>
The link- and script part is not necessary, but you mostly will need it so I put it in the right order in.
Try putting script-Tags over the closing </body>-Tag, this will prevent that the page is loading endless for the Javascript file, before the page is actually loaded.
This way the external Javascript should work, also if you working localy, you should use a Webserver software like XAMPP. If you use XAMPP, after installing it, you have to start the Apache Service and then you work inside (if you didn't changed the path) the C:\xampp\htdocs folder. If you create a folder inside it called testing and place your index.php inside it, you just can type following in the browser http://localhost/testing and it will search for a index. html or php file and parse it.
If you just double click the file, you mostly will end up with security issues, which will prevent your code will work like you intended to do. You know that you double clicked a file if it starts like file:// and not http://.
But like I said, google for tutorials from the scratch. It takes time, but you can't do it without taking the time. Trust me, I do this for over 7 Years now and I am online nearly everyday and learning, learning, reading, testing, coding, learning, reading, testing and I STILL think that this is less than 5% of knowledge what I could learn.. never think you are at the end or near to it.. you never are, there are always things to learn and if you keep in thought that you are near the end, you will stop improving and never become good.
<script>
$(document).ready(function(){
$(".info").hover(function(){
$("#info").fadeIn("slow");
});
$(".close").click(function(){
$("#info").fadeOut("slow");
});
});
</script>
Related
When I type in the following code from Action Nudge to show an eBay stock list, such as below...
<script
type="text/javascript"
src="//www.auctionnudge.com/feed/item/js/theme/responsive/page/init/img_size/120/cats_output/dropdown/search_box/1/show_logo/1/lang/english/SellerID/expedite-allocations/siteid/3/MaxEntries/6">
</script>
<div id="auction-nudge-items" class="auction-nudge"></div>
It doesn't work in Atom (Code Software). When you close the script with an ending tag as you see within the code Action Nudge has given me, the code loses it's colour like it has become defunct, thus not registering correctly nor showing within the site when I load it. Do I need to put something above the script for it to work? I'm confused. Please help. P.s. I'm a beginner to HTML/CSS but have never used JavaScript.
Here is the whole code on the web page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width">
<meta name="description" content="Providing for your medical needs">
<meta name="author" content="Benjamin Willis">
<title>Expedite Allocations</title>
<link rel="stylesheet" href="./style.css">
</head>
<body style="background-color:white;">
<header>
<div class="container">
<div id="branding">
<img width="300" height="150" src="Expedite-Logo-jpg.png" alt="Expedite Allocations" />
</div>
<nav>
<span><a href="Expedite Allocations Website.html">Home<a/></span>
<span><a href="about us.html">About Us<a/></span>
<span><a href="equipmentstore.html">Equipment Store<a/></span>
<span><a href="location.html">Location<a/></span>
<span><a href="contact us.html">Contact Us<a/></span>
</nav>
</header>
<script type="text/javascript" src="//www.auctionnudge.com/feed/item/js/theme/responsive/page/init/img_size/120/cats_output/dropdown/search_box/1/show_logo/1/lang/english/SellerID/expedite-allocations/siteid/3/MaxEntries/6"></script><div id="auction-nudge-items" class="auction-nudge"></div>
Oh! So it’s working for me, which was confusing me. But I was running it online, and I’m guessing you’re opening a file. You need to specificity either http:// or https:// before the link to the eBay script. Right now there’s just a //, which tells the browser to use the protocol as the page is being loaded with. When opening a file on your computer, this protocol is file://. So I’m guessing the browser is trying to use the file protocol to connect to eBay, which is obviously failing.
i'm sorry to bother you with a silly problem, but i've been learning jee lately and started using bootstrap as i've been told is a nice tool, anyway i'm making a simple jsp page with a form but i noticed whenever i try to use a dropdown it doesn't work !
i don't know what i'm missing, i'd very much appreciate if someone can take a look at my code and tell what's wrong :D (i made it as simple as it can be on button in the page to find where the problem is )
<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0">
<jsp:directive.page contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false"/>
<jsp:output doctype-root-element="html"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
omit-xml-declaration="true" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Insert title here</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.css"></link>
<link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"></link>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<script type="text/javascript" src="Bootstrap/jquery/jquery.js"></script>
<script type="text/javascript" src="Bootstrap/jquery/jquery.min.js"></script>
<script type="text/javascript" src="Bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="Bootstrap/js/Bootstrap.js"></script>
<script type="text/javascript" src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
</jsp:root>
I think my problem is that i'm missing the inclusion of some sort of file or somthing but i can't tell what is it, you can see i've tried including random ones to test but nothing :'(, i have the feeling it's something really stupid but i'd very much appreciate it if someone can help me please !
Thanks in advance guys
Maybe you could try this (see also here):
<script>
$(document).ready(function(){
$(".dropdown-toggle").dropdown();
});
</script>
You can use "select instead of ul" tag without "dropdown-menu". and "option instead of li".
You are missing the inclusion of your files.
I tried your dropdown, it works as it. I think your paths are not right because you said that:
fixed the problem with adding "<>script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">"
But jQuery is required by Bootstrap and already provided at the end ! So you missed this part at least.
<script type="text/javascript" src="Bootstrap/jquery/jquery.js"></script>
<script type="text/javascript" src="Bootstrap/jquery/jquery.min.js"></script>
<script type="text/javascript" src="Bootstrap/js/jquery.js"></script>
Furthermore you don't need jquery.js and jquery.min.js AND js/jquery.js
.min files are minified files. They do exactly the same job. And include three or four times a file is useless.
I advice you to use the tag ${pageContext.request.contextPath} in order to have the absolute path of your files. For example, if my app is called mywebapp on my server then ${pageContext.request.contextPath}/css/Bootstrap.css will give me /mywebapp/css/Boostrap.css
I hope it will help.
EDIT: Is it normal that your HTML file start with an XML tag ?
Please add in head otherwise It will not work
This is the index.html with angular-alpha35:
<html>
<head>
<meta charset="UTF-8">
<base href="/">
<title>APP Ang2</title>
<script src="scripts/traceur-runtime.js"></script>
<script src="https://jspm.io/system#0.16.js"></script>
<script src="scripts/bundle35/angular2.dev.js"></script>
<script src="scripts/bundle35/router.dev.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<app>Loading...</app>
<script>System.import('app').catch(console.log.bind(console));</script>
</body>
</html>
And it works fine if there is internet connection and system.js can be loaded. If I try to get a local copy of system.js like this:
<script src="scripts/system#0.16.11.js"></script>
then nothing works until I put rx.js in the root folder and put this line at the end of the file:
<script src="scripts/es6-module-loader#0.16.6.js"></script>
</body>
</html>
then System.js works fine, but in this case, there is a strange problem with angular2 bindings. they are not working until I do some interaction with the page (submit a form, open a select, make some div change its dimensions even with simple hidden, etc..). As soon as something changes on the page, all bindings get to work and the page gets resurrected.
How to make all this work locally without node.js and without internet connection?
You should include the sfx version of angular 2 like this:
<script src="https://code.angularjs.org/2.0.0-alpha.32/angular2.sfx.dev.js"></script>
Note that it's a self contained js file you can download locally.
Check this sample project I made in github:
https://github.com/alfonso-presa/angular2-es5-sample
Edit: Check this SO question for more clarification on what sfx means: Difference between angular.dev.js and angular.sfx.dev.js
Thanks to Arnaud Boeglin's idea of difference in packages' version, I checked with es6-module-loder and by chance this installation works perfectly (so far I didn't find any problem):
<script src="scripts/traceur-runtime.js"></script>
<script src="scripts/es6-module-loader.js"></script>
<script src="scripts/system#0.16.11.js"></script>
<script src="scripts/bundle35/angular2.dev.js"></script>
<script src="scripts/bundle35/router.dev.js"></script>
The es6-module-loader has to be before the systemjs in <head> tag.
I've made my web application and did hardwork to make this almost lost 180 days to make this. All my application is made into JAvascript. But i could see, many smart persons still can steal my codes. Can you please help me? How to encrypt in such a way that my code will never show into Inspect element and View Source? Is there any Algorithm?
Here is my code When i see into inspect Element and View Source:
<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="js/jplayer.flat.css" type="text/css" />
<link rel="stylesheet" href="css/app.v1.css" type="text/css" />
<link rel="stylesheet" href="css/load_bar.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/load_bar.js"></script>
<script src="js/app.v1.js"></script>
<script src="js/app.plugin.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="js/music_list.js">
</script>
--------
--------
--------
<!--[if lt IE 9]> <script src="js/ie/html5shiv.js"></script> <script src="js/ie/respond.min.js"></script> <script src="js/ie/excanvas.js"></script> <![endif]-->
</head>
<body class="some-content-related-div" id="inner-content-div">
<section class="vbox">
PLEASE HELP, How to Encrypt it?
HELP WOULD BE APPRECIATED!
The Javascript code is executed in the browser, i.e. on the client side, which means it must be available not-encrypted on the client side.
The "best" you can do is probably to minify it, which will make it harder to understand it -- and a bit of obfuscation might do too -- even if someone really motivated will still be able to read it.
See for instance the YUI Compressor , which can both minify and obfuscate JS code.
Simple answer: You can't.
The only thing you can do is to uglify everything so it's not easy to read anymore, but anything that is sent to the browser is also theoretically visible to the user.
It is not possible but you can minify it using many compressors which are available online.
You can surely do this. You can disable the inspect element functionality by adding the code snippet below :-
$(document).bind("contextmenu",function(e) {
e.preventDefault();
});
$(document).keydown(function(e){
if(e.which === 123){
return false;
}
});
I am having trouble linking a javascript file to a dynamic website i made through php. My file structure is simply just:
index.php, css folder (which is working correctly), jscript folder (does
not work) and a pages folder (has all my pages)
My pages are simple just
header.php, registrationContent.php and footer.php
My index just includes all 3 php and it works perfectly fine. My problem is no matter what I do, whether inline, or soft coded javascripting it does not work. I am certain my syntax in the javascript is fine, its just the linking.
My header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Safe Drive Website</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/regStyle.css" rel="stylesheet" type="text/css" />
<script src="jscript/javascripts.js" type="text/javascript"></script>
</head>
<body>
<div class="topBar" id="topBar"><input type="Submit" value="Contact Us" class="topNavButton"/></div>
<div id="bannerText"><h1 class="mainHeader">SafeDrive</h1><h2 class="subHeader">Developer's Tool</h2></div>
I close the tags in the footer.php
Javascript files are included directly in your html page.
use the following line in your html page:
<html>
<head>
<script type="text/javascript" src="path/to/your/javascript/file.js"></script>
</head>
...
This is probably uncommon, but I thought of answering my own question because I found a solution, so that anyone else having the same problem could try mine.
Basically, it was loaded, the only problem was that the javascript functions weren't loaded and so to do that, i had to add:
window.onload = myJscriptFunction();
on any tag (body, footer etc. refer to w3schools for that information)
I do hope this helps anyone facing the same problem ^_^