We Keep Coding

Script works only on homepage

I have problem with adding class after scroll and it's really strange to me and here is why:
I used this script on multiple projects and never had this problem before. When I scroll down on home page, script works perefectly, class "Fix" is added to class "navigacija" and the social icons, menu and languages are fixed at top of the page. But on other pages this is not the case. Class "Fix" isn't added to class "navigacija" after scrolling 145px down. And what's more interesting, I insert very large image on purpose at this page and until page loads that image, my script works (try to scroll down before image is loaded). When page is fully loaded, script doesn't work anymore. I'm working in Joomla, I made my own template, I didn't install any modules, components or plugins. There are only Joomla's standard js files and my scripts that I used before with this script without any problem.
Here is the website I'm working on: http://investfarm.moderanweb.rs/
and here is the script:
$(function() {
var navigacija = $(".navigacija");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});
Please help, thanks in advance.

Try to change $ to jQuery if you are using jQueryNoConflict, and why is it working on homepage, I guess because jQuery library is loaded twice, before and after mootools library, so try this instead, and you should do the same for ToolTip and other stuffs :
jQuery(function() {
var navigacija = $(".navigacija");
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 145) {
navigacija.removeClass('navigacija').addClass("Fix");
} else {
navigacija.removeClass("Fix").addClass('navigacija');
}
});
});

For starters, start cleaning up the errors that show in the console.
You have multiple script tags that points to an HTML page not to a script.
<script type="text/javascript" src="/templates/investfarmimpexmd/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/templates/investfarmimpexmd/js/wow.min.js"></script>
<script src="/js/wow.min.js"></script>
I don't know what you expected those to be loading, but it is not loading a script and is causing errors.
Perhaps these be marked type="text/template" so the browser doesn't try to execute them and you can use them as templates?
And, you have an error on this line of inline Javascript that indicates that jQuery is not loaded properly so you will have to find out why that is:
jQuery(window).on('load', function() {
new JCaption('img.caption');
});
And, you are loading multiple different versions of jQuery in the same page, but not managing how those different versions are used. You can't just load a version of jQuery, issue a jQuery.noConflict() and then load another version of jQuery. The first will be doing nothing at that point so if you needed it for something, it will not be working.

how do I include an external javascript file with bootstrap

I'm trying to figure out how to include an external javascript file while I am using the bootstrap framework. I figure it should be very simple to do but it seems to be giving me fits.
I have scripts/dsc.js that I am trying to load into a <div id="loadedContent"></div>
The line of code in the JSP file is:
<li>View Job (All Runs)</li>
in the external javascript file I have this as my simple javascript:
$(function() {
alert("Hi");
loadlLocation = function(location) {
$("#includedContent").load(location);
};
});
I put this in the head declaration:
<script src="scripts/dsc.js" type="text/javascript"></script>
I know that the src path is correct because the other includes for the bootstrap scripts work just fine. The alert located in the dsc.js is not showing up with is pointing me to it not being included. Now, Bootstrap by default was loaded at the bottom (so I left it there), but I included my javascript file in the head declaration. Is there something special that I have to do to include javascript files when using Bootstrap?

That cant work! You have no access outside the jQuery Wrapper!
var loadlLocation = function(location) {
$(function() {
$("#includedContent").load(location);
});
};

It actually ended up being an ordering problem. Was already solved here by KirKill.
How do i add jquery ui date picker, while already working with bootstrap library?

Javascript Lightbox 2 Issue

I'm quite new at this, so please be thorough with the explanation.
I'm using the Lightbox 2 jQuery file, along with another jQuery file to execute a menu slide animation and a fade animation on my images.
I'm assuming that there is conflict between the two jQuery files, but I'm not sure how to resolve it.
Any advice? I read something about jQuery.noConflict(), but I'm not sure how to implement it, or it if will work.
<script src="../Scripts/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div#ScrollBox img').animate({
opacity:.5
});
$('div#ScrollBox img').hover(function(){
$(this).stop().animate({opacity:1}, 'fast');
}, function(){
$(this).stop().animate({opacity:.5}, 'slow');
});
});
</script>
<!--LIGHTBOX-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />

It looks like you are loading two different jQuery versions (1.10.2 and 2.0.2), which is, I believe, causing the problem. I would recommend removing the 1.10.2 jQuery script, and one of the following (in order of effort, in case you want to try all 3):
-see if your lightbox plugin still works
-find a newer version of the same lightbox
-use a different lightbox, for example fancybox
In any case, make sure that your end result only has one version of jQuery being loaded.

Is there a reason you need both? They should have pretty much the same code so you only need to include one. I would use whichever is the latest.
It would help if you included in your post the lines of code where you explicitly add them so we can see what you are doing.

javascript kills my other script. What can I do in order to isolate it?

