My cordova app is not worthy any more.
It shows up angular expressions on application run.
shows white screen at times at launch
I think it might be issue of JS dependencies.
I posting my JS dependencies order
<!-- JS dependencies (order matters!) -->
<script src="scripts/platformOverrides.js" type="text/javascript"></script>
<script src="lib/angular/angular.js" type="text/javascript"></script>
<script src="lib/onsen/js/onsenui.js" type="text/javascript"></script>
<script src="lib/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD5sCjiaGLF8i8zul_W4GBsnMBY9mZTdB4&libraries=places"></script>
<!-- Cordova reference -->
<script src="cordova.js"></script>
<script src="scripts/index.js" type="text/javascript"></script>
<script type="text/javascript" src="bower_components/ngCordova/dist/ng-cordova.js"></script>
<!-- CSS dependencies -->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
<!-- <link rel="stylesheet" type="text/css" href="lib/pace.theme.css"> -->
<!-- CSP support mode (required for Windows Universal apps) -->
<link rel="stylesheet" href="lib/angular/angular-csp.css" />
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="animate.css" />
screenshot of issue
Is this because of wrong order of the dependencies or internet problems or anything I'm missing or I could do to work it perfectly
This might be a little late, but this can be solved by doing 2 things. 1.) Increase the time the splash screen is shown via the config.xml file to about 5000 ms. 2.) In the ons.ready() function, add: navigator.splashscreen.hide();
This shows the splashscreen, hiding the white screen as your libraries load, and then hides it when the app is ready. This solved my problem.
Related
<link rel="stylesheet" href="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">
<link rel="stylesheet" href="mileTracker.css">
<script src="jQuery/jquery-3.6.0.min.js"></script>
<script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css"></script>
<script src="mileTracker.js"></script>
<header data-role="header" data-theme="b">
<h1>Tracker</h1>
</header>
This is code that I have and I just can't seem to get the theme to be applied to the html code.
I have found a solution that allows for the set-up to work, the css links were added after the jQuery mobile css link.
Also when using the jQuery links, the mobile css file was placed first followed by the 2 javascript files, first the jquery.min.js then the jquery.mobile.1.4.5.min.js.
With the js files they were added after the css and in the order listed below.
Also I used a local deployment.
<link rel="stylesheet" type="text/css"
href="jQuery/jquery.mobile-1.4.5/demos/css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.css">
<script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.5/demos/js/jquery.mobile-1.4.5.min.js"></script>
<script src="jQuery/jquery-ui-1.13.1/jquery-ui-1.13.1/jquery-ui.min.js"></script>
I am working on a new project on React JS. I decide to use a HTML & CSS free theme template for my project. I found the two best theme templates for the frontend (visible to the public) and the admin panel (CMS). I add both the css and js script link to my React project. When I start the project, the design of the frontend becomes buggy. I cannot get the actual design of the template. It has completely changed my design. When I commented the admin theme css & js, then i get actual output of the frontend and vice versa. If I activate css & js for both the frontend and the admin then the design get buggy. Can anyone please suggest me how to solve this issue?
index.html
Frontend CSS
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/socicon/css/socicon.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/slick/slick.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/unicore/css/style.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/dropdown-menu/style.light.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/mob-slider/style.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/frontend/assets/mob/css/mbr-additional.css" type="text/css" />
Frontend JS
<script src="%PUBLIC_URL%/frontend/assets/web/assets/jquery/jquery.min.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/smooth-scroll/SmoothScroll.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/bootstrap-carousel-swipe/bootstrap-carousel-swipe.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/slick/slick.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/unicore/js/script.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/dropdown-menu/script.js"></script>
<script src="%PUBLIC_URL%/frontend/assets/formoid/formoid.min.js"></script>
Backend CSS
<link rel="stylesheet" href="%PUBLIC_URL%/backend/assets/vendors/mdi/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/backend/assets/vendors/css/vendor.bundle.base.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/backend/assets/css/style.css" />
Backend JS
<script src="%PUBLIC_URL%/backend/assets/vendors/js/vendor.bundle.base.js"></script>
<script src="%PUBLIC_URL%/backend/assets/vendors/chart.js/Chart.min.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/off-canvas.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/hoverable-collapse.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/misc.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/dashboard.js"></script>
<script src="%PUBLIC_URL%/backend/assets/js/todolist.js"></script>
Can anyone provide me the solution for this? How can i manage both template theme for my single project?
I have been looking at different forums that include this error and trying different things that I have read to get rid of this error. I have tried removing any duplicate libraries, and changing the order in which they appear, but nothing has seemed to worked for me. I am using a bootstrap theme
scrollreveal.min.js:1 Uncaught TypeError: Cannot set property 'sequence' of
undefined
at e.reveal (scrollreveal.min.js:1)
at jquery.js:53
at jquery.js:75
I am not sure what to do to get rid of it, any help would be great. Thanks in advance.
Below is what I have in the head section
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic'
rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/creative.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
And this is what I have at the end of the body.
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/3.3.6/scrollreveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/creative.min.js"></script>
<script src="js/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
The error is not "self explanatory"...
But the line where the error fired, line #75 of jquery.js (A custom JS file, not the library), was containing a closure syntax: })(jQuery); that was not needed.
Replacing it by }); fixed the issue for that line.
Then, the same issue fired on 3 other lines... But after those lines also fixed, the page worked as expected without error.
"Closure" itself is already well explained in this SO answer.
So I'm pretty new to web design and Dreamweaver, but I've managed to put something fairly solid together. The only problem I'm having is that my two main javascripts for images - one slider and one lightbox gallery - are canceling each other out. If one works, the other cannot. Here's the code at the head. Any advice?
<!-- Style sheets themes for the Nivo Slider -->
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/pascal/pascal.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider/themes/orman/orman.css" type="text/css" media="screen" />
<!-- Main Styles Sheet for the Primento theme -->
<link rel="stylesheet" href="styles.css">
<!-- Google Webfonts - Other fonts can be installed - http://www.google.com/webfonts -->
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700' rel='stylesheet' type='text/css'>
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/smooth-scroll.js"></script>
<!--script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script-->
<!--script src="js/jquery.validate.js" type="text/javascript"></script-->
<!-- Nivo Slider -->
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
Try removing the second instance of jquery. That is likely re-initializing the jQuery object, causing the page to fail.
You only need one instance of jQuery on the page. It looks like the plugins you are using are older (i.e. pre-1.9), so you should try an older version of jQuery. If 1.7.x doesn't work, try a 1.8.x version. Version 1.9 removes several features that may prevent the plugins from working.
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>