I've been trying to make the share buttons to appear when hovering on an article "Mashable style" but I can't seem to get it right. Any help will be appreciated.
<div class="c-container">
<article class="c-news">
<header>
<a href="#">
<img src="http://a_really_long_url.jpg"
alt="post-image" class="post-image">
</a>
</header>
look at jsFiddle
You need to use the :hover CSS selector:
First hide the elements:
.st_facebook_hcount, .st_twitter_hcount {
position:relative;
display:none; /* Hide It*/
width:6rem;
top: -1.2rem;
left:18rem;
}
Then set the :hover to show:
.c-news:hover .st_facebook_hcount, .c-news:hover .st_twitter_hcount {
display:inline-block;
}
The demo http://jsfiddle.net/nJRtm/6/
Related
I'd like to make it so that when users hover over a picture on my website, they get a grey box the same size as the picture, and inside the grey box is a list; each of the items on the list link to a different site. I don't know how to do this; I can only find tutorials on how to replace images with other images when users hover over them. I don't want that; I want to replace the image with a box that itself contains multiple links. I don't need a specific answer so much as a general idea about how this can be done. How do you developers do this?
What may make this more complicated is that I would like to line up three pictures just like this in a horizontal row; for each picture, users can hover over them and then click on an item in the list.
(I'm new to html and css, and I'm willing to use JavaScript if that's the best solution. Thank you in advance for your help!)
Here is the html:
<div id="container">
<img id="image"/>
<div id="overlay">
Link 1<br>
Link 2<br>
Link 3<br>
</div>
</div>
Here is the css:
#container {
position:relative;
width:100px;
height:100px;
}
#image {
position:absolute;
width:100%;
height: 100%;
background:black;//should be url of your image
}
#overlay {
position:absolute;
width:100%;
height:100%;
background:gray;
opacity:0;
}
#overlay:hover {
opacity:1;
}
JsFiddle link
On wrapper hover,just show the div containing the lists else it should be hidden.Here is the working example.
HTML
<div class="wrapper">
<img src="http://www.gettyimages.in/gi-resources/images/Embed/new/embed2.jpg" class="showDiv" width="200px" height="200px" alt="image" />
<div class="showOnHover">
<ul>
<li>
link1
</li>
<li>
link2
</li>
<li>
link3
</li>
</ul>
</div>
</div>
CSS
.wrapper{
position:relative;
width:200px;
}
.wrapper:hover .showOnHover{
display:block !important;
}
.showOnHover{
display:none;
position:absolute;
top:0;
height:100%;
}
I am trying to create a sticky menu using CSS Bootstrap affix and list-group menu.
I manage to get most of it to work except for when the user scrolls down.
When the user scrolls down, the menu seems to take the entire with of the page.
I tried to set it up via data attributes
using something like this
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<div data-spy="affix">
<div class="list-group list-group-root well">
<a class="list-group-item" href="#introduction">Introduction</a>
<a class="list-group-item" href="#features">Features</a>
<a class="list-group-item" href="#dependencies">Dependencies</a>
</div>
</div>
</div>
<div class="col-md-9" id="mainCol">
Some long text for the body along with some tables.
</div>
</div>
</div>
But the data attribute did not make the menu stick! it just kept it on the top.
So I tried to use JS to get the job done like this
$(function(){
$('#leftCol').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});
I created jsFiddle to show you the current behavior.
How can I fix this affix so when the user scrolls down the menu maintain the same shape?
First of all, you should use either data-attributes or JS.
I updated your jsFiddle. The position of id="leftCol" was changed:
<div class="col-md-3" >
<div id="leftCol">
...
</div>
</div>
and style was added:
#leftCol {
width: 220px;
}
Also, you should add media queries to remove affix from mobile view.
As an "unacceptable" workaround, I set a max width of the menu to 250px like so
.list-group.list-group-root {
padding: 0;
max-width: 250px;
}
I am not sure how to get it to work without adding a max-with the max with should be defined by the parent. In this case class="col-md-3"
UPDATED
javascript to the rescue!
I added the following JS code to solve this problem once an for all.
It basically resize the menu everytime affix.bs.affix event is fired
$(document).on('affix.bs.affix', '#docs-menu', function() {
$(this).width($(this).width());
});
From the docs
affix.bs.affix => This event fires immediately before the element has
been affixed.
Ok I believe I got most of the code working like you want it to. The main changes I made were adding this CSS:
#leftCol {
display: block;
height: auto;
padding: 0;
width: 100%;
}
.navbar-fixed-top-again {
position: static;
top: 60px;
z-index:1031;
}
.navbar-inner {
background: red;
padding: 5px;
}
.affix {
position: fixed !important;
}
and I changed up some of the structure on your HTML:
<div class="container body-content">
<div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>
<!-- new nav section -->
<div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
<div class="navbar-inner">
<div class="list-group list-group-root well">
*the rest of your code*
</div>
</div>
</div>
</div>
The main problem now is having a sticky navigation menu with variable height. If you notice when you scroll your reading content underneath jumps up and gets hidden. It seems that it is possible to fix this using JavaScript (link to SO question).
Heres the link to your updated Fiddle. Hope that helps.
I have a simple menu and from it, i am using jQuery to toggle visibility of few DIV's.
Code is pretty straightforward, like bellow, and if i am not asking too much, i could use some help with additional functionalities.
<div id="one" class="navLinks"> content 1 </div>
<div id="two" class="navLinks"> content 2 </div>
<div id="three" class="navLinks"> content 3 </div>
<div class="nav">
<nav>
1
2
3
Normal Link
</nav>
</div>
$('nav a').click(function() {
$('.navLinks').hide();
$(this.getAttribute('href')).slideToggle('slow')
});
So, currently, if the user click on the link, a div will slide from the top, but except that, i would need 2 more things.
If user opens, lets say link no.2, and after that, he wants to close it by clicking on the same link, div should slide up (instead of down like it currently does).
Similiar to this, if the user opens link no2, and after that wants to open link no1, after the click, that div would need to slide up and be shown.
I know i am asking too much, but any help would be greately appreciated.
FIDDLE http://jsfiddle.net/4rfYB/38/
I suggest using jQuery's not() to exclude the requested element from those being hidden.
That way, you can hide all content areas that are not the requested one.
I've also used slideUp('slow') instead of hide(), purely for stylistic reasons.
$('nav a').click(function() {
var $requested = $(this.getAttribute('href'));
$('.navLinks').not($requested).slideUp('slow');
$requested.slideToggle('slow')
});
.navLinks {
display: none;
color: white;
}
div#one {
background: red;
height: 100px;
}
div#two {
background: blue;
height: 80px;
}
div#three {
background: black;
height: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<nav>
1
2
3
</nav>
</div>
<div id="one" class="navLinks">content 1</div>
<div id="two" class="navLinks">content 2</div>
<div id="three" class="navLinks">content 3</div>
You can do something like this:
$('nav a').click(function() {
$(this.getAttribute('href')).toggleClass('open').slideToggle('slow',function() {
$(this).siblings('.open').slideToggle('slow').toggleClass('open');
});
});
http://jsfiddle.net/4rfYB/39/
I want to change the background image of one div when the mouse is over a different div, using jQuery.
jQuery(function() {
jQuery('.linktomouseover').mouseover(function() {
$(.linktomouseover2).css('background-image', "url('test.jpg')");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
So when mouse is over div with class linktomouseover it will actually change the background of div with class linktomouseover2
this does not seem to work. please help?
You're missing quotes in the code jQuery(.linktomouseover)
This is the correct code
jQuery(function() {
jQuery(".linktomouseover").mouseover(function() {
jQuery(".linktomouseover2").css('background-image', "url('test.jpg')");
});
});
DEMO
this is a mistake on your code.
jQuery:
jQuery('.linktomouseover2').mouseover(function() {
$('.linktomouseover').css('background-image', "url('http://cdn.androidpolice.com/wp-content/uploads/2012/11/nexusae0_wallpaper_01.jpg')");
});
HTML:
<div class="linktomouseover">
<a class="nthn">link1</a>
</div>
<div class="linktomouseover2">
<a class="test">link2</a>
</div>
CSS:
.linktomouseover{
position:relative;
display:block;
width:100%;
background:#e7e7e7;
height:200px;
}
.linktomouseover2{
position:relative;
display:block;
width:100%;
background:#d7d7d7;
height:200px;
}
Live Demo On JSFiddle
I have a number of DIVs currently laid out in an oval shape. Each div represents a "service" and is ID'd accordingly, all are set with an absolute position.
What I am wanting to do is on mouseover of a div, I want to have a new DIV with relevant information appear in the middle. This should happen for each "service" so each "descriptive" div will be hidden until mouseover but all appear in the same space.
The website in question is the home page of www.faa.net.au.
How do I go about making this new descriptive DIV appear on mouseover and hide on mouseout?
What you can do is position all of those divs in that spot in the middle with CSS. They can stack and the z-index doesn't matter since all you'll only see one at a time. Then hide them with "display:none" in your CSS.
Then use jQuery's .hover() method to show those the appropriate div on mouseover
$("#idOftheDivYouHoverOn").hover(function (e) {
//This funciton defines what happens on mouse-in or hover.
$("#idOfTheDefaultCenterDiv").hide();
$("#idOfTheDivYouWantedToShow").show();
}, function (e) {
//This function defines what happens on mouse-out or when the hover is over.
$("#idOfTheDefaultCenterDiv").show();
$("#idOfTheDivYouWantedToShow").hide();
});
You'll have to do this for each one you hover on. There is a "smarter" way but it would be a very long answer to explain it.
That is if you want to do this using JavaScript/jQuery instead of just plain CSS similar to the ones you see in other answers. With this method you can add fading effects - take a look at jQuery's hover - http://api.jquery.com/hover/
Edit: Here's a working example: http://jsfiddle.net/6dMDS/
Hope that helps.
A friend in another forum just posted another way of doing this. Be warned it's CSS3 only so some browsers (and definitely older IE's) won't support it.
<div class="container">
<img class="one" src="http://placehold.it/100x100" />
<img class="two" src="http://placehold.it/100x100" /><br>
<img class="three" src="http://placehold.it/100x100" />
<img class="four" src="http://placehold.it/100x100" /><br>
<img class="five" src="http://placehold.it/100x100" />
<img class="six" src="http://placehold.it/100x100" />
<div class="hidden-one">hidden-one</div>
<div class="hidden-two">hidden-two</div>
<div class="hidden-three">hidden-three</div>
<div class="hidden-four">hidden-four</div>
<div class="hidden-five">hidden-five</div>
<div class="hidden-six">hidden-six</div>
</div>
* {margin: 0; padding: 0;}
.container {width: 400px;}
.one:hover ~ .hidden-one,
.two:hover ~ .hidden-two,
.three:hover ~ .hidden-three,
.four:hover ~ .hidden-four,
.five:hover ~ .hidden-five,
.six:hover ~ .hidden-six
{display: block;}
.hidden-one,
.hidden-two,
.hidden-three,
.hidden-four,
.hidden-five,
.hidden-six
{
width: 200px;
height: 300px;
border: 1px solid red;
display:none;
float: right;
position: relative;
top:-305px;
left: 10px;
}
http://codepen.io/anon/pen/LbfCl
So if I got it right, you got a "service" DIV and a "descriptive" DIV. Try some CSS to make it happen.
HTML:
<div id="service"></div>
<div id="descriptive"></div>
And CSS:
#descriptive
{
visibility:hidden;
}
#service:hover #descriptive
{
visibility:visible;
}
Basically this will make the DIV with id="descriptive" be shown when id="service" is hovered.