Anyone knows a JQuery plugin for BlockUI that allows blocking a specific DIV, not just the whole page. Thanks.
You can do it thru blockui plugin
You can do this natively with BlockUI: http://jquery.malsup.com/block/#element
$('div.test').block({ message: null })
$.blockUI({
message: $("#divid"),
css: {
position: 'absolute',
}
});
Related
I want to hide the 'Upload file' button of kendo upload since I am using my custom button for uploading file.
I have written the code on select file of kendo upload as,
function onSelect() {
$('.k-upload-selected').css("display", "none");
}
I have tried with the following css also,
.k-upload-selected{
display: none;
}
But the upload button is still there...
Please help me..
You can simply use
$(".k-button.k-upload-button").css("visibility", "hidden");
after initializing the widget. Example Dojo
for hide:
$('.k-upload-selected').css('visibility', 'hidden');
for completely removing
$('.k-upload-selected').remove();
Dojo example
You simply use
<style>
.k-clear-selected, .k-upload-selected{
display: none !important;
}
</style>
Dojo example
If you are using Kendo for Angular you need to set encapsulation in the component to ViewEncapsulation.None.
#Component({
selector: 'upload-selector',
templateUrl: 'upload.component.html',
styleUrls: ['upload.css'],
encapsulation: ViewEncapsulation.None
})
I have one problem with jQuery custom content scroller when I try to manipulate elements on page via ajax queries.
$(window).load(function(){
$(".scroll").mCustomScrollbar({
scrollButtons:{
enable:true
}
});
});
then I execute one ajax query to populate data from server
$.get(url, {'count':count, 'type':type}, function(data) {
masBlock.append(data);
$(".scroll").mCustomScrollbar("update");
deleteHoliday();
saveHoliday();
$('.add-holiday').hide();
})
but method "update" doesn't work and scroller doesn't resize. Please, what should I do to avoid this problem.
Thank you in advance.
Does the masBlock variable define the .scroll element or an element inside it?
Do you load images or plain text?
Instead of using the update method, you could try setting updateOnContentResize option parameter to true and see if that helps:
$(window).load(function(){
$(".scroll").mCustomScrollbar({
scrollButtons:{
enable:true
},
advanced:{
updateOnContentResize:true
}
});
});
I'm trying to use jquery.qtip to an anchor element in jquery.datatables.
Basically how it works is that on the anchor elements, I put an tooltip="tooltip desc" to anchor element.
And in js file, I put the following:
$('.simpletable a[tooltip]').each(function()
{
$(this).qtip({
content: $(this).attr('tooltip'),
style: 'dark'
});
});
It works for just regular datatables but when the source is an ajax, it stops working. I'm guessing it's because qtip is bound to the anchor elements as soon as the dom is ready. However, at that time, ajax dom is not yet ready. Thus datatables with ajax source does not get get bound to the qtip.
Is there a way to fix this problem?
I've been trying to find a method to call the above js script after the ajax call is completed but I just can't seem to find out how if it's possible.
Thanks,
Frank
Thanks to AlienWebguy, I learned about live. His answer didn't work right away (maybe different qtip version?) so for qtip2 Date: Wed Jul 20 11:31:55 PDT 2011, following worked for me:
$('.simpletable a[title]').live('mouseover', function(event) {
$(this).qtip({
overwrite: false,
show: {
event: event.type,
ready: true
}
}, event);
});
Thank you so much AlienWebguy! You have no idea how much I appreciate your help!!
Use a future-proof binding observer such as live() or delegate(): "Attach a handler to the event for all elements which match the current selector, now and in the future."
$('.simpletable a[tooltip]').each(function()
{
$(this).live('qtip',function({
content: $(this).attr('tooltip'),
style: 'dark'
});
});
http://api.jquery.com/live/
I am using the jQuery TipTip plugin to display tooltips on hrefs using data from the "Title" tag.
Here is the code i am using to invoke TipTip
<script type="text/javascript" src="jquery.tipTip.js"></script>
<!-- ToolTip script -->
<script type="text/javascript">
$(function(){
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
});
</script>
<!-- End ToolTip script -->
and in the body
sample content. sample,stuff.
This works fine as standalone example. However, when i set the script up to load the content into the body via ajax (using sample.html that contains the original body code), the ToolTip stops working.
<script type="text/javascript">
//loading sample ajax data
$(document).ready(function(){
$('#remote').load('sample.html');
});
</script>
Browsing in the TipTip forums, someone mentioned this could work using the jQuery .live function, but having read the documentation, i dont understand how im supposed to implement this with my code. I understand that jquery-live is an event handler, so supposedly, i could call in the data via ajax as the primary event and then apply TipTip as a secondary event, but i cant figure out how to implement this, and dont know if im definitely going down the right path.
Could someone please advise me?
An easy solution would be to create a function that activates TipTip:
function activateTipTip() {
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
}
$(document).ready(function(){
activateTipTip();
$('#remote').load('sample.html', function() {
activateTipTip();
});
});
Not very elegant, but should work though.
This code will make it so that any link that has a title attribute will have TipTip's functionality applied to it:
$('a[title]').live('mouseover', function()
{
$(this).tipTip({
delay: 200,
maxWidth: '400px'
});
$(this).trigger('mouseenter');
});
Source: https://drew.tenderapp.com/discussions/tiptip/73-tiptip-and-jquery-live
This is my solution for this problem:
$(ElementParent).on('mouseover', YourElementSelector, function()
{
if($(this).data('hasTipTip') !== true)
{
$(this).tipTip(TipTipOptions);
$(this).data('hasTipTip', true);
$(this).trigger('mouseover');
}
});
i want to apply jquery tooltip plugin from jQuery Tools website
(http://flowplayer.org/tools/tooltip/index.html) to some elements loaded by ajax in my page.
i know that delegate(0 and live() methods are used for applying events to ajax loaded elements but i don't know how i can apply a plugin to these kind of elements.
the code is:
$("#mytable img").tooltip({
// each trashcan image works as a trigger
tip: '#tooltip',
// custom positioning
position: 'center right',
// move tooltip a little bit to the right
offset: [0, 15],
// there is no delay when the mouse is moved away from the trigger
delay: 0
}).dynamic({ bottom: { direction: 'down', bounce: true } });
would someone help me?
thank you.
Apply the call to a hover function portion of your script like:
$("#mytable img").live('hover', function() {
//your function here
});
Alternatively you can use the script directly inside the ajax page you're loading in, in which case the script is directly in the same layer as the content.
You have to initialize the tooltip plugin on the new content on the success function of your ajax call.
it is solved now.i wrote it here:
jQuery Tooltip plugin error