We Keep Coding

Scroll to DIV using JQuery not working after page load

I am trying to scroll the page to DIV, whose ID is sent through QueryString. The HTML content of the page is loaded from the Server side in SharePoint 2010.
I have used setTimeout() to wait until the content is loaded on the page and after timeout I am applying logic to scroll to div. But The page is not scrolling. Code is as below:
ExecuteOrDelayUntilScriptLoaded(getThankyouMsg, 'sp.js');
function getThankyouMsg() {
var fid = getQueryStringParameter("fid");
setTimeout(function () {
//window.location.href = window.location.href.split('?')[0] + "#" + fid;
jQuery('html, body').animate({
scrollTop: jQuery("#" + fid).offset().top
}, 2000);
}, 7000);
}
function getQueryStringParameter(paramToRetrieve) {
var params = document.URL.split("?")[1].split("&");
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}
Can you please suggest what I am missing?
Thanks in advance.

I find solution for my question. We can use simple JavaScript instead of jQuery animate function.
ExecuteOrDelayUntilScriptLoaded(getThankyouMsg, 'sp.js');
function getThankyouMsg() {
var fid = getQueryStringParameter("fid");
setTimeout(function () {
location.hash = "#"+fid; //This line will navigates to Div ID
}, 7000);
}
function getQueryStringParameter(paramToRetrieve) {
var params = document.URL.split("?")[1].split("&");
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}
Location.Hash = "#divId"
will work to scroll down to particular div on the page.

There's no need to write your own function to wait for the page to load. There is a jQuery function for that: .ready()
Your scrolling code seems to work fine with dummy code. This might work a bit better for you:
$(document).ready(function() {
getThankyouMsg();
});
function getThankyouMsg() {
var fid = getQueryStringParameter("fid");
jQuery('html, body').animate({
scrollTop: jQuery("#" + fid).offset().top
}, 2000);
}
function getQueryStringParameter(paramToRetrieve) {
var params = document.URL.split("?")[1].split("&");
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}
That is assuming that getQueryStringParameter returns the correct value. There's no way for me to know this since it depends on your backend and the URL being used.

audio currentTime returning 0 and not the current time

I'm having an issue where I'm using this plugin:
I have created an abstract with the following code, and trying to read from the default <audio> and not the plugin. The plugin puts a visibility:hidden on the <audio> tag but I don't think that should affect anything.
Here's my code, it's for a slideshow, displaying images at certain intervals in the audio file:
var audio = $("audio");
audio.audioPlayer();
// Slideshow
var slideshowAudio = audio.data("slideshow"),
slideshowAudioId = document.getElementById("audio-default");
if (slideshowAudio == "1") {
var audioTime = Math.floor(slideshowAudioId.currentTime);
// console.log("Current Time: " + currentTime);
var slideshow = [];
$(".slideshow li").each(function () {
var id = $(this).data("slideshow-id"),
time = $(this).data("slideshow-time");
slideshow.push(time);
});
console.log(slideshow);
$(".audioplayer-playpause").on("touchend click", function () {
setInterval(function() {
alert("show " + audioTime);
for (i = 0; i < slideshow.length; i++) {
if (slideshow[i] == currentTime) {
}
}
}, 1000);
});
}

Applying transitions to preloaded images

I'm using the jQuery plugin Images-rotation in order to create a slideshow that plays when hovering over an image. I'd like to add transitions between the images, such as jQuery's fadeIn. The images are preloaded, which is why I think what I've attempted so far hasn't been successful.
I've also created this (http://jsfiddle.net/Lydmn2xn/) to hopefully easily show what's being used, although all of the code is found in the Javascript plugin itself. So far I've tried adding variations of the line $this.fadeIn("slow"); in various spots with no luck. Below is the code for the Javascript plugin with changes I've tried to make. Not sure how to point them out as I can't bold the text in the code. (Note: said changes are not in the Jfiddle, as they don't produce any changes).
$.fn.imagesRotation = function (options) {
var defaults = {
images: [], // urls to images
dataAttr: 'images', // html5 data- attribute which contains an array with urls to images
imgSelector: 'img', // element to change
interval: 1500, // ms
intervalFirst: 1500, // first image change, ms
callback: null // first argument would be the current image url
},
settings = $.extend({}, defaults, options);
var clearRotationInterval = function ($el) {
clearInterval($el.data('imagesRotaionTimeout'));
$el.removeData('imagesRotaionTimeout');
clearInterval($el.data('imagesRotaionInterval'));
$el.removeData('imagesRotaionInterval');
},
getImagesArray = function ($this) {
var images = settings.images.length ? settings.images : $this.data(settings.dataAttr);
return $.isArray(images) ? images : false;
},
preload = function (arr) { // images preloader
$(arr).each(function () {
$('<img/>')[0].src = this;
$this.fadeIn("slow");
});
},
init = function () {
var imagesToPreload = [];
this.each(function () { // preload next image
var images = getImagesArray($(this));
if (images && images.length > 1) {
imagesToPreload.push(images[1]);
}
});
preload(imagesToPreload);
};
init.call(this);
this.on('mouseenter.imagesRotation', function () {
var $this = $(this),
$img = settings.imgSelector ? $(settings.imgSelector, $this) : null,
images = getImagesArray($this),
imagesLength = images ? images.length : null,
changeImg = function () {
var prevIndex = $this.data('imagesRotationIndex') || 0,
index = (prevIndex + 1 < imagesLength) ? prevIndex + 1 : 0,
nextIndex = (index + 1 < imagesLength) ? index + 1 : 0;
$this.data('imagesRotationIndex', index);
if ($img && $img.length > 0) {
if ($img.is('img')) {
$img.attr('src', images[index]);
$this.fadeIn('slow');
}
else {
$img.css('background-image', 'url(' + images[index] + ')');
$img.fadeIn('slow');
}
}
if (settings.callback) {
settings.callback(images[index]);
}
preload([images[nextIndex]]); // preload next image
};
if (imagesLength) {
clearRotationInterval($this); // in case of dummy intervals
var timeout = setTimeout(function () {
changeImg();
var interval = setInterval(changeImg, settings.interval);
$this.data('imagesRotaionInterval', interval); // store to clear interval on mouseleave
}, settings.intervalFirst);
$this.data('imagesRotaionTimeout', timeout);
}
}).on('mouseleave.imagesRotation', function () {
clearRotationInterval($(this));
}).on('imagesRotationRemove', function () {
var $this = $(this);
$this.off('.imagesRotation');
clearRotationInterval($this);
});
};
$.fn.imagesRotationRemove = function () {
this.trigger('imagesRotationRemove');
};
Would that do the trick if it was in the right spot, or does fadeIn/Out not apply to preloaded images? Any help or tips are appreciated.
Thanks.

