Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts

    Is there a simpler way of doing this ?

    Hey, so i have 4 Divs around a Circle, and when you hover, that content is displayed inside of the circle.
    This is what i have working.
    Is there a simpler way of doing this ? Or would this be proper ?

    Code:
    <script type="text/javascript">
    	$(document).ready(function(){
                    $(".ss1").hover(function()
                    {
                        $(".sc2").css("display", "block");
    					$(".sc").css("display", "none");
                    }, function()
                    {
                        $(".sc2").css("display", "none");
    					$(".sc").css("display", "block");
    
    					
                    });
    				
    				
    				 $(".ss2").hover(function()
                    {
                        $(".sc3").css("display", "block");
    					$(".sc").css("display", "none");
                    }, function()
                    {
                        $(".sc3").css("display", "none");
    					$(".sc").css("display", "block");
    
    					
                    });
    				
    				 $(".ss3").hover(function()
                    {
                        $(".sc1").css("display", "block");
    					$(".sc").css("display", "none");
                    }, function()
                    {
                        $(".sc1").css("display", "none");
    					$(".sc").css("display", "block");
    
    					
                    });
    				
    				 $(".ss4").hover(function()
                    {
                        $(".sc4").css("display", "block");
    					$(".sc").css("display", "none");
                    }, function()
                    {
                        $(".sc4").css("display", "none");
    					$(".sc").css("display", "block");
    
    					
                    });
                });
        </script>
    Like is tehre any way to not have to copy and paste that code a bunch of times. Some sort of array or something.

  • #2
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Well, if I understand your code correctly, you have 4 elements (ss1, ss2, ss3, ss4) and one content holder (sc) in which you want to display custom content when hovering the ss1 to ss4 elements.

    What I don't undersand from your code is the relation between your elements. Hovering ss1 displays sc2 / ss2 -> sc3 / ss3 -> sc1 / ss4 -> sc4

    A quite easy approach would be to use a common class for your hover elements and loop through them, then replacing the main container's content with another DIV's content, based on your hover elements' ids.

    PHP Code:
    $(function() {

        $(
    ".hover-element").each(function() {

            $(
    this).mouseover(function() {

                $(
    "#containerElement").html($("#" + $(this).attr('id') + "Content").html());
            });
        });
    }); 
    And your HTML would be:

    PHP Code:
    <div id="ss1" class="hover-element">

        
    Element 1
    </div>

    <
    div id="ss2" class="hover-element">

        
    Element 2
    </div>

    <
    div id="ss3" class="hover-element">

        
    Element 3
    </div>

    <
    div id="ss4" class="hover-element">

        
    Element 4
    </div>

    <
    div id="ss1Content" style="display:none;">

        
    The HTML Content of Element 1
    </div>

    <
    div id="ss2Content" style="display:none;">

        
    The HTML Content of Element 2
    </div>

    <
    div id="ss3Content" style="display:none;">

        
    The HTML Content of Element 3
    </div>

    <
    div id="ss4Content" style="display:none;">

        
    The HTML Content of Element 4
    </div>

    <
    div id="containerElement">
        
    Nothing here yet
    </div
    Note the dot notation ".hover-element" instead of "#elementId" to identify a CSS class rather than an element's ID.

    Do you get the point? Of course, there are other ways to do that, with less HTML, having each element's content in a javascript array for example. This is quick and dirty but illustrates how you can loop through a range of HTML elements and interact with others, and simplify your javascript code by the use of .each() and $(this).
    Chuck Norris counted to infinity.
    Twice.

  • #3
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    You don't even need to do the looping-event-attaching thing, do you? Why not just:

    PHP Code:
    $(function() { 

        $(
    ".hover-element").on('mouseover', (function() { 

                $(
    "#containerElement").html($("#" + $(this).attr('id') + "Content").html()); 

        });

    }); 

  • #4
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    True. You can do that too, it's even simpler.

    Your code has a typo though, so here is a clean version:

    PHP Code:
    $(function() { 

        $(
    ".hover-element").on('mouseover', function() { 

            $(
    "#containerElement").html($("#" + $(this).attr('id') + "Content").html());
        });
    }); 
    Chuck Norris counted to infinity.
    Twice.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •