Develop Reference

Multiple Progress Bars on Splide.js sliders

I am having 3 Splide.Js sliders on a single page and I would like to add the progress bar as mentioned here -> https://splidejs.com/ under Slider Progress:
This my code so far (which works for the splide itself):
var splides = $('.highlights');
function slider1() {
for ( let i = 0, splideLength = splides.length; i < splideLength; i++ ) {
var splide = new Splide( splides[ i ], {
// Desktop on down
gap: '2.4em', // space between slides
autoWidth: true, // for cards with differing widths
waitForTransition: true,
breakpoints: {
991: {
// Tablet
},
767: {
// Mobile Landscape
destroy: true,
},
479: {
// Mobile Portrait
destroy: 'completely',
}
}
});
var bar = splide.root.querySelector( '.my-slider-progress-bar' );
splide.mount();
}
}
slider1();
Where do I put this piece of code to make the bar works with each slide? I am currently getting the error "Cannot read properties of null (reading 'style')"
Progress Bar code:
// Update the bar width:
splide.on( 'mounted move', function () {
var end = splide.Components.Controller.getEnd() + 1;
bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
} );
Thanks for any tips

between:
var bar = splide.root.querySelector( '.my-slider-progress-bar' );
and:
splide.mount();
such as:
var bar = splide.root.querySelector( '.my-slider-progress-bar' );
splide.on( 'mounted move', function () {
var end = splide.Components.Controller.getEnd() + 1;
bar.style.width = String( 100 * ( splide.index + 1 ) / end ) + '%';
} );
splide.mount();

Make a slider responsive (jQuery)

