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
}
Related
Okay, this is a really weird one. Unfortunately, I can't show a whole lot of code because I really have no idea where the problem is originating -- However, I can describe the problem. That said, if there' s some code you think is relevant, please ask and I'll post it! So, here goes:
I have an HTML template (found here) that I'm chopping up into Blaze templates for integration into a real estate site that I'm working on using Meteor. The template includes all these external CSS and JavaScript files that I've included by simply leaving the templates as-is and putting all the assets required by the template into /public folder of the Meteor project. The files are loaded via regular <script> and <link> elements embedded in the <head> and near the bottom of the main layout.
Here is what 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">
<title>Real Places</title>
<link rel="icon" href="images/cropped-ms-icon-310x310-32x32.png" sizes="32x32" />
<link rel="icon" href="images/cropped-ms-icon-310x310-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="images/cropped-ms-icon-310x310-180x180.png">
<!-- Google font-->
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Dosis:400,700,600,500' rel='stylesheet' type='text/css'>
<!-- Include the flexslider stylesheet -->
<link href="js/flexslider/flexslider.css" rel="stylesheet">
<!-- Include the lightslider stylesheet -->
<link href="js/lightslider/css/lightslider.min.css" rel="stylesheet">
<!-- Include the owl-carousel stylesheet -->
<link href="js/owl.carousel/owl.carousel.css" rel="stylesheet">
<!-- Include the swipebox stylesheet -->
<link href="js/swipebox/css/swipebox.min.css" rel="stylesheet">
<!-- Include the select2 stylesheet -->
<link href="js/select2/select2.css" rel="stylesheet">
<!-- Include the font-awesome stylesheet -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Include the select2 stylesheet -->
<link href="css/animate.css" rel="stylesheet">
<link href="js/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Main stylesheet -->
<link rel="stylesheet" href="css/main.css"/>
<!-- Default Theme stylesheet -->
<link rel="stylesheet" href="css/theme.css"/>
</head>
Here is what my main layout looks like:
<template name="app_home"> <!-- note this is distinct from site_home, which is a different template -->
<body class="inspiry-slider-two">
{{> page_loader}}
{{> mobile_header}}
{{> site_header}}
{{> Template.dynamic template=main}}
{{> site_footer}}
{{> login_modal}}
{{> real_places_includes}}
</body>
</template>
All of the scripts that the template depends on are inserted via the real_places_includes template call. Here is what this template looks like:
<template name="real_places_includes">
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/flexslider/jquery.flexslider-min.js"></script>
<script src="js/lightslider/js/lightslider.min.js"></script>
<script src="js/select2/select2.min.js"></script>
<script src="js/owl.carousel/owl.carousel.min.js"></script>
<script src="js/swipebox/js/jquery.swipebox.min.js"></script>
<script src="js/jquery.hoverIntent.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/transition.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/modal.js"></script>
<script src="js/meanmenu/jquery.meanmenu.min.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/custom.js"></script>
<!-- .modal -->
<script>
...
// This is a bunch of modal code specific to the template
...
</script>
</template>
This works great when the page first loads, but when I route away from the main page and back, it appears as if assets aren't loading properly when I come back. Here is some relevant routing code:
FlowRouter.route('/', {
name: 'Site.home',
action() {
BlazeLayout.render('app_home', { main: 'site_home' });
}
});
FlowRouter.notFound = {
action() {
BlazeLayout.render('app_home', { main: 'site_not_found' });
}
};
Right now almost all the links in the template don't work since I haven't swapped them out for 'live' {{pathFor 'route'}} calls. So, if I say, click on one of those links, I get the 404 page, as I should. It appears to load just fine. On the 404 page, I added a {{pathFor 'Site.home'}} to navigate the user back to the main page. However, when you click it, all the page elements on the home page (the ones that previously loaded fine!) that depend on JavaScript don't seem to format correctly. I checked the Chrome debugger to find this out. However, all of the assets are still loaded properly according to Chrome's Resource inspector!
Here is what the page looks like initially and after routing back home:
Before routing
After routing
As you can see, the select boxes haven't been rendered properly, the slider at the top of the page below the nav bar also isn't rendering and displays an animated loading graphic... basically anything that depends on JavaScript is kaput.
Here are a couple of screenshots of my debugger highlighting the problem:
Before routing
After routing
This is what that same 'Location' select looks like before and after using my route.
So, for whatever reason, when I hit some route, the code that the route depends on doesn't seem to execute as it should in order to format the page as it was originally HOWEVER if the route is hit when the site first loads, it executes fine... I feel like I need to be firing some global event or something like that manually, but I don't really know what... Or maybe something else entirely. I have tried firing 'load' and 'ready' events manually on the Template.site_home.onRendered callback, but that hasn't worked.
Does anyone have any idea how I can fix this and make the page transition properly?
I am having a problem with the jquery-ui datepicker widget. I have a simple html file where the widget displays and functions properly.
But when I try to incorporate the widget into my project the widget displays, and does function but the days of the month are way at the bottom:
Here is a simple html mockup file that has the same problem:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="javascript/jquery-1.11.2.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
<script type="text/javascript" src="javascript/Chart.js"></script>
<script type="text/javascript" src="javascript/jRate.js"></script>
<script type="text/javascript" src="javascript/coffee-ratings.js"></script>
<script type="text/javascript" src="javascript/coffee-form.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<!-- <link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.css"/> -->
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.structure.min.css"/>
<link rel="stylesheet" type="text/css" href="javascript/jquery-ui-1.11.4.custom/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" href="css/coffee.css"/>
<title>Create New Home Green Coffee Blend</title>
</head>
<body>
<table>
<tr><td>date: </td><td><input type="text" id="datepicker" name="date"/></td></tr>
</table>
</body>
</html>
since it works in the simple test file and not in the main project, it's not an OS thing. I've tried
doing a diff on the jquery-ui code in the test area and the main eclipse javascript folder, they are the same
adding and removing some of the different css files to see if that made a difference.
downloading a new copy of jquery-ui, copied to both folders, still got same behavior
The main app uses a new download of jquery, tried using the version that comes with jquery-ui was the same.
has to be some kind of css conflict. I did not see anything that grabbed me in firebug.
UPDATE
as I said in the comments, when I removed my main project css file, the datepicker rendered correctly. In playing around with my main css file, I was able to get the datepicker to display ok by commenting out the height in this block:
html, h1, div{
height: 100%;
padding: 0;
margin: 0;
}
but I need that in order to get the layout of the page to work.
any ideas?
thanks!
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>
I have an html page, in the head I refer to the js file
<head>
<script src="/queue.js"></script>
</head>
and in the body I have a link
click me
the js file is as follows (using jQuery)
function get_ajax(){
$.get("/queue/get_ajax", function(data){
$("#div_id").html(data);
});
}
clicking on the link doesn't trigger the js function, but reloading the page makes it working.
Is the problem caused by the way I refer to the js file?
It is a page of a rails 4 application.
the full head is like
<head>
<title>XXXX</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery/jquery.mobile-1.2.1.min.css" />
<link rel="stylesheet" href="my.css" />
<script src="/queue.js"></script>
<script src="jquery/jquery-1.8.3.min.js"></script>
<script src="jquery/jquery.mobile-1.2.1.min.js"></script>
</head>
and I've found the resulting html page doesn't have <script src="/queue.js"></script> included, when I inspect the page source code in browser
Try this
Change the order of your js files (library first)
<script src="jquery/jquery-1.8.3.min.js"></script>
<script src="/queue.js"></script>
Then
click me
Instead of the:
click me
Use this:
click me
javascript:void(0) will stop to reload the page.
To prevent page from reloading you could also do this :
click me
function get_ajax(e) {
e.preventDefault();
$.get("/queue/get_ajax", function(data){
$("#div_id").html(data);
});
}
You're including your js file which uses jquery BEFORE you include jquery. So the page doesn't know what you're "talking about" when parsing queue.js.
Include jquery first then queue.js, it should do the trick.
My page takes about a second for the html to load. There are several hidden divs that are set to display:none initially and then accessed by jquery toggle during normal use. However, when the page is loading, those hidden divs flash for about half a second. If the page is hard-refreshed and it takes bouat 3-4 seconds to load, then those divs are displayed for about a second or two. I'm wondering if there's any way to prevent this. I'd rather not have them flash for second if kind of looks bad. A simplified html of the page is this.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site - Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--JQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript' src='javascript/popup.min.js'></script>
</head>
<body>
New Post
<!--Popup container-->
<div id="new-post-box" class="popup" style="width:500px;">
blah
</div>
<script type="text/javascript">/*popup function*/</script>
</body>
</html>
I don't know if that code is necessary, but can that div that display blah be prevented from appearing on the page load. Again it's set to display:none initially but I guess the css loads a little later than the html
Make sure the display:none property is in the css of the file and not in a document.ready() or other script. That should alleviate the issue.
In the case above (I'm guessing you want to hide class='popup') so make the following in CSS
.popup{
display:none;
}