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.
Related
So you call on Jquery to make the three --- lines and it stacks the menu. Well is there a way to not call all of jquery.min.js. It breaks some older code of jquery UI. Which part of the code only helps break down the menu and may possibly not break the JQuery UI?
I have tried Jquery version 2.1.0 and 1.12.2 and 1.10.0, but they all break the Jquery ui.
I also tried the Jquery compatibility mode, but it makes it so that the menu doesn't work in Bootstrap.
<script type="text/javascript">
var jQuery_1_12_2 = $.noConflict(true);
</script>
I even found something that looked like a work around, but didn't seem to help:
https://github.com/frappe/jquery-ui-bootstrap
Here are the Scripts that are ran:
<script type="text/javascript" src="/style/js/jquery.form-2.47.js"></script>
<script type="text/javascript" src="../bootstrap/jquery/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/style/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/style/js/jquery.ui.autocomplete.js"></script>
<script src="/style/js/jquery-ui-1.8.1.dialog.min.js"></script>
My menu is basically this one, but the rest of the site works with JQuery UI:
http://www.bootply.com/soljohnston777/KZXTGaVsgE#
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.
When I link to foundation.js and foundation.offcanvas.js separately i stead of using the minified, combined version the off canvas menu is not working.
Do I have to call the offcanvas additionally to $().foundation(); ?
You only need to call the foundation() method once after all the Foundation scripts have been loaded.
Taken from their docs:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
If Foundation's Off Canvas still isn't working, it's more likely due to the markup being slightly incorrect than the JS being weird. Make sure you follow the examples exactly.
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.