creating an interactive element that seamlessly integrates with a dynamic background image slideshow

Struggling to make this work correctly as a newbie in javascript. I need the background image to slide upon hover and stay active on its selected div when clicked. The html, css, and javascript I have currently work fine - when the user clicks on a div, a container opens up below it as intended. However, I'm stuck on having the initial div with class "active" stay active rather than always reverting back to the center. Any suggestions or help would be greatly appreciated.

UPDATE: Here's the provided code in a jsfiddle: http://jsfiddle.net/mGQ8w/4/

This is my current progress:

HTML

<div id="profile_selection">
    <a href="#nos_profiles" class="profile_selection">
        {Ñا}<br />Members
    </a>
    <a href="#registered_profiles" class="profile_selection">
        Registered<br />Members
    </a>
    <a href="#team_profiles" class="profile_selection">
        Team<br />Profiles
    </a>
    <div id="profile_selection_slider"></div>
</div>

<div id="nos_profiles" class="selection"></div>

<div id="registered_profiles" class="selection"></div>

<div id="team_profiles" class="selection"></div>

CSS

#profile_selection {
    width: 612px;
    height: 152px;
    padding: 0;
    margin: 15px auto;
    position: relative;
}
#profile_selection a {
    width: 200px;
    height: 105px;
    padding: 45px 0 0 0;
    margin: 0;
    background: #333;
    border: 2px solid #444;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    -moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
    -webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
    box-shadow: inset 0 -0.3em 0.9em 0.3em #000, 0 28px 24px -24px #000;
    float: left;
    -moz-transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    color: #FFF;
    font: 24px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
    position: relative;
    z-index: 4;
}
#profile_selection a:hover, #profile_selection a.active {
    height: 100px;
    padding: 50px 0 0 0;
    background: #222;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    color: #DF7401;
}
#profile_selection_slider {
    width: 64px;
    height: 16px;
    background: url(http://www.nosclan.net/images/Home/menu_bg_hover.png) no-repeat 0 0 transparent;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    position: absolute;
    top: 152px;
    left: 275px;
    z-index: 4;
}
#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider {
    left: 71px;
}
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider {
    left: 275px;
}
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider {
    left: 480px;
}
#nos_profiles {
    width: 950px;
    height: 500px;
    padding: 0;
    margin: 0 auto;
    background: #222;
    border: 2px solid #444;
    border-bottom: none;
    -moz-border-radius: 12px 12px 0 0;
    -webkit-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    display: none;
    position: relative;
    top: -10px;
    z-index: 1;
}
#registered_profiles {
    width: 950px;
    height: 500px;
    padding: 0;
    margin: 0 auto;
    background: #222;
    border: 2px solid #444;
    border-bottom: none;
    -moz-border-radius: 12px 12px 0 0;
    -webkit-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    display: none;
    position: relative;
    top: -10px;
    z-index: 1;
}
#team_profiles {
    width: 950px;
    height: 500px;
    padding: 0;
    margin: 0 auto;
    background: #222;
    border: 2px solid #444;
    border-bottom: none;
    -moz-border-radius: 12px 12px 0 0;
    -webkit-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
    -moz-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    -webkit-box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    box-shadow: inset 0 0.3em 0.9em 0.3em #000;
    display: none;
    position: relative;
    top: -10px;
    z-index: 1;
}

JAVASCRIPT

$(document).ready(function () {
    $('a.profile_selection').click(function () {
        var a = $(this);
        var selection = $(a.attr('href'));
        selection.removeClass('selection');
        $('.selection').hide();
        selection.addClass('selection');
        if (selection.is(':visible')) {
            selection.slideToggle(400)
        } else {
            selection.slideToggle(400)
        };
    });
});

LATEST UPDATE:::::

http://jsfiddle.net/mGQ8w/13/

Looking for a way to only have one active div at a time - when a user selects a different div, the previously active div should return to normal while the newly selected one becomes active. Currently, all three divs become active when clicked individually. Want to ensure only one div stays active at any given time based on user selection.

