I download template and i put it into my laravel project and it works fine.
I make my master layout filed and ith works on index route or on route with one slash example: localhot:8080/kategorija .
But when i visit route with wildcard (localhot:8080/kategorija/1/edit or localhot:8080/kategorija/create ) my imports ( css, javascript ) does not work.
i resolve problem with css adding asset code:
<link rel="stylesheet" href="{{ URL::asset('css/AdminLTE.css') }}">
but still i cant resolve problem with javascripts
My head code with imports
<head>
<meta charset="UTF-8">
<title>{{ isset($naslov) ? $naslov : 'Administracija' }}</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="//code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{ URL::asset('css/AdminLTE.css') }}">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
Related
I am running into some strange issue where per page load multiple css/js resources are loading twice. Cache is cleared. not sure what is going on? happening on my dev environment and live environment.
When you view the source of the page obviously they are only on their once - however the network tab is showing them load over and over and with the app.js file being a monster it causes latency issues obviously.
anyone else run into this issue or know what could be causing this?
Headsection:
<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<!-- Google Font -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Title</title>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="{{ asset('css/sticky-footer-navbar.css') }}" rel="stylesheet">
<link href="{{ asset('css/custom.css') }}" rel="stylesheet">
<link href="{{ asset('css/jPushMenu.css') }}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
FooterJS:
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Cheers
Citti
I am new to jQuery, and even newer to Dreamweaver CC. I am trying to use the animated version of toggleClass that is available to jQuery-ui, but I cannot load jQuery ui for some reason. Dreamweaver already has some jQuery elements which might be interfering, but I cannot be sure.
index.html
<!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>Stargazer</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery-ui.min.css" type="text/css">
<!-- <link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/caesar-dressing:n4:default;lobster-two:n4:default;chicle:n4:default;henny-penny:n4:default;immi-five-o-five:n4:default.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui.min.js" type="text/javascript"></script>
<script src="jQueryAssets/testing.js" type="text/javascript"></script>
</head>
The last 2 lines are where I attempt to load jQuery-ui as well as my custom sheet where I write all my jQuery. When I attempt to test if jQuery is loading using if (jQuery-ui) {alert('loaded')} I receive no alert.
I have tried several similar loading methods but nothing seems to work. Any help is greatly appreciated.
Try wrapping your test in a doc ready function"
$(document).ready(function(){
if (jQuery-ui) {
alert('loaded')
}
});
Or try
$(document).ready(function(){
$.ui.version
});
I have a responsive site designed with twitter bootstrap that works fine on desktop, but not so much on mobile (tested on 2 different Android devices in Chrome and Samsung browser, and an iPhone in safari).
What works - Mobile
If I type in the url with an additional page (other than index.html), i.e. seniorcareplacementchoices.com/learn.html it loads just fine.
What doesn't work - Mobile
If I type in the url itself - seniorcareplacementchoices.com (with or without www or http://) it loads for about .2 secs then goes to www.google.com.
seniorcareplacementchoices.com/index.html does not work either.
The only real difference between index.html and the others such as partners.html is that I added a bootstrap carousel to the index.html.
I am using site44 for hosting.
I think the problem is either:
a) The carousel is not responsive and messes up the mobile interpretation of the site
b) Something to do with google's new ssl rule (haven't looked much into it)
Any ideas?
NOTE: Yes I do have the line
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CODE
index.html
<head>
<title>Senior Care Choices</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
<link href="css/neat-purple.css" rel="stylesheet" media="screen" id="neat-stylesheet">
<link href="libs/lightbox/css/lightbox.css" rel="stylesheet" type="text/css">
<link rel="icon"
type="image/ico"
href="../img/favicon.ico">
<!--New Stylesheets and scripts for CAROUSEL -->
<link href="../../dist/css/bootstrap.css" rel="stylesheet">
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- Custom styles for this template -->
<link href="./css/carousel.css" rel="stylesheet">
<script src="./js/carousel.js"></script>
<!--end new stylesheets for carousel -->
<!-- Use google font -->
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic,700italic|Lustria" rel="stylesheet" type="text/css" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
learn.html
<head>
<title>Senior Care Choices</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="css/neat-purple.css" rel="stylesheet" media="screen" id="neat-stylesheet">
<link href="libs/lightbox/css/lightbox.css" rel="stylesheet" type="text/css">
<link rel="icon"
type="image/ico"
href="../img/favicon.ico">
<!-- Use google font -->
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic,700italic|Lustria" rel="stylesheet" type="text/css" />
</head>
this would be your culprit:
(function() {
'use strict';
var isMobile = function () {
if(window.innerWidth <= 800 && window.innerHeight <= 600) {
return true;
} else {
return false;
}
};
var redirectToMobile = function () {
if (isMobile()) {
window.location.href = "http://google.com";
}
};
redirectToMobile();
})();
Embedded in your "Confidence: START" area. Looks like a copy paste fail ;)
Curiously enough if you have a large (5"+) phone, this doesn't fire. My Nexus 5 didn't trigger this condition because the innerHeight was 640.
My project is using a combination of Bootstrap and Codeigniter. I cannot access functions within external javascript files. Using firebug in Firefox I can see that these external scripts get loaded. External css files work fine. Please note that jquery works but I suspect that it is because of the jquery.js file that is included in the Bootstrap/Codeigniter framework in directory assets/js/jquery.js
Here is my header code within every Codeigniter View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/icons/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/icons/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/icons/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/img/icons/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="/img/icons/favicon.png">
<title>Sample Website</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="/css/theme.css" rel="stylesheet">
<link href="/css/carousel.css" rel="stylesheet">
<!-- styles custom to our site -->
<link href="/css/style.css" rel="stylesheet">
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
</head>
Try to add base_url before url:
<script type="text/javascript" src="<?= base_url();?>js/jquery.cookie.js"></script>
I'm stuck here for 2 days now, and I really hope you can help me.
I'm trying to use this theme I bougth on wrapbootstrap ( https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR ) with backboneJS and requireJS
So, basically, I have this file structure for the exemple :
index.html
app/
|___ js/
|____ main.js
assets/
|___ js
|___ ace.min.js
|___ ace-extra.min.js
|___ ace-elements.min.js
|___ bootstrap.min.js
|___ jquery.min.js
libs
|___ require
|___ require.js
So, when I use this basic template :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blank Page - Ace Admin</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--basic styles-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<!--page specific plugin styles-->
<!--fonts-->
<link rel="stylesheet" href="assets/css/ace-fonts.css" />
<!--ace styles-->
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!--inline styles related to this page-->
<!--ace settings handler-->
<script src="assets/js/ace-extra.min.js"></script>
</head>
<body>
<!--basic scripts-->
<script src='assets/js/jquery-2.0.3.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
<!--page specific plugin scripts-->
<!--ace scripts-->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
</body>
</html>
No errors, all work perfectly. Then, I want, to load all the script
ace-extra.min.js
jquery.min.js
bootstrap.min.js
ace-elements.min.js
ace.min.js
In this order, juste like the template.
So, I add this line in the head
<script async data-main="app/main" src="libs/require/require.js"></script>
and created the main.js like this :
require.config({
// The shim config allows us to configure dependencies for
// scripts that do not call define() to register a module
shim: {
bootstrap: {
deps: ['jquery']
},
ace: {
deps: ['aceElement']
},
aceElement: {
deps: ['aceExtra', 'bootstrap', 'jquery']
}
},
paths: {
jquery: '../assets/js/uncompressed/jquery-2.0.3',
bootstrap: '../assets/js/uncompressed/bootstrap',
ace: '../assets/js/uncompressed/ace',
aceExtra: '../assets/js/uncompressed/ace-extra',
aceElement: '../assets/js/uncompressed/ace-elements'
}
});
require([
'jquery',
'bootstrap',
'ace'
], function() {
});
and I remove all the scripts, so I have this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blank Page - Ace Admin</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--basic styles-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<!--page specific plugin styles-->
<!--fonts-->
<link rel="stylesheet" href="assets/css/ace-fonts.css" />
<!--ace styles-->
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!--inline styles related to this page-->
<!--ace settings handler-->
<script async data-main="app/main" src="libs/require/require.js"></script>
</head>
<body>
...
</body>
</html>
but here, I have an error
Uncaught TypeError: Object #<Object> has no method 'handle_side_menu'
comes from here :
jQuery(function($) {
//ace.click_event defined in ace-elements.js
ace.handle_side_menu(jQuery);
ace.enable_search_ahead(jQuery);
ace.general_things(jQuery);//and settings
ace.widget_boxes(jQuery);
/**
//make sidebar scrollbar when it is fixed and some parts of it is out of view
//>> you should include jquery-ui and slimscroll javascript files in your file
//>> you can call this function when sidebar is clicked to be fixed
$('.nav-list').slimScroll({
height: '400px',
distance:0,
size : '6px'
});
*/
});
despite of this generated code, (Chrome dev tool) :
<html lang="en"><head>
<meta charset="utf-8">
<title>Blank Page - Ace Admin</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--basic styles-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<!--page specific plugin styles-->
<!--fonts-->
<link rel="stylesheet" href="assets/css/ace-fonts.css">
<!--ace styles-->
<link rel="stylesheet" href="assets/css/ace.min.css">
<link rel="stylesheet" href="assets/css/ace-responsive.min.css">
<link rel="stylesheet" href="assets/css/ace-skins.min.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!--inline styles related to this page-->
<!--ace settings handler-->
<script async="" data-main="app/main" src="libs/require/require.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="app/main.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="app/../assets/js/uncompressed/jquery-2.0.3.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="bootstrap" src="app/../assets/js/uncompressed/bootstrap.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="aceExtra" src="app/../assets/js/uncompressed/ace-extra.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="aceElement" src="app/../assets/js/uncompressed/ace-elements.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="ace" src="app/../assets/js/uncompressed/ace.js">
</script></head>
<body style=""></body></html>
So, I really don't understand, I would be really happy if anyone have an answer.
Thansk !
Kai23
So, it turns out it's the order in which you are doing things in the ace.min.js file. To fix it, just move your second jQuery function which contains the ace.handle_side_menu to the bottom of your ace.min.js file. It is a bit of a coincidence, but here's why.
When require loads your main.js file, it starts asynchronously loading your js files. This gives the rest of the page and DOM a chance to load (which is precisely why we like require.js). By the time your ace.min.js file gets loaded, the window has already signalled the onReady event. So, in your ace file where you have
jQuery(function($) {
ace.handle_side_menu(jQuery);
jQuery immediately realizes the DOM is ready and immediately calls the function you're passing in (the function($) part). This function then starts to run before handle_side_menu gets attached to the ace object. If you use the Chrome debugger tools and place breakpoints on both places where you have handle_side_menu, you'll see that the one inside the jQuery callback gets hit first.
dude, it's a coincidence.
I used the same theme for my project, you can look into my html template:
https://github.com/pjyong/chenxi/blob/master/src/ChenXi/MainBundle/Resources/views/Default/index.html.twig
and my main JS file:
https://github.com/pjyong/chenxi/blob/master/web/app/js/main.js
If you have more questions, I will answer them.