.load page within linked javascript and css files - javascript

Description:
I have a main page with header, footer, etc. The content (a div within body) of this page is changing depending on where you click(menu items). The content loaded are different pages within javascript and css files.
Problem: javascript and css files of the pages loaded don't work. I have to include ALL the page in order to make it works.
For example in the next code, javascript included in status.jsp don't work:
$(document).ready(initialize);
function initialize(){
// status.jsp has javascript and css linked
$("#content").load("pages/status.jsp #information");
}
However, this works, but it is not what i want:
$(document).ready(initialize);
function initialize(){
// status.jsp has javascript and css linked
$("#content").load("pages/status.jsp");
}
The result of the last code is a page similar to this:
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<title>MainPage</title>
</head>
<body>
<div id="content>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/styles.css" type="text/css">
<title>Status</title>
<div id=statusBox">
information
</div>
<script type="text/javascript" src="js/status.js"></script>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

Related

Where to load script tags in Vue?

I am new to Vue.js and I am simply trying to load script tags to the page, like jQuery for example. I tried adding the scripts to the end of the body in the index.html file, but they come back as 404s.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<div id="app"></div>
<!-- JQUERY -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/tipr.min.js"></script>
</body>
</html>
Try moving them to the /static/ folder &/or prefixing the paths with ./ or /

Make DIV load CSS file

For the program I'm writing I have a main navigation page where the user get landed after he / she log into the system.
On this screen I use 2 DIV's one div is for the navigation bar second one is used as an iFrame.
I'm using w3.css library to create the navigation bar but this actually mess up my CSS main CSS file when I load the target file in the second div. But it works fine if I use an iFrame which I really don't like to do.
If I could load my CSS file when the div loads the target link file the problem will be solved.
So my problem is how to load the CSS file in to the div when the external file loads.
This is my HTML:
<html>
<head>
<title>Time Sheet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="../../CSS/w3.css">
<link rel="stylesheet" type="text/css" href="../../CSS/main.css">
<!-- Java Scripts -->
<script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jScripts/navBar.js"></script>
<script language="JavaScript" type="text/javascript" src="../../jScripts/fileLoader.js"></script>
</head>
<body>
<div class="w3-bar w3-light-gray w3-card-4" style="z-index: 991">
Home
Link 1
Link 2
Link 3
</div>
<div id="My-container">
<!-- All pages load here -->
</div>
</body>
</html>
My NavBar JavaScript:
$(document).ready(function(){
$('#main').click(function () {
$('#My-container').load('listUser.php');
})
});
File loader JavaScript:
$(document).ready(function(){
if($("#my-container").size>0){
if (document.createStyleSheet){
document.createStyleSheet('../../CSS/main.css');
}
else {
$("head").append($("<link rel='stylesheet' href='../../CSS/main.css' type='text/css' media='screen' />"));
}
}
});
Above file loader function is not mine I found it on a site and tried to use it but when I do console throws an error saying "Size" is not a function. When I change it to length the error goes away but code doesn't work.
If any one asks why don't you just copy paste the nav bar to all the files my answer is I'm lazy.
Any way please show me the light.
It seems you want to check if that specific dom exist or not. For that you need to use length. Also the dom id seems to be My-container but not my-container.
You can try the following
if($("#My-container").length>0){
// rest of the code
}

Can a libgdx web application work along with web components technology?

