Solved

Issues with emptying and appending content to DOM

Posted on 2014-10-03
2
126 Views
Last Modified: 2014-10-07
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
Comment
Question by:journeybegins
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40360721
Ermm why not just hide/show them?
0
 

Author Comment

by:journeybegins
ID: 40367342
@Gary Thanks I ended up taking your advice and it worked great
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now