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.
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'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!
I have written a html and javascript files.
Here is my code
HTML:
'''
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Bitter|Ubuntu+Mono' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<ul>
<li>New value: <span class="my-new"></span></li>
</ul>
</div>
</body>
<script src="event.js"></script>
</html>
and here is my javascript code
window.addEventListener('storage', function(e) {
document.querySelector('.my-new').textContent = e.newValue;
});
I write something on another page and want to display it on another page(the code of this page is shown here). Everything is fine, the code is working on Chrome. However, when I open it on safari, it does not display.
Javascript is enabled. I have no idea what is the problem. Please, help
Wich safari are you on? could be that your safari is old and you need to use:
document.getElementsByClassName('.my-new')
or better give it a id and use:
document.getElementById()
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
https://developer.mozilla.org/nl/docs/Web/API/Document/querySelector
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.
I made a angularjs HTML SPA that works fine.In a specific situation I need the power of a HTA. As far as I know there are no restrictions in using a HTA in combination with angular or any other valid HTML. Nevertheless I get an error when using the line
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
in a HTA, even when it's the only script tag in the header.
The error message is: Script error, Code 0, URL http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
I would expect that others have encountered this error before but I can't find anything on stackoverflow.Does anybody recognize this problem? Is there a solution or workaround?
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp" ng-controller="myCtrl">
<head>
<HTA:APPLICATION
APPLICATIONNAME="my app"
SINGLEINSTANCE="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div >
...Do something
</div>
</body>
</html>
You have declared ng-app and ng-controller on HTML element, but its handlers are not defined. Also, as noted in comment, you must elevate implicit IE version to use sane JS engine with X-UA-Compatible meta. Adding those two lines fixes described error:
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp" ng-controller="myCtrl">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<HTA:APPLICATION
APPLICATIONNAME="my app"
SINGLEINSTANCE="yes"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>angular.module('myApp',[]).controller('myCtrl',['$scope',function($scope){}])</script>
</head>
<body>
<div>
...Do something
</div>
</body>
</html>