How to remove specific css in appendChild? - javascript

I have a drag and drop using react, it's working just fine, but the element that i am dragging on my menu has a css like this:
.objects {
position: absolute;
background-color: #FFF3CC;
width: 50px;
height: 50px;
margin: 10px;
padding: 8px;
font-size: 18px;
text-align: center;
cursor: move;
}
I use the position absolute to stack 10 elements and with that i can drag 10 times into my drop zone, this also works fine, but it keeps the property position:absolute, so when it renders on my drop zone it stacks again.
I want to remove the css 'position' from it when i do the append:
event.target.appendChild( this.get_id(elem_id) );
How can i remove this property so i can display them separately?

code for chaging css properties in javascript:
document.getElementById("myElement").style.position = "relative";
and just in case, the position options are:
static
relative
fixed
absolute
sticky

Related

sticky element behaves differently on the poressence of a scroll bar

I am trying to imitate SO page behaviour of having a menu on the left and a bar on the top, both being sticky. The design is a sinle page dynamic application so when I say "switch pages" I am actually changing the html of a single page.
I create a menu as a list and a bar set them to be sticky as follows:
#topNav {
margin: 0px;
width: 100%;
height: 40px;;
overflow: hidden;
list-style-type: none;
color: white;
background-color: rgb(22, 16, 99);
position: sticky;
position: -webkit-sticky;
top: 0; /* required */
z-index: 1;
}
.menu {
margin: 0;
padding: 0;
padding-top: 20px;
position: sticky;
position: -webkit-sticky;
top: 40px; /* required */
border-right: 2px solid black;
}
However what is happening right now is, if there is a scroll bar, the menu is marginally (3 pixels maybe) more to the left than when there is no scroll bar. This creates a really ugly effect since switching between pages with little text to large pages moves everything just enough for it to be human noticeable. How can I prevent the scroll bar from re-formatting the text?
you can set overflow-y:scroll to that container. This makes the scroll always show irrespective of the content. So your content doesn't move around when switching pages.
Update: If you don't want the scroll to always show, you have to detect if the container has a scrollbar through javascript and append a class to your menu that would shift it to it's original position.
Here is a sample fiddle: http://jsfiddle.net/85a0sc4r/

Adjust size and center text vertically in a JQuery button

