I have three divs which i set float:left side by side.
In all these three divs, i have one textbox, one checkbox and one button. I have set checkbox set to visible = false initially. On click of button i am setting the checkbox visibility to true. by doing this div position gets adjust to left and causing layout problem. How can i set div style to avoid this layout displacement problem.I want there should not be any control displacement while show and hiding the checkbox I am newbie in css.
Here is my fiddle link Link
How about using the css property visibility? The visibility attribute allows the element to be hidden, but leaves the space where it would have been. For more information about it, read here.
DEMO: http://jsfiddle.net/Lppme028/22/
CSS
#txt
{
visibility: hidden;
}
JavaScript
$(document).ready(function () {
$("#btn").click(function (){
$("#txt").visibilityToggle();
})
});
jQuery.fn.visibilityToggle = function() {
return this.css('visibility', function(i, visibility) {
return (visibility == 'visible') ? 'hidden' : 'visible';
});
};
Related
I am having issues with react Plotly displaying correctly when a graph loaded in a hidden tab is selected. It seems this is a known issue where every tab but the default tab will not resize appropriately because it doesn't know the hidden graph's dimensions.
To get around this I would like to dynamically update the tab height to be equal to the height of the default tab. Something like this: Change div height when tab is selected.
The issue is, I am unable to select the tab height value on DOM load. I thought I could add a componentDidMount function with an evenlistener for window load like such:
constructor(props) {
super(props)
this.state = {
value: 0
};
this.handleLoad = this.handleLoad.bind(this);
}
componentDidMount() {
window.addEventListener('load', this.handleLoad);
}
handleLoad() {
console.log("firstTab height: " + $('#firstTab').offsetHeight)
}
This issue is, the console log is outputting firstTab height: undefined.
When i inspect the web page and put the command $('#firstTab').offsetHeight into the console I am able to come up with a height of 697 px.
I don't want to hardcode the tab pixel size. Can anyone guide me as to why I am failing to grab the element height on window load?
Try using clientHeight property.
componentDidMount() {
const height = document.getElementById('firstTab').clientHeight;
}
I think instead of using event listener, you can do something like this.
componentDidMount() {
const height = this.firstTab.clientHeight;
console.log(height) // => gives you height
}
render() {
return (
<div
id="firstTab"
ref={ (firsTabElement) => { this.divElement = firstTabElement } }
>
Tab Content
</div>
)
}
After the first render if you are not hiding or putting any condition to remove the firstTab from the DOM. It will be available to you in componentDidMount lifecycle.
I have 2 nested <div>s, both with tooltip().
When I hover over the
inner <div>, the outer <div> also shows it's tooltip.
I tried to work around this by setting the inner <div>'s title
to an empty string on :hover.
$(inner).hover({
$(outer).attr('title','');
},{
$(outer).attr('title','original title');
});
I created a codepen examplenote: I changed title to 'red' so you can see that the title did indeed change.
Why is it that changing the title doesn't change tooltip's content?
How do we change the Bootstrap Tooltip's content? (this should be a stackoverflow question of it's own)
Answering #1:
By inspecting the elements and watching it change with your JS code, i noticed a attribute on the divs called data-original-title which still holds "blue" when you enter green (this is what the tooltip element reads and displays). By changing your script to
$('#a').attr({"data-original-title": "red"});
the blue becomes red. Does this answer your question?
Use .tooltip('hide') and .tooltip('show')
this was answered in part by #BuddhistBeast, thanks!
$("#b").on('mouseover', function(){
$('#a').tooltip('hide');
}).on('mouseleave', function(){
$('#a').tooltip('show');
});
$('[data-toggle="tooltip"]').tooltip({
animated : 'true',
placement : 'bottom',
container: 'body'});
You can check whether you are currently hovering inside of the inner block
jQuery:
$(document).ready(function(){
var bIsShown = true;
$("#b").on('mouseenter', function(){
bIsShown = true;
}).on('mouseleave', function() {
bIsShown = false;
})
$("#a").on('mousemove', function(){
if(bIsShown) {
$(this).data("bs.tooltip").$tip.removeClass("in");
}
else {
$(this).data("bs.tooltip").$tip.addClass("in");
}
})
$('[data-toggle="tooltip"]').tooltip({
animated : 'fade',
placement : 'bottom',
container: 'body'});
});
Your Example: http://codepen.io/anon/pen/JGqXPw
How to override primefaces OneMenu in order to see it over captcha, ie below? My selectOneMenu have no any changes.
My guess is that the menu panel doesn't have enough space to fit in the lower part, instead it's positioned above, as the aligning of the panel is being set by javascript (PrimeFaces.widget.SelectOneMenu.alignPanel), using the jQuery UI .position() method which allows you to position an element relative to the window, document, another element, or the cursor/mouse, without worrying about offset parents, and the default value for collision attribute is flip (In PrimeFaces 5 it's flipfit) resulting the positioned element overflows the window in some direction, or to move it to an alternative position.
In this case you could implement one of these three solutions:
extend the space on the lower part, maybe adding margin to the
captcha, in this way the panel would fit in bottom.
OR change the hight of the panel
<p:selectOneMenu height="100" >
Making it a bit shorter so it can fit.
OR you can override the PrimeFaces.widget.SelectOneMenu.alignPanel function
to set the collision attribute to none, in the position function:
PrimeFaces 5
PrimeFaces.widget.SelectOneMenu.prototype.alignPanel = function() {
if(this.panel.parent().is(this.jq)) {
this.panel.css({
left: 0,
top: this.jq.innerHeight()
});
}
else {
this.panel.css({left:'', top:''}).position({
my: 'left top'
,at: 'left bottom'
,of: this.jq
,collision: 'none' // changing from flipfit to none
});
}
}
PrimeFaces 4
PrimeFaces.widget.SelectOneMenu.prototype.alignPanel = function() {
var fixedPosition = this.panel.css('position') == 'fixed',
win = $(window),
positionOffset = fixedPosition ? '-' + win.scrollLeft() + ' -' + win.scrollTop() : null;
this.panel.css({left:'', top:''}).position({
my: 'left top'
,at: 'left bottom'
,of: this.jq
,offset : positionOffset
,collision: 'none' // changing from default flip to none
});
}
Of course you should call it in the document.ready, and when you update the component.
I don't recommend this approach too much, but sometimes it's the only solution.
Hope this helps.
For necessary SelectOneMenu add style top find an optimal value and apply it. For me it is:
#registrationForm\:facultyList_panel {
top: 413px !important;
}
UPDATE 09.07: It does not helps for another screen resolution. The question is still relevant.
I've been trying to integrate infinity inside a defined scrolled area.
My UI is a bunch of inline-block thumbnails (not floated). Grid Layout.
Infinity works perfect inside my page when it occupy the whole page width & height, and each element is block level, with simple DOM inside.
But when create a little more advanced UI, with grid interface, and an infinity area to scroll inside a container (ListView's height isn't defined. It's container does), then all gets wrong.
Even more than that. If I give 100% to HTML & Body, infinity fails. it calculates wrong listView`s height.
How to solve this? Grid UI is a desired & common one.
JS Fiddle Demos:
All 1300 elements are block-level - #OK
ListItem (CSS) Width & Height defined - #OK
ListItem as inline-block - #Broken
Code Example (Infinity NG Integration)
var demoApp = angular.module("demo", []);
demoApp.controller("demoCtrl", function($scope) {
$scope.items = [];
for(var i = 0; i < 1300; i++) {
$scope.items.push({ title: "Item " + i });
}
});
demoApp.directive("infinityScroll", function() {
'use strict';
return {
restrict: "A",
transclude: true,
link: function(scope, elm, $attrs) {
scope.listView = new infinity.ListView($(elm));
}
};
});
demoApp.directive("infinityItem", function() {
'use strict';
return {
restrict: "A",
link: function(scope, element, attrs) {
scope.listView.append(element);
}
}
});
PostScript: I noticed in the API Reference, that ListItem has width & Height properties. Same as ListView.
I couldn't find how to implement it, Inside the build code itself, i haven't seen how to pass this properties to the object.
Sorry if its obvious thing, and its possible to do that.
Will appreciate any help.
Thanks.
Actually right now I discovered my problem.
2 elements that messed up with my UI where actually - Overflow:Hidden for my Body,HTML, and Height:100% for a page container.
I have removed Overflow:Hidden, and Height from the page container (not ListView!) and all is fine.
'useElementScroll:true' and .scrollable classname did not assisted me, and prevented me from needing do this actions.
Now my UI is impacted, and I need to see how I`ll solve it.
Edit:
I have opened an issue at airbnb git, and I hope they will pay attention to this. Not been able to set a father and relate only to him, is an issue that adds complexity.
https://github.com/airbnb/infinity/issues/46
I've got a list with list-style-none which needs to be able to add new items to itself via Ajax and have the background expand appropriately when it does. Adding via Ajax is easy, but every solution I try for the background fails me. I don't know if it's even possible; is it? I'm using a grid like this one:
http://jqueryui.com/demos/sortable/#display-grid
Both WebKit and Firebug are showing me skinny, empty bars when I hover over the enclosing divs and/or the enclosing ul tag. It appears that the minute you set a list loose with list-style-none and float:wherever, you give up control over its background. But that can't be right.
This is something I've run into a number of times. The problem is that floated elements aren't part of the normal box model, so they don't cause their parent elements to expand unless their parent elements are also floated. So if possible, float the ul or containing div.
Edit:
See quirksmode for another css-only workaround.
Could you provide a sample of your code? Also, why does the list have display:none set?
For instance, should be as simple as this:
HTML:
<ul id="dest"></ul>
JS:
// Simplified example, most likely wrapped in $.ajax
// This is the AJAX response function
function(data, response) {
var items = json.parse(data);
$.each(items, function() {
// Assumes item has a name property
$('#dest').append($('<li>' + this.name + '</li>'));
});
}
Should be just that simple. You shouldn't need the hide the list initially, as you can simply append list items and have the display update appropriately.
Hope that helps.
You need to explicitly set the width and height for the area.
Check out this link for Horizontal Scrolling: http://valums.com/scroll-menu-jquery/
Here is the script:
$(function(){
//Get our elements for faster access and set overlay width
var div = $('div.sc_menu'),
ul = $('ul.sc_menu'),
// unordered list's left margin
ulPadding = 15;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
div.scrollLeft(left);
});
});
Basically, you need to update the ulWidth and divWidth when you add the new item.
Then just set the background image to repeat horizontally and you should be set.
ul.sc_menu {background:transparent url(image.png) repeat scroll 0 0;height:100px}
Note: You will need to set the height; otherwise you will not see the background because the li are floated.
For dealing with the float element, maybe you should know it's characteristic, gotcha, and how to deal with it.
See the links below, it also have demo, so you can understand the concept:
http://www.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
http://aloestudios.com/2009/12/goodbye-overflow-clearing-hack/
and
http://aloestudios.com/misc/overflow/