Solved

Issues with emptying and appending content to DOM

Posted on 2014-10-03
2
128 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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)

756 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