javascriptjqueryhtmlcssjquery-animate

Answer №1

To implement the functionality, ensure to utilize the addClass method to add the active class and employ the removeClass method to eliminate the active class from the previous selection.

$(document).ready(function(){
    $('a.profile_selection').click( function(){
       var a = $(this) ;
       $('a.profile_selection').removeClass('active');
       $(this).addClass('active');
       var selection = $( a.attr('href') );
       selection.removeClass('selection');
       $('.selection').hide();
       selection.addClass('selection');
       if( selection.is(':visible') ){
           selection.slideToggle(400)
       }else{ 
           selection.slideToggle(400)
       };
    });
});

Remember to integrate these changes into the CSS adjustments provided by @N1ck as illustrated below 

#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider, 
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider {
    left: 71px;
}
#profile_selection a:nth-of-type(2):hover ~ #profile_selection_slider, 
#profile_selection a:nth-of-type(2).active ~ #profile_selection_slider {
    left: 275px;
}
#profile_selection a:nth-of-type(3):hover ~ #profile_selection_slider, 
#profile_selection a:nth-of-type(3).active ~ #profile_selection_slider {
    left: 480px;
}

For further details, refer to this link: http://jsfiddle.net/mGQ8w/14/

Answer №2

Ensure that the .active rule matches the :hover rule, like so:

#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider{
    left: 71px;
}

This should be updated to include the .active class as well:

#profile_selection a:nth-of-type(1):hover ~ #profile_selection_slider,
#profile_selection a:nth-of-type(1).active ~ #profile_selection_slider{
    left: 71px;
}

Next, implement the menu item selection toggle using the .active class.

var menuItems = $('a.profile_selection');

menuItems.on('click', function () {
    var a = $(this),
        selection = $(a.attr('href'));

    menuItems.removeClass('active');
    a.toggleClass('active');

    ...etc
});

To see an example, check out this fiddle: http://jsfiddle.net/n1ck/FbeFU/

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

Trigger a modal to open based on a specific condition

I have successfully implemented a default modal from Materialize, but now I am looking to add a conditional opening feature to it. In my application, there is a countdown timer and I want the modal to automatically appear when the countdown reaches a certa ...

javascripthtmljquerytwitter-bootstrap

Struggling to make background image behave as desired in CSS

After spending hours scouring forums, I still haven't been able to solve this issue. I am trying to make one of my divs serve as the background for my entire website. Additionally, I want it to start from a specific point and not cover the entire pag ...

cssimagebackgroundpositioncover

Encountering an "unsupported media type" error while using jquery ajax with json in Spring MVC

I am currently working on a Spring MVC application and I am facing an issue in my JSP where I need to pass an object to the controller and then receive the object back in the JSP. Unfortunately, I am encountering an error message saying "Unsupported media ...

javajqueryajaxjsonspring-mvc

Utilizing useEffect in the header component of ReactJS/Next.js: A Comprehensive Guide

In my next.js/react project, I have a component called header.js that is included on every page. Within this component, I've implemented a typewriter effect with rotation by using the following code snippet inside useEffect: export default function H ...

javascriptnode.jsreactjsnext.jsuse-effect

Ensuring that the bootstrap5 column extends all the way to the footer

Looking to display a specific email address mailbox for a project. The goal is to have the 'Mail Card List' scrollable instead of extending beyond the page. Tried using 'max-height:;' CSS, but it sets a fixed height. Seeking a variable ...

htmlcssbootstrap-5

To redirect to a webpage in PHP, incorporate nested if statements and override the meta HTML

I am looking for a way to automatically redirect to another webpage when a certain condition is met. Currently, I have set up a meta redirect in case the condition is not satisfied. <meta http-equiv="refresh" content="4; url=form3.html" /> <?ph ...

phphtmlhttp-redirect

Error encountered in Three.js when using multiple canvases and loading JSON geometry