I have a slider, I want to make them responsive the problem is the size of slider is into the jQuery file
sow how I can edit the code ?
code of jQuery
(function( window, $, undefined ) {
var $event = $.event, resizeTimeout;
$event.special.smartresize = {
setup: function() {
$(this).bind( "resize", $event.special.smartresize.handler );
},
teardown: function() {
$(this).unbind( "resize", $event.special.smartresize.handler );
},
handler: function( event, execAsap ) {
// Save the context
var context = this,
args = arguments;
// set correct event type
event.type = "smartresize";
if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
resizeTimeout = setTimeout(function() {
jQuery.event.handle.apply( context, args );
}, execAsap === "execAsap"? 0 : 100 );
}
};
$.fn.smartresize = function( fn ) {
return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );
};
$.Slideshow = function( options, element ) {
this.$el = $( element );
/***** images ****/
// list of image items
this.$list = this.$el.find('ul.ei-slider-large');
// image items
this.$imgItems = this.$list.children('li');
// total number of items
this.itemsCount = this.$imgItems.length;
// images
this.$images = this.$imgItems.find('img:first');
/***** thumbs ****/
// thumbs wrapper
this.$sliderthumbs = this.$el.find('ul.ei-slider-thumbs').hide();
// slider elements
this.$sliderElems = this.$sliderthumbs.children('li');
// sliding div
this.$sliderElem = this.$sliderthumbs.children('li.ei-slider-element');
// thumbs
this.$thumbs = this.$sliderElems.not('.ei-slider-element');
// initialize slideshow
this._init( options );
};
$.Slideshow.defaults = {
// animation types:
// "sides" : new slides will slide in from left / right
// "center": new slides will appear in the center
animation : 'center', // sides || center
// if true the slider will automatically slide, and it will only stop if the user clicks on a thumb
autoplay : false,
// interval for the slideshow
slideshow_interval : 3000,
// speed for the sliding animation
speed : 800,
// easing for the sliding animation
easing : '',
// percentage of speed for the titles animation. Speed will be speed * titlesFactor
titlesFactor : 0.60,
// titles animation speed
titlespeed : 800,
// titles animation easing
titleeasing : '',
};
$.Slideshow.prototype = {
_init : function( options ) {
this.options = $.extend( true, {}, $.Slideshow.defaults, options );
// set the opacity of the title elements and the image items
this.$imgItems.css( 'opacity', 0 );
this.$imgItems.find('div.ei-title > *').css( 'opacity', 0 );
// index of current visible slider
this.current = 0;
var _self = this;
// preload images
// add loading status
this.$loading = $('<div class="ei-slider-loading">Loading</div>').prependTo( _self.$el );
$.when( this._preloadImages() ).done( function() {
// hide loading status
_self.$loading.hide();
// calculate size and position for each image
_self._setImagesSize();
// configure thumbs container
_self._initThumbs();
// show first
_self.$imgItems.eq( _self.current ).css({
'opacity' : 1,
'z-index' : 10
}).show().find('div.ei-title > *').css( 'opacity', 1 );
// if autoplay is true
if( _self.options.autoplay ) {
_self._startSlideshow();
}
// initialize the events
_self._initEvents();
});
},
_preloadImages : function() {
// preloads all the large images
var _self = this,
loaded = 0;
return $.Deferred(
function(dfd) {
_self.$images.each( function( i ) {
$('<img/>').load( function() {
if( ++loaded === _self.itemsCount ) {
dfd.resolve();
}
}).attr( 'src', $(this).attr('src') );
});
}
).promise();
},
_setImagesSize : function() {
// save ei-slider's width
this.elWidth = this.$el.width();
var _self = this;
this.$images.each( function( i ) {
var $img = $(this);
imgDim = _self._getImageDim( $img.attr('src') );
$img.css({
width : imgDim.width,
height : imgDim.height,
marginLeft : imgDim.left,
marginTop : imgDim.top
});
});
},
_getImageDim : function( src ) {
var $img = new Image();
$img.src = src;
var c_w = this.elWidth,
c_h = this.$el.height(),
r_w = c_h / c_w,
i_w = $img.width,
i_h = $img.height,
r_i = i_h / i_w,
new_w, new_h, new_left, new_top;
if( r_w > r_i ) {
new_h = c_h;
new_w = c_h / r_i;
}
else {
new_h = c_w * r_i;
new_w = c_w;
}
return {
width : new_w,
height : new_h,
left : ( c_w - new_w ) / 2,
top : ( c_h - new_h ) / 2
};
},
_initThumbs : function() {
// set the max-width of the slider elements to the one set in the plugin's options
// also, the width of each slider element will be 100% / total number of elements
this.$sliderElems.css({
'width' : 100 / this.itemsCount + '%'
});
// set the max-width of the slider and show it
this.$sliderthumbs.css( 'width', this.options.thumbMaxWidth * this.itemsCount + 'px' ).show();
},
_startSlideshow : function() {
var _self = this;
this.slideshow = setTimeout( function() {
var pos;
( _self.current === _self.itemsCount - 1 ) ? pos = 0 : pos = _self.current + 1;
_self._slideTo( pos );
if( _self.options.autoplay ) {
_self._startSlideshow();
}
}, this.options.slideshow_interval);
},
// shows the clicked thumb's slide
_slideTo : function( pos ) {
// return if clicking the same element or if currently animating
if( pos === this.current || this.isAnimating )
return false;
this.isAnimating = true;
var $currentSlide = this.$imgItems.eq( this.current ),
$nextSlide = this.$imgItems.eq( pos ),
_self = this,
preCSS = {zIndex : 10},
animCSS = {opacity : 1};
// new slide will slide in from left or right side
if( this.options.animation === 'sides' ) {
preCSS.left = ( pos > this.current ) ? -1 * this.elWidth : this.elWidth;
animCSS.left = 0;
}
// titles animation
$nextSlide.find('div.ei-title > h2')
.css( 'margin-right', 50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
.end()
.find('div.ei-title > h3')
.css( 'margin-right', -50 + 'px' )
.stop()
.delay( this.options.speed * this.options.titlesFactor )
.animate({ marginRight : 0 + 'px', opacity : 1 }, this.options.titlespeed, this.options.titleeasing )
$.when(
// fade out current titles
$currentSlide.css( 'z-index' , 1 ).find('div.ei-title > *').stop().fadeOut( this.options.speed / 2, function() {
// reset style
$(this).show().css( 'opacity', 0 );
}),
// animate next slide in
$nextSlide.css( preCSS ).stop().animate( animCSS, this.options.speed, this.options.easing ),
// "sliding div" moves to new position
this.$sliderElem.stop().animate({
left : this.$thumbs.eq( pos ).position().left
}, this.options.speed )
).done( function() {
// reset values
$currentSlide.css( 'opacity' , 0 ).find('div.ei-title > *').css( 'opacity', 0 );
_self.current = pos;
_self.isAnimating = false;
});
},
_initEvents : function() {
var _self = this;
// window resize
$(window).on( 'smartresize.eislideshow', function( event ) {
// resize the images
_self._setImagesSize();
// reset position of thumbs sliding div
_self.$sliderElem.css( 'left', _self.$thumbs.eq( _self.current ).position().left );
});
// click the thumbs
this.$thumbs.on( 'click.eislideshow', function( event ) {
if( _self.options.autoplay ) {
clearTimeout( _self.slideshow );
_self.options.autoplay = false;
}
var $thumb = $(this),
idx = $thumb.index() - 1; // exclude sliding div
_self._slideTo( idx );
return false;
});
}
};
var logError = function( message ) {
if ( this.console ) {
console.error( message );
}
};
$.fn.eislideshow = function( options ) {
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'eislideshow' );
if ( !instance ) {
logError( "cannot call methods on eislideshow prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for eislideshow instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
var instance = $.data( this, 'eislideshow' );
if ( !instance ) {
$.data( this, 'eislideshow', new $.Slideshow( options, this ) );
}
});
}
return this;
};
})( window, jQuery );
How I can edit that to make them responsive ? can you give an example ?

