I have an element that has margin-top and border. When I call $(element).show() it doesn't use the element's margin and the it doesn't look good (in original fiddle If you click on the div that is after the input text the slide animate starts from top of the text input and you see a black line passing it and it's not beautiful! I want the animate start form the bottom of the text input.)
This is my beta in jsFiddle. but The orginal is diffrent (I remove an element because the wanted element cannot be found!)
Can anybody help me?
I don't understand in 100% what you want to achieve, but your div #AdvancedPanel have margin-top 35px from div #urlpanel. If you give some height to div #AdvancedPanel then it looks good. Will you precise what you really want ?
Related
I have created a segment from a circle but when I try to apply a background image to it, it applies it to the whole circle resulting in the image getting centered somewhere below what the user can't see.
Right now, only the portion of the circle that overlaps with the rectangle gets displayed thanks to overflow: hidden, I have just disabled the hidden for now to show how the image is actually getting rendered.
Can someone please tell me how I can apply a background image only to the portion of the circle that's visible?
This is the result I want:
Demo: https://codesandbox.io/s/segment-background-image-msu63
^ I achieved this by hardcoding the position of the image but I am looking for a CSS oriented approach because that'll be much more dynamic.
EDIT: so I was able to figure it out. The trick was to place another div on top of the semi-circle and add the image on that and set the overflow to hidden on the parent div. It works like a charm!
p.s the demo is updated with the solution.
The trick was to place another div on top of the semi-circle and add the image on that and set the overflow to hidden on the parent div. It works like a charm!
p.s the demo is updated with the solution.
You can adjust the background-position top top center:
background: url("./360.v1.png") top center no-repeat rgba(85, 112, 24, 0.76);
So I'm trying to make a double slider in Owl-Carousel 2.0,
The first slider has 9 images, which means it has 9 dots. These dots are in placed in a container, #customdots. I'm trying to make the position of these dots be: horizontally centered (which works), and appear on top of the second slider, so position, bottom should be the height of the second slider (#sync2).
I tried using JQuery to do this, with the following line of code:
$("#customDots").css('bottom', $("#sync2").outerHeight()+ "px");
However, this doesn't get the actual #sync2 height, and it doesn't update on moving the window, neither does using height().
How would I go about making this #customDots div stick to the top of #sync2, when it can't be a child of #sync2?
See full codepen here: http://codepen.io/JJvanSteijn/pen/aJxgdW
I would wrap #sync2 in an element (I created #sync2Container), use that new element to position the second slider at the bottom of the window, and just add the dots to the top of that element. http://codepen.io/mcoker/pen/JWgKxJ
You need to add height to the CSS for #sync2:
#sync2{height:210px}
and use JS code to get the height:
$('#customDots').css('padding-bottom','0px');
$('#customDots').css('bottom',sync2.outerHeight());
Hope it's useful.
You can see an example of what I've got now here.
I'm trying to get the div that's 'full' to expand from the middle out, pushing the others out of the way in the process. What I've got now will push them to the left edge and then expand them. I know that this is because I've got position:absolute. Any ideas on how I can acheive this effect?
Here is a working example of what I think you are describing: http://codepen.io/anon/pen/pKfAw
I removed display: table from div and set .min, .min p to width 0px with an overflow hidden and removed height 0%.
The issue why it was jumping is because you set all the min to 0 with the full floating left. That automatically pushed it to the left and then expanded out. Now all the divs are animating to 0 while .full is animating to 100%.
Not sure what you mean by "expand from the middle out". Here is a quick fix for your js:
$('div').on('click', function(){
var $this = $(this);
$this.toggleClass('full');
$this.siblings().toggleClass('min');
});
This only adds full class to the div which was clicked.
In Javascript, I have a div with a paragraph inside it. I have made an effect where the div slowly expands in width & reveals the text in the paragraph below.
I set the divs width to zero, then every 10 milliseconds I increase the width by 10px. This works great because I have set the div to have overflow hidden.
My Problem: BUT the text in the paragraph wraps to the current width of the parent div, which means that the text jumps around & reformats as the width increases.
I want to remove/stop this from occuring so I explicity set the paragraphs width to 100px (the width of the div once it has completely expanded) but the problem is when I go check the CSS width of the paragraph element in Firebug, its not set, ie its not listed in the HTML elements inline CSS style?
It makes me think that a paragraph element by default has display block & ignores the width parameter, is that correct?
My ultimate question is: How can I get the paragraph element to be 100px wide? Do I need to change the display type to get the width to work?
This doesn't work:
pEle.style.width = "100px";
// maybe I need to change the display type before I set its width?
If I understand your question correctly you can do this just be explicitly setting a width for the paragraph in your CSS.
By default a paragraph element is block level and will take take any width you specify... Leads me to think somethings going wrong with how you're trying set the width.
Here's a quick fiddle - http://jsfiddle.net/MerlinMason/Sdq65/
Hope that helps!
I truly believe all your problems maybe fixed by adding this css property to your paragraph:
white-space: nowrap;
I am trying to animate my accordion headers to simulate a ribbon dragged on to the wrapper on hover, and on hover out its dragged out of the wrapper.
Now if you check this first jsFiddle everything works fine, but when I try to animate the width of the h2 the ribbon bit outside of the wrapper disappears for a second and returns when the width animation is done. Check this jsFiddle to see the problem.
Am I doing this wrong? Is there a way to animate both the h2 and the span at the exact same time?
H2 gets an 'overflow:hidden' while animating, that's why your ribbon disappears. It seems that jQuery does this automagically, when animating a width.
What you could do is to use a different animation library like emile, or to animate an emtpy property set and use the step callback of $.fn.animate to set the width.
Or you can modify your css that an overflow hidden on the H2 does not affect you.