I would like to make it so that when a div with the class "dropdown" is hovered over, a certain piece of text with the id "workButton" would underline. I would like to do this using jQuery, unless it is possible to make it happen in CSS. I currently have it so that when the text is hovered over it underlines and turns white, but I would like the same to happen when "dropdown" is hovered over. (the text with the id "workbutton" also has the class "menuContent")
CSS:
.menuContent:hover {
text-decoration: underline;
cursor: pointer;
color: #ffffff;
}
.menuContent {
font-family: "cicle-gordita";
text-align: center;
padding: 0px;
margin: 0px;
margin-top: 10px;
color: #b4b0b0;
text-decoration: none;
font-size: 40px;
}
.dropdown {
margin-top: 50px;
height: 50px;
width: 100%;
background: #ffffff;
position: fixed;
display: none;
}
.dropdown-menuBit {
height: 40px;
margin: 0px;
padding: 0px;
float: left;
margin-left: 20px;
}
.dropdown-menuContent {
font-family: "cicle-gordita";
text-align: center;
padding: 0px;
margin: 0px;
color: #b4b0b0;
text-decoration: none;
font-size: 30px;
padding-top: 5px;
}
.dropdown-menuContent:hover {
text-decoration: underline;
cursor: pointer;
color: #ffffff;
}
JQuery:
var main = function() {
$('.dropdown').hide(function() {
$('.main').animate({
top: "-50px"
}, 0);
});
$('#workButton').hover(function() {
$('.dropdown').fadeIn(1)
$('.main').animate({
top: "0px"
}, 100)
});
$('.main, #blogButton, #homeButton, .logo').hover(function() {
$('.dropdown').fadeOut(200)
$('.main').animate({
top: "-50px"
}, 200)
});
Just place the :hover on the parent and it should work just fine:
.dropdown:hover #workButton
Related
My submit button shows up in very different places when i'm viewing it on different screens. I understand the usage of media queries helps with this, but I just want the items to show up in generally the same area.
I've tried using percentages for my dimensions, but the problems persists. Any recommendation? I've had luck with percentages in the past, I'm not sure why they aren't working for me with this specific problem. Is there something else wrong?
Here is my code (the styling for the submit button is at the bottom of the styling sheet):
html {
font-family: 'PT Sans', Helvetica, Arial, sans-serif;
background: #f1f2f6;
}
body {
background: #f1f2f6;
margin: 0;
padding: 0;
}
.Class-Name-Bar {
position: relative;
height: 270px;
width: 75%;
background-color: #ffffff;
margin: auto;
margin-top: 35px;
border-radius: 5px;
}
.Class-Name {
position: absolute;
height: 220px;
background-image: linear-gradient(to bottom, rgba(10, 10, 25, .85), rgba(0, 0, 0, 0.85)), url(https://miro.medium.com/max/2656/1*d0Qd8OUx_TUxG7N6H991ew.jpeg);
width: 100%;
border-radius: 5px 5px 0 0;
}
.Class-Name h1 {
text-align: center;
font-size: 60px;
margin-top: 50px;
font-weight: 200;
color: #ffffff;
}
.Class-Name p {
text-align: center;
font-size: 20px;
color: #f1f2f6;
margin: -20px;
}
#navigation {
position: absolute;
}
div#navigation ul li {
display: inline-block;
margin-top: 86%;
margin-left: 25px;
color: #333333;
font-size: 20px;
list-style: none;
}
div#navigation ul li a {
text-decoration: none;
color: #000000;
}
div#navigation ul li a:hover {
text-decoration: none;
color: #ff4757;
}
.post-area-wrapper {
position: relative;
height: 120px;
background-color: #ffffff;
margin: 20px;
width: 35%;
margin-left: 52.5%;
border-radius: 5px;
}
.post-area {
position: relative;
width: 95%;
margin: 2%;
}
input[type=post] {
padding: 3%;
width: 95%;
border: none;
font-size: 18px;
background-color: #f1f2f6;
margin-top: 3%;
}
.submit {
position: absolute;
border: none;
margin-left: 83%;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
<html>
<head>
<link href="~/css/ClassReview.css" rel="stylesheet">
</head>
<body>
<div class="Class-Name-Bar">
<div class="Class-Name">
<h1> Calculus</h1>
<p> MA2500</p>
</div>
<div id="navigation">
<ul>
<li>Notes</li>
<li>Tests</li>
<li>Quizlets</li>
</ul>
</div>
</div>
<div class="description">
</div>
<div class="post-area-wrapper">
<form>
<div class="post-area">
<input type="post" name="post" placeholder="Review this class, tell us how you really feel..">
</div>
<button type=submit class="submit">Submit</button>
</form>
</div>
</body>
</html>
In order for your submit button to be at the same place all the time you have to either define the exact position for it using top left right bottom or using the below code without defining the position absolute you can simply define it as a block and then give it margin-left:auto which will position it on the right side of the div and give it a small margin from the right side.
.submit {
display:block;
border: none;
margin-right:10px;
margin-left:auto;
padding: 5px 16px;
border-radius: 25px;
background-color: #D3D3D3;
}
I'm new to angular and I'd like to use a greedy navigation as the link below
https://codepen.io/lukejacksonn/pen/PwmwWV
but the problem is that I've been warned not to use document.queryselector(".myElement") for attaching JS eventListeners directly to any DOM element in angular.
Which would be the best way in angular to manage changes in DOM element properties like div's width or any other property of a particular element?
<nav class='greedy-nav'>
<button><div class="hamburger"></div></button>
<ul class='visible-links'>
<li><a target="_blank" href='https://github.com/lukejacksonn/GreedyNav'>Greedy</a></li>
<li><a href='#'>navigation</a></li>
<li><a href='#'>that</a></li>
<li><a href='#'>handles</a></li>
<li><a href='#'>overflowing</a></li>
<li><a href='#'>menu</a></li>
<li><a href='#'>elements</a></li>
<li><a href='#'>effortlessly</a></li>
</ul>
<ul class='hidden-links hidden'></ul>
</nav>
#color-1: #ff9800;
#color-2: #f57c00;
#color-3: #ef6c00;
body {
min-width: 320px;
padding: 30px;
background: #ff9800;
font-family: Helvetica, sans-serif;
}
h1 {
color: #fff;
font-weight: bold;
margin-top: 2rem;
font-size: 24px;
}
p {
color: #fff;
margin-top: 10px;
font-size: 14px;
line-height: 18px;
max-width: 50ex;
}
p.large {
font-size: 1.2rem;
margin-top: 2rem;
}
a {
color: #fff;
}
.greedy-nav {
position: relative;
min-width: 250px;
background: #fff;
a {
display: block;
padding: 20px 30px;
background: #fff;
font-size: 18px;
color: #color-1;
text-decoration: none;
&:hover {
color: #color-3;
}
}
button {
position: absolute;
height: 100%;
right: 0;
padding: 0 15px;
border: 0;
outline: none;
background-color: #color-2;
color: #fff;
cursor: pointer;
&:hover {
background-color: #color-3;
}
&::after {
content: attr(count);
position: absolute;
width: 30px;
height: 30px;
left: -16px;
top: 12px;
text-align: center;
background-color: #color-3;
color: #fff;
font-size: 14px;
line-height: 28px;
border-radius: 50%;
border: 3px solid #fff;
font-weight: bold;
}
&:hover::after {
transform: scale(1.075);
}
}
.hamburger {
position: relative;
width: 32px;
height: 4px;
background: #fff;
margin: auto;
&:before,
&:after {
content: '';
position: absolute;
left: 0;
width: 32px;
height: 4px;
background: #fff;
}
&:before {
top: -8px;
}
&:after {
bottom: -8px;
}
}
.visible-links {
display: inline-table;
li {
display: table-cell;
border-left: 1px solid #color-1;
}
}
.hidden-links {
position: absolute;
right: 0px;
top: 100%;
li {
display: block;
border-top: 1px solid #color-2;
}
}
.visible-links li:first-child {
font-weight: bold;
a { color: #color-1 !important; }
}
.hidden {
visibility: hidden;
}
}
var $nav = $('.greedy-nav');
var $btn = $('.greedy-nav button');
var $vlinks = $('.greedy-nav .visible-links');
var $hlinks = $('.greedy-nav .hidden-links');
var breaks = [];
function updateNav() {
var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
// The visible list is overflowing the nav
if($vlinks.width() > availableSpace) {
// Record the width of the list
breaks.push($vlinks.width());
// Move item to the hidden list
$vlinks.children().last().prependTo($hlinks);
// Show the dropdown btn
if($btn.hasClass('hidden')) {
$btn.removeClass('hidden');
}
// The visible list is not overflowing
} else {
// There is space for another item in the nav
if(availableSpace > breaks[breaks.length-1]) {
// Move the item to the visible list
$hlinks.children().first().appendTo($vlinks);
breaks.pop();
}
// Hide the dropdown btn if hidden list is empty
if(breaks.length < 1) {
$btn.addClass('hidden');
$hlinks.addClass('hidden');
}
}
// Keep counter updated
$btn.attr("count", breaks.length);
// Recur if the visible list is still overflowing the nav
if($vlinks.width() > availableSpace) {
updateNav();
}
}
// Window listeners
$(window).resize(function() {
updateNav();
});
$btn.on('click', function() {
$hlinks.toggleClass('hidden');
});
updateNav();
I know there are similar questions posted but the solutions aren't working for me. Can anyone help me take a look?
I tried shifting the data-toggle and data-target into ahref too but it doesn't work. Not sure if it has anything to do with the css. Thanks for the help in advance!
.navbar a {
text-decoration: none;
color: black;
}
.navbar a.navbar-brand {
height: inherit;
line-height: inherit;
padding-top: 25px;
font-size: 32px;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
}
.navbar a.navbar-brand span {
font-size: 38px;
font-weight: 700;
}
.navbar {
margin: 0 auto;
text-align: center;
}
.nav {
height: 52px;
width: 100%;
background-color: #4679b2;
position: relative;
z-index: 10;
}
.nav>.nav-header {
display: inline;
}
.nav>.nav-header>.nav-title {
display: inline-block;
font-size: 22px;
color: #fff;
padding: 7px 10px 10px 10px;
}
.nav>.nav-btn {
display: none;
}
.nav>.nav-links {
display: inline;
float: right;
font-size: 18px;
}
.nav>.nav-links>a {
display: inline-block;
padding: 14px 20px 12px 10px;
text-decoration: none;
color: #efefef;
}
.nav>.nav-links>a:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.nav>#nav-check {
display: none;
}
#media (max-width:850px) {
.nav>.nav-btn {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav>.nav-btn>label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.nav>.nav-btn>label:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.nav>.nav-btn>label>span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.nav>.nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #333;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
}
.nav>.nav-links>a {
display: block;
width: 100%;
}
.nav>#nav-check:not(:checked)+.nav-links {
height: 0px;
}
.nav>#nav-check:checked+.nav-links {
height: calc(100vh - 50px);
overflow-y: auto;
}
}
<div class="nav-links" data-toggle="collapse" data-target=".nav-collapse.in">
Auditorium
Exhibition
Hotel
</div>
I'm not sure, but I think the data-target attribute should reference an id. You referenced .nav-collapse.in, which is a class.
Try to give your nav-bar an id.
Having trouble with the following code. Hover mouse over the help icon, then mouse to the right and the event fires multiple times and the span "rubber-bands" up and down. Suggestions on how to alleviate this?
HTML
<div class="help">?<span>Help text.</span></div>
CSS (SCSS)
div.help {
position: relative;
margin-right: 8px;
bottom: 1px;
box-sizing: border-box;
cursor: pointer;
font-size: 14px;
display: inline-block;
text-align: center;
line-height: 14px;
width: 16px;
height: 16px;
color: white;
font-weight: bold;
background-color: blue;
border-radius: 8px;
transition: all 0.25s ease;
z-index: 5;
&:hover {
background-color: orange;
}
> span {
text-align: left;
position: absolute;
display: none;
min-width: 300px;
top: 0;
left: 20px;
font-weight: normal;
padding: 15px;
background-color: orange;
border-radius: 8px;
}
}
JS (JQuery)
$(document).ready(function() {
$(".help").mouseenter(function() {
$(this).find("span").show("fast");
}).mouseleave(function() {
$(this).find("span").slideUp("fast");
});
});
I have tried:
$(".help span").mouseenter(function() {
event.preventDefault();
});
// In mouseenter event:
// event.stopPropagation();
Give it a try here:
https://codepen.io/sorensend/pen/VQZzxO
Try this:
$(document).ready(function() {
$(".help").mouseenter(function() {
$(this).find("span").show("fast");
}).mouseleave(function() {
$(this).find("span").slideUp("fast");
});
$(".help span").mouseleave(function(event) {
event.stopPropagation();
});
$(".help span").mouseenter(function(event) {
event.stopPropagation();
});
});
example: https://codepen.io/anon/pen/oEvGNK
Currently, I use PrestaShop, and I wanted to change the width of search box, but, when I change the width of search box to 650px, on desktop it's ok, but on mobile the search box is very long — not responsive at all. Can you help with this issue please?
#search_block_top {
padding-top: 30px;
width: 650px;
}
#search_block_top #searchbox {
float: left;
width: 100%;
margin-top: -20px;
}
#search_block_top .btn.button-search {
background: #7ab55c;
display: block;
position: absolute;
top: 0;
right: 0;
border: none;
color: #fff;
width: 80px;
height: 40px;
text-align: center;
padding: 10px 0 11px 0;
}
#search_block_top .btn.button-search span {
display: none;
}
#search_block_top .btn.button-search:before {
content: "\f002";
display: block;
font-family: "FontAwesome";
font-size: 17px;
width: 100%;
text-align: center;
}
#search_block_top .btn.button-search:hover {
color: #6f6f6f;
}
#search_block_top #search_query_top {
display: inline;
padding: 13px 60px 13px 13px;
height: 40px;
background: #fbfbfb;
margin-right: 1px;
}
.ac_results {
background: #fff;
border: 1px solid #d6d4d4;
width: 271px;
margin-top: -1px;
}
.ac_results li {
padding: 0 10px;
font-weight: normal;
color: #686666;
font-size: 13px;
line-height: 22px;
}
.ac_results li.ac_odd {
background: #fff;
}
.ac_results li:hover,
.ac_results li.ac_over {
background: #fbfbfb;
}
form#searchbox {
position: relative;
}
form#searchbox label {
color: #333;
}
form#searchbox input#search_query_block {
margin-right: 10px;
max-width: 222px;
margin-bottom: 10px;
display: inline-block;
float: left;
}
form#searchbox .button.button-small {
float: left;
}
form#searchbox .button.button-small i {
margin-right: 0;
}
enter image description here
Try setting max-width
#search_block_top {
padding-top: 30px;
width: 100%;
max-width: 650px;
}
You can maybe use media queries and write something like that:
#search_block_top {
padding-top: 30px;
width: 650px;
#media screen and (max-width: 650px) {
width: 95%;
}
}