I'm new here, so I can't comment/follow-up yet on another question that PARTIALLY provided an answer
for what I'm trying to achieve.
On this question here [Moving Background image in a loop from left to right the fantastic and very detailed answer by Jack Pattishall Jr lets me set the page background to scroll either vertically OR horizontally.
Is there any way to combine the directional code, so that the page background scrolls diagonally
(i.e. bottom left to top right)?
I've been "mutilating" Jack's code for days now, but can't figure out how to make the background scroll in 2 directions simultaneously. :-(
http://jsfiddle.net/f5WjJ/2/
updates the fiddle from Jack Pattishall Jr to update both x AND y parameters. Also set the repeat CSS to both x AND y as well.
$(function(){
var x = 0;
var y = 0;//here
setInterval(function(){
x+=1;
y-=1;//here
$('body').css('background-position', x + 'px ' + y + 'px');//here too
}, 10);
})
background-repeat: repeat;/*and also here*/
Starting from the example mentioned above, here are my changes:
html, body { height: 100%; width: 100%;}
body {
background-image: url('http://coloradoellie.files.wordpress.com/2013/10/25280-ginger-kitten-leaping-with-arms-outstretched-white-background.jpg?w=300&h=222');
background-repeat: repeat-x repeat-y; // this line could be removed entirely
}
$(function(){
var x = 0;
var y = 0;
setInterval(function(){
x+=1;
y-=1;
$('body').css('background-position', x + 'px ' + y + 'px');
}, 10);
})
Brief description of changes:
Add repeat-y to background-repeat or remove the line (we have replicated the default behavior)
Instantiate and initialize a y-position variable
Move additively on the x-axis and negatively on the y-axis to get the background to move in the desired direction
Edit the $('body') css to include the new non-static y-position
Thanks for the advice, Joseph Neathawk
Related
I have a div with class box1 and it has following css properties(I've given a background image of a random pic from the web)
.box1{
height:600px;
width:600px;
position:absolute;
background-position:center center;
background-size:150%;
top:0;
left:0;
background-image:url(http://www.slx-photographic.co.uk/wp-content/uploads/2014/03/Photography-Camera-HD-Wallpaper1.jpg);
}
The question is HOW DO I MOVE THE BACKGROUND with movement of mouse using mousemove(); method of jquery? as of now I've come this far with JQUERY and I can't seem to get it to work
$(document).ready(function(){
$(document).mousemove(function(e){
var x = e.pageX;
var y = e.pageY;
$(".box1").css({
' background-position':' x/2 +"20px" , y/2 + "20px" '
});
});
});
I am trying to change the background position related to movement of mouse so it will be helpful if somebody could explain it if this is not how you do it..
You are having the quotes in jquery css method incorrectly. It should be like:
$(".box1").css({
"background-position": x/2 + "20px ," + y/2 + "20px"
});
Also you'd need to callibrate your x and y to distances from left of box1 and top box1 repectively. You could subract box1's positions. This might be what you want: https://codepen.io/chrisboon27/pen/rEDIC
I am trying to make a zoom-like effect on hover event in a gallery exercise. What I need is for an image to seem to expand from its center, not down and right. If I understood correctly, I need to move it half way left and up for this to work. Also, I'm using em, so I try to convert em to pixels here.
Relevant html:
<div id="gallery">
<img src="img/cool1.gif">
<img src="img/cool2.gif" id="gal2">
<img src="img/cool3.gif" id="gal3">
</div>
CSS:
#gallery {
width: 31em;
margin-left: auto;
margin-right: auto;
}
#gallery img {
width: 10em;
height: auto;
position: absolute;
}
#gal2 {
margin-left: 10em;
}
#gal3 {
margin-left: 20em;
}
Finally, jQuery:
var fontSize = $("#gallery img").css("font-size");//equal to 1em?
var fontInt = parseInt(fontSize);
var t = $("#gallery img").position().top;
var tNew = t - (5 * fontInt);//top position
var l = $("#gallery img").position().left;
var lNew = l - (5 * fontInt);//left position
$("#gallery img").hover(
function() {
$(this).stop().css("zIndex", "1").animate({
height : "20em",
width : "20em",
top : tNew,
left : lNew
}, 400);
}, //end mouseover
function() {
$(this).stop().animate({
height : "10em",
width : "10em",
top : t,
left : l,
zIndex : "0"
}, 400);
} //end mouseout
);//end hover
edit 1 Images expand and change position, but not as expected. Also, they don't return on mouseout. Thanks to Racil Hilan for solving em-px conversion problem!
edit 2 Problem moslty solved by fixing variable scope – position values moved before hover() function. The only remaining bug is that the pictures escape to the top right corner of the body before returning to their place on first interaction. Afterwards, it runs as expected. Also, could somebody explain why this works when the fontInt variable is multiplied by five, not by 10?
edit 3 – solution As Mauricio Santamaria said below, just add the css() function setting top and left parameters before hover on #gallery img element like so:
$("#gallery img").css({"top" : t, "left" : l}).hover(...);
The rest stays the same.
I improvised a fiddle for this, too: http://jsfiddle.net/dzenesiz/wudw5hmu/15/
The problem is that the $(this).css("font-size"); returns the size with the unit (e.g. 16px) which is not a number and the calculation results in a NaN.
A quick solution is to parse it to an integer like this:
var fontSize = parseInt($(this).css("font-size")); //equal to 1em?
to remove the "jump" when first interaction you should set "top" and "left" on your css, this removes that behavior (tested on your fiddle with 8px or 0.4em equivalent to your initial image size), and for your question about why 5 gets your desired result its that the result of that operation (5 * fontInt) gives you the initial value of images ie. 100px (10em), and that's the amount for top and left that you need to make it zoom from center. (the initial value for fontSize is 20em, initial t =8, so 8-100 = -92, the right value taking in account the margin )
I basically want the navigation div to be say 50px from the right edge of the picture but it needs to be fixed so that when you scroll it still remains at the location. Basically, as the image gets resized with the browser, the nav should keep a permanent relation of 50px to the image. I'm just not sure how to go about doing this with a fixed div.
#wrapperNav {
position: fixed;
top: 45%;
bottom: 0;
right: 200px;
z-index:999;
}
Code: http://jsfiddle.net/LLtnZ/
Calculate the position of the nav on window resize.
JS
$(window).resize(function(){
var gutter_space = 55;
var left_pos = ($('.item img').outerWidth() + $('.item img').offset().left) - gutter_space;
$('#wrapperNav').css('left',left_pos);
})
Use left position instead of right.
DEMO
UPDATE: Equal spacing
JS
$(window).resize(function(){
var left_width = ($('.item img').outerWidth() + $('.item img').offset().left);
var gap = ($(window).outerWidth() - left_width);
var right_pos = (gap - $('#wrapperNav').width())/2; //Space to be left on each side of the nav.
$('#wrapperNav').css('right',right_pos);
});
Also update your css, for demo purpose gave width to the #wrapperNav
Updated Demo
I'm not 100% sure I understood the question, but I took a crack at it. Is this similar to what you were asking?
http://jsfiddle.net/LLtnZ/1/
var moveNav = function(left){
$('#wrapperNav').css({'left': left});
};
moveNav( $('.item:visible').width() + 50 );
$(window).on('resize', function(left){
var img = $('.item:visible');
var imgWidth = img.width();
moveNav(imgWidth + 50);
});
Hope this helps! Let me know if thats headed in the right direction.
I have been working on a site that requires cross browser compatibility (including earlier IEs) and I have a sidebar that uses gradients but it turned out that it is about a million times easier to use a set background image, I have the height of the image repeating properly by taking the height of it based off the main container but I want to do the same the width of it.
I am aware of how to stretch the div based on the size of others but I want to know how I can have a conditional statement that will repeat the image y until the end of the div so it doesn't just move the set image!
I am achieving the height based repeating using this:
<script type="text/javascript">
var theHeight = $('#Container').height() - 260;
$('#SecondaryContent').css('min-height', theHeight);
</script>
I am attempting to use this code:
<script type="text/javascript">
var divWidth = $('#SecondaryContent').width() + 1;
if (divWidth.width() > 200) {
alert('hello');
$('#SecondaryContent').css('background', 'url(../images/background_slice.png)', 'repeat-x 18% 0%');
}
</script>
However it seems unable to find anything within the div.
these css may help
background-repeat: repeat; // repeats x and y
background-repeat: repeat-x; // repeats x
background-repeat: repeat-y; // repeats y
Just thought I would update that I managed to get this working using this:
<script type="text/javascript">
$(document).ready(function () {
divExpander();
divLineExpander();
divWindowLineExpander();
})
function divExpander() {
var theHeight = $('#Container').height() - 260;
$('#SecondaryContent').css('min-height', theHeight);
}
function divLineExpander() {
var theWidth = $('#SecondaryContent').width() + 2;
$('#Navigation').css('min-width', theWidth);
}
$(window).bind("resize", divWindowLineExpander);
function divWindowLineExpander(e) {
var theLineWidth = $('#SecondaryContent').width() + 1;
$('#Navigation').css('min-width', theLineWidth);
}
</script>
I'm thinking of implementing a custom auto-complete feature so basically my idea now is that i will make an abs positioned div and give it the position here:
(image) http://i.stack.imgur.com/3c5BH.gif
So my question is with a variable referencing the textbox, how do i get the x and y position directly under the left bottom side of the input rectangle?
My script must work in latest versions of IE / FF / Safari / Opera / Chrome
I know i can use a library to do it, but no i'm interested in learning how do they do it (or maybe better ways)?
This question is a lot more complicated than it seems and involves getting the position of the element relative to the document. The code to do so can be pulled from the jquery source (http://code.jquery.com/jquery-1.6.1.js -- search for "jQuery.fn.offset")
in jQuery:
var node = $('#textbox'),
pos = box.offset(); // the complicated piece I'm using jQuery for
node.top += node.height(); // node.offsetHeight without jQuery
node.left += node.width(); // node.offsetWidth without jQuery
The answer can be extremely simplified if you don't care about FF2 or Safari3:
var box = document.getElementById('yourTextBox').getBoundingClientRect(),
left = box.left,
bottom = box.bottom;
x = x offset
y = y offset - ( textbox height +
padding-top + padding-bottom )
Good comments! For my scenario, there is always an offset parent (which is why I use position - http://api.jquery.com/position/). In hopes that it might help someone else wanting a quick fix, here's the code:
// I have a parent item (item) and a div (detail)
// that pops up at the bottom left corner of the parent:
var jItem = $(item);
var pos = jItem.position();
var marginTop = parseInt(jItem.css('margin-top'));
if (isNaN(marginTop)) {
marginTop = 0;
}
$(detail).css("top", pos.top + jItem.outerHeight() + marginTop)
.css("left", pos.left);
$(detail).show();
Just give the box a defined width and height. Then, get its top and left property and add it with the width and height. Simple. I am gonna give you Pseodocode.
<STYLE>
object{width: 100px; height: 20px;}
</STYLE>
<SCRIPT>
x = object.left;
y = object.top;
x = x + object.width;
y = y + object.height;
</SCRIPT>