JscrollPane not loading into div properly - javascript

I'm having an issue with jscrollpane loading into a div using the following function:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
The above code is on the index page and I'm calling up the "shopping page" as you can see above.
I have four other links that call up pages, one page has a slideshow and I managed to load that one into the div simply by eliminating the Jquery repository link, but this page doesn't want to know.
On the "shopping" page I have the following script, I've searched most of the web and also on here, without success, but nobody else's solutions have worked for me.
What am I doing wrong?:
<script type="text/javascript" src="./js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="./js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="./css/jquery.jscrollpane.mod.css" rel="stylesheet" media="all" />
<script>
$(function()
{
$('.horizontal-only').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
});

Ok...
After some digging and trial and error, I've found the solution to my problem, hunting on the web and stack, I found something that worked and I thought for all those that are complete noobs, like me, in javascript and Jquery I'd post my findings.
Current call up on index page:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
I added the following to my index page (this is the page that is calling up the other pages)
to the link of a specific page add:
$.ajaxSetup({async:false});
then add the jScrollPane function after your call up e.g:
$('#stage').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
So altogether it looks like this:
$(document).ready(function() {
$("#shopping").click(function(event){
$('#stage').hide();
//--added the async code here--//
$.ajaxSetup({async:false});
$('#stage').load('pages/shopping.html', {}, function() { $(this).fadeIn(800); });
//--moved the jscrollPane from the page I was calling to the index page code here--//
$('#stage').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
);
This seems to be working for me at the moment, now I just need to re-edit some css and it's good to go.

I've found another workaround:
I've added the following code to the index.html:
$(function()
{
var api = $('.horizontal-only').jScrollPane(
{
showArrows: true,
arrowScrollOnHover: true,
horizontalArrowPositions: 'split',
hijackInternalLinks: false
}
).data('jsp');
$('#shopping').bind(
'click',
function()
{
api.getContentPane().load(
'pages/shopping.html',
function()
{
api.reinitialise();
}
);
return false;
}
);
});
I also made the jsp load in a separate div layer, as it was causing some styling conflicts and i can't determine where the issue is but this works.
What I also had to do is hide the new div layer from the other calls
so basically:
$(#scroller).hide();
Thanks, I'm sure this isn't the best way, but as i've only had one reply on this issue, which was a question, think I've done rather well for a noob.

Related

Why there is an error showing when I try to load the slider in the browser?

I have save the code in slider.js. But when in the browser the slider is not working. It is showing the error
Uncaught ReferenceError: $ is not defined.
But I'm seeing the result of the console.log("ready") inside the $(document).ready(...) handler here:
Jquery code
$( document ).ready(function() {
console.log('ready'); // <===== I'm seeing this
$('.logo-carousel').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1000,
arrows: true,
dots: false,
pauseOnHover: false,
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 4
}
}, {
breakpoint: 520,
settings: {
slidesToShow: 2
}
}]
});
});
Error
Uncaught ReferenceError: $ is not defined
at Slider.js:1:3
Assuming the code you've shown is at global scope, I can only think of three possibilities:
You've included Sliders.js before including jQuery and the code you've shown in the question.
You're using an iframe and loading Slider.js into it, but jQuery isn't loaded in that iframe; your code is in the main document (or a different iframe) where jQuery is loaded, so it has $ but the iframe with Slider.js doesn't. Remember an iframe is a completely different window from the window containing it. If you want to use jQuery in that iframe, you have to load it in that iframe.
(This seems unlikely) Code running after your code is doing this:
$.noConflict(); // This part is optional but likely to be there
delete $; // This causes the specific error you're seeing
#1 is the most likely scenario, followed by #2; #3 is possible but unlikely.
I won't do an example of #2 because it's awkward with Stack Snippets, but here's an example of #1:
<script><!-- This is Slider.js -->
$(document).on("click", ".slider", function() {
// ...
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(() => {
console.log("ready");
});
</script>
And here's an example of #3:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(() => {
console.log("ready1");
});
</script>
<script>
$.noConflict(); // This is optional but likely to be there
delete $; // This causes the specific error you're seeing
</script>
<script>
$(document).ready(() => {
console.log("ready2");
});
</script>
Notice we see ready1 but get an error instead of seeing ready2.
If the code following your code only did $.noConflict(), you'd still get an error, but it would be a different one ("$ is not a function). So something is actually removing the $ property from the window object (via delete $ or similar).
Side note: $(document).ready(someFunction) has been deprecated for some time now, details here. Use $(someFunction) instead if you really need to ask jQuery to wait for the DOMContentLoaded event, or better yet use modules (they won't be run until the main parsing of the HTML is completely), or defer on your script tag, or put your script tag at the very end of the document. (But there are times you don't control the script tag, and in those situations $(someFunction) can be useful.)

Datatables not correctly working through JQuery-UI Tabs