I suggest you use something more simple (only 3 steps) instead of review this code.
Code:
Step 1: Link required files
First and most important, the jQuery library needs to be included (no need to download - link directly from Google). Next, download the package from this site and link the bxSlider CSS file (for the theme) and the bxSlider Javascript file.
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
Step 2: Create HTML markup
Create a <ul class="bxslider"> element, with a <li> for each slide. Slides can contain images, video, or any other HTML content!
<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>
Step 3: Call the bxSlider
Call .bxslider() on <ul class="bxslider">. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!
$(document).ready(function(){
$('.bxslider').bxSlider();
});
I really believe, this will be more helpful and simple.
Credits: http://bxslider.com
Different configurations
$('.bxslider').bxSlider({
mode: 'fade',
captions: true,
pagerCustom: '#bx-pager',
adaptiveHeight: true,
slideWidth: 150
});
Don't forget to read this: http://bxslider.com/options

jqueryui dialog: width not calculate properly when resizing quickly from left side

A jqueryui dialog is placed at the right edge of window, when I quickly resize the dialog from the left side, the dialog's width was set incorretly. what I mean quickly resize here is, move the mouse fast and then quickly release the mouse, I will explain later the reason of doing this.
To make my word more clearly, I have created a jsfiddle: https://jsfiddle.net/sangelee/hw62erug/6/embedded/result/
You can try yourself what I have done in the jsfiddle, but remember you should first put the dialog at the right edge of the container:http://jqueryui.com/dialog/
In the jqueryui source code, the following snippet is executed when resizing the dialog:
resize: function( event ) {
var woset, hoset, isParent, isOffsetRelative,
that = $( this ).resizable( "instance" ),
o = that.options,
co = that.containerOffset,
cp = that.position,
pRatio = that._aspectRatio || event.shiftKey,
cop = {
top: 0,
left: 0
},
ce = that.containerElement,
continueResize = true;
if ( ce[ 0 ] !== document && ( /static/ ).test( ce.css( "position" ) ) ) {
cop = co;
}
if ( cp.left < ( that._helper ? co.left : 0 ) ) {
that.size.width = that.size.width +
( that._helper ?
( that.position.left - co.left ) :
( that.position.left - cop.left ) );
if ( pRatio ) {
that.size.height = that.size.width / that.aspectRatio;
continueResize = false;
}
that.position.left = o.helper ? co.left : 0;
}
if ( cp.top < ( that._helper ? co.top : 0 ) ) {
that.size.height = that.size.height +
( that._helper ?
( that.position.top - co.top ) :
that.position.top );
if ( pRatio ) {
that.size.width = that.size.height * that.aspectRatio;
continueResize = false;
}
that.position.top = that._helper ? co.top : 0;
}
isParent = that.containerElement.get( 0 ) === that.element.parent().get( 0 );
isOffsetRelative = /relative|absolute/.test( that.containerElement.css( "position" ) );
if ( isParent && isOffsetRelative ) {
that.offset.left = that.parentData.left + that.position.left;
that.offset.top = that.parentData.top + that.position.top;
} else {
that.offset.left = that.element.offset().left;
that.offset.top = that.element.offset().top;
}
woset = Math.abs( that.sizeDiff.width +
(that._helper ?
that.offset.left - cop.left :
(that.offset.left - co.left)) );
hoset = Math.abs( that.sizeDiff.height +
(that._helper ?
that.offset.top - cop.top :
(that.offset.top - co.top)) );
if ( woset + that.size.width >= that.parentData.width ) {
that.size.width = that.parentData.width - woset;
if ( pRatio ) {
that.size.height = that.size.width / that.aspectRatio;
continueResize = false;
}
}
if ( hoset + that.size.height >= that.parentData.height ) {
that.size.height = that.parentData.height - hoset;
if ( pRatio ) {
that.size.width = that.size.height * that.aspectRatio;
continueResize = false;
}
}
if ( !continueResize ) {
that.position.left = that.prevPosition.left;
that.position.top = that.prevPosition.top;
that.size.width = that.prevSize.width;
that.size.height = that.prevSize.height;
}
}
In the code above, there is a conditional statement:
if ( woset + that.size.width >= that.parentData.width ) {
that.size.width = that.parentData.width - woset;
if ( pRatio ) {
that.size.height = that.size.width / that.aspectRatio;
continueResize = false;
}
}
The woset was the element's previous $(element).offset().left, but the that.size.width is the element's current new width, why the woset used the previous value but not the current offset, or just use event.pageX?
I have tried that, if woset was replaced by event.pageX, or remove the statement that.size.width = that.parentData.width - woset;, the flickering of the dialog's right side that I showed in the jsfiddle won't happen, and the dialog's resizing behavior still works well. So why add this conditional statement?
If the dialog was not placed at the right edge of window, the conditional statement will not passed, and the dialog's width won't be reset. It is the reason why only the dialog which is closed to the right edge of the window will have the width not set correctly issue.
Perhaps I didn't make myself clear in the above, so I give another example here.
A dialog was initially placed at the right edge of window, and its offset is left: 1600, top: 0, width: 300. woset + that.size.width == that.parentData.width is true here because the dialog is closed to the right edge of window. The window width is initially set to 1900. To simulate resizing quickly on the left side:
var mouseover_event = new MouseEvent('mouseover', {
bubbles: true,
button: 0,
cancelBubble: false,
cancelable: true,
clientX: 1600,
clientY: 300,
pageX: 1600,
pageY: 300
});
var mousedown_event = new MouseEvent('mousedown', {
bubbles: true,
button: 0,
cancelBubble: false,
cancelable: true,
clientX: 1600,
clientY: 300,
pageX: 1600,
pageY: 300
});
var mousemove_event = new MouseEvent('mousemove', {
bubbles: true,
button: 0,
cancelBubble: false,
cancelable: true,
clientX: 1300,
clientY: 300,
pageX: 1300,
pageY: 300
});
var resize_handler = document.querySelector('.ui-resizable-handle.ui-resizable-w');
resize_handler.dispatchEvent(mouseover_event);
resize_handler.dispatchEvent(mousedown_event);
resize_handler.dispatchEvent(mousemove_event);
After dispatch the events, the dialog's position and width should be: left: 1300; width: 600.
However, when executing the conditional statement above, if ( woset + that.size.width >= that.parentData.width ) {, that.size.width was set to be the new dialog width 600, but the woset was still the initial offset 1600, that.parentData.width is the window's width, 1600 + 600 > 1900, and then the follow statement, that.size.width = that.parentData.width - woset; was executed, which sets the dialog's width to nearly the initial width 300. It seems that the dialog was just been moved, not resized. So I think the dialog's width issue was caused by that statement.
The reason I quickly resize the dialog is that I'm writing a script to sync two same page's events, means when an event happened in one page, sends the event detail to the other same page, and then dispatch the same event, just like element.dispatchEvent(event) above. For the sake of efficiency, when syncing the drag or resize event, just sync the last mousemove event before the mouseup(it is just the same behavior as quickly resize the dialog).
The jqueryui version I used is 1.11.4.
And my questions:
Why to add the conditional statement if ( woset + that.size.width >= that.parentData.width ) { and reset the dialog's width that.size.width = that.parentData.width - woset;, since that.size.width has already been set correctly? And why woset was the 'previous value' but not the 'current value'?
Are there any workarounds to the dialog's width problem?

multiple color fade on scroll

I found this great piece of code on jsfiddle for fading between two colors onScroll using jQuery and the Color plugin.
What I would like to do is be able to fade three or more colors onScroll down the page.
I have tried (failing miserably) to edit the code myself but am just too new to JS and jQuery.
Help please?
$(document).ready(function(){
//** notice we are including jquery and the color plugin at
//** http://code.jquery.com/color/jquery.color-2.1.0.js
var scroll_pos = 0;
var animation_begin_pos = 0; //where you want the animation to begin
var animation_end_pos = 1000; //where you want the animation to stop
var beginning_color = new $.Color( 'rgb(210,50,98)' ); //we can set this here, but it'd probably be better to get it from the CSS; for the example we're setting it here.
var ending_color = new $.Color( 'rgb(0,197,209)' ); ;//what color we want to use in the end
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ) {
// console.log( 'scrolling and animating' );
//we want to calculate the relevant transitional rgb value
var percentScrolled = scroll_pos / ( animation_end_pos - animation_begin_pos );
var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled );
var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled );
var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled );
var newColor = new $.Color( newRed, newGreen, newBlue );
//console.log( newColor.red(), newColor.green(), newColor.blue() );
$('body').animate({ backgroundColor: newColor }, 0);
} else if ( scroll_pos > animation_end_pos ) {
$('body').animate({ backgroundColor: ending_color }, 0);
} else if ( scroll_pos < animation_begin_pos ) {
$('body').animate({ backgroundColor: beginning_color }, 0);
} else { }
});
});
Here is the fiddle:
http://jsfiddle.net/cgspicer/V4qh9/

