CSS - Image gets hidden in the overflowed area - javascript

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);

Related

Make div stick to non-child div with JQuery

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.

Why jQuery removes Margin when showing/hiding the element?

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 ?

Selectively reveal background image

I am trying to create an interactive page where there's a ball. When I click on it, 2-3 random balls appear on the page. Each of those, when clicked, produce 2-3 of their own and the page slowly fills up with such balls. I have done this part using Jquery.
Now the page has a background image that is hidden from the user, and all he sees is 'white'. As and when a new ball appears, a circular region behind it (region being twice in size to that of ball) becomes transparent to reveal that portion of the background image, kind of like how the map is revealed in Age of Empires based on where the player goes.
How can I achieve this selective-revealing of background image based on the position of newly-created divs ? Can it even be done using just jquery/css and NO flash ?
My Jquery code for creating new balls looks like this :
$(document).on("click",".ball_link", function makeDiv(){
count=0;
//ajax code to fetch no. of divs to be created from table
while(count< no_of_divs)
{
//code to calculate random x,y coordinates and save them to posx and posy
var newdivid='div'+count;
$newdiv = $('<div/>').css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none',
'background':'ball.png'
}).appendTo( '.page-wrap' ).delay(900 * count).fadeIn(600).effect("bounce", { times:6, distance:15 },300);
count++;
}
});
You can use CSS background-clip, background-position and border-radius. Your newly created divs should be bigger than 'ball.png' with some border-radius so they appear as circles.
Then you can set the background position to be equal to negative div's position:
if div is on left: 100px; top: 40px then background-position should be: -100px -40px
Working sample here: http://jsfiddle.net/bndcS/
EDIT
Please see the fiddle here: http://jsfiddle.net/UX3B6/ The 'balls' appear with effect and delay.
Only one line of CSS had to be added :-)
EDIT 2
As for background and its negative coordinates: imagine that you have a big div with a nice image in the background. Now you create a small div on top of the big one. You set it in the top left corner (0,0) and set the background to the same image of the big div. Images match perfectly. Now you want to move your small div a little bit (lets say 20px right, 20 px down). Now the images do not match - in order to make things working again you need to move background image of the small div in the opposite direction you moved the div itself, hence negative coordinates: (20px left, 20px up = -20px)
You can use css3 transitions here is sample and tutorial it might useful
http://css3.bradshawenterprises.com/transitions/

JQuery/Javascript to keep Absolutely Positioned div in place with browser zoom

Looking at this layout, I want to use jQuery/Javascript to put the Red Box, in the Gray Container under the left small Blue Box whether zooming in or out with any browser.
I am trying to accomplish this by NOT putting the redbox #badplacement div inside the Gray Container's #outerwrapper div. Any idea how this can be accomplished?
(To start, I change the #badplacement css left to 243px, on normal browser zoom level, where it is under the small blue box.)
Fiddle: http://jsfiddle.net/Q56up/
Clone the outerwrapper div with css rules but without background and place it over the original (position:absolute, z-index:1). Put Red Box inside and position it relative.

JQuery resizeable and dragable divs positioning problems

I'm having trouble properly positioning some divs within a larger div and having them behave as I want.
The source and a preview is here: http://jsbin.com/usuniw/6/edit
Problem 1
When the hidden div is unhidden it appears under the div I want it to appear inside. Once the dive inside is resized (using a handle on the left hand side) it pops into place
Problem 2
When resizing the originally hidden div it moves outside the boundry of it's parent rather than aligning itself to the right-hand side of it.
Thanks for any help you can give.
At the moment, you have the #selectedResult element set as float right which is causing it to appear underneath the #ipad element.
If you get rid of the float:right on #selectedResult and instead set it to:
position: absolute;
right:0;
top:0;
And set the #ipad element to:
position:relative;
Then the element will be fixed to the top and right sides of its parent.
You can see an updated version of your example here: http://jsbin.com/uxavov/edit#preview

Categories