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.
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 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.
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.
I have searched for an answer over and over again, but I can't seem to figure this one out. I want to simply use fancybox to show an image.
This is the first time I use fancybox, so probably someone experienced will notice the problem within seconds.
I've followed the steps given at http://fancyapps.com/fancybox/.
This is the code I have in my head.php file:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
This is copied from the given website.
I'm using the exact samen folder-name "fancybox", so I think that can't be the problem.
In my code where I want to load an image, this is what I have:
echo'<a class="fancybox" rel="group" href="img/products/'.$row['bestandsnaam'].'"><img class="img-thumbnail" src="img/products/'.$row['bestandsnaam'].'" alt=""></a>';
After loading this page, I have this code (also copied from the given website):
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
Yet when I click this image, it won't open in fancybox, but it opens in a new tab instead only showing the image without any fancy styling.
Thanks for your help in advance!
This is most assuredly due to your files not being in the place your links are pointing to.And you should be seeing several errors in the console related to this.
Here is a test page using your code with the urls modified to match the folder layout shown in the image below. As you can see it does work. Therefore, your issue must be due to your urls being incorrect or the files themselves being missing.
This is the code from the test page:
<!doctype html>
<html><head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="jquery.mousewheel-3.0.4.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<?php
$row['bestandsnaam'] = 'images.jpg';
echo'<a class="fancybox" rel="group" href="img/products/'.$row['bestandsnaam'].'"><img class="img-thumbnail" src="img/products/'.$row['bestandsnaam'].'" alt=""></a>';
?>
</body>
</html>
Folder layout:
I am trying to add bootstrap popover on my page.
I have following code
$("#s1").popover({ placement: 'top' }).popover("show");
I have added following files to my page
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
vendor/bootstrap/css/bootstrap.css.map
<link href="vendor/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="vendor/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />
vendor/bootstrap/css/bootstrap-theme.css.map
<link href="vendor/bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.js" type="text/javascript"></script>
It was working fine some time ago. But I am not sure maybe some files I added or removed but now it's not working. Any help will be appreciated. Thanks
You are loading jQuery twice and v1.4.1 is ancient and not supported by bootstrap.js. You need to use at least v 1.11.1