javascript slider picture not centered - javascript

I am doing a javascript slider for practice.
However, the picture in the slider is not centered.
Here's the link: http://eddieli.org/flee/
Which part of the coding have I done wrong?
The pictures are not aligned with the slider...
Thanks for helping.

well, i added position: relative; left: -40px; to the li of the sliders #container #left_col #slider li, and they get aligned, i don`t know which size images are, but you must always check the starting position before doing the slider itself, you must check all styles fit right.

Related

Z-index and transition css property conflict?

In my page, I have 3 placeholder images under my portfolio section. What I want is for the images to get wider and taller when they are hovered. However, I also have a fixed header set with a z-index of 1000 (for obvious reasons). The issue is that for some reason, even though I have set my containers to position: relative with a z-index of -1, the images still appear over my header when I scroll down. Here is my codepen snippet:
https://codepen.io/PatrickVegas/full/RVapzR/
* { font-family: 'Raleway', sans-serif; }* HEADER/HOME ---------------------------------*/
What can I do? Thanks!
Add the position: relative; and z-index: 9999; to your css class container-header will fix the problem you have with those images.
.container-header {
position: relative;
z-index: 9999;
...
}
https://codepen.io/hdl881127/pen/eWzzBp
Most of the time when you can't position something, try to move up to the parent and see what's in there. In your case here <div class="portfolio" id="portfolio"> are sibling with your nav menu <div class="container-header" id="home">, you can't position them if you only add index to their child element.
take a look at this img, it provide tons of information about position:
I know there are lots of answer in stack-overflow but this link helped me alot when I think about this.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Animate div from middle of div to bottom right of screen into a fixed position

What I am trying to figure out is how to animate a div that will start out in the middle of a div that is in the middle of a page. The div originally should not have a position: absolute. Unless it is not possible, I would like it not to start with that because it seems very tough to have any data below it. It's not going to be that big of a box. I am guessing anywhere between the height of 100px and 600px, with a width between 400px and 800px.
I originally found this JsFiddle Example that does a great job and almost exactly what I need. But the div starts with an absolute position and it is already located at the bottom right of the page to be animated.
Once the div is at the bottom right of the page, it needs to be fixed there so that I can scroll up and down the page without it moving. At this point I am not worried about being able to push it back up to the spot in which it came.
A couple things I tried: Lining it up in the position I desired, and then on the click of a button, add a class with the attribute position: absolute and calling the animate function like this:
chatWindow.stop().animate({
bottom: 0
, right: 0
}, 2000);
But my guess is that it originally needs to the the position set as in top: 0; left: 0 and that's why it won't work.
I already have it working without any animation and would love to be able to figure out how to animate this thing. Without animation, it's as simple as toggling a class with it's normal positions attributes with one that has a position: fixed; bottom: 0; right: 0.
Here is a Codepen Example that I created to show really what I need other than right animation part not being there. Any help would be awesome as I've been toying with this for quite some time now.
If you want an animation from left to right, you will have to play with left and top values. But the negative point is that will cause a weird animation because you want to keep a relative position of the box in the beginning.
So when you will do the animation, it will start from the very top left on the window, which is not good.
Like this
To avoid that, you will have to use absolute position in the beginning state. You said in your question you doesn't want it but I think it is required to get the wanted visual effect.
See here the live example with good effect
However, to keep a pretty nice animation, but I know it is not what you want, you can play with right and bottom values. It will make the box appears from the right and bottom corners of the window.
Like this
One possibility, still using absolute positioning, based on what's going on in your codepen example, would be to fake the current positioning by adding the following CSS:
.container {
padding-top: 250px;
}
.center-window {
position: absolute;
right: 50%;
margin-right: -200px; /* i.e. half of its width */
bottom: 100%;
margin-bottom: -250px; /* i.e. its height */
}
Then you could animate the right, bottom, and margin properties accordingly. See https://codepen.io/anon/pen/RaOJYY (though it doesn't currently do anything with the padding). Of course, if your not sure of the dimensions of .center-window, perhaps this solution won't quite work.

why does part of the content scale on this slider

I have used THIS tutorial to create a full-screen version for a website I am working on.
As you may have noticed I have succeeded in making most of the changes I needed.
http://coolcarousels.frebsite.nl/c/68/
But I am unable to figure out why the cans that shrink and grow every time the slides are clicked and made active.
JSBin
I have a feeling it has something to do with the Slides changing their width when going from active to smaller slides, But I do not understand why should the content grow/shrink with it.
// resize currentslide to small version
currentSlide.stop().animate({
width: _width * 0.065
});
Is there anyone that can help me understand why this is happening?
All I want is for the click to reveal the slide and the cans to stay the size they are suppose to be. Just like the original tutorial a clean reveal to the content.
The reason the cans expand is not a JavaScript issue, its because the CSS for the can is width:100% when its a small slider and when the new slide is clicked, the active slide goes from 60% to 10% and therefore the can takes up 100% of it.
.slide .can {
position: absolute;
width: 150%;
left: -56%;
bottom: 0;
right:auto;
}
The easiest solution would be to turn the values into pixels so that it stays the size it is while transitioning. But that perhaps complicates responsive behaviour.

Slider from the left side of screen to the right side of content

This is my first post so hello! :)
I have a problem with coding my site!
May I show it on this picture:
I want to make a slider (with captions for each slide) which is aligned to the right edge of content div.wrap. But left side of it must by to the left side of the screen. It must change to the screen resolution (always to the right edge of the content div.wrap Something like this
Right edge of div.wrap must be a limit.
I have no idea how to do this. The slider must be a background fader? Or img fader?
Please help me or show me how to do this on similar example.
Further to #Itay's answer, here is a jsfiddle which might help you with the CSS for this.
http://jsfiddle.net/mmWq6/4/
I've used the example of a slider that is 500px by 200px. This is what I guessed would be a miniature version of the webpage I expect you're creating, if you scale the 'Result' window narrower and then wider again you'll see that I think the design works how you want it to.
This demo basically demonstrates Itay's comments, which were to have a wrapper (#slider-wrapper) which had the CSS position: relative and a div within that with the CSS:
#slider-wrapper-inner {
position: absolute;
right: 0;
}
Then within that are .slides which are relatively positioned and .captions within them that are positioned absolutely, as above (but with an extra line: bottom: 0;), so that they sit in the bottom right.

Is it possible to get an adjustable "view" of a static image in HTML?

I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!
Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.
I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.

Categories

Resources