Gallery of floated items. I want to add a class between the lines using jquery

Question

Gallery of floated items. I want to add a class between the lines using jquery

59 Views Asked by Constantin Chirila At 19 October 2024 at 20:05

So i will try to explain bit more into detail. So I've got a gallery with 9 elements floated left creating 3 elements per line like this:

    1   2   3 <--line 1

    4   5   6 <--line 2

    7   8   9 <--line 3

What i am trying to do is when i click on either element i want to add a div bellow the line its part of. For example if i click on element 2 it should add a div after the 3rd element between line 1 and 2.

I tried selecting all the 3rd elements of the line (using :nth-child) but i cant make jquery understand on which line it is. To be honest i am really confused about how to approach this.

Any ideas would be tremendously helpful. Thank you. Constantin Chirila

Later edit: The code is a mess and its part of a bigger thing so sorry for that.

              <a href="#" class="dealer--item" data="hongkong">
                        <h4 class="dealer--item-title">Hong Kong</h4>
                    </a>

                    <a href="#" class="dealer--item" data="australia">
                        <h4 class="dealer--item-title">Sweden</h4>
                    </a>

                    <a href="#" class="dealer--item" data="sweden">
                        <h4 class="dealer--item-title">Sweden</h4>
                    </a>

                    <a href="#" class="dealer--item" data="uk">
                        <h4 class="dealer--item-title">United kingdom</h4>
                    </a>

                    <a href="#" class="dealer--item" data="germany">
                        <h4 class="dealer--item-title">Germany</h4>
                    </a>

                    <a href="#" class="dealer--item" data="netherlands">
                        <h4 class="dealer--item-title">The Netherlands</h4>
                    </a>
                    <a href="#" class="dealer--item" data="canada">
                        <h4 class="dealer--item-title">Canada</h4>
                    </a>
                    <a href="#" class="dealer--item" data="malaysia">
                        <h4 class="dealer--item-title">Malaysia</h4>
                    </a>

                    <a href="#" class="dealer--item" data="thailand">
                        <h4 class="dealer--item-title">Thailand</h4>
                    </a>
                    <a href="#" class="dealer--item" data="japan">
                        <h4 class="dealer--item-title">Japan</h4>
                    </a>
                    <a href="#" class="dealer--item" data="korea">
                        <h4 class="dealer--item-title">Korea</h4>
                    </a>
                    <a href="#" class="dealer--item" data="indonesia">
                        <h4 class="dealer--item-title">Indonesia</h4>
                    </a>
                    <a href="#" class="dealer--item" data="taiwan">
                        <h4 class="dealer--item-title">Taiwan</h4>
                    </a>

                </div>

Jquery:

$(".dealer--item").click(function (e) {
    var idSelector = $(this).attr('data');


    e.preventDefault();
    $('.dealer--item').not(this).removeClass('is-selected');
    $(this).toggleClass("is-selected");

    $(".dealer--item:nth-child(3n)").each(function (index) {
        $(this).addClass("foo" + index);
    });

    $('foo0').after($('#' + idSelector)) //this is where i lost it as its not working for other 6 elements

    $('#' + idSelector).fadeToggle(300);


});

And content that needs to be added between the lines based on the element clicked.

<div class="dealer--address" id="australia">
Address here
</div>
<div class="dealer--address" id="hongkong">
Address here
</div>
<div class="dealer--address" id="sweden">
Address here
</div>
<div class="dealer--address" id="uk">
Address here
</div>
<div class="dealer--address" id="germany">
Address here
</div>

 etc...

Original Q&A

There are 2 best solutions below

brinegjr On 24 June 2015 at 22:37

Have you considered adding an extra div below the floated left elements and just hiding them initially with display:none; and then using jQuery to show them using the on click function.

$("#clickable element").click(function(){ $("element to show").show(); });

This is the way I do all of my click and display behaviors with jQuery.

**Venkata K. C. Tata** · Accepted Answer

<!DOCTYPE html>
<html>

