Fill parent div with the image being hovered over - javascript

I am still fairly new to JS, and I am trying to replace the HTML of a div with a picture that is being moused over, and when the mouse leaves I want it to return to it's normal state. I thought that I did everything right but my code doesn't seem to be working. I've looked through stack overflow and I see a lot of jQuery solutions to my 'problem,' but I would like an answer in pure JavaScript (I'm trying to "maser" this first), along with an explanation so I can understand why the answer IS the answer. Thanks.
I'll try to explain myself (my code). I grabbed reference to the image holder, and I grabbed reference to the the images. I thought I made a function that looped through the array of images and added an event listener to whichever image ( image[i] ) was being moused over. Then, I added an event listener that is supposed to return the image holder to it's default state by inserting the original HTML. I just don't understand how to fix this.
var holder = document.getElementById('holder');
var images = document.getElementsByTagName('img');
var popImage = function () {
for (i = 0; i < images.length; i++) {
images[i].addEventListener('mouseover', = function () {
holder.innerHTML = images[i];
});
images[i].addEventListener('mouseout', function () {
holder.innerHTML =
'<div class='col-md-3 img-fluid' id='img1'><img src='photo1.jpg'></div>
<div class='col-md-3 img-fluid' id='img2'><img src='photo2.jpg'></div>
<div class='col-md-3 img-fluid' id='img3'><img src='photo3.2.jpg'></div>
<div class='col-md-3 img-fluid' id='img4'><img src='photo4.jpg'></div>'
});
};
};
popImage();

You said you are new to JS and just learning which is great but an important part of learning JS is learning when not to use it. As #Yoda said if this was for production you really should use CSS instead of JS.
Here is one way you could accomplish this with pure CSS
<style>
.img {
width: 100px;
height: 100px;
background: #bada55;
border: 2px solid #333;
float: left;
}
.holder:hover > .img {
opacity: 0;
}
.holder:hover > .img:hover {
opacity: 1;
}
</style>
<div class="holder">
<!-- Using div.img for simplicity, these whould be your <img/> tags -->
<div class="img">1</div>
<div class="img">2</div>
<div class="img">3</div>
<div class="img">4</div>
</div>
For the purpose of learning, here's how you'd do it in JS:
var holder = document.getElementById('holder');
var images = document.querySelectorAll('.img');
var filter = false;
function popImage () {
// Use for (var i = 0 . . .
// Instead of for (i = 0 . . .
// Because without var, i will be stored in the global scope
for (var i = 0; i < images.length; i++) {
(function (_i) {
images[_i].addEventListener('mouseover', function () {
holder.innerHTML = '';
// We can't set innerHTML to images[_i]
// because it's a DomNode not a string
holder.appendChild(images[_i]);
});
})(i);
}
holder.addEventListener('mouseout', function (e) {
if (e.target !== holder)
return;
holder.innerHTML = '';
// Again, use var j = 0 . . .
for (var j = 0; j < images.length; j++) {
holder.appendChild(images[j]);
}
});
}
popImage();
.img {
width: 100px;
height: 100px;
background: #bada55;
border: 2px solid #333;
display: inline-block;
}
#holder {
position: relative;
width: 100%;// So doesn't collape and trigger mouseout
height: 100px;
background: red;
padding: 20px 0;
}
<div id="holder">
<!-- Again, these would be your image tags -->
<div class="img">1</div>
<div class="img">2</div>
<div class="img">3</div>
<div class="img">4</div>
</div>

