Issues with Jquery content sliders

I am really struggling with this piece of code and I just can't seem to figure out what's causing the issue. If anyone has any insight on how I can make it display a slide for 3 seconds, fade out, show a new slide, and then loop back to the first one, I would greatly appreciate it! I've included my current code below. This project is due in two weeks and I have a lot more work to do, so any help is welcome!

    <section class="clearfix">
    <div id="snapshots">
        <article>
            <img src="http://static.tumblr.com/dbek3sy/4mem1qr1m/themes_image.png">
        </article>
        <article>
            <img src="http://static.tumblr.com/dbek3sy/q8Em247a0/slidehome_4.png">
        </article>
        <article>
            <img src="http://static.tumblr.com/dbek3sy/dsLm2trr5/slidehome_5.png">
        </article>
    </div>
    </section>​
    
    /* joey content slider function */
    window.onload = function() { 
   
    var time = 1500;
    var content = $('#snapshots');
    var cont = 1;
    
    // MARK THE ARTICLES AND CONTENT
    $(function article(){
   
    // how many slides 
    // an = article number
    var an = content.find("article").length;
    
    // define the amount of slides in a class name 
    // example: <div class= "slides_6">
    content.addClass("slides_"+an);
    
    // slide switcher 
    content.append('<div id="switch"></div>');
    
    };
    
    
    // FIND AND MARK SLIDES
    $(function slides() {
        numb = 1;
        content.find("article").each(function(){
            $(this).addClass("slide_"+numb);
            numb++;
            $(this).hide();
        });
        
        //setTimeout("", 4000);
    }
    
    
    function slider(content, time){
        content.fadeOut(time, function() {
       
        // plus 1 slide 
        var conta = cont+1;
       
        $("article.slide_"+conta).animate({
            "display": "block"
        },1500);
       
        $("article.slide_"+cont).animate({
            "display": "none"
        },1500);
       
        setTimeout("doitdude()", 4000);
       
        });
    
    }
    
    
    // RESET SLIDE
    function reset(content, time) {
    
        // fade out content 
        content.fadeOut(time, function(){
       
        // while fading out 
       
        // show first slide 
        $("article.slide_1").animate({
            "display": "block"
        },1500);
         // hide the last one 
        $("article.slide_"+conta).animate({
            "display": "none"
        },1500);
       
        // end transition
        });
    
    
        setTimeout("doitdude()", 4000);
    }
    
    
    function doitdude() {
        if(cont < an) {
            slider(content, 1000);
            cont++;
        }
        else{
            var conta = cont;
            var cont = 1;
            // reset code here:
            reset()
        }
        
    
    };​
    
    
    #snapshots { overflow :hidden ; height :410px ; width: auto ;}
    #snapshots img{}​

Note: I can't use a plugin because I am trying to make my own. Thanks!

Also a JsFiddle here:

http://jsfiddle.net/UYE4E/

Answer №1

It seems like there is an issue with the way your function is declared. Perhaps you meant to write it like this:

(function($) {
    function bar(){
        //body of the function
    };
}(jQuery) );

Take some time to learn about JavaScript scopes and closures for a better understanding.

Interesting Read on Scope and Closures Insightful Article on Closures

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for troubleshooting Jquery PHP echo errors

My web form code includes two fields: Name with Date and Title. Using jQuery, I have implemented a feature where the current date is displayed with a calendar, and when the date is changed in the Date field, it automatically updates in the Title field. The ...

Prevent bouncing effect in Cordova/Phonegap specifically for the header and footer sections

I've utilized the property in the config.xml file to prevent bouncing in the webview (iOS): <preference name="DisallowOverscroll" value="true" /> It's working as intended. However, I'm wondering if there's a way to disable bounc ...

Verify if the JSON response contains any data

When the JSON response is empty and viewed in the browser console, it appears like this: {"data":{},"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://url/form/BN217473" ...

Troubleshooting a problem with conditional statements using AJAX and jQuery in Rails

By leveraging the power of jquery and ajax, I am able to dynamically display new tweets without having to refresh the page. However, a challenge arises when it comes to including a delete button based on whether the current user is viewing their own profil ...

The Chocolat.js Lightbox plugin is experiencing issues with jQuery as it is unable to detect the

I am in the process of integrating chocolat.js into a basic website. An issue I encountered was that the thumbnail was directly processing the anchor link, which resulted in the image opening in a new window instead of launching it in a modal on the screen ...

The initial item in the Materializecss slider is failing to display

Currently, I am attempting to implement materialize slider with skrollr. The setup is functional; however, only the first item of the slider is set to opacity: 0 initially. https://i.stack.imgur.com/urSww.jpg After a brief delay, the second item becomes ...

How can I store an access token received from the backend (in JSON format) in local storage and use it to log in?

My goal is to create a login interface using Plain Javascript. I have obtained a Token from the backend and now need assistance in utilizing this Token for the login process and storing it in LocalStorage. Although I have successfully made the API call, I ...

RAZOR - Strip image elements from variable with HTML content

In the code snippet below, I am using a helper to display content: @Html.Raw(Model.PageData.PageContent) My goal is to filter out any image tags that may be present. I have explored methods like .substring(), but they require specific indices or string n ...

In configuring the print settings, I specified margins to ensure proper formatting. However, I noticed that the margin adjustment only applies to the first page. I need

I have a method that retrieves margin top value from the backend. It works perfectly on the first page of print, but on the second page, the margin top space is missing. initializePrintingSettings() { this.printService.fetchPrintSettings().subscribe(respon ...

Strategies for passing a JavaScript variable to a JSP function

I'm dealing with a JavaScript code that has a value stored in its variable that I need to pass to my JSP function. However, I'm facing trouble passing it along. Take a look at the following code snippets: Javascript: $('button').on(& ...

Changing the size of various types of images

Is there a way in JavaScript to automatically resize and fill in a block with fixed width using different images with various dimensions? I came across something similar, but it was in AS2. I'm unsure if it can be translated to JavaScript. var _loc3 ...

Steps to turn off Google Analytics while working on a local server:

I implement this code for tracking with Google Analytics, <noscript> <iframe src="//www.googletagmanager.com/ns.html?id=GTM-KCQGLT" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> as well as this ...

Having trouble understanding why <p> and <h3> elements are displaying as links?

Starting my journey in front-end development with my first website project. Using HTML, CSS, Bootstrap, and Flask. Encountering an issue where my code is styled like a link instead of plain text. It appears blue and becomes underlined when hovered over. & ...

What could be causing the error message to appear stating that each list item must have a unique key when utilizing react-bootstrap in Nextjs?

My file currently contains keys for each child component, but it is still raising an error internally. I am unsure if I can resolve these issues on my own. export default function SecondaryNav(props:NavItems) { const router = us ...

Extract data from an API endpoint using JavaScript or React

I have the primary website link, which necessitates an authorization header for access every time. //console.log contains this information - accounts:[{categoryId:"some info"... }] api/v2/accounts To extract accountId and categoryId from the i ...

Step-by-step guide to generating a Paypal Button using Vue 3 script setup

After going through the PayPal Developer Docs, I'm still struggling to understand how to integrate the PayPal Button into Vue.js. The code examples provided are unclear, and I can't determine if it's related to Vue 2, Vue 3, or even Angular. ...

What is the proper way to detach an event listener from a class?

I am facing a challenge when trying to remove an event listener. After running the script, I receive an error message stating that changeGirl.off("click") is not a function. Despite this issue, everything else within the code is working perfectly fine. Any ...

Elevated Floating Button

https://i.sstatic.net/jMT5g.png I am attempting to create a vertical floating button for my website, but the text is displaying outside of the box. CSS #feedback { height: 104px; width: 104px; position: fixed; top: 40%; z-index: 999; tr ...

Loading identical items using jQuery Ajax

I have a situation where an ajax request is returning multiple URLs which I am using to create images like: <img URL="1" /> <img URL="1" /> <img URL="2" /> <img URL="1" /> <img URL="3" /> <img URL="2" /> and so on... ...

What is the best way to generate an HTML snapshot using C#?

I'm currently working on a page with Ajax functionality and I'm interested in making it SEO crawlable. After reviewing Google's guidelines at https://developers.google.com/webmasters/ajax-crawling, I learned that I need to use "#!" to create ...