We Keep Coding

How do I use '.replaceWith' to load data from another html page?

Trying to load data from my news page in my navigation menu using .load, .find and .replaceWidth but my javascript code does not fetch the data at all. Can any developer tell me what I am doing wrong?
JAVASCRIPT FILE
jQuery('#latestnews').load('latest-news.html' + '.case a
h2:first',function(data) {
jQuery('#latestnews').find('h2').replaceWith('');
});
jQuery('#headline').load('latest-news.html' + '.case a p:first',function(data) {
jQuery('#headline').find('span').replaceWith('');
});
jQuery('#newsimg').load('latest-news.html' + '.case a
img:first',function(data) {
jQuery('#newsimg').find('img').replaceWith('');
});
HTML Navigation menu where I would like data to be fetched to.
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2><!--Where the news data would go--></h2></div>
<a href="#" id="newsimg">
<div class="fll" id="headline">
<span><!--Where the news data would go--></span>
<p class="reserved">Read The Article</p>
</div>
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="" class="flr">
</a>
</li>
</ul>
HTML Code that needs fetching from my latest-news.html and to appear in navigation menu
<div class="case newsarticle">
<a href="#" target="_blank">
<img src="assets/img/latest-news.jpg" alt="" title="" width="326" height="245">
<h2>Content Title To Appear in Navigation Menu...</h2>
<p>Content Content Content Content Content Content Content Content Content Content Content Content...</p>
<span>Read More</span>
</a>
</div>
The data just doesn't appear at all. If I remove the concatenation (' + ') between the 'latest-news.html' + '.case a h2:first' I still get the same response.

I edited my javascript file to this:-
$(document).ready(function(){
jQuery('#latestnews').load('latest-news.html .case a h2:first');
jQuery('#latestnews').find('h2').replaceWith('');
});
$(document).ready(function(){
jQuery('#headline').load('latest-news.html .case a p:first');
jQuery('#headline').find('p span').replaceWith('');
});
$(document).ready(function(){
jQuery('#newsimg').load('latest-news.html .case a img:first');
jQuery('#newsimg').find('img').replaceWith('');
});
and changed my HTML file to this:-
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2></h2></div>
<a href="#">
<div class="fll">
<div id="headline">
<p><span></span></p>
<p class="reserved">Read The Article</p>
</div>
</div>
<div id="newsimg" class="flr">
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="">
</div>
</a>
</li>
</ul>
I am not sure if my Javascript is technically correct however I have managed to create the desired effect I was looking for. Removing the 'function(data)' seemed to be the key.

Magnific popup galleries - isolate from each other

