Responsive height of slider div - javascript

I have a problem with swiper slider and I need your help.
Here is my code: http://jsfiddle.net/2Xt7H/4
I want the comm_image_div div which is the slider div to take the height of the image and not to be fixed (200px) as it is in my example.
I prefer to do this with css, but if this isn't possible then the alternative is javascript.

Try using display: inline-block; and delete the height: 200px; in #comm_image_div
Using display: inline-block; will change the div's height and width(if they are not specified) according to its content.
UPDATE:
I used height: 100%; in #comm_image_div and img.comm_image_big
http://jsfiddle.net/2Xt7H/7/

Related

Image Centering Issue Inside Parent Div Element

I used JavaScript to create a slideshow on the homepage of my site. The problem I'm having is that the image will not center to the page, despite my best efforts. I can get it centered if I set the image child element like so:
#slider img {
left: 218px;}
but that doesn't center for different window sizes. I'm using fairly large images, but they can always be resized later. I used placeholders for the fiddle. How can you fix this?
Fiddle
U can easily center image by set up:
#slider img {
display: block;
margin: 0 auto;
width: 100%; // or your own width
}
Your images inside #slider have a position: absolute. This negates the scope of the container and the image is no longer relatively positioned inside the container div#slider.
Use margin: auto and display: block without absolute positioning.
Example: https://jsfiddle.net/sukritchhabra/smndp65m/
You could also do margin:auto.
Try
<div align='center'>Hello world</div>

jQuery jScrollPane not working with div percentage

I am working with jScrollPane to create a custom scrollbar. I have a bunch of div's that lineup horizontally. For some reason, when I use percentage instead of a fixed width, the scrollbar does not show up, but if I change it to a fixed width it will work.
Percentage
.productsimilarproduct {
width: 30%;
margin-right: 1%;
}
Fixed Width
.productsimilarproduct {
width: 288px;
margin-right: 10px;
}
This issue isn't listed in the known bugs for jScrollPane, so I thought I'd post this up on StackOverflow to see if anyone knew of a solution.
Is there anyway for me to set the width of my div's to a percentage and still use jScrollPane?

css flexbox only works on resize when using ajax

I am using a CSS Flexbox to stack three divs on top each other.
The middle div must grow or shrink depending on the size available.
The top and bottom div will take up the size they have.
When testing this in a fiddle it will work.
However, I am loading the data in the page using ajax and fullPage.js slider.
the result is that the middle div does not fill up the remaining space.
When I resize the window, it will trigger a change in size and everything is well.
So I have been trying to create a work around, thusfar without any success.
What I have done so far:
try to trigger a window resize $(window).trigger('resize');
try to change the CSS height for the flexible box
try to reload data after 500 ms.
setting the flexbox height to a certain height and then setting it to auto again.
and I forgot all the other things I've done so far trying to do some CSS tricks.
Here the CSS / HTML
CSS:
#wrapper {
display: flex;
flex-direction: column;
position: relative;
}
.pageInfo {
flex: 0 0 auto;
}
.pageData {
flex: 1 1 auto;
margin-top: 10px;
}
.sliderBtnBar {
flex: 0 0 auto;
height: 40px;
position: relative;
}
HTML:
<div id="wrapper">
<div class="pageInfo">some text</div>
<div class="pageData">
<div>data</div>
</div>
<div class="sliderBtnBar">btns</div>
</div>
In the wrapper I will load the pageInfo, the pageData and the sliderBtnBar divs on a later time. At that point the Flexbox doesn't work. Loading this when the page loads it will work.
So like I said, I can't find a work around.
Have you seen this before or know how to solve this?
Any idea would be helpfull.
Thanks in advance!

Element height increased after .animate() function

I created the following accordion slider:
JSFiddle demo
After I click on one of the list items, it triggers the .animate() function. My problem is, that after animation start rendering, the browser scroll-bar appears on the side for just a second. This is because the height of the list items increased a bit, but I can't figure it out why is it doing this.
You need to set overflow: hidden on the #vaccordion element, and also height. In this case I set the height in percent, so you need also define a height to the parents of #vaccordion too (html, body).
html, body{
width: 100%;
height: 100%;
}
#vaccordion {
list-style: none;
width: 100%;
height: 100%;
overflow: hidden;
}
FIDDLE: https://jsfiddle.net/8a5dsaqx/2/

How to hide scrollbars using jquery and scrolling divs without disabling rest of page?

See my problem here:
http://jsfiddle.net/nM6DF/
I want to have divs scroll on and off the screen using jquery, but I do not want any horizontal scrollbars. The only way I know how to do that is to make a container and do overflow:hidden. Here is my container CSS
#container {
top:0px;
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
I had to make the width and height 100% so that no matter what I scrolled across it would not be cut off.
When I make this container then everything behind it becomes unclickable and pretty much disabled. I want the page behind the scrolling divs to still behave normally where I can click and interact with it. How can I achieve that?

Categories

Resources