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

The JSON response is returning an undefined value

While working on my react app, I am logging JSON data from the backend of the application. When I log the main body of the data: console.log('........section2', options2ndSection[2]); The returned JSON data is as follows: Object item: ...

javascriptarraysjsonreactjs

Setting up initial values for a JSON array in an AJAX function upon the document being fully loaded

I am currently developing an Ajax function that passes values from an array. My goal is to simplify the process of handling various translations by creating a JSON file containing all the required translations and then making it available to my main Ajax f ...

jqueryajaxjson

What is the reason that elements with % properties totaling 100% do not align next to each other?

I've been attempting to arrange two blocks side by side within another block, but they just don't seem to fit together smoothly. What could be causing this issue? .container {height: 200px; width: 400px; background:darkgrey;} .left {height: 100% ...

htmlcss

Issues with data loading from server persist with JSON in JQuery Datatables on IE7, IE8, and IE9

I have successfully implemented Jquery Datatables on a client's admin panel. After testing it on Chrome, Firefox, and Opera, everything seemed to be working perfectly. However, when I attempted to load it on IE7, IE8, or IE9, the system just stuck on ...

jqueryjsoninternet-explorerdatatables

Using JavaScript, the list of items (images) will be displayed and placed into HTML panels

Below is the layout structure on my website: <div class="panel-heading"><h3 class="panel-title">Suggestions</h3></div> <div class="panel-body"> <div class="col-md-7"> <h3><span class= ...

javascriptjquerycsstwitter-bootstrap

The collapsible toggle menu fails to collapse on mobile-sized screens

I've experimented with basic Bootstrap in order to create a toggle menu, but I'm encountering issues. The menu collapses instead of expanding when the screen size is maximized ('m'). Furthermore, clicking on the toggle icon does not cau ...

htmljquerycss

What are some methods for singling out a specific table row?

When working on my app, I faced the task of importing a JSON file and displaying its contents in a table with 3 columns. However, there are two main issues that arose: Utilizing array index for the row key is not recommended due to the table also having ...

javascriptarraysjsonreactjshtml-table

Dealing with AngularJS memory leaks caused by jQuery

How can I showcase a custom HTML on an AngularJS page using the given service? app.service('automaticFunctions', function ($timeout) { this.init = function initAutomaticFunctions(scope, $elem, attrs) { switch (scope.content.type) { ...

javascriptjqueryangularjsmemory-leaks

Tips on crafting tailored CSS styling for targeted div elements such as before and after:

Looking to style specific div elements with the same class name? <div class="main"> <div class="banner_image"> banner 1</div> <div class="banner_image ">banner 2</div> <div class="banner_image ">banner 3</di ...

javascriptjqueryhtmlcss

How can I apply multiple backgrounds to a SVG object?

I am in the process of converting an HTML element into an SVG object. I have made progress, but there is one thing that I am stuck on: I'm having trouble figuring out how to define multiple backgrounds in SVG, specifically when it comes to converting ...

htmlcsssvg

How to access iFrame in ReactJS using document.getElementById

I am facing a challenge on my website where I need to transfer data (using postMessage) to an iframe. Typically in plain JavaScript, I would use techniques like document.getElementById or $("#iframe") in jQuery to target the iframe. However, I am unsure ...

javascriptreactjsnext.js

Create a layered panel underneath a button that covers a separate element

I am working on a layout that consists of an editor and multiple buttons positioned above it on the right side. My goal is to add a panel just below "Button2" that will overlay the editor. This panel should expand and collapse when "Button2" is clicked, wh ...

cssreactjscss-positionfluent-uifluentui-react

Using Vue to alter data through mutations

Greetings! I am currently in the process of developing a website for storing recipes, but as this is my first project, I am facing a challenge with modifying user input data. My goal is to create a system where each new recipe added by a user generates a u ...

javascripthtmlcssvue.jsvuex

When encountering error code EINTEGRITY during npm installation, a warning about a potentially corrupted tarball may be displayed

I have been facing an issue for the last three days with my react+vite project on Windows 10. Whenever I attempt to install dependencies using npm install, I encounter the following error: npm WARN tarball tarball data for fast-levenshtein@https://registry ...

javascriptreactjsnode.jsnpmnode-modules

What is the hexadecimal color code for a specific element's background?

How can I retrieve the background color code of a specified element? var backgroundColor = $(".element").css("background-color"); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="elemen ...

javascriptjquerycsshexbackground-color

Every time Tailwind compiles, it seems to generate a glitchy class

There was a time when I accidentally wrote 2 classes without a space max-w-[412px]mb-[36px]. This caused an error, so I added a space between the classes. However, the error persisted even after making this correction. In a last attempt to resolve the issu ...

cssreactjsnext.jstailwind-css

What is the best way to organize controls on my website?

My web page controls need to be organized in the specific layout below: Header Left Content - Main Content - Right Content Footer Is there a control available that can assist me with achieving this layout? I prefer not to use a table since it may not b ...

asp.nethtmlcss

Chrome bug with incorrect value for $(this).val() length

In Chrome, I'm using the following JQuery code: $(this).val().length, which is for an input field. Strangely, in other browsers this works fine, but Chrome sometimes gives incorrect values. For example, if there are 3 characters in the input field, al ...

jquerygoogle-chrome

Updating the image sources of a group of image tags with a predetermined list

Looking to update a series of image source references within a specific div tag. For example: <!-- language-all: lang-html --> <div id="Listofimages"> <img src="images\2page_img_3.jpg"> <img src="images\2page_img_3 ...

javascriptjquery

When utilizing Expo, importing a module may result in returning null

I've been attempting to incorporate a compass module into my project using expo and react native, but I'm encountering some issues. Check out the library here The problem arises when I try to import the module. Here's the error message I r ...

javascriptreactjsreact-nativeimportexpo