I have a button html element on my page and want to use the JQuery button so I do
$( "#myButton" ).button();
This works great, but I want to edit the style of the button, namely (as it says in the title) I want to make the button shorter with smaller text and center the text vertically. I've tried
#myButton {
height: 22px;
font-size: 16px !important;
}
And this works in terms of making my button and text the size I want them, but it doesn't center the text vertically in the button. I've tried setting padding-bottom: 2px;, I've tried setting line-height: 22px;, and I've tried setting vertical-align: center;, but none have worked. The button still looks like: Any help would be greatly appreciated. Thanks!
Try to use padding: 0; instead height: 22px; and your height will be defined by your font-size attribute.
Example: https://jsfiddle.net/dmonti/mz8k7kkw/
For centering small elements relative to a parent I usually just use absolute positioning:
HTML
<div>
<span>Process</span>
</div>
CSS
div {
position: relative;
border: 5px solid grey;
background: black;
color: white;
width: 200px;
height: 300px;
}
span {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
The important things to note here are that your "Process" element is self-contained (inside it's own span element), and that its parent element's position property is set to relative.
The CSS transform property might look a little confusing, but it essentially keeps the element perfectly centered inside of it's parent, no matter how it's resized.
Fiddle
In my fiddle, you can see how it centers by adjusting the div's height property in the css.
Hope this helps!

Sticking side menu to top

I've been looking into sticking a "div" to the top of the screen when you scroll past it, or making the div scroll with the page when it reaches the top of the screen.
The issue i get when i try this matter is that changing to position: fixed; using either jquery or the simple css, removes the float from the element.
My layout look somewhat like this: http://jsfiddle.net/ThSXm/33/ <-- updated
So when the float is removed, the id="content" get's overlapped by the sidemenu, making the sidemenu bigger and out of place.
I need a solution where you dont have to alter the position of the elements or if there is some fix i can make on the content div so it wont get overlapped when changing the positions.
Update
Sandeeproop managed to help me with the positioning, but the scroll matter is still a issue.
As i mentioned in the comment for this question, the div has to scroll/stick to the top of the screen when the div is close to the top or reaches the top (and preferably stop once the div reaches the footer or is close to reaching the footer), because there are more divs (header/slideshow etc) before we reach the side menu, and you wont see the menu if you just use position: fixed.
Any thoughts?
/update
Looking forward to some answers!
//Jim
If i understand you question correctly.
Please check this fiddle.
#nav {
width: 136px;
position: fixed;
background: #FF0000;
margin-left: 1em;
margin-top: 1em;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 170px;
margin-top: 1em;
}
You can set fixed margin-top values for nav and content elements.
Something like that http://jsfiddle.net/ThSXm/26/
#nav {
width: 15%;
height: 100%;
float: left;
background: #FF0000;
margin-left: 1em;
margin-top: 60px;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 1em;
margin-top: 60px;
}
I guess what you are looking for is "position: sticky".
This is not yet supported by many browsers, but here is a pollyfill for it
http://philipwalton.github.io/polyfill/demos/position-sticky/
Have you considered a solution where you use position:absolute on the element?
Have it being absolute untill you need it to stick and then change it to fixed.
Here is a simple fiddle:
http://jsfiddle.net/dXe97/
if ($(this).scrollTop() > boxTop) {
$box.css({
'position':'fixed',
'top': 0
});
}else{
$box.css({
'position':'absolute',
'top': 150
});
};
The .box element is absolute positioned, but when you scroll down passed the element, it is changed to fixed and its top value is set to 0, and back again when you scroll up.

issue with js dropdown sub menu items positioning

I'm a web designer and new in stackoverflow, I have this issue with positioning drop-down menu links (more specifically aligning them to the left of the menu) because there is a space between the menu left border and the beginning of the links (check the live demo link below). I've tried text-align, float, margin, padding, and position properties but none of them seem to solve this. I think that the menu css might be conflicting with other css code of the page, but I just can't seem to find it.
You can check the source code from a live demo of the page here.
Ok, based on how your code is structured, this is how I would modify your css to do what I think it is you're trying to do - I'll ** the css changes I've made:
.dropdown dd {
position: absolute;
overflow: hidden;
width: 200px;
display: none;
background: #f8f8f8;
z-index: 200;
opacity: 0;
**border-right: 1px solid #004e8e;**
}
.dropdown ul {
**overflow: hidden;**
width: 204px;
border: 1px solid #004e8e;
list-style: none;
}
.dropdown li {
**display: block;**
**position: relative;**
**left: -40px;**
}
This should get rid of the extra space on the left as well as put that blue border around the drop-down that I believe you were also trying to create.

Effect for image on mouseover

look this:
When the pointer is on the image I want a small dark rect at the bottom of this image with some text. How can I do this? Maybe with jquery?
Thanks guys.
You can achieve this many ways. Depending on the structure of your page, you could accomplish this with a couple of CSS classes.
HTML:
<div class="image_hover"><span>Text</span></div>
CSS:
.image_hover { background-image: url("path/to/image"); height: 95px; width: 270px; }
.image_hover span { display: none; }
.image_hover:hover span { display: block; position: relative; top: 80px; width: 270px; text-align: center; background-color: white; border: 1px solid black; height: 15px; line-height: 15px; }
You would need to make some updates based on your particular situation. Here is a working example on jsbin. This solution hides the text by default, and when the user hovers over the div, the :hover class will cause the text to be displayed.
You could also use jQuery to either add or show the div onmouseover.
Yeah, you can easily use jquery to achieve that.
If you want to learn the whole process and do it yourself, take a look at this - Sliding Boxes and Captions with jQuery
Or take a look at a few plugins for achieving the same effect - 10 Stylish jQuery caption plugins

Categories

Resources