I seem to have a problem with the way jQuery-UI tabs and Datatables work together. I want to create a table that is scrollable and has information from a database.
When I enter the page for the first time it looks like this.
As you can see it looks like a normal table instead of one from Datatables.
When I reload the page again it looks like this.
This is roughly how I want it to look upon first load.
It also seems that it only works for the first table on the page.
I tested this multiple times on multiple pages with the same results.
I'm assuming this problem is because of jQuery-UI seeing as on another page it work perfectly and when I load in the page without jQuery-UI it works aswell.
This is the code:
//jQuery-UI
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
//DataTables
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollX": true,
"scrollCollapse": true,
"paging": false
});
});
</script>
The HTML is just a standard table loaded in through a while loop from a database.
To decrease loading times I've set up jQuery-UI in a way that it loads seperate files when a tab is clicked so that no unnecessary things are loaded at the start.
Any piece of help would be much appreciated thanks!
EDIT: Wanted to make a JSFiddle showcasing my problems but it basically works perfect there so I'm guessing the problem comes from the fact that I load it as seperate pages.
JSFiddle
I would advise the following code, expanding upon my comment.
$(function() {
$("#loading-voertuigen").show();
if ($(window).width() <= 1600) {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollX": true,
"scrollCollapse": true,
"paging": false
});
} else {
$('table.scrollable').DataTable({
"scrollY": "240px",
"scrollCollapse": true,
"paging": false
});
}
$(window).resize(function() {
location.reload();
});
});
You were using $(document).ready() and it is not needed. The use of $(function(){}) already causes the jQuery to execute after the page is ready.
If need further help, please edit your post and include a more complete example.

JS plug-in breaks other scripts when not required on page

I'm using a plug-in for my responsive navigation (http://responsive-nav.com). The plug-in works great, the problem I'm having is there is not navigation on every page. When this is the case I've noticed other javascript doesn't load and I get an error in reference to "responsive-nav.js":
Uncaught Error: The nav element you are trying to select doesn't exist
Here's how I load the script in the main.js file.
$(function(){
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
});;
The file is called on each page (/js/responsive-nav.js) but removing it doesn't resolve the issue, commenting out the code I've typed above does - so I'm guessing it's something to do with that?
Hope someone can help, cheers!
After speaking with the author of the plug-in he advised I just wrap the script in an 'if statement'.
Here's what we ending up using:
$(function(){
if ($(".site-nav__list").length) {
var navigation = responsiveNav(".site-nav__list", {
customToggle: "#site-nav__toggle",
open: function(){
$("#site-nav__toggle").addClass('open');
},
close: function(){
$("#site-nav__toggle").removeClass('open');
}
});
}
});
Simple. Works like a charm :)

Tell me what is wrong with this js code as I don't see it

So I'm using the http://tooltipsy.com/ jquery plugin and have trouble getting my animation to work.
My code;
<script src="{T_THEME_PATH}/js/jquery.tipsy.min.js"></script>
<script>
$(function() {
$("a").tipsy({
show: function (e, $el) {
$el.fadeIn(500);
},
content: '<em>Look ma</em>, my tooltip has <strong>HTML</strong>',
delay: 200
});
$("img").tipsy({
delay: 200,
show: function (e, $el) {
$el.fadeIn(500);
},
content: '<em>Look ma</em>, my tooltip has <strong>HTML</strong>'
});
// $("element").tipsy({gravity: jQuery.fn.tipsy.autoNS}); //old code remains, keep this intact. As a reference because this code works.
});
</script>
http://pastebin.com/0iXeV7Zi
I've loaded jquery in the footer and put said the code below the jquery being loaded. So no head code present but the .css file of tooltipsy ofc.
Google chrome shows no errors and the tooltip does show but without any sort of animation I defined.
The fadeIn animation doesn't seem to work and I don't know why, do you?

Multiple jQuery scripts conflict

I have a problem with some jQuery scripts. They work separately(when usage of another is commented) but when I want them to work together it stops working completely. I read about .noConflict() method. However, I'm quite new to js and jQ and I'm not sure if it is what I'm looking for. What is more, even it is the problem, I'm probably unable to use noConflict() correctly. I would be really glad if anybody coud help me.
Part of my header:
<script src="jquery-1.11.0.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
<!--<script src="jquery.carouFredSel-6.2.1.js" type="text/javascript"></script>-->
The usage of scripts:
<script type="text/javascript">
$(document).ready(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
/* COMMENTED Carousel
var images = jQuery("#images").carouFredSel({
direction : "up",
items: {
visible: 1,
width: 824,
height: 320
},
scroll : {
onBefore: function() {
var act_pos = images.triggerHandler("currentPosition");
jQuery("#scroller-active").animate(
{"top": (act_pos*80)+"px" },
300,
"swing"
);
}
}
});
jQuery(".konstrukcje").mouseover(function() {
jQuery("#images").trigger("slideTo",0);
})
jQuery(".dachy").mouseover(function() {
jQuery("#images").trigger("slideTo",1);
})
jQuery(".budowlane").mouseover(function() {
jQuery("#images").trigger("slideTo",2);
})
jQuery(".projekt").mouseover(function() {
jQuery("#images").trigger("slideTo",3);
})*/
});
</script>
Code above works, but only the lavaLamp part. When I remove the comments it will all crash.
You can see samples here:
http://www.w3schools.com/jquery/jquery_noconflict.asp
There are different ways to use it, I have just used this way of doing it:
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
That way means that you then use jq instead of what you used before.
I find this to seperate it more, yet if you are changing someone elses code, it might be time consuming to edit all the code. Then the other ways might be better.
This might or might not affect your problem, as there might be many reasons you have issues. Maybe you have something with preventDefault that triggers? Or maybe something else :-) It's time to get to know mr. console and have a cup of coffee with him.

Categories

Resources