I have 3 main images being displayed. I want each image, when clicked, to popup its own individual gallery. If each gallery has 5 images, when the main image is clicked, it should show 1 of 5, etc. Currently when each main photo is clicked the gallery popup shows 1 of 15 images - so it's including all images from all 3 galleries.
<div class="row">
<div class="gallery">
<a href="img/gallery1/1.jpg" >
<img src="img/MainImage1.jpg">
<div class="caption">Gallery for image 1</div> </a>
<a href="img/gallery1/2.jpg" ></a>
<a href="img/gallery1/3.jpg" ></a>
<a href="img/gallery1/4.jpg" ></a>
<a href="img/gallery1/5.jpg" ></a>
</div>
<div class="gallery">
<a href="img/gallery2/1.jpg" >
<img src="img/MainImage2.jpg">
<div class="caption">Gallery for image 2</div></a>
<a href="img/gallery2/2.jpg" ></a>
<a href="img/gallery2/3.jpg" ></a>
<a href="img/gallery2/4.jpg" ></a>
<a href="img/gallery2/5.jpg" ></a>
</div>
<div class="gallery">
<a href="img/gallery3/1.jpg" >
<img src="img/MainImage3.jpg">
<div class="caption">Gallery for image 3</div></a>
<a href="img/gallery3/2.jpg" ></a>
<a href="img/gallery3/3.jpg" ></a>
<a href="img/gallery3/4.jpg" ></a>
<a href="img/gallery3/5.jpg" ></a>
</div>
My JS:
$('.gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.'
}
});
I have read this in the documentation:
Multiple galleries
To have multiple galleries on a page, you need to create a new
instance of Magnific Popup for each separate gallery. For example
<div class="gallery">
Open image 1 (gallery #1)
Open image 2 (gallery #1)
</div>
<div class="gallery">
Open image 1 (gallery #2)
Open image 2 (gallery #2)
Open video (gallery #2). Class mfp-iframe forces "iframe" content type on this item.
</div>
Js:
$('.gallery').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
type: 'image',
gallery: {
enabled:true
}
});
});
But this is not clear to me. How do you differentiate the galleries? Or should it know where to pull from automatically?
Do I need to call one "popup-gallery2"? Would I then need a separate instance of the javascript to control popup-gallery2, etc?
Or is there something I'm missing? Is what I'm asking for possible using this plugin or is there a better way to accomplish this?
Thank you for reading all this - I hope it is clear what I'm asking.

Good question, it was a little tricky, as the documentation wasn't that in-depth on the multiple galleries.
It worked for me this way: Put each gallery inside the gallery-link div. Using jQuery find() method open the child gallery of the selected gallery-link. Then initialize containers for all your galleries. See code below:
HTML:
<div class="gallery-link">
<img src="http://placehold.it/200x100/54c0c7?text=Gallery-1" alt="" />
<div id="gallery1" class="gallery">
</div>
</div>
<div class="gallery-link">
<img src="http://placehold.it/200x100/fef65b?text=Gallery-2" alt="" />
<div id="gallery2" class="gallery">
</div>
</div>
JavaScript:
$('.gallery-link').on('click', function () {
$(this).find('.gallery').magnificPopup('open');
});
$('.gallery').each(function () {
$(this).magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true
}
});
});
Working example: https://codepen.io/pen/BRPJdw
Good luck!

Encountered same problem for my work. Here is the answer which working fine.
<div class="caption jsPop-1">
Gallery for image 1
<a href="img/gallery1/2.jpg" ></a>
<a href="img/gallery1/3.jpg" ></a>
<a href="img/gallery1/4.jpg" ></a>
<a href="img/gallery1/5.jpg" ></a>
</div>
<div class="caption jsPop-2">
Gallery for image 2
<a href="img/gallery1/2.jpg" ></a>
<a href="img/gallery1/3.jpg" ></a>
<a href="img/gallery1/4.jpg" ></a>
<a href="img/gallery1/5.jpg" ></a>
</div>
$(function(){
$('[class*="jsPop-"]').each(function(){
$(this).magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled:true
}
});
});
});
Just make each gallery container is unique, then select by class and apply popup.

Embed YouTube Playlist plugin with sidebar list visible

