I repeat usual script for placeholder (jPlaceholder.js).
The reason is slow reading speed(~150 000\1000ms) and big file size (5.8kb);
The script below has a much faster reading speed (~1 950 000\1000ms) and is more lightweight(1.8kb).
The problem is that the first one runs ~32 000\1000ms, but my(script below) 525\1000ms only.
Please help me to understand why, and how to make it faster.
$.fn.placehold = function (option) {
var opt = {
wrapperClass: 'jvPlacehold',
wrapperPadding: 0,
wrapperMargin: 0,
wrapperTop: 0,
wrapperLeft: 0,
counterClass: 'jvPhCounter',
labelClass: 'jvPhLabel',
labelPadding: '0 5px',
labelColor: '#a9a9a9',
labelOpacitySpeed: 300,
holderDataName: 'placeholder',
focusSpeed: 300,
blurSpeed: 300
};
opt = $.extend({}, opt, option);
var $el = $(this),
$wrapper = $('<div>', {
class: opt.wrapperClass,
group: 'search',
css: {
overflow: 'hidden',
background: $el.css('background'),
width: $el.outerWidth(),
height: $el.outerHeight(),
padding: opt.wrapperPadding,
margin: opt.wrapperMargin,
top: opt.wrapperTop,
left: opt.wrapperLeft,
float: opt.wrapperFloat
}
}),
$counter = $('<span>', {
class: opt.counterClass,
css: {
display: 'none'
}
}),
$label = $('<span>', {
class: opt.labelClass,
text: $el.data(opt.holderDataName),
css: {
padding: opt.labelPadding,
color: opt.labelColor
}
});
$el.css({
position: 'absolute',
background: 'none',
left: 0
});
$el.after($wrapper.append($counter, $label)).appendTo($wrapper);
$label.css('top', Math.abs($el.innerHeight() - $label.height()) / 2);
$el.keyup(function () {
if ($counter.text($el.val().replace(/\s/gi, '❙')).outerWidth() >= parseInt($label.css('left'))) $label.stop().animate({
opacity: 0
}, opt.labelOpacitySpeeed);
else $label.stop().animate({
opacity: 1
}, opt.labelOpacitySpeeed);
}).focus(function () {
$label.stop().animate({
left: ($el.innerWidth() - $label.outerWidth())
}, opt.focusSpeed);
}).blur(function () {
if (!$el.val().length) $label.stop().animate({
left: 0
}, opt.blurSpeed);
});
};
$('#search').placehold();
div, span {
position:relative;
}
input {
padding:2px 5px;
border:1px solid #a9a9a9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<input type="text" id="search" data-placeholder="Search">
var tmp = new Date().getTime();
Write above, then use:
console.log(new Date().getTime() - tmp);
between codes to see how much time each part of code takes.
Related
I am using https://github.com/jasonujmaalvis/show-more to show and hide text on a mobile device. What I want to do is toggle between images on show more and show less:
So far I have:
Jquery:
source file:
;
(function($, window, document, undefined) {
'use strict';
var pluginName = 'showmore',
defaults = {
closedHeight: 100,
buttonTextMore: 'show more',
buttonTextLess: 'show less',
buttonCssClass: 'showmore-button',
animationSpeed: 0.5,
openHeightOffset: 0,
onlyWithWindowMaxWidth: 0
};
function Plugin(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.btn;
this.init();
}
$.extend(Plugin.prototype, {
init: function() {
if (this.settings.onlyWithWindowMaxWidth > 0) {
this.bindResize();
this.responsive();
} else {
this.showmore();
}
},
bindResize: function() {
var self = this;
var resizeTimer;
$(window).on('resize', function() {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function() {
self.responsive();
}, 250);
});
},
responsive: function() {
if ($(window).innerWidth() <= this.settings.onlyWithWindowMaxWidth) {
this.showmore();
} else {
this.remove();
}
},
showmore: function() {
if (this.btn) {
return;
}
var self = this;
var element = $(this.element);
var settings = this.settings;
if (settings.animationSpeed > 10) {
settings.animationSpeed = settings.animationSpeed / 1000;
}
var showMoreInner = $('<div />', {
'class': settings.buttonCssClass + '-inner more',
text: settings.buttonTextMore
});
var showLessInner = $('<div />', {
'class': settings.buttonCssClass + '-inner less',
text: settings.buttonTextLess
});
element.addClass('closed').css({
'height': settings.closedHeight,
'overflow': 'hidden'
});
var resizeTimer;
$(window).on('resize', function() {
if (!element.hasClass('closed')) {
if (resizeTimer) {
clearTimeout(resizeTimer);
}
resizeTimer = setTimeout(function() {
// resizing has "stopped"
self.setOpenHeight(true);
}, 150); // this must be less than bindResize timeout!
}
});
var showMoreButton = $('<div />', {
'class': settings.buttonCssClass,
html: showMoreInner
});
showMoreButton.on('click', function(event) {
event.preventDefault();
if (element.hasClass('closed')) {
self.setOpenHeight();
element.removeClass('closed');
showMoreButton.html(showLessInner);
} else {
element.css({
'height': settings.closedHeight,
'transition': 'all ' + settings.animationSpeed + 's ease'
}).addClass('closed');
showMoreButton.html(showMoreInner);
}
});
element.after(showMoreButton);
this.btn = showMoreButton;
},
setOpenHeight: function(noAnimation) {
$(this.element).css({
'height': this.getOpenHeight()
});
if (noAnimation) {
$(this.element).css({
'transition': 'none'
});
} else {
$(this.element).css({
'transition': 'all ' + this.settings.animationSpeed + 's ease'
});
}
},
getOpenHeight: function() {
$(this.element).css({'height': 'auto', 'transition': 'none'});
var targetHeight = $(this.element).innerHeight();
$(this.element).css({'height': this.settings.closedHeight});
// we must call innerHeight() otherwhise there will be no css animation
$(this.element).innerHeight();
return targetHeight;
},
remove: function() {
// var element = $(this.element);
if ($(this.element).hasClass('closed')) {
this.setOpenHeight();
}
if (this.btn) {
this.btn.off('click').empty().remove();
this.btn = undefined;
}
}
});
$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
});
};
})(jQuery, window, document);
my Jquery:
$('.read-more').showmore({
closedHeight: 100,
shadow: true,
onlyWithWindowMaxWidth: 576,
buttonCssClass: 'showmore-button',
buttonTextLess: 'Read less',
buttonTextMore: 'Read more'
});
CSS
.home-text .showmore-button {
margin-bottom: 25px;
background-image: url('../assets/images/plus-octagon-light.svg')!important;
background-repeat: no-repeat;
width: 150px;
padding-left: 40px;
height: 30px;
display: block;
}
.home-text .showmore-button::active {
margin-bottom: 25px;
background-image: url('../assets/images/minus-octagon-light.svg')!important;
background-repeat: no-repeat;
width: 150px;
padding-left: 40px;
height: 30px;
display: block;
}
.read-more { line-height:24px; }
.read-more_content { position:relative; overflow:hidden; }
.read-more_trigger { width:100%; height:45px; line-height:45px; cursor:pointer; }
.read-more_trigger span { display:block; }
html
<div class="home-text"><p>xxxxxxxx</p>
</div>
So I am trying to toggle between icons on show more and show less. Any ideas? I know if I used Jquery as stand alone functions I could use the toggle class, but as this is a JS plugin that is where I am thinking where to add it?
After viewing the JQuery code more, the solution that worked for me was changing the CSS with the following classes:
.showmore-button-inner.more {
margin-bottom: 25px;
background-image: url('../assets/images/plus-octagon-light.svg')!important;
background-repeat: no-repeat;
width: 150px;
padding-left: 40px;
height: 30px;
display: block;
}
.showmore-button-inner.less {
margin-bottom: 25px;
background-image: url('../assets/images/minus-octagon-light.svg')!important;
background-repeat: no-repeat;
width: 150px;
padding-left: 40px;
height: 30px;
display: block;
}
I need your help.
To apply animation to multiple elements with a single class of "my-button"? Now this only works for a single button.
Replacement querySelector on querySelectorAll not solve the problem, the script becomes not working
Thank you.
var el = document.querySelector('.my-button'),
elSpan = el.querySelector('span'),
// mo.js timeline obj
timeline = new mojs.Timeline(),
scaleCurve = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0'),
// tweens for the animation:
// burst animation
tween1 = new mojs.Burst({
parent: el,
duration: 1500,
shape : 'circle',
fill : [ '#e67e22', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
x: '50%',
y: '50%',
opacity: 0.8,
childOptions: { radius: {20:0} },
radius: {40:120},
angle: {0: 180},
count: 8,
isSwirl: true,
isRunLess: true,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
}),
// ring animation
tween2 = new mojs.Transit({
parent: el,
duration: 750,
type: 'circle',
radius: {0: 50},
fill: 'transparent',
stroke: '#2ecc71',
strokeWidth: {15:0},
opacity: 0.6,
x: '50%',
y: '50%',
isRunLess: true,
easing: mojs.easing.bezier(0, 1, 0.5, 1)
}),
// icon scale animation
tween3 = new mojs.Tween({
duration : 900,
onUpdate: function(progress) {
if(progress > 0.3) {
var scaleProgress = scaleCurve(progress);
elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
elSpan.style.WebkitTransform = elSpan.style.color = '#2ecc71';
} else {
elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(0,0,1)';
elSpan.style.WebkitTransform = elSpan.style.color = 'rgba(0,0,0,0.3)';
}
}
});
// add tweens to timeline:
timeline.add(tween1, tween2, tween3);
// when clicking the button start the timeline/animation:
el.addEventListener('mousedown', function() {
timeline.start();
});
.wrapper {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
height: 200px;
}
.my-button {
background: transparent;
border: none;
outline: none;
margin: 0;
padding: 0;
position: relative;
text-align:center;
}
svg {
top: 0;
left: 0;
}
.send-icon {
position: relative;
font-size: 40px;
color: rgba(0,0,0,0.3);
}
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<script src="http://netgon.net/mo.min.js"></script>
<div class="wrapper">
<button class="my-button">
<span class="send-icon fa fa-paper-plane"></span>
</button>
</div>
Codepen
Working CodePen Here!
the "parent element" el must be a single element, so achieving this would be tricky and create a complicated messy code.
so I created a different method that'll create the animations once and set their position using tune() when a button is clicked, this will improve performance since you only have one animation object in the DOM.
instead of creating three animations for each parent/button.
I listen to the all buttons with the class "my-button" set animation's top and left values accordingly
$( ".my-button" ).on( "click", function() {
aniPos = findCenter($(this));
myAnimation1.tune({ top: aniPos.y, left: aniPos.x });
myAnimation2.tune({ top: aniPos.y, left: aniPos.x });
myTimeline.replay();
anipos is calculated with a simple function that'll return an object with .x and .y values
function findCenter ($this) {
var offset = $this.offset();
var width = $this.width();
var height = $this.height();
IDs = {
x: offset.left + (width / 2),
y: offset.top + (height / 2)
};
console.log(offset);
return IDs;
}
I also added a method to animate the clicked button automatically.
elSpan = this.querySelector('span');
new mojs.Tween({
duration : 900,
onUpdate: function(progress) {
if(progress > 0.3) {
var scaleProgress = scaleCurve(progress);
elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
elSpan.style.WebkitTransform = elSpan.style.color = '#2ecc71';
} else {
elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(0,0,1)';
elSpan.style.WebkitTransform = elSpan.style.color = 'rgba(0,0,0,0.3)';
}
}
}).play();
});
please note that my example will require JQuery to work.
I used the exact animations you provided but you can change them as long as you don't change X, Y, top and left properties
I am currently styling the nav buttons of hero slider using css, below is my code, however I want to achieve the buttons like on the slider on www.bbc.co.uk. With the expanding div and the text appearing. Could sombeody show me how please?
This is the css for the buttons I would like to edit
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
.hero-carousel-nav li.prev {
left: 48px;
right: auto;
}
.hero-carousel-nav li a {
background: #FFF;
color: #fff;
border: none;
outline: none;
display: block;
float: left;
padding: 5px 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 10px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav li a:hover {
background: #06C;
}
and this is my javascript which includes the coding for the previous and next nav buttons that I would like to edit.
jQuery.fn.heroCarousel = function(options){
options = jQuery.extend({
animationSpeed: 1000,
navigation: true,
easing: '',
timeout: 5000,
pause: true,
pauseOnNavHover: true,
prevText: 'Previous',
nextText: 'Next',
css3pieFix: false,
currentClass: 'current',
onLoad: function(){},
onStart: function(){},
onComplete: function(){}
}, options);
if(jQuery.browser.msie && parseFloat(jQuery.browser.version) < 7){
options.animationSpeed = 0;
}
return this.each(function() {
var carousel = jQuery(this),
elements = carousel.children();
currentItem = 1;
childWidth = elements.width();
childHeight = elements.height();
if(elements.length > 2){
elements.each(function(i){
if(options.itemClass){
jQuery(this).addClass(options.itemClass);
}
});
elements.filter(':first').addClass(options.currentClass).before(elements.filter(':last'));
var carouselWidth = Math.round(childWidth * carousel.children().length),
carouselMarginLeft = '-'+ Math.round(childWidth + Math.round(childWidth / 2) ) +'px'
carousel.addClass('hero-carousel-container').css({
'position': 'relative',
'overflow': 'hidden',
'left': '50%',
'top': 0,
'margin-left': carouselMarginLeft,
'height': childHeight,
'width': carouselWidth
});
carousel.before('<ul class="hero-carousel-nav"><li class="prev">'+options.prevText+'</li><li class="next">'+options.nextText+'</li></ul>');
var carouselNav = carousel.prev('.hero-carousel-nav'),
timeoutInterval;
if(options.timeout > 0){
var paused = false;
if(options.pause){
carousel.hover(function(){
paused = true;
},function(){
paused = false;
});
}
if(options.pauseOnNavHover){
carouselNav.hover(function(){
paused = true;
},function(){
paused = false;
});
}
function autoSlide(){
if(!paused){
carouselNav.find('.next a').trigger('click');
}
}
timeoutInterval = window.setInterval(autoSlide, options.timeout);
}
carouselNav.find('a').data('disabled', false).click(function(e){
e.preventDefault();
var navItem = jQuery(this),
isPrevious = navItem.parent().hasClass('prev'),
elements = carousel.children();
if(navItem.data('disabled') === false){
options.onStart(carousel, carouselNav, elements.eq(currentItem), options);
if(isPrevious){
animateItem(elements.filter(':last'), 'previous');
}else{
animateItem(elements.filter(':first'), 'next');
}
navItem.data('disabled', true);
setTimeout(function(){
navItem.data('disabled', false);
}, options.animationSpeed+200);
if(options.timeout > 0){
window.clearInterval(timeoutInterval);
timeoutInterval = window.setInterval(autoSlide, options.timeout);
}
}
});
function animateItem(object,direction){
var carouselPosLeft = parseFloat(carousel.position().left),
carouselPrevMarginLeft = parseFloat(carousel.css('margin-left'));
if(direction === 'previous'){
object.before( object.clone().addClass('carousel-clone') );
carousel.prepend( object );
var marginLeft = Math.round(carouselPrevMarginLeft - childWidth);
var plusOrMinus = '+=';
}else{
object.after( object.clone().addClass('carousel-clone') );
carousel.append( object );
var marginLeft = carouselMarginLeft;
var plusOrMinus = '-=';
}
if(options.css3pieFix){
fixPieClones(jQuery('.carousel-clone'));
}
carousel.css({
'left': carouselPosLeft,
'width': Math.round(carouselWidth + childWidth),
'margin-left': marginLeft
}).animate({'left':plusOrMinus+childWidth}, options.animationSpeed, options.easing, function(){
carousel.css({
'left': '50%',
'width': carouselWidth,
'margin-left': carouselPrevMarginLeft
});
jQuery('.carousel-clone').remove();
finishCarousel();
});
}
function fixPieClones(clonedObject){
var itemPieId = clonedObject.attr('_pieId');
if(itemPieId){
clonedObject.attr('_pieId', itemPieId+'_cloned');
}
clonedObject.find('*[_pieId]').each(function(i, item){
var descendantPieId = $(item).attr('_pieId');
$(item).attr('_pieId', descendantPieId+'_cloned');
});
}
function finishCarousel(){
var elements = carousel.children();
elements.removeClass(options.currentClass).eq(currentItem).addClass(options.currentClass);
options.onComplete(carousel, carousel.prev('.hero-carousel-nav'), elements.eq(currentItem), options);
}
if(jQuery.browser.msie){
carouselNav.find('a').attr("hideFocus", "true");
}
options.onLoad(carousel, carouselNav, carousel.children().eq(currentItem), options);
}
});
};
BBC website is actually using a custom javascript library called glow. you might want to look at this:
Alternatively you can also use this slider, by checking the source code.
How can I interact with the tooltip in jQuery?
You know, the little pop-up appearing when you hover an <a> element or an <img>.
I wanted to make that one follow my cursor when I move onto that tag. Exactly like this.
You might wanna look at jQuery UI's tooltip or the QTip plugin.
A part for mouse tracking tooltip: Mouse tracking
I didn't not tried it but it seems nice: one more
Here is simple jquery plugin for custom tooltip. jsFiddle
You can specify mouseFollow: true to achieve movable tooltip that follows cursor.
JS
(function ($) {
$.fn.tooltip = function (options) {
var defaults = {
background: '#fff',
border: '1px solid #999',
color: 'black',
rounded: false,
mouseFollow: false,
textChangeOnClick: false
},
settings = $.extend({}, defaults, options);
this.each(function () {
var $this = $(this),
title = null,
hovering = null;
//set class
if (!settings.textChangeOnClick) {
$this.addClass('_tooltip');
}
$(this).data('title', $this.attr('title'))
$(this).attr('title', '');
$this.hover(
// mouse over
function (e) {
//check change
if ($this.attr('title') != '') {
if ($this.attr('title') != $this.data('title')) {
$this.data('title', $this.attr('title'));
$this.attr('title','');
}
} else {
$this.removeAttr('title');
}
$this.attr('title', '');
hovering = true;
$('#tooltip').remove();
//create box
if ($this.data('title') != '') {
$('<div id="tooltip" />')
.appendTo('body')
.text($this.data('title'))
.hide()
.css({
backgroundColor: settings.background,
color: settings.color,
border: settings.border,
top: e.pageY + 10,
left: e.pageX + 20
})
.fadeIn(500);
}
if (settings.rounded) {
$('#tooltip').addClass('rounded');
}
},
//mouse out
function () {
hovering = false;
$('#tooltip').remove();
});
//text change
if (settings.textChangeOnClick) {
//on click
$this.on('click', function () {
if (hovering) {
//set new
$this.data('title',$(this).attr('title'));
$(this).attr('title', '');
$('#tooltip').text($this.data('title'));
}
});
}
//mouse follow
if (settings.mouseFollow) {
$this.mousemove(function (e) {
$('#tooltip').css({
top: e.pageY + 10,
left: e.pageX + 20
});
});
}
});
return this;
}
})(jQuery);
SET PLUGIN FOR ELEMENT
$('a').tooltip({
mouseFollow: true
});
HTML
CSS
#tooltip
{
border: 1px solid #BFBFBF;
float: left;
font-size: 11px;
max-width: 250px;
padding: 5px;
position: absolute;
color: #464646;
z-index: 999999;
}
.rounded
{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
I have created a modal window using the Prototype JavaScript framework and the following object:
var Modal = Class.create({
animate: function () {
this.step = (this.step + 1) % 31;
if (this.throbber) {
this.throbber.setStyle({
backgroundPosition: 'center ' + this.step * -33 + 'px'
});
}
},
destroy: function () {
if (this.interval_id) {
window.clearInterval(this.interval_id);
}
if (this.timeout_id) {
window.clearTimeout(this.timeout_id);
}
if (this.overlay.parentNode) {
this.overlay.remove();
}
if(this.window.select('select')){
this.window.select('select').each(function(ele){
Element.remove(ele);
});
}
this.window.select('*').invoke('remove');
if (this.window.parentNode) {
this.window.remove();
}
},
initialize: function (element) {
this.launch_element = element;
this.overlay = new Element('div', {'class': 'modal_overlay'});
$$('body').first().insert(this.overlay);
this.close = new Element('a', {
'class': 'modal_close'
}).insert('Close');
this.close.observe('click', this.destroy.bind(this));
this.window = new Element('div', {'class': 'modal_window'});
if(this.window.select('select')){
this.window.select('select').each(function(ele){
Element.remove(ele);
});
}
this.window.select('*').invoke('remove');
this.window.insert(this.close);
this.section = new Element('div', {'class': 'section'});
this.show_throbber();
this.window.insert(this.section);
$$('body').first().observe('keypress', function (e) {
var key_code = window.event ? event.keyCode : e.keyCode;
var esc = window.event ? 27 : e.DOM_VK_ESCAPE;
if (key_code === esc) {
this.destroy();
}
}.bind(this));
$$('.container').first().insert(this.window);
if (Prototype.Browser.IE) {
this.scroll_window();
Event.observe(window, 'scroll', this.scroll_window.bind(this));
}
},
remove_throbber: function () {
if (this.interval_id) {
window.clearInterval(this.interval_id);
}
if (this.timeout_id) {
window.clearTimeout(this.timeout_id);
}
this.throbber.remove();
},
scroll_window: function() {
var height, offsets;
offsets = document.viewport.getScrollOffsets();
this.overlay.setStyle({
left: offsets.left + 'px',
top: offsets.top + 'px'
});
height = document.viewport.getHeight();
this.window.setStyle({
top: offsets.top + Math.round(17 * height / 100) + 'px'
});
},
show_throbber: function (text) {
if(this.section.select('select')){
this.section.select('select').each(function(ele){
Element.remove(ele);
});
}
this.section.select('*').invoke('remove');
if (!text) {
text = 'Loading';
}
this.throbber = new Element('div', {
'class' : 'modal_throbber'
}).insert(new Element('p').insert(text + '...'));
this.section.insert(this.throbber);
this.step = 0;
this.interval_id = window.setInterval(this.animate.bind(this), 50);
this.complete = false;
this.timeout_id = window.setTimeout(this.timeout.bind(this), 20000);
},
timeout: function () {
var div, p, span;
if (!this.complete) {
if (this.interval_id) {
window.clearInterval(this.interval_id);
}
if (this.throbber) {
this.remove_throbber();
span = new Element('span', {'class': 'icon icon-delete'});
p = new Element('p', {'class': 'first'}).update(span);
p.insert('There seems to be something wrong with eSP. ' +
'Please try again later.');
div = new Element('div', {'class': 'error'}).update(p);
this.section.update(div);
}
if (this.timeout_id) {
window.clearTimeout(this.timeout_id);
}
}
}
});
and is styled with the following stylesheet:
.modal_overlay {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 2999;
opacity: 0.5;
background: #000;
}
* html .modal_overlay {
filter: alpha(opacity=50);
position: absolute;
zoom: 1;
}
.modal_window {
display: block;
position: fixed;
top: 17%;
z-index: 3000;
}
* html .modal_window {
position: absolute;
}
.modal_close {
background: url('/images/close.gif') no-repeat scroll 0 0;
height: 26px;
cursor: pointer;
position: absolute;
right: -13px;
top: -8px;
width: 26px;
text-indent: -10000px;
}
.modal_throbber {
background: url('/images/throbber.png') no-repeat top center;
padding-top: 32px;
}
.modal_throbber p {
background: #fff;
text-align: center;
}
We are now getting reports from customers that when the modal window is taller than the screen they cannot scroll down to see the bottom part of the modal window's content.
Is it a case of us making sure that too much information isn't displayed in the modal or is there a better, more technical fix?
You can put a max-height on the modal window and overflow:scroll.