All of my elements hide and show correctly using slidetoggle(), EXCEPT for my li:before. I've tried forcing the overflow, visibility, display, etc on the :before and the li, and nothing is helping, it still shows the bullets set using the :before class. What needs to happen to hide these bullets when slidetoggle() is activated/deactivated?
jQuery(document).ready(function($) {
$("#read-more").click(function(){
$(".careers-position").slideToggle(800);
return false;
});
});
ul {
line-height: 2.4em !important;
margin-left: 20px;
padding: 0 0 23px 1em;
}
li {
list-style: none !important;
color: #656565;
}
li:before {
content: "";
background: #9e9e9e;
width: 6px;
height: 6px;
display: block;
position: absolute;
left: 18px;
margin-top: 16px;
border-radius: 20px;
overflow: hidden;
backface-visibility: hidden;
}
.careers-position {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="careers-position">
<h3>Pilot</h3>
Position information will go here.
We are an equal opportunity employer and all qualified applicants will receive consideration for employment.
<strong>Requirements:</strong>
<ul>
<li>Multi Commercial (ATP preferred)</li>
<li>First Class Medical</li>
<li>Passport</li>
<li>90 day currency</li>
<li>Clean FAA record</li>
</ul>
</div>
<div class="careers-read-more">
<a class="quick-btn" id="read-more" href="#">Read More</a>
</div>
Add position relative:
.careers-position {
display: none;
position: relative;
}
Demo
Here look at this fiddle https://jsfiddle.net/wfccp58p/4/
ul { line-height: 2.4em; margin-left: 20px;padding: 0 0 23px 1em;list-style-type: none;}
I removed the li:before and added the list-style-type to the ui. Not sure if you still wanted some of the LI:Before pseudo stuff, but this fixes your issue.
Related
I'm having a problem where my list for my dropdown menu appears in another location then expected to be at.
This is part of my code. I've tried multiple references, like YouTube, w3school, and etc.
(HTML / JS)
.dropdownButton {
color: #fe4b4b;
text-decoration: none;
font-family: 'Titillium Web', sans-serif;
font-size: 165%;
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
.dropdown {
align-items: center;
}
.list {
position: absolute;
align-items: center;
text-align: center;
transform: scaleY(0);
transform-origin: top;
transition: 0.3s;
height: auto;
width: 150px;
border-radius: 5px;
background-color: #3a4172;
cursor: pointer;
overflow: hidden;
box-shadow: 2px 0px 10px 5px rgba(0, 0, 0, 0.7);
list-style: none;
}
.newlist {
transform: scaleY(1);
}
.links {
color: #ffffff;
text-decoration: none;
font-family: 'Titillium Web', sans-serif;
font-size: 130%;
background-repeat: no-repeat;
background-color: transparent;
border: none;
border-radius: 5px;
width: 100%;
}
.links:hover {
color: #fefb4b;
border-left: 5px solid #fefb4b;
cursor: pointer;
transform: scale(1.025);
}
<header>
<ul>
<li id="regular">EARN</li>
<li id="regular">PROMOCODES</li>
<li id="regular">WITHDRAW</li>
<li class="dropdown">
<button class="dropdownButton" href="#">MORE ▼</button>
<ul class="list">
<button class="links">REFFERALS</button>
<button class="links">DAILY</button>
</ul>
</li>
<li id="login">SIGN UP</li>
</ul>
<script>
//Dropdown
let click = document.querySelector('.dropdownButton');
let list = document.querySelector('.list');
click.addEventListener("click", () => {
list.classList.toggle('newlist');
});
//Dropdown End
</script>
</header>
I don't know how to fix it cause I'm a beginner, any help on fixing it / guidance would be nice! Thanks.
We're going to need more CSS and possibly HTML to see exactly why your code is behaving unexpectedly.
Definitely mimicking the first comment on here though: IDs should be unique to each element. If you want those li elements to have the same styling, use a class:
<li class="regular">
This will apply the same styling to different elements.
However, when an element appears in the top left like that, in my experience, I am using the CSS 'display', 'float', or 'position' properties incorrectly. If you haven't already, look into how the float and display properties function (as well as relative vs absolute positioning).
Check out this codepen.io, where I have it working by adding:
li {
float: left;
}
This allows your list items to exist on the same line properly. My guess is that you are using
li {
display: inline; /* incorrect usage */
}
to get them on the same horizontal axis. This is fine for regular text elements, but will cause "unexpected" behavior with positioning of child elements. For a more detailed explanation, please see this StackOverflow post:
What is the purpose of float:left on an unordered list when creating a horizontal navigation bar?.
Tip for next time: if your local looks very different than what you get if you paste into codepen.io, people will be less inclined to help you.
If this properly answered your question please upvote and mark best answer :)
I want to implement the following tiny drop down menu into my project.
Is there anything inherently wrong with my code? I attempted the :hover pseudo via CSS but was unsuccessful. Is there a better way to JS this thing?
document.querySelector('.dropbtn').addEventListener('mouseenter', function(){
document.querySelector('.dropdown-content').style.visibility = 'visible'
})
document.querySelector('.dropbtn').addEventListener('mouseleave', function(){
document.querySelector('.dropdown-content').style.visibility = 'hidden'
})
.dropdown {
display: flex;
align-items: flex-start;
}
.dropbtn {
background-color: darkslategray;
color: white;
padding: 6px 10px 6px;
font-size: 18px;
border: none;
cursor: pointer;
}
.dropdown-content {
background-color: darkslategray;
display: inline-grid;
visibility: hidden;
padding: 6px 10px 6px;
}
img {
margin: 3px;
height: 40px;
width: 120px;
border: 1px solid gray;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt="">
<img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt="">
<img src="http://www.publicdomainpictures.net/pictures/50000/velka/blurred-background-green.jpg" alt="">
</div>
</div>
Codepen: https://codepen.io/HelleFl/pen/KyWYYX
Although there are several posts describing how to create a dropdown menu using just HTML and CSS, I'll try to answer your question.
tl;dr: Use CSS over JS for better performance
CSS or JS? Which one is better?
Basically whenever possible, use CSS over JS. There is a great SO answer about this here.
Going further, CSS animations should be preferred over JS animations unless the animation should have some advanced effects. There is a good google developers blog post on this as well.
How to create a dropdown menu
You can find the answer here. Basically you need to set the :hover onto the parent element, that holds both the link and submenu.
li img {
width: 120px;
height: auto;
}
ul > li {
display: inline;
position: relative;
min-width: 150px;
}
/* hide submenus by setting the max-height to 0 */
ul > li > ul {
max-height: 0;
overflow: hidden;
transition: max-height .75s ease;
}
/* set max-height to an approximate height it could have */
ul > li:hover > ul {
max-height: 300px;
}
ul.submenu {
background: #eee;
position: absolute;
left: 0;
top: 1em;
}
ul.submenu > li {
display: block;
}
<nav>
<ul>
<li>Hyperlink 1</li>
<li>
Hyperlink 2
<ul class="submenu">
<li><img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt=""></li>
<li><img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt=""></li>
<li><img src="http://www.publicdomainpictures.net/pictures/50000/velka/blurred-background-green.jpg" alt=""></li>
</ul>
</li>
</ul>
</nav>
I guess you was facing the same issue that I was facing when I checked your codepen, since the .dropbtn are in the same level as .dropdown-content, the selector .dropbtn:hover .dropdown-content wont work since its searching for a child inside .dropbtn, so you have to use the sibling selector:
.dropbtn:hover ~ .dropdown-content{
visibility: visible
}
(CSS animation its better than Javascript)
Also, a good practice in Javascript is to save the DOM element into an variable if you will use it multiple times, so you dont have to search for the DOM element again:
var dropBtnDOM = document.querySelector('.dropbtn');
var dropdownContentDom = document.querySelector('.dropdown-content');
dropBtnDOM.addEventListener('mouseenter', function(){
dropdownContentDom.style.visibility = 'visible'
})
dropBtnDOM.addEventListener('mouseleave', function(){
dropdownContentDom.style.visibility = 'hidden'
})
.dropdown:hover .dropbtn ~ .dropdown-content{
visibility: visible
}
I've been going through problems in positioning navbar even after the fact that its responsive. Problem comes when zooming in and zooming out (except for Mozilla), and I got no choices than asking experts for a solution because I am a noob in coding.
Chrome zoom-out: https://s31.postimg.org/kjnbou0yj/zoom_out_chrome.png
Mozilla zoom-out (also perfect in zoom-in): https://s31.postimg.org/ud3lz1i3v/zoom_out_moz.png
Basically, I want to join my navbar with another div element so that it do not move from its position and I don't know how to use :target etc, and do not even know if target will solve my problem.
My need: I just need my navbar to stick to one size. With current settings, it is working PERFECTLY with MOZILLA ONLY. I don't know why it show blank space in chrome and other browsers when zoom-out and when zoom-in. Working fine with Chrome 100% zoom and working fine with Opera 100% zoom. The problem comes when zooming in or zooming out. Again, it is working perfectly for mozilla in zooming etc, no such problems with mozilla. And my navbar is responsive too.
My guess: I think that attaching this navbar with hidden div class could solve this problem. BUT I am a complete noob in coding and I can just guess.
Here is the code of my navbar:
ul.pnav {
position: relative;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border: none;
list-style-type: none;
width: 900px;
height: 55px;
margin: auto;
top: 281px;
left: 0;
right: 0;
padding: 0;
overflow: hidden;
background-color: #767676;
z-index: 9999;
}
#-moz-document url-prefix() {
ul.pnav {
top: 286px
}
}
ul.pnav li {float: left;}
ul.pnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 3s;
font-size: 17px;
font-family: Arial;
font-weight: bold;
}
ul.pnav li a:hover {background-color: #111;}
ul.pnav li.icon {display: none;}
#media screen and (max-width:680px) {
ul.pnav li:not(:first-child) {display: none;}
ul.pnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.pnav.responsive {position: relative;}
ul.pnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.pnav.responsive li {
float: none;
display: inline;
}
ul.pnav.responsive li a {
display: block;
text-align: left;
}
}
I have this in html as a code:
<ul class="pnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
☰
</li>
</ul>
This is div class to which I want to attach navbar.
<div class="fornavbar"></div>
I don't know how to proceed further, please help.
Look at this fiddle: https://jsfiddle.net/8qepe4gw/2/
In order for them to align together you just simply put them both inside of a common div like this (.container),
<div class="container">
<ul class="pnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">☰</li>
</ul>
<div class="fornavbar"></div>
</div>
And then you assign a width to the .container, and then you can give both the .pnav and .fornavbar a width of 100% so they stretch all the way out inside of the container, as in they have the same width.
Now the reason why it only worked in firefox is probably because of this part of the code:
#-moz-document url-prefix() {
ul.pnav {
top: 286px
}
}
Because #-moz-document only targets firefox.
It's still gonna work in all browsers now though with the new code I added in the fiddle so you shouldn't have to worry about it, perhaps even delete that part of the CSS code(?).
I have a following HTML:
<span class="day-number">{{day-number}}</span>
<div class="event-box">
<div class="event-container">
</div>
<div class="more-events">more ...</div>
</div>
Event-container is filled with an unknown number of .event elements like the following:
<div class="event">{{event-name}}</div>
I want to show or hide the .more element based on if the .event-container has a height of over 76px (equal to the height of four .event elements stacked).
The styling for the above elements:
.event {
text-align: left;
font-size: .85em;
line-height: 1.3;
border-radius: 3px;
border: 1px solid #3a87ad;
background-color: #3a87ad;
font-weight: normal;
color: whitesmoke;
padding: 0 1px;
overflow: hidden;
margin-bottom: 2px;
cursor: pointer;
}
.event-box {
max-height: 76px;
overflow: hidden;
position:relative;
}
.event-box .more-events {
height: 10px;
position: absolute;
right: 0;
bottom: 10px;
display: none;
z-index: 5;
}
No styling for .event-container
I can do what I want with Javascript (jQuery):
$(".event-box").each(function(){
var $this = $(this);
if($this.children(".event-container").height() > 76){
$this.children(".more-events").css("display", "block");
} else {
$this.children(".more-events").css("display", "");
}
});
And run that every time a make a change, but I'd rather do it with CSS.
Is this possible? Maybe with pseudo elements or media queries or something?
JSFIDDLE: http://jsfiddle.net/pitaj/LjLxuhx2/
If changing the markup is acceptable there is a possibility to achieve a somewhat similarly looking page without using JavaScript to show or hide, here is the Fiddle
I have removed <div class="more-events">more ...</div> line and made elements of event class to get hide when it is necessary I also made them to appear when hovering over more ... .
The CSS I have added:
.event:nth-child(n){
display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
display: block;
}
.event:nth-child(5){
text-indent: -9999px;
position: relative;
display: block;
color: black;
border: none;
background-color: #FFF;
}
.event:nth-child(5)::before{
position: absolute;
text-indent: 0px;
content: "more ...";
display: block;
}
.event:nth-child(5):hover{
position: static;
text-indent: 0;
border: 1px solid #3a87ad;
background-color: #3a87ad;
color: whitesmoke;
}
.event:nth-child(5):hover::before{
display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
display: block;
}
And for .event-box class I have commented out max-height: 76px; because in my browser 76px was not equal to the height of four .event elements stacked. Also removed update function.
I dont think it's possible using css only. but for better approach in what you are trying to do.instead of using max-height for .event-box I use this css which is add display:none to +4.event on your event container:
.event-box .event-container .event:nth-child(n+5){
display: none;
}
and now when it's more than 4 .event your more text appears. FIDDLE
UPDATE:
HERE I make little change in you js as well and make it more professional,
while you are using template to render the page, maybe you can do it as follow
<div class="event-container">
{{#each events}}
<div class="event">{{event-name}}</div>
{{/each}}
</div>
{{#if canshowmore}}
<div class="more-events">more ...</div>
{{/if}}
and
function canshowmore() {
return events.length >= 4;
}
My question is what would be the preferred code to accomplish the reblog and like button, only showing when I hover over a post? as should here: http://giraffes-cant-dance.tumblr.com/
I'm working on a personal website, at www.onwardandbeyond.tumblr.com and the posts are going horzontally across the page, instead of up and down.
I also wanted to create a website where when you hover over a post the following show: reblog button, like button, permalink and the information about who the source who originally created the post is.
Is there an easier way for this to be achieved that actually works because nothing I seem to come up with does.
HTML:
<div id="date">
{block:Date} {DayOfWeek} {ShortMonth} {DayOfMonthWithZero}, {Year}, >{TimeAgo}{/block:Date}
{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
</div>
<div id="info">
{block:RebloggedFrom}
reblog: <a href="{ReblogParentURL}" title="{ReblogParentTitle}">
{ReblogParentName}
</a>
origin: <a href="{ReblogRootURL}" title="{ReblogRootTitle}">
{ReblogRootName}>
<a/>
{/block:RebloggedFrom}
</div>
CSS:
#info {
color:#000;
position: absolute;
border-bottom: 2px #000 solid text-transform: uppercase;
letter-spacing: 2px;
font: 10px Consolas;
}
#info {
margin-top: 0px;
margin-bottom:0px;
margin-right:;
margin-left:;
}
#info {
padding-top: 620px;
padding-bottom:0px;
padding-right:0px;
padding-left:280px;
}
#info a {
color: #000;
}
#date a, {
width: 280px;
color: #000;
position:absolute;
margin-top: 120px;
margin-left: 100px;
visibility: visible:
}
#date {
display: none;
}
#date:hover #date {
display : block;
}
Place the things you want to show up within the div you want to hover. If the wrapper div is .wrapper and the hover items are in a div .controls:
.controls {
display:none;
}
.wrapper:hover .controls {
display:block;
}
Here is a fiddle showing how this would work: http://jsfiddle.net/6Fq5E/
If the two are siblings (and the controls can't be within the wrapper), then you can use the following:
.div:hover ~ .controls {
display:block;
}
Here is a fiddle for this version. http://jsfiddle.net/UxxKr/1/
You could try something like this
css
div {
display: none;
}
a:hover + div {
display: block;
}
html
<a>Hover</a>
<div>This to show on hover</div>
#date:hover+#info,#info:hover{display:block}