I've been having a lot of trouble using this code from codemyui.com, and I'm not completely sure what to do.
src: https://gist.github.com/CodeMyUI/0ba729244a906a978b20d836c6b5d268
I copied the code for the javascript, html, and css file exactly, so there's no problems there. The main thing I think I messed up on was referencing javascript and the links to cloudflare / jquery. Here are the exact things I put.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial=scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="syle.css">
<title>Experimental Website</title>
</head>
And then, at the end of the body, I put in this code.
<script type="text/javascript" src="script.js"></script>
I'm a bit new to coding so if anyone knows the answer thanks!
Related
I have a lot of scripts and styles in head tag and sometimes they don't load properly. Here's how my head looks like:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="w3.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,500,1,0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">-->
<script src="index.js"></script>
<title>NCA</title>
</head>
However when I reload my page, everything works properly and my js gets applied on my php exactly the way I want...
Can you tell what's going on and why the first time I load my page, my js doesn't work properly?
Note that: I can't do $(document).ready(function () { ... }); as there are many functions in my index.js file and also I want to force the body load after head is loaded... Is there any way to do it?
It is a good practice to put the script tags after the body tag, to ensure that the body its the first thing to load, it doesn't work that way with the css because you want the css to load first
I had a similar problem tha I solved using defer after the script src, example:
<script src="demo_defer.js" defer></script>
https://www.w3schools.com/tags/att_script_defer.asp
I have some scripts under <script> tag, but nothing seems to be functional. What am I doing wrong? Here is the link of CodePen: https://codepen.io/msrumon/pen/EJyYxP. Thanks in advance.
You should replace bootstrap and jquery cdn with following cdn there is something wrong with your cdn thats why it is giving error
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
So, I did some tweaking, and found that removing all the min and slim texts from URLs was what I needed. So this is my final contents inside <head> tag:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Chris Dortch</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.js"></script>
Thanks to all who advised me something. And kudos to #Arfeo for helping me as well.
So I thought it'd be really nice to have all my page elements like navbar, carousel, footer etc externalized and then load them through jQuery into parent page. I'm using Brackets which has live preview that showed all elements and all worked properly there. The problems began when I tested it in real browsers.
I tested in Chrome, Opera and Firefox and only Firefox would show the content loaded through jQuery.
Here's what parent page looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="navLoader"></div>
<div id="carouselLoader"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
And this is jQuery that loads elements:
$(document).ready( function() {
$("#navLoader").load("components/navbar.html");
$("#carouselLoader").load("components/carousel.html");
});
Loading troubles aside, is this a good practice to keep page elements separate? It feels much tidier and easier to work with, but that doesn't mean that it is necessarily good from a technical standpoint.
Thanks in advance.
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 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.