Just like the title says, I have an element that shouldn't be fading but is. The element in question is text on top of an image that fades when you move your mouse over it.
HTML:
<div id="image-wrapper">
<ul id="team-members">
<li class="tile-wrapper fade">
<div class="tile">
<img src="http://placehold.it/158x210" />
<h3 class="bio bio-header" style="display:none;">Header</h3>
<p class="bio bio-footer" style="display:none;">Information</p>
</div>
</li>
</ul>
jQuery
$(document).ready(function () {
$('.fade').mouseenter(function (ev) {
$(this).fadeTo(150, 0.5);
$(this).find('img').siblings().fadeIn(150);
}).mouseleave(function () {
$(this).fadeTo(150, 1);
$(this).find('img').siblings().fadeOut(150);
});
});
Fiddle: https://jsfiddle.net/oLckb6h3/4/
A suggestion:
HTML
<div id="image-wrapper" >
<ul id="team-members">
<li class="tile-wrapper fade">
<div class="tile">
<div class="doFade"> </div>
<div class="info">
<h3 class="bio bio-header">Header</h3>
<p class="bio bio-footer">Information</p>
</div>
<img src="http://placehold.it/158x210"/>
</div>
</li>
</ul>
</div>
CSS
ul {
list-style-type:none;
}
.bio {
padding:15px;
}
.tile {
width:158px;
height:210px;
border: 1px solid black;
position: relative;
}
.doFade {
position: absolute;
left: 0;
background: #fff;
top: 0;
right: 0;
bottom: 0;
opacity: 0.5;
display: none;
}
.info {
position: absolute;
left: 0;
background: transparent;
top: 0;
right: 0;
bottom: 0;
display: none;
}
jQuery
$(document).ready(function() {
$('.fade').mouseenter(function(ev) {
$('.doFade', this).add( $('.info', this) ).fadeIn(150);
}).mouseleave(function() {
$('.doFade', this).add( $('.info', this) ).fadeOut(150);
});
});
DEMO
Fade the img rather than the .fade element...
$(document).ready(function() {
$('.fade').mouseenter(function(ev) {
$(this).find('img').fadeTo(150, 0.5).siblings().fadeIn(150);
}).mouseleave(function() {
$(this).find('img').fadeTo(150, 1).siblings().fadeOut(150);
});
});
ul {
list-style-type:none;
}
.bio {
padding:15px;
}
.bio-header {
margin-top:-150px;
}
.tile {
width:158px;
height:210px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="image-wrapper" >
<ul id="team-members">
<li class="tile-wrapper fade">
<div class="tile">
<img src="http://placehold.it/158x210"/>
<h3 class="bio bio-header" style="display:none;">Header</h3>
<p class="bio bio-footer" style="display:none;">Information</p>
</div>
</li>
</ul>
</div>
Related
I coded this:
// Click Function
$('body').on('click', 'a', function() {
$('a.active').removeClass('active');
$(this).addClass('active');
});
// Scroll Function
const sectionIsInViewport = document.querySelector('section');
observer = new IntersectionObserver((callback) => {
console.log('This section is now in the viewport.');
});
observer.observe(sectionIsInViewport);
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 30px;
text-decoration: none;
color: inherit;
}
body {
display: flex;
cursor: default;
}
#left,
#right {
width: 50%;
height: 100vh;
overflow-y: scroll;
scroll-behavior: smooth;
}
#left {
background-color: rgb(220, 220, 220);
}
#right {
background-color: rgb(200, 200, 200);
}
.media {
padding: 10px;
padding-bottom: 0;
}
.media:nth-last-child(1) {
margin-bottom: 10px;
}
img {
display: block;
width: 100%;
}
.link {
cursor: pointer;
}
.active {
background-color: black;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="left">
<a class="link active" href="#landscapes">Landscapes</a>
<a class="link" href="#cats">Cats</a>
<a class="link" href="#food">Food</a>
</div>
<div id="right">
<section id="landscapes">
<article class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
</article>
<article class="media">
<img src="https://i.pinimg.com/originals/ae/99/54/ae995473d0b73efd9b32b5cd029d9396.jpg">
</article>
<div class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Rural_landscape.JPG/1200px-Rural_landscape.JPG">
</div>
<article class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
</article>
</section>
<section id="cats">
<article class="media">
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg">
</article>
</section>
<section id="food">
<article class="media">
<img src="https://post.healthline.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg">
</article>
<article class="media">
<img src="https://theculturetrip.com/wp-content/uploads/2017/07/3566479001_c9707436f9_b.jpg">
</article>
</section>
</div>
In general, it works. But: If you scroll in the right area, the .active link should update automatically. So if you scroll for example to the section #food, the corresponding link should be .active.
I tried to work with Intersection Observer, but I am not sure if it's the best tool for it. And would it make sense to work with React? If yes, why?
Can somebody help me please? Would be soooooo thankful. <3<3<3
I think that IntersectionObserver is perfect for what you want.
How does this suit your needs?
// Click Function
$('body').on('click', 'a', function() {
$('a.active').removeClass('active');
$(this).addClass('active');
});
// Scroll Function
const mediaInViewport = document.querySelectorAll('.media');
observer = new IntersectionObserver((entries, observer) => {
console.log('Next Media in Viewport');
entries.forEach((entry) => {
if (entry.target && entry.isIntersecting) {
entry.target.classList.add('active');
const closestParent = entry.target.closest('section');
if (closestParent) {
const selector = closestParent.id;
const links = document.querySelectorAll('.link');
for (const link of links) {
const split = link.href.split('#');
if (split.length >= 2) {
const local = split[1];
if (local === selector) {
link.classList.add('active');
}
}
}
}
}
});
}, {threshold: 0.7 } );
window.addEventListener('DOMContentLoaded', () => {
setTimeout( // Wait for images to fully load
() => {
mediaInViewport.forEach((item) => {
observer.observe(item);
});
}
, 1000);
});
* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 30px;
text-decoration: none;
color: inherit;
}
body {
display: flex;
cursor: default;
}
#left,
#right {
width: 50%;
height: 100vh;
overflow-y: scroll;
scroll-behavior: smooth;
}
#left {
background-color: rgb(220, 220, 220);
}
#right {
background-color: rgb(200, 200, 200);
}
.media {
padding: 10px;
padding-bottom: 0;
}
.media:nth-last-child(1) {
margin-bottom: 10px;
}
img {
display: block;
width: 100%;
}
.link {
cursor: pointer;
}
.active {
background-color: black;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="left">
<a class="link active" href="#landscape">Landscapes</a>
<a class="link" href="#cats">Cats</a>
<a class="link" href="#food">Food</a>
</div>
<div id="right">
<section id="landscape">
<article class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
</article>
<article class="media">
<img src="https://i.pinimg.com/originals/ae/99/54/ae995473d0b73efd9b32b5cd029d9396.jpg">
</article>
<div class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Rural_landscape.JPG/1200px-Rural_landscape.JPG">
</div>
<article class="media">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/8d/Freudenberg_sg_Switzerland.jpg">
</article>
</section>
<section id="cats">
<article class="media">
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg">
</article>
</section>
<section id="food">
<article class="media food">
<img src="https://post.healthline.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg">
</article>
<article class="media food">
<img src="https://theculturetrip.com/wp-content/uploads/2017/07/3566479001_c9707436f9_b.jpg">
</article>
</section>
I have code below for a content slider using HTML, CSS and JQuery. Is it possible to get exactly what I have now but using pure CSS only? If its not possible with pure CSS is it possible to do with Vanilla JavaScript with no JQuery? Anything helps, cheers.
$(function(){
var scroller = $('#scroller div.innerScrollArea');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function(){
var $this = $(this);
$this.css('left', curX);
curX += $this.outerWidth(true);
});
var fullW = curX / 2;
var viewportW = scroller.width();
// Scrolling speed management
var controller = {curSpeed:0, fullSpeed:2};
var $controller = $(controller);
var tweenToNewSpeed = function(newSpeed, duration)
{
if (duration === undefined)
duration = 600;
$controller.stop(true).animate({curSpeed:newSpeed}, duration);
};
// Pause on hover
scroller.hover(function(){
tweenToNewSpeed(0);
}, function(){
tweenToNewSpeed(controller.fullSpeed);
});
// Scrolling management; start the automatical scrolling
var doScroll = function()
{
var curX = scroller.scrollLeft();
var newX = curX + controller.curSpeed;
if (newX > fullW*2 - viewportW)
newX -= fullW;
scroller.scrollLeft(newX);
};
setInterval(doScroll, 40);
tweenToNewSpeed(controller.fullSpeed);
});
#scroller {
position: absolute;
}
#scroller .innerScrollArea {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#scroller ul {
padding: 0;
position: relative;
}
#scroller li {
padding: 0;
list-style-type: none;
position: absolute;
}
.circle {
width: 250px;
height: 250px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:9px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 20.5px;
text-align: center;
width: 200px;
top: 90px;
left: 10%;
bottom: 0;
position: absolute;
z-index: 99;
}
.arrow {
width:300px;
height:80px;
}
.flipimage {
width:300px;
height:80px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
.everything {
/*transform: scale(0.6);
}
<div class="everything">
<div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<li>
<br style="line-height:89px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
You may use animation , but to keep the whole thing sliding for ever, you will need to clone (or make a redundant copy in HTML) at least of the elements that you see at first in the slider . Else, it would behave as a marquee , living a blank space untill everything slides off the box.
Example below:
/* all position:absolute removed */
#scroller {
overflow:hidden;
}
#scroller .innerScrollArea {
}
#scroller ul {
padding: 0;
position: relative;
display:flex;/* UPDATE */
}
#scroller li {
padding: 0;
list-style-type: none;
}
.circle {
width: 250px;
height: 250px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:9px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 20.5px;
text-align: center;
width: 200px;
top: 90px;
left: 10%;
bottom: 0;
position: absolute;
z-index: 99;
}
.arrow {
width:300px;
height:80px;
}
.flipimage {
width:300px;
height:80px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
/* UPDATE for animation */
ul {
animation: slidli 9s infinite linear;
}
ul:hover {
animation-play-state:paused;
}
#keyframes slidli {
100% {
transform:translatex(-133.5%);/* this is to be update to the content with to see every element slide once untill copies/clone comes back at same spot */
}
}
<div class="everything">
<div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<!-- from here it is a copy of the previous elements . 3 of them might have been enough -->
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
Notice: I used the flex model and droppped the absolute positionning. Main parent can be in absolute if you do need it, children do not.
I am trying to create a website with a dynamic menu which changes the active menu element depending on the scrolling. I was looking at other questions similar to this one, and trying different code, but I can not resolve the problem and can not see why it is not working in my site.
I have my code like that right now: https://jsfiddle.net/49rcfg0t/
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.topmenu a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.topmenu a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
<link rel="stylesheet" type="text/css" href="portfolio2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Menu superior-->
<nav class="header">
<div>
<a href="#anchor1" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png">
<span id="profile">Menu 1</span>
</a>
<a href="#anchor2" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png">
<span id="exp">Menu 2</span>
</a>
<a href="#anchor3" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png">
<span id="hab">Menu 3</span>
</a>
<a href="#anchor4" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png">
<span id="pro">Menu 4</span>
</a>
<a href="#anchor5" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png">
<span id="contact">Menu 5</span>
</a>
</div>
</nav>
<div class="cuerpo">
<span class="anchor" id="anchor1"></span>
<div style="background-color:blue">Area 1</div>
<span class="anchor" id="anchor2"></span>
<div style="background-color:red">Area 2</div>
<span class="anchor" id="anchor3"></span>
<div style="background-color:yellow">Area 3</div>
<span class="anchor" id="anchor4"></span>
<div style="background-color:brown">Area 4</div>
<span class="anchor" id="anchor5"></span>
<div style="background-color:green">Area 5</div>
</div>
I have the following problems:
When I scroll manually the elements are not activated.
When I use the links the elements are activated but they do not
answer to the anchor petition.
I also I would like, when I activate one of the elements of the
menu, to change the image with another one. For example, change the
first icon with this one:
Thank you in advance, this problem is driving me crazy!
You may simplify your code:
use mousemove/mouseenter instead of scroll event.
The snippet:
$(document).ready(function () {
$('a[href^="#"].topmenu').on('click', function (e) {
$('a.topmenu').removeClass('active');
$(this).addClass('active');
});
});
$(document).on('mousemove mouseenter', 'div.cuerpo div', function(event) {
$('a.topmenu').removeClass('active');
$('a[href="#' + this.previousElementSibling.id + '"].topmenu').addClass('active');
});
$(document).on('keyup', function (e) {
var charCode = (e.which) ? e.which : e.keyCode;
if ((charCode >= 49 && charCode <= 53) || (charCode >= 97 && charCode <= 101)) {
$('a[href="#anchor' + String.fromCharCode(charCode) + '"].topmenu').trigger('click');
$(document).scrollTop( $('#anchor' + String.fromCharCode(charCode)).offset().top);
}
});
body{
margin:0;
font-family:'Open Sans', sans-serif;
}
div{
overflow: auto;
}
/*Menu de cabecera*/
.header{
margin:auto;
background-color: white;
text-align: center;
position: fixed;
width:100%;
padding-top:7px;
padding-bottom: 7px;
z-index:5;
border-bottom:solid 2px #5882FA;
}
.header a{
text-decoration:none;
}
.topmenu img{
width:50px;
height:50px;
border-radius:90px;
padding: 2px 2px 2px 2px;
margin:2px 5px 17px 5px;
}
.topmenu img:active{
transform: translateY(4px);
}
.topmenu img:hover{
box-shadow:0px 2px 1px #5882FA;
}
/*Tooltips*/
.topmenu span{
visibility:hidden;
width: 120px;
color: white;
background-color: black;
text-align: center;
border-radius: 6px;
padding: 2px 0;
margin:1px;
font-variant: small-caps;
text-decoration:none;
/* Position the tooltip */
position: absolute;
top: 70%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition-property: opacity;
transition-duration: 2s;
}
.topmenu:hover span{
visibility:visible;
opacity: 1;
}
.active{
background-color:black;
}
.cuerpo{
position: absolute;
width: 100%;
margin-top:90px;
}
.cuerpo div{
height: 590px;
margin: 5px 15%;
}
.anchor{
display: block;
height: 90px;
margin-top: -90px;
visibility: hidden;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<nav class="header">
<div>
<a href="#anchor1" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png">
<span id="profile">Menu 1</span>
</a>
<a href="#anchor2" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png">
<span id="exp">Menu 2</span>
</a>
<a href="#anchor3" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png">
<span id="hab">Menu 3</span>
</a>
<a href="#anchor4" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png">
<span id="pro">Menu 4</span>
</a>
<a href="#anchor5" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png">
<span id="contact">Menu 5</span>
</a>
</div>
</nav>
<div class="cuerpo">
<span class="anchor" id="anchor1"></span>
<div style="background-color:blue">Area 1</div>
<span class="anchor" id="anchor2"></span>
<div style="background-color:red">Area 2</div>
<span class="anchor" id="anchor3"></span>
<div style="background-color:yellow">Area 3</div>
<span class="anchor" id="anchor4"></span>
<div style="background-color:brown">Area 4</div>
<span class="anchor" id="anchor5"></span>
<div style="background-color:green">Area 5</div>
</div>
I need to add an ease effect to the .dropdown div when it becomes visible with jQuery, but I'd be happy to do it with CSS as well. Any ideas? Thanks in advance :)
$('.btn').bind('click', function (){
$(this).parent().next('.dropdown').toggleClass('open');
});
.top,
.bottom {
background: #333;
height: 50px;
}
.dropdown {
height: 50px;
position: absolute;
color: black;
visibility: hidden;
}
.open {
position: relative;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top">
<button class="btn">Show content</button>
</div>
<div class="dropdown">
<p>Hidden content</p>
</div>
<div class="bottom">
</div>
https://jsfiddle.net/319zd1sg/1/
1 second fade in (https://jsfiddle.net/nh2fj27g/1/).
$('.btn').bind('click', function (){
var $dropdown = $(this).parent().next('.dropdown');
$dropdown.hasClass('open') ? $dropdown.toggleClass('open').animate({opacity: 0},1000) : $dropdown.css({opacity: 0}).toggleClass('open').animate({opacity: 1},1000);
});
Hope this helps.
$('.btn').bind('click', function() {
$('#drop').slideDown('slow');
});
.top,
.bottom {
background: #333;
height: 50px;
}
.dropdown {
display: block;
color: black;
width: 100%;
}
.drop {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<button class="btn">Show content</button>
</div>
<div id="drop" class="drop">
<div class="dropdown">
<p>Hidden content</p>
</div>
</div>
<div class="bottom">
</div>
I'm using Bootstrap 3 and jQuery 1.9.1 to make a website where profile picture is shown in a <li> tag. I want to show the link of "Update Image" when I'm hovering over the image. So far I've managed to fade the image on hovering but I'm unable to show a link or text on hovering over image. Here are my codes,
JQUERY
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
},
function () {
$(this).fadeTo(200, 1);
});
});
CSS
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
</li>
</ul>
</div>
</div>
I've searched other sources but none of them works since it'll bug my own css styles. How can I show a link at the middle of the image on hovering? Need this help badly! Thanks.
Hope, if you want to do it without Jquery - even though if you want to manage it using jquery, it can also be done.. not a big issue
.img-profile {
margin-top: 10px;
width: 200px;
/* if image is bigger it will adjust according to parent width */
height: 250px;
display: inline-block;
}
.img-wrap {
display: inline-block;
position: relative;
}
.img-wrap:hover .img-profile {
opacity: 0.5;
}
.img-wrap .hover-div {
display: none;
position: absolute;
text-align: center;
top: 50%;
left: 0;
right: 0;
margin-top: -10px;
z-index: 10;
/* width of image container */
}
.img-wrap:hover .hover-div {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="img-wrap">
<img class="img-responsive img-rounded img-profile center-block" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="profile_pic" />
<div class="hover-div">Update Image
</div>
</li>
</ul>
</div>
</div>
Yoy should try this. that is exactly you want.
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
$(this).closest("li").find("a").show();
},
function () {
$(this).fadeTo(200, 1);
$(this).closest("li").find("a").hide();
});
})
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="https://i.stack.imgur.com/TwJmm.gif?s=328&g=1" alt="profile_pic" />Link that you want
</li>
</ul>
</div>
</div>
you can achieve all that using css alone.
html
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
<p class="text">change profile picture</p>
</li>
</ul>
css
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
opacity: 1.0;
filter:alpha(opacity=100);
}
.text {
display: none;
}
img-profile:hover {
opacity: 0.45;
filter:alpha(opacity=45);
}
img-profile:hover + .text {
display: block;
}
check this fiddle
HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Colossoma_macropomum_01.jpg/800px-Colossoma_macropomum_01.jpg" alt="profile_pic" />
Update Image
</li>
</ul>
</div>
</div>
CSS
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
#side-menu li a{
display:none;
}
#side-menu li:hover a#update{
display:block;
}
JS
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
},
function () {
$(this).fadeTo(200, 1);
});
});