I am trying to make a slider that is exactly a certain height, and needs 100% width. I have the width sorted, but when I have my height the slider adds something like 20px to the image. I know its not that big of a deal but it seems important for the project. All of the images I have are the exact height I want them to appear, so is there a way ether by changing something in the javascript or the addressing some id/class I haven't tried yet to change the height(and just the height)?
Thanks for your help.
Sorry but I am not allowed to release my code yet.
I didn't really fix it but I found a workaround. I took off the bottom 20 or so px from my images and found that re sizes appropriately this takes away some info but hopefully it will be ok, here's to hoping the boss will like it!
Related
I have a slideshow that I would like to fill a div completely.
Right now, if someone visits my site from a narrow browser viewport, the slideshow will only fill the width but not the entire height, therefore leaving space at the bottom of the div.
I would like the slideshow to proportionally scale to fit and cover the entire div, even if cropping from the sides is necessary. Does this make sense what I am asking?
Here's the example:
If you visit it right now from a wide or full screen browser window, the images probably fill the entire div. But if you narrow your window and refresh, you will see the bg color at the bottom of the div. Example:
http://mudchallenger.com/a-responsivef.html
How can I get this slideshow to fill the div?
Thank you!!
You can probably change your position:absolute for slideshow class
.slideshow {
position: absolute;
}
You're looking for a way to make your background image fit the back of the page. What Ed is looking for is the CSS/JS that you currently have, so we can better tell you what you should do differently.
This article gives great examples of different ways of achieving what you're asking for:
Perfect Full Page Backgrounds
And if you're interested in another way, here's a JS library that does it as well.
Backstretch
Without seeing your code, that's as good an answer as can be given.
I'm looking to do something like this. I'm using code from this answer here but the answer is never made entirely clear. They are suggested to use this jquery plugin here but I haven't been able to get it to work. I would go with the first example's code, only, I'm using Foundation 4 and the progress bars are something that come with it and are simpler to create. Also, the animation code provided in the second example is a lot cleaner-- overall, the first example is kinda messy, code heavy, and redundant.
My code is live here. I'm working with the skill bars in the about section. Before the user gets to this point, the animation should be paused. Once the user scrolls to this part of the page, the animation should play.
EDIT: Also, if you have any suggestions to stop the bars from "breaking" out of their containers when you scale the page (this site is meant to be responsive), I would appreciate that as well.
EDIT2: I've noticed as I've been playing with this that overflow: hidden; on .progress fixes my "breaking" issue.. however, when you resize the window, the sizes stay at what they initialized at. I know realistically users visiting my site likely won't be resizing the window a whole lot, but for employers looking at it, it'll kinda be lame if it doesn't work properly. I'm having this same issue with the grumpy-cat button overlays where it initializes at the first size and doesn't resize the overlay after that. Suggestions to this would be really, really appreciated!
If you know where your skill bar is and you know where your screen is at, you only need javascript. (no plugins or weird stuff)
To get the vertical position of your screen it's simple:
window.pageYOffset
To get the vertical position of your div, you just need
div.offsetTop
In your case, I would give an id to the div that wraps all the skill bars and set a loop (window.requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame ) to check if you're within reach of the div (say, if the difference between the window offset and the div is less than some amount).
If the answer is yes, trigger the animation.
The best way to do the animation is by a css transition. (if you need a good intro to css animations here's a video that i found helpful: http://www.youtube.com/watch?v=VoncDvOfUkk )
You can set css animations from javascript.
The idea is that you would set all your "meter" widths to 0. Then in javascript do something like:
div.style.transition = "width 1s";
div.style.width = someValue;
My recommendation for the value to include in the div is some constant fraction of the "progress" div, as in with % as opposed to em or px. This technique should work. (in case you still have issues, you have a window.requestAnimationFrame loop going on so you can recalculate the values at each timestep... although... beware performance).
The reason you were recommended jQuery is because when you're going to have to update all the divs in order to animate them, just writing $(this).find('.meter') and then addClass('.expand') is so much easier.
Hope this helps
I believe I have tried about everything and am failing miserably. I have been working with the lush responsive slider and have been having some major issues.
To start off I took the exact code from the demo and placed it in my header, but it had a strange padding on the bottom and right side so I removed it and thought it was working fine except for the height. It's so large that it takes over more than half the page.
When I resized the window and reloaded the page though the background of the slider sat in the top left corner much smaller than it needed to be. So the responsiveness only works if you reload at 100% screen? That doesn't make any scenes.
Also, the height is bothering me. I cannot get it to resize at all and when I did put static heights on the ul and li of 10em it did resize, but then the responsiveness went out the window.
I tried to post this in a js fiddle, but the plugin was so much code that it crashed it without running anything. If it would help I can post a dev site with this on it. As I said I used the exact html and css from the demo files I only took away a bit of padding to make it full width.
Any help would be much appreciated.
Ok, I have managed to work out a solution for the width issue. The problem seems to relate to the initial baseWidth, which defaults to 1140 pixels. Playing around with the
data-base-width="600" and data-base-height="600"
attributes in the first lush slider div tag may see you make some progress, but it looks like only fixed values are accepted, no percentages. I opted for this solution which seems to work, write the first div tag using document.write method and programmaticaly set the width the the clientWidth, as such :
<script>
document.write('<div id="lushDiv" class="lush-slider autoload shadow-a" data-slider-pause-on-hover="true" data-base-width="' + document.body.clientWidth + '" data-base-height="600" style="background: rgb(229, 229, 229)">');
</script>
My suggestion is not to use Javascript or JQuery. Some simple CSS and HTML will do.
Here is the fiddle: http://jsfiddle.net/jacobdubail/bKaxg/7/
You obviously don't need all of the CSS. Just change it to accompany your layout.
Change your width to percentages, like so:
min-width: 100%;
I would suggest changing the height to ems.
I saw a plugin possibly a slideshow plugin that slides in y-axis in a big image.
I dont know how to put it right but lets say visible image is 600px to 300px but the real image is 600px to 600px that plugin was scrolling the visible part so that all the content was seen in an interval.
I cant remember its name so ,i really need to find its name or something of an equivalent.
Thanks
I don't think you'd need a plugin for that. With a bit of work, you should be able to do something like that with jQuery's animate() method.
In the picture bellow I am using a container for every widget with a set width 80px, floated right and right margin 10px. However, I would like the container width to be the same as the actual width of the widget (button + the counter).
As far as I can think of it, it can't be done using CSS and unlikely using JavaScript (because of the same-origin policy). Though, is there a solution?
Even if same-origin wasn't an issue, if you managed to read the actual width from any element in the widget implementation, you couldn't rely on that, because the widget structure could change anytime, breaking your code.
So I guess as of now the answer is: no, there isn't a solution.
In the last period I always ended up showing widgets in a left aligned column, because they are really ugly aligned horizontally.
However I just found a jQuery plugin who looks a really promising workaround: http://sharrre.com/.