I had 10 mins before leaving work so I had a crack at this to see how I would do it and give you some ideas.
Here is my implementation (https://jsfiddle.net/hg7s1pyh/)
I guess the main thing here is that I've broken it down into lots of smaller parts, this makes solving problems far easier, each method is concerned with doing one thing only.
You will also note the use of classes to show and hide content rather than removing it entirely, this takes lots of the arduous work out of this feature.
function attachEvents() {
var images = getImages();
images.forEach(function(image) {
attachMouseOverEvent(image);
attachMouseLeaveEvent(image);
});
}
function attachMouseOverEvent(element) {
element.addEventListener('mouseover', function(e) {
var clonedImage = e.target.cloneNode();
addImageToPreview(clonedImage);
});
}
function attachMouseLeaveEvent(element) {
element.addEventListener('mouseleave', function(e) {
removeImageFromPreview();
});
}
function getImages() {
return document.querySelectorAll('.js-image');
}
function getImagePreviewElement() {
return document.querySelector('.js-image-box');
}
function addImageToPreview(imageElement) {
var previewElement = getImagePreviewElement();
previewElement.classList.add('previewing');
previewElement.appendChild(imageElement);
}
function removeImageFromPreview() {
var previewElement = getImagePreviewElement();
previewElement.classList.remove('previewing');
var image = previewElement.querySelector('.js-image');
image.remove();
}
attachEvents();
.image-box {
position: relative;
min-height: 400px;
width: 400px;
border: 1px solid #000;
text-align: center;
}
.image-box .placeholder {
position: absolute;
top: 50%;
text-align: center;
transform: translateY(-50%);
width: 100%;
}
.image-box.previewing .placeholder {
display: none;
}
.image-box .image {
position: absolute;
top: 50%;
text-align: center;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}
.images {
margin-top: 10px;
}
<div class="js-image-box image-box">
<div class="placeholder">
Placeholder
</div>
</div>
<div class="images">
<div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/350x150"></div>
<div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/150x150"></div>
<div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/400x400"></div>
<div class="col-md-3 img-fluid"><img class="js-image image" src="http://placehold.it/350x150"></div>
</div>

Related

How to add play-pause functionality to a dynamic element of a webpage

I have officially exhausted my thought capabilities of this one (probably because I'm a noob to javascript) but I have a webpage where all of the elements are dynamically created from a database on that site. I have the ability for people to post videos and I want to create my own player so that I can add the functionality I want to the page. Thing is that because the elements are dynamically created I can't really use a specific ID and so I append numbers onto the end I have it so I can grab the dynamic id's and I can even get it so they all play the first vid on the page however, I can't seem to assign the play pause functionality to my buttons dynamically. here is the html I'm trying to adjust
{% if post.clip %}
<div class="container">
<div class="overlay c-vid">
<video class="vid" playsinline="playsinline" width=100%>
<source src="{{ post.clip.url }}" poster="/media/sample.jpg" type='video/mp4'>
Your browser does not support the video tag.
</video>
<div class="vid-controls">
<div class="vid-bar">
<div class="vid-bar-fill">
</div>
</div>
<div class="vid-buttons">
<button id="play-pause{{ forloop.counter }}"></button>
</div>
</div>
</div>
</div>
{% endif %}
this is the css
.vid{
width: 100%;
}
.c-vid{
width: 100%;
max-width: 800px;
position: relative;
overflow: hidden;
}
.c-vid:hover .vid-controls {
transform: translateY(0);
}
.vid-controls {
display: flex;
position: absolute;
bottom: 0%;
width:100%;
flex-wrap: wrap;
background: rgba(0,0,0,0.5);
transform: translateY(100%) translateY(-2px);
transition: all 0.1s;
}
.vid-buttons button {
background: none;
border: 0;
outline: 0;
cursor: pointer;
}
.vid-buttons button:before {
content: '\f144';
font-family: 'Font Awesome 5 free';
width: 30px;
height: 30px;
display: inline-block;
font-size: 28px;
color: #fff;
-webkit-font-smoothing: antialiased;
}
.vid-buttons button.play:before {
content: '\f144';
}
.vid-buttons button.pause:before {
content: '\f28b';
}
.vid-bar {
height: 10px;
top: 0;
left: 0;
width: 100%;
}
.vid-bar-fill {
height: 10px;
background-color: orangered;
}
and this is the javascript player I am trying to get to work
let video = document.getElementsByTagName('video');
let filling = document.querySelector('.vii-bar-fill');
let PABtn = document.getElementsByTagName('button');
let btn = [];
for (var i = 0; i < PABtn.length; i++) {
if (PABtn[i].getAttribute("id") !== null)
{
let xBtn = PABtn[i].getAttribute("id");
//console.log(i + xBtn);
let ibtn = document.getElementById(xBtn);
//console.log(btn);
btn.push(ibtn);
//console.log(btn)
}
}
//console.log(video)
//console.log(btn)
function togglePlayPause(a) {
//console.log("a="+a)
if(video.paused){
a.className = "pause";
video.play();
}
else {
a.className = "play";
video.pause();
}
}
for (i = 0; i < btn.length; i++){
let xBtn = btn[i].id
let iBtn = document.getElementById(xBtn)
iBtn.addEventListener("click", function (iBtn) {
togglePlayPause (iBtn);
});
}
for (i = 0; i < video.length; i++){
video[i].addEventListener("timeupdate", function() {
var fillPos = video[i].currentTime / video[i].duration;
filling.style.width = fillPos * 100 + "%";
});
}
any help or insight would be appreciated, just know these objects instantiate from django from a database in a for loop. I can get the videos and if I use the native player I can even play each individually but I want to program the player for better look and control than the default player.
So I found a way to do it but I'm not sure it's the simplest or most functional way. here is my end javascript
let video = document.querySelectorAll('.vid');
let filling = document.querySelector('.vid-bar-fill');
let btn = document.querySelectorAll("button[id]")
console.log(btn)
console.log(video)
function togglePlayPause(a) {
let xVid = a.srcElement.offsetParent.offsetParent.children[0]
if(xVid.paused){
a.srcElement.className = "pause";
xVid.play();
}
else {
a.srcElement.className = "play";
xVid.pause();
}
}
for (i = 0; i < btn.length; i++) {
let xBtn = btn[i]
//let xVid = video[i]
btn[i].addEventListener("click", function (xBtn) { //xVid wouldn't add here
togglePlayPause (xBtn);
});
}
so basically I just fed the button identifier through to the function, from there I was able to drill up then drill down the attributes I needed until I finally found the video attribute for the button attribute and that allowed the individual movie to play for the individual button. For some reason using btn.indexOf never worked, trying to feed 2 arguments into the anonymous function never worked and I'm not sure exactly why. But this works and so I'm satisfied. If anyone has any other suggestions I'd be more than happy to try and clean up this code a bit more.

My script is not showing whats truly visible element wise

I found posts and online articles on how to do something like this but most examples are not in plain JavaScript. So this script works almost perfectly if all the sections are the same height for example 220px. So I thought I was getting closer in having this script working how I want it to work like overtime but then I realize
it had flaws when I decided to change the sections height and play around with the code more to see if it had any flaws that I was unaware of so basically this script is designed to output the name
of the sections that are visible but it is not showing the correct output for example if section 1 is the only one that is visible in the div it will say section-1 if multiple sections are visible it will say for example section-1,section-2 etc. Basically it should work like this regardless of the sections height
I know I have to change the code or altered it but I'm getting more confused the more I play around with it so how can I pull this off so I can always have the correct output? If I have to change my code completely to be able to do this then I don't mind.
This is my code
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('#building').addEventListener('scroll',whichSectionsAreInSight);
function whichSectionsAreInSight(){
var building= document.querySelector('#building');
var top = building.scrollTop;
var bottom = top+building.offsetHeight;
var arr = [];
Array.prototype.forEach.call(
building.querySelectorAll('#building .sections'),
function(sections){
if ((sections.offsetTop < top && top <sections.offsetTop+sections.offsetHeight) || (sections.offsetTop < bottom && bottom < sections.offsetTop+sections.offsetHeight)){
arr.push(sections.id);
}
}
);
document.querySelector('#status').innerHTML = arr.join(',')
}
whichSectionsAreInSight();
});
h1{
margin: 0;
text-align: center;
}
#building{
background-color: gray;
height: 200px;
width: 200px;
overflow: auto;
}
.sections{
height: 80px;
width: 100%;
}
#section-1{
background-color: dodgerblue;
}
#section-2{
background-color: gold;
}
#section-3{
background-color: red;
}
#section-4{
background-color: gray;
height: 220px;
}
<p id='status'></p>
<div id='building'>
<div id='section-1' class='sections'><h1>Section 1</h1></div>
<div id='section-2' class='sections'><h1>Section 2</h1></div>
<div id='section-3' class='sections'><h1>Section 3</h1></div>
<div id='section-4' class='sections'><h1>Section 4</h1></div>
</div>
You were pretty close!
First off, you need to set the parent element to position:relative otherwise the parent that is being measured against is the document.
Also, the algorithm is simpler than what you had. Just make sure that the top of the element is less than the bottom of the parent, and the bottom of the element is greater than the top of the parent.
In your case this is offsetTop < bottom and offsetTop + offsetHeight > top
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#building').addEventListener('scroll', whichSectionsAreInSight);
function whichSectionsAreInSight() {
var building = document.querySelector('#building');
var top = building.scrollTop;
var bottom = top + building.offsetHeight;
var arr = [];
Array.prototype.forEach.call(
building.querySelectorAll('#building .sections'),
function(section) {
if (section.offsetTop < bottom && section.offsetTop + section.offsetHeight > top) {
arr.push(section.id);
}
}
);
document.querySelector('#status').innerHTML = arr.join(',')
}
whichSectionsAreInSight();
});
h1 {
margin: 0;
text-align: center;
}
#building {
background-color: gray;
height: 200px;
width: 200px;
overflow: auto;
position: relative;
}
.sections {
height: 80px;
width: 100%;
}
#section-1 {
background-color: dodgerblue;
}
#section-2 {
background-color: gold;
}
#section-3 {
background-color: red;
}
#section-4 {
background-color: gray;
height: 220px;
}
<p id='status'></p>
<div id='building'>
<div id='section-1' class='sections'>
<h1>Section 1</h1>
</div>
<div id='section-2' class='sections'>
<h1>Section 2</h1>
</div>
<div id='section-3' class='sections'>
<h1>Section 3</h1>
</div>
<div id='section-4' class='sections'>
<h1>Section 4</h1>
</div>
</div>

