I want to have a hovering navbar, which works fine, but I want to keep in with the style of the site. The site's dropdown is 20px below the navbar, when you hover the navbar and go to travel to the dropdown it hides. It looks similar to this:
Heres and example on codepen.io
.dropdown:hover>.dropdown-menu {
display: block;
}
.dropdown>.dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}
.dropdown-menu{
margin-top:20px;
}
You can try the following solution using an inner <div> element to push the menu items down. I also recommend to use a additional class for your customization (in this case .custom-dropdown) so you only change the custom dropdown and not all dropdown elements on your side.
html, body {
background: #ccc;
}
.custom-dropdown.dropdown:hover > .dropdown-menu {
display: block;
margin: 0;
background: transparent;
}
.custom-dropdown.dropdown > .dropdown-toggle:active {
/** without this, clicking will make it sticky. */
pointer-events: none;
}
.custom-dropdown .dropdown-menu .inner-dropdown-menu {
margin-top: 20px;
padding: .5rem 0;
background: white;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="dropdown custom-dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown button</button>
<div class="dropdown-menu border-0" aria-labelledby="dropdownMenuButton">
<div class="inner-dropdown-menu border rounded">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
</body>
</html>
How about you remove the margin-top property and make it into padding-top:20px;. That would eliminate the gap and make the dropdown bar more spacious. I do not know if that is what you wanted, I could not understand your question accurately
It is not possible only with CSS. You have to write little java-script also.
You can write on focus event and change the css of dropdown menu. Then write click event out of menu element then hide. This way we can solve this issue. If you really want space between menu link and dropdown avoid using hover make it click.
Related
I don't understand why the request for button does not performed. I must to change the direction for mobile screens, but until it's now work.
$( "button.btn-tooltip" ).attr( "data-placement", "left" );
body {
padding: 10px;
}
button {
width: 100px;
height: 30px; margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<button type="button" class="btn btn-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip"></button>
You're probably looking at the default tooltip, rather than Bootstrap's tooltip. The regular toolbar defaults to the bottom-right, which could be giving you confusion with the data-placement of right:
$("button.btn-tooltip").attr("data-placement", "left");
body {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button"
class="btn btn-tooltip"
data-toggle="tooltip"
data-placement="right"
title="Tooltip">
Text
</button>
To use Bootstrap tooltips, you need to remember to initialise them with:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
Adding this code shows that your data-placement change does indeed work as expected:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
$("button.btn-tooltip").attr("data-placement", "left");
body {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button"
class="btn btn-tooltip"
data-toggle="tooltip"
data-placement="right"
title="Tooltip">
Text
</button>
If your code is not giving you the same result, then your JavaScript may be running before the DOM has fully loaded (meaning that the button wouldn't exist for it to be manipulated).
In this case, ensure that your code is wrapped inside a $(document).ready(function(){}) to force the JavaScript to wait until the button has been created.
Hope this helps! :)
you can just do
$("button.btn-tooltip").data( "placement", "left" );
Your code as written works properly, as seen here:
http://jsbin.com/xozuseyeyi/edit?html,js,output
My suspicion is that your javascript code is running before your button is available in the DOM.
Have you tried wrapping your code inside a document.ready() handler or similar?
$(document).ready(function() {
$("button.btn-tooltip").data( "placement", "left" );
});
I think the attribute is added indeed, but because you add the attribute after the bootstrap have initialized, so it does not work.
Do you use the tooltip in bootstrap? you can try to set the attribute before call
$('button.btn-tooltip').tooltip()
I'm beginning with this whole coding thing (it's beautiful) but I just found myself with an issue.
There's landing page I found and I kind of copied, it has a button that works as a hyperlink to another page but instead of that button, I have the code for a style sheet, it's kind of like a form people have to fill. So you press the button and the form pops out.
I have the code of the original landing page and I also have the code for the form but I don't know how to blend them, please help.
The first one is the original button code that takes people to https://myimstrategy.com/50perday-2/. I want to replace that site for a form that pops out. That's the second code in the bottom, I don't know how to merge both codes. I attached an image of the original button. I don't want to delete it, I just want the form to pop out when I click on it.
Thank you very much for your help!
.el-content{
display: inline-block;
width: auto;
height: auto;
min-width: 894px;
min-height: 114px;
}
.ib2-button {
color: rgb(15, 15, 15);
background-color: rgb(25, 202, 6);
border-color: rgb(0, 174, 0);
border-radius: 5px;
text-shadow: rgb(147, 138, 138) 1px 1px 0px;
background-image: none;
min-width: 920px;
min-height: 123px;
width: auto;
height: auto;
font-weight: bold;
font-size: 80px;
}
<div class="el-content">
Claim Your Spot Now >>
</div>
<link href="//app.webinarjam.net/assets/css/register_button.css" rel="stylesheet">
<div style="margin:auto;width:300px;">
<div class="embedded-joinwebinar-button">
<button type="button" class="btn btn-default css3button" title="regpopbox_35246_b21043f77c">
<span>Register now</span>
</button>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js" language="javascript" type="text/javascript"></script>
<script src="//app.webinarjam.net/assets/js/porthole.min.js" language="javascript" type="text/javascript" async></script>
<script src="//app.webinarjam.net/register.evergreen.extra.js" language="javascript" type="text/javascript" async></script>
If you want to create a popup, you're going to want to use javascript.
This is typically referred to as a modal. Here is a link to a tutorial: How TO - CSS/JS Modal
You can use bootstrap modal, or add onclick="showForm()"
And then you put id="form" to the form. Then in the head tag put
<script>
function showForm(){
document.getElementById("form").style.display = "inline-block"; //It must have display: none, the form, and this will make it display
}
</script>
I couldn't find your image but I got it, you want to show a pop on a button click. You can simply provide a href like below:
<link href="jsFunctionName()" class="buttonClass">Open Form</link>
And try using jquery dialogue on link clicked via jquery. https://jqueryui.com/dialog/
e.g.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function jsFunctionName() {
$("#dialog").dialog();
} );
</script>
<div id="dialog" title="My Form">
<form>
</form>
</div>
I am using the js-mindmap library for a different kind of use, I need to allow a selection to link to extrenal/internal pages on some links but need others to bubble into a bullet list (preferably withing the same css shape as the rest of the mindmap.) I was initially looking at getting the content for the alert from the title or alt tags but not sure if they will retain the ul and li needed without defaulting to the mindmap format...
I'm searching for more of a more simplistic way to accomplish this. I'm sure css is most likely the best practice and I need to pull the content from the html for ease of creating different modles.
here is JSFiddle MindMp
html:
<!DOCTYPE html>
<html>
<head>
<!-- Computer Medic 2016
NOTE: http://stackoverflow.com/questions/15352556/links-not-working-on-js-mindmap
-->
<title>ALS Mindmap</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="mindmap/js-mindmap.css" />
<link href="mindmap/style.css" type="text/css" rel="stylesheet"/>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<!-- UI, for draggable nodes -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<!-- Raphael for SVG support (won't work on android) -->
<script type="text/javascript" src="mindmap/raphael-min.js"></script>
<!-- Mindmap -->
<script type="text/javascript" src="mindmap/js-mindmap.js"></script>
<!-- Kick everything off -->
<script src="mindmap/script.js" type="text/javascript"></script>
<style>
.alert {
padding: 20px;
background-color: #f44336;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
</style>
</head>
<body>
<ul>
<li>ALS
<ul>
<li>Chest Pain</li>
<li>Shortness of Breath</li>
<li>Allergic Reaction</li>
<li>Diabetic</li>
<li>STEMI
<ul>
<li>ACS</li>
<li>STEMI
<ul>
<li>Treatment</li>
<li>Protocol</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</body>
</html>
Here you go my friend, it's a bit hacky but it works. I made several modifications to the plugin itself as well as your styles and html.
The plugin was taking your anchor tags, stripping everything and creating them anew. I had to make sure my new attribute data-content was being preserved. Now the plugin checks if a link has this attribute and if it does, it doesn't fire the click event.
Then, I assigned my own click handler to replace content of the alert div and subsequently show it:
$('a').click(function(e){
var tag = $(this).attr('data-content');
if(tag)
{
$('.alert .content').html(content[tag]).parent().show();
}
});
If you have any questions, let me know.
https://jsfiddle.net/x8826shn/7/
I have this (simple?) problem: in my page I have one popover, whose element are generated dynamically. How can I fix a div (specifically, the element with id="foot-notification-pop") in the bottom of popover, when it scroll?Below the code. Thanks!
HTML
$('[data-toggle="popover"]').popover({placement: 'bottom', trigger: 'click' });
.popover-content {
max-height: 200px;
overflow-y: scroll;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha512-oBTprMeNEKCnqfuqKd6sbvFzmFQtlXS3e0C/RGFV0hD6QzhHV+ODfaQbAlmY6/q0ubbwlAM/nCJjkrgA3waLzg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" integrity="sha512-mG7Xo6XLlQ13JGPQLgLxI7bz8QlErrsE9rYQDRgF+6AlQHm9Tn5bh/vaIKxBmM9mULPC6yizAhEmKyGgNHCIvg==" crossorigin="anonymous" />
<ul class="navbar-nav pull-right">
<li><a href="#" data-toggle="popover" title="Notifications" data-html="true" data-content="
<a href='?Profile'><div class='pop-text'>Notification 1</div></a><hr />
<a href='?Profile'><div class='pop-text'>Notification 2</div></a><hr />
<a href='?Profile'><div class='pop-text'>Notification 3</div></a><hr />
<a href='?Profile'><div class='pop-text'>Notification 4</div></a><hr />
<div><p id='foot-notification-pop'><a href='?notification'>Show all</a></p></div>">
Notification
</a></li>
</ul>
One way to do that is with the position: absolute css property
#foot-notification-pop {
position: absolute;
bottom: 0px;
background-color:#fff;
width:70%
}
Also I moved that id from the paragraph tag to the div tag.
<div id='foot-notification-pop'><p><a href='?notification'>Show all</a></p></div>
I'm new to html/css stuff so please bear with me.
I have specific images that I want to use as a navigation menu.
My html,css basically look something like this:
HTML
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
CSS
a#main:
{
background-image:url(main-normal.png);
margin-right:0px;
}
a#main:hover:
{
background-image:url(main-highlight.png);
}
a#tips:
{
background-image:url(tips-normal.png);
margin-right:0px;
}
a#tips:hover:
{
background-image:url(tips-highlight.png);
}
a#news:
{
background-image:url(news-normal.png);
margin-right:0px;
}
a#news:hover:
{
background-image:url(news-highlight.png);
}
#main,#news,#tips
{
background-repeat:no-repeat;
display:block;
text-decoration:none;
text-indent:-30000px;
}
When I hover over the image it does get change to highlighted image but when I click on the link the tab goes back to normal image. I want it to stay highlighted when the user is currently on that page. Can anyone help me with this?
I tried "visited" but it doesn't seem to work and everything I found on Google search was a little bit different than what I'm trying to do.
Thanks in advance.
To answer the specific question, when a user clicks a link, they are taken to a new page. The links have no concept in and of themselves as to what page they exist on.
So you have a few options. The common solution is to use server-side code to send HTML with some indicator that that is the current link. You could add a class like 'current' for example. Furthermore, if that is the page you are on, there's no need for the link either, so one should not have that text linked.
But if you don't have access to the server, then you need to add this manually. You could either create a new style for .current and then on that page, apply that class to your active link.
However, perhaps you are including this menu as an include...meaning the code is the same for every single page. In that case, you will want to target the active link with your CSS. So on each page you'd have a custom bit of CSS on the page.
On the tips page, for example, you'd do this:
#tips {put your style here for active links}
To get a bit fancier/more automated, you could write some javascript that would:
parse the URL
figure out the file name of the page
match that filename up to something in your list of links
apply the class for you dynamically
PS. there is no real need to use the syntax of a#tips in your CSS. The reason is that if you are using an id, there can only be one id on the page, so the a is somewhat redundant.
There are many ways to do this. With PHP, JavaScript or pure CSS with some extra markup.
Since you said you are new to HTML/CSS I think the CSS way would be best for you?
So you have 3 pages with exact the same menu code? Just put this on each site:
For your main page:
<div id="navigation">
<a id="main" class="active" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
Your tips page:
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" class="active" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>
Your news page:
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" class="active" href="domain.com/news">news</a>
</div>
Add CSS:
#main.active {background-image:url(main-highlight.png);}
#tips.active {background-image:url(tips-highlight.png);}
#news.active {background-image:url(news-highlight.png);}
This example works fine for me...
Home Page
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body#home a#homenav, body#second a#secondnav {
color: #f8f8f8;
background: #D34;
cursor: default;
}
</style>
</head>
<body id="home">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
</ul>
</nav>
</body>
Second Page
<html>
<head>
<title>Second</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body#home a#homenav, body#second a#secondnav {
color: #f8f8f8;
background: #D34;
cursor: default;
}
</style>
<body id="second">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
</ul>
</nav>
</body>
A way to highlight the navigation tab on the current page with CSS is to create an active class to append to the class of the tag you are currently on. Your active css class would detail how you want it to look when it's considered active. Then, depending on what tab you are on, you insert the active as class for that tab as seen below.
`
<html>
<head>
<title>Highlight Nav Tab of Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
.navbar {
background-color: purple;
font-size: 12px !important;
line-height: 1.42857143 !important;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: purple !important;
background-color: #fff !important;
}
</style>
<body id="about.html" data-spy="scroll" data-target=".navbar" data-offset="60">
<!--navbar-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li >Home</li>
<li class = "active">About</li>
<li >More</li>
<li >Contact Us</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
`
Image shows what nav highlight looks like