Develop Reference

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?

JscrollPane not loading into div properly

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.

How to make a slider autoscroll using jquery

http://405pixels.gowerpowered.com
I have the slider, and I have been trying to figure out how to make the homepage autoslide?
I tried using firebug to locate the files... Located some .js files that contain some information about the homepage slider... but all the changes and everything I make seem to not be working...
This is a free template I found called BigFoot. I am really interested into learning about how this javascript would work that is why I downloaded in the first place... to learn from the template... If you could point me in the right direction that would be awesome.
Thanks,
Alex

You'll need to replace the actual photo swapping code with whatever you use but the rest will swap out each picture every 5 seconds.
$(document).ready(function() {
var next = $('#right-button');
next.click(function() {
$('#current-picture').fadeOut('fast');
$('#next-picture').fadeIn('fast');
...whatever code you use for this.
});
var scroll = setInterval(function() {
next.trigger("click");
if(picture is last) {
clearInterval(scroll);
}
}, 5000);
});

you are using flex slider so you can use the code below.
jQuery(window).load(function() {
jQuery('.flexslider').flexslider( {
pauseOnHover: true,
slideshow: false,
controlsContainer: ".flex-container"
} );
} );
actually this it the param you need to pass to make slider autostart
slideshow: false,
Let me know if you run into any other issues.

jQuery with Google maps

I'd like to use jQuery with Google maps. I'm trying to replicate this example. Below is given the code that I'm using. The problem is that the map does not appear on my web-page. It's just blank. What's the case?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.map.js"></script>
<div id="fragment-4">
<script>
$(document).ready(function(){
$('#map_canvas').gmap().bind('init', function(evt, map) {
$('#map_canvas').gmap('microformat', '.vevent', function(result, item, index) {
var clone = $(item).clone().addClass('ui-dialog-vevent');
clone.append('<div id="streetview{0}" class="streetview"></div>'.replace('{0}', index));
var lat = result.location[0].geo[0].latitude['value-title'];
var lng = result.location[0].geo[0].longitude['value-title'];
$('#map_canvas').gmap('addMarker', {
'bounds':true,
'position': new google.maps.LatLng(lat, lng),
'title': result.summary,
},
function(map, marker) {
$(item).find('.summary').click( function() {
$(marker).triggerEvent('click');
return false;
});
}).click(function() {
map.panTo( $(this).get(0).getPosition());
$(clone).dialog({
'modal': true,
'width': 530,
'title': result.summary,
'resizable': false,
'draggable': false
});
$('#map_canvas').gmap('displayStreetView', 'streetview{0}'.replace('{0}', index), {
'position': $(this).get(0).getPosition()
});
});
});
});
});
</script>
<div id="map_canvas">
</div>
</div>

Use pure JavaScript for this.
JQUERY is not the best choice in this case.
I have developed a huge API to overlay vector blueprints over Google Maps and I can tell you that even though it might be a bit more to type it is way better to just use JavaScript.
Do not over complicate things and as M1ke said always keep your console open when working with JavaScript.

Assuming that's your entire code it could be a number of things:
Have you got that script file on line 3 in the correct folder (check your console)
You're targeting #map_canvas but that element doesn't exist.
Having copied the script you need to pass options to the gmap() method or it throws an error.
Best thing would be to check your JavaScript console (Ctrl + Shift + J in Chrome, download Firebug if you're using Firefox) to see the error trace and fix from there.
Also including your script inside a div isn't necessary - the only use for giving the script awareness of a calling element would be if you were using document write, and as you're using jQuery I doubt this will become the case.