We Keep Coding

Javascript files loaded but calls not working

I will be using the same header on two sites, one is already up and running with no issues, the second I can't seem to get my Javascript to work despite it being the exact same code as on the site that does work?
Here is the scripts and the Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.2.1-packed.js" type="text/javascript"></script>
<script src="js/tinynav.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel').carouFredSel({
pagination : "#sliderpagi",
scroll : {
duration : 1000,
pauseOnHover : true
}
});
$('.mobilemenu').tinyNav();
});
</script>
I have checked all the files are where they should be to rule that out or before it is suggested.
Can anyone shed some light on this? Been fighting with it the best part of the day. I'd love to get it working but also understand why the same code works on a different site?
Also to note - I have the same HTML for the Carousel and tinynav as i do on the working site.

Conflict between mototools and javascript both not running

I have a conflict between JavaScript and Mototools, I know there is something like NoConflict script but I do not fully understand how can I make it work I will leave the code of both dependencies so that It can be explained also I think It can be very useful for people who have encounter the same conflict, If one works the other one won't. you can see it I made it partially work but not totally www.softglobal.com.mx. Thank you
<script type="text/javascript" src="jquery-1.2.2.pack.js" ></script>
<script type='text/javascript' src="
http://static.tumblr.com/5bbaxlr/2tlmqkzma/mototools.js">
</script>
<script type="text/javascript">
//<![CDATA[
var hoveroptions = {
animout: 'JAMenuhover_fade',
animin: 'JAMenuhover_fade',
duration: 400,
transition: Fx.Transitions.linear};
window.addEvent ('domready', function (){
if ($('ja-mainnav')) {
var items = $$('#ja-mainnav li a');
new JAMenuhover (items,hoveroptions );
}
});
//]]>
</script>
This make on mouse over a drag effect which looks fantastic but then I got this which was my previous question
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4/jquery.min.js">
</script>
<script type="text/javascript">
//<![CDATA[
jQuery(function() {
var request = window.location.hash;
if(request == '#page-2') {
jQuery('.page.current').removeClass('current');
jQuery('.page').eq(1).addClass('current');
}
jQuery('div ul li').click(function(){
var speed = 600;
var i = $(this).index();
jQuery('.page.current').animate({opacity: 0, marginTop:80},speed,function(){
jQuery(this).removeClass('current');
jQuery('.page').eq(i).css('marginTop',30).animate({opacity:1,marginTop:
50},speed).addClass('current');
});
});
});
//]]>
</script>

I believe you mean MooTools and jQuery not MoToTools and JavaScript.
You can technically combine these 2 libraries together and make them work. This is however not recommended, since they both do similar things and including them on page side by side brings a lot of overhead, resulting in slow page rendering.
That being said, this is an example how you can use them both:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<p>jQuery sets this paragraph's color to red but MooTools sets the border color.</p>
<script>
//no conflict jquery
jQuery.noConflict();
//jquery stuff
(function($) {
$('p').css('color','#ff0000');
})(jQuery);
//moo stuff
window.addEvent('domready',function() {
$$('p').setStyle('border','1px solid #fc0');
});
</script>
NOTE: the versions of jQuery and MooTools displayed in your question are quite outdated and it's unlikely they will work in newer browsers without many glitches and hiccups, therefore I used the newest versions of both libraries in my answer
Working jsFiddle here: http://jsfiddle.net/9zLQV/
Source for the example code: http://davidwalsh.name/jquery-mootools

Getting two jquery scripts to work together like they're supposed to

For the love of God I need help! I'm trying to get Caroufredsel and fancybox to work together like they do here:
http://caroufredsel.frebsite.nl/examples/carousel-lightbox-tooltip.php
...bu I can only get them working independently. I don't really know javascript so I'm failing hard :(
Here is where I've tried implementing it:
http://www.meanbeangames.com/
Only Caroufredsel is working at this point. Fancybox works if I remove all Caroufredsel code.

You are referencing jQuery library twice at line 15 and 189 (view source), this caused all reference to fancybox plugin added earlier to be lost (as jQuery variable is re-defined the second time you include jQuery). Remove the
<script type="text/javascript" src="js/jquery.js"></script>
at line 189 and you should be set.

First of all:
You are loading jQuery (the Javascript library) twice. Once in your <head> section (<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>) and once in before your closing </body> tag (<script type="text/javascript" src="js/jquery.js"></script>). Remove the last and update the first one to the most recent version of jQuery, like so:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Second:
It might be better to give better structure to your script: or you load all of them in your head, or all of them before the closing </body> tag. This way, you won't look over scripts that are somewhere you wouldn't expect them to be. Best practice is often said to include all scripts before the closing </body> tag. Don't forget to load jQuery before all the rest of your scripts! In your case it would look like this:
<footer>...</footer>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#foo2").carouFredSel({
circular: true,
infinite: false,
auto: false,
prev: {
button: "#foo2_prev",
key: "left"
},
next: {
button: "#foo2_next",
key: "right"
},
pagination: "#foo2_pag"
});
$('.fancybox').fancybox();
});
</script>

