CodingForums.com - Is there a simpler way of doing this ?

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - Is there a simpler way of doing this ? (http://www.codingforums.com/showthread.php?t=267026)

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.

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 :confused:

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).

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()); 



    });



});

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());

    });

});