Is it possible to make a div and sub elements (what ever is like buttons span,...) disabled and have a tooltip on that for example (this section is disabled).
I just tried:
$(".divclass").css('pointer-events', 'none').css('opacity', '.4').css('filter', 'alpha(opacity=50)');
The div and sub elements are disabled but I can't have a tooltip on that even title doesn't work.
How about covering the disabled elements with an overlay?
The following code creates a plugin that covers all the elements with an overlay. The "title" parameter is used to supply the "title" attribute for the overlay element.
$.fn.coverWithOverlay = function(title) {
return this.each(function() {
var $element = $(this),
pos = $element.offset();
var $overlay = $('<div></div>').attr({
title: title
}).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);
});
}
You call the plugin like this:
$('.disabled').coverWithOverlay('this is disabled');
Demo on JsFiddle
If this is a technique you want to utilize but want more functionality, you could use a library — like the jQuery BlockUI Plugin.
Related
I am using bootstrap so I can't use JQuery UI anymore. This code gets reused a lot and I can't figure out how to make a Modal with JQuery only (No html other than the button itself). Can you customize and create one only with JQuery outside of HTML?
$(".trigger").on('click',function(e) {
$('#integrate_employee_popup').show('block');// used to be .trigger()
return false;
});
$("#integrate_employee_popup").bind('block',function(e) {
$(this).show();
/* old code was a blockui */
});
For reference here is the old JQuery UI code:
/*
$.blockUI({
message: $('#integrate_employee_popup'),
css: {
top: '2%',
left: ($(window).width() - 650) /2 + 'px',
width: '650px',
border: "none",
cursor: "default"
}
});*/
I tried to make a modal but it doesn't work:
http://www.bootply.com/1d3OLr29xF
var window_width = $(window).width();
var window_height = $(window).height();
$('.modal_window').each(function(){
//get the height and width of the modal
var modal_height = $(this).outerHeight();
var modal_width = $(this).outerWidth();
//calculate top and left offset needed for centering
var top = (window_height-modal_height)/2;
var left = (window_width-modal_width)/2;
//apply new top and left css values
$(this).css({'top' : top , 'left' : left});
});
Test Button
first here is the JSFiddle I've been working on
http://jsfiddle.net/rastlin80/P53Le/
I've created a new plugin called sopopup
what is does is match an element as a pop-up that will appear around some text when the text is hovered.
it works correctly when the selector for the element that will be hovered is a single element
$('#message').sopopup({ target: $('#ho')});
the pop up appears right above the text, but when the selector has multiple items it always hovers over the first item.
$('#message2').sopopup({ target: $('.meds')});
my problem is in the code for the hover event.
settings.target.hover( //where target are the elements selected such as $('.meds')
function() {
//here is my problem the var this is not the target being hovered
//the var this is refering to the settings it seems
var pos;
var hgt;
if(settings.location === 'top'){
pos = settings.target.position();
//i wanted to do this.position() but that show an error
hgt = settings.pop.height();
settings.pop.css({
position: "absolute",
top: (pos.top - hgt) + "px",
left: pos.left + "px"
});
}
else if( settings.location === 'bottom'){
pos = settings.target.postion();
hgt = settings.target.height();
settings.pop.css({
position: "absolute",
top: (pos.top + hgt) + "px",
left: pos.left + "px"
});
}
settings.pop.show();
}.bind(settings)
I am unable to use the variable this to refer to the item that is currently being hovered over. instead the variable this within the hoverIn function seems to refer to the settings object.
any help appreciated.
This fork of your Fiddle uses a combination of $.each and setting a variable named self to reference the appropriate this (wrapped with jQuery) to achieve what I believe it is you're asking for:
$.each(settings.target, function(){
var self = $(this);
self.hover(function() {
var pos;
var hgt;
if(settings.location === 'top'){
pos = self.position();
[...]
I want to create a transparent highlight to cover a particular DOM element.
My highlight will occasionally be switched from one element to another.
The basic implementation is easy: create an empty <div class='highlight'/> with css attributes for background-color and opacity.
But having it follow another element seems hard, because the highlighted element could move or resize or show or hide, and I'm not sure how to have the highlight follow it.
There must be someone who's done this before -- Firebug seems to have the effect I want, but I don't know how to delve into the Firebug source code + find the relevant piece.
Any suggestions?
Any reason you can't use the jQuery highlight effect?
Simple HTML element at the top of your DOM:
<div id="highlighter" class="highlight"></div>
Style it with abstracted CSS:
div {
border:1px solid #CCC;
position:relative;
}
#highlighter {
display:none;
border:none;
}
.highlight {
z-index:999999;
background-color:yellow;
opacity:.5;
-moz-opacity:.5;
position:absolute;
width:100%;
height:100%;
}
The JQuery is a little more complicated if you want the highlighter to tag along with your animated divs:
$('div').not('.highlight').on('click', function() {
var $this = $(this);
if($this.find('.highlight').length > 0) {
$this.find('.highlight').remove();
} else {
$('#highlighter').clone().appendTo($this).
width($this.width()).
height($this.height()).
css({
'top': '0px',
'left': '0px'
}).
show();
}
});
(function morph(){
$('div').not('.highlight').each(function(){
var $this = $(this);
$this.animate({
'top' : someVal + 'px',
'left' : someVal + 'px',
'width': someVal + 'px',
'left' : someVal + 'px',
}, {
duration: 1000,
step: function(){
// Here we tell the highlighter to sync up with the morphed parent.
$this.find('.highlight').width($this.width()).height($this.height());
},
complete: morph
});
});
}());
Demo: http://jsfiddle.net/AlienWebguy/7t4jT/
i am trying to slide a div content to top right side. i am trying but i can't get it, here is my html code
<html><body>
<button id="animatenow">animate now!</button>
<div id="container">
<div>hi</div>
<div>there</div>
</body>
</html>
here is script
$(document).ready(function(){
$('#animatenow').click(function(){ $('#container').animate({width: "-=300px",marginTop: "-=1250px", height: "+=50px"},1500);}); });`
my css is
#container{width:600px;color:#fff;background:#f00;height:400px}
my jsfiddle code
Well, a somewhat overly-complex means to do this:
$('#animatenow').click(function(){
var that = $('#container');
var h = that.height();
var w = that.width();
$('#container')
.wrap('<div id="placeholder"></div>')
.parent()
.css({
'width' : w,
'height' : h
})
.find('#container')
.css({
'position' : 'absolute',
'top' : 0,
'left' : 0,
'right' : 0,
'bottom' : 0
})
.animate(
{
'top' : '-' + h,
'left' : w,
'right' : '-' + w,
'bottom' : h
},2000,
function(){
$(this).parent().remove();
});
});
JS Fiddle.
The above assumes you want to avoid the sliding element's text wrapping and re-flowing as it slides out of view. If you're okay with re-flowing text, then it's a lot easier and avoids adding a new wrapping element and the (hideous) call to animate().
References:
animate().
click().
css().
find().
height().
parent().
remove().
width().
wrap().
you forgot position:absolute on the #container css
$(document).ready(function(){
$('#animatenow').click(function(){
$('#container').animate({
marginLeft: "700px",
marginTop: "-=1250px",
}
,1500);
});
});
Are you trying to get an effect like this? I am unsure of what you mean, hope this helps a little.
I have updated your code here .Basicall you need to animate the left ,top and width properties after seting the position:absolute property to #container
$(document).ready(function() {
$('#animatenow').click(function() {
$('#container').animate({
right: '0',
top: '0',
width: '120',
height: '120'
}, 'slow');
});
});
If you want to move the div out of visible area or hide it make the width and height 0px
I want to scroll a news article list up and down depending on which buttons is clicked
I wanted to adapt this way of animating if possible:
function smoothAdd(id, text)
{
var el = $('#scroller' + id);
var h = el.height();
el.css({
height: h,
overflow: 'hidden'
});
var ulPaddingTop = parseInt(el.css('padding-top'));
var ulPaddingBottom = parseInt(el.css('padding-bottom'));
el.prepend('<li>' + text + '</li>');
var first = $('li:first', el);
var last = $('li:last', el);
var foh = first.outerHeight();
var heightDiff = foh - last.outerHeight();
var oldMarginTop = first.css('margin-top');
first.css({
marginTop: 0 - foh,
position: 'relative',
top: 0 - ulPaddingTop
});
last.css('position', 'relative');
el.animate({ height: h + heightDiff }, 1500)
first.animate({ top: 0 }, 250, function() {
first.animate({ marginTop: oldMarginTop }, 1000, function() {
last.animate({ top: ulPaddingBottom }, 250, function() {
last.remove();
el.css({
height: 'auto',
overflow: 'visible'
});
});
});
});
}
$('.scrollUp').click(function() {
smoothAdd('scrollUp', 'A new item');
});
Example here: http://www.fiveminuteargument.com/blog/scrolling-list
My HTML looks like this:
<ul id="scroller">
<li class="current"><span>/</span>News Article Title</li>
<li><span>/</span>News Article Title 2</li>
<li><span>/</span>News Article Title 3</li>
</ul>
<div class="btnWrap"><p>Scroll Up
Scroll Up</p></div>
Can anyone point me in the right direction?
Basically maintain the animation style but keep it as a defined UL as per a normal carousel.
Here : http://jsfiddle.net/sDedY/13/
I've written form scratch. as you notice I've added css directly in a css file, it's better than adding css via jquery, especially for future mainenance/ decorateion etc.., but I havent spent much time for different caluclations. This is a blueprint I guess, you can modify and make it much better, like make top and bottom combined to make the function small or things like that, i jsut dont have time anymore ... so again : redo the calculations based on css yourself and modify it !
EDIT : regarding variable height, you need to keep in mind that I haven't finalised the whole function. next step in coding this function would be auto-calculation of margin-top and top rather than manually entering them, which is pretty easy. all that's needed is to pass a variable to get the position and dimensions of li elements and then pass them to our code.
I've change a few lines of your code:
var el = $('#scroller' + id); to var el = $('#' + id);
and
smoothAdd('scrollUp', 'A new item'); to smoothAdd('scroller', 'A new item');
see http://jsfiddle.net/nCWAP/
I made a slightly simpler solution. Check it out here
You don't need to mess with absolute or relative position neither with top. The list has height as auto so it grows/shrinks according to the height of their li elements
EDIT
Now the height is automatically adjusted to show all items.
Also supports li elements of any height.