I have a thumbnail gallery, a div that show only 3 thumbnails at once, user can mouse drag left or right to show more.
current fiddle: http://jsfiddle.net/31ua6jL3/2/
What i want to achieve:
-All the 6 box to align in one line, but only show the left 3 first. If outside the div, the right 3 will be hidden
-When i drag box out of the div, the box will be hidden
<div class="container">
<div class="image_holder">
<div class="drag">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</div>
</div>
I have some trouble with this, and i don't want to use a plugin. Can somebody guide me on the right track?
i'm trying to do something like http://www.pikachoose.com/, u can see that it contain 5 thumbnails, what i want to do is more than 10 thumbnails in 1 line but only 5 visible, and user can mouse drag to slide to view through the other thumbnails.
First what you need to do is add the following style inside .image_holder
overflow : hidden;
What overflow decides is when the contents inside a box overflows it, how should it react. Using hidden we've decided to make the contents hide inside the box.
Problem in your code :
Now as you've specified the width of .image_holder to 300px when it's inner elements will have cumulative width more then it's own width they will break down to bottom left.
Solution :
So to make all these elements get hidden when they overflow the .image_holder you have to keep another div that holds all the elements with a high range of width. Fortunately you have that div which is .drag. Just give it a bigger width,
.drag{
width : 1000px;
}
Now this .drag div will flow inside the .image_holder and as it's width is a big value all elements will be in one row and they also will flow inside .image_holder div as you expected.
Here's a working fiddle : jsFiddle
References :
CSS overflow Property
Related
I have 2 resizable divs in a container. One resizable div is contained in the second one.
<div id="container">
<div id="div1" class="droppable resizable1">
<div id="div2" class="droppable resizable2"></div>
</div>
</div>
Actually, I have two problems with these divs and I think they are linked.
First, if I resize div1, div2 and again div1 to the bottom, div2 is moving out of the container.
The second problems happens in the same way. The div2 is going up with the same tests as in the first problem, that's why I think they are linked.
I have tried to change my CSS but I haven't found a solution. At start I thought it comes from the minHeight of JQueryUI so I checked the documentation but my resizable function looks right.
I have made a https://jsfiddle.net/Spydaxx/4ez2xtan/85/ so you can see what I am trying to do.
I want the two divs to be lock at the bottom and resizable upwards. Actually, I have some troubles with the position when resizing but the resize itself looks well.
Thank you for your help and your time.
so if I understand correctly you want to be able to move either div freely within the height restrictions you set. unless you need the divs nested, which I'm not sure if that would work with what you're trying to do, this will work
<div id="container">
<div id="div1" class="droppable resizable1"></div>
<div id="div2" class="droppable resizable2"></div>
</div>
$(".resizable1").resizable({
handles: 'n',
containment:'#container',
minHeight: 100
});
$(".resizable2").resizable({
handles: 'n',
containment: '#container',
minHeight: 50
})
I didn't change any css so I didn't include the code here. just don't nest the divs and change the container for div2
First of all, thank you so much for checking my question.
I'm working on a web site and need to change images vertically in a selected div like a parallax effect. There are 3 images and need to change them.
There are 3 images in a div. Check the following screenshots.
This is the image 1. All these 3 images are half width of the screen.
And this is image 2.
Like this, there is another image 3. The yellow color content in the right side is not changing. Now i added just a simple scroll bar to scroll.
I need to add either parallax effect on these images to scroll vertically or quickly change images on mouse scroll.
Example for parallax effect I need to add : http://pixelcog.github.io/parallax.js/
Or I want to apply this effect : https://codepen.io/RenanB/pen/GZeBNg
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax">
<h2>Parallax Speed -1</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1067" data-speed="1" class="img-parallax">
<h2>Parallax Speed 1</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?gravity=center" data-speed="-0.25" class="img-parallax">
<h2>Parallax Speed -0.25</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?image=1080" data-speed="0.25" class="img-parallax">
<h2>Parallax Speed 0.25</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?random" data-speed="-0.75" class="img-parallax">
<h2>Parallax Speed -0.75</h2>
</div>
<div class="block">
<img src="https://unsplash.it/1920/1920/?blur" data-speed="0.75" class="img-parallax">
<h2>Parallax Speed 0.75</h2>
</div>
But only issue is, when I apply the same code to my images, this effect is activating to my full site.
Most importantly ,no matter from where user scrolling the page, I need to scroll to these 3 images, show all 3 and then scroll down to next section.
I added above parallax code, but it's applying to the whole site and not working.
What is the best way to apply above mentioned 2 methods to my web site ?
Well, as soon as you played with code, you need to see that those scripts and effects builded inside a wrapper, so the main thing in parallax effect is to have a nicely 100% width and height so you can see the delay and responsiveness in your website, what I can tell you do is the following :
Wrap your images inside a div with name like ( image_wrapper ).
Add a class for every image parent div like ( image_section ).
specify the 100% width and height for image_sections.
Add a height for the image_wrapper as this :
.image_wrapper{ height:calc( 100% * 4 ); }
100% for the full height, 4 for the number of images to have in parallax
I am using this slimscroll library to display a better looking scroll bar for some divs on my page. I noticed that if I set the height of my scrollbar class to a fixed value (i.e. '500px', '80vh' etc.) then if the content does not overflow, the scrollbar will not be present and if it does, then it will appear. It works great.
However this solution doesn't work well because I need the div that encompasses the scrollbar to take up 100% of the parent div. However when I do that, the scrollbar will appear even if the content does not overflow the container.
Does anyone know a solution where I can set the height of the scrollbar to be 100% and have it behave so that it only appear when content overflows the parent container?
HTML
<div class="s12 m12 l12 row-90 m-b-0 rail-row">
<div class="card-scroll m-r-10">
<ul class="top-list">
///adds a series of divs based on data from back end
{{#each ins in selectedInstruction}}
<li>{{> Print_job printJobArgs ins true true}}</li>
{{/each}}
</ul>
</div>
</div>
JS
$('.card-scroll').slimScroll({
size: '8px',
height: '100%',
});
$(".slimScrollBar").hide()
When the page gets loaded, slimscroll encompasses the div with the class 'card-scroll' in a div and adds html to make its scrollbar appear.
I have two divs that contain two other divs each. One containing DIV's display is set to none. I have a button that toggles the containing DIVs so I can alternately hide/show the containing div and thus the two divs inside. The inside DIVs are set the 49% width, floated left/right. Problem I have is the fist time the visible DIV is hidden and the hidden one displayed the inside two divs are way too wide. If I resize the width of the browser just a tiny bit with my mouse they are the desired size and any time I toggle the visibility from here on out all is fine. If I reload the page it is wrong on the first toggle. Works the same in IE 10 and Chrome so don't think a browser issue.
The inner two divs both contain high charts that are generated and rendered to the inner divs I want them to be side by side and almost (99%) the width of my page.
Here is snipped of my DIVs to be hidden and shown that contain the inner DIVs with highcharts
<div id="highChartsNG" style="width:99%;display:none;">
<div id="FillRateHigh" style="border:2px solid black;width:49%;float:left;"></div>
<div id="WaitTimeHigh"style="border:2px solid black;width:49%;float:right;"></div>
</div>
<div id="LowChartsPEAK" style="width:99%">
<div id="FillRateLow" style="border:2px solid black;width:49%;float:left;"></div>
<div id="WaitTimeLow"style="border:2px solid black;width:49%;float:right;" ></div>
</div>
This is a snippet of the javascript function I call on a button click to toggle on/off on the display of two containing DIVs
document.getElementById("highChartsNG").style.display = "none";
document.getElementById("LowChartsPEAK").style.display = "block";
Fiddle showing problem, see comment of mine below on how to reproduce http://jsfiddle.net/rplace/UTTz4/1/
Okay, after hours of searching I finally found the problem (I think). I was determined to find the solution =).
The problem is multiple-fold.
The first problem was the display:none; property on the second chartcontainer. For some reason the widths calculated for the charts and their containers were incorrect for the hidden div. So I removed the property from the HTML, and instead hid it dynamically with document.getElementById("LowChartsPEAK").style.display = "none"; in the JS right after the chart rendering functions. If you do this, your SVG's will fit your containers already, although the last one has a slight shift.
Apparently HighChart doesn't like percentage-based parent containers. When you go to your updated fiddle , run the fiddle with both:
<div id="wrapper" style="width: 800px;">
<div id="wrapper" style="width: 100%;">
Open the console and check the results (container name - SVG width - container width). When the wrapper is given a pixel width, all container widths are equal (as it should be). Now check the wrapper with percentage width: your last SVG will be about 6 to 20 pixels smaller. The only solution I have found for eliminating that small shift in the last container, is that somewhere a top container must have a pixel-width.
EDIT: pt's and em's also work. It's only % that causes problems
If you are hiding DIV, you should be aware that browser won't calculate %-based widths with display:none. Then if browser won;t calculate DIV, then also Highcharts are not able to do it ;)
Check this FAQ - when showing chart update his size or call reflow().
I have four divs which are animated using size, height and positions; that means, these divs change their height, width, left and top.
FOCUS:
I want to stop that animation when any of these two divs become overlapped.
HTML:
<div id="container_1">
<div id="anim_1"></div>
<div id="anim_2"></div>
</div>
<div id="container_2">
<div id="anim_3"></div>
<div id="anim_3"></div>
</div>
If any two anim divs of any container (i.e. container_1 OR container_2) bocome overlapped then I have to stop the animation of both two container divs.
Now, how can I trace out this overlapping using JQUERY or JAVASCRIPT?
Please suggest me.
Thanks in advance.
Take a look to the answer in this other question:
Efficiently Detect When Sibling Elements Overlap