Similar to Sterling's answer, my first attempt was to kind of insert another checkpoint for the third color. This process, as in Sterling's solution, begins to precipitate the necessity of sub-functions.
See it here: http://jsfiddle.net/5uU6y/1/
A better and more complete solution, in which you can declare multiple colors, can be achieved by creating an array which stores your beginning, ending, and color values that you can check against when the window is scrolled.
Here's that solution ( see it in action here: http://codepen.io/cgspicer/pen/tomvq/ )
$(document).ready(function(){
/**
requires http://code.jquery.com/color/jquery.color-2.1.0.js
*/
var colorsNPoints = [
{ 'begin' : 0, 'end': 100, 'color': 'rgb(220,20,60)' },
{ 'begin' : 100, 'end': 110, 'color': 'rgb(0,0,0)' },
{ 'begin' : 110, 'end': 210, 'color': 'rgb(50,205,50)' },
{ 'begin' : 210, 'end': 310, 'color': 'rgb(255,215,0)' },
{ 'begin' : 310, 'end': 410, 'color': 'rgb(220,20,60)' },
{ 'begin' : 410, 'end': 420, 'color': 'rgb(0,0,0)' },
{ 'begin' : 420, 'end': 520, 'color': 'rgb(50,205,50)' },
{ 'begin' : 520, 'end': 620, 'color': 'rgb(255,215,0)' },
{ 'begin' : 620, 'end': 720, 'color': 'rgb(220,20,60)' },
{ 'begin' : 720, 'end': 730, 'color': 'rgb(0,0,0)' },
{ 'begin' : 730, 'end': 830, 'color': 'rgb(50,205,50)' },
{ 'begin' : 830, 'end': 930, 'color': 'rgb(255,215,0)' }
];
$(document).scroll(function() {
var scrollPosition = $(this).scrollTop();
var currentRange = checkRange( scrollPosition, colorsNPoints );
if ( currentRange !== undefined ) {
console.log( currentRange );
var newColor = recalcColor( currentRange.prevColor, currentRange.nextColor, currentRange.progress );
$('body').css({ backgroundColor: newColor }, 0);
} else {
// do nothing, we're not within any ranges
}
});
// sub-functions
/**
* checks which, if any, of the scroll ranges the window is currently on
* returns an object containing necessary values
*/
function checkRange( yValue, rangesObj ) {
// loop over the object containing our ranges
for ( var i=0; i < rangesObj.length; i++ ) {
var rangeToCheck = rangesObj[i];
// check to see if we are within said range
if ( yValue >= rangeToCheck.begin && yValue <= rangeToCheck.end ) {
// set up a new object for refinement and return
var currentRangeObj = {};
currentRangeObj.prevColor = rangesObj[i-1] ? rangesObj[i-1].color : rangeToCheck.color; // store old color, falls back to range's color if no previous color exists
currentRangeObj.nextColor = rangeToCheck.color; // store new color
currentRangeObj.progress = calcPercentScrolled( rangeToCheck.begin, rangeToCheck.end, yValue ); //calculate the progress within the current range
return currentRangeObj;
} else {
}
}
}
/**
* calculates current percent scrolled
**/
function calcPercentScrolled( begin, end, current ) {
return (current - begin) / ( end - begin );
}
/**
* calculates new color
**/
function recalcColor( begin, end, factor ) {
var begin = $.Color( begin ),
end = $.Color( end );
var newRed = begin.red() + ( ( end.red() - begin.red() ) * factor );
var newGreen = begin.green() + ( ( end.green() - begin.green() ) * factor );
var newBlue = begin.blue() + ( ( end.blue() - begin.blue() ) * factor );
return $.Color( newRed, newGreen, newBlue );
}
});
Hope this helps!

