I used jquery-ui plugin to realize vertical slider function. I want to realize gradient effect, so I use background images, include bg/range and slide handle. The question is when I slide dot handle to bottom, bg image is compressed. Here is my example code.
jsFiddle
#head_slider .ui-slider-range {
background: url(https://image.ibb.co/hTvN6a/head_slider_h.png) 0px center no-repeat;
}
#head_slider_bg {
position: absolute;
width: 72px;
height: 704px;
right: 100px;
background: url(https://image.ibb.co/mUfpma/head_slider_n.png) center center no-repeat;
}
and the same way to horizontal slider is fine! That's confusing me. Thanks for your reading and help.
The problem is not that the background image is compressed, but the CSS rule border-radius applied to the verticle bar becomes different. When slider slides to the bottom, the height of the verticle bar is less then 60px (the value you set to border-radius), thus the actual border radius will be decreased.
A simple fix to this problem is add a min-height constraint to that element, which you can refer to the updated fiddle (add min-height: 60px at Line 79 of CSS).
For more detail about the behavior of browser handle border-radius, refer to Cornor Overlap section of specification.
Related
The issue I’m having here is with the x-ray image behind the one in the front. They do not line up. It only does when i stretch the browser out to 1920px. Anything smaller than that causes it to misalign. Note that I purposely set the image to be at 100% width which I know is not responsive.
I want to keep the effect of the image getting cut off on the right and left of the browser. Ideally I'd like both images to be centered and aligned when I decrease the size of the browser.
Here is the Github link:
https://gist.github.com/siravani/71b8d447acaca8b34acfcab82af58c06
If you added a fiddle that would have been a lot easier but all you need to do is add background-size:cover to #flesh css rule
html, body, #flesh {
position: relative;
margin: 0;
height: auto;
max-width: 100%;
background: url("http://www2.yapstone.com/l/109192/2017-04-04/4c61s2/109192/37539/buildings.jpg") no-repeat;
background-position: center;
background-size:cover;
}
this way your background image will fit in container and will match with the original image.
Here is a working fiddle https://jsfiddle.net/w2jjaLn5/
When viewing this website: http://myankle.co.uk/faq/
Whenever you scroll down or up, the image of the ankle changes. I know that you can make a div opaque and put an image behind it, but how is this effect being done? The image seems to move with the page.
This is achieved by setting a background as background-attachment: fixed. The effect is a basic implementation of parallax.
A good article to get you started is http://davidwalsh.name/parallax
An example class to apply this would be:
.parallax {
background-image: url('http://demoimage.com/image.jpg');
background-color: none !important;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; // For mobile this should be scroll to fix bugs with ios
overflow-y: hidden;
}
You add a background-image to body that is position: fixed; and then make html content on top of it transparent, so you can see the background-image. It's not moving with the page, that is an illusion.
That element uses a background-attachment CSS property to fix the image relative to the screen:
If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
elem {
background-attachment: fixed;
}
JSFiddle demo.
I'm working on a little extracurricular side project to bolster my html5/css3/jquery knowledge and I'm working with Parallax Scrolling but I can't seem to get the bottom image to scroll into view. It seems stuck behind the above it and no matter what I do I can't seem to pull it down into view.
There should be a giant dollar bill in the bottom black section where it says 'Abe is the money'
my url is : http://www.petegetscreative.com/abe/index.html
inspiration came from this tutorial: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
cheers
I think the dollar bill image is too small.
Looking at this Fiddle, when I increase the size of the dollar bill image to 200%, it becomes visible in the preview.
#known {
background: url(http://www.petegetscreative.com/abe/images/US-$5-SC-1953-Fr.1655.2.jpg) 50% 0 no-repeat fixed;
background-color: #000;
background-size: 200%;
height: 600px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
padding-top: 50px;
}
So what's probably happening is the height of the image is less than the difference in scroll positions. Try a larger (taller) image.
I believe that the problem could be the dollar image is less than section tag and the script you're running put the bg image with negative Y position. You can make a test making the image bigger than the 650px ( the section's height ).
I found this awesome .js called kinetic. I've been messing with the html, css for sometime now and am unable to set the container to full screen.
http://designobvio.us/v4design/demo.html
I've set all the parents to 100% height and tried a fullscreen jQuery. Unfortunately still no luck.
I've paired down the code as much as possible for readability. As you can see I've set the height to just 400px because it just goes crazy otherwise. If there's any thing else i can offer as support, please don't hesitate to ask.
As a second request would anyone have any idea how to set the border to inside. Or make sure that the width fits nicely with borders as is?
You can position your #wrapper div absolutely and just stretch it in all directions with the top, right, bottom, left properties like so:
CSS
#wrapper {
border: 5px solid #000000;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
}
With this method the borders play nicely with the positioning, but if you want to place them inside your container you can set the border style to inset instead of solid. Also, your control buttons will disappear so to make them pop in front of your image just set them to position:relative and give them a large z-index so they appear on top of everything else.
I'm currently coding a jQuery slideshow effect and need a bit of help.
I have all of the sideshow functionality working properly, my only problem is that I want to have my navigation arrows to be automatically positioned on either side of the slideshow box (960px, centered on the screen).
The end product should be something like Kriesi does here: http://www.kriesi.at/themes/upscale/
I've looked at his code, but can't quite figure it out. Any help would be appreciated!
Thanks!
I don't understand what you mean by "I can't quite figure out how to initially position them over the slideshow... If I do it in CSS, then it won't work on all screen resolutions."...?
If you position the arrows relative to the slideshow, there will be no issue. For example to place them at the top left and top right corners, include the following in your styles:
#slideshowcontainer{
width: 960px;
height: 400px;
position: relative;
}
#leftarrow{
position: absolute;
top: 0px;
left: -40px; /* position the arrow 40px to the left of the slideshow */
}
#rightarrow{
position: absolute;
top: 0px;
right: -40px; /* position the arrow 40px to the right of the slideshow */
}
Obviously you will need to adjust the values to suit, depending on the size of your arrows and where you want them etc
Arrows are situated in . That block is positioned as absolute with top value as 50% - 12px (margin-top: -12px);
Then, there is a list which contains images and other data and affect height of it's parent .
So, basically, in the code, when user clicks on an arrow, jQUery probabaly uses outerHeight() to get height of li elements in and then uses animate() to change height of the which affects height of the and that in it's turn smoothly changes position of the arrows.
Personally, i think it's a bad designing when arrows change it's position. Very annoying when you have to move mouse up and down every time you want to see the next slide.