I'm using some jQuery to have some sliding panels. It's for a portfolio website I'm building for myself. I have a panel sliding in that contains thumb nails that I want to link to images to be displayed inside of a Lightbox using JavaScript.
When all the scripts are inside my head, the sliding panels work but the Lightbox does not.
If I remove the jQuery script link from my head in order to "temporarily disable the sliding panels the Lightbox works properly. I'm assuming that I have some sort conflict, but I am new to jQuery and JavaScript so I don't even know where to begin.
Heres my code inside my head tags.
<script type="text/javascript" src="js2/prototype.js"></script>
<script type="text/javascript" src="js2/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js2/lightbox.js"></script>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js1/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js1/slidepanels.js"></script>
<link rel="stylesheet" type="text/css" href="css.css" />
You should include JQuery before Prototype, and then switch it into NoConflict mode.
After this, load Prototype / Scriptaculous and see if that works.
pfff why do u use jquery+prototype? they do almost the same things. better to find jquery lightbox and remove prototype. or use prototype, but not both.
Related
In the console it says that I'm missing the slick.woff, ajax-loader.gif and slick.tff.
So I've found the CDN links for all these 3, but I have no idea how to implement them in my code (or in what kind of tag).
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.ttf
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.woff
The resources you've mentioned that are failing to load are referenced as relative imports in Slick's stylesheets.
Make sure that you've included these stylesheets (the first code block below) correctly, as per the Slick documentation:
Example using jsDelivr
Just add a link to the css file in your <head>:
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick-theme.css"/>
Then, before your closing tag add:
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick#1.8.1/slick/slick.min.js"></script>
I just started working with bootstrap and came across an issue when trying to use "Collapse".
I am 99% sure I have the Javascript linked correctly because the reference to the css also works. I have also tried to replace it with the CDN
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
but it still didn't work.
As I was placing my code into JSfiddle to share on here, I tested it, and it worked from there and I can't figure out why.
Here is the JSfiddle
To find the collapse button, just shrink your browser's size until you see the 3 bars in the top right. That is the button that is supposed to display the rest of the nav when clicked.
Other notes: I am using codeigniter, which is why you will see some PHP in this code.
Any help would be appreciated. Thank you.
Include jquery.min.js before bootstrap.min.js
<head>
<link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.css'); ?>" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="<?php echo base_url('assets/js/bootstrap.js'); ?>" ></script> <!--Boostrap Javascript -->
</head>
Bootstrap JS requires JQuery to work and thus you need to include it before bootstrap.min.js in your script tag.
I'd like to use swipeleft/swiperight to toggle my sidebar but apparently using these imports
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
don't work so much. If i put the jquery.min.js before the 2 jquery.mobile the toggle doesnt work.. But if i put it like this the swipeleft/swiperight does not work. I want to call semantic ui's sidebar on swipeleft.
It looks like you have some things mixed up.
jquery.min.js and jquery-1.11.1.min.js may be the same thing, although there might be version differences. Try eliminating one.
For the last two days I've been trying to understand why I can't build a jQuery Dialog. I am trying to integrate it into another project but I couldn't so I created a new test html page for the sole purpose of building a simple one that works. I've tried multiple configurations and nothing works. I've attempted it on js fiddle and it works (on an older version, mind) leading me to assume I've messed up my headers.
<script src="../jQuery/jquery-ui-1.11.0.custom/external/jquery/jquery.js"></script>
<script src="..jQuery/jquery-ui-1.11.0.custom/jquery-ui.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.css">
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.theme.css">
<link rel="stylesheet" href="../jQuery/jquery-ui-1.11.0.custom/jquery-ui.structure.css">
test.js contains jquery code as seen in js fiddle link above. Am I missing anything? What am I doing wrong?
Here is the code that includes the jquery reference:
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet prefetch" href="popup.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
When I comment out the jquery reference the page loads much quicker (albeit without the necessary functionality). I have also tried storing the file locally but that did not help the issue.
First of all, consider using jQuery locally. It could speed up page dramatically. However, if this doesn't help, use remote sources. But,
don't link jQuery directly from their side! Use jQuery CDN instead:
http://codeorigin.jquery.com/,
jQuery Download Page -- see "Using jQuery with a CDN" section.
An alternative, though requiring a lot of work, would be dropping jQuery in favor of ZeptoJS, which gives you nearly exactly the same syntax, as jQuery, and most of its core functionallity, with 1/4 (25%) of code size. And it loads helly fast!