Try this. It's the same idea as the original code with a couple of minor additions. You can try to do it for n colors using the same idea using an array of start positions, end positions, and starting colors if you want some practice with Javascript. (And a better implementation)
Fiddle
$(document).ready(function(){
//** notice we are including jquery and the color plugin at
//** http://code.jquery.com/color/jquery.color-2.1.0.js
var body_end = $(document).height() / ;
var animation_begin_pos = 0; //where you want the animation to begin
var animation_middle_pos = body_end / 3;
var animation_end_pos = body_end / (3/2); //where you want the animation to stop
var beginning_color = new $.Color( 'rgb(210,50,98)' ); //we can set this here, but it'd probably be better to get it from the CSS; for the example we're setting it here.
var middle_color = new $.Color('rgb(255,0,0)');
var ending_color = new $.Color( 'rgb(0,197,209)' ); ;//what color we want to use in the end
/* */
function getPercentScrolled(scroll_pos, beginning_pos, end_pos){
return (scroll_pos - beginning_pos) / (end_pos - beginning_pos);
}
function getNewRGB(start_color, end_color, percentScrolled){
var newRed = start_color.red() + ( ( end_color.red() - start_color.red() ) * percentScrolled );
var newGreen = start_color.green() + ( ( end_color.green() - start_color.green() ) * percentScrolled );
var newBlue = start_color.blue() + ( ( end_color.blue() - start_color.blue() ) * percentScrolled );
console.log(newRed, newGreen, newBlue);
console.log(percentScrolled);
newRed = ((newRed > 0.0) ? newRed : 0.0);
newGreen = ((newGreen > 0.0) ? newGreen : 0.0);
newBlue = ((newBlue > 0.0) ? newBlue : 0.0);
return {red: newRed, green: newGreen, blue: newBlue};
}
$(document).scroll(function() {
var scroll_pos = $(this).scrollTop();
if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_middle_pos ) {
//we want to calculate the relevant transitional rgb value
var percentScrolled = getPercentScrolled(scroll_pos, animation_begin_pos, animation_end_pos);
var updatedColor = getNewRGB(beginning_color, middle_color, percentScrolled);
var newColor = new $.Color( updatedColor['red'], updatedColor['green'], updatedColor['blue'] );
$('body').animate({ backgroundColor: newColor }, 0);
}
else if ( scroll_pos >= animation_middle_pos && scroll_pos < animation_end_pos) {
percentScrolled = getPercentScrolled(scroll_pos, animation_middle_pos, animation_end_pos);
updatedColor = getNewRGB(middle_color, ending_color, percentScrolled);
newColor = new $.Color( updatedColor['red'], updatedColor['green'], updatedColor['blue'] );
$('body').animate({ backgroundColor: newColor }, 0);
}
else if ( scroll_pos > animation_middle_pos ) {
$('body').animate({ backgroundColor: ending_color }, 0);
}
else if ( scroll_pos < animation_begin_pos ) {
$('body').animate({ backgroundColor: beginning_color }, 0);
}
});
});

