Trying to centralise a div inside another which is dynamic using JS - javascript

http://jsfiddle.net/dad4avvj/1/
Everytime I try to align it by doing inline-block and text-align:center it throws the numbers class out of position and looks wrong.
These circles are animated so they fill up over the course of a few seconds. I also need to add text under each one and equally pad them out within their container. Only problem is on the site I wish to implement it, it has a max-width of 900px;
How can I centralise this without messing up the rest of the text?

Give text-align: left; to .numbers and text-align:center; to .bar and remove float:left from .radial-progress will solved your issue.
.numbers {
text-align: left;
}
Check Fiddle Here.
Hope it helps.

You also have float:left applied as well as inline-block.
If you remove that and apply text-align:center to the parent. it centers then just fine.
JSfiddle Demo
#bar {
width: 100%;
background: black;
height: 300px;
margin: auto;
text-align: center;
}
.radial-progress {
display:inline-block;
/* float:left; */
}

Related

Jquery mouseover dynamic p tag expansion

[this is another question related to something i posted earlier]
I have a p tag inside an anchor, there many be a variable number of instances of this during the loop. My goal is to on hover make the p tag expand and show more information. I have this so far in terms of mouseover.
$('.boxOPToneplustwo').mouseover(function (e) {
console.log("in");
$('p', this).addClass('popupHighlight')
});
I need to edit this code to allow the p tag to increase its height in relation to the amount of text in the element. if it needs three lines it will expand that amount and vice versa.
.popupHighlight {
height: 3.6em !important;
}
As you can see it is hard coded at this point to a certain height, is there a away to get around this issue?
you can do this by setting some values in css
.popupHighlight {
min-height:100px;
overflow:hidden;
}
it will expand according to the size of the content
Hey this thing is very easy to do.
Here is a fiddle
http://jsfiddle.net/robbiebardijn/vAyn9/
.boxOPToneplustwo{
background-color: red;
height: 1em;
line-height: 1em;
position: relative;
overflow: hidden;
transition: height 1s ease
}
.boxOPToneplustwo.popupHighlight{
height: 3em;
}

Strange padding on div

The grey border shouldn't be visible, it should be covered by the black border and I don't understand why it won't... here's the CSS code:
#portrait{
width:120px;
height:100px;
top:20px;
border: solid black 1px;
margin: 0px;
padding: 0px;
cursor:pointer;
}
#prof_picture{
width: inherit;
height: inherit;
border: none;
}
HTML (inside a table):
<td id="portrait">
<img id="prof_picture"></img>
</td>
and javascript
$("#prof_picture").attr('src',"profile/loading.gif");
I had to make the DOM inherit part of the attributes because when using that javascript line the image would assume its natural width and height and I wanted it just to fit the portrait. When I did this, the strange border appeared. Do you know why?
Add font-size: 0; to #portrait{}
Try setting your image to become a block element:
#prof_picture { display:block; }
Alternatively you could set it to align to the bottom (will work only if its an inline (or inline-block) element), although i think there may be cases or environments where this could produce unwanted results.
#prof_picture { vertical-align: bottom; }
Images are, by default (unless specified otherwise), inline elements. Most browsers will reserve some extra space here, but you could also counter this by setting the parent's line-height to zero.
#portrait{
line-height: 0;
}
Setting line-height: 0;, font-size: 0; or display: inline; on #profile Fixes it in the fiddle http://jsfiddle.net/CyV7j/6/
There is 4px of extra space added around the img element because of the way inline elements (line an img) are rendered inside of a table row.
Please consider styling with classes instead of ids. And restricting the use of tables to tabular data and not for the layout of photos.
I suggest you get rid of the border: none; by #prof_picture. You can also try to write the border on #portrait li this
border: 1px solid black;
As it is the right way to write a border.
If you are using certain browsers.... you need to set this in the css:
img{
outline:none;
}

How to make a div fill remaining space, and go to next line when necessary?

