jQuery SlideDown and Border - Strange jump - javascript

When I use jQuery's SlideDown feature on an element that has a border, I do have a problem with a strange jump.
Here's a fiddle to demonstrate what I mean: http://jsfiddle.net/Complexity/um9xj/
I've placed the duration on 700 just for testing purposes
$(element).slideDown({
duration: 700
}).parent().addClass("active");
When you click the new items button you see the behaviour that I mean.
I hope that there is a very simple solution to it.

Try this:
Demo
It looks like as this is being animated down, the margin-top is applied and it jumps down a pixel.
Edit - the left border issue looks to be because you're positioning the menucontents element left:-4px which puts it outside of the menu element. This isn't an issue until you do the slideDown() animation and it automatically sets menu to overflow:hidden a simple fix is to move the positioning to the parent element.
CSS:
.icon .menu {
box-shadow: 0 0 0 #888;
display: none;
left:0px;
top: 60px;
/* margin-top:-1px; */
}
.menucontents {
//other styles
/* left: -4px */
}

The jQuery slideUp and slideDown animations animate the height of the content box, the margin-top, margin-bottom, padding-top, and padding-bottom. Your margin-top: -1px was getting animated but can only be 1 or 0, which is why it was jumping halfway through. Getting rid of margin-top will fix this. If you would like to avoid changing your CSS, you can override the margin editing like this:
$(element).slideDown({
duration: 700,
progress: function(){$(element).css('marginTop', '-1px')}
}).parent().addClass("active");
The progress function is called each frame of the animation and will overwrite jQuery's changes to your margin
EDIT: I've tried experimenting with overwriting overflow, but for reasons I can't determine, it isn't rendering properly. I recommend a CSS edit for your second problem. Since you want to position the menu, just use the outer-most div to modify your positioning and let the inner divs only worry about content:
.icon .menu {
box-shadow: 0 0 0 #888;
display: none;
left: 0;
margin-top: -1px;
}
.menucontents {
padding: 1px;
padding-left: 2px;
z-index: 100;
background-color: white;
/* left: -4px; *
...

Related

How can I adjust this fixed table header so it is left aligned instead of centred?

So when I scroll, the table header is fixed but it aligns to the left instead of being centered - I am not sure where to center this. I have tried CSS and within the jquery with no success...
I have a full-width example working here...
https://jsfiddle.net/vladi/vuoe35n7/
and now I wanted to change the width of the table to 660 pixels and center it.
I changed the css of the table from 98% to 660px and the margin from margin: 0 1% to margin: 0 auto
https://jsfiddle.net/rbla/m605k9ov
cant seem to get the cloned header to line up correctly?
table {
border-collapse:collapse;
/* width: 98%; */
/* margin: 0 1%; */
width: 660px;
margin: 0 auto;
}
Any ideas on how to center this fixed table header so it matches the orginal? I am wondering if it is within the jquery
}
You can find another solution for this here. Look at the answer that starts with "The answers here are outdated" and includes the following approach:
left: 50%;
transform: translateX(-50%);
The "left: 0, right: 0" approach appears to work just fine, but I think this transform reads more obviously as trying to center the content, whereas with the "left:0, right:0" approach I have to try it to be convinced it doesn't force it to 100% width.
The fixed header element is fixed (duh!) so the margin: auto trick won't work. The solution, however, is easy: add left: 0 and right: 0 to the fixed class and it'll center the content, like this:
.fixed {
top:0;
position:fixed;
left: 0;
right: 0;
display:none;
border-top:none;
border-bottom:none;
}
As you can see, you can also get right of the width: 660px since it'll always be overriden by the javascript.

when we collapse transition is not good

When we expand transition is smooth but when we collapse transition is not good... when its about to collapse I see a shake.
I played with transition but its not working. Can you help me providing my code in the fiddle?
.accordion-section {
border-bottom: solid 1px #000;
}
.accordion-section > h3 {
padding: 6px;
font-size: 16px;
background-color: #CCC;
margin: 0;
}
.accordion-section > .body {
height: 0;
padding: 0 10px;
overflow-y: hidden;
transition: height .5s;
transition: height .5s, padding-top .5s, padding-bottom .5s;
}
You can transition max-height instead of height and enclose the body content with padding, etc inside of the element you're transitioning (added .body-inner in .body). I also added a transition for scale() as it will cause a more "accordion" style collapse, but you can try it without that.
with scale() - http://jsfiddle.net/b4L6kyg4/93/
without - http://jsfiddle.net/b4L6kyg4/94/
Just give the initial div background color green. when the accordion is closing it doesn't have any background so it makes it look as if the div is flickering.
.accordion-section > .body {
background: green;
}
There are a couple of things you can do:
First, accelerate some device's hardware by using -webkit-transform: translate3d(0,0,0); . Second, use the CSS animation property transition timing function. I am not sure which effect you are trying to achieve, but you have "ease" on certain elements. Try experimenting with "ease-out". Third, the CSS transitions you're using may not be aligned perfectly with your elements, so when the transition finished running, the div snaps back to its place. A quick patch for this problem may be animation-fill-mode: forwards; . Your fiddle does not have the actual #keyframes for animation, so it is hard to give you any further advice.