Image upload popup in ckeditor is not woking in Google chrome

When I click browse server in ckeditor the image browser popup doesnt appear.I am facing problem only in Google Chrome.I am using 18.0.1025.152 m verion of Google Chrome
I have made changes in ckeditor/plugins/popup/plugin.js
try
{
// Chrome 18 is problematic, but it's not really needed here (#8855).
var ua = navigator.userAgent.toLowerCase();
if ( ua.indexOf('chrome/18' ) == -1 )
{
popupWindow.moveTo( left, top );
popupWindow.resizeTo( width, height );
}
popupWindow.focus();
popupWindow.location.href = url;
}
catch ( e )
{
popupWindow = window.open( url, null, options, true );
}
I followed this link enter link description here
But I am unable to resolve the issue.Can anyone help

If you edit the source files you have to repackage them again. It's much simpler to update to CKEditor 3.6.3 and get all the other bug fixes.

I am using opencart 1.5.1.3 ckeditor. I edit the /admin/view/javascript/ckeditor/ckeditor.js and re-align the javascript code with http://jsbeautifier.org/
I have tried with the patch from ckeditor community and little modifications. It works!
http://dev.ckeditor.com/ticket/8855
So if anyone has face the similar issue like me in opencart you can try with below changes.
+++ b/v1.5.1.3/admin/view/javascript/ckeditor/ckeditor.js
## -9190,8 +9190,21 ## For licensing, see LICENSE.html or http://ckeditor.com/license
var s = window.open('', null, p, true);
if (!s) return false;
try {
- s.moveTo(r, q);
- s.resizeTo(n, o);
+ // s.moveTo(r, q);
+ // s.resizeTo(n, o);
+ // Chrome 18 is problematic, but it's not really needed here (#8855).
+ var ua = navigator.userAgent.toLowerCase();
+ var useResize = true;
+ if (ua.indexOf('chrome') > -1) {
+ var chromeVersion = ua.replace(/^.*chrome\/([\d]+).*$/i, '$1')
+ if(chromeVersion >= 18) {
+ useResize = false;
+ }
+ }
+ if (useResize) {
+ s.moveTo( r, q );
+ s.resizeTo( n, o );
+ }
s.focus();
s.location.href = m;
} catch (t) {

I'm using the CKEditor 3.6.2 that comes bundled with primefaces-extensions, so upgrading is not that easy. But executing the following fix against the page also worked. I pasted it in the config file, to be sure that it is fired after the CKEDITOR variable is initialized.
CKEDITOR.editor.prototype['popup'] = function( url, width, height, options ) {
width = width || '80%';
height = height || '70%';
if ( typeof width == 'string' && width.length > 1 && width.substr( width.length - 1, 1 ) == '%' )
width = parseInt( window.screen.width * parseInt( width, 10 ) / 100, 10 );
if ( typeof height == 'string' && height.length > 1 && height.substr( height.length - 1, 1 ) == '%' )
height = parseInt( window.screen.height * parseInt( height, 10 ) / 100, 10 );
if ( width < 640 )
width = 640;
if ( height < 420 )
height = 420;
var top = parseInt( ( window.screen.height - height ) / 2, 10 ),
left = parseInt( ( window.screen.width - width ) / 2, 10 );
options = ( options || 'location=no,menubar=no,toolbar=no,dependent=yes,minimizable=no,modal=yes,alwaysRaised=yes,resizable=yes,scrollbars=yes' ) +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
var popupWindow = window.open( '', null, options, true );
// Blocked by a popup blocker.
if ( !popupWindow )
return false;
try
{
// Chrome 18 is problematic, but it's not really needed here (#8855).
var ua = navigator.userAgent.toLowerCase();
if ( ua.indexOf( ' chrome/18' ) == -1 )
{
popupWindow.moveTo( left, top );
popupWindow.resizeTo( width, height );
}
popupWindow.focus();
popupWindow.location.href = url;
}
catch ( e )
{
popupWindow = window.open( url, null, options, true );
}
return true;
}
$(document).ready(
function() {
setContentHeight();
makeInstructionsTogglable();
window.onbeforeunload = function() {
if (editor.isDirty()) {
return "Are you sure you want to navigate away? You have unsaved changes."
}
};
}
);
$(window).resize(function() {
setContentHeight();
});