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
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 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 .
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 6 years ago.
Improve this question
I want so that when a user scrolls down the header changes its background and the header stays at the top of the window. I don't know if this needs javascript or you can do it in css.
The example of what i want it too look like is at https://anvilnode.com/
you can use this kind of code
html:
<nav id="header_nav">nav here</nav>
css:
body {
height: 1000px;
width: 100%;
background-color: #F0F0F0;
}
#header_nav {
width: 100%;
height: 100px;
background-color: #666;
position: fixed;
top: 0;
left: 0;
}
js
$(function(){
$('#header_nav').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0) {
if($('#header_nav').data('size') == 'big') {
$('#header_nav').data('size','small');
$('#header_nav').stop().animate({
height:'40px'
},600);
}
}
else {
if($('#header_nav').data('size') == 'small') {
$('#header_nav').data('size','big');
$('#header_nav').stop().animate({
height:'100px'
},600);
}
}});
yes, you need Javascript and CSS
Javascript to detect your scroll position and add addtional CSS class to the header component.
Using the addional CSS classname add styles to change the background color.
In the same example which you have given, they are adding additional css class 'top-nav-collapse' to the 'nav' component on scroll. You can check this using developer tool.
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 does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I have the following scripts which add a class to an element on hover.
I am a bit of a newbie when it comes to JS so as you can see from the code below I have used the same script for each individual ID. I am sure there must be a way to have on script that does the same job.
The reason I have written a separate script for each is because my original script would add the ".slidein" class to each "#project-box" rather than just the one that was hovered over.
The Script's
<script>
$("#project-box-one")
.mouseenter(function(){
$(".project-overlay-one").addClass("slidein");
})
.mouseleave(function(){
$(".project-overlay-one").removeClass("slidein");
});
$("#project-box-two")
.mouseenter(function(){
$(".project-overlay-two").addClass("slidein");
})
.mouseleave(function(){
$(".project-overlay-two").removeClass("slidein");
});
$("#project-box-three")
.mouseenter(function(){
$(".project-overlay-three").addClass("slidein");
})
.mouseleave(function(){
$(".project-overlay-three").removeClass("slidein");
});
</script>
An example of the HTML for a "project-box"
<div id="project-box-one">
<div class="project-overlay-one">
<h1>Chy an Albany Hotel</h1>
view project
</div>
<a href="#">
<img src="img/portfolio/thumbs/chy-an-albany.jpg" width="300" height="310">
</a>
</div>
And the CSS"
.project-box {
width: 33.3333%;
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
float: left;
height: 310px;
overflow: hidden;
}
#project-box-one, #project-box-two, #project-box-three {
width: 33.3333%;
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
float: left;
height: 310px;
overflow: hidden;
}
.project-overlay.slidein,
.project-overlay-one.slidein,
.project-overlay-two.slidein,
.project-overlay-three.slidein {
transition: 600ms ease-in;
top: -340px;
}
As you don't really need ids here :
use a .project-box class instead of #project-box-xxx ids
use a .project-overlay class instead of #project-overlay-xxx ids
generalize your JS/CSS using these classes instead of multiple ids
(bonus) use jQuery hover() function instead of mouseenter() and mouseleave()
<script>
/* Thanks to cookie_monster for the toggleClass shortcut */
$('.project-box') // for each .project-box
.hover( // on each mouseenter AND mouseleave event
function(e){ // run this anonymous function
$(this).toggleClass( // get hovered element, and add/remove a class
'slidein', // this class is .slidein
e.type === "mouseenter" // if event type is mouseenter we add the class, else, we remove it
);
}
);
</script>
<div class="project-box">
<div class="project-overlay">
<h1>Chy an Albany Hotel</h1>
view project
</div>
<a href="#">
<img src="img/portfolio/thumbs/chy-an-albany.jpg" width="300" height="310">
</a>
</div>
.project-box {
width: 33.3333%;
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
float: left;
height: 310px;
overflow: hidden;
}
.project-overlay.slidein {
transition: 600ms ease-in;
top: -340px;
}
HTML
<!-- add class="project-box" to each div -->
<div id="project-box-one" class="project-box">
<div class="project-overlay-one">
<h1>Chy an Albany Hotel</h1>
view project
</div>
<a href="#">
<img src="img/portfolio/thumbs/chy-an-albany.jpg" width="300" height="310">
</a>
</div>
jQuery
// use the class selector, and add and remove the classes on the specific instance of that class
$(".project-box").mouseenter(function(){
// $(this).addClass("slidein");
// just noticed this line is wrong, an alternative to #zessx's would be the following:
$(this).children('.project-overlay').addClass('slidein');
})
.mouseleave(function(){
// $(this).removeClass("slidein");
// just noticed this line is wrong, an alternative to #zessx's would be the following:
$(this).children('.project-overlay').removeClass('slidein');
});
CSS
/* #project-box-one, #project-box-two, #project-box-three { */
.project-box {
TLDR: use classes instead of id's
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/