I have some elements in one page which I want to have cover overlay on those in order to disable those elements.
I have an ajax call which in success, I used the coverWithOverlay($('.disable')); to disable all the elements that have .disable class.
Here is the function:
function coverWithOverlay($element) {
var pos = $element.offset();
var $overlay = $('<div class="inside"></div>').attr({
title: 'this is disabled'
}).css({
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
top: pos.top + 'px',
left: pos.left + 'px',
width: $element.outerWidth() + 'px',
height: $element.outerHeight() + 'px'
});
$(document.body).append($overlay);
return $overlay;
}
It works if I have just one element in the page. How can I investigate that to several elements?
Some pages have one some pages have more than one elements to be disabled.
Why don't you try something like this?
function coverWithOverlay($elements) {
$($elements).each(function () {
var $element = $(this);
var pos = $element.offset();
var $overlay = $('<div class="inside"></div>').attr({
title: 'this is disabled'
}).css({
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
top: pos.top + 'px',
left: pos.left + 'px',
width: $element.outerWidth() + 'px',
height: $element.outerHeight() + 'px'
});
$(document.body).append($overlay);
});
}
Working fiddle: http://jsfiddle.net/codovations/23FtA/
That being said, jQuery BlockUI plugin will be a more generic way to do this.
Fiddle: http://jsfiddle.net/codovations/X5DfK/
Related
Hey all I am new at jQuery plugins and therefore am unsure how to go about adding a destroy and reset (where I can bring it back) to this plugin I am currently using for tooltips.
The JS code is this:
/**
* This is a simple jQuery plugin that make nice tooltips.
*
* #class ssTooltips
* #author Jacek Berbecki
*/
;(function($) {
'use strict';
$.ssTooltips = {version: '1.0.0'};
$.fn.ssTooltips = function(element, options) {
// set tooltip options
var settings = $.extend({
bgColor: '#333',
txtColor: '#f2f2f2',
maxWidth: 200,
borderRadius: 3,
fontSize: 12
}, options);
// get elements
var elements = $(element);
// start tooltip engine when elements exists
if(elements && elements.length > 0) {
// cteare tootlip element
var tooltipWrapper = $('<div id="tooltip-wrapper"></div>'),
tooltipBox = $('<div id="tooltip-box"></div>'),
tooltipArrow = $('<div id="tooltip-arrow"></div>');
// set tooltop element styles
tooltipWrapper.css({
'display': 'none',
'position': 'absolute',
'opacity': '0.95'
});
tooltipBox.css({
'background': settings.bgColor,
'padding': '5px 15px',
'color': settings.txtColor,
'border-radius': settings.borderRadius + 'px',
'box-shadow': '0 2px 6px -1px rgba(0,0,0,0.3)',
'max-width': settings.maxWidth + 'px',
'font-size': settings.fontSize + 'px'
});
tooltipArrow.css({
'width': '10px',
'height': '10px',
'background': settings.bgColor,
'position': 'absolute',
'left': '16px',
'bottom': '-4px',
'transform': 'rotate(45deg)'
});
// append tooltop to document
tooltipBox.appendTo(tooltipWrapper);
tooltipArrow.appendTo(tooltipWrapper);
$('body').append(tooltipWrapper);
// fire tooltip mouse actions
elements.each(function(index, element) {
var $this = $(this),
dataTxt = $this.attr('data-tooltip');
$this.removeAttr('title');
$this.on({
mousemove: function(event) {
tooltipWrapper
.css({
'left': event.pageX - 20,
'bottom': ($( window ).height() - event.pageY + 20)
})
},
mouseenter: function(event) {
tooltipWrapper
.hide()
.fadeIn('fast');
tooltipBox
.empty()
.html(dataTxt);
},
mouseleave: function(event) {
tooltipWrapper
.stop()
.fadeOut('fast');
}
})
});
} else {
return false;
}
}
}(jQuery));
And as you may see, there is no destroy, delete, etc in there.
The purpose to all of this is for me to disable the tooltips on the page until I press a button to show them then if I pressed the button again, they would get destroyed again.
I see a few examples of the destroy function found here:
destroy: function() {
this._destroy(); //or this.delete; depends on jQuery version
this.element.unbind( this.eventNamespace )
this.bindings.unbind( this.eventNamespace );
//this.hoverable.removeClass( "hover state" );
//this.focusable.removeClass( "focus state" );
}
But am unsure how to implement it in the current code. Same with Destory.
And help would be great!
I got it!
/**
* This is a simple jQuery plugin that make nice tooltips.
*
* #class ssTooltips
* #author Jacek Berbecki
*/
; (function ($) {
'use strict';
$.ssTooltips = { version: '1.0.0' };
$.fn.ssTooltips = function (element, options) {
// set tooltip options
var settings = $.extend({
bgColor: '#333',
txtColor: '#f2f2f2',
maxWidth: 200,
borderRadius: 3,
fontSize: 12
}, options);
// get elements
var elements = $(element);
// start tooltip engine when elements exists
if (elements && elements.length > 0) {
// cteare tootlip element
var tooltipWrapper = $('<div id="tooltip-wrapper"></div>'),
tooltipBox = $('<div id="tooltip-box"></div>'),
tooltipArrow = $('<div id="tooltip-arrow"></div>');
// set tooltop element styles
tooltipWrapper.css({
'display': 'none',
'position': 'absolute',
'opacity': '0.95',
'z-index': 8
});
tooltipBox.css({
'background': settings.bgColor,
'padding': '5px 15px',
'color': settings.txtColor,
'border-radius': settings.borderRadius + 'px',
'box-shadow': '0 2px 6px -1px rgba(0,0,0,0.3)',
'max-width': settings.maxWidth + 'px',
'font-size': settings.fontSize + 'px'
});
tooltipArrow.css({
'width': '10px',
'height': '10px',
'background': settings.bgColor,
'position': 'absolute',
'left': '16px',
'bottom': '-4px',
'transform': 'rotate(45deg)'
});
// append tooltop to document
tooltipBox.appendTo(tooltipWrapper);
tooltipArrow.appendTo(tooltipWrapper);
$('body').append(tooltipWrapper);
// fire tooltip mouse actions
elements.each(function (index, element) {
var $this = $(this),
dataTxt = $this.attr('data-tooltip');
$this.removeAttr('title');
$this.on({
mousemove: function (event) {
tooltipWrapper
.css({
'left': event.pageX - 20,
'bottom': ($(window).height() - event.pageY + 20)
})
},
mouseenter: function (event) {
tooltipWrapper
.hide()
.fadeIn('fast');
tooltipBox
.empty()
.html(dataTxt);
},
mouseleave: function (event) {
tooltipWrapper
.stop()
.fadeOut('fast');
},
mousedown: function (event) {
tooltipWrapper
.stop()
.fadeOut('fast');
}
})
});
$.fn.ssTooltips.destroy = function () {
$('#tooltip-wrapper').remove();
}
$.fn.ssTooltips.reset = function () {
$(document).ssTooltips('.tips', {
//Controls the tooltips for examples for text/select boxes
bgColor: settings.bgColor,
txtColor: settings.txtColor,
maxWidth: settings.maxWidth,
borderRadius: settings.borderRadius,
fontSize: settings.fontSize
});
}
} else {
return false;
}
}
}(jQuery));
I created $.fn.ssTooltips.destroy and $.fn.ssTooltips.reset and I am calling them like so:
$('#tool_destory').on('click', function (e) {
//Destory the tool tips
$('#tooltip-wrapper').ssTooltips.destroy();
});
$('#tool_addback').on('click', function (e) {
//Add tool tips
$('#tooltip-wrapper').ssTooltips.reset();
});
I want to stick child div to bottom when parent div touches the browser bottom.
P.S : This should happen when the parent div is pushed down not when scrolled down.
For example in my demo there is a content panel which is hidden. If you click on expand link you get to see the expanded content (which is pushing the bottom_content div to the bottom).
But accordion is just an example, there will be some other element which will be pushing the bottom_content div down. So I dont want to write stick function with reference to accordion.
It should stick down only when bottom_content div touches the bottom of the browser and when there is no much content in the page then the child div should stay as it is like child of the bottom_content
Parent div: bottom_content
Child div: footer
Here is my code currently used, which is not proper
$('.expandble_conetnt a').click(function(event){
event.preventDefault();
$(this).next('span').slideToggle();
});
//this is for stick to the bottom
var stickyHeaderbottom = $('.footer').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderbottom) {
$('.footer').css({ position: 'fixed', bottom: '0px', width: '95%', left: '2.5%' });
} else {
$('.footer').css({ position: 'static', bottom: '0px', width: '100%' });
}
});
DEMO
The whole idea is to handle .footer position on window scrolling, on window resizing and after .slideToggle() for the list is completed:
Fiddle.
var stickyHeaderbottom = $('.footer').offset().top;
$('.expandble_conetnt a').click(function()
{
$(this).next('span').slideToggle(function()
{
handleBottom();
});
return false;
});
$(window).scroll(function()
{
handleBottom();
});
$(window).resize(function()
{
handleBottom();
});
function handleBottom()
{
if ($(window).height() + $(window).scrollTop() < $(document).height())
{
$('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' });
}
else
{
$('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 });
}
}
Edit. Updated fiddle without weird footer jumping after list opening.
var stickyHeaderbottom = $('.footer').offset().top;
$('.expandble_conetnt a').click(function()
{
var toggledElement = $(this).next('span');
handleBottom(toggledElement.height());
toggledElement.slideToggle(function()
{
handleBottom();
});
return false;
});
$(window).scroll(function()
{
handleBottom();
});
$(window).resize(function()
{
handleBottom();
});
function handleBottom(additionalHeight)
{
var pageHeight = $(document).height();
if (additionalHeight)
{
pageHeight += additionalHeight;
}
if ($(window).height() + $(window).scrollTop() < pageHeight)
{
$('.footer').css({ position: 'fixed', bottom: '0', width: '95%', left: '2.5%' });
}
else
{
$('.footer').css({ position: 'absolute', bottom: '0', width: '100%', left: 0 });
}
}
you can make js on.change to change that div position to absolute and bottom:0 left:0
I want to develop my simple autocomplete, I'm not interested in the JQuery autocomplete Plugin.
I just want to add a dive right below the input text, this code was suppose to work, what am I doing wrong? what is the way to accomplish that?
JSFiddle
here is the code if you don't whant to open fiddle:
$("#txtSearch").keypress(function (e) {
if ($("#txtSearch").val().length >= 2) {
var pos = $("#txtSearch").position();
$('<div />', {
'html': "xxxxxxxxx xx x"
}).css({
top: pos.top,
left: pos.left,
width: '300px',
position: 'absolute',
'background-color': 'Yellow'
}).appendTo($("#txtSearch"));
}
});
Try below code,
$("#txtSearch").keypress(function (e) {
if ($("#txtSearch").val().length >= 2) {
var pos = $("#txtSearch").position();
$('<div />')
.html("xxxxxxxxx xx x")
.css({
top: pos.top + $("#txtSearch").height() + 1,
left: pos.left,
width: '300px',
position: 'absolute',
'background-color': 'Yellow'
}).insertAfter($("#txtSearch"));
}
});
DEMO: http://jsfiddle.net/uZF5g/1/
You can't append to (.appendTo) empty content model elements. Use .insertAfter (or .insertBefore) instead. You probably also want the top to at least be added to the height of the input.
http://jsfiddle.net/uZF5g/3/
$("#txtSearch").keypress(function (e)
{
if ($("#txtSearch").val().length >= 2)
{
$('#txtSearch').after('<div id="someID">');
$('#someID').html('xxxxxxx xx x')
.css({
top: pos.top,
left: pos.left,
width: '300px',
position: 'absolute',
'background-color': 'Yellow'
})
.appendTo($("#txtSearch"));
}
});
I'm using ThickBox to open popup in my page. In popup there is a tab on click on which i need to change the size of ThickBox popup window. How can i do that ?
Thanks in advance.
This is the code they use
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}
so you can use the same with a slight change (assuming you use a modern version of jQuery)..
$('#yourbutton').click(function() {
var TB_WIDTH = 100,
TB_HEIGHT = 100; // set the new width and height dimensions here..
$("#TB_window").animate({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
});
Demo at http://jsfiddle.net/gaby/rrH8q/
Attach a click event handler to said tab that changes the TB_Window dimensions and margins to center it again, e.g.
$("#tab").click(function() {
$("#TB_window").css("height", newHeight);
$("#TB_window").css("width", newWidth);
$("#TB_window").css("margin-top", ($(window).height()-newHeight)/2 );
$("#TB_window").css("margin-left", ($(window).width()-newWidth)/2);
});
A little correction in Gaby aka G. Petrioli's answer so that popup should set the margins also correctly :
var TB_WIDTH = 500, TB_HEIGHT = 400;
// set the new width and height dimensions here..
$("#TB_window").animate({marginLeft: '"'+parseInt((($vitjs(window).width()-TB_WIDTH) / 2),10)
+ 'px"', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px',marginTop:'"'+parseInt((($vitjs(window).height()-TB_HEIGHT) / 2),10) +
'px"'});
I did something like this.
This needs to be re-launched if the wiewport is resized while the popup is open.
function tb_position() {
if(TB_WIDTH > $(window).width())
{
$("#TB_window").css({marginLeft: 0, width: '100%', left: 0, top:0, height:'100%'});
$("#TB_ajaxContent, #TB_iframeContent").css({width: '100%'});
$("#TB_closeWindowButton").css({fontSize: '24px', marginRight: '5px'});
}
else
$("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
}
You have to enclose this inside a setTimeout so that this will be done after the thickbox is opened, not when the button is click. Usually, it happens in between of "Clicking of button" and "opening of thickbox".
var TB_WIDTH = jQuery(window).width() > 400 ? 400 : jQuery(window).width(),
TB_HEIGHT = 400; // set the new width and height dimensions here..
setTimeout(function() {
jQuery("#TB_window").css({
marginLeft: '-' + parseInt((TB_WIDTH / 2), 10) + 'px',
width: TB_WIDTH + 'px',
height: TB_HEIGHT + 'px',
marginTop: '-' + parseInt((TB_HEIGHT / 2), 10) + 'px'
});
}, 0);
I'm trying to show a loader gif, on a jquery dialog(with no title bar of course) after a user clicks submit on a form.
After doing a couple of thing I came up with this: demo ,and said to myself "Finally! Success!", but when I tested it on IE (I usually use Chrome),much to my disappointment, the animation (loader.gif) didn't seem to be that animated, I mean it looked like a static image and I don't know why it works so fine in FF, Chrome and safary and it simply doesn't work in IE.
I know that gif works wonders on the jsfiddle , even If you use IE, but for some reason when I do the same on my project it doesn't :(
PS:I have no problem if you have another way of doing the same thing, as long as it also works in IE
Hope you can help me out with this.
Ok Here is how I got around it. It seems to be dependent on the time the overlay is added to the document.
Explanations:
If the image is added to chrome and FF's DOM during onclick it won't show my wait GIF... but it will show up in IE. I'm not sure as to why it shows up in IE and not ff or chrome. It could have something to do with the fact that it's added to the DOM on the fly just before a postback.
If the image is added to the DOM at page load time and just slid off the screen, I can simply move it to the proper place just before postback and it will work in FF and chrome but not in IE. IE stops the GIF from animating when doing it this way.
Works in IE
function IeWaitOverlayObj() {
var _waitoverlay = null;
var _waitImage = null;
var _isHidden = true;
this.showOverlay = function() {
if (!_waitoverlay) {
_waitoverlay =
$('<div></div>')
.css({
zIndex: '9998',
backgroundColor: '#000000',
width: $(window).width(),
height: $(window).height(),
top: '0px',
left: '0px',
position: 'absolute',
opacity: '0.5'
});
var tag = '<img alt="pleaseWait" src="../Images/wait.gif" />';
_waitImage = $(tag).css({
zIndex: '9999',
position: 'absolute',
top: $(window).height() / 2 - 75,
left: $(window).width() / 2 - 200,
width: '400px',
height: '150px'
});
$('body').append(_waitoverlay);
$('body').append(_waitImage);
_isHidden = false;
}
};
this.hideOverlay = function() {
_waitoverlay.hide();
_isHidden = true;
};
this.OnWindowResize = function() {
if (!_isHidden) {
_waitoverlay.css({
width: $(window).width(),
height: $(window).height()
});
_waitImage.css({
top: $(window).height() / 2 - 75,
left: $(window).width() / 2 - 200
});
}
}
}
Works in Chrome and FF
function WaitOverlayObj() {
var _waitoverlay = $('<div></div>');
var _waitImage = $('<img alt="pleaseWait" src="../Images/wait.gif" />');
var _isHidden = true;
$('body').append(_waitoverlay);
$('body').append(_waitImage);
_waitoverlay.css({
zIndex: '9998',
backgroundColor: '#000000',
width: $(window).width(),
height: $(window).height(),
top: '0px',
left: $(window).width() * -1,
position: 'absolute',
opacity: '0.5'
});
_waitImage.css({
zIndex: '9999',
position: 'absolute',
top: '0px',
left: '-400px',
width: '400px',
height: '150px'
});
this.showOverlay = function() {
_waitImage.css({ top: $(window).height() / 2 - 75, left: $(window).width() / 2 - 200 });
_waitoverlay.css({ top: '0px', left: '0px' });
_isHidden = false;
};
this.hideOverlay = function() {
_waitImage.css({ top: '0px', left: '-400px' });
_waitoverlay.css({ top: '0px', left: $(window).width() * -1 });
_isHidden = true;
};
this.OnWindowResize = function() {
if (!_isHidden) {
_waitoverlay.css({
width: $(window).width(),
height: $(window).height()
});
_waitImage.css({
top: $(window).height() / 2 - 75,
left: $(window).width() / 2 - 200
});
}
}
}
And in my Document.Ready
if (navigator.appName == "Microsoft Internet Explorer") {
wait = new IeWaitOverlayObj();
}
else{
wait = new WaitOverlayObj();
}
Base64-encode the image into your CSS. IE8 continues to animate it then.
window.onbeforeunload = function() { jQuery("img").attr("src", "image.gif") }; should work. I didn't check it now but the idea is the same I successfully used sometime ago