Duplicate div without duplicating JavaScript

Navigation
0

I need the following help: I was able to put together two codes that I found on the internet, and edited the formatting to my liking.

I have a gallery with images and overflow horizontally, my code works, however I need to repeat the complete div one or more times on the site, and since I am a layman in the area, I can not resolve without conflict, I tried to create two names and scripts and css for everything, but it gave a lot of code conflicts and the semantics got horrible, I know it's possible to create more than one with little help in the code, but I came to the conclusion that without help I will not find the answer! p>

How are you:

HowdoI:

Code:

<script src="http://code.jquery.com/jquery-latest.min.js"></script><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function mostra(theId){
    var theArray= new Array('item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8');
    for(i=0; i<theArray.length; i++){
        if(theArray[i] == theId){
            document.getElementById(theId).style.display='block';
        }else{
            document.getElementById(theArray[i]).style.display='none';
        }
    }
}
</script>
<script>
var SETTINGS = {
    navBarTravelling: false,
    navBarTravelDirection: "",
    navBarTravelDistance: 150
}

var colours = {
    0: "#00BAFF",
    1: "#32CD32",
    2: "#ECBB0C",
    3: "#40FEFF",
    4: "#14CC99",
    5: "#0082B2",
    6: "#7F4200",
    7: "#B25D7A",
    8: "#006B49",
    9: "#FF3400",
    10: "#00B27A",
    11: "#996B3D",
    12: "#CC7014",
    13: "#40FF8C",
    14: "#253A93",
    15: "#ECBB5E",
    16: "#125FB9",
    17: "#B9D912",
    18: "#99813D",
    19: "#867100",
}

document.documentElement.classList.remove("no-js");
document.documentElement.classList.add("js");

// Out advancer buttons

// the indicator
var pnIndicator = document.getElementById("pnIndicator");

var pnProductNav = document.getElementById("pnProductNav");
var pnProductNavContents = document.getElementById("pnProductNavContents");

pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));


// Set the indicator
moveIndicator(pnProductNav.querySelector("[aria-selected=\"true\"]"), colours[0]);

// Handle the scroll of the horizontal container
var last_known_scroll_position = 0;
var ticking = false;

function doSomething(scroll_pos) {
    pnProductNav.setAttribute("data-overflowing", determineOverflow(pnProductNavContents, pnProductNav));
}

pnProductNav.addEventListener("scroll", function() {
    last_known_scroll_position = window.scrollY;
    if (!ticking) {
        window.requestAnimationFrame(function() {
            doSomething(last_known_scroll_position);
            ticking = false;
        });
    }
    ticking = true;
});

pnProductNavContents.addEventListener(
    "transitionend",
    function() {
        // get the value of the transform, apply that to the current scroll position (so get the scroll pos first) and then remove the transform
        var styleOfTransform = window.getComputedStyle(pnProductNavContents, null);
        var tr = styleOfTransform.getPropertyValue("-webkit-transform") || styleOfTransform.getPropertyValue("transform");
        // If there is no transition we want to default to 0 and not null
        var amount = Math.abs(parseInt(tr.split(",")[4]) || 0);
        pnProductNavContents.style.transform = "none";
        pnProductNavContents.classList.add("pn-ProductNav_Contents-no-transition");
        // Now lets set the scroll position
        if (SETTINGS.navBarTravelDirection === "left") {
            pnProductNav.scrollLeft = pnProductNav.scrollLeft - amount;
        } else {
            pnProductNav.scrollLeft = pnProductNav.scrollLeft + amount;
        }
        SETTINGS.navBarTravelling = false;
    },
    false
);

// Handle setting the currently active link
pnProductNavContents.addEventListener("click", function(e) {
	var links = [].slice.call(document.querySelectorAll(".pn-ProductNav_Link"));
	links.forEach(function(item) {
		item.setAttribute("aria-selected", "false");
	})
	e.target.setAttribute("aria-selected", "true");
	// Pass the clicked item and it's colour to the move indicator function
	moveIndicator(e.target, colours[links.indexOf(e.target)]);
});

// var count = 0;
function moveIndicator(item, color) {
    var textPosition = item.getBoundingClientRect();
    var container = pnProductNavContents.getBoundingClientRect().left;
    var distance = textPosition.left - container;
	 var scroll = pnProductNavContents.scrollLeft;
    pnIndicator.style.transform = "translateX(" + (distance + scroll) + "px) scaleX(" + textPosition.width * 0.01 + ")";
	// count = count += 100;
	// pnIndicator.style.transform = "translateX(" + count + "px)";
	
    if (color) {
        pnIndicator.style.backgroundColor = color;
    }
}

