I am using jquery mobile
I have 3 pages and after some clicks between the pages the css are not rendered
LoadCss.js
$(document).on("pageinit",function(event) {
$("#categoriesPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss.css">');
});
$("#wordPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="styles/myCss">');
});
$("#searchPage").on('pageshow', function () {
$('head').append('<link rel="stylesheet" type="text/css" href="scripts/rtl.jquery.mobile-1.4.0.css">');
$('head').append('<link rel="stylesheet" type="text/css" href="myCss">');
});
});
Html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
<meta name="viewport" content="width=device-width"/>
<meta charset="UTF-8">
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/rtl.jquery.mobile-1.4.0.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/angular.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/lodash.js"></script>
<!--player-->
<script type="text/javascript" src="scripts/jquery.jplayer.js"></script>
<script type="text/javascript" src="video.js"></script>
<script type="text/javascript" src="mainController.js"></script>
<script type="text/javascript" src="loadCSS.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as ctrl" ng-init="data=init()">
<div data-role="page" id="firstPage">
... some logic
</div>
<div data-role="page" id="secondPage">
.. sonle logic
</div>
<div data-role="page" id="thirdage">
..........
</div>
</div>
</body>
</html>
I tried also to put the CSS in the header and not on on event but it still didn't work
<link rel="stylesheet" href="scripts/rtl.jquery.mobile-1.4.0.css"/>
<link rel="stylesheet" href="styles/jplayer.pink.flag.min.css" rel="stylesheet">
Please try this method below, using the attribute method. note the order they are applied.
This will give better compatibility for all browsers too (IE has issues):
To test, don't put your JQuery code in the external LoadCSS.js file - put it into the HTML file. It should work every time. When loading from an external JS file, some events do not always trigger when you expect due to the browser caching the file.
As #nishi says, remember to remove the old CSS before adding the new ones.
$('<link>')
.appendTo('head')
.attr({type : 'text/css', rel : 'stylesheet'})
.attr('href', '/styles/myfile.css');
Related
I recently discovered that my upload for an already existing php, Javascript, jQuery, bootstrap application stopped working. I have been trying to resolve this issue for over a week now. On the javascript console I am getting this error
: main.js:604 Uncaught TypeError: $(...).clipresize is not a function. Please any assistance will be of great assistance. I was thinking that the many references to various Jquery files could be causing this error or is it that all browsers have been recently upgraded not to support some snippets being referenced. I am confused.
The application codes are below:
add.php
<!DOCTYPE html>
<html lang="en" class="no-js">
<!--<![endif]--><!-- start: HEAD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>upload</title>
<!-- start: META -->
<meta charset="utf-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible'
content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-
scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="" name="description">
<meta content="" name="author">
<!-- end: META -->
<!-- start: MAIN CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/fonts/style.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/main-responsive.css">
<!--<link rel="stylesheet" href="../css/all.css">-->
<link rel="stylesheet" href="../css/bootstrap-colorpalette.css">
<link rel="stylesheet" href="../css/perfect-scrollbar.css">
<link rel="stylesheet" href="../css/theme_light.css" type="text/css"
id="skin_color">
<link rel="stylesheet" href="../css/print.css" type="text/css"
media="print">
<link href="../css/bootstrap-modal-bs3patch.css" rel="stylesheet"
type="text/css">
<link href="../css/bootstrap-modal.css" rel="stylesheet" type="text/css">
<link href="../css/validate.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-
16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous">
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-hover-dropdown.min.js"></script>
<script src="../js/jquery.blockUI.js"></script>
<script src="../js/jquery.icheck.min.js"></script>
<script src="../js/jquery.mousewheel.js"></script>
<script src="../js/perfect-scrollbar.js"></script>
<script src="../js/less-1.5.0.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/bootstrap-colorpalette.js"></script>
<script src="../js/main.js"></script>
<script src="../js/index.js"></script>
<script src="../js/ajax.js"></script>
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/bootstrap-modalmanager.js"></script>
<script src="../js/validations.js"></script>
<!-- end: MAIN JAVASCRIPTS -->
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script src="../js/jquery.inputlimiter.1.3.1.min.js"></script>
<script src="../js/jquery.autosize.min.js"></script>
<script src="../js/select2.min.js"></script>
<script src="../js/jquery.maskedinput.js"></script>
<script src="../js/jquery.maskMoney.js"></script>
<script src="../js/form-elements.js"></script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
FormElements.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
UIModals.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
Index.init();
});
</script>
.......
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="jquery.form.min.js" type="text/javascript"></script>
<script src="materialize.js" type="text/javascript"></script>
<link rel="stylesheet" href="materialize.css">
.................
<script type="text/javascript">
$(document).ready(function() {
$('#add_app').submit(function(e) {
var value = manage_form();
if(value==false)
{
return false;
}else{
e.preventDefault();
$('#loader-icon').show();
$(this).ajaxSubmit({
//target: '#targetLayer',
beforeSubmit: function() {
$("#progress-bar").width('0%');
},
uploadProgress: function (event, position, total,
percentComplete){
$("#progress-bar").width(percentComplete + '%');
$("#progress-bar").html('<div id="progress-status">' +
percentComplete +' %</div>')
},
success:function (data){
$('#modal1').openModal();
$('#loader-icon').hide();
$("#progress-bar").width('0%');
var res = data.split("~");
$('#mode7').html('<a href="add.php?flag=edit&id='+res[1]+'"
class="btn light-green modal-action modal-close waves-effect waves-
green btn-flat">Okay</a>');
document.getElementById('row_id').value = res[1];
document.getElementById('row1_id').value = res[1];
document.getElementById('package').value = res[0];
//document.getElementById('process_id').html = data;
//$('#mode7').html('<a href="add.php?
flag=edit&id='+res[1]+'" class="btn light-green modal-action modal-close
waves-effect waves-green btn-flat">Okay</a>');
},
resetForm: true
});
return false;
}
});
});
and the "main.js" script that throws the error is below:
//Window Resize Function
var runWIndowResize = function(func, threshold, execAsap) {
//wait until the user is done resizing the window, then execute
$(window).clipresize(function() {
runElementsPosition();
});
};
I finally was able to get my progress bar working and all the assets uploaded to the required folder by removing a mailing library called Php Mailer in my php submit script. The Php mailer library was failing in my application and I discovered that it was throwing up a blank or null output which was causing my application to break by not responding to the submit button. And broken libraries at times are the reason for which many formerly functioning web applications are said to stop functioning. The solution many times will be to update the required libraries or to remove them and find a way to tweak the application to work without those libraries. Thanks
"Make sure window.Snap is defined or supply your own with SnapConstructorProvider.use(MySnap)."
That's what I have when I'm trying to use angular-snap. I followed what they said in github but still didn't work. Can I have some help ? I watched the angular-snap code and I saw a test :
if(angular.isUndefined(S)) {
throw new Error('Snap constructor is not defined. Make sure ' +
'window.Snap is defined or supply your own with ' +
'SnapConstructorProvider.use(MySnap).');
}
When I put a console.log of angular.isUndefined, it returns true but I don't know why.
Here the html :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset=utf-8 />
<title>AO</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/angular-snap.min.css" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<snap-drawer>
<p>I'm a drawer ! I maybe I've got some sweet navigation links.</p>
</snap-drawer>
<snap-content>
<p>Hello! I'm your main content!</p>
</snap-content>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/snap.js"></script>
<script type="text/javascript" src="js/angular-snap.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Javascript code :
var app = angular.module('myApp', ['snap']);
Thanks for help.
You have to include snap.js library to your index.html page
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.js/1.9.3/snap.min.js"></script>
I've gone through the other solutions to this question and none seem to work. I still think there is a problem with the scripts. Here is my :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
<!-- JQuery -->
<script src="js/jquery-1.11.3.js"></script>
<!-- BS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<!-- Fancybox -->
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<script>
$(document).ready(function() {
if(location.hash) {
$(location.hash).click();
}
$(".iframe").fancybox();
});
</script>
</head>
And body:
<a class="iframe" href="https://player.vimeo.com/video/151002965">
<img src="https://vimeo.com/151002965">
</a>
it have some type mistake
<script type="text/javascript" src-"fancybox/jquery.fancybox-1.3.4.pack.js"></script>
please correct it as,
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
try once again it may help you
My pages are not coming by using ng-view in angular.js.When i am typing the url http://localhost:8888/dashboard the pages should come.I am explaining my code below.
view/dashboard.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="adminDashboard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to Odia Doctor Admin Panel</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css' />
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="font-awesome-4.2.0/css/font-awesome.css" type="text/css" /><!-- Font Awesome -->
<link rel="stylesheet" type="text/css" media="all" href="css/daterangepicker-bs3.css" /><!-- Date Range Picker -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" /><!-- Bootstrap -->
<link rel="stylesheet" href="css/jquery-jvectormap.css" type="text/css" /><!-- Vector Map -->
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" /><!-- Carousal -->
<link rel="stylesheet" href="css/style.css" type="text/css" /><!-- Style -->
<link rel="stylesheet" href="css/responsive.css" type="text/css" /><!-- Responsive -->
</head>
<body ng-view>
</body>
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/enscroll.js"></script>
<script type="text/javascript" src="js/grid-filter.js"></script>
<script type="text/javascript" src="app/routes/dashboard-route.js"></script>
<script type="text/javascript" src="app/controller/dashboard-controller.js"></script>
</html>
public/app/routes/dashboard-route.js:
var dashboard=angular.module('adminDashboard',[]);
dashboard.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/dashboard',{
templateUrl:'app/view/dashboard-partial.html',
controller:'dashboard-controller'
});
}
])
public/app/controller/dashboard-controller.js:
var dashboard=angular.module('adminDashboard',[]);
dashboard.controller('dashboard-controller',function($scope){
$.ajax({
type:'GET',
url:"/getAdminData",
success: function(data){
$scope.firstname=data.firstname;
$scope.lastname=data.lastname;
$scope.adminImage=data.image;
},
error: function(data){
console.log(data);
}
});
});
Please help me to resolve this issue so that the template will successfully display.I am also using node.js for client server architecture.
It looks like your dashboad-route.js is using templateUrl:'app/view/dashboard-partial.html', but the name of your HTML file is view/dashboard.html. Change templateUrl to app/view/dashboard.html (or whatever the correct path is) and see if that fixes things.
One problem is that if you use $.ajax to do scope changes angular is unaware of them so you need to use $apply() to tell angular to run digest scycle.
For this reason I suggest you don't use $.ajax and use angular $http
I have downloaded and customized a scroll bar (with text), but I can't integrate it with my website.
Basically this is the code for the scroll bar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery custom scrollbar demo</title>
<!-- Custom scrollbars CSS -->
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.mCustomScrollbar.js"></script>
<script>
(function($){
$(window).load(function(){
$("#content_1").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
})(jQuery);
</script>
</head>
And I need to put in a page with this code
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="all">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.masonry.js"></script>
<script type="text/javascript" src="js/jquery.transform.js"></script>
<script type="text/javascript" src="js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/forms.js"></script>
<script type="text/javascript" src="js/switcher.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/sprites.js"></script>
<script type="text/javascript" src="js/googleMap.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
It gives an error:
$("#content_1").mCustomScrollbar is not a function
You need to add the "jquery.mCustomScrollbar.js" to the page.
And the "jquery.mCustomScrollbar.css" to get the same styles.
Now add at the first line:
<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
You must add the jquery custom scrollbar, before you run the "$("#content_1").mCustomScrollbar()" function, and after the jquery library.
<script src="jquery.mCustomScrollbar.js"></script>