I got a little problem with jQuery here.
Basically, I include my pages in the index.php page. However, SOME jQuery is not working, while others are okay. All scripts used in all pages are loaded in the tag of index.php.
<head>
<meta charset="utf-8">
<title>Shy Shop</title>
<!--js-->
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/ddsmoothmenu.js"></script>
<script type="text/javascript" src="js/jquery.flexslider.js"></script>
<script type="text/javascript" src="js/jquery.elastislide.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript" src="js/light_box.js"></script>
<script type="text/javascript" src="js/search.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){jQuery(".inline").colorbox({inline:true, width:"50%"});});
</script>
<!--end js-->
<!-- Mobile Specific Metas ================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS ================================================== -->
<link rel="shortcut icon" href="Images/icons/favicon.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/colors.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/ddsmoothmenu.css"/>
<link rel="stylesheet" href="css/elastislide.css"/>
<link rel="stylesheet" href="css/home_flexslider.css"/>
<link rel="stylesheet" href="css/light_box.css"/>
<link href="../../../html5shiv.googlecode.com/svn/trunk/html5.js">
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
And this is how I include the rest of the files in index.php.
<?php
if(!isset($_REQUEST['pg']))
{
$pg = "home";
}
else
$pg = $_REQUEST['pg'];
if($pg=="shopguide")
include("faqs.php");
elseif($pg=="aboutus")
include("aboutus.php");
elseif($pg=="contactus")
include("contactus.php");
elseif($pg=="home")
include("home.php");
elseif($pg=="shop")
include("shop.php");
elseif($pg=="sitemap")
include("sitemap.php");
elseif($pg=="product")
include("product.php");
elseif($pg=="shoppingcart")
include("shoppingcart.php");
elseif($pg=="profile")
include("account.php");
elseif($pg=="orders")
include("orders.php");
elseif($pg=="wishlist")
include("mywishlist.php");
elseif($pg=="changepassword")
include("changepassword.php");
elseif($pg=="newmessage")
include("newmessage.php");
elseif($pg=="receivedmessages")
include("receivedmessages.php");
elseif($pg=="ordersummary")
include("ordersummary.php");
elseif($pg=="test")
include("test.php");
elseif($pg=="viewmessage")
include("viewmessage.php");
elseif($pg=="register")
include("register.php");
elseif($pg=="login")
include("login.php");
elseif($pg=="reseller")
include("reseller.php");
elseif($pg=="myaccount")
include("orders.php");
?>
An example of a working js in the included files is the jcarousel.min.js.
The accordion.js and light_box.js does not work with the included files, but they work when they are used in a single file.
Console says: Uncaught TypeError: undefined is not a function.
This issue may happen when you have same plugin/jquery files included
in other php files too. e.g. in index.php, you have some JS files, you
are including other PHP files which may also have same JS again. In
such cases, jQuery behaves like this. To check this, just check the
view source of generated html.
Related
I am not sure if it is possible or not.
I have a bunch of javascript files, all are dependent on each other.
I want to bundle all of them but I can't add require and module.exports in every file since they are so many files.
So my question is, can I bundle all these files while keeping the dependencies intact.
This is how my HTML looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="ja">
<head>
<meta http-equiv="Expires" content="3600">
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>3D BAT</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/w2ui-1.5.rc1.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/jquery-ui.min.css">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/jspanel.css" rel="stylesheet" type="text/css">
<script src="js/lib/three.js"></script>
<script src="js/lib/controls/MapControls.js"></script>
<script type="text/javascript" src="js/lib/renderer/CSS2DRenderer.js"></script>
<script src="js/lib/jquery-2.2.4.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>
<script src="js/lib/raphael.js"></script>
<script src="js/lib/Toast.js"></script>
<script type="text/javascript" src="js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/lib/WebGL.js"></script>
<link href="css/main.css" rel="stylesheet">
<link href="css/label_tool.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="wrapper">
<div id="label-tool-wrapper"></div>
<script src="js/lib/controls/threex.keyboardstate.js"></script>
<script src="js/lib/SceneUtils.js"></script>
<script src="js/lib/PCDLoader.js"></script>
<script src="js/lib/OBJLoader.js"></script>
<script src="js/lib/controls/OrbitControls.js"></script>
<script src="js/lib/controls/TransformControls.js"></script>
<script src='js/lib/controls/PointerLockControls.js'></script>
<script src='js/lib/controls/KeyboardState.js'></script>
<script src="js/lib/controls/threex.keyboardstate.js"></script>
<script src="js/lib/Detector.js"></script>
<script src="js/lib/stats.min.js"></script>
<script src='js/lib/dat.gui.js'></script>
<script src='js/lib/Projector.js'></script>
<script type="text/javascript" src="node_modules/jszip/dist/jszip.js"></script>
<script type="text/javascript" src="node_modules/file-saver/dist/FileSaver.js"></script>
<script src="js/lib/html2canvas.js?ver=1.0"></script>
<script src="js/lib/base64-binary.js?ver=1.0"></script>
<script src="js/util/math.js?ver=1.0"></script>
<script src='js/util/classesBoundingBox.js?ver=1.0'></script>
<script src='js/util/boundingbox.js?ver=1.0'></script>
<script src='js/base_label_tool.js?ver=1.0'></script>
<script src='js/pcd_label_tool.js?ver=1.0'></script>
<script src="js/image_label_tool.js?ver=1.0"></script>
<script src='js/util/ajax_wrapper.js?ver=1.0'></script>
<script src='js/lib/w2ui-1.5.rc1.min.js?ver=1.0'></script>
<script src="node_modules/dragscroll/dragscroll.js"></script>
</div>
<div class="frame-selector">
<div class="current">1/900</div>
<div class="list-wrapper">
<div class="frame-selector__frames"></div>
</div>
</div>
<img id="left-btn" src="assets/textures/left.png" onClick="labelTool.previousFrame()" alt="left"/>
<img id="right-btn" src="assets/textures/right.png" onClick="labelTool.nextFrame()" alt="right"/>
<div id="time-elapsed"></div>
<ul class="toasts"></ul>
</body>
<script type="text/javascript">
labelTool.start();
</script>
</html>
in the above code script tag order is important since files are dependent on each other.
Can I bundle all these files into one without making any change into the current js files?
If the JS is written to certain standards, you can just combine them into to a single file with simple concatenation (e.g. with the standard unix tool [cat].)
This is quite fragile though, since semicolon insertion rules can break things when you just stick two JS files together.
e.g. if you have a couple of files that use IIFEs to scope variables, then putting them next to each other will cause the parenthesis around the second to act as a function call containing arguments for the first.
So you need a tool to do this. Last time I had cause to build a system in JS that didn't use Node.js or ES6 modules I used UglifyJS which can take care of that problem (while also shrinking the file size of the JS).
uglifyjs input.js other-input.js more-input.js --output combined.js -c
I check my website using gtmetrix and my website is recommended for fewer HTTP requests and reduce DNS lookups. So I must to combining combining many external Javascript scripts into one
In my layout default like this
For css :
<link rel="shortcut icon" href="/content/assets/img/favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="/content/libs/materialize/css/materialize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="/content/assets/style/style.min.css?v=#currentVersion">
<link rel="stylesheet" href="/content/assets/style/style-responsive.min.css?v=#currentVersion">
<link rel="stylesheet" href="/content/assets/style/custom-form-materialize.css">
<link href="/Content/dist/social-share/sharetastic.css" rel="stylesheet" />
<link rel="stylesheet" href="/content/assets/style/happy.min.css?v=#currentVersion">
For js :
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="/Content/dist/social-share/sharetastic.min.js"></script>
<script src="/Content/assets/script/jquery.twbsPagination.min.js"></script>
<script src="/Content/libs/materialize/js/materialize.min.js?v=#currentVersion"></script>
<script src="/Content/assets/script/select2.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.6/js/swiper.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="/Content/assets/script/rendercomponent.js"></script>
<script type="text/javascript" src="/Content/assets/script/script.min.js?v=#currentVersion"></script>
<script src="/Content/assets/script/share-content.js?v=#currentVersion"></script>
<script src="/Content/assets/script/jcanvas.min.js" type="text/javascript"></script>
<script src="/Content/assets/script/happy.min.js?v=#currentVersion" type="text/javascript"></script>
How can I combining many external Javascript scripts into one?
If combining them into one won't impact the website? JS and CSS websites are not problematic?
Success Man's comment is the correct answer. Webpack or another bundler will allow you to combine js files and reduce the number of requests.
Because Vaadin provides Custom Layouts I thought about using a Bootstrap Theme like Unify for layouting and styling the application with HTML + CSS. The CustomLayout should "connect" my HTML templates with Vaadin.
I have a working HTML template (with JS & CSS file includes) that just work local in the browser. Is it possible to use Vaadin this way?
My CustomLayout would look like this:
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Web Fonts -->
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin'>
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-default.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css" id="style_color">
<link rel="stylesheet" href="assets/css/theme-skins/dark.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
...
<!-- JS Global Compulsory -->
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="assets/plugins/smoothScroll.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="assets/js/custom.js"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
});
</script>
</body>
I have searched the other questions but I do not get anything that really solves my problem. I downloaded a template that I want to use as a small portfolio for myself. On my local server everything works fine. But when I upload it to a live server something goes wrong. I believe the problem is with the Bootstrap.js or bootstrap-theme.css
Some functions are not running and dont display at all. Such as the loading bar when you open the site, backgrounds, some images and arrows.
I have done the following.
Checked all the paths to make sure they are correct.
Made sure that it is not a cache issue.
Tried to run it in private view (still the same problem)
Checked the firefox error log but all scripts seem to load.
Here is the template demo - http://designova.net/presence/index01.html
Here is my live version - codethis.co.za
Here is the code in the head and the js at the bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code This - Beautiful Website Design and More</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://www.codethis.co.za/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="http://www.codethis.co.za/bootstrap/js/bootstrap.js" ></script>
<script src="http://www.codethis.co.za/javascripts/jquery.easing.1.3.js" type="text/javascript"></script>
<!-- Standard Favicon-->
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<!-- Standard iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="57x57" href="images/touchicons/apple-touch-icon-57-precomposed" />
<!-- Retina iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="114x114" href="assets/touchicons/apple-touch-icon-114-precomposed" />
<!-- Standard iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="72x72" href="assets/touchicons/apple-touch-icon-72-precomposed" />
<!-- Retina iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="144x144" href="assets/touchicons/apple-touch-icon-144-precomposed" />
<!-- Bootstrap CSS Files -->
<link href="http://www.codethis.co.za/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="http://www.codethis.co.za/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
<!-- Custom Fonts Setup via Font-face CSS3 -->
<link href="http://www.codethis.co.za/fonts/fonts.css" rel="stylesheet">
<!-- CSS files for plugins -->
<link href="http://www.codethis.co.za/stylesheets/pace.preloader.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/animate.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/owl.carousel.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/owl.theme.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/magnific-popup.css" rel="stylesheet" >
<link href="http://www.codethis.co.za/stylesheets/jquery.tweet.css" rel="stylesheet"/>
<link href="http://www.codethis.co.za/stylesheets/foliohover.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/fancymenu.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/intro.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/pricing.css" rel="stylesheet">
<!-- Main Template Styles -->
<link href="stylesheets/main.css" type="text/css" rel="stylesheet">
<!-- Main Template Responsive Styles -->
<link href="stylesheets/main-responsive.css" type="text/css" rel="stylesheet">
<!-- Main Template Retina Optimizaton Rules -->
<link href="stylesheets/main-retina.css" type="text/css" rel="stylesheet">
<!-- LESS stylesheet for managing color presets -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- LESS JS engine-->
<script src="http://www.codethis.co.za/less/less-1.5.0.min.js" type="text/css"></script>
<script src="http://www.codethis.co.za/javascripts/modernizr.custom.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<![endif]-->
<style>
.full-height{
height: 100%;
}
</style>
</head>
and at the bottom
<!-- JS Plugins -->
<script src="javascripts/pace.min.js"></script>
<script src="javascripts/retina.js"></script>
<script src="javascripts/device.min.js"></script>
<script src="javascripts/owl.carousel.js"></script>
<script src="javascripts/waypoints.min.js"></script>
<script src="javascripts/jquery.tweet.js"></script>
<script src="javascripts/okvideo.js"></script>
<script src="javascripts/jquery.mixitup.js"></script>
<script src="javascripts/flexslider.js" ></script>
<script src="javascripts/jquery.magnific-popup.js"></script>
<script src="javascripts/smooth-scroll.js"></script>
<script src="javascripts/form-validation.js"></script>
<script src="javascripts/classie.js"></script>
<script src="javascripts/fancymenu-rollin.js"></script>
<!-- Scroll Animations Setup -->
<script src="javascripts/wow.js"></script>
<script src="javascripts/animations-init.js"></script>
<!-- Custom Scripts Setup -->
<script src="javascripts/carousel-init.js" ></script>
<script src="javascripts/portfolio.js"></script>
<script src="javascripts/intro.js"></script>
<script src="javascripts/main.js"></script>
Please could someone help me with what is going on here
Your page is riddled with 404 errors, which means either (1) your paths are not correct, or (2) the files do not exist on the server.
Something to look at would be whether you are using relative paths or absolute paths for your JS, CSS, and image assets. Remember:
paths that start with a / will resolve to http://codethis.co.za/<path>
paths that do not start with a / will resolve relative to whatever the current path is
Perhaps you are missing a subfolder in your paths?
First of all you seem to have a problem loading some of your fonts (cross-origin) It should not be linked with your problem, but you should fix it.
You also have a :
Uncaught ReferenceError: $ is not defined
which could be relative to something with your JQuery, and this could explain a lot if you're using it heavily.
From what I see in network I don't have any missing images.
Thibaut
I am pretty new to jQuery and I have never been using fancybox before. I tried to install it, but it doesn't work. I used several test scripts I found, but still nothing. Here is my code:
In head I have following (Paths to all files are correct):
<script type="text/javascript" src="http://localhost/scripts/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="http://localhost/scripts/jquery-2.1.1.js" type="text/javascript"></script>
And in my test document:
<script type='text/javascript'>
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
});
</script>
<a id="single_image" title="" href=""><img src="http://localhost/images/something.png" alt="" /></a>
But when I click on the image, nothing happens.
You are declaring your jquery script last. That include should be first, preceeded by any other script that uses jquery. nothing to do if it's on localhost or not.
<script src="http://localhost/scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript" src="http://localhost/scripts/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="http://localhost/scripts/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
I have been having the same issue when your jquery-2.1.1.js. Once I used fancybox's provided jquery-1.10.1.js it worked however I got curious and tried jquery-1.9.1.js and my document stopped rendering the results.
I don't know if it helps or you figured it out already but I thought I would add what I found.