Solved

Issues with emptying and appending content to DOM

Posted on 2014-10-03
2
124 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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

705 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

17 Experts available now in Live!

Get 1:1 Help Now