I know that the YouTube API does not provide functionality to display a playlist sidebar similar to the native YouTube playlist at this time.
Through searching I found a promising plugin to imitate this behavior. https://github.com/jakiestfu/Youtube-TV
Unfortunately, this plugin no longer works with YouTube's API v.3, however, Giorgio003 created a fork with API v.3 support.
https://github.com/Giorgio003/Youtube-TV
I have followed all the installation instructions, but cannot seem to get it to work.
This is my page:
<!DOCTYPE html>
<html>
<head>
<link href="src/ytv.css" type="text/css" rel="stylesheet" />
<script src="src/ytv.js" type="text/javascript"></script>
</head>
<body>
<div>
Testing YouTube Playlist
</div>
<div id="YourPlayerID"></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var controller = new YTV('YourPlayerID', {
channelId: 'UCBSvZIJlXJR7SE_KNvOiiGg'
});
});
</script>
</body>
</html>
In ytv.js I included my API key
(function(win, doc) {
'use strict';
var apiKey = 'ThisIsARealKeyForMyChannel';
var YTV = YTV || function(id, opts){...
The ytv.js script seems to be running fine. It correctly finds my channel and the two sample videos I have uploaded. The rendered HTML for #YourPlayerID looks like this:
<div id="YourPlayerID" class="ytv-canvas">
<div class="ytv-relative">
<div class="ytv-video">
<iframe id="ytv-video-playerYourPlayerID0" class="ytv-video-playerContainer" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/VqWWn-NrebU?enablejsapi=1&origin=http%3A%2F%2Fdevcf9.acm.org&controls=1&rel=0&showinfo=0&iv_load_policy=3&autoplay=0&theme=dark&wmode=opaque&widgetid=1"></iframe>
</div>
<div class="ytv-list">
<div class="ytv-list-header">
<a href="//youtube.com/channel/UCBSvZIJlXJR7SE_KNvOiiGg" target="_blank">
<img src="https://yt3.ggpht.com/-IGpxPi95eQQ/AAAAAAAAAAI/AAAAAAAAAAA/z-D0JYX_Wog/s88-c-k-no-mo-rj-c0xffffff/photo.jpg">
<span><i class="ytv-arrow down"></i>My Name</span>
</a>
</div>
<div class="ytv-list-inner">
<ul>
<li class="ytv-active">
<a href="#" data-ytv="VqWWn-NrebU" class="ytv-clear">
<div class="ytv-thumb">
<div class="ytv-thumb-stroke"></div>
<span>00:42</span>
<img src="https://i.ytimg.com/vi/VqWWn-NrebU/mqdefault.jpg">
</div>
<div class="ytv-content">
<b>Skin 4144</b>
<span class="ytv-views">1 Views</span>
</div>
</a>
</li>
<li>
<a href="#" data-ytv="bAWFo5ur9fc" class="ytv-clear">
<div class="ytv-thumb">
<div class="ytv-thumb-stroke"></div>
<span>00:16</span>
<img src="https://i.ytimg.com/vi/bAWFo5ur9fc/mqdefault.jpg">
</div>
<div class="ytv-content"><b>Nebula 6044</b>
<span class="ytv-views">0 Views</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
But no video or playlist appears on the page. Can anyone see what I am missing?

I was able to solve the problem. All the elements created from the plugin set the height to 100%. The element <div id="YourPlayerID"></div> had a height of 0, therefore, all its children had a height of 0. Once I gave the #YourPlayerID element a height the playlist appeared.

AngularJS - Video Loading

I have a template whereby I load details into via a JSON file. The content that is loaded in accompanies a video embed. Everything from the JSON files are working great, but the same video appears on every item. Is there a way that I can load individual videos assigned to each JSON file?
Here is the template:
<div class="container" ng-repeat="guide in guides">
<div class="row">
<div class="col-md-12">
<br/>
<p><a ng-href="#/"><span class="glyphicon glyphicon-home"></span> Back to Guide List</a></p>
<h1><span class="glyphicon glyphicon-play-circle"></span> Watch {{ guide.title }}</h1>
<span>{{ guide.info }}</span><br/><br/>
</div>
<div class="col-md-12">
<video video="marvel">
</video><!--This is the bit I'm having an issue with -->
</div>
<div class="col-md-6">
<h3><span class="glyphicon glyphicon-education"></span> Background to {{ guide.title }}</h3>
<span>{{ guide.background }}</span><br/><br/>
</div>
<div class="col-md-6">
<h3><span class="glyphicon glyphicon-save"></span> Downloads for {{ guide.title }}</h3><br/>
<a ng-href="{{ guide.pdf }}" target="_blank"><span class="glyphicon glyphicon-floppy-save"></span> Download Help Guide PDF</a><br/><br/>
<a ng-href="{{ guide.video }}" target="_blank"><span class="glyphicon glyphicon-floppy-save"></span> Download Video</a>
</div>
</div>
</div>
I'm unable to bind any data into the video tag (which is a directive I've built) - so does anyone have any suggestions?
Thanks in advance.

It should help if you reference a different video in each repeat iteration ;-)
<div class="col-md-12">
<video src="{{guide.my_video_uri}}">
</video>
</div>
If src=".." doesn't work, try ng-src="..".

thanks for the suggestion. I have in fact, tried this - the video tag is a little misleading; as it a custom directive called "video".
<video video="{{ guide.video }}">
</video>
this just brings up the error: Cannot GET /%7B%7B%20videoUrl%20%7D%7D

The directive brings in youtube embeds - which I am using for testing purposes first. The intention was to adjust the trustAsResourceUrl to another form of embed afterwards. The directive code is here below (i have changed the tag from video to video-player)
guideApp.directive('videoPlayer', function ($sce) {
'use strict';
return {
restrict: 'E',
scope: { video: '=' },
replace: true,
template: '<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" width="100%" height="100%" src="{{ videoUrl }}" frameborder="0" allowfullscreen></iframe></div>',
link: function (scope) {
scope.$watch('videoPlayer', function (videoLink) {
if (videoLink) {
scope.videoUrl = $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + videoLink);
}
});
}
};
});

