Issue setting initial draggable position jquery ui - javascript

I've a problem, when I set container element:
position: absolute;
left: 10px;
bottom: 15px;
And initialize draggable, bottom part of the element gets stuck to the border, and it is basically resizing rather than dragging.
http://jsfiddle.net/JVSFS/83/
So what do I do?

jQuery draggable works by modifying the left and top css properties of an object.
Set the top property instead of the bottom.
I know it sounds like a cheap trick, but it's the fastest solution I found here.

You might want to go about it by removing
.popup_click {position: absolute
left: 10px;
bottom: 15px;}
and replacing it with: .popup_click {top: 92%;
left: 1%;}
Fiddle
Please note that the percentages are just estimates based on where you had it placed before.

It is doing what you told it to do. When you set bottom to be 10px on an absolutely-positioned element, the bottom of that element will stay 15px from the bottom of its parent container.
It might be better in your situation to set the CSS to position:relative using mousedown() in your jQuery.

Related

Image and button placed by percentage but are cropped when I resize the window

I'm trying to make my application responsive.
For that, the first thing I did was placing my buttons and logo by using percentages instead of pixels.
The problem is that when I resize my window to a smaller one, the buttons and logo are moving but they are also cropped on the side like this:
Here is what the button looks like before resizing:
And here is what it looks like after resizing to a smaller one:
How can I make it move but still appear in its entirety ?
Here is my CSS for this button:
#next-step{
position: absolute;
top: 90%;
left:88%
}
Change the CSS as follows:
#next-step{
position: absolute;
bottom: 1em;
right: 1em;
}
By using bottom and right instead of top and left, the reference will be the bottom right corner of your container. This way your button will never crop. You can play with the values to adjust the position of the button as you like.
Changing the position values to bottom and right might help you out. You could try this CSS code and maybe adjust the percentage values to your liking:
#next-step{
position: absolute;
bottom: 10%;
right: 12%;
}
This comes down to the way you're positioning the element.
#next-step{
position: absolute;
top: 90%;
left:88%
}
Is positioning the button based on the top-left corner.
If you were to instead use:
#next-step{
position: absolute;
bottom: 10%;
right:12%
}
It'll set the position to a similar place on-screen, but based on the bottom-right corner (you'll need to fine tune the numbers).
However, one thing to note: when using percentages, once you get below a certain screen size it can get messy, so it'd be worth looking at media queries too.

Positioning div to the right with an undefined width

I'm going to have trouble explaining what I mean but bear with me. First here's my fiddle https://jsfiddle.net/jmajnqej/5/ (updated by Aziz)
#freelancewrapper {
width: 100%;
max-width: 1000px;
height: 440px;
background-color: #9D9D9D;
position: absolute;
}
I'm trying to get freelancewrapper to hug the right side of the screen with no padding. It needs to stay connected to the very right side of the screen no matter what width the window is. To make it more complicated it's parent div contentwrapper has to stay where it is with the same width and margins.
here is a representation of two screen sizes to show what I mean. http://imgur.com/a/IkOwx
Update: I didn't realize it at the time but this is a two part question. Positioning it was easy but getting the right correct width property is not. Here's my question for that Trouble defining width of a responsive div.
All you have to do is add the following CSS properties to your element:
position: absolute;
right:0;
jsFiddle fork
If you want the div to remain attached to the screen when scrolling, you can replace absolute with fixed.
Keep in mind that position: absolute works relative to the first parent tag with a position:relative. by default, that tag would be the body.
Also an important thing to keep in mind is that when an element is absolutely positioned, it will lose its space in the layout and hover over all elements.
I can't tell you the exact value you should need to achieve the desired result. What i would advice for trying to make your styling "responsive" is to start 1. from a mobile first approach(easier to up the screen size then downsizing).
To further answer your question try using relative units. your width for example is 100% this is relative. But instead of pixels try using em.
every ~16 px(not precise) is 1.0 em.
furthermore you can use position: absolute;
good luck further.
Like Paulie_D said you can use position
CSS
.contentwrapper {
width: calc(100% - 190px);
max-width: 1160px;
margin-top: 50px;
margin-left: 40px;
position: absolute;
right:0;
}
DEMO HERE
you can use negative right margin on <div class='contentwrapper'>
.contentwrapper{
margin-right: -48px;
}
https://jsfiddle.net/linkers/jmajnqej/3/

