We Keep Coding

Why do my carousel images disappear (zero carousel height) when carousel slider is placed inside a div?

I am using this "Image Slider with Dots (pure JS)" codepen which works very well on the page by itself, but whenever I place it inside a div for example an "outer shell" the images in the slider disappear, but the dots stay visible. I am going to be using it on a page that has a content wrapper so that's how I ran into this issue of the carousel having zero height once it is placed inside another div.
Here is the HTML of the slider with my custom class "outer-shell" around it, which makes the slider have zero height:
<div class="outer-shell">
<!-- this slider can be used multiple times on the same page -->
<!-- don't change class names because slider will not work -->
<div class="slider">
<div class="imgs">
<!-- you can add divs with class img here and they will be
automatically added to slider -->
<!-- style="left: 0;" in case JS is disabled -->
<div class="img" style="left: 0;">
<span>Image 1</span>
</div>
<div class="img">
<span>Image 2</span>
</div>
<div class="img">
<span>Image 3</span>
</div>
<div class="img">
<span>Image 4</span>
</div>
</div>
<div class="dots"></div>
</div>
</div>
There's quite a bit of CSS and JS along with the HTML, I thought it would be easier to have it linked rather than pasting it here. "Image Slider with Dots (pure JS)"
I have spent a good amount of time using Chrome Developer Tools looking at the individual pieces of the slider (trying different overflow properties), and I think it comes down to the images have an absolute position, because when I deselect the css property the first image would show. I am not sure if the outer div is messing up the positioning of the page?

i think your .dots class have position: absolute; that is why it is shown inside your div without needed a height property and when you add height to outer-shell you can see images too.
<div class="outer-shell">
<div class="slider">
<div class="imgs">
<!-- you can add divs with class img here and they will be
automatically added to slider -->
<!-- style="left: 0;" in case JS is disabled -->
<div class="img" style="left: 0;">
<span>Image 1</span>
</div>
<div class="img">
<span>Image 2</span>
</div>
<div class="img">
<span>Image 3</span>
</div>
<div class="img">
<span>Image 4</span>
</div>
</div>
<div class="dots"></div>
</div>
</div>
.outer-shell{
height: 100%;
max-width:80%;
margin:0 auto;
}

Slick Carousel Permanently Off Screen

I'm attempting to create a slick carousel using the slick library http://kenwheeler.github.io/slick/
Slick is loading and it's applying classes, containers, buttons etc. properly but the slides are permanently off screen. The translate3d x value on the active slide is always set to be outside the window. When clicking the 'previous' button or dragging the slide I'm able to pull it into the screen but as soon as it reaches the 0,0,0 position it returns to being outside the screen immediately. Here is my attempt to get it to work
<div class="slick-slider homepage-slider">
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">
<p>Slide Summary</p>
</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide Title</h2>
<div class="slide-caption">Slide summary</div>
</div>
</div>
</a>
</div>
<div>
<a href="#">
<div class="slide-content"><img src="http://placehold.it/350x150">
<div class="slide-text">
<h2 class="slide-title">Slide title</h2>
<div class="slide-caption">
<p>Slide summary</p>
</div>
</div>
</div>
</a>
</div>
</div>
In my js file I'm using
jQuery(document).ready(function() {
jQuery('.homepage-slider').slick({
rtl: true
});
});
http://jsfiddle.net/q1qznouw/549/
note: dragging works on my webpage but not within the jsfiddle sandbox
I receive no javascript errors. Is there a reason why the slides are permanently at a translate3d position outside the browser window, and when dragging onto the screen returns outside the browser window when letting go?

The issue is with your rtl setting. This requires a bit of extra markup to work (from Slick docs):
Note: the HTML tag or the parent of the slider must have the attribute
"dir" set to "rtl".
If you change your slick parent div from this:
<div class="slick-slider homepage-slider">
To this:
<div class="slick-slider homepage-slider" dir="rtl">
That should sort it

Click to zoom a picture

I'm using thumbnail from bootstrap and I want to make that when I click on that thumbnail to appear the picture with original sizes and when I click somewhere that picture with original sizes to disappear.
I hope you can understand me what I'm trying to explain..
This is an example of my thumbnail code
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>

Maybe you can try the CSS:onfocus.
a.thumbnail:focus > img.small {
visibility: hidden;
}
a.thumbnail:focus > img.large{
visibility: visible;
}
Html:
<a href="#" class="thumbnail" tabindex="0">
<img class="small" src="..." alt="..."></img>
<img class="large" src="..." alt="..."></img>
</a>
Note that tabindex="0" is necessary here to make <a> focusable.

What you want here is a modal plugin. Bootstrap has one, but it is not suitable for this kind of use.
You can find one implementation and examples of how to use it here: http://fancyapps.com/fancybox/
This may be overkill for your solution, but there are many alternatives to it.

how can i cache image url in style?