I have been working on creating multiple views and came across an example code here which worked flawlessly when I tried it. However, when I replaced the geometries with ones I created in Blender, I encountered an error: Cannot read property 'length ...

javascriptthree.js

Issue with executing a jQuery event within a JavaScript object due to application error

I am struggling to comprehend how to set listeners in my JavaScript object. For instance: var obj = function(){ this.test = function(){ console.log('test'); } $(document).on('click','#test',(function(){ ...

javascriptjqueryeventsobject

Utilizing Piwik Analytics in jQuery Mobile Framework

Having an issue with tracking users on my mobile Web App using Piwik. Due to AJAX, only views on the first page are being tracked. I attempted to use the pageinit function to load the Piwik tracking script on every page, but it still only tracks the firs ...

javascriptjqueryhtmljquery-mobilematomo

Utilizing Ajax to append fresh data entries to a pre-existing datagrid

I have a DataGrid that initially loads 300 of the most updated documents. I am looking to add a button in the GUI that will allow the user to load an additional 100 records without having to refresh the page. Rather than reloading all 400 records (300 + ...

jqueryajax

Utilizing radio buttons for displaying or hiding a div element, along with implementing validation using jqueryvalidation.org

I am currently working on a functionality where I need to toggle the visibility of specific divs based on user input. Additionally, I only want to validate the fields within the visible div and not the hidden ones. If the user selects "Yes" in the radi ...

jqueryradio-buttonjquery-validateshow-hidehidden

Is JSONP functioning properly in Chrome but not in Firefox or Internet Explorer?

I'm currently in the process of developing a mobile site and I've opted to use JSONP requests via jQuery to communicate with the data server in order to retrieve information for display on the mobile site. The advice given to me was to avoid usin ...

javascriptjqueryajaxjsonpcors

Concerning Java's Map and Array functionalities

When working with Javascript, we have the ability to create statements like the one below. var f_names = { 'a' : 'Apple', 'b' : 'Banana' 'c& ...

javajavascriptarrays

Hover effect for changing image source not functioning as anticipated

I'm having issues creating an image that plays a GIF on hover. I came across some jQuery code on this website that should work, but it's not working for me. Any thoughts on what the problem might be? Here is the HTML and JavaScript code: $(doc ...

javascriptjquery

Is it possible to include a component in an HTML file when the constructor of the component needs a parameter?

Recently delving into the world of AngularJs has been a captivating experience for me. I am aiming to develop a component with a constructor that accepts a parameter of type string. However, when I try to declare the selector on the HTML file, the componen ...

javascriptangular

Creating a wrapper class in Express JS: A step-by-step guide

I am currently developing a basic wrapper app that retrieves the following information from user requests: a) Request Date & Time b) Request URL c) Response Time This is my approach to wrapping the functionality using Express.js: var express = require(&a ...

javascriptnode.jsexpressnpmwrapper

How to Access a Web Service in ASP.NET and jQuery from any directory without worrying about localhost or production environment?

Trying to get this jQuery call to function properly on both the localhost and production server has been a challenge. The code resides in a master page, with calls originating from different locations within the file structure. Any assistance would be gr ...

jqueryasp.netajaxweb-services

svg icon hover effect not displaying color properly

Seeking expertise in incorporating social media icons with a hover effect to turn purple. Encountering an issue where the entire circle of the icon is mistakenly being painted on hover. Refer to the screenshot of the current outcome and desired result. Wo ...

javascriptcssreactjssvgtailwind-css

Struggling to make jquery .ajax cooperate with my PHP JSON data

Question: $.ajax({ type: "POST", url: 'http://blahblah/cow.php', contentType: "application/json", data: { 'guid': '111', 'score': 592, 'initi ...

phpjqueryjson

What is the best way to outline the specifications for a component?

I am currently working on a TypeScript component. component @customElement("my-component") export class MyComponent extends LitElement { @property({type: String}) myProperty = "" render() { return html`<p>my-component& ...

javascripttypescriptweb-componentlit-element