I have a right aligned image, which works fine in IE9 and Chrome 14. In Firefox 6.02 I do get an extra line. Application is using jQuery UI. How could I avoid this? Is my CSS somehow wrong, or is Firefox 6 known to be different - as far as I remember it was the same as in Chrome with FF5.
<tr class="ui-widget-content sideBarTopAlign">
<td>Data file:</td>
<td colspan="3"><div id="inputDatafileInfo">not read</div>
<button class="ui-button sideBarRightAlign">
<span class="ui-icon ui-icon-link" title="Show data file"></span></button>
</td>
</tr>
with:
/* align some elements explicitly right */
.sideBarRightAlign { float: right; margin-right: 1px; }
/* align some elements explicitly right */
.sideBarTopAlign { vertical-align: top; }
The styles from jQuery UI
button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
.ui-button { cursor: pointer; display: inline-block;
margin-right: 0.1em; overflow: visible; padding: 0;
position: relative; text-align: center; text-decoration: none !important;}
Another finding, it seems to be related to the colspan, if I move it in the last of 4 columns it displays as intended.
There was a no-wrap applied to a parent div section. I do not understand why this resulted in the extra line break - and only in FF - but it was the root cause.
simple
give the time span a width and display:inline-block
also for the 743 label
the problem is that the span it too long and doesnt give the img to be floated right and top
Related
I have seen both overflow scrolling with no scrollbars and Hide scrollbar for mobile devices while keeping the scroll ability ; unfortunately, both of these suggest a solution with position: absolute; and I think that I cannot really apply that to my problem.
The code in this example renders this:
Basically, the red outline boxes are divs of class .myBox, with a fixed width. These divs are side-by-side, in a container that is horizontally centered inside its container div. The top part is reserved for titles, which may be long. I'd like the titles to be rendered as on the right side one - but if they have focus, then I'd want the titles to scroll left-right with either keyboard arrow buttons, mouse wheel - or (also for mobile) dragging left and right.
Of course, since the right box's title has overflow: hidden;, there is no possibility to scroll. If I leave the scrollbar visible (overflow-x: scroll;) as on the left box, then the title is not visible at all (and I cannot scroll anyways).
So is it possible somehow to allow scrolling in the title parts of these boxes in this way (sort of like a marquee scroll behavior, but manual)?
Bonus question: is there a sort of a JavaScript library (or even better, a plain CSS solution), that would allow something similar - except, if the text is too long, it is truncated and ellipsis is added (so, instead of "My even longer" it should show "My even lon..." at start), then as you drag right to left, it also calculates ellipsis at start and at end - and when you come to the right end, it takes away the right ellipsis?
The example code is:
.mainHolder {
font-size: 14px;
border: 2px solid #999;
text-align: center; /* centers the span */
}
.centerer {
border: 2px solid #555;
display: inline-block; /* makes the span have the same width as its div contents*/
margin: 0;
padding: 0;
}
.myBox {
width: 8em;
border: 2px solid #F55;
border-radius: 0.5em;
display: inline-block; /* enables two myBox side-by-side */
}
.heading {
height: 1.25em;
border-radius: 0.25em;
background-color: #94B6F7;
overflow: hidden;
overflow-x: scroll;
}
/*just as example, remove the scroller of box2*/
#box2 .heading {
overflow-x: hidden;
}
<div class="mainHolder">
<span class="centerer">
<div id="box1" class="myBox">
<div class="heading">
My very long title
</div>
<div class="data">
Data: 1
</div>
</div>
<div id="box2" class="myBox">
<div class="heading">
My even longer title
</div>
<div class="data">
Data: 2
</div>
</div>
</span>
</div>
I created a slider seeker but cant seem to get it to the center of the div. I used span and kept the background-image as the seeker image. How do I set the position to the center. Is there any other good method to implement this.
<div class="slider-seeker">
<span class="position-image active"></span>
<span class="position-image"></span>
<span class="position-image"></span>
<span class="position-image"></span>
</div>
http://jsfiddle.net/j1bnbf3q/
Solution 1
Create a wrapper div to contain the seeker buttons, and centralize the wrapper: http://jsfiddle.net/pwLsb290/
Solution 2
Apply display: inline-block; on the seeker buttons, and get rid of the float property. (The problem with this method is the whitespace associated with inline-block elements.)
http://jsfiddle.net/26dk1zeL/
Used to this css add your .position-image display:inline-block property and remove float: left; as like this
.position-image{
/* float: left; */ // remove this
display: inline-block; // add this
vertical-align: top; // add this
}
===========
2nd option is
Demo
used to this
.slider-seeker > a {
display: inline-block;
vertical-align: top;
}
See fiddle
CSS:
.slider-seeker a{
margin:0px auto;
}
.position-image {
display:inline-table;
}
I have two icons (Bootstraps Glyphicon) which are places as
1 : Menu Which as left of screen
2 : Gift which is at the right of the screen.
When Clicked on Menu the toggle appears from Left to Right. This works fine.
But when the Gift is clicked it appears in some weird position as shown in the image with the name Suraj Palwe This is at left part of the image. I want this to appear from right of the screen to moving towards the left as per the width of div.
This is the image how it looks.
JSfiddle
This is the what I have written in my code
style
.slide_birthday_click{
margin-top: 2%;
padding: 5px;
background: grey;
height: auto;
display:none;
position:absolute;
z-index: 5;
float: right;
}
in html body
<div class="slide_birthday_click">
<table class="table">
<tr>
<td>Suraj Palwe</td>
</tr>
</table>
</div>
<span class="glyphicon glyphicon-gift" style="float:right;" id="today_birthdays"></span>
The Jquery Part
$("#today_birthdays").click(function(){
$(".slide_birthday_click").toggle("slide",{direction:'right'},2000);
});
I want that Block Which contains the word Suraj Palwe to right of the screen as it toggles from right to left.
I am not getting where I am doing wrong in my code. Thanks in advance!
Try with:
$("#today_birthdays").delay(200).show("slide", { direction: "right" }, 1500);
Okay This is how I solved my problem. One thing was missing in it!
Just added right:0; to the css file
.slide_birthday_click{
margin-top: 2%;
padding: 5px;
background: grey;
height: auto;
display:none;
position:absolute;
z-index: 5;
float: right;
right: 0;
}
Thanks to all!
This is the link to JS Fiddle Answer
I want to create a textarea which highlights the text beyond a character limit (like the twitter one).
My attempt is here: http://jsfiddle.net/X7d8H/1/
HTML
<div class="wrapper">
<div class="highlighter" id="overflowText"></div>
<textarea id="textarea1" maxlength="200"></textarea>
</div>
<div id="counter">Letters remaining: 140</div>
<input type="Button" value="Done" id="doneButton"></input>
CSS
* {
font-family: sans-serif;
font-size: 10pt;
font-weight: normal;
}
.wrapper {
position: relative;
width: 400px;
height: 100px;
}
.wrapper > * {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
border: 0;
overflow: hidden;
resize: none;
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera below 7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}
.highlighter {
background-color: #eee;
color: #f0f;
}
.highlight {
background-color: #fd8;
color: #f0f;
}
textarea {
background-color: transparent;
color:#000;
}
JAVASCRIPT
function limitTextSize(e) {
var max = 140
var txt = $("#textarea1").val();
var left = txt.substring(0, max);
var right = txt.substring(max);
var html = left + '<span class="highlight">' + right + "</span>";
$("#overflowText").html(html);
$("#counter").html("Letters remaining: " + (max - txt.length));
$("#doneButton").attr("disabled", txt.length > max);
}
function maxLength(el) {
if (!('maxLength' in el)) {
var max = el.attributes.maxLength.value;
el.onkeypress = function () {
if (this.value.length >= max) return false;
};
}
}
$(document).ready(function() {
$("#textarea1").bind('input propertychange', limitTextSize)
maxLength($("#textarea1"));
});
It uses JQuery
It works except on firefox. To see the bug, paste this into the textarea:
fjdf hkj hfj hdfkjsd hfllll sdfl sdlflldsf lsdlf flsdlf lsdf lsdf llsdfls dlfs ldflsd f
Which exposes the small difference in formatting between div and textarea (in firefox only). I've made the 'hidden' text purple so you can see the word wrap difference.
I've looked here: How to force Firefox to render textarea padding the same as in a div?
And here: Wrapping the text the same way in a div as in a textarea
And here: Firefox textarea sizing bug?
But none of those seem to apply...
I thought about trying to make it a contenteditable div but getting the change events looks like a minefield.
Has anyone here done this successfully?
I think you are running into an issue where Firefox adds 1.5px of padding inside textarea elements.
Firefox has had quite some issues with paddings in combination with textareas in the past, I think you might not be able to get rid of these additional 1.5px of padding.
I was able to fix your wrapping issue by setting some vendor specific prefixed CSS properties on div.highlighter. Here's a jsFiddle.
.highlighter {
background-color: #eee;
color: #f0f;
-moz-box-sizing: border-box;
-moz-padding-end: 1.5px;
-moz-padding-start: 1.5px;
}
Setting these properties ensures that
In Firefox, the padding set on the div does not increase the width of the div, and
that, in Firefox, 1.5px of padding will be set on both the right and the left hand side of the div.
Update
After some time of using 2px and still very occasionally experiencing some wrapping inconsistencies, I decided to give 1.5px a go, and for now that seems to have ironed out the occasional inconsistencies.
This has to do with the font size being used. Since the unit used is point (pt), the size calculated is different enough in the browsers to cause the incorrect line wrap.
Try these styles instead:
* {
font-family: sans-serif;
font-size: 12px;
font-weight: normal;
}
body {
font-size: 1em;
}
JSFiddle
You might have to make changes in the container sizes to accomodate the change in font-size.
Okay, couple of things going on here. Generally, the safest cross-browser displayed element you'll find is the pre tag. It assumes that what you're feeding it is "pre-formatted," hence the name. This will benefit us in a couple ways:
As far as I know, there is no default styling done by any major browser done on the pre element.
The pre element will retain leading/trailing whitespace, tabs and other special characters in a box.
Replace the span.highlighter with pre.highlighter
That'll get us started. The second thing we'll want to look at is the overlaid colors creating some rather bizarre stacking effects in Firefox. The text looks out of focus in FF20, and I can only imagine that letting a browser decide how that looks would be a catastrophe going forward.
Set the color of the textarea to transparent.
Now we're there. I'm seeing consistent wrapping in IE10/9, FF20, and Chrome 26.
Here's an example jsFiddle
I have a layout where images "float" within a certain area. The layout looks like this:
The source like this:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<!-- EDIT: I am aware that I can put the badge here. See the edit notes and image below. -->
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
The CSS looks like this (in SCSS):
div.free_tile { width: 176px; height: 206px; float: left; margin: 0 20px 20px 0; position: relative;
&.last { margin: 0 0 20px 0; }
a.img_container { display: block; width: 176px; height: 158px; text-align: center; line-height: 156px; margin-bottom: 10px; }
img { margin: 0; border: 1px solid $dark3; display: inline-block; vertical-align: middle; #include boxShadow;
&.canonical { border: 1px solid $transect; }
}
.location, .taxonomy { width: 176px; }
.location { font-weight: 700; }
.taxonomy { line-height: 10px; font-size: 10px; text-transform: uppercase; height: 20px; overflow: hidden; }
}
div.transect_badge { height: 20px; width: 20px; background: url('/images/transect-badge.png'); }
So, basically the images are sitting vertically-aligned middle and text-aligned center, and they have a maximum width of 176 and max height of 158, but they're cropped to maintain the original aspect ratio so the actual top corner of each image falls differently depending on which image it is.
I have a badge that I'd like to put in the top corner of certain images (when the image is "canonical"). You see the style for this above (div.transect_badge).
The problem, of course, is I don't know where the top corner of the image will be so I can't hardcode the position via CSS.
I assume that I'll need to do this via jQuery or something. So, I started with a jQuery method to automatically append the badge div to any canonical images. That works fine, but I can't figure out how to position it over the top left corner.
How can this be done? (ideally using just HTML and CSS, but realistically using JS/jQuery)
--EDIT--
Here's the problem: The image is floating inside a container, so the corner of the image might fall anywhere inside the outer limits of the container. Here's an example of what happens if I try to use position:absolute; top:0; left:0 inside the same container the image is bound by:
It took some tryouts, but here it is: the size independent image badge positioner.
HTML:
<div class="tile">
<span class="photo">
<img src="/photos/10.jpg" alt="10" /><ins></ins>
</span>
<p class="location">Houston</p>
<p class="taxonomy">T6 | Conduit | Infrastructure</p>
</div>
CSS:
.tile {
float: left;
width: 176px;
height: 206px;
margin: 0 20px 20px 0;
}
.photo {
display: block;
width: 176px;
height: 158px;
text-align: center;
line-height: 158px;
margin-bottom: 10px;
}
a {
display: inline-block;
position: relative;
line-height: 0;
}
img {
border: none;
vertical-align: middle;
}
ins {
background: url('/images/badge.png') no-repeat 0 0;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
}
Example:
In previous less successful attempts (see edit history), the problem was getting the image vertically centered ánd to get its parent the same size (in order to position the badge in the top-left of that parent). As inline element that parent doesn't care about the height of its contents and thus remains to small, but as block element it stretches to hís parent's size and thus got to high, see demonstration fiddle. The trick seems to be to give that parent a very small line-height (e.g. 0) and display it as an inline-block. That way the parent will grow according to its childs.
Tested in Opera 11, Chrome 11, IE8, IE9, FF4 and Safari 5 with all DTD's. IE7 fails, but a center-top alignment of the photo with badge at the right position isn't that bad at all. Works also for IE7 now because I deleted the spaces in the markup within the a tag. Haha, how weird!
EDIT3: This solution is very similar to my original solution. I didn't really look at your code much so I should have noticed this earlier. Your a tag is already wrapping each image so you can just add the badge in there and position it absolute. The a tag doesn't need width/height. Also you must add the badge image at the beginning of your a tag.
Demo: http://jsfiddle.net/wdm954/czxj2/1/
div.free_tile {
width: 176px;
height: 206px;
float: left;
}
a.img_container {
display: block;
margin-bottom: 10px;
}
span.transect_badge {
display:block;
position: absolute;
height: 20px;
width: 20px;
background-image: url('/images/transect-badge.png');
}
HTML...
<a class="img_container canonical" href="/photos/10">
<span class="transect_badge"></span>
<img class="canonical" src="path/to/img" />
</a>
Other solutions...
In my code I'm using SPAN tags so simulate images, but it's the same idea. The badge image, when positioned absolute, will create the desired effect.
Demo: http://jsfiddle.net/wdm954/62faE/
EDIT: In the case that you need jQuery to position. This should work (where .box is your container and .corner is the badge image)...
$('.box').each(function() {
$(this).find('.corner')
.css('margin-top', ( $(this).width() - $(this).find('.img').width() ) / 2);
$(this).find('.corner')
.css('margin-left', ( $(this).height() - $(this).find('.img').height() ) / 2);
});
EDIT2: Another solution would be to wrap each image with a new container. You would have to move the code that you use to center each image to the class of the new wrapping container.
Demo: http://jsfiddle.net/wdm954/62faE/1/
$('.img').wrap('<span class="imgwrap" />');
$('.imgwrap').prepend('<span class="badge" />');
Technically you can just add something like this to your HTML though without using jQuery to insert it.
Use an element other than <div>, e.g. <span> and put it inside your <a> element after the <img> element. Then, give the <a> element position:relative; and the <span> gets position:absolute; top:0px; left:0px;. That is, if you don't mind the badge also being part of the same link - but it's the easiest way. Also, the reason for using <span> is to keep your HTML4 valid, <div> would still be HTML5 valid, however.
I did find one solution using jQuery. I don't prefer this because it noticably impacts page loading, but it is acceptable if nothing else will work. I'm more interested in NGLN's idea which seems promising but I haven't entirely figured out yet. However, since this thread has picked up a lot of traffic I thought I'd post one solution that I came up with for future readers to consider:
Given this markup:
<div class="free_tile">
<a class="img_container canonical" href="/photos/10">
<img class="canonical" src="http://s3.amazonaws.com/t4e-development/photos/1/10/andrew_burleson_10_tile.jpg?1303238025" alt="Andrew_burleson_10_tile">
<span class="transect-badge"></span>
</a>
<div class="location">Houston</div>
<div class="taxonomy"> T6 | Conduit | Infrastructure </div>
</div>
Same CSS as in question except:
span.transect-badge { display: block; height: 20px; width: 20px; position: absolute; background: url('/images/transect-badge.png'); }
Then this jQuery solves the problem:
$(function() {
$('img.canonical').load( function() {
var position = $(this).position();
$(this).next().css({ 'top': position.top+1, 'left': position.left+1 });
});
});
Like I said, though, this incurs noticeable run-time on the client end, so I'd prefer to use a non JS solution if I can. I'll continue to leave this question open while I test out and give feedback on the other solutions offered, with hopes of finding one of them workable without JS.