Horizontal line / handle, that once clicked and dragged, makes upper div decrease in size while bottom div increase, and vice versa. The idea is to implement a similar splitter to the one present on JSFiddle four windows interface.
The implementation Demo on JSFiddle is here
Javascript:
$(function() {
var bottomElem = $(".resizable-bottom");
var bottomElemOriginalHeight = bottomElem.height();
$(".resizable-top").resizable({
handles: 's',
resize: function(event, ui) {
bottomElem.height(bottomElemOriginalHeight - (ui.element.outerHeight() - ui.originalSize.height));
},
stop: function(event, ui) {
bottomElemOriginalHeight = bottomElem.height();
},
//This has the effect of minHeight for bottomElem
maxHeight: $(".resizable-top").height()
});
});
Related
I have horizontal tabs 1 as,
How can I make tabs vertical on window resize than it has been overflowed?
like this:
I don't want usign #media because tabs are dinamic and may be only 1-2 tabs and it will display good in horizontal view
Use JS/jQuery to calculate total width of tabs and check if it's grater than container width.
var totalWidth = 0;
var availableWidth = $('.tabs-container').width();
$('.tabs').each(function () {
totalWidth += $(this).outerWidth(true);
});
$('.tabs-container')
.toggleClass('v-tabs', totalWidth >= availableWidth)
.toggleClass('h-tabs', totalWidth < availableWidth);
You could use Jquery to add a new class on a window resize
$( window ).resize(function() {
$("tabs").addClass("nice looking class");
}
other than this i would use a responsive grid.
Basically join Justinas and Troajans answers together:
function checkTabWidths(){
var totalWidth = 0;
var availableWidth = $('.tabs-container').width();
$('.tabs-container').removeClass('v-tabs h-tabs');
$('.tabs').each(function () {
totalWidth += $(this).outerWidth(true);
});
if (totalWidth >= availableWidth) {
$('.tabs-container').addClass('v-tabs');
} else {
$('.tabs-container').addClass('h-tabs');
}
}
$( window ).resize(function() {
checkTabWidths(); // Check widths on resize
}
checkTabWidths(); // To check on load
You can use jquery to do that:
//first get the container width
var container=$("#containID").width();
//then get the total width of each tabs
var totalWidthOfTabs=0;
$("#containID .tabs").each(function(){
totalWidthOfTabs+=$(this).width();
});
//when window resize, do something
$( window ).resize( function(){
if(totalWidthOfTabs>container){
$("#containID .tabs").css("width","100%");
}
});
just an idea to do what you want. I do not check it whether it is correct or not, you can change it if the example is wrong~
I was using this code to keep popovers stay open on hover:
var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
var container, timeout;
originalLeave.call(this, obj);
if(obj.currentTarget) {
container = $(obj.currentTarget).siblings('.popover')
timeout = self.timeout;
container.one('mouseenter', function(){
//We entered the actual popover – call off the dogs
clearTimeout(timeout);
//Let's monitor popover content instead
container.one('mouseleave', function(){
$.fn.popover.Constructor.prototype.leave.call(self, self);
});
})
}
};
$('body').popover({ selector: '[data-popover]', trigger: 'click hover', placement: 'auto', delay: {show: 50, hide: 400}});
Example here: http://jsfiddle.net/raving/2thfaxeu/
This works great on Bootstrap 3, however I'm now using the Bootstrap 4 alpha and this doesn't work anymore. I can't figure out how to get it to work and I can't find an answer anywhere. Could anyone help me modify this code to work with Bootstrap 4?
Alright I found an answer. I looked through other Bootstrap 3 solutions and found one that I was able to tweak to work with Bootstrap 4. Also I forgot to mention this is using popovers with tether.js.
$(".trigger-link").popover({
trigger: "manual",
}).on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
$(_this).popover("hide")
}
}, 100);
});
I have a div element which I am able to drag however I wish to drop it in a specific div element. Here, I need to remove the dragged cloned element div while drag and also the original dragged element shouldn't be change.
I used a custom helper div while dragging. Here, how can I remove the cloned dragged element?
I'm using the below code,
dragStart: function(event){
event.preventDefault();
},
drag: function(event){
event.preventDefault();
var self = this;
var posi_left = event.originalEvent.clientX;
var posi_right = event.originalEvent.clientY;
$('#helperdiv').css({'left': posi_left, 'top': posi_right });
},
drop: function(event) {
event.preventDefault();
}
JSBIN LINK: JSBIN DEMO
Im trying to make draggable objects align to each other from far.
its allmost done but the thing that is not working is if you watch carefully at the example, the helpers are 1 move behind.. if u move it 1 pixel up the helpers will go to the -1 place u were.. and only next move be where your mouse was :(
hope u understand HERE IS A WORKING CODE (DEMO)
any ideas what is wrong with it?
i think the problem is in this part but i dont know what to change that will work without this bug:
drag: function(event, ui) { drawGuideLines($(this)); },
start: function(event, ui) { removeAlignLines($(this)); },
stop: function(event, ui) {
rebuildAlignLines($(this));
linesTimeout = setTimeout("hideGuideLines()", 100);
},
Sounds like a bug, the drag event is not called after the last move. The problem is very visible if the user move the mouse quickly.
As workaround, you could set up an interval function durring the dragging time and draw the grid lines every 100ms :
Update jsbin : http://jsbin.com/oqohuq/4/edit
var handleInterval = null;
$(".draggable").draggable({
opacity : 0.35,
handler : "._header",
stack : ".draggable",
grid: [1, 1],
refreshPositions: true,
snap: ".drag_alignLines", // Setting snap to alignment lines
snapTolerance: 10,
snapMode: "inner",
drag: function(event, ui) { drawGuideLines($(this)); },
start: function(event, ui) {
//Init the interval here
var self = $(this);
handleInterval = setInterval(function(){ drawGuideLines(self);},100);
removeAlignLines($(this)); },
stop: function(event, ui) {
//Clear interval here
clearInterval(handleInterval);
rebuildAlignLines($(this));
linesTimeout = setTimeout("hideGuideLines()", 100);
}//Don't forget to remove the last coma!
});
here is my code:
$('myButton').addEvents({
mouseenter: function(){
$('myImage').setStyle('display','block');
$('myImage').morph({
'duration': 500,
'transition': Fx.Transitions.Sine.in,
'opacity': 1,
'top': -205
});
},
mouseleave: function(){
$('myImage').morph({
'opacity': 0,
'top': -175,
'onComplete': hidemyImage
});
}
});
function hidemyImage() {
$('myImage').setStyle('display','none')
}
the onComplete inside the mouseleave does not work as expected... it hides the image immediately when i move away from myButton instead of hiding it after the morph has finished... i tried several solutions but none worked so far. any idea / help? thanks in advance!
you need to work with the instance and not pass on things in the morph function directly, that takes properties to morph and it probably runs your function immediately in the hope it will return a property value. you can do el.set('morph', {onComplete: hideImagefn}) before that and it will work but read on...
one way to do it is to set your morph options/instance once and work with it afterwards like so:
(function() {
var img = document.id('myImage').set('morph', {
duration: 500,
transition: Fx.Transitions.Sine.in,
link: 'cancel',
onStart: function() {
this.element.setStyle('display', 'block');
}
}), fx = img.get('morph');
// of you can just do var fx = new Fx.Morph(img, { options});
document.id('myButton').addEvents({
mouseenter: function(){
fx.start({
opacity: 1,
top: -205
});
},
mouseleave: function(){
fx.addEvent('complete', function() {
this.element.setStyle('display', 'none');
this.removeEvents('complete');
}).start({
opacity: 0,
top: -175
});
}
});
})();
the start ensures its always visible when mouseovered, the link is cancel which means it will stop execution if you mouse out too early and if you do mouseout, it will then hide the image and remove the onComplete event so that if you show it once more, it stays visible when it comes into view.
if you don't plan on being able to bring it back you can clean-up better and even use event pseudos like onComplete:once etc - though thats part of Event.Pseudos from mootools-more.
in general - .get/.set morph is your setup. el.morph() passes values to morphInstance.start()
play here: http://jsfiddle.net/dimitar/NkNHX/