here am trying to load 3 images from left to right and then wait for 3 seconds and then again load from left to right. This process is continues for every 5 seconds. here am not getting how to load it from left to right and loaded images should be on one line only.
I mean in this example, images are moving from left to right but they are going to next line. i dont want to go for next line. they just load one by one with some gap from left to right only.
in this [example]1, values are fade in fade out. but i wanted to go for like left to right like movemet/ load images(appear) from bottom to top/ load(appear) images from top to bottom
If you don't want items to go to the next line, then you need their aggregate widths to be less than 100% of the container.
10px + 80% + 10px + 80% + 10px + 80% > 100%
Edit
To expound: The problem is that your right margin is 80%
50% {margin-right: 80%;}
That means 80% of the page, which is too much. What you need to do is animate the left margin of the last two objects rather than the right margin of all three objects. The greatest left margin that you can have should be about 40%
50% {margin-left: 40%;}
Note that you shouldn't have multiple elements with the same ID in HTML, but you can have multiple classes, so your divs should look like
<div class="ui-block-b subdiv">
Note also that you need to close your img tags with /
<img src="img/images.jpg"/>
Related
I've looked all over Stackoverflow and it seems that all range sliders with thumb labels have this problem. For example, this answer almost doesn't have it, but still does.
Basically, you can calculate value / max to get the left style for the range value label, so that it's always aligned to the thumb.
The problem is that the further right you slide, the more offset it gets. For example, in the linked answer the label starts off on the left side of the thumb at the 0 value, and it slowly slides to the right side of the thumb by the time it gets to 100.
Why is this happening? I'm implementing my own solution and it suffers from this problem. Also, every answer I've seen on Stackoverflow has this problem. What's causing it, and is there a good solution?
Here's a shitty GIF of the problem:
This is happening because the dot's center does not represent the value. Lets say the dot's size is 10px and the slider is 100px wide. When slider value is 0, the center of the dot is actually at 0px + 5px, i.e. 0 * slider_width + 0.5 * dot_width. When the slider is at 100% then the center of the dot is at 100px - 5px, i.e. 1 * slider_width - 0.5 * dot_width.
To fix this issue you need to subtract an offset value of (percent_as_decimal - 0.5) * dot_width. This will be negative when less than 50% so when subtracted it will add.
Now that above offset will only affect where the leftside of the element is placed. You will also need to place a translate of 50%, via transform: translateX(-50%); to the number's container to address the width of the number element.
To summarize:
1) align left side of number to center of dot
2) translate number to place the center of the number with where the left side was before.
I'm create a list of avatar for my user to choose on my website. The avatars are in a big image with 5 sub-image per row and 5 sub-image per column. So this by using image background position, I can display one of the 25 possible choice. For example, my sub-image size is 160X160, and I want to display row 3 column 2. The css will be
<img class="avatar-icon img-thumbnail" style="background-position: -160px -320px; background-image: url('/images/logos/Avatar_0.png')">
It works great. Then I found the avatar is a little bit big in some situation. And I want to stretch the background after it is positioned. In the example above, I still want to display from area from (-160px,-320px) to (-320px,-480px). But I want to stretch it to 50%, so imag size will be 80x80. I tried the background parameters but didn't find a good combination. Is there a css way to do it? (without duplicating the big image to a 50% smaller one)
Use a <div> or <span> for background properties instead of applying on image tag.
You can achieve avatar scaling in 2 ways:
1) By scaling both position parameters and image size, i.e.
background-position: -80px -160px; background-size: 50% auto;.
2) If you don't want to change the position parameters, you can simply scale with the transform property.
transform: scale(0.5);
Specifically, how would I do this without any JavaScript?
I have a RadMenu that I made 1080px wide, I have about 7 items in it so they only take up about 2/3 of that width.
I want force the items to split the width of the whole RadMenu between them so there's no awkward blank area on either side.
(Similar to using Justify on a RadTab)
Can this be achieved with CSS, or existing functionality of the RadMenu?
You'll have to play with the padding element of the RadMenu and adjust the right and left side to get the desired with you want.
.RadMenu .rmRootGroup .rmRootLink {
padding: .25em .54em .35em .50em;
}
Remember the order is top, right, bottom, left.
Actually my first question on stack:)
I'm trying to get a negative (right) margin on my repeating background, so there won't be a gap between the repeating images.
It seems there is no css syntax for this.
To make things clear, i added an image below. So i'm trying to get the repeating images of the cookie-like things to overlap so there's no gap between them.
screenshot of the page
You can apply multiple backgrounds to an element, so why not use this background image twice, with different horizontal offsets.
body {
min-height:170px;
background:
url('http://i.stack.imgur.com/jKAKB.png') 0 100% repeat-x,
url('http://i.stack.imgur.com/jKAKB.png') 75px 100% repeat-x;
}
PS the cookie like things are called kruidnoten. Although everybody calls then pepernoten, which is not actually true.
Basically, I'd like to understand how the effect with the vertically scrolling, but overlapping images on the amazing Beolit 15 works.
What I found out so far is that they use a container div which again contains four divs that are positioned absolutely to the upper left corner of the container. So far, so good. Apart from that, the four divs all have the same size, feature a background-image that is sized as cover, and have different z-index values to make sure that they are in the correct order on top of each other.
Then, what they added is a clip style that always starts in the upper left corner of each of the four divs, always has the same width, but they differ in their vertical length. The top-most is the shortest one, the second-top-most is the second-shortest one, and so on…
So far, I already have two questions:
How do they get the 673px width? Isn't this depending on screen resolution? Why is it exactly this value?
How did they get the height of teach of the clipping rectangles? Why exactly those values? (Of course, because otherwise it wouldn't work, but how did they get those values? I'm sure not by trial and error…)
Now, apart from that, you can see that when you scroll, basically all they do is update the lower border of the clipping rectangle. This way it looks as if they were sliding up, and move above the images, while they stay fixed.
What I do not get here is how they do this. Obviously they have somehow attached to the window.scroll event, but how exactly?
They add a .fixed class to div.images via e.startEngine() once it reaches the top edge of the viewport and remove it via e.stopEngine() when you scrolled through all images. This triggers the following styles:
.focus .images.fixed {
position: fixed;
width: calc(50% - 30px);
}
calc(50% - 30px) is probably the 673px you are searching for.
The style every image gets looks like:
height: 928px;
clip: rect(0px 597px 1856px 0px);
which can be expanded to:
height: [window.innerHeight];
clip: rect(
0px
[window.innerWidth / 2 - 30]
[
this.parentNode.parentNode.offsetTop +
document.querySelector('.inpagenav').offsetHeight +
(window.innerHeight * IMAGENUMBER) -
window.scrollY
]
0px
);
The scroll event is attached via e.Tools.bindEvent(window, "scroll", w) and the function w calls e.Tools.clipY() which sets the clip styles for each image.