Function to count number of line breaks acts differently on $(window).on('resize') and $(document).ready

I have a function which counts the number of line breaks in a div, depending on the width of the window. While the functions works fine when placed in the $(window).on('resize') function, it does not work when put in $(document).ready() function. I want it to work right on page load, and also window resize, how do I support both?
JSFiddle
Javascript/jQuery:
// functions called in both document.ready() and window.resize
$(document).ready(function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Ready");
});
$(window).on('resize', function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Number of lines: " + lineCount);
});
// calculates the amount of lines required to hold the items
function getLineCount() {
var lineWidth = $('.line').width();
var itemWidthSum = 0;
var lineCount=1;
$('.item').each(function(index, element) {
if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
itemWidthSum = itemWidthSum + $(element).outerWidth();
} else {
lineCount++;
itemWidthSum = $(element).outerWidth();
}
});
return lineCount;
}
// overlays rows for the amount of linebreaks
function postItems(lineCount){
var container = $('<div />');;
for(var i = 1; i <= lineCount; i++) {
container.append('<div class="line">' + i + '</div>');
}
$('.line-wrap').html(container);
}
You'll see at the start of the page, it incorrectly shows 17 lines, and then once you resize it will show the correct amount.
The issue lies in the first line of getLineCount(). Originally you had
var lineWidth = $('.line').width();
but no elements with the class "line" exist yet on your page (since they get added in your postItems() method. I changed it to
var lineWidth = $(".container").width();
instead, and now your code should be working. Snippet posted below:
$(document).ready(function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Ready");
});
$(window).on('resize', function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Number of lines: " + lineCount);
});
// calculates the amount of lines required to hold the items
function getLineCount() {
var lineWidth = $('.container').width();
var itemWidthSum = 0;
var lineCount=1;
$('.item').each(function(index, element) {
if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
itemWidthSum = itemWidthSum + $(element).outerWidth();
} else {
lineCount++;
itemWidthSum = $(element).outerWidth();
}
});
return lineCount;
}
// overlays rows for the amount of linebreaks
function postItems(lineCount){
var container = $('<div />');;
for(var i = 1; i <= lineCount; i++) {
container.append('<div class="line">' + i + '</div>');
}
$('.line-wrap').html(container);
}
body {
text-align:center;
}
.answer {
position: fixed;
left: 0;
bottom: 0;
}
.container {
position: relative;
width: 50%;
margin: 0 auto;
border: 1px solid #e8e8e8;
display: inline-block;
}
.item {
height: 50px;
padding:0 10px;
background-color: #aef2bd;
float: left;
opacity:0.2;
white-space: nowrap;
}
.line-wrap {
position: absolute;
border: 1px solid red;
width: 100%;
height: 100%;
top:0; left: 0;
}
.line {
height: 50px;
width: 100%;
background-color: blue;
opacity:0.5;
color: white;
transition: all 0.5s ease;
}
.line:hover {
background-color: yellow;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item-wrap">
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
</div>
<div class="line-wrap">
</div>
</div>
<h1 class="answer"></h1>

Show only a few users and hide others

Can anyone explain how to make a user list like as shown in the image below...
I'm making a project in Meteor and using Materialize for template and I want to display the list of assigned users. If there are more than a particular count(say 5) of users i want them to be displayed like on that image... I have tried googling this and haven't found anything useful. I also checked the Materialize website and found nothing useful. So if anyone has an idea please help share it.
Ok so this is the output html, in this case i only have one member but in real case I will have more:
<div class="row"> ==$0
<label class="active members_padding_card_view">Members</label>
<div class="toolBarUsers flex" style="float:right;">
<dic class="other-profile" style="background-color:#f06292;">
<span>B</span>
</div>
This is the .js code
Template.profile.helpers({
randomInitials: function () {
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var nLetter = chars.charAt(Math.floor(Math.random()*chars.length));
var sLetter = chars.charAt(Math.floor(Math.random()*chars.length));
return nLetter + sLetter;
},
tagColor: function () {
var colors = ["#e57373","#f06292","#ba68c8","#9575cd","#7986cb","#64b5f6","#4fc3f7","#4dd0e1","#4db6ac","#81c784","#aed581","#dce775","#fff176","#ffd54f","#ffb74d","#ff8a65","#a1887f","#e0e0e0","#90a4ae"];
return colors[Math.floor(Math.random()*colors.length)];
},
randomAllowed : function(possible) {
var count = Math.floor((Math.random() * possible) + 1);
if(count == 1) {
return;
}
return "none";
},
membersList() {
const instance = Template.instance();
const cardDataId = new Mongo.ObjectID(instance.data.cardData._id.valueOf());
return CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId});
},
memberData: function() {
// We use this helper inside the {{#each posts}} loop, so the context
// will be a post object. Thus, we can use this.xxxx from above memberList
return Meteor.users.findOne(this.lkp_user_fkeyi_ref);
},
showMembers() {
const instance = Template.instance();
const cardDataId = new Mongo.ObjectID(instance.data.cardData._id.valueOf());
let membersCount = CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId}).count();
////console.log(membersCount);
if (membersCount > 0) {
$('.modal-trigger').leanModal();
return true;
} else {
return false;
}
},
});
Right now if I add a lot of users I get this:
This can be done in many ways, but I've used CSS Flexbox.
I've used two <div>s one contains single user circles having class .each-user that is expanding (for reference I've taken 6) and another contains the total number of users having class .total-users.
It's a bit confusing but if you look into my code below or see this Codepen you'll get to know everything.
html, body {
width: 100%;
height: 100%;
margin: 0;
font-family: Roboto;
}
.container {
display: flex;
align-content: center;
justify-content: center;
margin-top: 20px;
}
/* Contains all the circles */
.users-holder {
display: flex;
}
/* Contains all circles (those without total value written on it) */
.each-user {
display: flex;
flex-wrap: wrap;
padding: 0 10px;
max-width: 300px;
height: 50px;
overflow: hidden;
}
/* Circle Styling */
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.each-user .circle {
background: #00BCD4;
}
.each-user .circle:last-child {
margin-right: 0;
}
/* Circle showing total */
.total-users {
padding: 0;
margin-bottom:
}
.total-users .circle {
background: #3F51B5;
margin: 0;
position: relative;
}
.total-users .circle .txt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
<div class="container">
<div class="users-holder">
<div class="total-users">
<div class="circle">
<span class="txt">+12</span>
</div>
</div>
<div class="each-user">
<div class="circle user-circle"></div>
<div class="circle user-circle"></div>
<div class="circle user-circle"></div>
<div class="circle user-circle"></div>
<div class="circle user-circle"></div>
<!-- Sixth Circle -->
<div class="circle"></div>
</div>
</div>
</div>
Hope this helps!
I've used jQuery. See this https://jsfiddle.net/q86x7mjh/26/
HTML:
<div class="user-list-container">
<div class="total-circle hidden"><span></span></div>
<div class="user-circle"><span>T</span></div>
<div class="user-circle"><span>C</span></div>
<div class="user-circle"><span>U</span></div>
<div class="user-circle"><span>M</span></div>
<div class="user-circle"><span>R</span></div>
<div class="user-circle"><span>Z</span></div>
<div class="user-circle"><span>N</span></div>
<div class="user-circle"><span>O</span></div>
<div class="user-circle"><span>M</span></div>
<div>
jQuery:
var items_to_show = 5;
if($('.user-circle').length > items_to_show){
var hide = $('.user-circle').length - items_to_show;
for(var i = 0; i < hide; i++){
$('.user-circle').eq(i).addClass('hidden');
}
$('.total-circle').removeClass('hidden');
$('.total-circle span').text('+' + hide);
}
So after quite some time I have solved the problem. I am posting my answer here for anyone that will in the future experience a similar issue...
Have a good day!
I have added the following lines of code to my template:
return CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId},{sort: {createdAt: -1}, limit: 3});
diffMembers(){
const instance = Template.instance();
const cardDataId = new Mongo.ObjectID(instance.data.cardData._id.valueOf());
const limit = 3;
const allMembersOnCard = CardDataMembers.find({lkp_card_data_fkeyi_ref: cardDataId}).count();
let remainingMembers = allMembersOnCard - limit;
return remainingMembers;
},
And in the HTML included:
<div class="other-profile" style="background-color:#dedede;">
<span>+{{diffMembers}}</span>
</div>

