Develop Reference

Css3 slider multiple images [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
How to create multi items slider with only HTML, CSS?
I want create slider like http://owlgraphic.com/owlcarousel or http://flickity.metafizzy.co/
Thera many variant for one visible item like jsfiddle link q4d9m/170/ but I want 3 items in viewport.(amount of items displayed at a time with the widest browser width)

It's possible by using simple label/radio input hack.
Just click on labels. With a bit more work you could make it into a fuly usable gallery.
label{
cursor: pointer;
}
input[type='radio']{
display: none;
}
.slider{
position: relative;
}
.slide{
position: absolute;
top: 0; left: 0;
width: 200px; height: 200px;
background: no-repeat 50% 50% / cover;
}
.slide_1{
background-image: url(http://placekitten.com/g/200/300)
}
.slide_2{
background-image: url(http://placekitten.com/g/200/400)
}
.slide_3{
background-image: url(http://placekitten.com/g/200/150)
}
input:checked + .slide{
left: 210px;
}
input:checked + .slide + input + .slide{
left: 420px;
}
<label for="slide_1">label_1</label>
<label for="slide_2">label_2</label>
<label for="slide_3">label_3</label>
<div class="slider">
<input id="slide_1" type="radio" name="slide-changer" checked/>
<div class="slide slide_1"></div>
<input id="slide_2" type="radio" name="slide-changer" />
<div class="slide slide_2"></div>
<input id="slide_3" type="radio" name="slide-changer" />
<div class="slide slide_3"></div>
</div>

You could try Snapper from Filament Group
A CSS Snap-Points based carousel (and lightweight polyfill)

Yes, it is possible. Here there are some links/tutorials:
http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails
http://benschwarz.github.io/gallery-css/

Link-1
Link-2
**or you can use a plugin nivo-slider with few lines of jquery code
To add the navigation for a slider you need js/jquery .

Display a giv above a div while page is loading [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Well I want to show a gif image while the page is loading so I can make any action on the original div,
Here is my code:
<?php
echo"<input type='submit' value='Rechercher' name='rechercher' id='submit' onclick='display_loader()'/>";
?>
<div id="loader">
</div>
my javascript function:
<script>
function display_loader()
{
document.getElementById('loader').innerHTML = "<img src='load.gif' alt='load'/><br/>Loading, please wait ...";
}
</script>
The current solution allows me to display the gif image, but I really want it to display it above the original div.

HTML:
<div id="loader" class="visible">
<img src='load.gif' alt='load'/><br/>Loading, please wait ...
</div>
CSS:
#loader {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 999;
}
#loader img {
// position of your image on the screen
}
.hidden { display: none; }
.visible{ display: block; }
JS:
var loader = document.getElementById('#loader');
function showLoader() {
loader.classList.remove('hidden');
loader.classList.add('visible');
}
function hideLoader() {
loader.classList.remove('visible');
loader.classList.add('hidden');
}
More about classList (and its support read here - https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)

I guess you want to display a GIF centered "above" the div content. For this, absolute positioning works a charm. You first need a container with position:relative.
CSS:
.container {
position: relative;
}
.loader {
position: absolute;
width: 32px; height: 32px; /* set these to your GIF size */
margin: -16px; /* half of width and height */
left: 50%;
top: 50%;
}
HTML:
<div class="container">
<img class="loader" src="loader.gif" />
<!-- div or other content can go here -->
</div>

How to make a Transition between pages [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Could somebody help me,take a look at this website,and tell me please,what function is used for the nice transition when you click on some of the menu bars,it goes smoothly to another page without loading whitescreen.
If you know,tell me, what it is or how can i do that,or even both :D please give me answer below.Thanks a lot.

If you give a look to the Sourcecode of the Page, you'll see that all the needen Pages are already loaded in the DOM. (One Page structure I guess, or maybe as Asychronoumus loading).
However all the Pages have their own DIV container, which are linked to the Navigation Bar.
On click on each Navigation Element, make a transition of the prefered DIV's.
You can either choose the fade effect (which is using on the Page you show us), or even some other cool effects with bouncing, or even if you know how to manupulate CSS with jQuery, then your own Animation / Transition too. Here's a link to the jQuery API fadeIn and fadeOut
.
I would do it like this:
$(function(){
// Setup your Variables first
var nav = $('.navigation ul li');
var all_pages = $('.pages .page');
var active = 'active';
var target, page;
// On Click do the stuff to get some transition
nav.on('click', function(){
// Get the Target
target = $(this).attr('data-target');
page = $('.page[data-page='+target+']');
// Hide all pages here (maybe it would be a better idea to target .page.active)
all_pages.fadeOut('slow').removeClass(active);
// FadeIn the target Page
page.fadeIn('slow').addClass(active);
});
// fallback to first page when the target is not set on page load
if(!target) nav.first().trigger('click');
});
.main { position:relative; width:100%; height:100%; font-family:'Verdana'; font-size:13px; }
.navigation { border:0px solid red; width:150px; position:absolute; left:0px; top:0px; bottom:0px; }
.navigation ul { list-style:none; width:auto; margin:0px; padding:0px; }
.navigation ul li { display:block; height:30px; border:0px solid green; line-height:30px; white-space:nowrap; cursor:pointer; padding:0px 20px; }
.pages { position:absolute; left:150px; right:0px; top:0px; bottom:0px; border:0px solid blue; }
.page { position:absolute; top:0px; left:0px; right:0px; bottom:0px; display:none; min-height:500px; }
.page.active { }
.page:nth-child(1),
.navigation ul li:nth-child(1) { background:lightgreen; }
.page:nth-child(2),
.navigation ul li:nth-child(2) { background:maroon; }
.page:nth-child(3),
.navigation ul li:nth-child(3) { background:wheat; }
.page:nth-child(4),
.navigation ul li:nth-child(4) { background:cyan; }
.page:nth-child(5),
.navigation ul li:nth-child(5) { background:salmon; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class='main'>
<div class='navigation'>
<ul>
<li data-target='1'>First Link</li>
<li data-target='2'>Second Page</li>
<li data-target='who'>Who I am</li>
<li data-target='location'>Location</li>
<li data-target='5'>Oter Stuff</li>
</ul>
</div>
<div class='pages'>
<div class='page' data-page='1'> Here is the first page ... </div>
<div class='page' data-page='2'> here is the seocnd one</div>
<div class='page' data-page='who'> Who I am?</div>
<div class='page' data-page='location'> Location </div>
<div class='page' data-page='5'> Oter Stuff </div>
</div>
</div>
I hope you get the Idea behind the Code to get the result you want :)
Btw, I made this quickly HTML Markup to get a Similar effect for the transitions.
You'll need to add some more Animation Stuff for the Navigation to get the "on mouse over slide the names up etc" stuff - propably easy done with :hover syntax of CSS.
Hope this helps, ps. this is my first Post, I may have some mistakes in there.
And yes, there should be a better HTML Buildup as my Snippet does for now.
regards
Gkiokan

CSS Footer position [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
i'm trying to positionate a footer (#footer) like the following:
It has to have a
margin-top: 50px;
to the div above (#content) BUT if the div above is in the display (eg in the middle) the footer should be at least
bottom:-100px;
AND if the div above (#content) is also out of the display (lower that bottom -100px) the footer should be under that div.
Is that possible? (if theres no other way with jq/js)
Thanks in advance for your help
JSFIDDLE EXAMPLE:
http://jsfiddle.net/nU7Vh/1/
If the height of #content is for eg 300 everything is ok, but if #content (which can have variable sizes, cause its a list which is queryed) is bigger that the display the #footer isnt under the #content anymore

1. Remove the following 2 lines from #footer:
position:absolute;
bottom:-100px;
2. Add a container div to #content, which will (unlike #content, which may have any height as you stated) have a min-height of 100% of the screen (you can of course change 100% to a different percentage if you like).
<div id="meta_content">
<div id="content">
</div>
</div>
3. Add this CSS, which makes the min-height magic happen:
html, body {
height:100%;
}
#meta_content { min-height:100%; }
jsFiddle demo.

You could use a wrapper element (with min-height:100%), and not use absolute positioning.
HTML
<div class="wrap">
<div id="content"></div>
</div>
<div id="footer"></div>
CSS
html,body{height:100%;}
.wrap{min-height:100%;}
Demo at http://jsfiddle.net/gaby/rXZkx/

You must configure a surrounding element (e.g. HTML) to fill at minimum the height of the window and allow an inner one (e.g. BODY) to overflow when higher:
CSS
html, body {
margin: 0;
padding: 0;
}
html {
height: 100%; /* fill up window height and let body overflow if higher */
}
body {
position: relative;
min-height: 100%;
padding-bottom: 50px; /* space for footer */
box-sizing: border-box; /* padding should not be added to height, but included in height */
}
#content {
height:200px;
width:500px;
background: blue;
opacity: 0.5;
}
#footer {
height: 18px;
width: 500px;
position:absolute;
bottom: 0px;
background: red;
opacity: 0.5;
}
http://jsfiddle.net/x4TPf/

CSS3 positioning and misunderstanding usage [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm having a hard time on this one: HERE!
As you can see in my JSFIDDLE as you hover on the image you can see scrolling caption. My problem now, how can I show the scrolling caption when the image is CLICKED? and likewise when i clicked the other image when it is inactive the scrolling caption will hide.
THANK YOU IN ADVANCE!!

This is possible without the use of Javascript, but you need to rewrite your HTML a bit.
What you basically do, is to create a hidden checkbox or radiobutton, which overlays the image. Then you can use CSS to check for its :checked state, and hide/show content accordingly.
HTML
<figure class="item">
<label for="toggle" class="item__toggle"></label>
<input id="toggle" type="radio" name="item__togglers" class="item__check">
<img src="http://lorempixel.com/200/200/technics" alt="">
<figcaption class="item__caption">Hello world</figcaption>
</figure>
CSS
.item {
display: inline-block;
position: relative;
}
.item__caption {
background: #fff;
opacity: 0;
position: absolute;
bottom: 15px;
left: 0;
}
/* TOGGLE MECHANISM */
.item__toggle {
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.item__check {
display: none;
}
/* THIS IS WHERE THE MAGIC HAPPENS */
.item:hover .item__caption,
.item__check:checked ~ .item__caption {
opacity: 1;
}
JS FIDDLE
I created a very basic jsfiddle to demonstrate the functionality: http://jsfiddle.net/TheNix/6vUVP/1/

Option 1:
http://jsfiddle.net/m3fU3/4/
Check now..
i think this is what you wanted?
Just replace the hover in the css with active,for active is on layman's terms ,the click picker on css.
Example:
.cap-left:active figcaption{
left: 0;
}
Option 2:
You can use javascript onclick functionality:
HTML:
<img src="image.png" id="image1" onclick="zoomImage()"/></a>
JS:
function zoomImage(){
e.preventDefault();
document.getElementById('image1').zoom=2;
}
Check here