So I have a javascript function, which randomly scatters images.
The browser / page window automatically resizes to fit these images (you can't scroll further than the images / the edge of the browser window is the outer edge of the furthest image).
But why is the margin not pushing that boundary further?
So the images have a little extra space before the edge of the window. I don't want the image right up against the edge.
My javascript code:
//random position of each Card,
$(document).ready(function(){
$('img').each(function() {
var top = (Math.random() * 200)
var left = (Math.random() * 200)
$(this).css({'top' : top + 'vh'})
$(this).css({'left' : left + 'vw'})
$(this).css({'margin' : 10 + '%'})
});
});
The image position in your example must be in state of relative/absolute/fixed (because you are using top/left).
In this positions margin don't has effect of pushing the element or the elements around it.
The solution is to use container and change the constant number (200) on the container of the img that will adjust the window proportions.
So, the container will get the img width + Xpx (X is constant number) and position the image inside the container.
Hop I gave a good direction/idea toward the solution in your app.
Related
I have a parallax web page with a series of modules that contain a large photo and a smaller text box that overlays the photo and sits absolutely positioned at the bottom of it. While the size of the photos change, the text box is consistently 340px. Initially, when the site scrolls, the text box is hidden (I am doing a translateY(340px) and hiding the overflow on the container).
I know how to determine when to start revealing the box:
window.addEventListener('scroll', self.monitorScroll, false);
var moduleOffset = Math.floor($el.offset().top);
var moduleTriggerPos = moduleOffset - self.windowHalfHeight; //trigger animation when module is halfway up the screen
self.monitorScroll = function(){
self.yPos = window.pageYOffset;
if (self.yPos > thisObject.triggerPos){
//BEGIN ANIMATION
}
}
but I don't know how to tell the object how much to move each time the listener is triggered. The number of times it is called seems to be based on how fast you scroll, and the amount I would need to move the object differs, as the container resizes with the browser (the narrower the browser, the smaller the photo becomes).
I am currently using a static amount to move the object:
if (newPos >= 0){ //if our object hasn't reached a translateY(0px) value
thisObject.curPos = 320 //starts at 320, the amount it has been translated by in order to hide it
var newPos = thisObject.curPos - 25; //the amount we move it each time
thisObject.textEl.css({ translate: [0,newPos] }); //move it by 25px
thisObject.curPos = newPos; //update the current position
}
How do I get more accurate determination of how much to move the item by, rather than using a static movement amount. I want it to be based on the percentage of the way I've scrolled toward the module's final reveal position, which would ideally be when the module was fully at the top of the screen at full browser width (max width of 1200px), or some percentage thereof if they had resized the browser smaller.
I don't need exact code, but more just a conceptual understanding of what I should be monitoring / calculating to determine the correct positioning. Thanks!
I figured this out. For various reasons I made the trigger point for the CSS animation start when it first appears on screen rather than halfway up, then used this code:
var scrollProgress = (((self.windowHeight+self.yPos)-thisObject.offset)/thisObject.height);
var scrollAmt = scrollProgress*self.moduleTextHeight;
var translateAmt = -scrollAmt;
if (scrollAmt <= self.moduleTextHeight){
thisObject.textEl.css({ translate: [0,translateAmt] });
} else {
thisObject.textEl.css({ translate: [0,-self.moduleTextHeight] });
}
I have a website that uses a parallax background, the background is 1200px long.
The issue is:
I have a page with indefinite height, the page get expanded dynamically to its content. So if a user press read more it expands without refresh, which ruin the parallax effect because the background reaches its end before the page finish.
The background is complex design image, it cannot be repeated and adding background-color to cover up the white space cant be done, but I wish I can keep the cool parallax effect!
My question:
Is it possible to make the parallax stop when it reaches a specific y-position, and freezes the background when scrolling beyond the specific y position? But also to be able to trigger on the parallax effect when scrolling back to the specific y-position and above?
If we assume background is moving at 0.1 speed, then the max height will be 1200/0.1 = 12000px.
If page reaches y-position = 12000px -> stop parallax effect and freeze image as is -> and if page return back to 1199px start parallax again
How to do this in Javascript? If possible in CSS would be great too.
Edit:
here is what I did before posting on Stackoverflow:
I used Stellar.js for the parallax effect, simply i added the following javascript:
$(window).stellar({responsive:false});
and added the following code to the tag (which hold the background-image):
<body data-stellar-background-ratio="0.1">
I also tried another approach, by using a custom JavaScript I found in the web:
$( window ).scroll( function(){
var ypos = $( window ).scrollTop(); //pixels the site is scrolled down
var visible = $( window ).height(); //visible pixels
const img_height = 1261; //image height
var max_scroll = img_height - visible; //number of pixels of the image not visible at bottom
//change position of background-image as long as there is something not visible at the bottom
if ( max_scroll > ypos) {
$('body').css('background-position', "center -" + ypos + "px");
} else {
$('body').css('background-position', "center -" + max_scroll + "px");
}
});
in this case, it do scroll until the end of the background, But I can't figure out how to slow down the scroll speed of the background.
Here is the code relevant to my question: http://jsfiddle.net/mkerny45/V23NK/
As you can see there are a long horizontal chain of image slides. I would like it so that one of the slides is always at the center of the user's page both when the page initially loads and when the user resizes their browser.
This site illustrates the functionality I am interested in: http://www.freundevonfreunden.com/
I think the best way to do this is to use position: absolute or padding-left on the container of your slides and calculate the left position in pixels with browser_width - image_width / 2.
Here is an exemple of code :
var image_width = 940; //You can also get it dynamically
$(document).ready(function() {
$('#slider').css('padding-left', ($(window).width() - image_width) / 2);
});
$(window).resize(function() {
$('#slider').css('padding-left', ($(window).width() - image_width) / 2);
});
I am writing a simple script that displays a dialog box when a user hovers over a profile picture. It dynamically determines the profile pics location on the page and then places itself to the left of it and about 100px above it. This part is working fine.
My issue arises when a profile pic is at the top of the screen and a user mouses over it. The dialog will appear but the top portion of it will be above the fold (i.e. not in the current browser window). Naturally this is not good usability and I would like it to appear on the screen.
My question is how do I know when a dialog will be off screen so I can recalculate its position on the page?
I saw this question which seems like the same as mine but unfortunately no actual solution was provided other then to link to a jQuery plugin. I am using Prototype.
Prototype already provides positions with Element.viewportOffset().
Edit, as Mathew points out document.viewport gives the rest of the information. For example,
var dialogtop = dialog.viewportOffset().top;
if (dialogtop < 0) {
// above top of screen
}
elseif (dialogtop + dialog.getHeight > document.viewport.getHeight()) {
// below bottom of screen
}
You'll want to find the profile pic's position relative to the document (here's a good article on how, though I suspect Prototype's Element.Offset already handles this), then compare it to the body's scrollTop property to see if it's close enough to the top that it needs to have its dialog repositioned.
I am familiar with this problem, however, last time I was able to use a library (Seadragon) to get the screen dimensions and mouse position. I was also working with a fixed size overlay so no code to share with you other than general approach.
For my pop up box I decided to use the event mouse position rather than location of the div on the page. I then compared the mouse position to the known screen size, which I determined on start or resize.
From How do I get the size of the browser window using Prototype.js?
var viewport = document.viewport.getDimensions(); // Gets the viewport as an object literal
var width = viewport.width; // Usable window width
var height = viewport.height; // Usable window height
In Prototype you can also get the mouse coordinates:
function getcords(e){
mouseX = Event.pointerX(e);
mouseY = Event.pointerY(e);
//for testing put the mouse cords in a div for testing purposes
$('debug').innerHTML = 'mouseX:' + mouseX + '-- mouseY:' + mouseY;
}
Source : http://remorse.nl/2008/06/mouse_coordinates_with_prototype/
I'm writing a simple tooltip that can hold HTML tags. Please check http://jsfiddle.net/Qkwm8/ for the demo.
I want the tooltip box to show properly regardless of the position of element, in this case <a>, that shows tooltips on mouseover event.
The tooltips are shown fine except when <a> floats right (or is at the end of the line) or at the bottom of the screen where it doesn't show properly, it appears off the screen
If the <a> floats right, or at the end of the line, or is at the bottom of the screen, I want the tooltip to change position so it remains visible
Thank you.
Update demo link
here's the complete result: http://jsfiddle.net/Qkwm8/3/
You can use the document width to check how wide the html document is and adjust the left position accordingly. Say:
//set the left position
var left = $(this).offset().left + 10;
if(left + 200 > $(document).width()){
left = $(document).width() - 200;
}
I used 200 here because you are setting your tooltip to 200px wide. Something similar can be done with height.
There is also a window width but I always get confused about the difference so you should check which one gives you better results.
An example of the bottom of the page is:
//set the height, top position
var height = $(this).height();
var top = $(this).offset().top;
if(top + 200 > $(window).height()){
top = $(window).height() - 200 - height;
}
Again, using 200 since you are setting your tooltip to 200px height.
$('a.show-tooltips').mouseover(function() {
if(($(this).parent()).css('float')) =="right") add the proper class to left
else -> the proper class the right
....
}