ok, this is my first stab at javascript or coding in general so I hope this isn't too messy. My code is almost where I want it but I have run into one last problem -
I have a scrolling table of images and I'd like the viewer to be able to click each picture to enlarge it individually. I'm trying to do this through the showImage function as follows:
JS:
function showImage(largeimg01) {
document.getElementById("largeimg01").visibility = 'visible';
showLargeImagePanel();
unselectAll();
}
function showImage(largeimg02) {
document.getElementById("largeimg02").visibility = 'visible';
showLargeImagePanel();
unselectAll();
}
function showImage(largeimg03) {
document.getElementById("largeimg03").visibility = 'visible';
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}
HTML:
Leah Gotchel
<!-- javascript here -->
<link href="../wood-site-pagespopup.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="../index.html">
<p id="back"> LEAH GOTCHEL </p></a>
<!-- hidden popup images -->
<div id="largeImgPanel" onclick="hideMe(this);">
<img class="popup" id="largeimg01" src="../images/GUS_4735retweb.jpg" />
</div>
<div id="largeImgPanel" onclick="hideMe(this);">
<img class="popup" id="largeimg02" src="../images/GUS_5034retweb.jpg" />
</div>
<div id="largeImgPanel" onclick="hideMe(this);">
<img class="popup" id="largeimg03" src="../images/GUS_4735retweb.jpg" />
</div>
<div id="largeImgPanel" onclick="hideMe(this);">
<img class="popup" id="largeimg04" src="../images/GUS_4735retweb.jpg" />
</div>
<table>
<tr>
<td><img src="../images/GUS_4735retweb.jpg" id="img01" style="cursor:pointer"
onclick="showImage(largeimg01);"></td>
<td>
<img src="../images/GUS_5034retweb.jpg" id="img02" style="cursor:pointer"
onclick="showImage(largeimg02);">
</td>
<td><img src="../images/GUS_5060retweb.jpg" id="img03" style="cursor:pointer"
onclick="showImage(largeimg03);">
</td>
<td><img src='../images/GUS_5077retweb.jpg'" id="img04" style="cursor:pointer"
onclick="showImage(largeimg04);">
</td>
</tr>
</table>
<p id="caption">custom window bench: oak, poplar </p>
</body>
</html>
CSS:
html, body {
height:100%;
width:100%;
margin:0;}
html {
display:table;
}
body{
display:table-cell;
vertical-align:middle;
}
#back{
font-family: Corbert;
font-style: italic;
font-size: 2em;
color: ##006699;
position: relative;
padding: 30px;
margin-left: 20px;
}
img {
padding: 20px;
width: 500px;
}
a {
color: #006699;
margin: 0 auto;
text-decoration: none;
}
a:hover {
color: #8b98a7;
}
p {
position: fixed;
padding: 30px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
clear: both;
margin-left: 20px;
}
table {
top: 50%
left: 50%
position: absolute;
border:none;
}
.popup {
position: relative;
height: 90%;
width: auto;
overflow: scroll;
}
.largeImgPanel {
text-align: center;
visibility: hidden;
position: fixed;
z-index: 100;
top: 0; left: 0; bottom: 0;
width:100%;
height:100%;
background-color: rgba(100,100,100, 0.5);
}
#largeImg {
height: auto;
max-width: 100%;
}
This code is close to what I found here: How to enlarge a clicked image with plain JavaScript on a mobile device
The popup is functioning - My problem is that, when I call on any one popup, all the popup images appear. The first popup (img01) is blocking the rest so they can't be seen. I think this is because they are all contained in divs with the same "largeImgPanel" id - but if they are not contained in the "largeImgPanel" div then they don't show up at all when I run the function. How can I change the script so that the function applies only to the specific popup image corresponding to the image that is being clicked?
This is my first post so I apologize if it's nonsensical! Any help is much appreciated. Please let me know if I can try to clarify.
All 4 images are named with the same id, largeImgPanel, so all 4 show when that function is called. Change the id to a class (put a dot instead of a # in your css) and give unique ids to your divs, keeping the class there
That should sort you out, but remember to call the relevant id!
EDIT:
Ok, so here's your WORKING (edited!) code
function showImage(imgname){
var mypic=document.getElementById(imgname);
mypic.style.visibility = 'visible';
mypic.style.zIndex = '20';
unselectAll();
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
obj.style.zIndex = '-50';
}
html, body {
height:100%;
width:100%;
margin:0;}
html {
display:table;
}
body{
display:table-cell;
vertical-align:middle;
}
#back{
font-family: Corbert;
font-style: italic;
font-size: 2em;
color: ##006699;
position: relative;
padding: 30px;
margin-left: 20px;
}
td img {
padding: 20px;
width: 500px;
}
a {
color: #006699;
margin: 0 auto;
text-decoration: none;
}
a:hover {
color: #8b98a7;
}
p {
position: fixed;
padding: 30px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
clear: both;
margin-left: 20px;
}
table {
top: 50%
left: 50%
position: absolute;
border:none;
}
.popup {
position: fixed;
text-align: center;
z-index: 0;
overflow-y: scroll;
top: 5px; left: 5px;
background-color: rgba(100,100,100, 0.5);
background-size:100% 100%;
}
#popup1, #popup2, #popup3, #popup4 {
visibility: hidden;
width:800px!important;
padding:25px;
height:auto;
margin:auto;
}
<!doctype html>
<html>
<body>
<a href="../index.html">
<p id="back"> LEAH GOTCHEL </p></a>
<!-- hidden popup images -->
<img class="popup" id="popup1" src="http://www.rachelgallen.com/images/daisies.jpg" alt="daisies" onclick="hideMe(this);" />
<img class="popup" id="popup2" src="http://www.rachelgallen.com/images/snowdrops.jpg" alt="snowdrops" onclick="hideMe(this);"/>
<img class="popup" id="popup3" src="http://www.rachelgallen.com/images/mountains.jpg" alt="mountains" onclick="hideMe(this);"/>
<img class="popup" id="popup4" src="http://www.rachelgallen.com/images/yellowflowers.jpg" alt="yellowflowers" onclick="hideMe(this);"/>
<table>
<tr>
<td><img src="http://www.rachelgallen.com/images/daisies.jpg" alt="daisies" id="img01" style="cursor:pointer"
onclick="showImage('popup1');"></td>
<td>
<img src="http://www.rachelgallen.com/images/snowdrops.jpg" alt="snowdrops" id="img02" style="cursor:pointer"
onclick="showImage('popup2');">
</td>
<td><img src="http://www.rachelgallen.com/images/mountains.jpg" alt="mountains" id="img03" style="cursor:pointer"
onclick="showImage('popup3');"></td>
<td><img src="http://www.rachelgallen.com/images/yellowflowers.jpg" alt="yellowflowers" id="img04" style="cursor:pointer"
onclick="showImage('popup4');">
</td>
</tr>
</table>
<p id="caption">custom window bench: oak, poplar </p>
</body>
</html>
You'll note that your javascript is neatly condensed into three functions, and that your ids are now unique. I got rid of the extra divs, why did you need them anyway, when you could just click on the image to hide it? Over-complicating things. Obviously the images have been replaced with dummy images from my website, but sure it works!
Related
I know there are lots of similar questions but I can't get it to work and hope you can help me.
I have a nested list of items. Mostly simple hrefs but some are links which should call a copy-to-clipboard function and display a success message in as span afterwards.
The message should be displayed above the link and centered. On a desktop with high resolution there is no problem. On mobile,unfortunately showing the span uses space and moves the hrefs + the position is anywhere but above and in the middle.
Using data-tooltip class templates didn't work for me because they normally use "hover". In my case the span should only be displayed after clicking the link and shouldn't mess up the other elements.
function CopyToClipboard(id) {
// do copy stuff here
// [...]
// showing tooltip
var span_element = document.getElementById(id).parentElement.querySelector('span');
if(span_element != null) {
span_element.style.display = "inline";
setTimeout( function() {
span_element.style.display = "none";
}, 2000);
}
}
body {
margin-left: 0px;
}
ul {
padding-left: 20px;
}
div.container {
margin: 10px;
width: 98%;
word-break: break-all;
}
.custom-tooltip {
padding: 4px;
background-color: grey;
color: #fff;
position: relative;
bottom: 2em;
right: 5em;
display: none;
}
<html lang="de" class=" heujtnrdy idc0_345">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.90">
<link rel="stylesheet" href="index_tmp.css">
<script type="text/javascript" src="index_tmp.js"></script>
</head>
<body>
<div class="container">
<ul>
<li>
<span>Layer 1</span>
<ul>
<li>
<span>Layer 2</span>
<ul>
<li>
<span>Layer 3</span>
<ul>
<li>
<div>
<table>
<tr>
<td><a id="uGzkLTVmLY" onclick="CopyToClipboard('uGzkLTVmLY');return false;" href="#">Short text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Looooooooooooooooooong text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
<li>
<div>
<table>
<tr>
<td><a id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;" href="#">Even loooooooooooooooooooooooooooooooooooooooooooooooooooooonger text to copy</a><span class="custom-tooltip">Copied!</span></td>
</tr>
</table>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-- Update 05.02.2023 --
Here my modified CSS, based on granite's alternative solution. This looks like this:
.modal {
display: none;
position: fixed;
padding-top: 50%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
text-align: center;
justify-content: center;
}
.modal-content {
background-color: grey;
border: 0.5px solid grey;
border-radius: 3px;
color: #fff;
text-align: center;
margin: 0 auto;
padding: 2px;
padding-left: 10px;
padding-right: 10px;
font-size: 1.0em;
font-family: monospace;
font-weight: 700;
bottom: 1em !important;
position: fixed;
}
As a secondary option (via modal):
Html: 2 lines code.
CSS: 7 extra lines code.
JS: 10 extra lines code.
Just need to get the JS CopyToClipboard to link up.
<button id="MBtn" id="VF5DVP6tVv" onclick="CopyToClipboard('VF5DVP6tVv');return false;">long text to copy</button>
<div id="Modal" class="modal"><div class="modal-content">Copied!</div></div>
.modal {
display: none;
position: fixed;
padding-top: 25%;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #eff;
text-align:center;
margin: 0 auto;
padding: 3px;
width:4em;
}
var modal = document.getElementById("Modal");
var btn = document.getElementById("MBtn");
btn.onclick = function() {
modal.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
I'm very new to coding and am trying to create a portfolio website.
I have used a pop-up code sourced from W3 Schools.
The idea is that when you click on each small illustration, a full-screen pop-up appears with text. I have been able to do it successfully for one pop-up when you click on the flower.
My problem is, I am now unsure how to do a pop-up for each small illustration with different text.
I have added my code to this post, as well as screenshots of it in the browser to give you a better idea of what it looks like with the illustrations. Website Screenshot Here
Any help would be very much appreciated! I'm very stuck.
/* Open */
function openNav() {
document.getElementById("popup").style.height = "100%";
}
/* Close */
function closeNav() {
document.getElementById("popup").style.height = "0%";
}
/* Universal Styles */
body, html {
width: 100%;
}
body {
font-family: "Montserrat", "Helvetica", san-serif;
color: white;
background-color: #9486f2;
font-weight: 300;
font-size: 18px;
}
/* Navigation */
a {
color: white;
text-decoration: none;
font-size: 20px;
}
a:hover {
color:#adff2f;
font-weight: 400;
letter-spacing: 5px;
}
nav {
text-align: right;
padding-top: 30px;
padding-right: 50px;
float: right;
}
nav div {
padding: 5px 0;
}
/* Logo */
header img {
height: 80px;
padding-left: 50px;
padding-top: 50px;
}
/* Heart & Icons */
.container .rowtop {
text-align: center;
}
#flower {
position: relative;
right: 120px;
cursor: pointer;
height: 100px;
}
#adobe {
position: relative;
left: 190px;
}
.container .rowmiddle {
text-align: center;
}
#code {
position: relative;
bottom: 370px;
right: 30px;
}
#heart {
position: relative;
bottom: 60px;
}
#pudding {
position: relative;
bottom: 330px;
left: 50px;
}
.container .rowbottom {
text-align: center;
}
#certificate {
position: relative;
bottom: 210px;
right: 120px;
}
#tv {
position: relative;
bottom: 200px;
left: 190px;
}
/* Pop-Ups */
/* The Overlay (background) */
.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 0;
width: 100%;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
opacity: 0.95;
background-color: #cc90ec; /* Black w/opacity */
overflow-y: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%; /* 25% from the top */
width: 40%; /* 100% width */
text-align: left; /* Centered text/links */
margin-top: 50px;
font-size: 30px;
line-height: 46px;
margin: 0 auto;
}
/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
color:#adff2f;
}
/* Position the close button (top right corner) */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
/* Wavy Text */
.wavy
{
position: relative;
-webkit-box-reflect: below -12px linear-gradient(
transparent, rgba(0,0,0,0.2));
}
.wavy span
{
position: relative;
display: inline-block;
color: #adff2f;
font-weight: 400;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
}
#keyframes animate
{
0%
{
transform: translateY(0px);
}
10%
{
transform: translateY(-20px);
}
30%,100%
{
transform: translateY(0px);
}
}
/* Footer */
h5 {
font-family: "Montserrat", "Helvetica", san-serif;
color: white;
font-weight: 200;
font-size: 14px;
}
footer {
padding-left: 50px;
position: relative;
bottom: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>Dom Pooley</title>
<script src="main.js" ></script>
<link rel="stylesheet" href="/Users/dominiquepooley/Documents/03_Dom Personal/05_Portfolio/Portfolio 2020/Portfolio2020/resources/css/style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght#0,200;0,300;0,400;0,700;1,200;1,300;1,400;1,700&display=swap" rel="stylesheet">
</head>
<!-- Header -->
<body>
<header class="flex-container">
<img src="/Users/dominiquepooley/Documents/03_Dom Personal/05_Portfolio/Portfolio 2020/Portfolio2020/resources/images/DomPooley_Logo_01.png"">
<nav>
<div>About</div>
<div>Work</div>
<div>Contact</div>
</nav>
</header>
<!-- Heart and Icons -->
<div class="container">
<div class="rowtop">
<img id="flower" src="resources/images/Pansy_01.png" onmouseover="this.src='resources/images/Pansy_02.png' " onmouseout="this.src='resources/images/Pansy_01.png'" onClick="openNav()">
<img src="resources/images/Adobe_01.gif" id="adobe" alt="" height="120">
</div>
<div class="rowmiddle">
<img src="resources/images/Code_01.gif" onmouseover="this.src='resources/images/Code_02.png' " onmouseout="this.src='resources/images/Code_01.gif'" id="code" alt="" height="40">
<img id="heart" height="500" src="resources/images/Dom_Heart_01.png" onmouseover="this.src='resources/images/Dom_Heart_02.png' " onmouseout="this.src='resources/images/Dom_Heart_01.png'"/>
<img src="resources/images/Pudding_01.gif" id="pudding" alt="" height="120">
</div>
<div class="rowbottom">
<img src="resources/images/Certificate_01.gif" id="certificate" alt="" height="100">
<img src="resources/images/TV_01.gif" id="tv" alt="" height="110">
</div>
</div>
<!-- Pop-Ups -->
<!-- The Overlay -->
<div id="popup" class="overlay">
<!-- Button to close the overlay navigation -->
×
<!-- Overlay content -->
<div id="flowerpop" class="overlay-content">
<p>Thanks to COVID-19, I now have a new hobby -I have been growing, picking, pressing and coating flowers in resin to make jewellery. I would include a photo but they still have that "primary school project vibe"...
<br><div class="wavy">
<span style="--i:1;">*</span>
<span style="--i:2;">W</span>
<span style="--i:3;">a</span>
<span style="--i:4;">t</span>
<span style="--i:5;">c</span>
<span style="--i:6;">h</span>
<span style="--i:7;"> </span>
<span style="--i:8;">t</span>
<span style="--i:9;">h</span>
<span style="--i:10;">i</span>
<span style="--i:11;">s</span>
<span style="--i:12;"> </span>
<span style="--i:13;">s</span>
<span style="--i:14;">p</span>
<span style="--i:15;">a</span>
<span style="--i:16;">c</span>
<span style="--i:17;">e</span>
<span style="--i:18;">*</span>
</div></br></p>
</div>
</div>
<!-- Footer Section -->
<footer>
<h5>Copyright Dominique Pooley 2020</h5>
</footer>
</body>
</html>
You have to make a small change in css.
a:hover {
color:#adff2f;
font-weight: 400;
letter-spacing: 5px;
}
You have to remove letter-spacing: 5px; from css file.
then code looks like :
a:hover {
color:#adff2f;
font-weight: 400;
}
based on what you've mentioned, it sounds like you're trying to have a generic pop-up/modal as a HTML element and then when you click on different illustrations it will open the modal and the modal would contain some text related to that illustration that you clicked on.
What you want to do, is keep your modal, which appears to be the #popup element, add an onclick to each illustration that runs a function which dynamically injects some text by targetting the heading where you need the text to be, for example:
toggleModal (title, subtitle) {
const headingEl = document.querySelector('[data-your-heading]')
const subtitleEl = document.querySelector('[data-your-subtitle]')
headingEl.innerText = title
subtitleEl.innerText = subtitle
// run some code to hide/show the modal below here
}
Next, attach the data-your-* attributes to whichever tag you want to update text with, for instance a <p> tag within your generic HTML modal/pop-up.
And then on each of your illustrations, you add an onclick function and pass the arguments of what text you want, for example:
<button type="button" onclick="toggleModal('My Title', 'My Subtitle')">Show Illustration 1</button>
I want to hide and show mulitple images, depending on the input code "places" inside the 'ShowPicture'-function. Please see my full example code below:
<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<style>
body {font-size: 30px; text-align: center; vertical-align: middle}
#containertop {background-color: #808080; width: 100%; position:right}
#parent {display:flex;}
#containercircle {width: 30%;}
#containerimg {background-color: rgba(50,0,50,1);flex:1;}
header, footer {padding: 1em; color: rgba(50,0,50,1);background-color: #808080;clear: left;text-align: center}
#circle {width:100px;float:left;margin:5px; overflow:hidden; height:100px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; background-color:rgba(50,0,50,1); font-size:15px; line-height:100px} #circle:hover{font-size:16.5px;margin:5px;transition: All 0.2s ease-in-out}
.crop {width:40px;height:40px;}
</style>
<script>function ShowPicture(tekst, places){
for (var i = 0, i < places.length; i++) {
var idCust ="pic" + places[i];
var imag = document.getElementById(idCust);
if(imag.style.display === 'block'){
imag.style.display = 'none'; tekst.style.color = '';}
else {
imag.style.display = 'block'; tekst.style.color = 'red';}}}
</script>
</head>
<body>
<header><h1><div id="containertop">header</div></h1></header>
<div id="parent">
<div id ="containercircle" float = "right">
<div id="circle" onclick="ShowPicture(this,1)">Test</div>
</div>
<div id ="containerimg" >
<img id="pic0" class ="crop" src="boor.jpg" style="display:none;"/>
<img id="pic1" class ="crop" src="boor.jpg" style="display:none;"/>
<img id="pic2" class ="crop" src="boor.jpg" style="display:none;"/>
<img id="pic3" class ="crop" src="boor.jpg" style="display:none;"/>
</div>
</div>
<footer><div id="containertop">footer</div></footer>
</body>
</html>
two examples of a "places" code is
"123" and "24"
The function should read off the three numbers separately and hide or show the corresponding "idCust" from the css part. I have made id's in the css that is named "pic1", "pic2", etc.
For some reason, this is not working when I call the "ShowPicture" function after clicking on a div with the "onclick" statement. I got the feeling it has something to do with my for loop.. maybe there is a way to hide/show all together at once, but it should only show the images that correspond to the div I clicked on.
Your problem is that you have an error in your loop the comma in for (var i = 0, i < places.length; i++), should be replaced with a semicolon.
Another thing you were looping on a string and you passed 1 which is a Number so there won't be any loop, you need to pass it as a string in:
onclick="ShowPicture(this,'1')"
Demo:
function ShowPicture(tekst, places) {
for (var i = 0; i < places.length; i++) {
var idCust = "pic" + places[i];
var imag = document.getElementById(idCust);
if (imag) {
if (imag.style.display === 'block') {
imag.style.display = 'none';
tekst.style.color = '';
} else {
imag.style.display = 'block';
tekst.style.color = 'red';
}
}
}
}
body {
font-size: 30px;
text-align: center;
vertical-align: middle
}
#containertop {
background-color: #808080;
width: 100%;
position: right
}
#parent {
display: flex;
}
#containercircle {
width: 30%;
}
#containerimg {
background-color: rgba(50, 0, 50, 1);
flex: 1;
}
header,
footer {
padding: 1em;
color: rgba(50, 0, 50, 1);
background-color: #808080;
clear: left;
text-align: center
}
#circle {
width: 100px;
float: left;
margin: 5px;
overflow: hidden;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: rgba(50, 0, 50, 1);
font-size: 15px;
line-height: 100px
}
#circle:hover {
font-size: 16.5px;
margin: 5px;
transition: All 0.2s ease-in-out
}
.crop {
width: 40px;
height: 40px;
}
<header>
<h1>
<div id="containertop">header</div>
</h1>
</header>
<div id="parent">
<div id="containercircle" float="right">
<div id="circle" onclick="ShowPicture(this,'1')">Test</div>
</div>
<div id="containerimg">
<img id="pic0" class="crop" src="boor.jpg" style="display:none;" />
<img id="pic1" class="crop" src="boor.jpg" style="display:none;" />
<img id="pic2" class="crop" src="boor.jpg" style="display:none;" />
<img id="pic3" class="crop" src="boor.jpg" style="display:none;" />
</div>
</div>
I'm a complete beginner at coding and I've already searched here but I couldn't really find a proper solution to my problem.
I'm trying to get a text to appear in place of the image when I hover over the image with the mouse.
Unfortunately jQuery has to be used, I know it can be done by just using CSS.
So far I have the following which I found on here:
In the head:
<script>
$(function(){
$('.parent').mouseenter(function(){
$(this).children('.child').fadeIn();
}).mouseleave(function(){
$(this).children('.child').fadeOut();
});
});
</script>
In the body:
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
CSS:
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
padding:10px;
display:none;
}
Thank you for an easy tip or explanation on what I'm doing wrong and how I can solve that problem.
Edit:
This is my full code in my PHP file:
echo "
<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<title>Test Blog</title>
<script>
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
</script>
</head>
<body>
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<div class=\"wrapper clearfix\">
<figure class=\"gallery-item\">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class=\"img-title\">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
And there it continues with a dropdown menu routing to the other pages.
The CSS code is in my CSS file which I linked to above (the link is correct since all the other CSS code is working).
$(document).ready(function() {
$('.gallery-item').hover(function() {
$(this).find('.img-title').fadeIn(300);
}, function() {
$(this).find('.img-title').fadeOut(100);
});
});
.gallery {
width: 25em;
margin: 2em auto;
}
.gallery-item {
height: auto;
width: 48.618784527%;
float: left;
margin-bottom: 2em;
position: relative;
}
.gallery-item:first-child {
margin-right: 2.762430939%;
}
.gallery-item img {
width: 100%;
}
.gallery-item:hover .img-title {}
.img-title {
position: absolute;
top: 0;
margin: 0;
height: 100%;
width: 100%;
text-align: center;
display: none;
background-color: #333;
}
.img-title h5 {
position: absolute;
color: #fff;
top: 33%;
width: 100%;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper clearfix">
<figure class="gallery-item">
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'>
<figcaption class="img-title">
<h5>Random text.</h5>
</figcaption>
</figure>
</div>
You have to define the size of the overly - I did that with the position settings below. Also, I erased the opacity setting. Not sure what else you want, but basically it works now.
$(document).ready(function() {
$('.parent').mouseenter(function() {
$(this).children('.child').fadeIn();
}).mouseleave(function() {
$(this).children('.child').fadeOut();
});
});
.parent {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
padding: 10px;
display: none;
}
.child p {
color: white;
text-align: center;
margin-top: 100px;
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image' />
<div class='child'>
<p>Random text.</p>
</div>
</div>
Hope it helps you out.
$(function(){
$('.parent').mouseenter(function(){
//alert();
$(this).children('.child').show().fadeIn(200);//have some timeout for fading in
}).mouseleave(function(){
$(this).children('.child').fadeOut(400);
});
});
.parent
{
position:relative;
}
.child
{
position: absolute;
left: 0;
bottom: 0;
background-color: black;
opacity: 1.0;
padding:10px;
display:none;
/*
add width and height attribute to the elem
*/
width:100%;
height:300px;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
<img src='https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg' alt='image'/>
<div class='child'>
<p>Random text.</p>
</div>
</div>
<marquee>
<div class="client">
<img src="images/c1.png"/>
</div>
<div class="client">
<img src="images/c2.png"/>
</div>
<div class="client">
<img src="images/c3.png"/>
</div>
<div class="client">
<img src="images/c4.png"/>
</div>
<div class="client">
<img src="images/c5.png"/>
</div
><div class="client">
<img src="images/c6.png"/>
</div
><div class="client">
<img src="images/c7.png"/>
</div>
</marquee>
I wanted to scroll these images without using html's marquee tag...please help me.I have used css keyframes but I didn't get what I wanted. These images are in index page bottom side. This is clients logos scrolling from left to right or right to left....thanks in advance.
/*download .js file from here and include it in ur project */
http://technicalpixel.com/post%20sample%20code/Continous%20Horizontal%20JQuery%20Image%20Marquee/assets/js/crawler.js
<head>
<script src="assets/js/crawler.js" type="text/javascript" ></script>
</head>
/* add id to ur div tag */
<div id="marquee">
<div class="client">
<img src="images/c1.png"/>
</div>
<div class="client">
<img src="images/c2.png"/>
</div>
<div class="client">
<img src="images/c3.png"/>
</div>
<div class="client">
<img src="images/c4.png"/>
</div>
<div class="client">
<img src="images/c5.png"/>
</div
><div class="client">
<img src="images/c6.png"/>
</div
><div class="client">
<img src="images/c7.png"/>
</div>
</div>
/* Add this script in ur project in head tag*/
marqueeInit({
uniqueid: 'marquee',
style: {
},
inc: 5, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 2,
neutral: 150,
savedirection: true,
random: true
});
Please try this:
<style type="text/css">
/* Make it a marquee */
.marquee {
width: 450px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 50s linear infinite;
}
.marquee:hover {
animation-play-state: paused
}
/* Make it move */
#keyframes marquee {
0% { text-indent: 27.5em }
100% { text-indent: -105em }
}
/* Make it pretty */
.microsoft {
padding-left: 1.5em;
position: relative;
font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
/* ::before was :before before ::before was ::before - kthx */
.microsoft:before, .microsoft::before {
z-index: 2;
content: '';
position: absolute;
top: -1em; left: -1em;
width: .5em; height: .5em;
box-shadow: 1.0em 1.25em 0 #F65314,
1.6em 1.25em 0 #7CBB00,
1.0em 1.85em 0 #00A1F1,
1.6em 1.85em 0 #FFBB00;
}
.microsoft:after, .microsoft::after {
z-index: 1;
content: '';
position: absolute;
top: 0; left: 0;
width: 2em; height: 2em;
background-image: linear-gradient(90deg, white 70%, rgba(255,255,255,0));
}
/* Style the links */
.vanity {
color: #333;
text-align: center;
font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a, .microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}
.vanity a:hover, .microsoft a:hover {
color: #F65314;
}
/* Style toggle button */
.toggle {
display: block;
margin: 2em auto;
}
</style>
<p class="microsoft marquee"><img src="https://s-media-cache-ak0.pinimg.com/236x/a2/4b/48/a24b48e465e666fffd4cbcaa79107c7c.jpg" /></p>
<button class="toggle">Toggle Beautification</button>
<script type="application/javascript">
$(".toggle").on("click", function () {
$(".marquee").toggleClass("microsoft");
});
</script>
http://jsfiddle.net/jonathansampson/XxUXD/