Develop Reference

My javascript file is not loaded. (Drupal7)

My javascript file is not working. I can't see it in the inspector. I think it doesn't loaded at all.
There is missing something in my file?
This is my whole js file:
$(document).ready(function(){
$(".sf-main-menu li").click(function() {
/* Add the slider movement */
// what tab was pressed
var whatTab = $(this).index();
// Work out how far the slider needs to go
var howFar = 160 * whatTab;
$(".slider").css({
left: howFar + "px"
});
});
});
I added it to the .info file.
The code should working, I got it from codepen. I think maybe something is missing in the file, some declaration, like doctype in html.
(This code moves a slider (which is a line under menuitems.)
DOM:

first question, is jquery loaded befor the script?
And second, you should wrap it in a document.ready.
$(function() {
$(".sf-main-menu li").click(function() {
...
});
});
This will check if the entire DOM is loaded, because otherwise chances are you are binding an event-listener to a DOMNode that doesn't exist yet.

I solved it! :)
I wrote:
jQuery(function ($) {
instead of
$(document).ready(function(){
Now it is working.
(I am not sure why I got so many minus points for my question...)

Going to a page anchor after load adding transition

I'm quite new at using jquery but learning a bit everyday. I have solved many problems searching this web but I can't seem to find any solution for this one:
The web I'm workign at the moment use quite a lot of page anchors.
I have localscroll and scrollto as jquery libraries.
I animated the transition with this little script:
<script type="text/javascript">
$(document).ready(function () {
$('.scrolllento').localScroll({ duration: 1000 });
});
</script>
and it works fine whatever I add the class "scrolllento" to the cointainer of my links.
Now the problem I have is when a link jumps to an anchor of inside different page. my client has asked me if it's possible to load the page first then move to the anchor with same web transition.
I have been working on it with my little knowdlege and this is what I have atm:
<script type="text/javascript">
$(document).ready(function () {
var nosalto = $(location).attr('href');
if (nosalto.indexOf("HistoriaBMG") > 0) {
$.fn.gotoAnchor = function (anchor) {
location.href = this.selector;
}
$('#historia').gotoAnchor();
}
});
</script>
"HistoriaBMG" is the new page and "#historia" is the anchor I want to go inside that page.
and it seems again that it works...
the problem is I have no idea how to implement now the transition as the class "scrolllento" in the container of the link going to ../HistoriaBMG is ignored.
could anyone help me? thanks so much in advance and excuse my english, hope this question is clear enough.

According to the localScroll docs:
The plugin also adds a function, $.localScroll.hash() , that checks the URL in the address bar, and if there's a hash(#an_id), it will scroll to the element. It accepts a hash of settings, just like $.localScroll. You will likely call it on document ready. Check the regular example to see it in action.
So you simply need to call $.localScroll.hash()on $(document).ready()

How do I utilize a predefined method from one js file in my own js file?

I am a web design student and fairly new to jQuery/Javascript so I know this is fairly basic, but everything I have tried has not worked. I am using unslider (unslider.com) on my main page and I am trying to pause the slider on a click event. The documentation on unslider.com shows that you can stop and start the slider based on the following code:
var slidey = $('.banner').unslider(),
data = slidey.data('unslider');
// Pause Unslider
data.stop();
The problem I am having is that I am not sure how to access or utilize these predefined methods in my own js file. Here is the code I am trying, but it is not pausing the slider:
$(document).ready(function() {
$('.button').click(function() {
var slidey = $('.banner').unslider(),
data = slidey.data('unslider');
data.stop();
});
});
Any help with this would be greatly appreciated! Thanks
After the slider is stopped, I am trying to run the following functions:
$details_link = $('.active').data('url');
$('#inner_wrap').load($details_link, function() {
$('.banner').slideToggle( "400", function() {
$('body').toggleClass('no_scroll');
$('#slider_btn').toggleClass('slider_btn_down slider_btn_up');
});
});

Here's a working fiddle.
Make sure that your JS is like so:
$(document).ready(function () {
unslider = $('.banner').unslider();
$('button.stop').on("click", unslider.data("unslider").stop);
});
Then in your HTML make sure that your button is like so:
<button class="stop">Stop the slider</button>
And you're all set.
In terms of utilizing methods from other JS files, just make sure that the location of the script tag for the library you want to use is before your own JavaScript so that the library loads before you can call one of its methods. Something like this, where application.js is your custom JavaScript:
<script src="jquery.js"></script>
<script src="unslider.js"></script>
<script src="application.js"></script>

As long as you have both javascript files linked within the same page, and the file that has the function you are calling is linked first, you will be able to call functions from other files, as described in this post:
Can we call the function written in one JavaScript in another JS file?

Any ideas as to why this jQuery does not work?

I have an HTML page where a click event is captured and hides #testContent. I put the HTML and Javascript in a jsFiddle here: http://jsfiddle.net/chromedude/VSXY7/1/ . For some reason in the actual page the .click() does not work, but in the jsFiddle works. Does anybody have a clue why this would be?
I have ensured that the jQuery and Javascript file were both correctly attached and show up in the Webkit Inspect and Firebug. I am not getting console errors either. It's quite confusing.
UPDATE:
You can check out the actual page here: http://blankit.co.cc/test/77/

It looks like your javascript is not loaded correctly.
<script type="text/javascript" src="../../includes/jquery.js"></script><script type="text/javascript" src="../../includes/navbar.js"></script><script type="text/javasript" src="../../includes/study.js"></script>
You can put some alert() function inside your javascript file to make sure it is loaded correctly.

Your script tag has a typo in the type change it to text/javascript you are missing a letter.
Change study.js from
$(function(){
console.log('hello');
alert('hello');
/*var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#studyTestLink').click(function() {
$('#testContent').hide();
alert('hello');
});*/
});
to
$(function(){
$('#studyTestLink').click(function() {
var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#testContent').hide();
alert('hello');
});
});

I added your code to a page (using jquery 1.5.2) and it works fine. Don't you have any other code that could be breaking it?

Problems Getting jQuery to Work in External js File

I have just started messing with jQuery and have had luck getting it to work within actual aspx and html files, but I'm now trying to get it working in an external js file.
In my html file in the head I have:
<!--Declare jQuery files-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1-vsdoc.js"></script>
<!--Declare external java files-->
<script type="text/javascript" src="javascript/SiteFunction.js"></script>
I have tried adding this to avoid multiple document ready instances, it hasn't effected anything either way, having in or not:
<script type="text/javascript">
$(document).ready(function() { });
</script>
In my external file I have (it is in an if statement and my function just literally skips over all the jQuery .append and .animate stuff as if it were not even there):
$(document).ready(function() {
$('<p>Test</p>').append("#" + newPage);
});
jQuery(function($) {
alert(newPage);
$('<p>Test</p>').appendTo(newPage);
$(newPage).animate({ left: '0px' }, 2000, function() {
// Animation complete.
alert("animated newPage");
});
$(currentPage).animate({ right: '0px' }, 2000, function() {
// Animation complete.
});
});
The first jQuery append is just a simple test to see if I could do something simple. This is all contained in an if statement. I am not receiving any errors and the code is preceding through the first jQuery ready, going into the jQuery function, my alert(newPage) is working, but my alert("animated newPage") is not so I know that I am not even entering into any of the jQuery functions.
If my terminology is incorrect, please forgive me, again I have just started working with Query over the past 3-4 days.
My variables, newPage and currentPage are the id's of divs contained in the main html page. I am accessing and manipulating them fine with javascript in the same external js file.
I tried with the first jQuery .append to see if I needed to add the "#" before my div id to reference as a string.
I've tried with the rest wrapping them in the jQuery(function($) {});. Leaving them as just stand alone, which worked directly from my html file.
Example of working code from html file. Same setup in the head of the file
$(myContent).animate({
width: '0px'
}, mySpeed, function() {
// Animation complete.
});
$('#contentH4').animate({
width: myLeft
}, mySpeed, function() {
// Animation complete.
});
So, I'm at a complete loss!

First, you should only include jQuery once. Those files you're linking to all have the same JS code (except one is minified and the other has additional comments).
This is all you need:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
Also, it would help to see where you're defining newPage and currentPage. If you could link to a demo page that would be ideal.
Also, this does nothing:
<script type="text/javascript">
$(document).ready(function() { });
</script>
And if newPage is simply an ID, then this:
$('<p>Test</p>').appendTo(newPage);
Should be this:
$('<p>Test</p>').appendTo('#' + newPage);

When linking external javascript/jquery files, the type="" does not have to be declared.
Also have them load at the bottom of all body content for better load times.

I use ASP.NET with nested MasterPages and this got to be a real issue for me. I was getting document.ready's lost all the time. I figured I needed a better way and what I came up with was creating an array to hold all of my functions that I wanted to call, and in one document.ready, loop through that array, calling each function in the order in which it was added. If you use many external files that are included at different points for different reasons, this will allow you to do that without any hassle:
<!-- your external javascript file -->
<script type="text/javascript">
// create array to hold a list functions to run once
var oneTimeFunctions = new Array;
// create variable to store first function
var test1 = function() { $('<p>Test</p>').append("#" + newPage); };
// add first function to the end of the array
oneTimeFunctions[oneTimeFunctions.length] = test1;
// create variable to store second function
var test2 = function() {
alert(newPage);
$('<p>Test</p>').appendTo(newPage);
$(newPage).animate({ left: '0px' }, 2000, function() {
// Animation complete.
alert("animated newPage");
});
$(currentPage).animate({ right: '0px' }, 2000, function() {
// Animation complete.
});
};
// add second function to the end of the array
oneTimeFunctions[oneTimeFunctions.length] = test2;
// call document.ready only once
$(function(){
// call each function that was added to the oneTimeFunctions array
$.each(oneTimeFunctions, function(index, func) { func(); });
});
</script>
Now, like I said, you can split this up into multiple external files. This just shows it how it would be processed in order. You just need to create the array first, then create your functions and add them to the array in your various external files, and lastly, run the document.ready portion that loops through calling each function.