One of the scripts added in between the <head> element kills my other javascript. Is their a way to isolate it or not to interfere with other scripts? I need this only for one page, not for the whole site ,etc. frontpage.php. Tried to add the script only to this page, but it dont work, as it seems what it only works than I put in between <head></head> elements.
This is the killer script:
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
<!-- THE ACTIVATION OF THE MINI IMAGE SLIDER PLUGIN -->
jQuery('#first_mini_slider').minislides(
{
width:980,
height:320,
slides:5,
padding:30,
ease:'easeOutQuint',
speed:400,
hidetoolbar:2000,
animtype:1,
mousewheel:'on'
})
<!-- THE ACTIVATION OF THE LIGHTBOX PLUGIN -->
jQuery('.freshlightbox').fhboxer({})
jQuery('.freshlightbox_round').fhboxer({
hover_round:"true"
})
});
</script>

The script you posted puts jQuery into "noConflict" mode, which means that the $ used to refer to jQuery will no longer work. You can still refer to jQuery with jQuery i.e. these two are equivilent:
$('.freshlightbox')
jQuery('.freshlightbox')
If this is what is causing problems with your other scripts you can do one of the following:
don't put jQuery into noConflict mode
change your other scripts to use jQuery instead of $
put the following code around your other scripts:
(function($){
// your code goes here
})(jQuery);
more detail on the last here: https://stackoverflow.com/a/4484317/12744

jQuery conflict in WordPress Plugin - jQuery vs. WordPress Core

I have a custom developed WordPress plugin that is using jQuery 1.4 and for some reason it is conflicting with the core of the WordPress js code... not sure, but I think it's also jQuery, no?
Anyway, I assumed it was this datepicker script I was using called "anytime.js" however, after debugging it turns out that the conflict was still happening after removing the link within the plugin to "anytime.js" but finally resolved when I got rid of the link to jquery.1.4.min.js ...
So, Any ideas for how to avoid the conflict? Is WordPress jQuery-based and that's the cause or is it something else?
Here's the relevant code found within the plugin:
function datepicker_header(){
$theme_dir = get_bloginfo('wpurl').'/wp-content/plugins/postevents/js/';?>
<link rel="stylesheet" type="text/css" href="<?=$theme_dir?>anytime.css" />
<link rel="stylesheet" type="text/css" href="<?=$theme_dir?>ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type='text/javascript'></script>
<script src="<?=$theme_dir?>anytime.js" type='text/javascript'></script>
<script type="text/javascript">
$(function(){
AnyTime.picker( "startdate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
AnyTime.picker( "enddate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
});
</script>
EDIT
I think I may have caused some confusion. I should explain functionality. There is a plugin called "Post Events" that has a jQuery based datepicker. The datepicker relies on jQuery to run. The specific and unusual problem is that while the plugin is active, it causes the new WordPress 3.0 draggable menus to fail from the WP admin panel. All other functionality is working, however, disabling the datepicker does not result in the menus becoming draggable. Instead, only deleting the link to "/libs/jquery/1.4.2..." in the code above causes the menus to become draggable again.
EDIT #2
While I can only indicate one correct answer, both #Matthew as well as #polarblau's corrections below were required to fix the problem!

This code will check to see if jQuery is already loaded... then loads it if it's not already (this code loads from Google code - you can update the URL to a local file if you like).
if(typeof(jQuery)=='undefined'){
var loadjQuery = document.createElement("script");
loadjQuery.setAttribute("type","text/javascript");
loadjQuery.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js");
document.getElementsByTagName("head")[0].appendChild(loadjQuery);
}
I do have to note, however, that this will only work if loaded AFTER another potential instance of jQuery (there's no guarantee that an instance of jQuery won't be loaded later, unless it performs this same check).
This is useful in situations where jQuery is loaded SOMETIMES and you need it to ALWAYS be loaded, no matter what. In that case, place this code at some point after the original would have loaded, but before you use any jQuery functionality.
One more thing: I sometimes WordPress gets fussy with the $ in jQuery code. You can get around this by simply typing out 'jQuery' (or performing a find/replace) instead of $ anywhere the $ is needed.

See this link about properly adding scripts to Wordpress:
http://weblogtoolscollection.com/archives/2010/05/06/adding-scripts-properly-to-wordpress-part-1-wp_enqueue_script/
And yes, Wordpress uses JQuery for some of it's functionality...

Try:
jQuery(function(){
AnyTime.picker( "startdate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
AnyTime.picker( "enddate", { format: "%m-%d-%Y", firstDOW: 1, baseYear: '<?=date('Y')?>', earliest: '<?=date('m-d-Y')?>' } );
});
Generally it's a good practice to wrap your scripts and plugins which are using jQuery into their own scope:
(function($){
//... your plugin, etc. here
})(jQuery);