How to have a clickable text box appear over an image on hover

I have an image inside of a DIV. When a user hovers over the image I would like a white box with 65% opacity to come up from the bottom of the image that would only cover a about 30% of the bottom of the image. In that box would be text that say something like "+ Order Sample" and when the user clicks on that box it would be added to the cart.
Easy enough to handle the adding to cart part it's the css and possibly javascript necessary to make this happen that I'm struggling with. Can someone get me started? Here's what I have so far. This includes edits from first answer.
foreach($array as $key => $value) {
$imgsrc = $value['option_value']. ".jpg" ;
$option_name = $value['option_name'] ;
$fullname = $value['quality'] . " " . $value['color'] ;
$cbpg = $value['cbpg'] ;
$space = $value['space'] ;
print "<div class='colorbook-color-guide-div' onmouseover='showOrderSample();'>" ;
print "<img class='colorbook-color-guide-image js-color-option js-tooltip' nopin='nopin' data-tooltip-content='$option_name' src='/images/uploads/colors/$imgsrc' alt='$option_name' >" ;
print "<div id='orderSample' onclick='hideOrderSample();alert(\"order sample\");' ><b>+ Order Sample</b></div>" ;
print "<p class='colorbook-color-subtitle'>$fullname</p>" ;
//print "<p class='colorbook-color-subtitle'>$cbpg $space</p>" ;
print "</div>" ;
}
And here's the CSS I have.
.colorbook-color-guide-div {
width: 176px;
min-height: 107px;
margin-bottom: 2px;
margin-right: 21px;
cursor: pointer;
float:left;
text-align:center;
}
.colorbook-color-guide-image {
width: 176px;
min-height: 86px;
}
.colorbook-color-subtitle {
font-family: HelveticaNeueLT-Light, Museo-500, Helvetica, Arial, sans-serif;
font-style: normal ;
font-weight:600 ;
font-size: 13px ;
font-size: 1.3rem ;
color: #929496 ;
margin-top: -3px;
}
#orderSample {
height:0px;
top:100px;
width:176px;
display:block;
overflow:hidden;
background:white;
opacity:.65;
}
And the JavaScript
function showOrderSample() {
var element = document.getElementById("orderSample");
element.style.height = "30px";
element.style.top = "70px";
}
function hideOrderSample() {
setTimeout(function () {
document.getElementById("orderSample").style.height = "0px";
}, 500);
}
My example uses just JavaScript, html and fixed sizes but it does what was asked for.
Look at the Fiddle here:
https://jsfiddle.net/ag7to93q/9/
<script>
function showOrderSample(element) {
element.children[1].style.height = "30px"; // access the second child of the div element
element.children[1].style.top = "70px";
}
function hideOrderSample(element, event) {
if (event && event.target.classList.contains("hoverDiv")) {
alert("buy buy buy!");
setTimeout(function () {
element.children[1].style.height = "0px";
}, 200);
}
else {
// do something here
}
}
</script>
<div style="position:absolute;top:50px;left:50px;width:200px;height:100px;background:green;" onmouseenter="showOrderSample(this);" onclick="hideOrderSample(this, event);" onmouseleave="hideOrderSample(this, event);" >
<img style="position:absolute;height:100px;width:200px;" src="https://jsfiddle.net/img/logo.png" ></img>
<div id="orderSample" class="hoverDiv" style="position:absolute;height:0px;top:100px;width:200px;display:block;overflow:hidden;background:white;opacity:.65;"><b>+ Order Sample<b>
</div>
</div>
Look at the following jsFiddle. Keep in mind accurate answers require more detail, so based on your question I came up with an approximate (hopefully as accurate as possible) response. Let me know if it helped in getting you closer to where you want to be, we can work on something closer if needed.
HTML:
<div class="popup-overlay--gray">a</div>
<a class="popup-btn__open" href="#">Open Popup</a>
<div>
<a class="popup-btn__close" href="#">Close Popup</a>
<img class="popup" src="http://placehold.it/300x300"/>
</div>
CSS
[class*="popup-btn"] { text-decoration: none; color: white; background-color: gray; }
.popup-btn__close { top: 0; right: 0; }
.popup { display: none; }
.popup-overlay--gray { position: absolute: width: 100%; height: 100%; background-color: #333; opacity: 0.7; z-index: 1000; }
jQuery 2.1.3
var timer,
delay = 500;
$(".show-popup").hover(function(){
// on mouse in, start a timeout
timer = setTimeout(function(){
// showing the popup
$('.popup').fadeIn(500);
}, delay);
}, function() {
// on mouse out, cancel the timer
clearTimeout(timer);
});
Fiddle
Jquery solution
$('document').ready(function () {
$('#myimage').hover(
//hover in
function () {
$("#backgroundDIv").css('z-index', 101);
},
//hover out
function () {
$("#backgroundDIv").css('z-index', 99);
});
});
HTML
<div id="mainDiv">
<img id="myimage" src="http://i48.fastpic.ru/big/2013/0606/5c/aa5f8d03b34f8e79f18c07343573bc5c.jpg" />
<input type="text" value="add me" id="backgroundDIv"/>
</div>
CSS
#myimage {
z-index:100;
position: absolute;
}
#backgroundDIv {
z-index=99;
position: absolute;
top:200px;
background-color:#fff200;
opacity:0.4;
}

Categories