jquery version error

In my web page, I am tryin to use both "kwick" and "cycle" jquery plug-ins. When I use one of them (does not matter which one) it is running properly. But when I try to use both, it gives an JS runtime error.
This is how I am using them :
<script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="kwick/moo1.2.js" type="text/javascript"></script>
<script src="kwick/myKwcik.js" type="text/javascript"></script>
<script src="Scripts/TniyJs.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1500, // speed of the transition (any valid fx speed value)
delay: 500,
});
});
</script>
When I use it like above(in my question) it does not give any error, my 'cycle plug-in' works but 'kwick' does not.
When I move down the "jquery-1.6.4.min.js" to last tag (to the end of the script tags) it throws me the error : Microsoft JScript runtime error: Object doesn't support property or method 'cycle'
when I disable "jquery 1.5" then : Microsoft JScript runtime error: Object doesn't support property or method 'ready'
Please help me If you know the problem or solution.
Thanks.

sounds like a Mootools & jQuery conflict
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j('.slideshow').cycle({
fx: 'fade',
speed: 1500,
delay: 500
});
});
you do not need two versions of jQuery. just reference this latest version on Google's CDN https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js
and Mootools:
https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js
Edit: If you only include Mootools for kwicks you might want to consider using Kwicks for jQuery. http://www.jeremymartin.name/projects.php?project=kwicks that saves you the loading of an extra library/resource

Start a Lightbox on Page Load

Not sure exactly how to do this since I am not that great at Javascript.
Here is what I would like to do: A person goes to a page as soon as the page opens a lightbox opens automatically BEFORE the page loads any other content. The person will then read the information in the lightbox and have an a few options on how they want to proceed. While they read this information the rest of the page will load in the background.
How would I go about doing this?
Thanks!
Note: I am using Fancybox for my lightbox.

I would recommend prettyPhoto, I has a cool API that allows you to open the lightbox from javascript.
Following the API documentation here you can do something like this to launch lightbox on load using JS:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$().prettyPhoto()
api_images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];
api_titles = ['Title 1','Title 2','Title 3'];
api_descriptions = ['Description 1','Description 2','Description 3'];
$.prettyPhoto.open(api_images,api_titles,api_descriptions);
});
</script>
see my notes in this question:
jquery lightbox plugin: Bug on IE7 and IE8!

This is similar to Lynda's approach and also works fine here:
<script type="text/javascript">
//<![CDATA[
<!-- show Lightbox Image Details instantly on page load -->
$(document).ready(function()
{
$('#YourImageId').trigger('click');
});
//]]>
</script>
...
<img id="YourImageId" ...

I found this after I asked this question but I will post it here for others =>
the script below is for v1.3.0
1) inline
<script type="text/javascript" >
$(document).ready(function(){
$("#autostart").fancybox({
'width': 640, //or whatever
'height': 400
});
}); // document ready
</script>
<body onload="$('#autostart').trigger('click');">
something here maybe
<div style="display: none">
<p id="mycontent">I want to display this</p>
</div>
1) external html page:
<script type="text/javascript" >
$(document).ready(function(){
$("#autostart").fancybox({
'width': 640, //or whatever
'height': 400.
'type': 'iframe' // see this?
});
}); // document ready
</script>
<body onload="$('#autostart').trigger('click');">
<a href="http://domain.com/page-to-display.html"
id="autostart">something here maybe ... or not</a>

If you did want to continue using fancybox at any time then here is how I managed to get fancybox to open on page load:
<script type="text/javascript">
/*<![CDATA[*/
$(document).ready(function($)
{
$.fancybox({
autoScale: true,
autoDimensions: true,
transitionIn: 'fade',
transitionOut: 'fade',
scrolling: 'no',
centerOnScroll: true,
overlayShow: true,
content: $('#somediv').html(),
padding: 20
});
})(jQuery);
/*]]>*/
</script>
That's how I managed it. Useful to know even if you don't use fancybox!