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
Related
I am trying to do something similar this guy did here
However, I want my animation to go from left to right as opposed to right to left.
Now since all divs are actually positioned inline i have tried to specify direction: rtl on the parent div, but it still does not work. (my view remains on the left side on the page, I would like to see the rightmost div first and then when I slide the left divs they move to the right).
Thank you.
L.E: Here is the solution for those interested http://jsfiddle.net/oq4p28wg/
From moving left to right in the example referenced they add margin-left to move between slides, until reaching a maximum number of slides. In your case to move in the opposite direction you will need to start with the maximum margin-left and substract margin to move from right to left in the slides until reaching the first slide and therefore margin-left:0.
Not sure how to word this, so a little jsfiddle work:
http://jsfiddle.net/UwEe2/
That's the basic idea for what I need done, except that I am in need of the image to be centered (so that the very center, horizontally and vertically, of this image, appears in the little 250x250 window and is capable of being scrolled in all four directions to the edges of the image.
What I have, which would work if I would get the exact height and width of the image halved, http://jsfiddle.net/UwEe2/599/, which uses a second div inside the first with style="position:relative; top:-330px; left:-330px;", which shifts the image more to where I need it, but disallows the scrolling of the image left and up any further than the initial screen.
Hopefully this makes sense...I'm rather at a loss right now.
All you need to do is set the initial scrollTop and scrollLeft to the size of the image minus the container divided by two.
$('#container').scrollTop(($('#container img').height()-$('#container').height())/2).scrollLeft(($('#container img').width()-$('#container').width())/2);
http://jsfiddle.net/UwEe2/600/
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/
Ok I have a page with stacked div's and anchors which use a jquery slide slide down. When the bottom of a stacked div reaches the top of the screen I want the jquery to automatically scroll to the next div, which may be 1000px south.
How can i do this in javascript?
my idea is to put an image the bottom of the div and somehow check the screen to see if the image is in the top half of the monitor which would call a function to scroll to the next anchor..
Is this possible?
var wHeight =$(window).height()/2;
$(window).scroll(function(){
var imgOff = $('#two').offset().top-$(window).scrollTop();
if(imgOff<wHeight){
alert('Kill BILL!');
}
});
havent tried this out but it should work
Edit: this works try it here
http://jsfiddle.net/BG2Cz/
P.S. Be warned it will spam alerts once u pass the middle
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; }