I am customizing jquery-ui slider(range). The two corner points(div) are draggable. I wish to place the exact value of the slider just above the corner points but i am unable to do So, can anyone suggest how the position of the div containing the current values can be changed using javascript ?
I'd do it using CSS - make the value div a child of the slider div, then use position: relative on the value div with a negative top
<div id="Slider">
<div id="Value" style="position: relative; top: -100px; width:...">
</div>
</div>
Related
Using Draw2d and the menu selection code from the demo but I don't get the expected result...
In the demo, the menu appears on the right side of the clicked element. In my version the menu appears way off to the top.
This seems to be caused by the fact that I have some HTML directly above the canvas (header, etc...). On the contrary if the canvas is at the very top of the page it works well.
Found a way to fix this.
It's all about where you append the menu's HTML and relative positionning
In the demo there isn't any HTML above the canvas (on the website it's an iframe so what you see above is not really there from the canvas perspective) so it works.
The demo is misleading because in the code they add the HTML menu in the body tag. They can do that simply because their page is composed of only two elements : the body and the canvas.
In my case and probably yours too, doing this results in adding the HTML menu far far far far away from the canvas itself resulting in a position that is wayoff !
What they do is :
$("body").append(this.overlay);
What you should do is append the HTML menu (this.overlay) as a sibling of the canvas. Do NOT add it in the canvas itself. If you do, you won't catch click events anymore.
Your HTML should look like this :
<div id="some-parent">
<div id="gfx_holder">THE CANVAS</div>
</div>
And the code updated to
$("#some-parent").append(this.overlay);
But it's not finished yet. As the menu is added using position: absolute you'll need your parent containers set to position: relative so the the child's absolute position would become relative to the parent and not web page. It's CSS... You know...
Also, the parent should be the exact same size as the child canvas !
So the HTML should evolve to this :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
</div>
And when the menu's HTML is added it should look like that at runtime :
<div id="some-parent" style="position: relative; height: 800px">
<div id="gfx_holder" style="height: 800px">THE CANVAS</div>
<div class="overlayMenu" style="top: 230px; left: 197.391px;">⊕</div>
</div>
See ? The overlayMenu has position: absolute which allows it to be rendered at a correct position...
hf
based full screen carousel slide as the landing page of a Rails 4 app.
I am wondering, is it possible to add a fixed box (NOT a header) somewhere on the page (like a regular div class="col-xs-4") and then have it be fixed as the carousel changes in the background?
i.e. this box and its contents should not refresh with every slide, and should not slide off and then back on the screen.
Thanks!
You can put the carousel inside a position: relative container, then place an absolute positioned element inside of that, alongside the carousel.
<div style="position: relative;">
// Carousel code here, positioned as desired.
<div style="position: absolute; top: 0; left: 0;"> // Style as required.
contents of box
</div>
</div>
You could post some code if you need people to provide a more context-specific example.
I have a label that is located inside a dynamically sized div.
the label starts from about the middle of the div
I am trying to add ellipsis to it but I just cant get it to start the ellipsis in the correct place
here is my code:
<div id="container" style="text-overflow: ellipsis;overflow:hidden;width:50px">
<label id="myLabel" style="left: 20px!important;position: absolute;">test1234567890</label></div>
what am I doing wrong?
Thanks
Ellipsis property won't affect absolutely positioned element's, if you want to move label left AND keep ellipsis, you should set padding-left:20px; to div
I have two elements; input field and div - one next to another. Div is absolute positioned inside the relative element and positioned to the right of the input.
Input has fixed height, but div's height depends on the content.
What i would like to achieve is to middle vertical align div next to input. I am not sure if this is pure CSS possible, so thats why i added the javascript tag.
HTML:
<td>
<input type="text"/>
<div id="rel" style='position:relative;'>
<div id="content">
content
</div>
</div>
</td>
CSS:
#content {
position:absolute;
left:30px;
}
...
Just use
td input {
vertical-align:middle;
}
Good you already have a table, vertical centering via CSS is not easy.
Btw: Instead of two divs and absolute positioning, you might use margin-left: -30px;
I have one parent div with style position relative and couple divs inside that div with style absolute like
<div id="container" style="position:relative;width=400px;height=400px;">
<div style="top:20px;left:20px;width:20px;height:20px;"></div>
<div style="top:40px;left:40px;width:20px;height:20px;"></div>
<div style="top:60px;left:60px;width:20px;height:20px;"></div>
</div>
How to add new div to div with id="container" with top="0px" left="0px"?
$('#container').append(
$('<div/>').css({top:'0px',left:'0px'})
);
Here's a live example: http://jsfiddle.net/AWYbD/
first, be careful to set "position: absolute" to your inner divs. This is not implicitely set when using the top, left, etc declarations.
To add a new div (I assume using jquery),
just do
$('#container').append('<div style="position:asbolute; top: 0px; left: 0px;"></div>');