We Keep Coding

Dynamic content - transitions NOT working

Alright let's see if I can explain this properly.
I am writing my own jQuery photo gallery. It loads the contents of the gallery using AJAX, calling upon a Web Method which returns a string which is an array filled with JSON objects containing data (i.e. the file name and the file path of the image and the file path for the image's thumbnail) on every file in the folder passed to it.
Like 'a so:
$(".Title").click(function (e) {
Populate($(this).text());
function Populate(folder) {
$.ajax({
type: "POST",
url: "Filenames.asmx/GetFiles",
contentType: "application/json; charset=utf-8",
data: '{ "folderName" : "'+folder+'"}',
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
}
...//more code follows
Anyway, so, we have our OnSuccess() function:
function OnSuccess(response) {
var $thumbs = $('#Gallery_Top .viewPane .thumbPanel');
images = $.parseJSON(response.d);
$thumbs.children().each(function () {
//$(this).animate({ 'width': '0px', 'opacity': '0' }, 500).remove();
$(this).transition({ opacity: 0 }).remove();
});
//make sure the thumb reel resets to its original position
$thumbs.css('left', '0px');
for (var i = 0; i < images.length; i++) {
InsertHTML(images[i].thumbHref);
}
}
So far so good.
In the InsertHTML() function, I have to do a few things...
function InsertHTML(data) {
//create the thumbnail image
var $thumb = $('<img src="' + data + '" alt=""/>');
//set its default class to inactive
$thumb.addClass('inactive');
//bind a function to the thumbnail's click event
$thumb.bind("click", function () {
//make sure we have the current image assigned
//for navigation purposes.
$currentImage = $(this);
//remove the main image from the viewing pane
$('#Gallery_Top .viewPane .mainImage .showImage').children().animate({'opacity':'0'},500,'easeOutSine').remove();
//set all of the thumbnails to inactive
$(this).parent().children().each(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(this).addClass('inactive');
}
});
//set the clicked thumbnail active
$(this).addClass('active');
//get the URL for the related image
var href = data.replace('Thumbs\\', '');
href = href.replace('_thumb', '');
var $image = $('<img src="' + href + '" alt=""/>');
$image.addClass('mainImg');
$('#Gallery_Top .viewPane .mainImage .showImage')
.append($image)
.animate({ 'opacity': '1' }, 500, 'easeInSine');
});
$('#Gallery_Top .viewPane .thumbPanel').append($thumb);
}
Okay, so anyway, what's not working is every transition after the first time I click a thumbnail image. The first time I click a thumbnail, the photo fades in nicely. Ever after that, there's no transition at all.
Been yanking my hair out for about 3 hours trying to figure out a way around.
By the way, here's some CSS.
.mainImg{
display: block;
width: 75%;
height: 75%;
margin: 0 auto;
margin-top: 150px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}

EUREKA SUCCESS I DID IT.
It never fails. I beat my head against a wall for three or four hours, trying so hard not to have to come on here and ask, then half an hour after I finally break down and ask a question, I figure it out. It's probably motivation from the shame of not knowing how to do something.
var $image = $('<img src="' + href + '" alt=""/>');
$image.on('load', function () {
$(this).animate({ 'opacity': '1' }, 500, 'easeOutSine');
});
$image.addClass('mainImg');
$image.css('opacity', '0');
$('#Gallery_Top .viewPane .mainImage .showImage').append($image);

Popup Twitter Bootstrap Popover not showing at correct place after image load

I have a problem where my pointer tag is not at the correct place after loading the image.
I noticed once I hover over the image it is in the correct place, but because the image only loads after the javascript ran, it is pushing the "pointer tag" down if the image is of a certain width and height.
$("#prodImage").popover(
{
title: "#Title Here",
trigger:"hover",
content: "<img src='path_to_image' />",
placement:'right'
});
Excample of incorrect look:
Should be at the logo where the watch is.

That's the default behaviour.
The arrow will automatically be at the center of the box as in CSS, it's top property is 50%.
.popover.right .arrow { top: 50%;}.
You need to position it manually.

You can also try to fix popover to align itself again after loading the image. See comment in https://github.com/twbs/bootstrap/issues/5235#issuecomment-29806787

This worked for me. Another way to preload the image, but all in javascript.
var img = new Image();
img.src = imgSrc;
img.addEventListener('load', function() {
//wait until image load is done before loading popover,
//so popover knows image size
$myJQueryThumbnailImgObj.popover({
html: true,
trigger: "hover",
placement: "right",
delay: { "show": 300, "hide": 100 },
content: "<img src='" + imgSrc + "' style='height:" + img.height + "'; width:'" + img.width + "'/>",
});
}, false);

If you've got unloaded images in your popover, you may need to preload them.
Here's a little preloading trick that worked for me.
HTML
?
<img class="preload" src="/static/img/cc_cvv.png">
CSS
.preload {
position: absolute;
visibility: hidden;
}
Javascript
$('#show_cc_cvv_help').popover({
html: true,
content: '<img src="/static/img/cc_cvv.png" alt="CVV Code">'
});

Triggering a video autoplay based on scroll position

I am writing a script that uses the Wipe animation from the scrollorama.js script. I am hoping to be able to implement a video to autoplay at certain markers in the scroll depth: ie, when a video page has wiped out another, and is now fully viewable. I have figured out how to measure scroll depth, i am successfully logging it in my console. I have figured out how to measure how deep i have scrolled, but maybe i am so tired, i don't know how to ask the video to play automatically at the scroll depth. I hope this is a legal question, and that I can get some assistance. Has anyone out there tried this before? Here is the code thus far.
enter code here $(document).ready(function() {
$(window).scroll(function(e) {
var scrollAmount = $('body').scrollTop();
console.log(scrollAmount);
});
var controller = $.superscrollorama();
var pinDur = 800;
// create animation timeline for pinned element
var pinAnimations = new TimelineLite();
//pinAnimations.append([TweenMax.to($('#green'), .5, {css:{top:0}})], .5)
pinAnimations.append([TweenMax.to($('#intromovie'), .5, {css:{top:0}})], .5 )
pinAnimations.append([TweenMax.to($('#red'), .5, {css:{top:0}})], .5)
pinAnimations.append([TweenMax.to($('#blue'), .5, {css:{top:0}})], .5 )
pinAnimations.append([TweenMax.to($('#movie1'), .5, {css:{top:0}})], .5);
pinAnimations.append([TweenMax.to($('#history1'), .5, {css:{top:0}})], .5);
//pinAnimations.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));
controller.pin($('#content_wrapper'), pinDur, {
anim:pinAnimations,
onPin: function() {
$('#content_wrapper').css('height','100%');
},
onUnpin: function() {
$('#content_wrapper').css('height','1000px');
}
});
});

I figured this out, so i answer my own question with the help of a lot of other answers patched together here!
If anyone is interested, the html was simple:
<div id="videoHolder"></div>
Jquery was also simple:
$(function(){
$(window).scroll(function(e) {
var scrollAmount = $('body').scrollTop();
console.log(scrollAmount);
if(scrollAmount >="theamountyouwant" && scrollAmount <= "theotheramountyouwant") {
$("#videoHolder").html(
'<video width="1200" height="700" autoplay>' +
'<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.webm" type="video/webm"></source>' +
'<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.mp4" type="video/mp4"></source>' +
'</video>');

So in this case we can use an integrated JavaScript API namely Intersection Observer. Now our main task is to play the video at an particular position, so for this task we will set up a trigger on the intersectionRatio value.
const images = document.querySelectorAll(".mydivTriggerClass");
vid = document.getElementById("myVideoId");
observer = new IntersectionObserver((entries) => {
console.log(entries);
if (entry.intersectionRatio > 0.34) {
vid.play();
} else {
entry.target.style.animation = "none";
}
});
observer.observe(image);
NOTE: Please note that the console log entries are optional - its just so that when you inspect you get the info showing where this intersection ratio came from.
For a perfect working example please visit this link.

just add the script from below and add playonscroll param to your video tag anywhere on a page.
As well some times it's required to use different scroll container than body, sometimes its not obvious, so the following code works like a charm for me:
setInterval(function () {
$('video[playonscroll]').each(function () {
var videoElement = $(this)[0];
var eTop = $(this).offset().top;
var elementOffestY = (eTop - $(window).scrollTop());
var videoOffset = [elementOffestY, elementOffestY+$(this).height()];
if ((videoOffset[0] < 100) && (videoOffset[1] > 350)) {
console.log('play');
if (!videoElement.playing) {
videoElement.play();
}
} else {
if (videoElement.playing) {
videoElement.pause();
}
}
});
},300);
in case if you always use body container for scroll just change setInterval to $(window).scroll
And don't forget to define property for Video tag element:
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function(){
return (this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
})

JQuery Cycle plugin- pager with thumbnails below the main images

I am working on jQueryCycle plugin to get the pager with thumbnails below the main images. This is the tutorial I a working.
http://digitalunion.osu.edu/2011/10/18/jquery-cycle-plugin-a-little-tutorial/
The below is my jQuery code I am working on
$(document).ready(init);
function init() {
// dynamically add a div to hold the slideshow's pager
$(".bison_images").before('<div class="pager"></div>');
// now to use the cycle plugin
$(".bison_images").cycle({
pause: 1,
pager: ".pager",
pagerAnchorBuilder: imagePager
});
}
function imagePager(index, slide) {
var slide = jQuery(slide);
var img = slide.children("img").get(0);
return '<img src="' + img.src + '" width="110" height="66" />';
}
Here I am getting the same output as shown in the example link, pasted above. But I want the pager below the main images. I tried it with the following command but there was no success.
$(".bison_images").after('<div class="pager"></div>');
Can anyone suggest me the solution.
Rakesh

enter code here
Check this works...
$('.bison_images').after('<div class="pager">').cycle({
fx: 'scrollHorz',
speed: 'slow',
timeout: 9000,
pager: '.pager',
pagerAnchorBuilder: function(idx, slide) {
var slide = jQuery(slide);
var img = slide.children("img").get(0);
return '<img src="' + img.src + '" width="110" height="66" />';
}
});

Getting the width from an scaled image

I'm using Jquery to get the width of an image once it is appended to the body. Have a look at this fiddle to get an understanding of what I'm doing.
What I want to do is add each element with a constrained height and read what the respective width is once after it is scaled. The problem as you will see is that the console.log is giving me the value 0 for the width.

Use jQuery .load() function to do all the calculation after image load:
var number = 0;
$(document).ready(function(){
setInterval(function(){
console.log();
$('.container').prepend(
$('<img/>').attr({
src: "http://www.upress.umn.edu/book-division/images-1/other images/blockc.gif/image_thumb"
id:'img' + (number++)
}).load(function(){
console.log($(this).width())
})
},3000);
});​

http://jsfiddle.net/w7rcn/
The width was being "read" before the image could fully download.
So, we used the same concept, but applied it after the img load event had fired:
$('#img' + String(number)).load(function() {
console.log($(this).width());
});

Mohsen and Justice are right. However, you can still simplify a bit:
var number = 0;
$(document).ready(function(){
setInterval(function(){
console.log();
$('.container').prepend($('<img '
+ 'id="img'+number+'"src="http://www.upress.umn.edu/'
+ 'book-division/images-1/other-'
+ 'images/blockc.gif/image_thumb">').load(function() {
console.log($(this).width());
}));
number++;
}, 3000);
});​