function determineOverflow(content, container) {
    var containerMetrics = container.getBoundingClientRect();
    var containerMetricsRight = Math.floor(containerMetrics.right);
    var containerMetricsLeft = Math.floor(containerMetrics.left);
    var contentMetrics = content.getBoundingClientRect();
    var contentMetricsRight = Math.floor(contentMetrics.right);
    var contentMetricsLeft = Math.floor(contentMetrics.left);
	 if (containerMetricsLeft > contentMetricsLeft && containerMetricsRight < contentMetricsRight) {
        return "both";
    } else if (contentMetricsLeft < containerMetricsLeft) {
        return "left";
    } else if (contentMetricsRight > containerMetricsRight) {
        return "right";
    } else {
        return "none";
    }
}
</script>
* {
	box-sizing: inherit;
}

.pn-ProductNav_Wrapper {
	position: relative;
	padding: 0 11px;
	box-sizing: border-box;
}

.pn-ProductNav {
    /* Make this scrollable when needed */
    overflow-x: auto;
    /* We don't want vertical scrolling */
    overflow-y: hidden;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
    /* We don't want internal inline elements to wrap */
    white-space: nowrap;
    /* If JS present, let's hide the default scrollbar */
    .js & {
        /* Make an auto-hiding scroller for the 3 people using a IE */
        -ms-overflow-style: -ms-autohiding-scrollbar;
        /* Remove the default scrollbar for WebKit implementations */
        &::-webkit-scrollbar {
            display: none;
        }
    }
	/* positioning context for advancers */
	position: relative;
	/*Crush the whitespace here*/
	font-size: 0;
}

.pn-ProductNav_Contents {
	float: left;
	transition: transform .2s ease-in-out;
	position: relative;
}

.pn-ProductNav_Contents-no-transition {
	transition: none;
}

.pn-ProductNav_Link {
	text-decoration: none;
	color: #888;
	/*Reset the font size*/
	font-size: 1.2rem;
	font-family: -apple-system, sans-serif;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	border: 1px solid transparent;
	padding: 0 11px;
	& + & {
		border-left-color: #eee;
	}
	&[aria-selected="true"] {
		color: #111;
	}
}

.pn-ProductNav_Indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	width: 100px;
	background-color: transparent;
	transform-origin: 0 0;
	transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}


#caixas{
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 10px;
		
}
.conteudocaixas{
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
}
.imagemcaixas{
	margin-top: 5px;
	width: 12.15%;
	max-width: 170px;
	height: auto;
	display: inline-block;
}
.position_btcx{
	display: inline-block;
}
.button_cx{
	background: #fff;
	height: 30px;
	width: 30px;
	border: 1px solid #000;
	border-radius: 5px;
}
		
.caixa1{
	margin: 0 0.5% 0 0.5%;
}
.caixa2{
	margin: 0 0.5% 0 0.5%;
}
  
<div id="caixas">
    <div class="caixa1">
        <div class="pn-ProductNav_Wrapper">
            <nav id="pnProductNav" class="pn-ProductNav">
                <div id="pnProductNavContents" class="pn-ProductNav_Contents">
                    <a onclick="mostra('item1');" style="cursor: hand;" href="#" class="pn-ProductNav_Link" aria-selected="true">Galeria1</a>
                    <a onclick="mostra('item2');" style="cursor: hand;" href="#" class="pn-ProductNav_Link">Galeria2</a>
                    <a onclick="mostra('item3');" style="cursor: hand;" href="#" class="pn-ProductNav_Link">Galeria3</a>
                    <span id="pnIndicator" class="pn-ProductNav_Indicator"></span>
                </div>
            </nav>

            <div id="item1" style="display:block;">
                <div class="conteudocaixas">
                    <a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
                    <a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
                    <a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
                    <a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
                    <a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
                    <a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
                    <a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
                    <a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
                    <a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
                    <a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
                </div>
            </div>

            <div id="item2" style="display:none;">
                <div class="conteudocaixas">
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/>
                </div>
            </div>

            <div id="item3" style="display:none;">
                <div class="conteudocaixas">
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/>
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/>
                </div>
            </div>

        </div>
    </div>
</div>
    
asked by anonymous 14.08.2018 / 23:56

1 answer

1

I simplified your code, and I just used a command in JQuery , which I saw included in your code.

First the Javascript code, forget all those functions, just use this: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script>document.documentElement.classList.remove("no-js");
    document.documentElement.classList.add("js");

    $('.pn-ProductNav_Link').click(function() {
        // Remove a class active, de todos os itens do menu clicado
        $(this).parent().children().removeClass('active');

        // Adiciona a classe active, a esse menu clicado
        $(this).addClass('active');

        // Deixa invisível todos as seções de fotos dessa área
        $(this).parent().parent().parent().children("[item]").css('display', 'none');

        // Torna visível somente a área que tem o mesmo ID do item clicado
        $(this).parent().parent().parent().children("[item='" + $(this).attr('item') + "']").css('display', 'block');
    });
</script>

Then CSS , I modified a few things. The main change was to perform that effect of the bottom line of the selected menu. I created a active class, instead of creating an element. This class manipulates the borders of the a item selected, already with the transition effects via CSS. 

