I need to have scrolling images controlled by two arrows (scroll up and scroll down). I have a CSS "scrollUp" animation written as well as a "scrollDown" animation. How can I have these animations occur to the images when the arrows are clicked?
I think I need to have a "scrollUp" class and a "scrollDown" class applied to the images. but I am not sure how to make one arrow activate the "scrollUp" class animation and another activate the "scrollDown" animation.
I've seen people use links with href="#something" to activate an ID animation, but my images can't have multiple ID's so that will not work.
Any help would be greatly appreciated! If you know of any video tutorials that would be great too! I'm not opposed to using JavaScript but I'd prefer to use CSS.
EDIT: I basically need the following code to activate one image at a time, whenever a button is clicked:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web browsers</title>
<style type="text/css">
body {
margin-left: 100px;
margin-top: 100px;
}
#header {
height: 256px;
width: 256px;
overflow: hidden;
border:1px solid gray;
}
.slider {
animation: myanimation 8s ease-in-out infinite alternate;
}
#keyframes myanimation
{
0% {transform:translateY(0px); }
25% {transform:translateY(-256px); }
50% {transform:translateY(-512px);}
75% {transform:translateY(-768px);}
100% {transform:translateY(-1024px);}
}
</style>
</head>
<body>
<div id="header">
<img class="slider" src="img1.png" width="256" height="256">
<img class="slider" src="img2.png" width="256" height="256">
<img class="slider" src="img3.png" width="256" height="256">
<img class="slider" src="img4.png" width="256" height="256" >
<img class="slider" src="img5.png" width="256" height="256">
</div>
</body>
</html>
It wouldn't be the best solution syntactically, but you could wrap the image scroller inside of an <input type="checkbox" id="scroll-up-control"> tag, then select against #scroll-up-control:checked to apply styles for scrolling up, with the default listed above for scrolling down.
I would use some simple javascript to just apply a class to the container with whether to scroll up or down though.
I was able to resolve this issue by changing the method I used to actually scroll the images. I decided to instead use an iFrame with a hidden scrollbar. Javascript allowed buttons to control the iFrame's scrolling. Thanks to all that helped out!
Related
As some of you guys may know allowing users to upload images can be a hassle and especially if you have to create some sort of list with them.
I have been looking all over the web and have been unable to find concrete answers to what you do in the case where you need to show a list of images of different shapes. Therefor i turn to you.
Say User 1 uploads the following image:
And User 2 uploads this image:
As you can see these two images are very different in both height and width.
Now lets say that you have 10 images of different sizes and wish to display them in a grid 4 by 4 (for this purpose i use ng-repeat to show a loop)
<div class="col-xs-4" ng-repeat="image in images">
<img alt="" ng-src="{{image}}">
</div>
if you do this, this will create a list that is uneven! and will look very "ugly" to say the least.
So my question is what do you do? Are there any tricks using CSS to make it fit any images of any size so that everything is aligned?
I hope my description of the problem was accurate enough for the sake of demonstration here is a fiddle that shows this issue as well.
In short how do i make sure they are all the same size without making one of the images look cramped and / or distorting the individual image?
fiddle
As mentioned in my comment, one option is to crop all the images to a suitable format, a square might be a good compromise. You can do this by wrapping your images in a container first, and positioning the image in relation to the container. Example:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.image-container {
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
padding: 20px;
}
.image-container img {
width: 100%;
height: auto;
position: absolute;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-4">
<div class="image-container"><img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
</div>
</div>
</div>
Fiddle
You can also position the image in the container. For example if you wanted to center it you could add:
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
One solution is to provide the users with a cropper to your preferred ratio and allow them to select the part of the image to show.
An alternative is to use the images as background on a div with specific ratio and hope that it does not show irrelevant areas.
Here is a solution for the second case (with a - just for laughs - animation to show the whole of the image)
http://jsfiddle.net/mrccf3sv/
.image{
display:block;
background: url('') 50% 0% no-repeat;
background-size:cover;
border:1px solid #ccc;
animation:pan 10s linear infinite alternate;
}
.image:before{
content:'';
display:block;
padding-top:56.25%; /*ratio of 16:9*/
}
And see it responsive by using different bootstrap column count for each breakpoint.
http://jsfiddle.net/mrccf3sv/1
Scaling with CSS is incredibly bad practice. I mean, we all have to do it sometimes, but if you CAN scale server-side, better do that. Try PHP's imagick, if available.
I'm implementing a second image on hover in a list. This is very common for example in list views of products. I have two ideas for how to do this:
Either put two images on top of each other like this
<div class="wrapper">
<img src="1.jpg" />
<img src="2.jpg" />
<div>
Then hide one image and when hovering the wrapper I will show it with css.
Or I would make one div:
<div class="container" />
and then use inline css to set the background images on .container.
I could also do something with javascript of course.
How, if at all, would these solutions affect performance on hover and page-loading time? Is there an even better solution? The site is built in react.
Since you are using react, you could simply manage the visibility of that second image via the state.
But if you only have two images and don't need any kind of cycling of images, using css should be the solution with the best performance.
Use your current setup like this:
<div class="wrapper">
<img src="1.jpg" />
<img src="2.jpg" />
<div>
And put the first image ontop of the second one. Then just hide the first element on hover.
The only impact this has on performance/loading time is, that you would fetch two images per item on page load.
Using react instead, the second image would not be loaded until you render it into the DOM (But if the image takes some time to load, it wont look that smooth).
However, native css transitions are much more efficient than solving this with react. At least for this small usecase.
If you however want to solve it with react, I would suggest trying your backgroundImage approach. Just keep track of the hover state in your component and switch the background image accordingly.
I think, the easiest way would be:
.sample {
background: url(http://placehold.it/200?text=First) center/cover no-repeat;
height: 200px;
width: 200px;
}
.sample:hover {
background-image: url(http://placehold.it/200?text=Second);
}
<div class="sample"></div>
And with image paths inlined:
.sample {
background: url() center/cover no-repeat;
height: 200px;
width: 200px;
}
.sample:hover img {
opacity: 0;
}
<div class="sample" style="background-image: url('http://placehold.it/200?text=Second')">
<img src="http://placehold.it/200?text=First" />
</div>
When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.
I can't seem to get my html/css slideshow to stoping changing size. I dont know how else to explain it better then "changing size" so go check it out for yourself:(To get the slideshow to load scroll down on the page then back up) dogmother.ca. I have tried to change some of the CSS to stop it but i cant get it to work same with the html. If anyone has any ideas please tell me as I need to get this fixed as soon as possible.
The index.html slideshow source code:
<div class="slider">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/banner1.jpg" />
<img src="images/banner2.jpg" />
<img src="images/banner3.jpg" />
<img src="images/banner4.jpg" />
<img src="images/banner5.jpg" />
</div>
</div>
</div>
The css for the slide show can be found here:
http://dogmother.ca/css/slider.css
Reading your comments, it sounds like you want to remove the spacing between the navigation and your images. You have styling on the slider. Remove the top margin or change it to the value of your choosing (found in slide.css on your website)
}
.css-slideshow{
position: relative;
max-width: 1586px;
height: 400px;
margin: 0 auto .5em auto;
}
So I've been trying to recreate the hover disappear/re-appearing image effect found on oudolf.com with just CSS.
I've gotten this far: https://jsfiddle.net/cj5781ug/ but I can't figure out how to style the z-index so that div.text remains above everything else so I can hover from one text to another without having to leave the entire image.
Or, I was able to set it up so that other text (h3) will not be seen above the image but you won't be able to select other text until you leave the image. Seen here: https://jsfiddle.net/ogjh96rb/
I know Javascript will make my life a lot easier but I want to practice my CSS and try to do as much with CSS before I learn Javascript.
You didnt put the h3 in the text div
change it so that
<div class="text"></div>
<h3>Chicago</h3>
is
<div class="text">
<h3>Chicago</h3>
</div>
https://jsfiddle.net/9c9ye9sk/ I changed it just for chicago to show you
Also put all of the city names in the same z index because not all of the names are above the images for some.
If you want to know how that website is doing it, here it is:
The z-indexes aren't changing...the opacities are. Initially, the text and image are visible but the opacities are 0. The text you see is really an svg underneath with the same image and text knocked out. When you hover over the DIV containing those three things (text, img, svg), the text and image opacities are set to 1.
Here is a working example of that concept using part of your example markup.
The key piece to making the svg text align with the real text is the text x and y positioning. Example: <text x="168" y="217" id="knockout" fill="white">Chicago</text> I estimated it, you'll want to make it accurate.
https://jsfiddle.net/jbmy9s9m/4/
<div class="container">
<div class="words" id="p1">
<h3>Chicago</h3>
<img class="hover-pics" src="http://i.imgur.com/XV7wrRI.jpg" width="600" height="402" alt="picture 1"/>
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" class="svgMask1" width="600" height="402" viewBox="0 0 600 402"><defs><mask id="maskID0"><text x="168" y="217" id="knockout" fill="white">Chicago</text></mask></defs><title>Chicago</title><desc>Chicago</desc>
<image style="mask:url(#maskID0);" width="600" height="402" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://i.imgur.com/XV7wrRI.jpg"></image></svg>
</div>
<div class="words" id="p2">
<h3>Cambridge</h3>
<img class="hover-pics" src="http://i.imgur.com/R1zVKKL.jpg" width="600" height="400" alt="picture 2"/>
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" class="svgMask2" width="600" height="400" viewBox="0 0 600 400"><defs><mask id="maskID0"><text x="125" y="225" id="knockout" fill="white">Cambridge</text></mask></defs><title>Chicago</title><desc>Chicago</desc>
<image style="mask:url(#maskID0);" width="600" height="400" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://i.imgur.com/R1zVKKL.jpg"></image></svg>
</div>
</div><!--END OF CONTAINER-->
It's right here. (sample & no JS)
<!DOCTYPE html>
<html>
<head>
<style>
div {position: absolute;}
#container div {
background-color: lightblue;
border: 1px solid #333333;
width: 100px;
height: 100px;
opacity: 0.5;
}
div#myBox {
opacity: 1;
background-color: coral;
z-index: 1;
-webkit-animation: mymove 5s infinite linear; /* Chrome, Safari, Opera */
animation: mymove 5s infinite linear;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
50% {z-index: 5;}
}
/* Standard syntax */
#keyframes mymove {
50% {z-index: 5;}
}
</style>
</head>
<body style="position:absolute">
<p>The z-index property is <em>animatable</em> in CSS.</p>
<p><strong>Note:</strong> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p>
<p>Gradually change the z-index property of "myBox" from 1, to 5, and back to 1:<p>
<div id="container">
<div id="myBox">myBox</div>
<div style="top:20px;left:20px;z-index:1;">z-index 1</div>
<div style="top:40px;left:40px;z-index:2;">z-index 2</div>
<div style="top:60px;left:60px;z-index:3;">z-index 3</div>
<div style="top:80px;left:80px;z-index:4;">z-index 4</div>
</div>
</body>
</html>
Live Demo / Source (via W3C).