I have a page with a for layout where one half of the page is dynamic width an the other is fixed. This is achieved by floating the fixed width side to the right. It all displays fine but because the fixed width markup comes before the dynamic width markup the tab ordering gets thrown off.
See here: http://jsfiddle.net/BaMqG/
How can i overcome this without resorting to putting tabindex properties on the inputs?
You can use jQuery to dynamically set the tabindexes with a loop and counter variable. Check it out. http://jsfiddle.net/BaMqG/22/
$(document).ready(function() {
var i = 1;
$('.wrapper').each(function(){
$(this).children('.dynamic').children('input').each(function(){
$(this).attr("tabindex",i);
i++;
});
$(this).children('.fixed').children('input').each(function(){
$(this).attr("tabindex",i);
i++;
});
});
});
The initial value for i can be set to whatever tabindex number you want to start from.
I have managed to get the same looking form with no tab index to work by using tables.
See here: http://jsfiddle.net/ymSGM/
I would still be interested if it can be done any other way.
Related
I am using bootstrap cards to display my content. I want every bootstrap card height to be equal. Everything else is fine but issue comes when I display discription as it is of variable length.
Sometimes it occupies two lines and sometimes three.
I want to fix description div height and cut down extra text from it.
Note Card are being displayed through loop
This is what I tried:
$('address').height(30);
var txt= $('address').text();
if(txt.length > 155)
$('address ').text(txt.substring(0,50) + '.....');
This is working perfectly fine for one card. But when there are multiple cards running in loop, same description text appears along every card due to this line: var txt= $('address').text();
How to make it work separately for each card?
Your current select is targetting all the address element. You need to filter out the elements based on if condition. You can use jquery filter function for this.
Then iterate over those objects and modify the text.
var $addressToChange= $('address').filter(function(){
return $(this).text().length > 155;
});
$addressToChange.each(function(){
$(this).text($(this).text()..substring(0,50) + '.....')
})
I am thankful to #Milind Anantwar for his answer as his answer gave me a clue. I little modify his answer and achieved my desired result by using this piece of code:
$('address').height(40);
$('address').each(function(i){
if ($(this).text().length > 40)
{
$(this).text($(this).text().substring(0,50) + '.....')
}
});
This seems dissimilar to the accordion functionality provided by bootstrap.
To give an example, let's take the "how to format" info starting me in the face right now. I'd want it so that it only displays up to X pixels deep, and then stops until expanded. So it might look like:
and then, once expanded,
I happen to be using bootstrap. Is there a bootstrap native or other HTML solution to create this kind of experience?
Assume that the thing that I only want to show of is a single element, such as an image, rather than a series of text. This means a solution like min-height:50px and overflow:hidden won't work, as it will simply hide the entire image rather than part of it.
We can use jQuery .height() to accomplish knowing the rendered height of an element then making conditional modifications.
Documentation and examples for jQuery .height().
A combination of height and overflow in combination with the toggling of a class should work here.
http://jsfiddle.net/fm56je84/1/
The click of the arrow is bound to the following function:
function expandCollapse() {
$("#container").toggleClass("expanded");
$(".glyphicon").toggleClass("glyphicon-arrow-down"); // Flip Arrow
}
My page didn't require a horizontal scroll bar initially, but now one appears mysteriously that is beyond any of the elements that are covered on inspect on Chrome and firebug. No elements pass that blue line so I'm not sure how to fix this.
I know I can hide the scrollbar with overflow-y:hidden, but that's not the point. It shouldn't be there at all.
EDIT Here's the jsfiddle: http://jsfiddle.net/S8RUp/
A bit messy, but I think it gets the point across.
The jsFiddle link has too many overflowing contents to be useful. What you can do to ease debugging is to use a bit of code like this to show you only elements that are over a threshold width:
// using jQuery - you can use other library or include it temporarily for debugging purposes
$('*').each(function() {
var w = parseInt($(this).width(), 10);
// you can put something larger than 700, depending on your situation
if (w > 700) {
console.log(w, this);
}
});
It will have a few false positives (the html node for example), but you'll probably find the culprit easily enough.
I have a div with a scroll bar which displays 15 months with 3 of the min each row, When the page loads I want to fix the scroll bar position to 2nd row as shown in my screenshot.As in the scroll bar should to be fixed to the position shown in my screenshot as opposed to top of the div.The reason for this requirement is we are displaying previous 3 months, but the user should see the current month when the page loads. I hope I have made it clear
I am using
<div id="key_dates" style ="overflow:scroll;width:960px;height:500px">
Can you guys please help?
Thanks,
Adarsh
You need to use JavaScript for this:
<!--
Place this script before closing </body> tag so that
DOM (HTML elements tree) is already built when the script is running
-->
<script>
// create a closure to not pollute global scope
!function () {
// cache reference to keyDates element
var keyDates = document.getElementById('key_dates');
// set scroll to the height of one row
keyDates.scrollTop = 150; // substitute `150` with height of one row
} ();
<script>
Here is the documentation of element.scrollTop
If you are using jQuery, you do it like this (and here are the docs);
<script>
$('#key_dates').scrollTop( 150 );
</script>
An example with jQuery: http://jsfiddle.net/gryzzly/CjdwX/
It seems I can't demonstrate this properly with jsfiddle, but here is a sample of code which works if you test it in a browser. Using anchors on each row, we can anchor the window to a specified location either using href or the url.
For example, if you implemented this code at www.address.tld/calendar, to show row two, you'd enter www.address.tld/calendar#row2.
You can use only an anchor on row two, and you could place it either statically or programmatically depending on your needs. It's a pretty straight forward solution, but some people don't like the hash and anchor name being in the url. It doesn't bother me.
I have a table that is dynamically created using DIVs. Each row of the table has two images. I want to set the height for the div (that represents a particular row) to the height of image that is greater of the two images being displayed in that particular row. The images to displayed will always change, and they are from an external server.
How do I set the height for my div so that I can fit images?
If you are trying to dynamically resize a couple of divs in a row within a table, you maybe better off using a html table instead and having each image within a td tag. This will make tr tag resize accordingly for the image in each cell.
this.img = new Image();
this.img.src = url;
alert(this.img.width);
gives the width while
var img = new Image();
img.src = url;
alert(img.width);
doesnt..
dunno why.
You can:
Not specify the height of the div, and let it expand automatically
Once the image is loaded do:
document.getElementById("myDiv").height = document.getElementById("myImage").height
We'll need a little more info to be very useful. You can get the height & width of an image after the page loads via Javascript (info), then you could resize the height of the div after loading. Otherwise, you're really out of luck since HTML itself doesn't have anything.
If you're using PHP, there's getimagesize(), which you can use if you're building the site dynamically with PHP. There are similar functions for other languages, but we'd need a little more info.
If you want the browser to do layout based on the height of an image, before it fetches the image, you need to send that height to the browser somewhere. This will require something server-side. The fastest thing would be to insert in into the html directly. Slower but more elegant would be to fetch it image by image with <script src=> statements that get instructions from a special bit of javascript-generating cgi. (The speed difference comes from network round trips.)
If you're willing to resize after the data arrives, it's much simpler. Either slap an onload handler on the images or stick them in normal dom (e.g. an actual table, though you can do it with divs and css) and let the layout engine do the work.
This question has been answered in multiple ways, and you asked the additional question "Won't this make the UI look bad?"
The answer to that question is Yes. The best thing for you to do in most cases will be to set the height of your div to something that looks good, then scale the images down to fit. This will make the rendering faster, and the final product will look better and more professional.
But that's just my own opinion, though. I have no empirical data to back that up.
Pre-load them into javascript image objects then just reference the height and width.
Might take some clever devilry to work in all browsers...
function getSize(imgSrc){
var aImg = new Image();
aImg.src = imgSrc;
aHeight = newImg.height;
aWidth = newImg.width;
}