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 .
Related
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 3 years ago.
Improve this question
Need to create 2 circles based on the input the circle size should get increase or decrease dynamically using javascript/css
Can any one help me out on this.?!
TIA
Here's something to get you started. It uses a custom property and adjusts as you type. I through in a CSS transition to make it look cooler when growing/shrinking.
const input = document.querySelector('.circle-size');
const circles = document.querySelectorAll('.circle');
input.addEventListener('input', handleInput);
function handleInput() {
circles.forEach(circle => {
circle.style.setProperty('--circle-size', input.value + 'px');
})
}
.circle {
margin-right: 1em;
border-radius: 50%;
width: var(--circle-size, 20px);
height: var(--circle-size, 20px);
background-color: green;
display: inline-block;
transition: 0.5s width, 0.5s height;
}
[type=number] {
display: block;
}
<div class="circle"></div>
<div class="circle"></div>
<input aria-label="set circle size" type="number" class="circle-size" value="20">
jsFiddle
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>
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 7 years ago.
Improve this question
I have to show vertical banner for a bootstrap page with the contianer div which i don't want to, as it breaks the design. I thought of having vertically aligned banner to either left of right of actual content and for a specific with let us say minimum 900px width,
I have designed them likes this but want to add functionality similar to one show in this example
I want to show vertical banner on either side with hide & show button
Updated Fiddle: http://fiddle.jshell.net/6w7dvbzd/4/
If you want to have same effect on the sample page, try this one.
$(function () {
$( "#left-ad" ).animate({ "left": "0" }, "slow" );
});
#left-ad {
position:absolute;
left:-99px;
position: fixed;
width:100px;
height:100%;
background-color:red;
margin:auto 0;
}
#sidebar {
margin:auto 0;
background-color:green;
height:200px;
}
.right-ad {
right:0;
position: fixed;
position:absolute;
width:100px;
height:300px;
background-color:red;
}
.wrapper {
width:200px;
margin:0 auto;
background-color:blue;
height:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left-ad">
<div id="sidebar"> <img src="sidewall.png" alt="LEft Banner" >
</div>
</div>
<div class="right-ad"> <img src="wad.jpg" alt="Right Banner" style="border-width: 0px" >
</div>
<div class=wrapper>//center body part</div>
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/
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