I have a video background bootstrap page. How can I make a transparent overlay?

I prepared the fiddle: http://jsfiddle.net/Leytgm3L/30/ and as you can see I already successfully included the video as a background on the main section. Later on there's a green section with some text and a black square. And now - is it possible to cut off the green background inside of this png file and leave there the video from the background? Ideally it would have alignment absolute, so it would show exactly the same area that is on that place in the original video. I thought about surrounding it with class:
.transparent{
}
but I don't know if it is possible to cut off the center of this square. Basically I would like to have an effect like this:
http://imgur.com/sAUKRml
I used your fiddler and with did it with shadow-box filling the outside with green. Tell me if it suits your needs.
I added two new CSS properties with:
.transparent{
box-shadow: 0 0 0 1000px rgba(0, 999, 0, 1);
overflow:hidden;
}
#imgBox{
box-shadow: 0 0 0 1000px rgba(0, 999, 0, 1);
}
http://jsfiddle.net/Leytgm3L/31/
Regards
When ever I do this, I like to use the pseudo-selector ::before.
Basically, say your banner's name was .main-banner. Without touching your html, you can add a div before it with just css.
Your css would be something like this:
.main-banner:before{
content: "";
position: relative; /* position on top */
width: 100%; /*full width*/
height: 100%;
display: block;
z-index: 0;
top: 0;
left: 0;
background: rgba(25,29,34,0.35); /*your background color */
}
I haven't worked in bootstrap for a while so I forget the class name for a hero-image, but you get the idea.
Edit: updated your fiddle, you would need to use video-container2.
fiddle here.

How to ensure that the css border goes inside the image

I have a some picture with border add with photoshop but these border are dirty.
I would overwrite these border without doing it with photoshop again (Can not use a script because almost every picture are too specifics), because my client gave me about 15000 pictures with this error..
Then, I though about css border.
So, how can I make the border around the image to fill the inside of it ?
Is it possible ? Have you a better idea ?
EDIT
List of ideas which don't work for my case:
css attribute : border-style: inset (thank you anyway Abdul Basit)
css attribute : clip
Thank you in advance.
you can give inset border
border-style: inset;
can add a width that covers approx of all borders
border-width: 5px;
or you can use image as a border for all.
You can use box-shadow with inset to simulate a border. However the box-shadow does not work directly on the image element, because it will render behind.
You can solve this by making an .image-wrapper class with a box-shadow on.
And to make this shadow render in front of your image you just need to set the z-index to -1.
* { box-sizing: border-box; }
.img-wrapper {
box-shadow: inset 0 0 0 20px red; // Fake border on the inside
display: block;
margin: 50px auto;
width: 90%;
}
.img-wrapper img {
display: block;
position: relative;
width: 100%;
z-index: -1; // Render the image behind the box-shadow
}
Demo

Slide a list element with jQuery without effecting other list elements

I am trying to slide up a list element and reveal more content which appears to be hidden "under" the list element, but when the animation occurs all other list elements jump down slightly. When I remove the content under the list element but leave the animation everything works fine.
How can I make this work without effecting the other elements in the list?
It is difficult for me to explain this, so here is a fiddle of what I am talking about: http://jsfiddle.net/YNBxz/1377/
click on any one of the blocks in the view section to see the animation.
If you comment out the jQuery(this).children('.block-content').slideToggle(500); you can see what it SHOULD look like during the animation.
You need to change the positioning of .block-content to position: absolute. That will fix the sliding of the other li elements. Then, to fix the positioning of the .block-content, remove width: 100%, change the right positioning to right: 0, and add top: 45px. The css for .block-content is then:
.block-content {
font-size: 12px;
font-family: Helvetica, sans-serif;
display: block;
background: #333;
padding: 10px;
position: absolute;
top: 45px;
right: 0px;
height: 120px;
}
Also, if you want the bottom of .block-content to line-up with the bottom of the li's, change the jquery to animate to 140px, not 115px.
You can see the results: http://jsfiddle.net/YNBxz/1379/

Categories