I have 3 images on top of each other. The first one is a normal .jpg image, the second a greyscale version and the 3rd is some kind of effect i add with a transparent .png
Now what i want is that, if i move the mouse over those images, the greyscale image is hidden or replaced by another image and afterwards visible again.
The problem here is that i am a js noob, so it's kind of hard for me to find a solution ^^
my code looks something like this:
<html>
<head>
<style type="text/css">
<!--
ul li{
display: inline-table;
}
.frame{
position: relative;
height: 110px;
width: 110px;
}
.frame div{
position: absolute;
top:0px;
left:0px;
}
.effect{
background:url(images/effect.png) no-repeat;
height:110px;
width: 110px;
}
.image{
height:100px;
width:100px;
border: 1px solid red;
margin:4px;
}
.greyscale{
height:100px;
width:100px;
border: 1px solid red;
margin:4px;
}
-->
</style>
</head>
<body>
<ul>
<li>
<div class="frame">
<div class="image"><img src="images/pic1.jpg" height="100" width="100"></div>
<div class="greyscale"><img src="images/grey1.jpg" height="100" width="100"></div>
<div class="effect">qwert</div>
</div>
</li>
<li>
<div class="frame">
<div class="image"><img src="images/pic2.jpg" height="100" width="100"></div>
<div class="greyscale"><img src="images/grey2.jpg" height="100" width="100"></div>
<div class="effect">qewrt</div>
</div>
</li>
</ul>
</body>
</html>
would be super-awesome if someone can help me out :)
Try this:
.frame:hover .greyscale { display: none; }
Try adding this to you're css:
div.greyscale:hover img { display: none; }
This will hide you're image if you hover over the greyscale div.
Look into this example,
Here I have a big image on the top and 3 images below.
On mouse hover sll 3 images they will replace big one. on mouse out old image will come back
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/Bigcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle1.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/>
</p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
<p><img src="../Pictures/lightcircle3.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
You cam modify it in the way you need it.
Cheers..
Related
I have a slideshow made with jshowoff[1]. I copied the important part to here. Please have a look at it.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://panthi.lk/js/jquery.jshowoff.copy.js"></script>
<style>
#features {
position: relative;
overflow: hidden;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="banner" id="mid_banner">
<div class="jshowoff jshowoff-1" style="position: relative;">
<div id="features" style="position: relative;">
<a href="/">
<img src="https://panthi.lk/test/one.png" width="100%" height="100%">
</a>
<a href="/">
<img src="https://panthi.lk/test/two.png" width="100%" height="100%">
</a>
<a href="/">
<img src="https://panthi.lk/test/three.png" width="100%" height="100%">
</a>
</div>
</div>
</div>
<script type="application/javascript">
$(document).ready(function() {
$('#features').jshowoff({
effect: 'slideLeft',
changeSpeed: 2500,
speed: 3000
});
});
</script>
</body>
</html>
As you may notice, when a new image slides in, the old image is distorted while being sliding out. This happens because the image sizes are larger than the main div, and when a new image slides in the older one fist goes to its original size before it slides out.
I want to fix this. I tried many tricks, but no luck so far. CSS experts over there, your help is greatly appreciated. All I need is some clue.
[1] https://ekallevig.com/jshowoff/
I was able to fix it with this.
<a href="/" style="height: 100%; width: 100%;">
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://panthi.lk/js/jquery.jshowoff.copy.js"></script>
<style>
#features {
position: relative;
overflow: hidden;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<div class="banner" id="mid_banner">
<div class="jshowoff jshowoff-1" style="position: relative;">
<div id="features" style="position: relative;">
<a href="/" style="height: 100%; width: 100%;">
<img src="https://panthi.lk/test/one.png" width="100%" height="100%">
</a>
<a href="/" style="height: 100%; width: 100%;">
<img src="https://panthi.lk/test/two.png" width="100%" height="100%">
</a>
<a href="/" style="height: 100%; width: 100%;">
<img src="https://panthi.lk/test/three.png" width="100%" height="100%">
</a>
</div>
</div>
</div>
<script type="application/javascript">
$(document).ready(function() {
$('#features').jshowoff({
effect: 'slideLeft',
changeSpeed: 2500,
speed: 3000
});
});
</script>
</body>
</html>
I am trying to autosize text (labelled: CONTENT) to fit in image containers (Dialogue4.png) using a JS script called textFit. The problem is I cannot get the JS script to run and am getting no change in text size.
My html is as follows:
<!DOCTYPE html>
<html>
<head>
<title> Home Page </title>
<meta charset="UTF-8">
<script src="textFit.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quantico&display=swap" rel="stylesheet">
<link href="main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="banner">
<video autoplay="" muted="false" loop="">
<source src="Media/BackgroundClip.mp4" type="video/mp4">
</video>
<div id="scrollarea" class="content">
<div class="content-wrapper">
<div class="textbox"> <img src="Media/Dialogue4.png"> </div>
<div class="text-wrapper">
<div id="container" style="width:100%;height:auto">
<p>
CONTENT CONTENT CONTENT
</p>
</div>
</div>
</div>
</div>
</div>
<script>
function doFit(){
textFit(document.getElementById('container'), {maxFontSize: 200});
}
</script>
</body>
</html>
Any advice would be seriously appreciated as I am at the bottom of a deep-dive trying to figure it out.
Thanks for your time and have a happy new year.
Betty.
Here is a demo:
(I simplified your HTML and made sure the element that contains the text has a defined width&height)
textFit(document.querySelector('.text-wrapper'), {
maxFontSize: 200,
alignHoriz: true,
alignVert: true
});
body {
font-family: sans-serif;
}
.content-wrapper {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid blue;
width: 60%;
height: 250px;
display: block;
}
.text-wrapper {
display: block;
width: 100%;
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/textfit/2.4.0/textFit.min.js"></script>
<div class="banner">
<div id="scrollarea" class="content">
<div class="content-wrapper" style="background-image: url('https://i2.wp.com/digital-photography-school.com/wp-content/uploads/2019/05/joseph-barrientos-49318-unsplash-e1558728034701.jpg')">
<div class="text-wrapper">
CONTENT CONTENT CONTENT
</div>
</div>
</div>
</div>
I have a list of images but i want all the images next to each other. and than with horizontal scroll.
I tried to set a max height for the scroll menu but that his hide the 2 images below. I also disabled vertical scroll but that doesn't work to.
If it is possible I want only use css. if I need javascript to fix it I use Jquery.
My html:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="css/index.css" rel="stylesheet"/>
<link href="css/global.css" rel="stylesheet"/>
<meta charset="UTF-8">
</head>
<body>
<div id="list">
<img src="img/1.jpg" class="img">
<img src="img/2.jpg" class="img">
<img src="img/3.jpg" class="img">
<img src="img/4.jpg" class="img">
<img src="img/5.jpg" class="img">
<img src="img/6.jpg" class="img">
<img src="img/7.jpg" class="img">
<img src="img/8.jpg" class="img">
</div>
<div id="output">
</div>
<script src="js/jquery.js"></script>
<script src="js/image.js"></script>
</body>
</html>
my css:
body{
padding:0px;
margin:0px;
overflow-y:hidden;
}
.img{
height:100px;
width:200px;
display:inline-block;
margin-left:0px;
}
.loaded{
width:100%;
}
#list{
overflow-y:hidden;
width:auto;
}
Simply add
white-space: nowrap;
to #list
Since your .img images are correctly set to inline-block you can now control the parent element's whitespace with https://developer.mozilla.org/en-US/docs/Web/CSS/white-space (which applies to the inner inline, inline-block children.)
nowrap
Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.
As #roko-c-buljan said simply add white-space: nowrap; to the #list. This suppresses line-breaks in the text, which the images are as they have display: inline-block.
body{
padding:0px;
margin:0px;
overflow-y:hidden;
}
.img{
height:100px;
width:200px;
display:inline-block;
margin-left:0px;
}
.loaded{
width:100%;
}
#list{
overflow-y:hidden;
width:auto;
white-space:nowrap;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link href="css/index.css" rel="stylesheet"/>
<link href="css/global.css" rel="stylesheet"/>
<meta charset="UTF-8">
</head>
<body>
<div id="list">
<img src="img/1.jpg" class="img">
<img src="img/2.jpg" class="img">
<img src="img/3.jpg" class="img">
<img src="img/4.jpg" class="img">
<img src="img/5.jpg" class="img">
<img src="img/6.jpg" class="img">
<img src="img/7.jpg" class="img">
<img src="img/8.jpg" class="img">
</div>
<div id="output">
</div>
<script src="js/jquery.js"></script>
<script src="js/image.js"></script>
</body>
</html>
Are you looking for something like this?
http://codepen.io/kozumii/pen/IoAFb
#list{
overflow-x:scroll;
white-space:nowrap;
}
If you're familiar with floats,you can add
#list img {
float:left;
}
I am working on a 960 px-design at the moment, and I am trying to do a menu in where it is supposed to be 6 "buttons" with a 5 px margin between each one. I know how to do this, and I cannot seem to find what is wrong with my code. It would be very helpful if someone could look through my code with some fresh eyes and tell me where the issue is...
http://jsfiddle.net/9tx8v/
HTML:
<!doctype html>
<html>
<head>
<title> ----- </title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<header>ASDER</header>
<nav>
<div id="ett"> <img src="menu.jpg"/>
<div id="två"> <img src="menu.jpg"/>
<div id="tre"> <img src="menu.jpg"/>
<div id="fyra"> <img src="menu.jpg"/>
<div id="fem"> <img src="menu.jpg"/>
<div id="sex"> <img src="menu.jpg"/>
</nav>
<article class="art-1"> </article>
<footer> - - - - - - - - - - - - - - </footer>
</div>
</body>
</html>
CSS:
header {
width: 100%;
height: 60px;
margin-bottom: 10px;
background-color: white;
float: left;
}
nav {
width: 100%;
height: 60px;
float: left;
}
article {
width: 462px;
height: 300px;
float: left;
margin-top: 10px;
}
footer{
width: 100%;
height: 60px;
float: left;
margin-top: 10px;
}
#ett, #två, #tre, #fyra, #fem, #sex {
width: 130px;
height: 60px;
margin-left: 5px;
}
Sorry for include a shitload of unnecessary code, but I'm so fed up atm I might just include the whole thing...
Thanks in advance
How about closing your DIV's? And you need a float:left for any DIV
HTML
<nav>
<div id="ett">
<img src="menu.jpg" />
</div>
<div id="två">
<img src="menu.jpg" />
</div>
<div id="tre">
<img src="menu.jpg" />
</div>
<div id="fyra">
<img src="menu.jpg" />
</div>
<div id="fem">
<img src="menu.jpg" />
</div>
<div id="sex">
<img src="menu.jpg" />
</div>
</nav>
CSS
nav div {
float:left;
width:130px;
height:60px;
margin-left:5px;
}
First at all as a better practice keep the closing tags for </div> elements.
<div id="ett"> <img src="menu.jpg"/></div>
<div id="två"> <img src="menu.jpg"/></div>
...
Then just float each element you don't need to float the nav:
#ett, #två, #tre, #fyra, #fem, #sex {
width:130px;
height:60px;
margin-left:5px;
float:left; /* Add this*/
}
Check this Demo Fiddle
First, close your divs:
<div id="två"><img src="menu.jpg"/></div>
<div id="tre"><img src="menu.jpg"/></div>
<div id="fyra"><img src="menu.jpg"/></div>
<div id="fem"><img src="menu.jpg"/></div>
<div id="sex"><img src="menu.jpg"/></div>
Add float: left in you css:
#ett, #två, #tre, #fyra, #fem, #sex {
width:130px;
height:60px;
margin-left:5px;
float: left;
}
<nav> should contains <a> , else it is not a <nav>.
Do not forget to close your tags and adapt their display if needed on a row , sized or on top of each others :)
okay guys, I found a small piece of code on stackoverflow which is for a slidehsow using javascript. But for some reason it doesn't work on my PC. This is the original Post:
Looking for a fullwidth slider
it works there but for some reason it doesn't work for me!!
what am I doing wrong?
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.clear { clear:both; }
.wrapper { width:980px; margin:0 auto; }
.slider { margin:20px 0; height:100px; position:relative; }
.slider .slide { display:none; background:red; position:absolute; height:100px; width:100%; text-align:center; color:#fff; font-size:24pt; }
.header { background:#eee; font-size:18pt; }
.content { }
.footer { background:#eee; text-align:center; }
.slider-nav { margin: 0 auto; width:100px; clear:both; }
.slider-nav li { float:left; margin:0 5px; }
-->
</style>
<script type="text/javascript">
$('.slider .slide:first').addClass('active').fadeIn(200);
function rotate(index) {
$('.slider .slide.active').removeClass('active').fadeOut(200, function() {
$('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
});
}
$('.slider-nav li a').click(function() {
var index = $(this).parent().index('li');
rotate(index);
return false;
});
setInterval(function() {
var $next = $('.slider .slide.active').next();
if ($next.length == 0)
$next = $('.slider .slide:first');
rotate($next.index());
}, 2000);
</script>
</head>
<body>
<div class="header wrapper">
<h1>Site header</h1>
</div>
<div class="slider">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</div>
<ul class="slider-nav">
<li><a href="#" >1</a></li>
<li><a href="#" >2</a></li>
<li><a href="#" >3</a></li>
<li><a href="#" >4</a></li>
</ul>
<div class="clear"></div>
<div class="content">
<div class="wrapper">
<p>Some site content will be here</p>
<p>Some site content will be here</p>
<p>Some site content will be here</p>
<p>Some site content will be here</p>
<p>Some site content will be here</p>
</div>
</div>
<div class="footer">
<div class="wrapper">© www.mysite.com </div>
</div>
</body>
</html>
You seem to reference a javascript library (maybe jquery) in your code, but no trace of the library inclusion.
You are using jQuery code but where is your reference to the jQuery library?