I'm trying to build an image gallery with description when moving over the image.
The code looks good but nothing happens when you move the mouse cursor over the image.
My problem is when I running the code the "<div class='description_content'>" does not appear.
Thx for any help.
good examle
wrong code
HTML CODE:
<html>
<head>
<title>Your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript" language = "Javascript">
<!-- Hide from older browsers;
window.onload = function(){
$('#scroll_me').click(function() {
var item_width = $('#portfolio-tiles li').outerWidth() + 2.5;
var left_indent = parseInt($('#portfolio-tiles').css('left')) - item_width;
$('#portfolio-tiles').animate({
'left': left_indent
}, 500, function() {
$('#portfolio-tiles li:last').after($('#portfolio-tiles li:first'));
$('#portfolio-tiles').css({
'left': '-302'+'px'
});});
});
//********************************************** div.description
//for each description div...
$('div.description').each(function(){
//...set the opacity to 0...
$(this).css('opacity', 0);
//..set width same as the image...
$(this).css('width', $(this).siblings('img').width());
//...get the parent (the wrapper) and set it's width same as the image width... '
$(this).parent().css('width', $(this).siblings('img').width());
//...set the display to block
$(this).css('display', 'block');
});
$('#portfolio-tiles li').hover(function(){
//when mouse hover over the wrapper div
//get it's children elements with class description
//and show it using fadeTo
$(this).children('.description').stop().fadeTo(500, 0.4);
},function(){
//when mouse out of the wrapper div
//use fadeTo to hide the div
$(this).children('.description').stop().fadeTo(500, 0);
});
};<!-- End onload;
// end hide -->t = setInterval( function(){ $('#next').trigger('click'), 2000 } );
//$('#stop').click( function(){
//clearInterval(t);
</script>
</head>
<body>
<div id="container">
<div id='carousel_inner'>
<ul id="portfolio-tiles">
<li>
<a id="example2" href="p1.png">
<img alt="item1" src="p1.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p2.png">
<img alt="item1" src="p2.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p3.png">
<img alt="item1" src="p3.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
<li>
<a id="example2" href="p5.png">
<img alt="item1" src="p5.png">
<div class='description'>
<div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other </div>
</div>
</a>
</li>
</ul>
</div>
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div><h2>Click here</h2><img id="scroll_me" alt="item1" src="p4.png"></div>
</body>
</html>
CSS CODE:
#carousel_inner{
background-color: #60F0F0;
background-position: left top;
position:relative;
list-style-type: none;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 220px;
width: 652px;
overflow: hidden;
border:1px;
border-style:solid;
border-color:yellow;
}
#portfolio-tiles li img {
cursor:pointer;
cursor: hand;
border:1px;
border-style:solid;
border-color:red;
}
#portfolio-tiles li {
position:relative;
display: block;
float: left;
font-style: normal;
font-weight: normal;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 2.5px 0px 2.5px;
width: 309px;
border:1px;
border-style:solid;
border-color:green;
}
#portfolio-tiles {
position:relative;
left:-302px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 15px 15px 15px 15px;
width:9999px; /* important */
}
img {
width: 277px;
}
#scroll_me{
float: left;
display: block;
margin: 0px;
}
h2 {
float: left;
position: relative;
top: 20px;
left: 0;
width: 100%;
}
div.description{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
left:0px;
display:none; /* hide it */
/* styling bellow */
background-color:black;
font-family: 'tahoma';
font-size:15px;
color:white;
}
div.description_content{
padding:10px;
}
You can use $('li').hover() and $(this).find('.description') to achieve this.
Replace this piece of code...
$('#portfolio-tiles li').hover(function(){
$(this).children('.description').stop().fadeTo(500, 0.4);
},function(){
$(this).children('.description').stop().fadeTo(500, 0);
});
with this...
$('li').hover(function(){
$(this).find('.description').stop().fadeTo(500, 0.4);
},function(){
$(this).find('.description').stop().fadeTo(500, 0);
});
Related
I have been struggling for the past few hours with a positioning problem. I have been following a basic tutorial on how to compose an image gallery from w3c: How to Create a Tabbed Image Gallery I am using bootstrap's grid system for layout, and I have been very careful not to use bootstraps class names where it might interfere with those provided in the tutorial. The reason is that I see myself using bootstrap for layout, but I want to be able to customize things, as well. Basically, there is a div tag with the class title "mycontainer" with display set to none, which is then set to display: block in the javascript section. That part works just fine.
The problem is that the tutorial includes this little X, using the html code × I will include the full code below. The × is supposed to be an X-out for the image, which is enlarged when a user selects one of several top images (here is a picture of it). I circled the xelement The problem is that no matter what I do, I cannot seem to control the positioning of that X. I have tried inline style, to no avail. I tried doing it exactly as the tutorial recommended, which was to use a css class to position, but with that I wasn't even able to control the coloring. At least with inline styles, I was able to color the element. But padding-left, margin-left, text-align:center. I tried separately and all at once. None of these work, and I just simply cannot figure this out. Here is the javascript, which is included in the section. Thanks a million times for your time.
<script type="text/javascript">
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
Here is the CSS:
<style>
body {
margin: 0;
font-family: Arial;
}
* {
box-sizing: border-box;
}
#column1 {
width:80%;
height:80%;
}
#column2 {
width:80%;
height:80%;
}
#column3 {
width:80%;
height:80%;
}
#column4 {
width:80%;
height:80%;
}
.col-lg-3{
float: left;
padding:10px;
}
<!--Style the images inside the grid-->
.col-lg-3 img {
opacity: 0.8;
cursor: pointer;
}
.col-lg-3 img:hover {
opacity: 1;
}
/*Clear floatsd after the columns */
.row:after {
content: "";
display:table;
clear:both;
}
<!--The expanding image container (positioning is needed to position the close button and the text -->
**.mycontainer {
position:relative;
display:none;
}
#imgtext {
position:absolute;
bottom:60px;
left:60px;
color:white;
font-size:20px;
}
#expandedImg {
display:block;
padding-left:50%;
}**
/* Closable button inside the image */
.closebtn {
position: absolute;
top: 250px;
right: 250px;
color: hotpink;
font-size: 35px;
cursor: pointer;
}
</style>
And here is the entire page with HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Dream of Bonsai</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
<style>
body {
margin: 0;
font-family: Arial;
}
* {
box-sizing: border-box;
}
#column1 {
width:80%;
height:80%;
}
#column2 {
width:80%;
height:80%;
}
#column3 {
width:80%;
height:80%;
}
#column4 {
width:80%;
height:80%;
}
.col-lg-3{
float: left;
padding:10px;
}
<!--Style the images inside the grid-->
.col-lg-3 img {
opacity: 0.8;
cursor: pointer;
}
.col-lg-3 img:hover {
opacity: 1;
}
/*Clear floatsd after the columns */
.row:after {
content: "";
display:table;
clear:both;
}
<!--The expanding image container (positioning is needed to position the close button and the text -->
.mycontainer {
position:relative;
display:none;
}
#imgtext {
position:absolute;
bottom:60px;
left:60px;
color:white;
font-size:20px;
}
#expandedImg {
display:block;
padding-left:50%;
}
/* Closable button inside the image */
.closebtn {
position: absolute;
top: 250px;
right: 250px;
color: hotpink;
font-size: 35px;
cursor: pointer;
}
</style>
</head>
<body>
<!--The grid of four equal columsn-->
<div class="container">
<h1 style="text-align:center">Image Gallery</h1>
<hr>
<br>
<div class="row">
<div class="col-lg-3">
<img src="images/cherrySquare.jpg" id="column1" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/beachSquare.jpg" id="column4" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/bonsai4.jpg" id="column3" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
<div class="col-lg-3">
<img src="images/awesomebonsaiSquare.jpg" id="column2" alt="Chinese Characters" onClick="myFunction(this);" >
</div>
</div>
<!--End of the row-->
<div class="mycontainer">
<!--close the image-->
<span class="closebtn" onClick="this.parentElement.style.display='none'" style="color:hotpink;padding-left:50%;padding-top:35%;margin-top:25%;padding-bottom:45%;">×</span>
<!--Expanded image-->
<img id="expandedImg" style="width:55%;height:55%;margin-left:25%;" >
<!--Image text-->
<div id="imgtext"></div>
</div>
</div>
</body>
</html>
I took a look at your CSS. I copied your code and I noticed you wrote your CSS comments with HTML syntax and it's messing with your code change those and and it should work.
Code to display three buttons. The CSS class 'hidden' hides the buttons on clicking the element with tag . The code works fine but the size of the 'div' box (id='switcher') reduces when the buttons are hidden.
How do I maintain the original size even though the buttons are hidden?
$(document).ready(function(){
$('#switcher h3').click(function(){
$('#switcher button').toggleClass('hidden');
});
});
.hidden{
display:none;
}
.switcher{
float:right;
border:1px solid #000;
background-color:#ddd;
margin:10px;
font-size: .9em;
padding:10px;
}
<html>
<head>
<link type='text/css' rel='stylesheet' href='01.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type='text/javascript' src='jqScripts.js'></script>
</head>
<body id='content'>
<div id="container">
<div id="switcher" class="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
Default
</button>
<button id="switcher-narrow">
Narrow Column
</button>
<button id="switcher-large">
Large Print
</button>
</div>
</div>
</body>
</html>
Update your style to following
.hidden{
visibility: hidden;
}
For details, visibility
Use visibility: hidden; instead of display: none;
.hidden{
visibility: hidden;
}
Css solution 1:
.hidden{
visibility: hidden;
}
Css solution 2:
.hidden{
opacity: 0;
}
Jquery Solution 1 (fixing the height of parent div):
$(window).laod(function(){
var initialHeight=$('#switcher').height();
$("#siwtcher").height(initialHeight);
})
Jquery solution 2:
$(document).ready(function(){
$('#switcher h3').click(function(){
$('#switcher button').fadeTo(0);
});
});
You should use visibility: hidden; instead of "display:none;"
so, update your CSS as below,
.hidden{
visibility: hidden;
}
The reason for using visibility: hidden; instead of "display:none;", is below:
display:none Tag is not visible, also no space allocated for it.
visibility:hidden Tag is not visible, but space is allocated for it on the page.
$(function(){
$('#showall').click(function(){
$('.targetDiv').show();
});
$('.showSingle').click(function(){
$('.targetDiv').hide();
$('#div'+$(this).attr('target')).show();
});
});
body{
width:100%;
height:100%;
background: #eee;
}
div.menu{
margin: 5% 10%;
background: transparent;
}
a, #showall{
display:inline-block;
margin:0 1%;
padding:2%;
border-radius: 10%;
-webkit-box-shadow: 0px 3px 11px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 11px 2px rgba(0,0,0,0.2);
box-shadow: 0px 3px 11px 2px rgba(0,0,0,0.2);
}
a:nth-child(1){
background:#E63946;
color: #eee;
}
a:nth-child(2){
background:#F1FAEE;
color: #222;
}
a:nth-child(3){
background: #A8DADC;
color: #222;
}
a:nth-child(4){
background: #457B9D;
color: #eee;
}
a:nth-child(5){
background: #1D3557;
color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"></style>
<div class="menu">
<a id="showall">All</a>
<a class="showSingle" target="1">Div 1</a>
<a class="showSingle" target="2">Div 2</a>
<a class="showSingle" target="3">Div 3</a>
<a class="showSingle" target="4">Div 4</a>
</div>
<section class="cnt">
<div id="div1" class="targetDiv">Content 1</div>
<div id="div2" class="targetDiv">Content 2</div>
<div id="div3" class="targetDiv">Content 3</div>
<div id="div4" class="targetDiv">Content 4</div>
</section>
My "home" button goes up into the div as I condense the page. What is the best way to stabilize the button so that it will stay in center of the div as the page is condensed? I've tried many different things and so far nothing has worked so I'm hoping someone on this site could help me answer this problem. I've tried many different things without success.
JS/CSS/HTML
$(document).ready(function () {
//mouseenter overlay
$('ul#gallery li').on('mouseenter', function () {
// Get data attribute values
var title = $(this).children().data('title');
var desc = $(this).children().data('desc');
//validation
if (desc == null) {
desc = 'Click To Enlarge';
}
if (title == null) {
title = '';
}
//Create overlay div
$(this).append('<div class="overlay"></div>');
//Get the overlay div
var overlay = $(this).children('.overlay');
// Add html to overlay
overlay.html('<h3>' + title + '</h3><p>' + desc + '</p>');
// Fade in overlay
overlay.fadeIn(400);
});
$('ul#gallery li').on('mouseleave', function () {
//Create overlay div
$(this).append('<div class="overlay"></div>');
//Get the overlay div
var overlay = $(this).children('.overlay');
//Fade out overlay
overlay.fadeOut(200);
});
});
body{
background-color: white;
font-family:Orbitron;
color:white;
width:100%
}
.fa-stack-overflow{
color: #f48024
}
.fa-github{
color:rgb(102,43,129);
}
.fa-linkedin{
color:rgb(0,127,178);
}
.fa-facebook-official{
color:rgb(59, 89, 153);
}
.nav-pills{
font-size: 1.7em;
background-color: none;
margin-bottom: 10%;
color:white;
}
.block{
background-color: #337ab7;
opacity: .7;
padding:10px;
width:50%;
margin-right: auto;
margin-left: auto;
border-radius:5px;
}
h1{
padding:0;
margin-top: 0px;
font-size: 5.0em;
}
.btn-default{
font-size:1.7em;
color:#337ab7;
}
.pageOne{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 1000px;
}
/*
parallax effect start
*/
.pageOne, .pageThree{
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/*
parallax effect end
*/
.pageTwo{
background: white;
color:#337ab7;
background-repeat:no-repeat;
background-size: cover;
height: 400px;
padding-top: 5%;
border-bottom:#00bfff 3px solid;
border-top:#00bfff 3px solid;
background-attachment: fixed;
}
.boxed{
font-size: 1.7em;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-bottom: 100px;
}
.me{
height: 850px;
display:block;
margin-right: auto;
margin-left: auto;
}
.pageThree{
background: url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: none;
background-size: cover;
height: 800px;
padding-top:6%;
background-attachment: fixed;
}
.button{
background-size: contain;
}
.container{
width:80%;
margin:auto;
overflow:auto;
}
section{
padding:20px 0;
overflow:hidden;
padding-bottom: 5%;
margin-top: 2.5%;
}
#gallery{
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#gallery li{
display: block;
float: left;
width: 23%;
cursor: pointer;
border: 5px;
box-sizing: border-box;
margin: 0 12px 7px 0;
position: relative;
}
#gallery img{
width:100%;
border-radius:5%
}
.overlay{
display:none;
background:#337ab7 url(https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) no-repeat top center;
color:#fff;
position:absolute;
top:0;
z-index:100;
width:100%;
height:100%;
padding:20px;
border-radius:5%;
box-sizing: border-box;
pointer-events: none;
opacity: .7;
}
.overlay h3{
margin: 0;
padding: 0;
}
.pageThreeFooter{
background: black;
color:#337ab7;
background-repeat: none;
background-size: cover;
height: 150px;
padding-top: 2.5%;
background-attachment: fixed;
}
.pageFour{
background: white;
color:#337ab7;
background-repeat: none;
background-size: cover;
height: 300px;
padding-top: 2.5%;
}
.black{
color:black;
}
<!DOCTYPE html>
<html>
<head>
<title>Daniel's Portfolio | Welcome</title>
<link rel="stylesheet" href="CSS/bootstrap.min.css">
<link rel="stylesheet" href="CSS/style.css">
<link rel="stylesheet" href="CSS/font-awesome.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
</head>
<body>
<div class="pageOne text-center">
<ul class = "nav nav-pills">
<li>
Daniel Collins
</li>
<li class="pull-right">
Contact Me
</li>
<li class="pull-right">
Portfolio
</li>
<li class="pull-right">
About Me
</li>
</ul>
<div class="block text-center" id="p1">
<h1>Daniel's Portfolio Website</h1>
<h2>Various Web Projects</h2>
</div>
<div class = "btnList text-center">
<a class = "btn btn-default" href="https://stackoverflow.com/users/7024823/daniel"><i class="fa fa-stack-overflow" aria-hidden="true"></i>Stack Overflow</a>
<a class = "btn btn-default" href="https://github.com/casteyes"><i class="fa fa-github" aria-hidden="true"></i>GitHub</a>
<a class = "btn btn-default" href="https://www.linkedin.com/in/daniel-collins-927b1ab0/"><i class="fa fa-linkedin" aria-hidden="true"></i>Linkedin</a>
<a class = "btn btn-default" href="https://www.facebook.com/daniel.p.collins1"><i class="fa fa-facebook-official" aria-hidden="true"></i>Facebook</a>
</div>
</div>
<div class= "pageTwo text-center" id="p2">
<h2>Daniel Collins</h2>
<div class="boxed">
<p class="black">
I’m a web developer and designer living in Jacksonville, Florida, United States. I spend my days with my hands in many
different areas of web development from back end programming (MySQL, PHP, C#, Java) to front end engineering
(HTML, CSS, and jQuery/Javascript), digital accessibility, user experience and visual design.
</p>
</div>
</div>
<div class= "pageThree" id="p3">
<header>
<div class="block text-center">
<h1 class = "logo">Portfolio</h1>
</div>
</header>
<section>
<div class="container">
<h1 id="heading">Projects</h1>
<ul id="gallery">
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
<li> <img src="https://images.pexels.com/photos/311039/pexels-photo-311039.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"></li>
</ul>
</div>
</div>
</section>
<div class="pageThreeFooter text-center">
<div class="row">
Home
</div>
</div>
<div class= "pageFour text-center" id="p4">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Let's Get In Touch!</h2>
<hr class="primary">
<p class="black">Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
</div>
<div class="col-lg-4 col-lg-offset-2 text-center">
<i class="fa fa-phone fa-3x sr-contact"></i>
<p class="black">555-5555</p>
</div>
<div class="col-lg-4 text-center">
<i class="fa fa-envelope-o fa-3x sr-contact"></i>
<p class="black"><a class="black" href="mailto:casteyestothesun#gmail.com">myemail.com</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
You are missing the important responsive meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
But you are using Bootstrap, which is a responsive framework. So, the answer to your question is to study and understand Bootstrap, along with more general studying of what it means for a site to be responsive.
There is a lot more to making a website responsive than just changing one or two things. You really need to plan on how each element or container of those elements is going to be responsive in their own right. Also, how your wrap or container of all content will behave as well as how your images, text/font, etc... will also be responsive.
This is too broad a question to be answered simply.
Since you are already using bootstrap, I would research how to utilize this to it's full potential and you can easily make your website responsive.
As you guessed, media queries are a good way to do this.
You'll need to add this tag in your header for these to work:
<meta name="viewport" content="width=device-width, initial-scale=1">
There are two ways you can go about setting your breakpoints - by min width or max width.
Since you've already written most of the styles, min-width probably makes more sense. If you have multiple breakpoints you can combine min-width and max-width into a single query to avoid conflicts with other media queries.
As for the home button, I recommend looking up how to vertically center an element. This guide is pretty handy: https://css-tricks.com/centering-css-complete-guide/
I am try to build Gallery slide show.
I am new in javscript and jQuery.
1 - I don't see any mottion moving and I don't no why?
2 - I can not center the image center of the div, the left side there is linkage.
Thanks for any help and guidance on the subject.
Here we can see code that work good.
Gallery
My code HTML file:
<html>
<head>
<title>Your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript" language = "Javascript">
<!-- Hide from older browsers;
window.onload = function(){
$('#scroll_me').click(function() {
var item_width = $('#portfolio-tiles li').outerWidth() + 30;
var left_indent = parseInt($('#portfolio-tiles').css('left')) - item_width;
$('#portfolio-tiles:not(:animated)').animate({
'left': left_indent
}, 500, function() {
$('#portfolio-tiles li:last').after($('#portfolio-tiles li:first'));
$('#portfolio-tiles').css({
'left': '-300px'
});});
});
};
// end hide -->
</script>
</head>
<body>
<div id="container">
<div id='carousel_inner'>
<ul id="portfolio-tiles">
<li>
<a id="example2" href="p1.png">
<img alt="item1" src="p1.png">
</a>
</li>
<li>
<a id="example2" href="p2.png">
<img alt="item2" src="p2.png">
</a>
</li>
<li>
<a id="example2" href="p3.png">
<img alt="item3" src="p3.png">
</a>
</li>
<li>
<a id="example2" href="p5.png">
<img alt="item4" src="p5.png">
</a>
</li>
</ul>
</div>
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div><h2>Click here</h2><img id="scroll_me" alt="item1" src="p4.png"></div>
</body>
</html>
My code CSS file:
#carousel_inner{
background-color: #60F0F0;
background-position: left top;
position:relative;
list-style-type: none;
float: left;
margin: 5px 5px 5px 5px;
padding: 0px 0px 0px 0px;
height: 215px;
width: 980px;
overflow: hidden;
border:1px;
border-style:solid;
border-color:yellow;
}
#portfolio-tiles li img {
cursor:pointer;
cursor: hand;
border:1px;
border-style:solid;
border-color:red;
}
#portfolio-tiles li {
display: block;
float: left;
font-style: normal;
font-weight: normal;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 284px;
border:1px;
border-style:solid;
border-color:green;
}
#portfolio-tiles {
position:relative;
left:-316px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 10px 0px 0px 10px;
width:9999px; /* important */
}
img {
width: 277px;
}
#scroll_me{
float: left;
display: block;
margin: 0px;
}
h2 {
float: left;
position: relative;
top: 20px;
left: 0;
width: 100%;
}
when you do the animate, you are applying CSS styles to the properties. therefore, in the case of positioning, you have to indicate the units, like:
$('#portfolio-tiles:not(:animated)').animate({
'left': left_indent + 'px'
}...
I'm looking to overlay an image in the right hand corner on another image using jquery.
Basically I want the 2nd image to appear over the other image in the right hand corner when the user's mouse hovers above the image and then vanish when they stop hovering over it. How would I achieve this with Jquery?
#Senad is quite right, you don't need jQuery for that. However, if you have a more complicated situation and are looking for similar functionality, try:
Wrap them in a containing element. Set the containing element to position:relative
Set the overlay image to position:absolute; top:0; left:0; and style the height and width as you like...then use jQuery to handle the hover event...
HTML:
<div>
<img id="main" src="myimg" />
<img id="overlay" src="myimg"
/></div>
CSS:
div {
position:relative;
}
#main {
width:256px;
div {
position:relative;
}
#main {
width:256px;
height:256px;
}
#overlay {
position:absolute;
height:100px;
width:100px;
top:0;
left:0;
}
Code:
$(document).ready(function() {
$("#main").mouseenter(function() {
$("#overlay").show();
});
$("#main").mouseleave(function() {
$("#overlay").hide();
});
});
See a working example here: http://jsfiddle.net/jsney/10/
You don't need jQuery for that, you can use CSS for that, for example
My Overlay
CSS
a.my-overlay {
background: url('/images/first-image.jpg') no-repeat;
width: 100px;/*width: of image*/;
height: 100px;/*height of image*/;
display: block;
text-indent: -1000px;
overflow: hidden;
}
a.my-overlay:HOVER {background: url('/images/second-image.jpg') no-repeat; }
This is much easier solution and acceptable for everyone.
Let's assume your first image is wrapped inside a div.
1/ Add another div with a "display:none" style and a class of your choice
2/ On hover load the img (if it hasn't been done before) on the div
3/ slideToggle the div that contain the second image and voila !
$('div .firstImage').hover(function(){
$('.secondImage').slideToggle();
});
Of course, you need to set the proper positioning style to the div containing the second image.
Here's a simple way I did it following thomas's code above.
In my case I wanted to put an overlay (basically a greyed out box with a big plus sign) on an image that shows it's clickable and will enlarge the thumbnail in a lightbox.
I need to do that alot so am using classes not ID's.
My image and overlay image are the same dimensions.
.hide just hides the overlay until the hover function show's it.
I'm not showing the lightbox stuff so it's clearer for this issue.
Notice that a.hoverTrigger wraps the .overlay img as well.
If you don't do that you will get the dreaded flickering effect.
markup:
<div class="merchImg">
<img src="_img/_new-store/item.png" />
<img class="overlay hide" src="_img/_new-store/overlay.png" />
</div>
css:
.merchImg {
position: relative;
}
.merchImg .overlay {
position: absolute;
top:0;
left:0;
}
jquery:
$(".hoverTrigger").mouseenter(function() {
$(this).parent().find('a .overlay').show();
});
$(".hoverTrigger").mouseleave(function() {
$(this).parent().find('a .overlay').hide();
});
We also can achieve this using "jquery.ImageOverlay.js" plugin.
here is example for this.
ASPX 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 runat="server">
<title></title>
<link rel="stylesheet" media="screen" type="text/css" href="Styles/ImageOrverlay.css" />
<script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.metadata.js"></script>
<script type="text/javascript" src="Scripts/jquery.ImageOverlay.js"></script>
</head>
<body>
<form id="form1" runat="server">
<h1>
jQuery Image Overlay</h1>
<fieldset>
<legend><b>Without any options : </b></legend>
<ul id="firstGallery" class="image-overlay">
<li><a href="http://www.yahoo.com">
<img alt="Palm Tree" src="Images/palmtree.jpg" />
<div class="caption">
<h3>
Write a Title Here</h3>
<p>
Put a Caption Here</p>
</div>
</a></li>
<li><a href="http://www.google.com">
<img alt="Iguana" src="Images/iguana.jpg" />
<div class="caption">
<h3>
Another Title</h3>
<p>
click for more info</p>
</div>
</a></li>
<li><a href="http://www.google.com">
<img alt="Ceynote" src="Images/ceynote.jpg" />
<div class="caption">
<h3>
Just a Title Here</h3>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>With options set (border_color, overlay_origin, overlay_color, and overlay_text_color,
overlay_speed, overlay_speed_out) : </b></legend>
<ul id="secondGallery" class="image-overlay">
<li><a href="http://www.mozilla.com/">
<img alt="firefox" src="Images/firefox-512-200x200.png" />
<div class="caption">
<h3>
Get Firefox</h3>
</div>
</a></li>
<li><a href="http://www.mozilla.com/">
<img alt="jungle" src="Images/jungle.jpg" />
<div class="caption">
<h3>
Tall Overlay</h3>
<p>
The overlay height is based upon the content it contains</p>
</div>
</a></li>
</ul>
</fieldset>
<br />
<br />
<fieldset>
<legend><b>Advanced Usage, utilizing the <a href="http://plugins.jquery.com/project/metadata">
metadata plugin</a> : </b></legend>
<ul id="thirdGallery" class="image-overlay { overlay_speed: 'slow' }">
<li><a class="{ animate: false, overlay_origin: 'top' }" href="http://www.balupton.com/sandbox/jquery_lightbox_bal/demo/">
<img alt="bamboo" src="Images/bamboo.jpg" />
<div class="caption">
<h3>
Connect to a Lightbox</h3>
<p>
overlay origin is overridden, not animated</p>
</div>
</a></li>
<li><a class="{ overlay_speed: 'fast', overlay_speed_out: 'slow' }" href="http://www.mozilla.com">
<img alt="Ships" src="Images/josh-ships.jpg" />
<div class="caption">
<h3>
'Ships' by Josh Neal</h3>
<p>
different in/out speeds</p>
</div>
</a></li>
<li><a class="{ border_color: 'green', overlay_color: '#ccffcc', overlay_text_color: 'green', overlay_speed: 'fast', always_show_overlay: true }"
href="http://www.mozilla.com/">
<img alt="cypress" src="Images/cypress.jpg" />
<div class="caption">
<h3>
Digg This!</h3>
<p>
colors, overlay speed overridden, overlay always open</p>
</div>
</a></li>
</ul>
</fieldset>
<script type="text/javascript">
// JavaScript for the Image Overlay galleries.
$("#firstGallery").ImageOverlay();
$("#secondGallery").ImageOverlay({ border_color: "#FF8000", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000", overlay_speed: 'fast', overlay_speed_out: 'slow' });
$("#thirdGallery").ImageOverlay();
</script>
</form>
</body>
</html>
============================================================================
CSS :
.image-overlay { list-style: none; text-align: left; }
.image-overlay li { display: inline; }
.image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; }
.image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; }
.image-overlay a
{
margin: 9px;
float: left;
background: #fff;
border: solid 2px;
overflow: hidden;
position: relative;
}
.image-overlay img
{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.image-overlay .caption
{
float: left;
position: absolute;
background-color: #000;
width: 100%;
cursor: pointer;
/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
longtime IE abuse of it, so opacity is not offically supported - use at your own risk.
To play it safe, disable overlay opacity in IE. */
/* For Firefox/Opera/Safari/Chrome */
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.image-overlay .caption h1, .image-overlay .caption h2, .image-overlay .caption h3,
.image-overlay .caption h4, .image-overlay .caption h5, .image-overlay .caption h6
{
margin: 10px 0 10px 2px;
font-size: 20px;
font-weight: bold;
padding: 0 0 0 5px;
}
.image-overlay p
{
text-indent: 0;
margin: 10px;
font-size: 1em;
}
Downloads :
Visit this link to download .js files and images files and live example of implementation in many ways.
http://jayeshsorathia.blogspot.com/2012/12/image-overlay-using-jquery-plugin-with-asp-net.html