How can I create a simple HTML/CSS social sharing menu similar to the one found at the bottom of each post on http://bitquill.com/ — (I know it's my site, but I didn't code the sharing menu. I'm using a Squarespace template and love their sharing menu and want to re-create it elsewhere.)
You have to use an API from each site to get the buttons/badges. For example, you have to review the docs for the Facebook like button: https://developers.facebook.com/docs/reference/plugins/like/ and get the code that way.
To create the menu:
Make a share button using a div, then put another div after it, which is the menu. Style to your liking. Then, make the menu display: none - this will hide it. Use JS to bind the button's click event to a function that shows the menu:
HTML
<div class="share">Share</div>
<div class="menu">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Stack</li>
</ul>
</div>
CSS
.menu {
display: none;
}
JS
$('body').on('click', function (e) {
if (e.target.className !== 'share')
$('.menu').css('display', 'none');
else
$('.menu').css('display', 'block');
});
So your entire HTML file should look like:
<html>
<head>
<style>
.menu {
display: none;
}
</style>
</head>
<body>
<div class="share">Share</div>
<div class="menu">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Stack</li>
</ul>
</div>
<!-- This is the jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('body').on('click', function (e) {
if (e.target.className !== 'share')
$('.menu').css('display', 'none');
else
$('.menu').css('display', 'block');
});
</script>
</body>
</html>
Here is a quick example. You set up a container div (which must have position:relative), and menu div (which has positioned:absolute). Use jQuery to hide the menu div when the page loads. When a user clicks on Share, the div will be displayed.
The API code that you get from Facebook will be placed in the div that has the Facebook placeholder text.
To see more about how the menu in your example was implemented, open the page using Chrome. Right click on "Share" and go to "Inspect Element."
<script type="text/javascript">
$(document).ready(function () {
//Initally hide social-menu div
$("#social-menu").hide();
//When social-button is pressed, show social-menu
$("#social-button").click(function () {
$("#social-menu").show();
});
});
<div id="social-button" >Share</div>
<div id="social-container" style="position:relative;">
<div id="social-menu" style="position:absolute;top:0px;bottom:0px;z-index:10" >
<div>Facbook</div>
<div>Google +</div>
</div>
</div>
Related
The sitemap of my page, I set it to click and show a second div (for more infos) when I preview the second div is already open and with the click closes and opens accordingly, I want the first time to display it, to be closed.
(The following example does not work, I do not know why, on m preview web it's ok)
<script>
$(document).ready(function(){
$("div.sitemapline").click(function(){
$("div.sitemapfooter").toggle();
});
});
</script>
.sitemapline {
width:100%;
border:solid #F00;
}
.sitemapline2 li {
display:inline-block;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>sitemap footer</title>
</head>
<body>
<div class="sitemapline">
<div class="sitemapline2"><ul>
<li>Copyright ©.</li>
<li>Privacy Policy</li>
</ul>
</div> </div>
<div class="sitemapfooter">
<div>
<ul><h2>About Us</h2>
</ul>
</div>
</div>
`tthe first time to display it closed
You can add this code to the top of your script to hide it when the page opens.
$(".sitemapfooter").hide();
The best way is to use CSS as this will hide the element before the jQuery runs rather than once the DOM has loaded.
CSS
.sitemapfooter {
display: none;
}
Just set the inline style of the element to display: none, and then it will default to hidden on page load.
$(document).ready(function(){
$("div.sitemapline").click(function(){
$("div.sitemapfooter").toggle();
});
});
.sitemapline {
width:100%;
border:solid #F00;
}
.sitemapline2 li {
display:inline-block;
text-align:center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>sitemap footer</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<div class="sitemapline">
<div class="sitemapline2"><ul>
<li>Copyright ©.</li>
<li>Privacy Policy</li>
</ul>
</div> </div>
<div class="sitemapfooter" style="display: none">
<div>
<ul><h2>About Us</h2>
</ul>
</div>
</div>
Just add display: none to the sitemapfooter div, it will be hidden at startup.
.sitemapfooter {
display: none;
}
If I understand your question correctly you want the second div hidden by default.
In order to make that happen you have to change your css code targeting the class "sitemapline2" and add a display style of none.
This will cause the div with the class "sitemapline2" not to show in the beginning, and when you click the jquery function will run to change the css style to display:block showing your info div.
I want an image to automatically popup when someone goes to our main page. One that they can click to close after they have seen it. Can someone please show me how to do this that doesn't require a ton of coding. Thanks you!
I would do this with jQuery (and I bet you're using jQuery for your template too :) )
Be sure you're calling the jQuery library in your page, I would recommend to place it just before the </body> tag and BELOW all the scripts.
for example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- let's call the following div as the POPUP FRAME -->
<div id="popup">
<!-- and here comes the image -->
<img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup">
<!-- Now this is the button which closes the popup-->
<button id="close">Close button</button>
<!-- and finally we close the POPUP FRAME-->
<!-- everything on it will show up within the popup so you can add more things not just an image -->
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
//your jquery script here
</script>
</body>
</html>
This will show up a piece of code, if you want to simply show an image, put the id="popup" directly on your <img> tag.
Now, let's move to the example... the code is pretty easy to understand:
//with this first line we're saying: "when the page loads (document is ready) run the following script"
$(document).ready(function () {
//select the POPUP FRAME and show it
$("#popup").hide().fadeIn(1000);
//close the POPUP if the button with id="close" is clicked
$("#close").on("click", function (e) {
e.preventDefault();
$("#popup").fadeOut(1000);
});
});
The script behaves like this: When the page is loaded, the content inside <div id="popup"> show up, and if the button with id="close" is clicked, then the pop up is hidden. Add whatever you want inside this <div id="popup"> and it will show inside the popup.
The CSS: SUPER IMPORTANT!
/*we need to style the popup with CSS so it is placed as a common popup does*/
#popup {
display:none;
position:absolute;
margin:0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
You can see it working along with the HTML on this live example:
http://jsfiddle.net/Lp9edyg5/1/
I have two different div's I want to make one of them invisible and after clicking the link or button I want it to be visible and the other invisible. I don't know javascript so I know only HTML and CSS. Can I do that with only using HTML&CSS and How can I do that? Thanks.
You need to use jQuery for this.
Just add this line to your head tag:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
If your HTML is like this:
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
<button id="button1">Toggle divs</button>
CSS:
#div2 {
display:none;
}
At the bottom of your page, just before the closing tag </body> add the following JavaScript:
<script>
$("#button1").on("click", function () {
$("#div1, #div2").toggle();
}
</script>
Here's a link for a similar example:
http://api.jquery.com/toggle/#entry-examples
Sorry If this is simple but I need some help with my navigation bar. I can't seem to be able to toggle to show/hide the div with the click of a link. My code is here. This is just some a basic format as I want the right functionality before adding it to my website. Thanks!
<html>
<head>
<link rel="stylesheet" type="text/css">
<style>
#submenu ul{
display:none;
}
</style>
<script type="text/javascript">
function showDiv() {
document.getElementById('submenu').style.display = "block";
}
</script>
</head>
<body>
<div id="navigation">
<ul>
<li id="submenu" onclick="showDiv()";> Hi
<ul>
<li> Hi2
</ul>
</li>
</ul>
</div>
</body>
</html>
So in this example I want the hidden div to show Hi2 once I click Hi1. I don't mind using JQuery or Javascript I just need a way around this. I've made other navigation menus's however they were horizontal and usually worked by hover menus. Appreciate any help!
Use this
$('#submenu').click(function() {
$('#submenu ul').toggle('');
});
DEMO
If you dont want to toggle then use
$('#submenu').click(function() {
$('#submenu ul').css('display','block');
});
DEMO 2
Try:
<script type="text/javascript">
function showDiv() {
$("#submenu ul").css("display","block");
}
</script>
I have a menu where I am trying to make the sub-menu fade in on mouseover, and fade out on mouseleave. I have tried several solutions, most of them resulting in the menu fading out immediately on hover, and not on mouseleave/mouseout.
The code below is the one I believe makes the most sense. But the result is that the menu fades in, but doesn't fade out.
<script type="text/javascript">
$(document).ready(function(){
//When hovering a top-level link, submenu fadein.
$('.toppunkt a').mouseenter(function(){
$('ul.sub-menu').fadeIn();
});
//When leaving the submenu, fadeout.
$('.ul.sub-menu').mouseleave(function(){
$('ul.sub-menu').fadeOut();
});
});
</script>
This may or may not help you but you seem to be checking the wrong item on mouseleave...
http://jsfiddle.net/Mutmatt/3ppr8/14/
Even better, the way that you PROBABLY want this menu system to behave is like this jsfiddle:
http://jsfiddle.net/Mutmatt/3ppr8/23/
Take a look at that one. Don't forget to mark correct answers for future reference
Code:
JS:
jQuery(document).ready(function() {
jQuery('#topmenu li').hover(
//When hovering a top-level link, submenu fadein.
function() {
jQuery('ul', this).stop().fadeIn();
},
//When leaving the submenu, fadeout.
function() {
jQuery('ul', this).stop().fadeOut();
}
);
});
HTML:
<ul id="topmenu">
<li>yep
<ul class="sub-menu" style="display: none;">
<li>derp</li>
<li>yerp</li>
</ul>
</li>
</ul>
Could be the extra '.' in getting the sub-menu in the mouse leave function.
I wrote up a solution using divs.
Here is the fiddle:
http://jsfiddle.net/PAWQr/12/
Hopefully this helps.
HTML:
<div class="toppunkt">
Here is a list
<div class="sub-menu" style="width:70px; border: 1px dotted gray; display: none;">
<ul>
<li>Option1</i>
<li>Option2</i>
</ul>
</div>
</div>
Script:
$(document).ready(function(){
//When hovering a top-level link, submenu fadein.
$('.toppunkt a').mouseenter(function(){
//alert('mouse enter');
$('.sub-menu').fadeIn();
});
//When leaving the submenu, fadeout.
$('.sub-menu').mouseleave(function(){
$('.sub-menu').fadeOut();
});
});