I have a hidden div with a buttin that I would like to appear when you hover over the div 'person-wrap'. How can I do this? Should I use CSS tricks or can it be done with JQUERY?
JSFIDDLE:
http://jsfiddle.net/ceTdA/3/
The div I would like to have appear:
#buttons {
display: none;
position:absolute;
right:10px;
top:10px;
margin: 0px 0px 0px 0px;
height: 30px;
width: 225px;
overflow: auto;
}
Given that your #buttons div is a child of #person-wrap you can do it with just CSS:
#person-wrap:hover #buttons {
display : block;
}
Demo: http://jsfiddle.net/ceTdA/4/
You should try this code:
$("#person-wrap").hover(function() {
$(this).find('#buttons').show();
}, function() {
$(this).find('#buttons').hide();
});
nnnnnn explains a pure css way which is best, but it's pretty simple with jQuery as well, all it does is call the first function while the mouse is hovering and the second when the mouse leaves.
$("#person-wrap").hover(
function () {
$("#buttons").addClass("hover");
},
function () {
$("#buttons").removeClass("hover");
});
And simple css:
.hover{
display:inline;
}
add this css:
#profile-pic:hover #buttons{
display:inline;
}
here is working jsfiddle
Related
Could you please tell me how to show big or large image on button click with overlay. I am making a image slider in which user click on image and it shows the full image with overlay. I tried like this
https://plnkr.co/edit/7AqAHSSPwZyj7cipXMrq?p=preview
.overlay {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
background-color:black;
z-index:9999;
color:white;
}
$(function() {
var counter = 0;
$('#next').click(function() {
if (counter < $('.imageBlock').length-1) {
counter++;
$('.imageBlock').hide();
$('.imageBlock').eq(counter).show();
}
})
$('#pre').click(function() {
if (counter > 0) {
counter--;
$('.imageBlock').hide();
$('.imageBlock').eq(counter).show();
}
})
$('.imageBlock').click(function(){
$('body html').addClass('overlay')
})
})
Here's an example where clicking the image - we take the src, and add it to a hidden div (.overlay img) and then show the div.
clicking the overlay hides it again.
Hope this is helpful
$('.thumb').on('click', function(){
$('.overlay img').attr('src', $(this).attr('src'));
$('.overlay').show();
});
$('.overlay').on('click', function(){
$('.overlay').hide();
});
.thumb {
width: 250px;
}
.overlay {
display: none;
position: absolute;
top:0px;
background: #000;
width: 100%;
height: 100vh;
white-space: nowrap;
text-align: center;
}
.overlay img {
width: 100%;
border:5px solid #000;
vertical-align: middle;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img class="thumb" src="https://images.unsplash.com/photo-1428094479093-8973a318bd76?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=">
<div class="overlay"><span class="helper"></span><img src=""></div>
Here's a fiddle: https://jsfiddle.net/BradChelly/kbode1cx/
For starters $('body html').addClass('overlay') doesn't work, because that selects an html element inside a body element.. which doesn't exist.
I think you meant to target either class (to make it cross-browser):
$('body,html')
You could toggle the class:
$('body,html').toggleClass('overlay')
Then adjust your css. Probably something like this:
.overlay .imageBlock .small img {
display: none;
}
.overlay .imageBlock .large img {
display: block;
}
BTW, if you only need the .small and .large wrappers with img just for the overlay feature, then you're making things harder than needed...
If you want to use a library, you can use prettyPhoto that does everything you need.
If you don't want to use a library, you can do that in your code (last jQuery event of your JS file) :
$('.imageBlock').click(function(){
$('body').toggleClass('overlay');
$('.imageBlock').eq(counter).find('.large img').toggle();
})
I have an issue concerning the slideUp() method. It works only for the last element (Panel 3). The first two slide down and I have no idea why.. Please keep in mind that I just started with jQuery and I'm really a newbie.
Here is the jQuery code:
$(document).ready(function () {
$('.panel').on('click', function() {
$(this).slideUp(600);
});
});
And here is the JSfiddle -> http://jsfiddle.net/py4tfq3f/2/
Thank you for your time!!
Change display:inline-block from the panel div to float:left,it solves the issue.
DEMO
CSS:
.panel {
margin: 50px 0 0 10px;
width: 200px;
height: 200px;
font-family: tahoma;
float:left;
border: 2px solid gray;
border-radius: 5px;
overflow: hidden;
}
I wan to create a simple carousel that holds an image title and text. When I click the "next" span, it should display the next two <li>. But nothing happens when I do so.
<script type="text/javascript">
$(document).ready(function() {
$('#right').click(function() {
$('li').animate({
left: '-600px'
}, 500);
});
});
</script>
Fiddle
See this example.
This is a pure CSS issue. You need only to add position: relative; to your li, so you can effect the left property in your script.
.carousel-inner li {
display: inline;
float: left;
margin: 20px;
border: 1px solid #999;
padding: 25px;
border-radius: 20px;
position: relative; // Add this so setting a left position will work
}
Simply try adding that in Chrome Inspector and you'll see it works. Ciao!
Add position: relative to your .carousel-inner li.
I Recently try out the div with expand and collapse. Everything works perfect. Here is the fiddle with I make the bar as fixed with expand and collapse button whenever i increase the font size of the div then the button doesn't comes with the div proportionally. Here is the fiddle what i am expect clearly.
http://jsfiddle.net/vicky081/GyG3w/1/
.btnn
{
width: auto;
height: auto;
cursor:pointer;
background-color:#02adea;
position: absolute;
border:solid;
margin-left:3%;
border-color:#ffffff;
border-top-color:#02adea;
top:36px;
text-align: center;
padding-top: 7px;
color:white;
}
You can see that button comes outside the div. Is there is a way to show the button which is attached to the div even if i change the font size.
Any suggestion would be great.
Thanks.
With a top value of 100% the button is always stuck to the container whatever the font-size.
See it live http://jsfiddle.net/LeBen/UCTgR/ (I also added a CSS Normalize)
$(document).ready(function () {
$(".text").hide();
$(".btn").click(function(e){
var txt=$(this).html();
var flag = txt==="open";
if(flag){
$(".text").show();
$(this).html("close");
}
else{
$(".text").hide();
$(this).html("open");
}
});
});
.banner{
font-size:1.2em;
position:fixed;
width:100%;
}
.text {
background:#02adea;
text-align:center;
width:100%;
}
.btn{
background:#02adea;
border:5px solid white;
border-top-color: #02adea;
color:white;
text-align:center;
width:2em;
}
http://jsfiddle.net/GyG3w/5/
I suppose this is the effect you wanted, in this you can change the fixed div's font size as much you want, the rest of the elements' will be resized accordingly and the layout will be preserved
You can use bottom: -49px; instead of top: 36px;
<div id="main">
<div>TITLE</div>
<div>BODY</div>
<div>COMMENT</div>
<div><textarea></textarea></div>
</div>
<button>overlay</button>
#main {
width: 200px;
height: 200px;
background-color: yellow;
}
live: http://jsfiddle.net/9DLyE/1/
How is the best way to do overlay in jQuery? If i click on button overlay then i would like overlay (same as fancybox) all div#main, for example background-color: blue and transparency 0.5.
Use position:absolute to place the overlay div and use jquery toggle to show it.
CSS
#main {
width: 200px;
height: 200px;
background-color: yellow;
position:relative
}
#overlay{
background:rgba(0, 84, 214, 0.5);
height:100%; width:100%;
position:absolute;
top:0; left:0;
display:none
}
jquery
$('button').click(function(){
$('#overlay').toggle();
});
DEMO
What you have tried..??try to put click event like
$('button').on('click',function(){
//Do your stuff
});
Try this FIDDLE