Trouble making a facebook like div with triangle on top

on facebook if you hover over something with a lot of likes a div pops up showing everyone who likes the post. i was wondering if anyone could mimic the div in css and explain how i can do it. there is a picture below showing what i mean. i know you have to use a :after in css but im not sure how to position the triangle and all that.
Here is some code i found somewhere else:
#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}
#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}
The code you pasted there has the gist of it down. You can see a working JSFiddle here that makes it more like what you're going for.
There are two parts to this problem, I think. The first part is making the triangle. The second part is positioning the triangle.
Making the Triangle
The borders on the pseudoelement are responsible for that triangle we're seeing. If you're not sure how that's happening, take a look at this great answer that explains it quite well, I think.
Positioning the Triangle
The key to positioning involves making the child appear outside of the parent. We can do this by setting absolute positioning on the child. However, if we do this without changing the parent at all, the absolute positioning will be set relative to the window.
What we want here is positioning the child relative to the parent. We can do this by setting the parent element's positioning to anything other than static, which is the default value. In the code you pasted, you can see they set it to relative. For more about positioning, the working docs are pretty explanatory, I think. Another great resource can be found on CSS Tricks.
Anyway, we want our child to be just outside the parent. Accordingly, if we have a 5px high triangle, the child's CSS for positioning should look something like:
position: absolute;
top: -5px;
This will make it appear like its attached to the top, as you can see in the above JSFiddle.
After you've positioned it vertically the way you want it to, set its left positioning to get it where you want along the horizontal.
Though of course you must ask yourself if it's worth reinventing the wheel—tooltips come with Bootstrap Jquery.

jQuery.offset() sets position: absolute. I need position: fixed

When you set an element's offset with jQuery.offset({coords}) it also sets the CSS property position to absolute.
I have a div, however, that I set to position: fixed in my CSS, and I want it to remain that way, even after setting the offset of the element with jQuery.
Now, I'm sure I can probably set the offset, then set position: fixed again, but I was wondering if there is a way I can tell jQuery to set the position to fixed instead of absolute when it sets offset.
HTML
<div class="searchResults">
...
</div>
CSS
DIV.searchResults {
position: fixed;
padding: 20px;
background-color: red;
z-index: 501;
}
jQuery
$("DIV.searchResults").offset({left: 0, top: 0});
Rendered HTML
<div class="searchResults" style="position: absolute; top: 0px; left: 0px;">
...
</div>
Obviously, since jQuery is setting the position in the style, it will trump the value of my CSS class. So I need a way to tell jQuery to set position to fixed instead of absolute, or tell it to set the offset without setting the value of the CSS property position.
As I commented above, in your case all you need is to modify the CSS for top and left like this:
$("DIV.searchResults").css({left: 0, top: 0});
Because the $.offset setter method only manipulates the left, top and position values to make the element relative to the page (from static to relative, and from fixed to absolute). Since you want it position fixed, set the values directly.
Maybe not that elegant, but I think you can just chain .css() after that to be sure that position is set to fixed like this:
jquery
$("DIV.searchResults").offset({
left: 0,
top: 0
}).css("position" : "fixed");
Not tested, but I think that'll work.

Chrome, jquery animate wobble

I have an issue that only affect Chrome. Furthermore its only visible when the screen is at certain widths.
I've created a fiddle that can replicate the issue.
http://jsfiddle.net/T8LvA/63/
When you rollover the red box the width of the parent is animated to reveal more of the red box.
You may need to adjust the width of the html pane several times before you see the wobble,
Any thoughts on how best to resolve this?
Thanks
Use float:right instead of positioning it absolutely.
http://jsfiddle.net/T8LvA/70/
It happens because when you change the width, it extends to the right - then it's reflowed and moves back to the left to the correct position, which causes the wobble. Floating it to the right always keeps it there.
To clarify: you'll need to replace position: absolute width float: right on both #widget and .hidden for the correct result.
if you use postion you need use left and top, in this case it is useless.
Try fx you css in this way
#wrapper{
width: 100%; // was 600px
height: 100px;
margin: 0 auto;
//position: relative;
}

Categories