I have 2 js functions and one is canceling out the other

I looked through the FAQ but couldn't figure out what was causing this (in js). I'm trying to get something live soon and I'm bypassing better animation for the time being, possibly also AJAX.
What I'm going is bringing two external php pages a includes to the current page, one is a gallery slider and the other is where the gallery imagery will appear. Here is a link to the page I'm currently testing so you can see:
http://www.chrisjohndesigns.com/artwork-conventions.php
So the code I've used has been simple replacement .innerHTML calls where the left and right arrows call the next gallery div and then the thumbnails within that gallery call the artwork that appears below. The left and right arrows work just fine but as soon as any of the thumbnails are clicked (and they do work properly) the left and right arrows stop working and you're stuck on whatever frame you chose from.
Here is the code from the conventions page:
<div id="field">
<div id="gallery-callout">
<div class="thumbs-slider-field-container" id="generic-slider">
<div class="thumbs-slider-field" >
<div id="prev">
<img src="images/gallery-scroll-left.png" width="42" height="120" />
</div>
<div id="thumbs-slider">
<img src="images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
<img src="images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
<img src="images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/>
<img src="images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
<img src="images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/>
</div>
<div id="next">
<img src="images/gallery-scroll-left.png" width="42" height="120" onclick="callSlider('conventions2')" />
</div>
</div>
</div>
</div>
<div class="rule">
</div>
<div class="entry" style="margin-bottom:0px;">
<h4 style="color:#ffffff; margin:0px;">| artwork > conventions</h4>
</div>
<div class="gallery-frame" id="generic">
<h1 style="margin-top:5px; margin-bottom:10px;">CONVENTION ARTWORK</h1>
<div class="artwork">
<img src="images/artwork/portfolio-design/logos/atomic-heart/atomicH-heart_0910.png" />
</div>
<div class="rule">
</div>
<p>Here you will find arwork produced for (or for sale at) the conventions that Atomic Glam attends. Our premier convention is Anime Weekend Atlanta held in Atlanta each September.<br />(Above: The Atomic Heart Logo of Atomic Glam)</p>
<div style="display:none;">
<?php include("artwork-gallery-digital.php"); ?>
<?php include("sliders/slider-artwork-conventions.php"); ?>
</div>
</div>
The js I'm using:
<script type="text/javascript">
altViews = function(next_img) {
document.getElementById("bigPicture").src = next_img;
}
function changeDiv(id) {
var target = document.getElementById('generic');
var id = document.getElementById(id);
target.innerHTML = id.innerHTML;
}
function callSlider(slides) {
var target2 = document.getElementById('generic-slider');
var slides = document.getElementById(slides);
target2.innerHTML = slides.innerHTML;
}
</script>
An example of the slider:
<div class="thumbs-slider-field" id="conventions1">
<div id="prev">
<img src="../images/gallery-scroll-left.png" width="42" height="120" />
</div>
<div id="thumbs-slider">
<img src="../images/thumbs/digital-art/thumb-space-oddity.jpg" id="thumb-space-odity" onclick="changeDiv('space-oddity')"/>
<img src="../images/thumbs/digital-art/thumb-atomic-nurse.jpg" id="thumb-nurse" onclick="changeDiv('nurse')"/>
<img src="../images/thumbs/digital-art/thumb-zombie-make-over.jpg" id="thumb-zombie-makeover" onclick="changeDiv('zombie-makeover')"/>
<img src="../images/thumbs/digital-art/thumb-fanart-trigun.jpg" id="thumb-trigun" onclick="changeDiv('trigun')"/>
<img src="../images/thumbs/digital-art/thumb-shadowrun.jpg" id="thumb-shadowrun" onclick="changeDiv('shadowrun')"/>
</div>
<div id="next">
<img src="../images/gallery-scroll-left.png" width="42" height="120" onclick="callSlider('conventions2')" />
</div>
</div>
Any thoughts why one is canceling out the other?