<style>
    * {
        box-sizing: inherit;
    }
    .pn-ProductNav_Wrapper {
        position: relative;
        padding: 0 11px;
        box-sizing: border-box;
    }
    .pn-ProductNav {
        /* Make this scrollable when needed */
        overflow-x: auto;
        /* We don't want vertical scrolling */
        overflow-y: hidden;
        /* For WebKit implementations, provide inertia scrolling */
        -webkit-overflow-scrolling: touch;
        /* We don't want internal inline elements to wrap */
        white-space: nowrap;
        /* If JS present, let's hide the default scrollbar */
        .js & {
            /* Make an auto-hiding scroller for the 3 people using a IE */
            -ms-overflow-style: -ms-autohiding-scrollbar;
            /* Remove the default scrollbar for WebKit implementations */
            &::-webkit-scrollbar {
                display: none;
            }
        }
        /* positioning context for advancers */
        position: relative;
        /*Crush the whitespace here*/
        font-size: 0;
        height: 46px;
    }
    .pn-ProductNav_Contents {
        float: left;
        transition: transform .2s ease-in-out;
        position: relative;
    }
    .pn-ProductNav_Contents-no-transition {
        transition: none;
    }
    .pn-ProductNav_Link {
        text-decoration: none;
        color: #888;
        /*Reset the font size*/
        font-size: 1.2rem;
        font-family: -apple-system, sans-serif;
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 11px;
        & + & {
            border-left-color: #eee;
        }
        &[aria-selected="true"] {
            color: #111;
        }
    }
    .pn-ProductNav_Link.active {
        border-bottom: 4px solid;
        border-bottom-color: rgb(0, 186, 255);
        transition: border .2s ease-in-out;
    }
    caixas{
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 10px;

    }
    .conteudocaixas{
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }
    .imagemcaixas{
        margin-top: 5px;
        width: 12.15%;
        max-width: 170px;
        height: auto;
        display: inline-block;
    }
    .position_btcx{
        display: inline-block;
    }
    .button_cx{
        background: #fff;
        height: 30px;
        width: 30px;
        border: 1px solid #000;
        border-radius: 5px;
    }
    .caixa{
        margin: 0 0.5% 0 0.5%;
    }
</style>

Finally HTML . I removed the repetition of the images to save space here. It would look like this: 

<div class="caixas">
    <div class="caixa">
        <div class="pn-ProductNav_Wrapper">
            <nav class="pn-ProductNav">
                <div class="pn-ProductNav_Contents">
                    <a item="1" style="cursor: hand;" href="#" class="pn-ProductNav_Link active">Galeria1</a>
                    <a item="2" style="cursor: hand;" href="#" class="pn-ProductNav_Link">Galeria2</a>
                    <a item="3" style="cursor: hand;" href="#" class="pn-ProductNav_Link">Galeria3</a>
                </div>
            </nav>

            <div item="1" style="display:block;">
                <div class="conteudocaixas">
                    <a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
                </div>
            </div>

            <div item="2" style="display:none;">
                <div class="conteudocaixas">
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/>
                </div>
            </div>

            <div item="3" style="display:none;">
                <div class="conteudocaixas">
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/>
                </div>
            </div>
        </div>
    </div>
    <div class="caixa">
        <div class="pn-ProductNav_Wrapper">
            <nav class="pn-ProductNav">
                <div class="pn-ProductNav_Contents">
                    <a item="1" style="cursor: hand;" href="#" class="pn-ProductNav_Link active">Galeria1</a>
                    <a item="2" style="cursor: hand;" href="#" class="pn-ProductNav_Link">Galeria2</a>
                    <a item="3" style="cursor: hand;" href="#" class="pn-ProductNav_Link">Galeria3</a>
                </div>
            </nav>

            <div item="1" style="display:block;">
                <div class="conteudocaixas">
                    <a href="#"><img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver10_xlg.jpg"alt="#"/></a>
                </div>
            </div>

            <div item="2" style="display:none;">
                <div class="conteudocaixas">
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver11_xlg.jpg"alt="#"/>
                </div>
            </div>

            <div item="3" style="display:none;">
                <div class="conteudocaixas">
                    <img class="imagemcaixas" src="http://cdn.cinepop.com.br/2017/06/spiderman_homecoming_ver12_xlg.jpg"alt="#"/>
                </div>
            </div>
        </div>
    </div>
</div>

Generally, I did so that the manipulation was done with reference to the clicked element and not% with%. The HTML ID tag assumes that element is unique, which in your case is not true. In this way using classes, the logic is applied homogeneously to all elements and possible duplicates. Not to mention the simplicity of the programming applied to solve the problem. The section is located through a custom attribute created in HTML, the IDs attribute. The item clicked and the âncora share the same value, thus linking each other.

Final result:

    
15.08.2018 / 23:30
Python asyncio and threading Help with ORDER BY clause by string