Signal for a complete 360 degree rotation of an image

Looking to enhance my 360 image rotator with an indicator that fades out after the first image. I added this function to the end of my 360.js:

(function(){
     if(
$('#first').css('visibility','hidden')) {
    $('#rotate').fadeOut();
} 
else {
    $('#rotate').fadeIn();
}

     });

Everything seems fine, but the script isn't checking whether the image is visible or not. I attempted to bind it to mousedown and mousemove events in my 360.js, but without success. Any suggestions on how to tackle this issue?

Here's a fiddle

javascriptjqueryhtmlcss

Answer №1

Aside from the issues mentioned in my previous comments, there was another major problem I encountered.

The code is mistakenly setting currentImage to 1 instead of 0, while the indexing should be 0 based. This leads to the desired image not being visible and therefore, the fadeIn effect never occurs.

I also made a point to check for the presence of the 'notseen' class, although checking for hidden status would have sufficed as well.

If you'd like to view the latest fix, you can find it here: http://jsfiddle.net/y7WmA/6/

Highlighted below are the key snippets from the code:

.bind('mousemove touchmove', function (e) {
    fadeInOut();
    // ...
        if (Math.abs(currPos - pageX) >= widthStep) {
            if (currPos - pageX >= widthStep) {
                currImg++;
                if (currImg > imageTotal) {
                    currImg = 0;
                }
            } else {
                currImg--;
                if (currImg < 0) {
                    currImg = imageTotal;
                }
// ...
function fadeInOut() {
    if ($('#first').hasClass('notseen')) {
        console.log("hidden");
        $('#rotate').fadeOut();
    } else {
       console.log("visible");
        $('#rotate').fadeIn();
    }

};

Answer №2

JSFiddle presents a challenge when it comes to the placement of scripts. It seemed that your script was struggling to bind the event to the DOM because JSFiddle was loading it immediately upon page load. This could have been a factor in the issues you encountered locally.

To address this, I have made some slight modifications to your JSFiddle: JSFiddle. You will notice that I've added a firstMove boolean that either enables or disables the following script:

   if (!firstMove) {
        $('#rotate').fadeOut()
        firstMove = true;
    }

This change makes your placeholder fade out after the first movement. While I aim to find a way to eliminate the need for a boolean tracker, this adjustment should set you on the right path!

Additionally, please be aware that your current version evaluates every movement on the image, which can be resource-intensive particularly with jQuery selectors.

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

Data Filling and Consolidating in MongoDB

Recently, I inquired about a similar issue here: Mongoose/Mongodb Aggregate - group and average multiple fields I am attempting to utilize Model.aggregate() to determine the average rating of all posts based on date and then further categorized by specifi ...

javascriptmongodbmongooseaggregatepopulate

Tips on obtaining the ultimate URL using jQuery/AJAX

When executing $.get or .load with jQuery, the requests smoothly follow 302 redirects to provide me with the desired response. This response can be utilized in the callback function of $.get, or linked directly to the designated element for .load. Even th ...

jqueryajaxxmlhttprequest

Is it possible for a navbar in CSS to collapse based on its width?

At the moment, I am utilizing Bootstrap v3.3.6 and jQuery v1.9.1. My current project involves a horizontal navbar that collapses once it reaches a specific screen resolution. I am pleased with how this feature operates and wish to maintain the same breakpo ...

htmlcsstwitter-bootstrap

What is the best way to set up multiple unique uglify tasks in grunt?

I am facing issues when trying to create multiple Uglify tasks in Grunt. Currently, I have to toggle between commenting and uncommenting a task to get it to work properly. I need assistance in generating two separate minified .js files using this plugin ...

javascriptnode.jsgruntjsgrunt-contrib-uglify

What is the best method to determine offsetTop in relation to the parent element instead of the top of

I have a straightforward inquiry: How can one determine the offsetTop of a child element in relation to its parent element rather than the top of the window? The definition of offsetTop indicates that it should give the distance by which a child element i ...

javascripthtmlcss

Enhancing Date formatting in Jquery Data tables following ASP.NET Serialization

Currently, I am facing an issue with formatting dates in a SQL database query that is being serialized by ASP and then converted to JSON for display in Datatables using JavaScript. Instead of the correct date format, I am seeing: /Date(1424563200000)/. I ...

javascriptasp.netjsondatedatatables

Switching Font Family Option for Selection Mat in Angular Material

I'm currently working on changing the font of the options inside mat-select ("In what city were you born", etc). After some experimentation, I found that by setting ViewEncapsulation to none (allowing styles from other files to bleed in), I am able t ...

cssangularangular-materialmat-form-fieldmat-select

Significant contrast in how text is displayed between Chrome and Firefox

Experiencing significant discrepancies in text rendering between Chrome and Firefox. Chrome appears to apply anti-aliasing rules that reduce the text size considerably. Attempts have been made to adjust -webkit-font-smoothing, letter-spacing and word-spac ...

cssfirefoxgoogle-chromefontsantialiasing

The connection of <p:ajax> to a parent component that is not a ClientBehaviorHolder is not possible

Trying to trigger a function when selecting a value from a dropdown. See the code below: <h:form id="frmUpload" enctype="multipart/form-data"> <p:column><h:outputText value="Select Team: " /></p:column> <p:colu ...

javahtmlajaxprimefacesdrop-down-menu

The forecast button seems to be malfunctioning. Each time I attempt to click on it, a message pops up saying, "The server failed to comprehend the request sent by the browser (or proxy)."

Even though I provided all the necessary code, including the Flask app, predictionmodel.py, and HTML code, I am still encountering an error when running it locally after clicking submit. The browser (or proxy) sent a request that this server could not un ...

pythonhtmlmachine-learningflasknltk-trainer

My JavaScript code is functioning properly in jsfiddle, but when I try to run it on my own website, I encounter

Encountered an error message stating "Uncaught typeError: cannot call method 'hover' of null" following the line $('#nav li a').hover(function(){ in my JavaScript code. Check out the code on my site here: http://pastebin.com/GjZBEu3s Y ...

javascriptjquerynull

Issue with dynamically filling a form field using ValidityState

I have been utilizing the ValidityState interface for client-side form validation, but I've encountered an issue. Whenever my form is populated programmatically, such as after making a call to a third-party API, the tooLong state always returns false, ...

javascript

When using Node Puppeteer, if the page.on( "request" ) event is triggered, it will throw an error message stating "Request is already being handled!"

I am currently utilizing puppeteer-extra in conjunction with node.js to navigate through multiple URLs. During each iteration, I am attempting to intercept certain types of resources to load and encountering the error below. PS C:\Users\someuser ...

javascriptnode.jspuppeteer

What is the best way to know which API will return the result the fastest?

If we were to make 2 API calls, each taking around 6ms to return JSON data, what would be the sequence in which they provide the resulting data? The official JavaScript documentation mentions using Promise.all to manage multiple API calls. ...

javascriptnode.jsapi

Struggling with loading external scripts within background.js in Chrome extensions?

I am facing an issue with my chrome extension. I am unable to call an external script, specifically the ethereum script (web3.min.js), from within my background.js file. The error message I receive is: Uncaught EvalError: Refused to evaluate a string ...

javascriptgoogle-chrome-extensionethereum

Elemental SVG Animation

I'm currently exploring the world of animating svg objects using CSS. I have successfully learned how to animate a path with: @keyframes stroke_fill { 0% { fill: white; } 50% { fill: white; stroke-dashoffset: 0; ...

cssanimationsvg

Locate the chosen radio button within a group of <label> tags using the selenium webdriver

How can I iterate through all the label items within a div? There are multiple label tags with radio buttons inside. I'm using Selenium WebDriver and need to identify the selected radio button. Here are the two things I need to accomplish: Determine ...

javahtmlseleniumselenium-webdriverwebdriver

A guide to toggling the check/uncheck status of a list box by clicking on a checkbox using

I am using a div and CSS id to control the checkbox check and uncheck functionality, but I am not getting the desired outcome from my source code Step 1: By default, the checkbox is unchecked and the listbox is disabled Step 2: When the checkbox is check ...

javascripthtmljquerycssajax

HashId plugin for Angular

Currently, I'm attempting to integrate into my Angular project built on the latest version. After discovering this definition file: // Type definitions for Hashids.js 1.x // Project: https://github.com/ivanakimov/hashids.node.js // Definitions by: ...

javascriptangulartypescripthashids

What is the best way to iterate through this JSON data and add it to a div in an HTML document?

Here is the structure of my JSON: { "content": [ { "title": "'I need some rest'", "description": "Descript One", "link": "http://www.google.com/?id=90#hhjjhjC-RSS", "guid": "http://www.google ...

javascriptjqueryajaxjsonjsonp