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/
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);
I would like to display a sliding panel in my project, from a bottom fixed div (so sliding in the top direction).
This sliding panel will be used to extend a view of an existing element.
I have some problems to make it works great (where to start sliding, respect the padding of his parents, etc, etc)
I made a Plunker of a sample project representing my problem :
In this Plunker i would like to :
open my sliding panel from the top of my div (in red). As you will notice, when you click on the button to open it, the sliding panel start his animation from the bottom of the page and go over my div (in red).
align my sliding panel with my div (in red).
So here are my questions:
How can i start my sliding animation from the top of my div (in red).
I already tried that :
.sliding-panel-wrapper {
/* Other Css property */
margin-bottom: /*Height of the red div*/;
bottom: 0;
}
$("#mybtn").click(function() {
// Increase height instead of moving it from outside of the page to inside
$("#slidingPanel")[0].style.height= '500px'
});
This solution works for the starting position of my panel, but i don't want the sliding panel to increase his size, but to slide .
How can i give him the exact same size / padding / margin etc etc than the div in red ( because recursively looking for padding and margin of his parent seems not to be the best solution).
Edit : I'm looking for a "generic" solution if possible, i would like to be able that my sliding panel adapt itself to the constraint that i defined above if they change (so i would like to avoid giving hard coded value in my css).
Edit 2: Summarizing my question is : How can i make a panel slide NOT from the bottom of the page, but from the Top of another div (Please see my plunker)
If i'm understanding your question, you would like a sliding panel which is off page and then when a button is clicked it slides on page.
If this is the case then this will answer your question.
This is the html code which sets a div id as slide. The button has an onclick function called Slide().
<div id="slide"></div>
<button onclick="Slide()">Slide</button>
Make sure the div has a position of fixed and then set the bottom attribute to whatever you require.
#slide{
position:fixed;
bottom:-52%;
background-color:red;
width:100px;
height:500px;
right:0;
transition:1s;
}
This javascript is called when you click the Slide button. If the div is off screen then it will "slide" onto screen and if the div is on screen then it will "slide" slide off screen. But make sure you set your values to suit your needs because these values may not work for your solution.
var a = false;
function Slide() {
if (a) {
$('#slide').css('bottom', '-52%');
a = false;
}
else {
$('#slide').css('bottom', '0%');
a = true;
}
}
Any questions, just ask.
I'm trying to see if there's a way, using jQuery or Javascript, to have four different images, each one separately fading in quickly (say 1000ms) and out slowly (say 4000ms) depending on whether the mouse is in the top left, top right, bottom left, bottom right quadrant, with the images fading in/out in the corresponding quadrant but more towards the center (so if all images are faded in at the same time, they partially overlap). The images should be behind everything in the body tag but visible in html-rendered white space and anything opaque. Is this possible?
$(function(){
var width=$(window).width();
var height =$(window).height();
$('.image_container').css('marginLeft',''+((width-400)/2)+'px');
$('.image_container').css('marginTop',''+((height-400)/2)+'px');
$(".conner_boxes").mouseenter(function(){
$('.image_container > img').eq($(this).index()).animate({opacity:.2});
}).mouseleave(function(){
$('.image_container > img').eq($(this).index()).animate({opacity:1});
});
});
Is this the way you want it ? http://jsfiddle.net/Aveendra/hp8xP/ check the fiddle
I have a document where I use a 40×40 pixel repeated background texture on the body.
Then I have a div with a set width and height and centered with margin: 40px auto 0 auto;
Now, the background image of this div (let's say it's 960×500, same as the element itself) has the same texture as the body. I cannot use a transparent png, because of a graphical effect I'm trying to achieve with this image.
However, for the effect to work, the background of the div needs to be seamless with the texture of the body. The user should not even be able to tell that there is a separate block element there; just an endless sea of the texture, with a detail in the middle of it all.
This becomes difficult as the div is centered, and as such, its horizontal distance from the left varies.
How can I make sure that the background texture on the body always matches the simulated texture in the div to the pixel, regardless of page width?
I'm not scared to use a JS solution if necessary, but obviously would prefer a pure CSS solution.
What you want to do is to set the background image on the body element to start in the middle. So:
body {
background: url(to/your/tile.png) 50% 0;
}
This means that no matter how the window is resized, you will have a predictable area within the repeating pattern.
You'll then have to tailor the containing div's background to make the tiling in the body.
Here is some code showing how this method would work: http://jsbin.com/olabos/2/edit. Note how resizing the window does not put the pattern out of sync. Hover over the middle of the preview to see where the wrapping div is.
NOTE: some caveats to this technique, depending on how the browser handles half a pixel, you will get a 1pixel difference in the background. I don't know of another technique that will solve your problem, so hopefully you can live with being 1px off.
If you are trying to use a 40x40 tiled image as your body background, and a 960x500 image with the same background on top of it, use the following code:
body {
background: url(repeat.png) top center repeat; /* 40x40 image goes here */
}
div {
background: url(overlay.png); /* overlay image goes here, must be multiple of 40px wide, example is 960px wide x 500px tall */
width: 960px; /* must be multiple of 40px wide */
}
You may need to edit this CSS snippet and you may have to do a bit of tweaking to your overlayed image to get the seams to line up but this should line them up nicely with eachother. I've used it on a few sites before and it works well.
If you have any questions or if I have overlooked a certain scenario, let me know and I can take another look at it. An example of your code would be useful.
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; }