I am using jssor`s simple fade slider and It is working fine but there is an issue with height and width ..
Actually I am using the width as percentage and the problem cause by it is that as I increases width height also increases similarly for vice versa..
What I want is height of the slider remain fixed but the width changes accordingly ..
The most I've been able to do is get the slider to scale the width before initializing, essentially working like 100% width and fixed height.
The only problem is it doesn't scale if the window resizes.
Either way, for anyone interested, just update the slider container divs with JS right before you initialize Jssor:
<!-- Jssor Trigger -->
<script>
var parentWidth = document.getElementById('slider').offsetWidth;
document.getElementById('slider1_container').style.width=parentWidth+'px';
document.getElementById('slider1_slides').style.width=parentWidth+'px';
jssor_slider1_starter('slider1_container');
</script>
If your page has a vertical scrollbar, you might have to call this code after the ending tag of the div you're getting your width value from, or simply just before closing the body tag.
Related
I have a div that slides up from the bottom of my pagewhen a button is clicked. i do this using a css transition and changing the css "top" attribute of the div. works fine if the div size never changes. So for example if the div is 400px high, i just move it up 400px and it's now in position. cool.
BUT... what if the div has dynamically generated content and will be a different height every time? how can i figure out how much to move the div up in order to be 100% showing?
so in pseudo code i want something like
function movemydiv() {
var howMuchToMoveIt = ??? (somehow getting the dynamic containers height)
document.getelementbyId("mydiv").style.top = bottomOfScreen - howMuchToMoveIt
any tips on most straightforward way to do this??
You can use either clientHeight or offsetHeight to measure the height of your div.
Both clientHeight and offSetHeight include padding , but offsetHeight will also take into account borders and horizontal scrollbars (if rendered) - see MDN link.
So your js would be something like:
var howMuchToMoveIt = document.getElementById('mydiv').clientHeight;
The var will then contain the height of your element.
Hope this helps
I wish for certain sections of a page to fill out at least 100% of the viewport height regardless of the screen size. I also want the content and background of sections to scroll with a parallax effect.
I have jQuery on the page and use the following to resize the section .parallax to full viewport height:
var imageFit = function() {
windowHeight = $(window).height();
$('.parallax').css('min-height', windowHeight);
};
$(document).ready(imageFit);
$(window).resize(imageFit);
I'm aware of the units vh and vw but I don't want to use them because of poor browser support. (By the way, I'm really bad at javascript so please help me improve this if possible).
Here's a pen with the 100% viewport height section: http://codepen.io/Mest/full/GpycL (If unfamiliar with Codepen; click Edit in the bottom left corner to edit the code).
This works fine, however I'm not how to implement the parallax effect. I've tried using Skrollr to modify CSS properties in order to create the parallax effect. However since my section gets it's full viewport height height-value from the script above it seems like Skrollr doesn't consider it to have any height and thus makes the parallax "transition" to occur instantly as I scroll. It works great without the resizing script above.
Sadly I'm unable to set up an example with Skrollr for you, but I confirmed this is what happens by giving my section a height value of X px in my CSS and then Skrollr functioned as it should while scrolling for the first X px.
Thus, my question is the following:
How can I make Skrollr recognize the height set by the script above?
or,
Is there a better/easier way to create the effect I want? Either through another scrolling animation library or with a different approach to fill out the viewport height?
Don't forget to call refresh() at the end of imageFit.
If you include https://gist.github.com/Prinzhorn/5796546 as well, it would be as simple as
var imageFit = function() {
windowHeight = $(window).height();
$('.parallax').css('min-height', windowHeight).refresh();
};
http://jsfiddle.net/95EtZ/1/
There is the problem half solved in action.
Right now it's set up with the containers width hardcoded in the javascript.
I need the js to grab the width of the container div - resize it with window scroll. but only resize it 1/3 of the #container divs width.
The way it's set up currently is, you have to set the script manually to the width of the div in the css. I want to be able to change the width of the div in the css and have the js grab it and only allow the user to have it resize 1/3 of it's width as they reach the very bottom of the window.
I posted answer here in code:
http://jsfiddle.net/95EtZ/11/
Width is taken from node and resize is going from 100% to 33% at bottom.
I have a div set in pixels (divPix) and a div set in percentage (divPer). The height of divPer will vary with it's content. I want the browser to re-size the height of divPix to match the height of divPer. How would I go about that? Thank you.
Probably could get away with a quick one off bit of jQuery to get it done.
HTML
<div id="divPix"></div>
<div id="divPer"></div>
JavaScript
$(function() {
$('#divPix').height( $('#divPer').height() );
});
I have this jsfiddle http://jsfiddle.net/r3pek/wxffL/ where i'm trying to understand why does the scroll goes beyond de window size :/
If I remove the "height: 100%" from the rightpane class, I don't have a scroll; if I add it, I have a scroll but that goes beyond the window. Any way I can limit the scroll to the window?!
Thanks in advance!
EDIT:
Just a quick update...
I updated the fiddle to reflect the actual problem. I have an image that takes space as a header and it looks like that image size isn't accounted for. (I really suck at CSS :P )
You have to define a height for an element to scroll. That's why the scrollbar disappears when you remove the height. You're also adding padding to the div along with the 100% height. That adds to the element's height so it ends up being taller than the window. Reduce the height to something less than 100%, maybe 90% and play with it. That will allow you to keep the scrollbar and keep it inside the window. I have a fiddle set up for you here.
The total height (or "outer height") of an element equals inner height (which you can specify in css) + padding + border.
If you use height: 100% but then also add padding and/or borders then the total height will be bigger than 100%. There's a css property called box-sizing that can help you but it's not cross-broswer (you guessed it, IE<9).
If you drop the borders and paddings, it'll be fixed. But then to have borders and padding on outer elements... you'll need to get creative (or come back here with a specific question)
OK, I solved the problem, just not sure if it was the "right way". Anyway, here's how I did it:
added this right before the tag:
<script>
window.onload=setRightPaneHeight;
</script>
Then, I created the function that will calculate the right size for the "rightpane":
function setRightPaneHeight(){
var pic = document.getElementById("headerPic");
var pic_h = pic.offsetHeight;
var total_h = window.innerHeight;
var right_pane = document.getElementById("rightpane")
$(".rightpane").height(total_h - pic_h - 30);
}
That being done, now after the page loads, the right height is calculated for the rightpane DIV. And it works :)
Thanks for all the answers as they made me understand what the problem was!