I have finished an assignment for a bed and breakfast website. I completed everything offline, and all was working well; but when I went live the none of the interaction followed. I have an FAQ page with drop down and a fancybox for viewing the rooms.
I tried rearranging my links and scripts, i moved all my JS to separate files and called them all individually. I have checked everything I can think of, but still no luck. How/why would it all work fine offline, but fail when live?
Have been following the website since I began studying. Hopefully the community can help!
Puzzled as to what the issue might be. all links and scripts are accounted for in the appropiate folders.
You can view the website here
I hope I have provided enough information. Let me know if I should include something else.
Cheers, Gav.
JavaScript
$(document).ready(function() {
$(".answer").hide();
$(".question").click(function()
{
$(this).next(".answer").slideToggle(500);
});
});
HTML
<head>
<meta charset="utf-8"/>
<meta name="description" content="Gimme Moore BnB, luxury, affordable accomodation located in Galway. Explore Irelands beautiful West Coast in style and comfort."/>
<link rel="icon" type="image/ico" href="imgs/favicon.ico" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="javascript/jquery-3.0.0.min.js" ></script>
<link rel="stylesheet" href="javascript/fancyBox/source/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="javascript/fancyBox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="javascript/faq.js"></script>
<script type="text/javascript" src="javascript/fancyJava.js"></script>
<title>FAQ</title>
</head>
Check your console via Inspect Element,
The file location cannot be found :), you need to make sure the path is reachable by the server.
Related
I made a webpage that inputs user's feedback using a form. On successful submit I display a thank you message on the same page, for which I'm using javascript.
The code executes well when I put the javascript on the same page. However, when I tried to separate the script onto a file (in a test webserver), it stopped executing.
Can you please help?
Relevant codes are mentioned below:
Head Element
<head>
<meta charset="utf-8" />
<!-- For proper rendering and touch zooming in mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/logo.ico" />
<title><?= htmlspecialchars($title) ?></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="../javascript/submit-logic.js"></script>
</head>
First 2-3 lines of the javascript function:
$(function ()
{
$('form').submit(function (e)
{
e.preventDefault();
Detailed code (HTML, CSS, Javascript) can be found in my codepen (this is working as expected) : http://codepen.io/abbor123/pen/YGwVXg
Javascript folder is placed outside the Public folder and has 755 permission.
Edit 1:
File Tree Screenshot:
Console Error Screenshot: (submit-logic.js is the name of my javascript file. The URL mentioned on hovering over this link is: /javascript/submit-logic.js:1 )
The javascript code page is available at the following URL:
https://gist.github.com/abor123/3193eb399c3f973be453ae9a8fcc0ce5
Move your javascript folder into public_html. As Quentin commented, your server likely isn't set up to serve any files outside public_html.
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>
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 ^_^
I am having some inconsistencies regarding generating the HTML BASE tag in javaScript.
I have a global script of which the relevant parts are below. Every page in my site points to this script relatively. Then in the head section I call the following: generateBase();.
This appears to work well. All my CSS Twitter bootstrap files appear to do their job, the page renders and I've had no complaints from users. Looking at the logs on our server, and the developer console in chrome the it would seem that all links to JavaScript or CSS files are incorrectly relatively addressed.
Below is my header which calls generateBase() in settings.js. Below this is the important bits of settings.js.
Whilst I do not want to give the actual URL away, a flavor of the problem is below. I am expecting http://somewebsite.com/~mysite/js/bootstrap.js as the address for the bootstrap.js file. Howeever chrome reports that it is looking for http://somewebsite.com/~mysite/subfolder/subdir/js/bootstrap.js and gives a 403 even though the generateBase() call points to http://somewebsite.com/~mysite/. What I need is regardless of where each page of my site is located for them to be able to point to the required CSS and Javascripts that app pages need. I want the ability move a page without having to update all the URLS inside it.
Below is the head:
<head>
<script type="text/javascript" src="../../js/settings.js"></script>
<script type="text/javascript">generateBase();</script>
<meta charset="utf-8"></meta>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrapPurple.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/carousel-custom.css" rel="stylesheet">
<link href="css/pageStyle.css" rel="stylesheet">
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript" src="js/equalise.js"></script>
</head>
Settings.js Below:
var baseTestURL = "http://localhost/mySite/";//test local
var baseURL = "http://somewebsite.com/~mysite/";//live
function getBaseURL(){
if(test)
return baseTestURL;
else
return baseURL;
}
function generateBase() {
document.write('<base href="' + getBaseURL() + '" />');
}
PS I am aware of a similarly titled thread here (Link). But the answer was not accepted, nor fully addressed the original question. Hence I ask this. Which is a more fuller explanation of the problem which may or may not be related.