I'm working with libgdx 1.9.2 and gwt 2.6.1.
After the GWT-compilation of my java app, I get a JS script (html.nocache.js) that I can include in my html page, and visualisate in a web browser (inside a div, here it's "embed-html"). That part is working nicely.
Here's the code:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="html/html.nocache.js"></script>
</head>
<body>
<div id="embed-html"></div>
</body>
</html>
My next goal is to use web components, and more precisely custom elements, to have a simple tag <my-app></my-app> in any web page to get my application.
my index.html:
<!doctype html>
<html>
<head>
<title>my-gdx-game</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="webcomponents.js/webcomponents.js"></script>
<link rel="import" href="component.html">
</head>
<body>
<my-app></my-app>
</body>
</html>
my component.html:
<template id="template">
<div id="embed-html"></div>
<link href="styles.css" rel="stylesheet" type="text/css">
</template>
<script>
var helloDoc = document._currentScript.ownerDocument;
var myApp = document.registerElement('my-app', {
prototype: Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var root = this.createShadowRoot();
var template = helloDoc.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
}
}
})
});
</script>
<script type="text/javascript" src="html/html.nocache.js"></script>
But the JS script generated by GWT-compilation has some document.write(...) inside; so all that is included is my empty div, my style sheet correctly loaded, and warnings: "Warning: A call to document.write() from an asynchronously-loaded external script was ignored". Since it is generated, I don't think I can avoid using these document.write().
If I put the <script type="text/javascript" src="html/html.nocache.js"></script> in the head of index.html (where it was before I tried using webcomponents), the app is not added inside the div, as it should, but under (the div and style sheet are included as expected).
And if I put the script inside the template, nothing happens.
So I am wondering if there is a way to have a GWT application working with web components, or if I should search for another way to easily include my application into external websites.
(If you wonder the reasons why I want to do so, it's because I want clients to be able to add my app easily on their own website, with only an import and a tag, the same way I could import a YouTube video or a Google map.)

Hiding third party script from particular page

i have a HTML template in which i have used a third party javascript code. this particular code provides an chat option.i have added this script in my header.html so that it gets displayed in all the pages. however i dont want this to display in my login page.i want this to be displayed only after logging in.
How do i hide this from a particular page(here login.html)?
Header.html
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.min.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body data-ng-app="app" id="app" class="app" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl" data-ng-class=" {'layout-boxed': admin.layout === 'boxed' } ">
<section data-ng-include=" 'views/index.html' " id="header" class="header-container" data-ng-class=" {'header-fixed': admin.fixedHeader} " data-ng-controller="HeaderCtrl" data-ng-intro-options="introOptions" data-ng-intro-method="startIntro" data-ng-intro-autostart="true"></section>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="scripts/vendor.js"></script>
<script src="scripts/jquery.leanModal.min.js"></script>
<script src="scripts/ui.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/product_listing.js"></script>
<script src="scripts/angular-cookies.js"></script>
<script id="SettingsScriptTag">
**Third Party script Goes here**
</script>
</body>
</html>
The above header.html is included in all the other templates. hense the thrid party script runs in login page too. I need to hide this in login page.
If you're using jQuery (which... I think you are...?)
$(function () {
if (window.location.pathname !== '/login.html') {
// Third-party script goes here
}
});
If Using jquery .remove() is used to remove the html elements. So you can write this script on document ready of the login page.
$(document).ready(function(){
$( "#SettingsScriptTag" ).remove();
});

Linking multiple pages to single index.php page using PHP 'Include'

Im just practicing some things in PHP and have come across a problem.
I am linking multiple pages to single index.php page using PHP 'Include' function ( as i have read it makes a large site much more manageable and easily up-dateable'.
I have created external CSS files (3 in total, one for the navigation, page styling and wrapper content) and have a few external JS files which have all been linked to a PHP document named head.php. (below is the head.php contents)
The main page which the server will show first will be 'index.php' so for this page i am linking all the other segments which will all fit together to create the single page. (below is the index.php contents)
My problem is that in-between both the head and footer php include lines i have created a div named 'wrapper' (styles are already applied to an external CSS sheet named 'style.css' which is linked in head.php) (please see bottom for style.css contents) I would presume that when i view index.php in my browser (i am using XAMPP) that is should show the wrapper on the page, however i can not see the wrapper and i just continue to see the navigation bar only, i find this strange as i can use <h1> and <p> tags in index.php which are externally styled by the php included head.php page.
Please take a look at my code below for all the pages mentioned, I'm not sure what i am doing wrong here. Thank you
BELOW IS HEAD.PHP:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="css/navigation.css">
<link rel="stylesheet" type="text/css" href="css/sitestyle.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
<script type="text/javascript" src="responsee.js"></script>
<link rel="stylesheet" type="text/css" href="engine1//style.css" media="screen" />
<script type="text/javascript" src="engine1//jquery.js"></script>
<script type="text/javascript" src="drop.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<title>MC SMM | Home</title>
</HEAD>
BELOW IS STYLE.CSS:
#wrapepr {
background-color:black;
width:1000px;
height:1000px;
margin:0 auto;
}
BELOW IS INDEX.PHP:
<?php include('segments/head.php'); ?>
<?php include('segments/facebookjs.php'); ?>
<?php include('segments/homenav.php'); ?>
<div id="wrapper"></div>
<?php include('segments/headbottom.php'); ?>
You have miss spelt your wrapper ID name in your stylesheet:
"#wrapepr"
Should become:
#wrapper

Categories