I am trying to create a HTML page with multiple images. it's working fine with localhost but if I'm accessing through the internet, images are loading very slowly. How can i cache image url in style? Please check the below HTML code.
<div style="display: block;" class="collection slide-item" id="div1">
<div class="row collection type1">
<div class="title">
TRAVEL DESTINATION<div class="link">
<a class="seecollection" href="searchdb.aspx?Keyword=travel destination">See Gallery</a></div>
</div>
<div class="span12">
<a href="Search_Details.aspx?Id=1848760&key=0">
<div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1848760.jpg)">
</div>
</a>
</div>
<div class="span12">
<div class="row">
<div class="span4">
<a href="Search_Details.aspx?Id=1716438&key=0">
<div class="square thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1716438.jpg)">
</div>
</a>
</div>
<div class="span4">
<a href="Search_Details.aspx?Id=1838282&key=0">
<div class="square thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1838282.jpg)">
</div>
</a>
</div>
<div class="span4">
<a href="Search_Details.aspx?Id=1845302&key=0">
<div class="square thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1845302.jpg)">
</div>
</a>
</div>
</div>
<div class="row">
<div class="span6">
<a href="Search_Details.aspx?Id=1717213&key=0">
<div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1717213.jpg)">
</div>
</a>
</div>
<div class="span6">
<a href="Search_Details.aspx?Id=1842423&key=0">
<div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1842423.jpg)">
</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div style="display: none;" class="collection slide-item" id="div2">
<div class="collection slide-item">
<div class="row collection type4">
<div class="title">
HOLI<div class="link">
<a class="seecollection" href="searchdb.aspx?Keyword=holi">See Gallery</a></div>
</div>
<div class="span6">
<a href="Search_Details.aspx?Id=1918857&key=0">
<div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1918857.jpg)">
</div>
</a><a href="Search_Details.aspx?Id=1869141&key=0">
<div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1869141.jpg)">
</div>
</a>
</div>
<div class="span12">
<a href="Search_Details.aspx?Id=1888875&key=0">
<div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1888875.jpg)">
</div>
</a>
</div>
<div class="span6">
<a href="Search_Details.aspx?Id=1888899&key=0">
<div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1888899.jpg)">
</div>
</a><a href="Search_Details.aspx?Id=1918847&key=0">
<div class="landscape thumb with_landscape" style="background-image: url(https://d3jpl91pxevbkh.cloudfront.net/imagedb-com/image/upload/1918847.jpg)">
</div>
</a>
</div>
</div>
</div>
</div>

You don't have to take care about caching, browser do all this for you, and it's totally depends on browser, because some users may disable caching or clear cache periodically.

The images you are using are fairly large. Consider using smaller images to speed up the downloading process (depending on your design, of course, but I doubt you need a width of 3*900px).

You might want to move your css into an external stylesheet. Most modern browsers will then cache this for future reference. As it sits now you may get inconsistent caching results depending on which browser you are using and how it is parsing all of your inline css.

As it's a performance problem there are several ways to solve it.
First have a look at the images and at size and format of images in particular. The aim is use the most appropriated format and decrease the image size.
Are those images photos or graphics?
If it a photo try to play with jpeg compression level and find trade off between quality and size.
If it graphics try to convert into png format.
Have you check if images have metadata inside (like photo camera information, coordinates of place there the image was taken etc) as you can use online or standalone utility to remove meta information and as result decrease size and probably remove some personal information.
Depending on format, purpose and how often images will be changed you can combine them into sprite (one image that holds all images). You can use css to fetch needed image from the sprite. In this case you save on amount of calls to the server which is one of the aim than you do website performance optimization. Old browsers has a limitation on amount of parallel calls that they can do to the server ( 2 - 4 depending on browser) as result many you calls will be blocked until execution of previous will be finished.
If your images is small enough you can use Data URI protocol to embed images into html or css.
You can also use javascript to preload images before they will be needed , so browser will download them in the background and then time comes to show it they will be loaded from the cache in no time.

Centering a Floating div

I am stuck. Here is what I have going on, I have an AddThis sharing widget next to a main image on a webpage. The image changes sizes and I need the AddThis to change its placement with the image dynamically. I asked this in another question and through another forum I was able to get some help. Now AddThis and the image align properly and everything seems to be going in the right direction, however the image is no longer centered. I need this image to be centered on the page but I cannot figure out how to do this because I had to float the div containing the image and AddThis. Here is the HTML:
<div class="feature-container">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;"><img class="feature-image"
src="/Images/test.jpg" width="300px;" alt="test" /></div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300
/addthis_widget.js"></script>
</div>
</div>
</div>
Any ideas how to center this? I can use a straight CSS solution or a solution using jQuery and CSS. Please provide examples.
Here is a JSFIDDLE of the page.
Here is a page that has the most up to date code I am attempting.

try this:
var pos = $('.center').width() - $('img').width();
$('.center').css('margin-left', pos);
http://jsfiddle.net/WY9YX/4/

I am not sure the content of your 'im-center', since I add an inline style（text-align:center;） as below, tested it and works fine on ie 8.
<div class="img-center" style="text-align:center;">
<img src="test.jpg" alt="test" />
</div>
Define a fixed width for center div would be OK, if this not requries a fixed width, #Raminson's jquery solution is better. I really want to know if we can implement this with pure css
<div id="top" class="wrap_fullwidth">
<div class="center" style="width:400px;">
<div style="min-height:100px; min-width:100px; position:relative; float:left; ">
<div style="text-align:center;"><img src="http://www.ubhape2.com/Images/test.jpg" alt="test" /></div>
<div style="position:absolute; bottom:0px; right:-40px;">
<div class="addthis_toolbox addthis_floating_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
</div>
</div>
</div>
</div>​​​

Try to apply margin: 0 auto; CSS rule to the div.