<head>
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        .floating {
            float: left;
            width: 30%;
            margin: 1%;
            height: 100px;
            background: #ffe4c4;
        }

        .Content {
            display:none;       
            width: 100%;
            background: green;
        }

        #contentOnDisplay {
            min-height: 100px;
            width: 100%;
            float: left; 
            background: green;
            display: block;
        }
    </style>
</head>

<body>
    <div class="Content" id="floating1Content">content for 1</div>
    <div class="Content" id="floating2Content">content for 2</div>
    <div class="Content" id="floating3Content">content for 3</div>
    <div class="Content" id="floating4Content">content for 4</div>
    <div class="Content" id="floating5Content">content for 5</div>
    <div class="Content" id="floating6Content">content for 6</div>
    <div class="Content" id="floating7Content">content for 7</div>
<!--    <div class="Content" id="floating8Content">content for 8</div>
    <div class="Content" id="floating9Content">content for 9</div>-->

    <div class="floating" id="floating1"></div>
    <div class="floating" id="floating2"></div>
    <div class="floating" id="floating3"></div>
    <div class="floating" id="floating4"></div>
    <div class="floating" id="floating5"></div>
    <div class="floating" id="floating6"></div>
    <div class="floating" id="floating7"></div>
<!--    <div class="floating" id="floating8"></div>
    <div class="floating" id="floating9"></div>-->

<script type="text/javascript">
    var getLeftMostPositionOfFirstItem = $("#floating1").position().left;

    $(document).ready(function() {
        $(".floating").click(function() {
            var elementID = $(this).attr("id");
            $("#contentOnDisplay").remove(); //hides the existing contents
            var firstItemOFNextRow = getTheFirstItemOfNextRow(elementID);

            getAllTheConstentsOfAdivAndPrepenedIt(firstItemOFNextRow, getTheIdOfFirstItemOfNextRow(elementID));
            return false;
        });
    });

    function getTheFirstItemOfNextRow(clickedItemID) {
        var getTheIdNumberOfThisItem = parseInt(clickedItemID.replace("floating", ""));
        var position = $("#" + clickedItemID).position();
        var idOfTheElementToBeInstertedBefore = "";
        for (var i = getTheIdNumberOfThisItem + 1; i < $(".floating").length; i++) {
            var leftPostitonOfThisItem = $("#floating" + i).position().left;
            if (leftPostitonOfThisItem < getLeftMostPositionOfFirstItem*1.5) {
                idOfTheElementToBeInstertedBefore = "#floating" + i;
                break;
            }
        }
        if (idOfTheElementToBeInstertedBefore.length == "") {
            idOfTheElementToBeInstertedBefore = "#floating" + $(".floating").length;
        }
        return idOfTheElementToBeInstertedBefore;
    };

    function getTheIdOfFirstItemOfNextRow(elementID) {
        return parseInt(elementID.replace("floating", ""));
    };

    function getAllTheConstentsOfAdivAndPrepenedIt(idToPrepend, IdNumber) {
        var htmlOfTheContent = $("#floating" + IdNumber + "Content").html();
        htmlOfTheContent = "<div id='contentOnDisplay'>" + htmlOfTheContent + "</div>";
        if (IdNumber <= $(".floating").length - getNuumberOfItemsInLastRow()) {
            $(idToPrepend).before(htmlOfTheContent);
        } else {
            $(idToPrepend).after(htmlOfTheContent);
        }
        return false;
    };

    function getNuumberOfItemsInLastRow() {
        var numberOfColoumns = 0;
        for (var i = $(".floating").length; i > 0; i--) {
            var leftPostitonOfThisItem = $("#floating" + i).position().left;
            numberOfColoumns++;
            if (leftPostitonOfThisItem < getLeftMostPositionOfFirstItem * 1.5) { 
                break;
            }
        }
        return numberOfColoumns;
    };
</script>
</body>
</html>

Gallery of floated items. I want to add a class between the lines using jquery

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in GALLERY

Trending Questions

Popular # Hahtags

Popular Questions