I've looked around SO and Google, but I haven't found an answer for my question (though I do feel this might be a very commonly asked one, still no luck anyway). All those I found were on jQuery, but I don't want to start jQuery without grasping adequate knowledge of the main JS.
Basically, I have a simple website, and I'm now trying to make the frame of the navigation bar. The navigation bar will dropdown to display other options. My only question is how to make the dropdown STAY when I move out of the main element, that triggers the dropdown, and into the dropdown information.
I noticed it's easier and neater to use CSS's :hover instead of JS, but I prefer to use JS as I'm still starting to learn a little bit of JS, so it's just to gain more knowledge.
Please ignore all the colors and weird formatting in my code, it's just a frame for now that lets me see things better.
PS: SORRY I HAVEN'T OPTIMISED THE TEXT AND VISUALS FOR RESIZED VIEWING AND IFRAMES. SORRY!
Thanks in advance! :)
document.getElementById("server").onmouseover = function() {serverMouseOver()};
document.getElementById("server").onmouseout = function() {serverMouseOut()};
function serverMouseOver() {
document.getElementById("serverdropdownbox").style.display = "block";
}
function serverMouseOut() {
document.getElementById("serverdropdownbox").style.display = "none";
}
.clearfix {
clear: both;
}
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#gigalogomainbox
{
float: left;
width: 30vw;
height: 10vw;
overflow: hidden;
transform: skewX(20deg);
margin: 0 0 0 -4vw;
background-color: white;
}
#gigalogobox
{
margin: 0 3vw 0 2vw;
padding: 0 0 0 2vw;
width: 100%;
height: 8vw;
}
#gigalogo
{
width: 80%;
margin: 3vw 2vw 0 0;
height: 7vw;
}
#steamlogomainbox
{
width: 15vw;
height: 10vw;
float: right;
margin: 0 -4vw 0 0;
background-color: white; /*000c21*/
transform: skewX(-20deg);
overflow: hidden;
}
#steamlogobox
{
margin: 0 -2vw 0 3vw;
padding: 0;
width: 100%;
height: 20%;
}
#steamlogo
{
padding: 0 0 0 2vw;
margin: 3vw 0vw 0 0;
transform: skewX(20deg);
height: 7vw;
}
#placeholderbartop
{
float: left;
width: 60%;
margin: 0;
padding: 0;
height: 10vw;
}
#navbarbox
{
clear: both;
display: block;
width: 100%;
height: 5vw;
padding: 2vw 0 0 0;
margin: auto;
}
#navbar, #navbar ul
{
width: 100vw;
height: 5vw;
background-color: green;
margin: auto;
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 1vw 3vw 0 3vw;
color: red;
font-size:35px;
}
#serverdropdownbox
{
display: none;
color: white;
background-color: darkblue;
}
#serverdropdowncontent
{
list-style-type: none;
width: 15vw;
margin: 0 0 0 15vw;
transform: skewX(15deg);
}
#serverdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
.menugradient
{
backround: darkblue;
}
#server
{
background-color: blue;
}
#server:hover #serverdropdownbox
{
display: block;
}
#gigalogomainbox:hover
{
background-color: red
}
<!DOCTYPE html>
<html>
<head>
<link href="css/mainframe.css" type="text/css" rel=stylesheet>
<script src="scripts/jquery.js"></script>
</head>
<body>
<!--Giga logo, top left-->
<div id="gigalogomainbox" class="clearfix">
<div id="gigalogobox">
<img id="gigalogo" src="images/gigalogo.png">
</div>
</div>
<!--Steam logo, top right-->
<div id="steamlogomainbox">
<div id="steamlogobox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
</div>
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<li>Home</li>
<li id="server">Servers</li>
<li>Community</li>
<li>Store</li>
<li>Download</li>
<li>Contact</li>
</ul>
<div id="serverdropdownbox">
<ul id="serverdropdowncontent">
<li>Server List</li>
<li>GigaDB</li>
<li>CS:GO</li>
</ul>
</div>
</div>
<script src="scripts/frame.js"></script>
</body>
</html>
So, to fix this, it would be easy to fix this in jQuery. But the way to fix it in pure JS is to create multiple ids for the "Servers" content (li's,a tags). Then do the same thing you did with the "Servers" li in JS but with those id's that you created for the "Servers" content. Also, you should do that on id serverdropdowncontent.
Best of Luck,
Ben A.K.A BlackSky
Related
My sandbox on JSFIDDLE
When 'OPEN' is clicked, the content div should expand to full width, but it ended up expanding by 100px width like on the red box. I tried to set width: 100%, in the gray box div and it didn't work.
In the .content class, I had the width set to 100vw without margin: 0 auto and it expanded 100% width to the right side, not screen-fulled size.
[]
I'm testing this function before I deploy it on my website.
jQuery -
$(".openit").on("click", function() {
$(".expandBG").toggleClass("content");
$(".openit").hide();
$(".closeit").show();
$(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
$(".expandBG").toggleClass("content");
$(".openit").show();
$(".closeit").hide();
$(".text").hide();
});
HTML -
<div class="wrapper">
<div class="back">BG
<div class="expandBG">
<div class="openit">OPEN</div>
<div class="flex-col">
<div class="closeit">CLOSE</div>
<div class="content text" style="display: none;">
<div>(CONTENT HERE)</div>
</div>
</div>
</div>
</div>
</div>
CSS -
body {
background-color: #000;
}
.wrapper {
width: 100%;
margin: 0 auto;
text-align: center;
border: solid red 1px;
}
.back {
position: relative;
color: #fff;
width: 110px;
height: 110px;
background-color: red;
margin: 0 auto;
text-align: center;
display: block;
}
.expandBG {
display: block;
width: 100px;
height: 100px;
transition: ease 0.3s;
background-color: #192D38;
overflow: hidden;
margin: 0 auto;
bottom: 0;
text-align: center;
font-family: sans-serif;
color: #fff;
position: relative;
}
.flex-col {
flex-direction: column;
}
.openit {
display: block;
text-align: center;
height: 100%;
cursor: pointer;
margin: 0 auto;
}
.closeit {
display: block;
text-align: center;
cursor: pointer;
width: 100%;
margin: 0 auto;
z-index: 1;
position: relative;
}
.text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -25px;
}
.content {
width: 100%;
height: 50vw;
position: relative;
margin: 0 auto;
}
It's because of the div with a class name back. increase the width of that div to 100% when opneit is clicked and then back to its original size when closeit is clicked.
// add this to your CSS file
.w-full {
width: 100%
}
then include these two lines in your javaScript file
$(".openit").on("click", function() {
$(".back").addClass("w-full"); // This line has been added to your code.
$(".expandBG").toggleClass("content");
$(".openit").hide();
$(".closeit").show();
$(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
$(".back").removeClass("w-full"); // This line has been added to your code.
$(".expandBG").toggleClass("content");
$(".openit").show();
$(".closeit").hide();
$(".text").hide();
});
How can I make a div in to an irregular shape? I am trying to create a navigation bar that contains the logo in the center of the circular shape of this div. Here is what I am trying to make:
I really don't know where to start since I have never had to make any divs that aren't rectangular. The left of the div will contain 2 menu items, the right will contain 3 menu items and the center will contain my circular logo.
You will need to play with exact height and size, but this is a possible take on your problem
.menu {
background: darkgray;
padding: 1rem 0;
margin: 5rem;
text-align: center
}
.menu::after {
content: '';
background: darkgray;
border-radius: 50%;
padding: 5rem;
}
<nav class="menu"></nav>
You can try it with flexbox... I don't know, perhaps you have to build a little bit on it...but it's possible
.nav {
width: 100%;
height: 35px;
display: flex;
justify-content: center;
background-color: grey;
margin-top: 100px;
}
.logoContent {
height: 130px;
width: 130px;
border-radius: 130px;
background-color: grey;
margin-top: -50px;
}
<div class="nav">
<div class="logoContent"></div>
</div>
try this
html
<div id="rect">
<div id="cir">
</div>
</div>
css
#rect {
width: 500px;
height: 50px;
background: green;
margin: 100px;
}
#cir {
width:150px;
height: 150px;
background: green;
border-radius: 100%;
margin: 0 auto;
position: relative;
top: -50px;
}
see this https://jsfiddle.net/9rtoqpjc/
If you just trying for shape, then you can use gradients.
div{
width: 400px;
height: 100px;
color: #333;
background-image: radial-gradient(circle, currentColor 50px, transparent 0),
linear-gradient(transparent 30%, currentColor 30%, currentColor 70%, transparent 60%);
}
<div></div>
Working Fiddle
You should first of all get in confidence width css properties of div.
I suggest you to look here: w3schools.com
Anyway this is an example of code on what you can start working:
div{
background-color: gray;
}
#rectangle{
margin-top: 100px;
width: 500px;
height: 40px;
}
#circle{
position: relative;
width: 200px; /* radiant*2 */
height: 200px; /* radiant*2 */
border-radius: 50%;
left: 150px; /* rectangle_width/2 - radiant */
top: -80px; /* rectangle_height/2 - radiant */
}
#logo{
position: relative;
top: 36px; /* radiant - img_heigth/2 */
left: 36px; /* radiant - img_width/2 */
}
<div id="rectangle">
<div id="circle">
<img id="logo" src="http://findicons.com/files/icons/1070/software/128/mozilla_firefox.png" /> <!-- 128*128 -->
</div>
</div>
try this
html
<div class="header-area">
<div class="header-main">
<div class="menu-left">
<ul>
<li class="menu-1">Menu 1</li>
<li class="menu-2">Menu 2</li>
</ul>
</div>
<div class="logo">
<img src="#" />
</div>
<div class="menu-right">
<ul>
<li class="menu-1">Menu 1</li>
<li class="menu-2">Menu 2</li>
<li class="menu-3">Menu 3</li>
</ul>
</div>
</div>
</div>
css
.header-area {
width: 100%;
margin: 34px 0px;
}
.header-main {
width: 100%;
height: 60px;
position: relative;
background-color: #272727;
}
.menu-left {
width: 40%;
float: left;
}
.logo img {
width: 100%;
position: relative;
top: 38px;
vertical-align: middle;
}
.header-main ul li {
display: inline-block;
padding: 5px;
text-align: center;
}
.header-main ul li a {
color: #fff;
}
.logo {
position: relative;
width: 110px;
height: 110px;
border-radius: 50%;
background-color: #272727;
color: #fff;
margin-left: auto;
margin-right: auto;
top: -27px;
float: left;
}
.menu-right {
width: 40%;
float: left;
}
see this https://jsfiddle.net/onn3b9z7/
You can try and use border-radius: 70% in your css file on a rectangular div and see if that works.
So, as the title says, I want to put <ul> around an image. The ul got 4 <li>, and I want to put 2 <li> on the left side of the image, and 2 <li> on the right side:
<ONE>-----<TWO>-----(imageLOGO.png)-----<THREE>-----<FOUR>
Here is how it looks at the moment:
As you can see the 4 <li> are at the top left corner of the site. They are put on the blue line from the same <div> - #line . I tried with padding, but it looks really bad, and it is hard to control once the page is minimized or resized in any way.
Here is the html file:
<body>
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>TREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="images/chelsea-logo.png">
</div>
</div>
</body>
And the css file:
body {
background: url('../images/background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
}
#top{
width: 150px;
margin: 0 auto;
height: 150px;
z-index: 1;
}
#top img {
position: absolute;
width: 150px;
height: 150px;
z-index: 1;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: inline-block;
padding: 5px;
margin: 25px;
}
.line-menu li {
padding: 0 89px;
display: inline-block;
}
I'll provide more information if needed. Thank you in advance for your time.
Here is one way of doing it.
You have the right idea by using absolute positioning to place the logo over the link panel.
I specified a width for the li elements and then applied text-align: center on the parent ul to keep then centered.
To open up space for the logo, I added a right-margin of 200px between the 2nd and 3rd li elements, using the nth-child selector.
You can adjust margins on various elements to control the spacing between and above the li elements.
Note, for smaller screena, you may need to use media queries and make adjustments to the margins and so on.
body {
margin: 0;
}
#top {
border: 1px dotted black;
position: absolute;
top: 0px;
left: 0;
right: 0;
text-align: center;
}
#top img {
vertical-align: top;
width: 150px;
height: 150px;
}
#top img:hover {
width: 158px;
height: 158px;
transition: all 0.3s ease;
}
#line {
position: absolute;
top: 0px;
width: 100%;
height: 75px;
background: #423BD9;
}
.line-menu {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.line-menu ul {
display: block;
text-align: center;
margin: 20px 0 0 0;
padding: 0;
}
.line-menu li {
display: inline-block;
margin: 0 20px;
width: 100px;
border: 1px solid #CCCCCC;
}
.line-menu li:nth-child(2) {
margin-right: 200px;
}
<div id="line">
<div class="line-menu">
<ul class="menu-buttons">
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
</ul>
</div>
</div>
<div id="top">
<div id="logo">
<img src="http://placehold.it/150x150">
</div>
</div>
Add image after one and two. And .list-menu li float:left; display:block;
I have put together a website - hosted here: http://curleylab.psych.columbia.edu/
I have used modernizr.js - http://curleylab.psych.columbia.edu/js/modernizr.js
css stylesheet is here - http://curleylab.psych.columbia.edu/css/css1.css
For the menu at the top (visible and working on desktops), I have actually used <footer> tags for each page. That bit of HTML looks like this:
<footer role="contentinfo">
<div>
<nav id="menu">
<ul role="navigation" class="nav">
<li><strong>Curley</strong>Lab </li>
<li>Research</li>
<li>Personnel</li>
<li>Publications</li>
<li>Teaching</li>
<li>R packages</li>
<li>R instruction</li>
<li>Contact</li>
</ul>
</nav>
</div>
</footer>
The relevant bits of css that apply to <footer> appear here:
/*Footer*/
footer[role=contentinfo] {
color: #fff;
background: #000;
margin: 0 -1em;
position: fixed;
z-index: 2;
}
footer[role=contentinfo] > div {
max-width: 70em;
padding: 0 1em;
margin: 0 auto;
overflow: hidden;
}
footer[role=contentinfo] p {
margin: 0;
}
footer[role=contentinfo] .nav li a {
display: block;
border-bottom: 1px solid #808080;
padding: 1em;
margin: 0 -1em;
}
footer[role=contentinfo] a {
display: inline-block;
padding: 0.5em 0;
}
footer[role=contentinfo] a.nav-home {
color: #fff;
}
footer[role=contentinfo] .f-rga {
padding: 0.6em 0;
}
footer[role=contentinfo] img {
max-width: 4.4em;
display: inline-block;
margin-bottom: -0.22em;
}
/*End Footer*/
/* Footer */
footer[role=contentinfo] {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
}
footer[role=contentinfo] .nav {
float: left;
}
footer[role=contentinfo] .nav li {
display: inline-block;
margin-right: 0.8em;
}
footer[role=contentinfo] .nav li a {
border: 0;
font-size: 110%;
}
footer[role=contentinfo] .f-rga {
float: right;
}
The issue is that it seems to be working well enough on desktops, but on mobile devices the menu (everything contained in the footer) just doesn't appear. Any help greatly appreciated.
So I'm trying to make the page continue to add the list items without breaking past the body element as shown.
I would like to keep the all the list items within the body and div like the first few. My best idea on how to go through this is by using if statement at the bottom of the JS to rerun autoResizeDiv. Thanks for any help!!
JS
$(function() {
var $newItemButton= $('#newItemButton');
var $newItemForm= $('#newItemForm');
var $textInput= $('input:text');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e) {
e.preventDefault();
// this prevents the form from submitting which you need
var newText=$('input:text').val();
$('li:last').after('<li>'+ newText + '</li>');
$newItemForm.hide();
$newItemButton.show();
$textInput.val('')
// this empties the text box so you can add a new entry
});
function autoResizeDiv() {
document.getElementById('page').style.height = window.innerHeight +'px';
// document.getElementById('newItemButton').style.height = window.innerHeight +'px';
}
window.onresize = autoResizeDiv;
autoResizeDiv();
if(document.getElementById('addButton').clicked == true) {
autoResizeDiv();
}
})
CSS
#media screen and (max-width:700px) {
body {
background: #111;
background-size: 780px;
font-family: 'Dosis', sans-serif;
color: white;
display: block;
height:100%;
}
h1, h2, p {
text-align: center;
}
img {
max-width: 50px;
/* display: inline-block; */
/* margin: 4% 0 0% 165px;*/
padding: 10% 45% 0 44%;
/* vertical-align: middle;*/
/* position: absolute;*/
}
h1 {
margin: -1% 0 0 0;
font-size: .8rem;
letter-spacing: 1.2px;
}
h2 {
min-width: 70%;
letter-spacing: 8px;
text-transform: uppercase;
margin: 5% 0 4% 0%;
font-size: 1.4rem;
}
div {
margin: auto;
background: #222;
width: 360px;
}
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
}
ul {
list-style: none;
padding: 0;
margin: 5%;
}
li:nth-child(-n+3) {
background-color: #B80000;
}
li:nth-child(n+4) {
background-color: coral;
}
li {
margin: .3% -5.2% .3% -5.2%;
padding: 12px 0 1px 16px;
height: 35px;
font-size: 1.1rem;
/* width: 100%;*/
/*text-align: 30% 0 30% 30%*/
}
p {
color: #111;
background: #FFF;
border-radius: 1.5% / 10%;
font-size: .85rem;
margin: 0% 10%;
}
#newItemButton {
position: absolute;
background: #222;
}
#newItemForm {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
-webkit-flex-wrap: wrap;
background: #222;
z-index: 10; position:relative
}
#itemDescription {
margin: 3.8px 10px 0 0;
width: 68%;
border: none;
border-radius: 2.5% / 18%;
/* padding: 10px 0 0 0;*/
font-size: 1rem;
text-align: left;
text-indent: 10px;
}
#addButton, #showForm {
background: #B80000;
border: none;
text-transform: uppercase;
font-weight: bold;
font-size: 1rem;
color: white;
letter-spacing: .9px;
text-align: center;
}
#addButton {
border-radius: 8% / 20%;
padding: 10px 22px;
margin: 3px 0px 0 0;
}
#showForm {
border-radius: 3% / 11%;
padding: 10px 22px;
margin: 3px 17px 0 0;
float: right;
}
HTML
<!DOCTYPE html>
<html lang="en">
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-1.11.2.js"></script>
<script src="myscript.js"></script>
<link href='http://fonts.googleapis.com/css?family=Dosis:300|Yanone+Kaffeesatz'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
<head>
<title> JavaScript Foundations: Variables</title>
<style>
html {
background: #FAFAFA;
font-family: sans-serif;
}
</style>
</head>
<body id="body">
<div id="page">
<img src="lion.png" alt="there's supposed to be a lion">
<h1 id="header">LISTKING</h1>
<h2>Buy Groceries</h2>
<p>"Lions are awesome, fun to play with, and have to pee a lot"
-J.K. Growling</p>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>
</body>
</html>
Please have a look at your CSS and adjust the #page div to have overflow, or remove the height entirely.
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
overflow: scroll;
}
try changing your body height:100% to min-height: 100%;
making ul overflow-y:scroll also solves the problem, but a scroll bar may disrupt your look and feel