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.
Related
Got a Problem with my Bootstrap. It seems as if the JS is not working correctly somehow, because even the easiest examples of popovers dont work. (http://jsfiddle.net/weuWk/363/)
This little piece of code which works correctly on JSFiddle, is just creating a Button(w/o hover functionality) if used in my source code.
The Modal-Plugin is actually working, so this should mean that i include the js files in the right way. I will copy it anyway:
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
jQuery needs to be included before bootstrap's javascript, as bootstrap is just jQuery "plugins".
You should Include in this order:
jQuery
Bootstrap
Your Javascript
EDIT: Try this right before the closing body tag
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$('#test').popover();
});
</script>
Also, the console is your friend. Check and make sure there are no errors.
SOLVED:
Solution: > Right order of Includes > fixing errors i got from my js console.
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?
I installed wordpress on and I just want landing page to display, so I modified html templates and sliced them into index.php, header.php, footer.php and sidebar.php.
I put style.css in theme root, and there are some images in img and image directories, some additional css in css directory, and some javascript and jQuery in js directory.
My problem is that WordPress doesn't load any of those files. Only template, and when I click on one of them in source I got error 404.
I tried to change permissions, I tried several ways of including those files, I tried anything I could find on google, and today is my deadline, I got project yesterday, so any help would be much appreciated. Thanks.
You might not added <?php bloginfo('template_directory') ?> in template where you have added js and css.. you must add in URL to get it work..
e.g.
<script type="text/javascript" src="<?php bloginfo('template_directory') ?>/js/jquery.easing.1.3.js"></script>
<link rel="shortcut icon" href="<?php bloginfo('template_directory') ?>/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory') ?>/style.css">
Edit :
If above solution is not working please refer Link
Just took a look at your page. Seems like a simple mistake. Maybe your linked your files with src="js/myjsfile.js". The page redirects this to your root directory and searches there for the specific file.
Use:
src="<?php bloginfo('template_url'); ?>/js/myjsfile.js"
The function adds the current template url to the path.
Got a Problem with my Bootstrap. It seems as if the JS is not working correctly somehow, because even the easiest examples of popovers dont work. (http://jsfiddle.net/weuWk/363/)
This little piece of code which works correctly on JSFiddle, is just creating a Button(w/o hover functionality) if used in my source code.
The Modal-Plugin is actually working, so this should mean that i include the js files in the right way. I will copy it anyway:
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
jQuery needs to be included before bootstrap's javascript, as bootstrap is just jQuery "plugins".
You should Include in this order:
jQuery
Bootstrap
Your Javascript
EDIT: Try this right before the closing body tag
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$('#test').popover();
});
</script>
Also, the console is your friend. Check and make sure there are no errors.
SOLVED:
Solution: > Right order of Includes > fixing errors i got from my js console.
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.