I want to be able to display an overly of the player name and have the entire box linked to his profile. I am trying to achieve this in jQuery but haven't had much luck. The a tag has styling on it so it extends to 100% of the width and height of the div.
It doesn't seem to be working - I need a second pair of eyes on as I'm probably missing something obvious.
I have this HTML structure
<div class="player">
<a href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
and this CSS
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
height: 100%;
max-width: 100%;
z-index: 12;
}
.player__name {
position: absolute;
top: 0;
left: 0;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
width: 100%;
height: 100%;
z-index: 10;
}
.player__thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.player__thumbnail img {
width: 100%;
max-width: 100%;
height: auto;
}
and the jQuery
$(document).ready(function(){
$('.player').hover(
function () {
$(this).closest('a').show();
},
function () {
$(this).closest('a').hide();
}
);
});
You don't need javascript to do that...just adjust the positioning.
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
}
.player:hover a {
display: block;
}
<div class="player">
<a href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="http://www.fillmurray.com/250/250" alt="player desc" />
</div>
</div>
$.closest() searches through an element's parents, not its children. You should probably use $('a', this) to select the child <a> element.
Change html to
<div class="player">
<a id="name" href="/player?PlayGuid=123">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
And Javascript to
$(document).ready(function() {
$('.player').hover(function() {
$('#name').toggle('display');
});
});
See if this helps you have tried to use your code to make it work.(For some reason this works for the first time. U got to re run this)
$(document).ready(function(){
$('.player').hover(
function () {
$(this).append($("a").html());
},
function () {
var ss = $(".player__name");
ss.remove();
}
);
});
.player {
position: relative;
z-index: 1;
max-width: 250px;
width: 250px;
height: 250px;
max-height: 250px;
text-align: center;
cursor: pointer;
}
.player a {
display: none;
height: 100%;
max-width: 100%;
z-index: 12;
}
.player__name {
position: absolute;
top: 0;
left: 0;
background-color: rgba(44, 42, 102, 0.6);
color: #FFFFFF;
width: 100%;
height: 100%;
z-index: 10;
}
.player__thumbnail {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.player__thumbnail img {
width: 100%;
max-width: 100%;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="player">
<a href="/player?PlayGuid=123" id="play1">
<div class="player__name">
<h4>Player Name</h4>
</div>
</a>
<div class="player__thumbnail">
<img src="player.jpg" alt="player desc" />
</div>
</div>
Related
I wanted to achieve animation as shown in this video link.
https://drive.google.com/open?id=1nI4csjzv-jlIWORlEkgN5hWM_7qCcZSH
I am new to web development. Can anyone give me some idea to achieve it?
Thanks
Just mouse hover on my example to have a snippet to start over, mate:
div {
display: inline-block;
}
div.line-container, div.circle {
float:left;
}
div.line-container {
height: 50px;
width: 50px;
position: relative;
}
div.circle {
background-color: green;
border-radius: 50%;
width: 50px;
height: 50px;
}
div.line {
background: #999;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
}
div.line2 {
background: red;
position: absolute;
top: 50%;
left: 0;
right: 100%;
height: 1px;
transition: all 1s;
z-index: 5;
}
div.container:hover div.line2 {
right: 0;
}
<div class="container">
<div class="circle"></div>
<div class="line-container">
<div class="line"></div>
<div class="line2"></div>
</div>
<div class="circle" />
</div>
I have a Document viewer with .less file having:
div.document-previewer-container {
//height: 400px;
//width: 300px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
//padding: 5px 2px;
> div.document-preview {
height: 88%;
//width: 100%;
position: relative;
.document-container, .text-container, video, iframe, pre {
height: 100%;
width: 100%;
position: relative;
}
.document-container > img {
max-height: 100%;
max-width: 100%;
}
.text-container pre {
margin: 0;
padding: 0;
}
.doc-overlay {
width: 95%;
height: 95%;
position: absolute;
cursor: pointer;
top: 0;
p {
padding: 2px;
}
}
}
}
My html is
<div class="document-previewer-container">
<div class="document-preview">
<h3 ng-click="vm.openPDF()">yu</h3> <----- THIS CLICK IS WORKING
<div class="document-container">
<!-- PDF show in iframe -->
</div>
<div class="doc-overlay" ng-click="vm.openPDF()"> <---- THIS CLICK ISN'T becuse if is hidden by iframe
<!-- any content is shown on the top of PDF file in chrome only, not in IE -->
</div>
</div>
</div>
</div>
My click event is working on tag but not when clicked on div with css class 'doc-overlay'.
How to handle it
I am using Foxit Reader plugin for IE11
Update1
I found this question which I think is happening with me. The iframe is overlapping .doc-overlay and hence the click isn't working.
Any suggestions for this please
Actually this is a CSS issue. You have used SCSS format that is why DOM is unable to find class "doc-overlay".
You can use this CSS, it will work fine.
div.document-previewer-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
div.document-previewer-container> div.document-preview {
height: 88%;
position: relative;
}
div.document-previewer-container> div.document-preview .document-container, .text-container, video, iframe, pre {
height: 100%;
width: 100%;
position: relative;
}
div.document-previewer-container> div.document-preview .document-container > img {
max-height: 100%;
max-width: 100%;
}
div.document-previewer-container> div.document-preview .text-container pre {
margin: 0;
padding: 0;
}
div.document-previewer-container> div.document-preview .doc-overlay {
width: 95%;
height: 95%;
position: absolute;
cursor: pointer;
top: 0;
}
div.document-previewer-container> div.document-preview .doc-overlay p {
padding: 2px;
}
I'm using ng-repeat to display some messages, and I'm trying to make the "message_area" scrollable as the messages naturally cause overflow over time, but my code doesn't work as expected.
<div class="main_area">
<div id = "message_area" ng-repeat = "message in selected_conversation_object.messages.slice().reverse()">
<div class="message_container" ng-if = "message.sender != me._id">
<div class="message_received">{{message.message}}</div>
</div>
<div class="message_container" ng-if = "message.sender == me._id">
<div class="message_sent_by_me">{{message.message}}</div>
</div>
</div>
</div>
.main_area {
position: absolute;
top: 0;
bottom: 0;
left: 325px;
right: 0;
height: 100%;
background: white;
}
#message_area {
position: relative;
overflow-y: scroll;
}
.message_container {
position: relative;
width: 100%;
height: 30px;
}
.message_received {
}
.message_sent_by_me {
position: relative;
background-color: #0084FF;
border-radius: 5px;
width: 100px;
color: white;
float: right;
}
I've not been able to understand why my code does not work.
Any suggestions would be appreciated.
You need to set min-height for the #message_area selector.
#message_area {
position: relative;
min-height: 50px; // Add This.
overflow-y: scroll;
}
Use scroll to your .main_area. When the ever the data gets more than the given height it manages it with scroll bar on y-axis.
.main_area {
position: absolute;
top: 0;
bottom: 0;
left: 325px;
right: 0;
height: 100%;
background: white;
**overflow-y: scroll;**
}
Working Plunker.
When I have loaded my page my containers: '.lightbox-prev, .lightbox-next' load however I only want them to be visible when the '.lightbox-trigger' is clicked.
My HTML:
<div class="lightboxbg"></div>
<div class="lightbox-prev"></div>
<div class="lightbox-next"></div>
<div class="lightbox"></div>
My CSS:
div.lightbox{
position: absolute;
top: 25%;
left: 45%;
background: center no-repeat #fff;
width: 400px;
height: 600px;
padding: 10px;
z-index: 1001;
display: none;
}
div.directionslightbox{
position: absolute;
top: 10%;
left:18%;
background:url("../Map_Background_Web.png"); center;
background-repeat: no-repeat;
background-size: cover;
width: 65%;
height: 80%;
padding: 10px;
z-index: 1001;
display: none;
}
div.lightboxbg{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
z-index: 1000;
display: none;
}
.lightbox-prev, .lightbox-next {
position: absolute;
top: 0;
bottom: 0;
width: 250px;
background: center no-repeat red;
z-index: 1001;
cursor: pointer;
}
.lightbox-prev {
left: 0;
background-image: url("../previous.png");
}
.lightbox-next {
right: 0;
background-image: url("../next.png");
}
My JS:
<script type="text/javascript">
var lightboxcounter;
$(document).ready(function(){
$('.lightbox-trigger').click(function() {
lightboxcounter = $(this).attr('data-counter');
var image = $(this).attr('data-img')
$('.lightbox').css('background-image', 'url(' + image + ')');
$('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeIn(800);
});
$('.lightboxbg').click(function() {
$('.lightboxbg, .lightbox, .lightbox-prev, .lightbox-next').fadeOut(800);
});
$('.lightbox-prev').click(function() {
lightboxcounter--;
$('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
});
$('.lightbox-next').click(function() {
lightboxcounter++;
console.log(lightboxcounter);
$('.lightbox-trigger[data-counter="'+lightboxcounter+'"]').click();
});
});
</script>
If anyone could help, I would most appreciate it, it's been bugging me all day!
Cheers
You are already using fadeIn to display the controls so all you need to do is hide them initially.
Add this to your CSS...
.lightbox-prev, .lightbox-next {
display: none;
}
Problem:
On hover div .galleryIndex will be "filled" with div .galleryHover. .galleryIndex has width in percentage and doesn't have fixed height. I want to put div .white_line_gallery_hover at the bottom of div .galleryHover.
HTML:
<div class="galleryIndex">
<img src="images/galleryIndex1.png" class="imageResponsive" />
<div class="galleryHover">
<img src="images/kotacGalerija.png" class="imageResponsive" />
<div class="white_line_gallery_hover">
Some text
</div>
</div>
</div>
CSS:
.galleryIndex
{
width: 33.33%;
height: auto;
overflow: hidden;
float: left;
position: relative;
z-index: 1;
}
.galleryHover
{
position:absolute;
top:0;
left:0;
bottom: 0;
width:100%;
height:100%;
background-color: rgba(24, 2, 51, 0.8);
}
.imageResponsive
{
width: 100%;
height: auto;
}
.white_line_gallery_hover
{
width: 90%;
height: 10%;
overflow: hidden;
padding-left: 10%;
font-size: 20px;
line-height: 40px;
background-color: white;
}
Try giving ".white_line_gallery_hover" "position: absolute; bottom: 0" and removing the "height: 10%". This will cause "white_line_gallery_hover" to overlay the bottom portion of the image in "galleryIndex".
See: http://jsfiddle.net/ff22qayv/
.galleryIndex
{
width: 33.33%;
height: auto;
overflow: hidden;
float: left;
position: relative;
z-index: 1;
}
.galleryHover
{
position:absolute;
top:0;
left:0;
bottom: 0;
right: 0;
background-color: rgba(24, 2, 51, 0.8);
}
.imageResponsive
{
width: 100%;
height: auto;
}
.white_line_gallery_hover
{
position: absolute;
bottom: 0;
width: 90%;
overflow: hidden;
padding-left: 10%;
font-size: 20px;
line-height: 40px;
background-color: white;
}
<div class="galleryIndex">
<img src="https://placekitten.com/g/300/300" class="imageResponsive" />
<div class="galleryHover">
<img src="images/kotacGalerija.png" class="imageResponsive" />
<div class="white_line_gallery_hover">
Some text
</div>
</div>
</div>
If this is not what you want, you might consider updating your question with a visual representation of the desired result.