Dots for Children in div. A jQuery headache - PART 2

So this is part 2 of my previous question (was advised to start a new question for this one).Just for reference here is my previous post: Dots for Children in div. A jQuery headache
My question now is: How does one go about adding an "active" class/id to the "imgdots" div for styling purposes?For example:Say I'm on image 4 then I want the 4th "imgdots" div to be another colour.Again, any help would be much appreciated! EDITI have set up a fiddle containing what I have thus far. The initial image slider was from a tutorial I followed and kinda pieced it all together from there. Here is the link: jsfiddle.net/Reinhardt/cgt5M/8/

Have you seen nth child css?
http://www.w3schools.com/cssref/sel_nth-child.asp
#showContainer:nth-child(4)
{
background:#ff0000;
}

Try
/* The jQuery plugin */
(function ($) {
$.fn.simpleShow = function (settings) {
var config = {
'tranTimer': 5000,
'tranSpeed': 'normal'
};
if (settings) $.extend(config, settings);
this.each(function () {
var $wrapper = $(this),
$ct = $wrapper.find('.showContainer'),
$views = $ct.children();
var viewCount = $views.length;
var $imgdotholder = $('<div class="imgdotholder"></div>').appendTo('.wrapper');
for (var i = 0; i < viewCount; i++) {
$('<div class="imgdots"></div>').appendTo($imgdotholder);
}
var $imgdots = $imgdotholder.children();
var timer, current = 0;
function loop() {
timer = setInterval(next, config.tranTimer);
}
function next(idx) {
$views.eq(current).hide();
current = idx == undefined ? current + 1 : idx;
if (isNaN(current) || current < 0 || current >= viewCount) {
current = 0;
}
$views.eq(current).fadeIn(config.tranSpeed);
$imgdots.removeClass('current').eq(current).addClass('current');
}
$imgdots.click(function(){
clearInterval(timer);
next($(this).index());
})
$wrapper.find('.btn_nxt').click(function(){
clearInterval(timer);
next();
});
$ct.hover(function(){
clearInterval(timer);
}, loop);
$views.slice(1).hide();
$imgdots.eq(0).addClass('current');
loop();
});
return this;
};
})(jQuery);
/* Calling The jQuery plugin */
$(document).ready(function () {
/**/
$(".wrapper").simpleShow({
'tranTimer': 3000,
'tranSpeed': 800
});
});
Demo: Fiddle

jQuery interval won't restart after hover out

After calling a PHP function, which generates the HTML,
I call the function below for the specific slider id.
That works fine, hover pauses the slideshow, also ok.
But when I am hovering out of the section, firebug gives the following error:
TypeError: o.handler.apply is not a function
And the slideshow won't continue.
Thanks in advance.
function CallSlider(sliderid){
var $slider = $('#'+sliderid);
var $slide = 'li';
var $transition_time = 1000; // 1 second
var $time_between_slides = 2000; // 4 seconds
function slides(){
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
$('#'+sliderid).hover(function() {
clearInterval(sliderid);
}, sliderid = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();
//alert('test');
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
)
);
}

I believe that error is related to the fact that hover() expects parameters to be functions.
Type: Function() - A function to execute when the mouse pointer enters/leaves the element.
http://api.jquery.com/hover/
I suggest putting your "hover off" code in its own function, like so:
$('#'+sliderid).hover(
function() {
// hover over
clearInterval(sliderid);
},
function () {
// hover off
sliderid = setInterval(...);
}
);
EDIT:
Here's an example, based on the code you provided, of how to keep things flexible (i.e. for dynamic lists).
var slide = 'li';
var transition_time = 1000; // 1 second
var time_between_slides = 2000; // 4 seconds
function startCycle($slider, $slides) {
return setInterval(
function () {
var $thisslide=jQuery(slide+'.active',$slider);
var $nextslide=($thisslide.next(slide).length?$thisslide.next(slide):$slides.eq(0));
$thisslide.removeClass('active').fadeOut(transition_time);
$nextslide.fadeIn(transition_time).addClass('active');
}, transition_time + time_between_slides
);
}
jQuery('ul.slider').each(function () {
var sliderid;
var $slider = jQuery(this);
var $slides = $slider.find(slide);
$slides.fadeOut();
// set active classes
$slides.first().addClass('active').fadeIn(transition_time);
$slider.hover(
function () {
// hover over
clearInterval(this.sliderid);
},
function () {
// hover off
this.sliderid = startCycle($slider, $slides);
}
);
this.sliderid = startCycle($slider, $slides);
});
http://jsfiddle.net/gk74V/1/