We Keep Coding

CSS - Image gets hidden in the overflowed area

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

Make cursor hover area larger

It is possible to make cursor area larger ? I am playing with hover event and i am wondering if it's possible to make the cursor "trigger" area larger.
When the invisible div touches my elemet i want to trigger hover event. Is this possible?
ps: the invisible div follows the mouse.

Then just apply the padding value for that element with higher value as you wish.
Or, if you wished to trigger the hover event after hovering some div, do like this:
$('.invDiv').hover(function(){
$('.hovDiv').trigger('hover');
});
And your invisible div should not be hidden but instead use blank div and apply width and height for that area...

Hide window scrollbars without moving centered content

Is it possible to (temporarily) hide the main window (vertical) scrollbar (the one on body/html) without (slightly) moving centered content?
Setting overflow: hidden on body, html hides the scrollbar but the centered content is moved half of the scrollbars width to the right when doing this. I could add padding-right: <width-of-scrollbar> but that varies, and also would move the content if there is no scrollbar to begin with.

You could position the centered piece relatively (left: 50%) and use javascript to set the position fixed in pixels afterwards. In jQuery:
$(".centered").offset({left : $(".centered").offset().left});
See it in action here: http://jsfiddle.net/willemvb/jP3PK/4/

jQuery Transitions?

I want to use jquery to access a hover state on a li element. Before hovering on it, it is gray. When you hover on it, it becomes red and underlined. You could do this in css, but the trick is that I want it to transition from the left of the li to the right so it appears to be sliding color in.

If you're talking about animating the underlining of the li:
Create a thin (2px tall, width of the li) red div that contains a thin (same size) white div inside of it. You should only be able to see the white, covering the red div completely.
Make sure the red div has overflow:hidden as a css property. Then do a jQuery animate to move the white div to the right, creating the illusion of a red line slowly underlining the li. When someone mouses over any li, find the closest "red/white" nested divs and perform the animate on the white div. Kinda like this:
$("li").hover(function(){
$(this).next('div').children('div').animate({left: (width of div)px});
});
The next('div') finds the red div, then the children('div') finds the white div inside of it. The animate function moves the white div out of the way, exposing the red div.

Did you tried this example:
http://www.incg.nl/blog/2008/hover-block-jquery/
Or this with lavalamp plugin:
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

It is better to have a background image which of the required color in the li dimension. So that you can make an animation effect when the mouseover and mouseout events the li. On mouse over animate the background image from background-position of some '-' to 0 and on mouse out do the reverse.

Connecting repeatable and non-repeatble backgrounds without a seam

I have a 700x300 background repeating seamlessly inside of the main content-div. Now I'd like to attach a div at the bottom of the content-div, containing a different background image that isn't repeatable, connecting seamlessly with the repeatable background above it. Essentially, the non-repeatable image will look like the end piece of the repeatable image.
Due to the nature of the pattern, unless the full 300px height of the background image is visible in the last repeat of the content-div's backround, the background in the div below won't seamlessly connect. Basically, I need the content div's height to be a multiple of 300px under all circumstances. What's a good approach to this sort of problem?
I've tried resizing the content-div on loading the page, but this only works as long as the content div doesn't contain any resizing, dynamic content, which is not my case:
function adjustContentHeight()
{
// Setting content div's height to nearest upper multiple of column backgrounds height,
// forcing it not to be cut-off when repeated.
var contentBgHeight = 300;
var contentHeight = $("#content").height();
var adjustedHeight = Math.ceil(contentHeight / contentBgHeight);
$("#content").height(adjustedHeight * contentBgHeight);
}
$(document).ready(adjustContentHeight);
What I'm looking for there is a way to respond to a div resizing event, but there doesn't seem to be such a thing. Also, please assume I have no access to the JS controlling the resizing of content in the content-div, though this is potentially a way of solving the problem.
Another potential solution I was thinking off was to offset the background image in the bottom div by a certain amount depending on the height of the content-div. Again, the missing piece seems to be the ability to respond to a resize event.

Another approach is to calculate the background-position style for the bottom and top DIVs based on the size of the content DIV. You can use negative positions to align the bottom of one to the top of another.
Yet another approach is to use a layered DIV approach in which the top, content and bottom are all children of a parent DIV that contains the background.
The benefit of these approaches is that it doesn't change the natural rendering of the content DIV simply for managing the background.
Example: http://bin.googlecode.com/svn/trunk/css/repeating-bg-content.html

Could setting background-position: fixed in your css help? Then your bottom div could move, but its background image would remain fixed in relation to the top of the page. As more of your repeating image was revealed, so more of your bottom image would be hidden.
This would comes under the heading of "offset the background image in the bottom div by a certain amount depending on the height of the content-div", rather than "the content div's height to be a multiple of 300px under all circumstances".

You could try adding an event listener to the div:
var div = document.getElementById("content");
div.addEventListener("resize", adjustContentHeight, false);

If nothing needs to match up at the top, position the repeating image at the bottom of the div (so the overflow will spill over the top). Like this:
div#repeating { background: transparent url('/path/to/image') repeat left bottom; }