In this project I'm working on they made divs that look like textboxes that contain data. Then when you click onto the div they change to read-write textboxes. When this happens the textboxes are a little bigger than the original div size (width).
Outside of changing the divs to R/O textboxes and then flipping them to R/W textboxes is there a way to get the width of the original div and pass it into the size of the newly shown textbox.
Basically, the textbox is hidden at first (1 hidden textbox per screen). When the user clicks on a div, the hidden textbox is shown and moved to the location where the div was (over the top). When the textbox text value changes and is moved off focus the div's innerHTML is changed and then the textbox is moved down the screen.
What I need to have happen is the div's original size could be a small text box or a long text box. When the onclick happens I need the textbox width to be the exact same size as the original div size.
Clear as mud right?
Any help is appreciated.
Have you considered using content editable divs?
Look into designMode, and contentEditable in order to forego using text areas all together. This way the size will remain consistant.
Something like the following may work. Please don't copy/paste as I wrote it in a hurry.
<div id='your_div' onClick='toggle();'> Stuff </div>
<script>
var a_div = document.getElementByID('your_div');
toggle = function() {
if(a_div.designMode) {
a_div.designMode = (a_div.designMode == false) ? true : false;
} else {
a_div.contentEditable = (a_div.contentEditable == false) ? true : false;
}
}
</script>
Related
I have problem with bootstrap drop up/down button.
Button Menu doesn't fit well on page.
I am looking for way to dynamically detect position on page of that button.
Base on location button should automatically drop up instead of drop down.
Here is problem:
on "SHOW" and "Action" button. Menu doesn't fit on page (It extends container).
https://jsfiddle.net/yz0ex8c5/
https://jsfiddle.net/3ro502q5/4/
The same happens when the button is on top. It opens Dropping up Instead of drop Down.
This is very important. Couse I use this buttons with drop down and drop up in table that can be sorted. I use Bootstrap-table library to sort rows in table.
You could check the scrollTop position for the page, then switch between .dropup or .dropdown according to what is most suitable.
$(window).scroll(function() {
var scrollTop = $("body").scrollTop();
if (scrollTop<50) {
$("#showBtnGroup").removeClass('dropdown').addClass('dropup');
} else {
$("#showBtnGroup").removeClass('dropup').addClass('dropdown');
}
});
forked fiddle -> https://jsfiddle.net/wenz3v5r/
Have given the btn-group an id for easy access. The evaluation value of 50 is completely arbitrary, have just added a lot of <br>'s to the bottom and the top of the page - that must depend on how your site looks like IRL. You should do the same (or rather the opposit) with the Action dropdown at the bottom.
I have a Ajax combo box whose width is set from a css class, i want to change the width of list items (the area which appears after we click the button on combo box present at right side). from the code behind.
I've set the width of listitems from css like
.ComboboxWidth ul
{
width:176px !important;
}
This works. But i've to do same thing from code behind, can anybody guide?
I have a div at the top of my mobile application that is position:fixed so it will stay on the top of the browser (it scrolls away in ios 4 and lower which is fine). When an input is focused and brings up the keyboard, the div moves down to the middle of the page. See screenshots:
http://dbanksdesign.com/ftp/photo_2.PNG
Edit:
Here is a simplified test page:
http://dbanksdesign.com/test/
<body>
<div class="fixed"><input type="text" /></div>
<div class="content"></div>
</body>
.fixed { position:fixed; top:0; left:0; width:100%; background:#ccc; }
.content { width:100%; height:1000px; background:#efefef; }
Unfortunately you are probably best off using absolute positioning for your fixed elements when working with IOS. Yes, IOS5 does claim to support fixed positioning, but it all falls down when you have interactive controls within that fixed element.
I had the same problem with the search box on my switchitoff.net site. In IOS5 the fixed header would jump down the page if the search box gained focus while the page was scrolled. I tried various workarounds, and the one I currently have is a <div> which sits over the search box. When this <div> is clicked the following occurs:
The page is scrolled to the top
The fixed header is changed to absolute
The <div> covering the search box is hidden
The search <input> is focused
The above steps are reversed when the search box loses focus. This solution prevents the header jumping down the page when the search box is clicked, but for a simpler site you are probably better using absolute positioning in the first place.
There is another tricky issue with IOS5 and fixed positioning. If you have clickable elements on your fixed area with body elements scrolled behind them, this can break your touch events.
For example, on switchitoff.net the buttons on the fixed header became unclickable when interactive elements were scrolled behind them. touchstart was not even being fired when these buttons where tapped. Luckily onClick still seemed to work, although this is always a last resort for IOS because of the delay.
Finally notice how (in IOS5) you can click on the fixed header and scroll the page. I know this emulates the way you can use the scroll wheel over a fixed header in a normal browser, but surely this paradigm doesn't make sense for a touch-UI?
Hopefully Apple will continue to refine the handling of fixed elements, but in the meantime it's easier to stick with absolute positioning if you have anything interactive in your fixed area. That or go back to IOS4 when things were so much easier!
Using the JohnW recomendation to use absolute instead of fixed I came up with this workaround:
First set up a bind to detect when the input is onFocus, scroll to the top of the page and change the element position to absolute:
$('#textinput').bind('focus',function(e) {
$('html,body').animate({
scrollTop: 0
});
$('#textinput-container').css('position','absolute');
$('#textinput-container').css('top','0px');
});
Note that I'm using the id textinput for the input and textinput-container for the div top bar that is containing the input.
Set up another bind to detect when the input is not on focus anymore to change the position of the div back to fixed
$('#textinput').bind('blur',function(e) {
$('#textinput-container').css('position','fixed');
$('#textinput-container').css('top','0px');
});
I've been using a similar solution for a bar fixed at the bottom of the page, the code posted should be working for a bar fixed at the top but I didn't test it
Modified version of pablobart's solution but without scrolling to top:
// Absolute position
$('#your-field').bind('focus',function(e) {
setTimeout(function(){
$('section#footer').css('position','absolute');
$('section#footer').css('top',($(window).scrollTop() + window.innerHeight) - $('section#footer').height());
}, 100);
});
// Back to fixed position
$('#your-field').bind('focusout',function(e) {
$('section#footer').removeAttr('style');
});
The simple CSS:
section#footer
*{ position:fixed; bottom:0; left:0; height:42px }*
This solution works pretty well for me. All the code does is wait until the user taps on a text field, then changes the element identified by the 'jQuerySelector' parameter from a 'fixed' to 'static' position. When the text field looses focus (the user tapped on something else) the element's position is changed back to 'fixed'.
// toggles the value of 'position' when the text field gains and looses focus
var togglePositionInResponseToInputFocus = function(jQuerySelector)
{
// find the input element in question
var element = jQuery(jQuerySelector);
// if we have the element
if (element) {
// get the current position value
var position = element.css('position');
// toggle the values from fixed to static, and vice versa
if (position == 'fixed') {
element.css('position', 'static');
} else if (position == 'static') {
element.css('position', 'fixed');
}
}
};
And the associated event handlers:
var that = this;
// called when text field gains focus
jQuery(that.textfieldSelector).on
(
'focusin',
function()
{
togglePositionInResponseToInputFocus(that.jQuerySelector);
}
);
// called when text field looses focus
jQuery(that.textfieldSelector).on
(
'focusout',
function()
{
togglePositionInResponseToInputFocus(that.jQuerySelector);
}
);
The reason the buttons are becoming unclickable is because they have actually scrolled invisibly with the content. They are still there, just not at the location they were originally, nor where you see them.
If you can guess how much the button has moved (based on how much the content has moved) you can click on the invisible button and it will function normally. In other words, if the content has scrolled by 50 pixels, click 50 pixels away from the button and it will work.
You can scroll the content manually (even by a tiny amount) and the buttons will again work as expected.
Just hide your fixed element on focus and then show it again on focusout. I bet your users don't need to see it when focused. I know this is not a solution but I think it is a better approach. Keep it simple.
Background:
I am doing some UI work where I allow the user to programatically add and resize controls on a canvas.
Problem:
When resizing a combo box through AS the dropdown stays at the same width as the first time it drops down. So user places combo box on the page, clicks the down arrow, sees the options, selects an option or clicks down arrow again to close, resizes the width of the drop down, clicks the down arrow. Now drop down is the same width as original.
Have tried simple things like setting the width of the dropdown specifically and invalidating display list but it still doesn't work.
Example:
Code Example pending
While trimming my code down to an example I solved my problem. A combobox has a dropdownWidth property. I was trying to set this myComboBox.dropdownWidth = newWidth, which doesn't work (not entirely sure why, didn't dig into the SDK). However if I change my code to myComboBox.dropdown.width = newWidth it actually goes to the dropdown element and re-sizes it directly which does work.
comboBox.dropdown.width did not work for me. I had to use
comboBox.dropdown.percentWidth = 100;
It seems to work without having to call invalidateSize()
In the ComboBox, overriding the set dataProvider and performing the following seemed to work, because the dataProvider field is bound to the collectionChange event.
ComboBox.calculatePreferredSizeFromData(count:int):Object
override public function set dataProvider(value:Object):void {
super.dataProvider = value;
var size:Object = calculatePreferredSizeFromData(dataProvider.length);
this.dropdownWidth = size.width;
this.dropdown.width = this.dropdownWidth;
this.invalidateSize();
}
I was just wondering if anyone out there knows of a way to have a dropdown/select box set to a fixed width i.e. 125px, but when you open it, the dropdown portion will automatically expand to the largest item in the list, and when you select the item, have the dropdown resize back to the 125px size?
It does it in FF but no currently in IE.
Thanks in advance,
B
you can set the width with css using width: 125px.
Not sure if you can control the width of the popup part, but this will normally automatically resize, up to some arbitary limit.
To achieve the effect you are after, I think you'd need to use either some CSS 3 properties (which won't work in all browsers) or more likely some Javascript.
You could use the onFocus and onBlur events of the select box, and then update the style.width property accordingly. Let me know if you'd like some code samples!
Here's a quick jQuery solution that will resize the select box for you on mousedown - then change it back once something is selected or you click away.
var example = $('#some-id');
$(example).mousedown(function() {
$(this).css('width','400px');
});
$(example).blur(function({
$(this).css('width','200px');
});
$(example).change(function() {
$(this).css('width','200px');
});