[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 140
  • Last Modified:

Issues with emptying and appending content to DOM

I'm currently building out a work portfolio section for my personal website. The url for the work page can be viewed here:  jacobtarr.github.io/work.

The jQuery code for my project is:
/* Set Slick slider settings
=============================== */
slickSliderConfig = function() {

	var projectGalleryArrowPrev = '<a><img class="project-gallery-arrow-prev" src="../img/work/arrow-left-btn.svg"></a>'
	var projectGalleryArrowNext = '<a><img class="project-gallery-arrow-next" src="../img/work/arrow-right-btn.svg"></a>'

	$('.project-gallery').slick({
		speed: 300,
		slide: 'figure',
		fade: true,
		speed: 600,
		cssEase: 'linear',
		prevArrow: projectGalleryArrowPrev,
		nextArrow: projectGalleryArrowNext
	});

	$('.more-projects-gallery').slick({
		speed: 300,
		slide: '.more-projects-gallery-img-container',
		infinite: true,
		slidesToShow: 4,
		slidesToScroll: 4,
		prevArrow: projectGalleryArrowPrev,
		nextArrow: projectGalleryArrowNext,
		responsive: [
			{
				breakpoint: 800,
				settings: {
					slidesToShow: 3,
					slidesToScroll: 3,
					infinite: true
				}
			},
			{
				breakpoint: 680,
				settings: {
					slidesToShow: 2,
					slidesToScroll: 2,
					infinite: true
				}
			},
			{
				breakpoint: 410,
				settings: {
					slidesToShow: 1,
					slidesToScroll: 1,
					infinite: true
				}
			}
		]
	});
}

/* Initialize slider
=============================== */
$(function(){
	slickSliderConfig();
});

/* Load project content
=============================== */

$(function loadProjectContent() {
	var $projectContainer = $('.project-container');
	var $moreProjectsGalleryImageContainer = $('.more-projects-gallery-img-container');
	var $moreProjectsGalleryImage = $('.more-projects-gallery-img-container img');

	// Select specific projects in project-container
	var $projectGregMauz = $('#project-gregmauz');
	var $projectPersonal = $('#project-personal');
	var $projectSyllabus = $('#project-syllabus');

	// Select project thumbnails in more-projects-gallery
	var $thumbnailGregMauz = $('.more-projects-gallery-img-container .thumbnail-gregmauz');
	var $thumbnailPersonal = $('.more-projects-gallery-img-container .thumbnail-personal');
	var $thumbnailSyllabus = $('.more-projects-gallery-img-container .thumbnail-syllabus');

	// Detach the non-default specific projects from DOM
	$projectPersonal.detach();
	$projectSyllabus.detach();

	// When user clicks Greg Mauz thumbnail image
	$thumbnailGregMauz.on("click", function(){
		$projectContainer.empty();
		$projectContainer.append($projectGregMauz);
	});

	// When user clicks Personal thumbnail image
	$thumbnailPersonal.on("click", function(){
		$projectContainer.empty();
		$projectContainer.append($projectPersonal);
	});

	// When user clicks Syllabus thumbnail image
	$thumbnailSyllabus.on("click", function(){
		$projectContainer.empty();
		$projectContainer.append($projectSyllabus);
	});

});

Open in new window


The HTML consists of:
<section class="work-section">
	<div class="ribbon-container">
		<div class="ribbon">
			<div class="ribbon-content">
				<h6>Work</h6>
			</div>
		</div>
	</div>
	<div class="project-container">
		<div id="project-gregmauz">
	<div class="project-gallery">
		
		<figure>
			<img src="../img/projects/gregmauz/imac-preview-gregmauz.png" alt="imac-preview-gregmauz">
		</figure>
		
		<figure>
			<img src="../img/projects/gregmauz/mobile-preview-gregmauz.png" alt="mobile-preview-gregmauz">
		</figure>
		
	</div>
	<article class="project-info">
		<h2>Greg Mauz</h2>
		<ul class="project-facts">
			
			<li class="project-fact">
				<div class="project-fact-title">
					Status
				</div>
				<div class="project-fact-description">
					In-Progress
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Current Repository/URL
				</div>
				<div class="project-fact-description">
					https://github.com/jacobtarr/gregmauz
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Technologies Used
				</div>
				<div class="project-fact-description">
					HTML, CSS, jQuery, Jekyll
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Description of Project
				</div>
				<div class="project-fact-description">
					Greg Mauz is a local radio talent in my hometown. This is a static website generated by Jekyll that contains his resume and audio clips. Uses flexbox for some of the layout and a little bit of Bootstrap.
				</div>
			</li>
			
		</ul>
	</article>
</div>
		<div id="project-personal">
	<div class="project-gallery">
		
		<figure>
			<img src="../img/projects/personal/imac-preview-personal.png" alt="imac-preview-personal">
		</figure>
		
		<figure>
			<img src="../img/projects/personal/mobile-preview-personal.png" alt="mobile-preview-personal">
		</figure>
		
	</div>
	<article class="project-info">
		<h2>Personal Porfolio</h2>
		<ul class="project-facts">
			
			<li class="project-fact">
				<div class="project-fact-title">
					Status
				</div>
				<div class="project-fact-description">
					Completed
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Current Repository/URL
				</div>
				<div class="project-fact-description">
					https://github.com/jacobtarr/personal
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Technologies Used
				</div>
				<div class="project-fact-description">
					HTML, CSS, jQuery, Jekyll
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Description of Project
				</div>
				<div class="project-fact-description">
					Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
				</div>
			</li>
			
		</ul>
	</article>
</div>
		<div id="project-syllabus">
	<div class="project-gallery">
		
		<figure>
			<img src="../img/projects/syllabus/imac-preview-syllabus.png" alt="imac-preview-personal">
		</figure>
		
		<figure>
			<img src="../img/projects/syllabus/mobile-preview-syllabus.png" alt="mobile-preview-personal">
		</figure>
		
	</div>
	<article class="project-info">
		<h2>Personal Porfolio</h2>
		<ul class="project-facts">
			
			<li class="project-fact">
				<div class="project-fact-title">
					Status
				</div>
				<div class="project-fact-description">
					Completed
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Current Repository/URL
				</div>
				<div class="project-fact-description">
					https://github.com/jacobtarr/syllabus
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Technologies Used
				</div>
				<div class="project-fact-description">
					HTML, CSS, jQuery, Jekyll
				</div>
			</li>
			
			<li class="project-fact">
				<div class="project-fact-title">
					Description of Project
				</div>
				<div class="project-fact-description">
					Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
				</div>
			</li>
			
		</ul>
	</article>
</div>
	</div>
	<div class="more-projects-container">
		<h2>Check out my other projects</h2>
		<div class="more-projects-gallery">
			
			<div class="more-projects-gallery-img-container">
				<figure>
					<img class="thumbnail-gregmauz" src="../img/projects/gregmauz/thumbnail-preview-gregmauz.png" alt="thumbnail-preview-gregmauz">
					<span></span>
				</figure>
			</div>
			
			<div class="more-projects-gallery-img-container">
				<figure>
					<img class="thumbnail-personal" src="../img/projects/personal/thumbnail-preview-personal.png" alt="thumbnail-preview-personal">
					<span></span>
				</figure>
			</div>
			
			<div class="more-projects-gallery-img-container">
				<figure>
					<img class="thumbnail-syllabus" src="../img/projects/syllabus/thumbnail-preview-syllabus.png" alt="thumbnail-preview-syllabus">
					<span></span>
				</figure>
			</div>
			
		</div>
	</div>
</section>

Open in new window

What the jQuery is doing is pretty simple. I'm detaching multiple child nodes (except first one) from the class .project-container. Then I'm reattaching them by appending them to the class .project-container when a user clicks on a thumbnail image in the bottom slider (the more projects slider). However, I've come across a couple problems.

The main problem I'm having with this code is that when a user clicks on an image in the "more-projects" gallery, the slider below the project content, the main slider's (the top slider) positioning gets all messed up when a projects gets appended to the ".project-container". Interestingly, the position gets reset (i.e. it gets re-centered) after a user clicks those navigation arrows.

Another major problem I'm having is that when a user clicks on an image more than once in the "more-projects" gallery, the top slider's navigation functionality doesn't work anymore.

If someone can help me a find a solution to this problem, I would really appreciate it. Refactor it if need be. I'm just struggling to find a simple solution to this where I can
0
journeybegins
Asked:
journeybegins
1 Solution
 
GaryCommented:
Ermm why not just hide/show them?
0
 
journeybeginsAuthor Commented:
@Gary Thanks I ended up taking your advice and it worked great
0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Tackle projects and never again get stuck behind a technical roadblock.
Join Now