Here's an example of what I have so far as a demo:
link to demo
And here's the CSS that I'm using right now:
body {
background-color: darkgrey;
}
.container {
background: #ccc;
max-width: 300px;
overflow: hidden;
}
.label {
float: left;
}
.filler {
overflow: hidden;
display: block;
}
.filler input {
min-width: 150px;
width: 100%;
border: none;
}
What I'm trying to accomplish is a responsive way to add tags (almost exactly like the tag system on stackoverflow), to a div, whilst having the input always sit after the last entered tag div. So far I've accomplished this, except for when the last tag is pushed to the next line.
I'd really like a non-javascript solution, but if anyone has an elegant javascript solution I'm willing to take it!
Try this:
.label {
display: inline-block;
}
Here is the fiddle: http://jsfiddle.net/vGWCR/
Could this be of any use? I'm no pro with javascript and I haven't tested it, but it looks simple. Sounds like all you need is a way to get backspace to subtract width.
Create a text box with an auto-expanding width?
Use display: inline-block instead of float: left:
CSS
.label {
display: inline-block;
}
.filler {
overflow: hidden;
display: inline-block;
}
Demo
I know this isn't a code solution, but maybe an existing plugin can help. For example: jQuery Tags Input Plugin ? I am sure there are others, but maybe reuse, unless your use case is significantly different?
(I would have just added a comment, but my rep ins't high enough yet :) )

div position absolute... overflow-y:auto and then vertical scrollbar covers some of the content

I have a div with absolute position
inside some other divs.
http://jsfiddle.net/d8GYk/
<div style="position: absolute;
display: block;
outline: 0px;
margin: 0px;
padding: 0px;
top: 0;
text-align: left;
font-size: 11px;
font-family: arial;
cursor: default;
border: 1px solid rgb(170, 170, 170);
overflow-x: hidden; white-space: pre;
overflow-y: auto;
left: 0px;
height: 132px;"><div>a a END</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div><div>ab</div></div>
As you can see the first div is not completely visible
That's because the vertical scroll bar covers it.
If I set overflow-y:scroll. The problem goes away.
However I don't want to do it because this div is autogenerated (via javascript) and in many cases I don't need the vertical scroll bar (for example if the list has one or two or three items)
Can somebody suggest how to resolve this problem ?
if the scrollbar may or may not show, use a content container with a wrapper that may or may not scroll. html:
<div class="container">
<div class="entries">
<div>ab a</div>
<div>ab</div>
...
</div>
</div>
and css:
.container {
height: 100px;
overflow-y: auto;
}
.entries div {
white-space: pre;
}
Demonstrator: http://jsfiddle.net/gFrbM
That said, if you absolute need pre white space handling, AND your lines are very long, you'll either need to turn on scroll for both directions, not just y, and that's a good indication that the way you're trying to present content is not a good way to go about it. The UX will be poor for your users, and depending on the content you're listing in these entry divs, there will be much better ways to show that data.
Du you really need "white-space: pre;"?
If you remove this part i think it is going to work
Use a margin-right for each div inside the container:
.container div{margin:0 20px 0 0}
http://jsfiddle.net/Karzin/d8GYk/2/
Add this to css
{padding-right: 20px;}
Reason: The border of the scroll is covering your div text. you need to give some space for the same.
http://jsfiddle.net/d8GYk/3/

float:left shifting next rows div block to left position when expanded

Look at my code here.
You need to resize Result panel so that you can view at least two block inline. If you click on "More details" link then it will show details but it will shift next rows block also.
Any suggestion why this it is showing like this though I have used clear:both.
.reviewimg_blk {
border: 1px solid #9B9B9B;
float: left;
margin-bottom: 15px;
margin-right: 15px;
margin-top: 15px;
padding: 5px 5px 5px 10px;
position: relative;
width: 395px;
}
That's a common problem with floats.
Use display: inline-block; vertical-align: top; instead of float:left; if you don't need IE7 support.
See https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ for a cross-browser solution.
This is happening because of position:relative. Position:relative keeps div's or blocks in a relation so the below block was moving down. Use instead position:absolute at the places related to that dropdown part.
That is because your 1st itemStyle div has more content so it is taking more height than other divs.
So add <div class="clear"> </div> after every two itemStyle divs or fix the min-height to the itemStyle div.
I have added clear class after every two itemStyle divs in demo.
DEMO
..Live demo
Hi now used to Even and odd rules in css
.itemStyle:nth-child(odd) {
clear:left;
float:left;
}
more info even or odd rules

Categories

Resources