Replace Div and Reset Div (Jquery) - javascript

I have a DIV with links in it. When a link is clicked I wish to replace div in place with a form. When users need to return 'home' to original div they should simply click 'go back' or similar.
Here's what I've tried with no prevail:
HTML
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
</div>
<div class="container" id="one" style="display:none;">
<input type="button" value="Go Back" id="home"/> One
</div>
<div class="container" id="two" style="display:none;">
<input type="button" value="Go Back" id="home"/> Two
</div>
<div class="container" id="three" style="display:none;">
<input type="button" value="Go Back" id="home"/> Three
</div>
Javascript
var originalState = $("#init").clone();
$(".first").click(function() {
$("#init").replaceWith($("#one"));
});
$(".second").click(function() {
$("#init").replaceWith($("#two"));
});
$(".third").click(function() {
$("#init").replaceWith($("#three"));
});
$("#home").click(function() {
$(<current state>).replaceWith($(originalState));
});
Where I would like to replace div (id="init") with the corresponding selected div (id="one",id="two", or id="three").
Furthermore user need to return to original div (id="init") upon clicking 'go back button'
Here is a Fiddle.


This is a basic solution with javascript (no jQuery) hope it helps you and solves the problem.
const initDiv = document.getElementById('init');
const classList = ["first" , "second" ,"third"];
const inputClassList = ['one' ,'two' ,'three'];
let linkIndex = -1;
initDiv.addEventListener('click' , showInput);
function showInput(e){
let linkIndex = classList.indexOf(e.target.classList[0]);
if(linkIndex >= 0){
const inputDiv = document.getElementById(inputClassList[linkIndex]);
const inputButton = inputDiv.children[0];
inputDiv.classList.remove('noDisplay');;
initDiv.classList.add('noDisplay');
inputButton.addEventListener('click' ,function(){
initDiv.classList.remove('noDisplay');
inputDiv.classList.add('noDisplay');
})
}
}
#wrapper{
background-color: #999;
}
.noDisplay{
display:none;
}
.inputCss{
/*set here the css properties you don't want the input to
enherit from wrapper div*/
}
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
<div class="container noDisplay inputCss" id="one">
<input type="button" value="Go Back" id="home1"/> One
</div>
<div class="container noDisplay inputCss" id="two">
<input type="button" value="Go Back" id="home2"/> Two
</div>
<div class="container noDisplay inputCss" id="three">
<input type="button" value="Go Back" id="home3"/> Three
</div>
</div>
This solution is using jQuery.
The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call.
So you can just modify the css display value.
var originalState = $("#init").clone();
$(".first").click(function() {
toggleDisplay("init" ,"one");
$("input").click(function() {
toggleDisplay("one" ,"init");
});
});
$(".second").click(function() {
toggleDisplay("init" ,"two");
$("input").click(function() {
toggleDisplay("two" ,"init");
});
});
$(".third").click(function() {
toggleDisplay("init" ,"three");
$("input").click(function() {
toggleDisplay("three" ,"init");
});
});
function toggleDisplay(first ,second) {
$(`#${first}`).hide();
$(`#${second}`).show();
}
#wrapper{
background-color: #999;
}
.inputCss{
/*set here the css properties you don't want the input to
enherit from wrapper div*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
<div class="container inputCss" id="one" style="display:none;">
<input type="button" value="Go Back" id="home1"/> One
</div>
<div class="container inputCss" id="two" style="display:none;">
<input type="button" value="Go Back" id="home2"/> Two
</div>
<div class="container inputCss" id="three" style="display:none;">
<input type="button" value="Go Back" id="home3"/> Three
</div>
</div>


This solution meets all functional requirements including browser history support. In other words, pressing the back or forward buttons work as expected.
See this fiddle. To test history controls, host the page locally. The full source is attached below.
The key challenge is to not change the DOM or event bindings more than needed. The replace and clone operations are expensive and have weird edge behaviors. Usually it is better to hide and show elements and set event bindings as few times as possible.
The solution below does all this. Let me know if you have questions. Good luck!
<html>
<head></head>
<body>
<div id="wrapper" class="toggled">
<div class="container" id="init">
<div class="link-1">
<a class="first" href="#">1st Action</a>
</div>
<div class="link-2">
<a class="second" href="#">2nd Action</a>
</div>
<div class="link-3">
<a class="third" href="#">3rd Action</a>
</div>
</div>
</div>
<div class="container" id="one" style="display:none;">
<input type="button" value="Go Back" class="home"/> One
</div>
<div class="container" id="two" style="display:none;">
<input type="button" value="Go Back" class="home"/> Two
</div>
<div class="container" id="three" style="display:none;">
<input type="button" value="Go Back" class="home"/> Three
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
(function () {
var
allowList = [ '', 'first', 'second', 'third' ],
doDebounce = false
;
$('.first').click(function( event_obj ) {
$('#init').hide();
$('#one').show();
doDebounce = true;
document.location.hash = 'first';
event_obj.preventDefault();
});
$('.second').click(function( event_obj ) {
$('#init').hide();
$('#two').show();
doDebounce = true;
document.location.hash = 'second';
event_obj.preventDefault();
});
$('.third').click(function( event_obj ) {
$('#init').hide();
$('#three').show();
doDebounce = true;
document.location.hash = 'third';
event_obj.preventDefault();
});
$('.home').click(function( event_obj ) {
$('.container').hide();
$('#init').show();
doDebounce = true;
document.location.hash = '';
event_obj.preventDefault();
});
$( window ).on( 'hashchange', function () {
var
page_str = document.location.hash || '',
selector_str = ''
;
if ( page_str.length > 0 ) { page_str = page_str.substr( 1 ); }
if ( allowList.indexOf( page_str ) === -1 ) { return; }
if ( doDebounce ) {
doDebounce = false;
return;
}
selector_str = page_str ? '.' + page_str : '.home';
$( selector_str ).trigger( 'click' );
doDebounce = false;
});
}());
</script>
</html>

Related

Click through questions hiding the previous one each time using jQuery

I have 5 questions that I want to click through. I only want one question on the page at a time. There are back and next buttons below each question. But the jQuery I have worked on the first question, but fails after that. What am I doing wrong?
HTML
<div id="one">
<span>What is your first name?</span>
<div>
a href="#" id="back">back</a>
a href="#" id="next">Next</a>
</div>
</div>
<div id="two">
<span>What is your last name?</span>
<div>
a href="#" id="back">back</a>
a href="#" id="next">Next</a>
</div>
</div>
<div id="three">
<span>How old are you?</span>
<div>
a href="#" id="back">back</a>
a href="#" id="next">Next</a>
</div>
</div>
<div id="four">
<span>What is your favourite colour?</span>
<div>
a href="#" id="back">back</a>
a href="#" id="next">Next</a>
</div>
</div>
jQuery
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("#two").hide();
$("#three").hide();
$("#four").hide();
$("#next").click(function () {
$("#one").hide();
$("#two").show();
});
});
$(document).ready(function () {
$("#next").click(function () {
$("#two").hide();
$("#three").show();
});
});
</script>

Your first problem is You cant give same id to your elements. Id is used to make element uniqeu. You can use class for same type elements.
Your second problem is syntax error before a tag elements.
As as way you first can hide all elements using class attribute and show spesific element with id attribute.
$(document).ready(function () {
$(".question").hide();
$("#one").show();
});
function NextBack(id){
$(".question").hide();
$("#"+id).show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one"class="question">
<span>What is your first name?</span>
<div>
back
Next
</div>
</div>
<div id="two"class="question">
<span>What is your last name?</span>
<div>
back
Next
</div>
</div>
<div id="three"class="question">
<span>How old are you?</span>
<div>
back
Next
</div>
</div>
<div id="four"class="question">
<span>What is your favourite colour?</span>
<div>
back
Next
</div>
</div>
Or you can use dom element to hide and show
$(document).ready(function () {
$(".question").hide();
$("#one").show();
});
$(".back").click(function(e) {
var id=e.target.closest(".question").previousElementSibling.getAttribute("id");
if(id){
$(".question").hide();
$("#"+id).show();
}
});
$(".next").click(function(e) {
var id=e.target.closest(".question").nextElementSibling.getAttribute("id");
if(id){
$(".question").hide();
$("#"+id).show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one"class="question">
<span>What is your first name?</span>
<div>
back
Next
</div>
</div>
<div id="two"class="question">
<span>What is your last name?</span>
<div>
back
Next
</div>
</div>
<div id="three"class="question">
<span>How old are you?</span>
<div>
back
Next
</div>
</div>
<div id="four"class="question">
<span>What is your favourite colour?</span>
<div>
back
Next
</div>
</div>

The main problem is that you are having multiple elements with the same id, id's should always be unique.
also please note that you forgot the < infront of your links (a)
You can also achieve it in a simple way like this.
$(document).ready(function() {
$(".questiontwo,.questionthree,.questionfour").hide();
$(".next").click(function() {
var current = $(this).closest("[class*=question]");
var next = current.next("[class*=question]");
if (next.length == 1){
current.hide();
next.show();
}
});
});
Demo
$(document).ready(function() {
$(".questiontwo,.questionthree,.questionfour").hide();
$(".next").click(function() {
var current = $(this).closest("[class*=question]");
var next = current.next("[class*=question]");
if (next.length == 1){
current.hide();
next.show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="questionone">
<span>What is your first name?</span>
<div>
back
Next
</div>
</div>
<div class="questiontwo">
<span>What is your last name?</span>
<div>
back
Next
</div>
</div>
<div class="questionthree">
<span>How old are you?</span>
<div>
back
Next
</div>
</div>
<div class="questionfour">
<span>What is your favourite colour?</span>
<div>
back
Next
</div>
</div>

jQuery callback function to check number of child elements on element click

I have a set of "div" whose children count I want to check when a user fadeOut images under that div block, if the all childrens have be closed out i want to call the function: kind of like:
edited: the current code always alerts YES whenever the div is faded,
how do i destroy the DOM entirely without having to use :visible
filter. getting rid of the entire card class after fading out
considering the HTML:
<div class='scrolling-wrapper'>
<div class='card'>
<div class='panel panel-primary'>
<div class='panel-body'>
<div class='img-wrap'>
<span class='close-x'> × </span>
<img width='100%' id='3' class='' src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100' />
</div>
<div class='title h5'>
<span class='user-popover'>
<a href='/groupstomason/'><b>tomason</b></a>
</span>
<br/>
<small class='small-text'>for max tomason
</small>
</div>
</div>
<div class='panel-heading'>
<button class='btn btn-primary'> <span class='fa fa-plus-circle fa-fw'> </span>Join </button>
</div>
</div>
<div class='card-group-holder' style='width:250px; background-color:inherit;'>
</div>
<div class="card"> another card</div>
<div class="card"> another card</div>
<div class="card"> another card</div>
</div>
and the jquery below:
$('.img-wrap .close-x').on('click', function() {
var card = $(this).closest('.card');
card.fadeOut('slow', function() {
var cardWrapper = $(this).closest('.card').closest('scrolling-wrapper');
var cardcount = cardWrapper.children('.card');
if (cardcount.length < 1) alert('yes');
});
});
when the <span class = 'close-x'> × </span> is clicked the
entire <div class='card'> is fadedOut, then on fadeout, if no more
cards exist or the last cards have been faded, then alert('yes');

Assuming that multiple .card elements are nested in the same parent, you can check if all the siblings have faded out.
In your original markup, you have an unclosed </div>, which causes the .card elements not to be siblings of each other, I believe this is a typo on your part, since it is the most parsimonious explanation.
Since .fadeOut() hides the element, you can simply check if the filtered set of :visible returns a length of 1 or more:
$('.img-wrap .close-x').on('click', function() {
var card = $(this).closest('.card');
card.fadeOut('slow', function() {
var cardWrapper = $(this).closest('.scrolling-wrapper');
var cardcount = cardWrapper.children('.card');
if (cardcount.filter(':visible').length < 1) {
console.log('All cards have faded out');
}
});
});
Here is a proof-of-concept example:
$(function() {
$('.close').on('click', function() {
var card = $(this).closest('.card');
card.fadeOut('slow', function() {
// Get wrapping ancestor
var cardWrapper = $(this).closest('.scrolling-wrapper');
var cardcount = cardWrapper.children('.card');
// Filter out those that are not visible, and check for remaining visible cards
if (cardcount.filter(':visible').length < 1) {
console.log('All cards have faded out');
}
});
});
});
/* Just styles for a dummy call-to-action element in .card */
span.close {
cursor: pointer;
color: steelblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrolling-wrapper">
<div class="card">Card 1. <span class="close">Click to hide me.</span></div>
<div class="card">Card 2. <span class="close">Click to hide me.</span></div>
<div class="card">Card 3. <span class="close">Click to hide me.</span></div>
<div class="card">Card 4. <span class="close">Click to hide me.</span></div>
<div class="card">Card 5. <span class="close">Click to hide me.</span></div>
</div>

In your callback you may simply test if at least a card is visible:
if ($(this).closest('.card').siblings('.card:visible').length < 1) alert('yes');
$('.img-wrap .close-x').on('click', function () {
var card = $(this).closest('.card');
card.fadeOut('slow', function () {
if ($(this).closest('.card').siblings('.card:visible').length < 1) console.log('yes');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='scrolling-wrapper'>
<div class='card'>
<div class='panel panel-primary'>
<div class='panel-body'>
<div class='img-wrap'>
<span class='close-x'> × </span>
<img width='100%' id='3' class=''
src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100'/>
</div>
<div class='title h5'>
<span class='user-popover'>
<a href='/groupstomason/'><b>tomason</b></a>
</span>
<br/>
<small class='small-text'>for max tomason
</small>
</div>
</div>
<div class='panel-heading'>
<button class='btn btn-primary'><span class='fa fa-plus-circle fa-fw'> </span>Join</button>
</div>
</div>
<div class='card-group-holder' style='width:250px; background-color:inherit;'>
</div>
</div>
<div class='card'>
<div class='panel panel-primary'>
<div class='panel-body'>
<div class='img-wrap'>
<span class='close-x'> × </span>
<img width='100%' id='3' class=''
src='resizer/resizer.php?file=profiles/images/default_cover.jpg&width=700&height=400&action=resize&watermark=bridgoo&watermark_pos=tl&color=255,255,255&quality=100'/>
</div>
<div class='title h5'>
<span class='user-popover'>
<a href='/groupstomason/'><b>tomason</b></a>
</span>
<br/>
<small class='small-text'>for max tomason
</small>
</div>
</div>
<div class='panel-heading'>
<button class='btn btn-primary'><span class='fa fa-plus-circle fa-fw'> </span>Join</button>
</div>
</div>
<div class='card-group-holder' style='width:250px; background-color:inherit;'>
</div>
</div>
</div>

Multi step jquery divs not displaying data

I have created a multistep booking system where as the customer will fill out information in 4 steps on the header the steps are shown but the problem is there I wanted to give access to the users so if by mistakenly the user inputs incorrect information they have access to jump out that step and correct their information can anyone help me out as of now when ever the step is clicked that step is shown but the thing is that the active div is not disappearing.
$(document).ready(function() {
$('.booking_step').on('click', function() {
var step = $(this).attr('data-step');
if(step == 1) {
$('.schedule').fadeOut();
$('.minfo').fadeOut();
$('.select_rm').fadeIn(2500);
}
if(step == 2) {
$('.select_rm').fadeOut();
$('.minfo').fadeOut();
$('.schedule').fadeIn(2500);
}
});
});
$(".step1").on('click', (function(e) {
$('.select_rm').fadeOut();
$('.schedule').fadeIn(2500);
}));
$(".step2").on('click', (function(e) {
$('.schedule').fadeOut();
$('.main_box').fadeIn(2500);
}));
$(".step3").on('click', (function(e) {
$('.minfo').fadeOut();
$('.main_box').fadeIn(2500);
}));
a {
cursor:pointer;
}
.booking_step {
cursor:pointer;
display:inline-block;
padding:0 20px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="steps">
<div class="booking_step complete" data-step="1">
<span class="bh_tittle">Clean Type</span>
</div>
<div class="booking_step no_hd dt_schl" data-step="2">
<span class="bh_tittle">Schedule Date</span>
</div>
<div class="booking_step no_hd dt_ad_t" data-step="3">
<span class="bh_tittle">Address</span>
</div>
</div>
<div class="booking-flow-section select_rm" data-section="1" style="display: block;">
<h1>Clean Type Form</h1>
<a class="step1">Next</a>
</div>
<div class="booking-flow-section schedule" data-section="2" style="display: none;">
<h1>Schedule Date Form</h1>
<a class="step2">Next</a>
</div>
<div class="booking-flow-section main_box" data-section="3" style="display: none;">
<h1>Address Form</h1>
<a class="step3">Next</a>
</div>
I am unable to recognize how come the div's will be hidden once which is currently active.

change to below code should work Please try. I think this what you have missed.
$('.minfo').fadeOut(); is changed to $('.main_box').fadeOut();
<style type="text/css">
a {
cursor:pointer;
}
.booking_step {
cursor:pointer;
display:inline-block;
padding:0 20px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="steps">
<div class="booking_step complete" data-step="1">
<span class="bh_tittle">Clean Type</span>
</div>
<div class="booking_step no_hd dt_schl" data-step="2">
<span class="bh_tittle">Schedule Date</span>
</div>
<div class="booking_step no_hd dt_ad_t" data-step="3">
<span class="bh_tittle">Address</span>
</div>
</div>
<div class="booking-flow-section select_rm" data-section="1" style="display: block;">
<h1>Clean Type Form</h1>
<a class="step1">Next</a>
</div>
<div class="booking-flow-section schedule" data-section="2" style="display: none;">
<h1>Schedule Date Form</h1>
<a class="step2">Next</a>
</div>
<div class="booking-flow-section main_box" data-section="3" style="display: none;">
<h1>Address Form</h1>
<a class="step3">Next</a>
</div> <script type="text/javascript">
$(document).ready(function() {
$('.booking_step').on('click', function() {
var step = $(this).attr('data-step');
if(step == 1) {
$('.schedule').fadeOut();
$('.main_box').fadeOut();
$('.select_rm').fadeIn(2500);
}
if(step == 2) {
$('.select_rm').fadeOut();
$('.main_box').fadeOut();
$('.schedule').fadeIn(2500);
}
});
});
$(".step1").on('click', (function(e) {
$('.select_rm').fadeOut();
$('.schedule').fadeIn(2500);
}));
$(".step2").on('click', (function(e) {
$('.schedule').fadeOut();
$('.main_box').fadeIn(2500);
}));
$(".step3").on('click', (function(e) {
$('.minfo').fadeOut();
$('.main_box').fadeIn(2500);
}));
</script>

Instead of fadeOut() use hide().
fadeOut() has an animation on it.
Also for your jQuery, you could do a simple modification :
$(".step1, .step2, .step3").on('click', (function(e) {
$('.select_rm').hide();
$('.schedule').fadeIn(2500);
}));
This way, you don't duplicate your code.

Swapping "Custom Element" without calling connectedCallback

I am creating an election application that will require switching elements in a list. I have the following Custom Element Web Components. I have trimmed the irrelevant functions from the class for brevity.
// Position
// ---------------------------------------
class Position extends HTMLElement {
constructor(title) {
super();
this.title = title
}
connectedCallback() {
this.className = "portlet";
// Copy the HTML template
var template = document.querySelector("#template-e-position");
this.appendChild(document.importNode(template.content, true));
// Create the title tag
var title = this.querySelector(".title");
title.innerHTML = this.title;
// Create event listener for swap links
this.querySelector(".moveUp").addEventListener("click", function(e) {
swapWithPrevSibling(that);
});
this.querySelector(".moveDown").addEventListener("click", function(e) {
swapWithNextSibling(that);
});
}
}
customElements.define('e-position', Position);
// Candidate
// ---------------------------------------
class Candidate extends HTMLElement {
constructor(name) {
super();
this.name = name;
}
connectedCallback() {
// Copy the HTML template
var template = document.querySelector("#template-e-candidate");
this.appendChild(document.importNode(template.content, true));
// Create the title tag
var name = this.querySelector(".name");
name.innerHTML = this.name;
// Create event listener for delete link
var a = this.querySelector("a.delete");
var that = this;
a.addEventListener('click', function(e) { return that.delete(e) }, false);
}
delete(event) {
deleteNode(this);
}
}
customElements.define('e-candidate', Candidate);
I have the swap functions:
function swapWithPrevSibling (elm) {
elm.parentNode.insertBefore(elm,elm.previousSibling)
}
function swapWithNextSibling (elm) {
elm.parentNode.insertBefore(elm.nextSibling,elm)
}
I use the following template to build the Custom Elements:
<template id="template-e-position">
<div class="header">
<span class="title"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
</div>
<form class="add-candidate">
<input type="text" />
<input type="submit" value="Add candidate">
</form>
</template>
<template id="template-e-candidate">
<span class="name"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</template>
Since I create the Custom Elements from the HTML templates, I need to clone the templates in the connectedCallback() (since adding children in the constructor is disallowed in v1). The result of this is when I call the swap function to the "positions" in the list, it ends up re-cloning the template and adding in unnecessary DOM elements to both Position and Candidate elements.
For example, the result after swapping should be:
<e-position title="Vice-President" class="portlet">
<div class="header">
<span class="title">Vice-President</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
<e-candidate>
<span class="name">Evan</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate>
<e-candidate>
<span class="name">Steph</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate>
</div>
<form class="add-candidate">
<input type="text">
<input value="Add candidate" type="submit">
</form>
</e-position>
But it ends up being a jumbled:
<e-position title="Vice-President" class="portlet">
<div class="header">
<span class="title">Vice-President</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
<e-candidate>
<span class="name">Evan</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
<span class="name"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate><e-candidate>
<span class="name">Steph</span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
<span class="name"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</e-candidate>
</div>
<form class="add-candidate">
<input type="text">
<input value="Add candidate" type="submit">
</form>
<div class="header">
<span class="title"></span>
<div class="edit-menu">
<a class="moveUp">↑</a>
<a class="moveDown">↓</a>
<a class="delete">X</a>
</div>
</div>
<div class="candidate-list">
</div>
<form class="add-candidate">
<input type="text">
<input value="Add candidate" type="submit">
</form>
</e-position>
Is there a better way to clone the HTML templates so that I don't need to add elements in the connectedCallback? If not, how can I efficiently swap without bringing along all the extra elements? Note that I do not want to use jQuery as I want a lightweight application.
I have seen this and it doesn't work because it ends up calling the connectedCallback and inserting How to swap DOM child nodes in JavaScript?

There are several solutions:
You can use a flag to see if it's the first time the callback is called, and insert the template only if the flag is not set yet.
customElements.define('e-candidate', class extends HTMLElement {
connectedCallback() {
if (!this.init) {
var template = document.querySelector('#template-e-candidate')
this.appendChild(template.content.cloneNode(true))
this.querySelector('.moveUp')
.onclick = () =>
this.previousElementSibling && this.parentElement.insertBefore(this, this.previousElementSibling)
this.init = true
}
}
})
e-candidate { display:block }
<template id="template-e-candidate">
<slot></slot>
<button class="moveUp">↑</button>
</template>
<e-candidate>First</e-candidate>
<e-candidate>Second</e-candidate>
You can use CSS flexbox with CSS order property to change the order of the elements without using insertBefore().

how to rotationally change the content of 'div' on mouseover on each 'li'

whenever, I mouseover on the 'li', then, that particular 'li' attribute need to changed to 'clsSect'. On the other hand, based on the list[li] selection, the div content has to set to 'display:block' other should changed to 'display:none'.
if the first 'li' selected, then, the first 'div' need to be selected, likewise
if the second 'li' selected, then, the second 'div' need to be selected,
This below code does not work as expected. Any help please?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="js/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div class="mainBodyContent" id="Contact">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID3">
<p><span>sample3</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div class="mainBodyContent" id="About">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID2">
<p><span>sample3</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div class="mainBodyContent" id="Careers">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID1">
<p><span>sample1</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div id="selRound">
<ul class="clearfix rouncorner">
<li id="fpn1" class="myList clsSect"></li>
<li id="fpn2" class="myList"></li>
<li id="fpn3" class="myList"></li>
</ul>
</div>
<script>
var $hover = $("div.perimgleft img");
$hover1 = $("#Contact div[class='perimgleft'] div");$hover2 = $("#About div[class='perimgleft'] div");$hover3 = $("#Careers div[class='perimgleft'] div");
$("#selRound .myList").mouseover(function(evt) {
if(evt.currentTarget.id == 'fpn1'){
$hover1.css('display', 'block');
($hover2, $hover3).css('display', 'none');
}
else if(evt.currentTarget.id == 'fpn2'){
($hover1, $hover3).css('display', 'none');
$hover2.css('display', 'block');
}else {
($hover1, $hover2).css('display', 'none');
$hover3.css('display', 'block');
}
});
$("#selRound .myList").mouseout(function(evt) {
});
</script>
</body>
</html>

Need to clean up the code.
In HTML we set the ID for the contents we should hide/show
...
<div id="fpn1" class="perimgleft">
...
<div id="fpn2" class="perimgleft">
...
<div id="fpn3" class="perimgleft">
...
Then we use them as data attributes for list elements
<li data-show="#fpn1" class="myList">fpn1</li>
<li data-show="#fpn2" class="myList">fpn2</li>
<li data-show="#fpn3" class="myList">fpn3</li>
Then with jquery we hide all contents
$('.perimgleft').hide();
So that we'll show the right content related to the hovered element:
$('ul.clearfix.rouncorner li').mouseover(function(){
$('ul.clearfix.rouncorner li').removeClass("clsSect");
$(this).addClass("clsSect");
var contentId = $(this).data("show");
$('.perimgleft').hide();
$(contentId).show();
})
DEMO HERE

try this :
var $hover = $("div.perimgleft img");
$hover1 = $("#Contact div[class='perimgleft']>div");$hover2 = $("#About div[class='perimgleft']>div");$hover3 = $("#Careers div[class='perimgleft']>div");
$("#selRound .myList").mouseover(function(evt) {
if(evt.currentTarget.id == 'fpn1'){
$hover1.css('display', 'block');
$hover2.css('display', 'none');
$hover3.css('display', 'none');
}
else if(evt.currentTarget.id == 'fpn2'){
$hover3.css('display', 'none');
$hover1.css('display', 'none');
$hover2.css('display', 'block');
}else {
$hover2.css('display', 'none');
$hover1.css('display', 'none');
$hover3.css('display', 'block');
}
});
$("#selRound .myList").mouseout(function(evt) {
});

Are you looking something like this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
.mainBodyContent{
display: none;
}
</style>
</head>
<body>
<div id="selRound">
<ul class="clearfix rouncorner">
<li id="fpn1" class="myList">contact</li>
<li id="fpn2" class="myList">about</li>
<li id="fpn3" class="myList">careers</li>
</ul>
</div>
<div class="mainBodyContent" id="Contact">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID3">
<p><span>sample1</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<div class="mainBodyContent" id="About">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID2">
<p><span>sample2</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<div class="mainBodyContent" id="Careers">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID1">
<p><span>sample3</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<script>
var hover1 = $("#Contact");
var hover2 = $("#About");
var hover3 = $("#Careers");
$(".myList").mouseout(function(evt) {
$('.mainBodyContent').css('display','none');
});
$(".myList").mouseover(function(evt) {
var currentId=$(this).attr('id');
if(currentId=='fpn1'){
hover1.css({'display':'block'});
}
if(currentId=='fpn2'){
hover2.css({'display':'block'});
}
if(currentId=='fpn3'){
hover3.css({'display':'block'});
}
});
</script>
</body>
</html>

Categories

Resources