I am trying to implement vertical tabs using JQuery. I have been able to create vertical tabs as I require but the content which I want to show for each tab is all getting displayed in one tab only. Here is the fiddle I have created -
https://jsfiddle.net/z5uq0ppd/
The code is as such -
$(function() {
$("#Configuration").tabs();
});
.side-tabs {
float: left;
width: 20%;
height: 100%;
border: 1px solid black;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.side-tabs:after {
display: block;
clear: both;
content: '';
background-color: #333;
}
.side-tabs li {
float: left;
}
.side-tabs a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.side-tabs a:hover {
background-color: #4CAF50;
}
<div id="Configuration" style="width:100%;height:100%">
<div class="side-tabs">
<ul>
<li class="active" id="09">Home</li>
<li id="10">Add Channel</li>
<li id="11">Add Device</li>
<li id="12">Add Device Type</li>
<li id="13">Display Device Tree</li>
</ul>
</div>
<div style="float:right;width:78%;height:100%; border:1px solid black;">
<div id="ConfigurationPage" style="padding:10px; width:100%; height:100%;">Welcome to Configurations.</div>
<div id="addDevicePage" style="padding:10px; width:100%; height:100%;">Add Device Page.</div>
<div id="addChannelPage" style="padding:10px; width:100%; height:100%;">Add Channel Page.</div>
<div id="addDeviceTypePage" style="padding:10px; width:100%; height:100%;">Add Device Type page.</div>
<div id="DisplayDeviceTreePage" style="padding:10px; width:100%; height:100%;">Device Tree</div>
</div>
</div>
I have implemented horizontal tabs successfully and was doing verticals the same way. However, it doesn't seem to work.
Related
I tried to implement Tab controls. However, when I run the page, the 1st instance will have all the fields from other tabs visible in the 1st tab itself. If I click on 2nd tab and then comeback to 1st tab, I works as expected.
View:
<style>
.tabs {
height: 1475px; width: 100%; text-align: left; }
.tab-nav-wrapper {
width: 100%; overflow-x: auto; position: relative !important; z-index: 999 !important; top: 3px; }
.tabs ul {
display: block; overflow-y: hidden; margin: 0px; }
.tabs ul li {
display: inline-block; border: 1px solid grey; border-bottom: 3px solid blue; background-color: white; }
.tabs ul li.active {
border: 1px solid black; border-bottom: 3px solid white; }
.tabs ul li a {
text-decoration: none; color: blue; padding: 10px; line-height: 25px; position: relative; font-weight: bold; }
.tab-content-wrapper {
position: relative !important; z-index: 1 !important; border: 3px solid blue; padding: 20px; min-height: 40px; }
.tab-content {
display: block; height: 700px; width: 100%; }
</style>
<body>
<div class="tabs">
<div class="tab-nav-wrapper">
<ul>
<li id="tab1Section" class="active">Corporation Details</li>
<li id="tab2Section">Contact Information</li>
<li id="tab3Section">Documents</li>
</ul>
</div>
<div class="tab-content-wrapper">
<div id="tab1" class="tab-content">
Content 1
</div>
<div id="tab2" class="tab-content">
Content 2
</div>
<div id="tab3" class="tab-content">
Content 3
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$(".tab-nav-wrapper li").click(function (e) {
e.preventDefault();
e.stopPropagation();
$(".tab-nav-wrapper li").removeClass("active");
$(this).addClass("active");
var target = $(this).find("a").attr("href");
$(".tab-content-wrapper").find(".tab-content").hide();
$(".tab-content-wrapper").find(target).show();
})
});
</script>
Below is the result I have. As you can see, last field in the tab 1 is the button. But, I am getting that Tab 2 connect below that and tab 3 content after tab 2.
When I click on tab 2 and comeback to tab 1, it works as expected.
Can someone, help me with this please?
Change to
.tab-content {
display: none;
height: 700px;
width: 100%; }
.tab-content + .tab-content{
display: none;
It should hide all tabs but first one.
than your script will activate necessary tab
I'm not very knowledgeable in javascript. But I need a dropdown on a vertical menu that is pure javascript, so I copied/paste the script from W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_dropdown
and modified it to fit the page style. This menu needs to be on multiple pages, so it's also an html include. I got it to somewhat work, but you have to double click the drop-drop down in order to close it and this needs to be a single-click. I've been searching for a solution for a couple weeks now and still not sure what I'm doing wrong. I can't use jquery, bootstrap or any outside library since it's not connected to the internet.
HTML:
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div onclick="myButton()">Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
Codepen
The problem is that on your .drop-button element, you have an inline onClick() attribute/event, AND inside the handler function (function myButton()) you you declare another eventListener on top of that.
You should just remove the onclick="myButton()" attribute all together, and then your JavaScript would look like this:
(Run code snippet)
There are a few different ways in JavaScript to declare event listeners. One way is Inline/HTML Event Handlers that you put inline on the HTML element like an attribute, ie- <div onClick="handlerFunction"> But the more modern, and more recommended way is using addEventListener() directly from your JavaScript.
var dropdown = document.querySelector(".drop-button");
dropdown.addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display == "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display= "block";
}
});
#content {
margin: 1.875em 0px 0.625em 0px;
width: auto;
background-color: #002f6c;
border-radius: 0.75em;
-webkit-border-radius: 0.75em;
-moz-border-radius: 0.75em;
display: inline-block;
overflow: hidden;
top: 9.375em;
}
.quick {
margin: 0;
padding: 0;
display: block;
overflow: hidden;
font-family: sans-serif;
}
.quick a {
display: block;
height: auto;
padding-top: 0.625em;
padding-bottom: 0.625em;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
text-align: center;
text-decoration: none;
background-color: #888B8D;
}
.quick a:hover {
display: block;
width: auto;
height: auto;
color: #002F6C;
background-color: #FFD300;
}
.topvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmvert {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.btmverthome {
width: auto;
margin: 0 auto;
display: block;
overflow: hidden;
}
.vertheader {
width: auto;
padding: 2%;
display: block;
text-align: center;
}
.vertbtn {
width: auto;
cursor: pointer;
display: block;
}
.vertbtn :hover {
background-color: #FFD300;
position: relative;
display: block;
}
a.backhome {
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
color: #fff;
text-align: center;
padding: 2%;
box-sizing: border-box;
}
a.backhome:hover {
color: #002f6c;
background-color: #FFD300;
position: relative;
display: block;
}
.quicklinks {
color: #fff;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
font-weight: 600;
}
.drop-button {
padding-top: 0.625em;
padding-bottom: 0.625em;
text-decoration: none;
font-family: sans-serif;
font-size: calc(0.5vw + 0.5vh + 0.5vmin);
color: #fff;
display: block;
border: none;
background-color: #888B8D;
width: 100%;
text-align: center;
cursor: pointer;
outline: none;
}
/* On mouse-over */
.drop-button:hover {
color: #002f6c;
background-color: #FFD300;
}
.main {
margin-left: 200px;
font-size: 20px;
padding: 0px 10px;
}
.active {
background-color: #06a7e0;
color: white;
}
.dropdown-container {
display: none;
background-color: #b4e4f5;
border-bottom: solid 2px #06a7e0;
}
.dropdown-container > a {
background-color: #50c1e9;
border-bottom: solid 1px #06a7e0;
}
a {
display: block;
position: relative;
color: #f3f3f3;
text-decoration: none;
}
a:hover {
color: #fff;
position: relative;
}
<div id="content">
<div class="topvert">
<div class="vertheader">
<span class="quicklinks">QUICK MENU LIST</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="quick">
<div class="drop-button active"><div>Drop down Menu Item
</div></div>
<div class="dropdown-container" style="display: block;">
Menu Item
</div>
</div>
</div>
</div>
<div class="btmvert">
<div class="vertheader">
<span class="quicklinks">2ND HALF (HEADLINE) QUICK MENU</span>
</div>
<div class="vertbtn">
<div class="quick">
Menu Item
</div>
<div class="vertbtn">
<a class="backhome" href="#">Back to Home Page</a>
</div>
</div>
</div>
</div>
I have a header and I need a small menu box below it, I'm trying to make sure I won't need to use top in css, and I can just add a line break in HTML. I have the following code for the header, the global_tools_menu is the menu I'm trying to add. For some reason, it starts from the top of the page? How would I make it start from just below the header? Here's the codeHTML:
<div class="global_header">
<b><p>ex</p></b>
<header>
<ul class="nav-bar">
<li class="nav-item global_tools" onclick="tools()"><a><img src="/ex/assets/tools.png" width="20px"/></a></li>
<?php
if(isset($_SESSION['id'])) {
echo '<li class="nav-item right-3826" onclick="redirect(`myaccount`);"><a>My Account</a></li>';
echo '<li class="nav-item right-3826" onclick="redirect(`scripts/logout.php`);"><a>Logout</a></li>';
}
if(!isset($_SESSION['id'])) {
echo '<li class="nav-item right-3826" onclick="redirect(`login`);"><a>Log in</a></li>';
echo '<li class="nav-item right-3826" onclick="redirect(`signup`)";><a>Sign Up</a></li>';
}
?>
<li class="nav-item" onclick="redirect('');"><a>Home</a></li>
<li class="nav-item" onclick="redirect('all');"><a>All</a></li>
<li class="nav-item" onclick="redirect('search');"><a>Search</a></li>
</ul>
</header>
</div><br>
<div id="global_tools_menu">
<div id="global_tools_true">
</div>
<div id="global_tools_false">
</div>
</div>
CSS:
.tools {
background-image: url('assets/tools.png');
}
a {
color: #009AFF;
text-decoration: none;
}
body {
font-family: 'PT-Sans', sans-serif;
}
.nav-bar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #009AFF;
height: 30px;
border: 1px solid;
}
.nav-item {
display: block;
color: #fff;
text-align: center;
padding: 6px 8px;
width: calc(2px + 13%);
text-decoration: none;
float: left;
border-right: 1px solid #000;
cursor: pointer;
background-color: #0050FF;
}
.nav-item a {
color: white;
}
.nav-item:hover {
background-color: #0039B5;
}
.right-3826 {
float: right;
border-right: 0px solid;
border-left: 1px solid #000;
}
input:focus {
outline: none;
}
.global_header p {
position: relative;
font-size: 70px;
cursor: pointer;
text-align: center;
margin-bottom: 20px;
vertical-align: middle;
top: -20px;
color: white;
}
.global_header {
background-color: #009AFF;
word-wrap: break-word;
position: absolute;
top: 0px;
width: 100%;
left: 0;
}
.global_tools {
background-color: white;
}
.global_tools:hover {
background-color: #EAEAEA;
}
#global_tools_menu {
position: relative;
width: 400px;
height: 700px;
background-color: #080808;
Here is a JSFiddle for that. I need to make that black box start from below the header?
https://jsfiddle.net/qypm88dm/
I don't know if this is the answer you were looking for but I would do this,
add
<div class="blank"></div>
just below
<div class="global_header">
...
</div>
so it would be
<div class="global_header">
...
</div>
<div class="blank"></div>
and css would be
.blank {
height: 190px;
width: 100%;
}
https://jsfiddle.net/qypm88dm/2/
Set the position of global_tools_menu to inline instead of absolute or relative because those are in reference to the top left of the page, which is why it is up at the top. If you set it to inline it will pop down right below your header.
Edit: My mistake, that will set it behind it, but if you do that and then give it margin-top: 200px that will get it below it. But that may not be the exact fix you want.
I am making a header for a page, but from some point I noticed that the text-family is being changed when the dropdown menu was being launched(Safari 8). Then I tried to open it in Chrome, where it didn't changed when launching jQuery function. But when I tried to change the font, but it didn't make any difference. It did't changed the font at all. So even though I don't have specified the font for the header tabs, it's still formatted. Thanks in advance for help. I am sorry if it's just some manor mistake, I am quite new to this.
$(document).ready(function() {
$('.hdr-drpdwn-menu').hide();
$('.hdr-list-more').hover(
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideDown('fast');
},
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideUp('fast');
}
);
});
/* RESETTING ALL MARINGS, PADDING AND TEXT-DECORATIONS */
body {
margin: 0;
padding: 0;
}
ul, li, p, h1, h2, h3, h4, h5, button {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
}
ul, li {
list-style: none;
}
a, a:active, a:visited {
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background-color: #5a5a5a;
font-style: normal;
}
#header .hdr-nav-opt {
float: left;
margin-left: 10px;
background-color: transparent;
}
#header .hdr-nav-soc {
float: right;
margin-right: 10px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab{
display: inline;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button {
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button:hover {
background-color: #7D7D7D;
}
.hdr-drpdwn-menu {
position: relative;
width: 120px;
margin-left: 40px;
background-color: #5a5a5a;
box-shadow: 2px 2px 10px #888888;
border: 1px solid #888888;
}
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<!-- The Global Header of the website-->
<div id="header">
<!-- The Left part of the header-->
<div class="hdr-nav-opt">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="?page=home"><button class="hdr-button">Home</button></a></li>|
<li class="hdr-list-tab hdr-list-more"><button class="hdr-button">More</button>
<!-- The Dropdown Menu-->
<div class="hdr-drpdwn-menu">
<ul class="hdr-drpdwn-list">
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=about"><button class="hdr-button">About</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=help"><button class="hdr-button">Help</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=credits"><button class="hdr-button">Credits</button></a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- The Right part of the header-->
<div class="hdr-nav-soc">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Facebook</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Twitter</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Instagram</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Tumblr</button></a></li>
</ul>
</div>
</div>
I don't know which font you are using now, but maybe you need a callback in your styles
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;/*like this*/
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
and it will works all the browsers.
My problem is when i resize the window(smaller) One of my divs just go through and on top of my navigation bar... Which is annoying, but i believe there is a easy way to fix it. I can give you the code, but should test it in your editor program - and then resize, youll see what i mean.
HTML CODE HERE:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="WorkFieldStartpage.css"/>
</head>
<body>
<div id="upperblock">
</div>
<div class="topbar"></div>
<div id="pageContainer">
<div id="pageContainer2">
<div>
<div id="leftnavigation">
<ul>
<li> <h4> Navigation </h4> </li>
<li>Test text</li>
<li>Test text</li>
<li>Test text</li>
</ul>
</div>
<div id="mainContainer">
<div id="newsfeed"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
color: #333;
line-height: 1.28;
text-align: left;
direction: ltr;
}
div {
display: block;
}
.topbar {
font-family: sans-serif;
font-size:12px;
font-weight: bold;
background-color: #11BD83;
height: px;
width: 100%;
position:fixed;
left: 0px;
top: 0px;
}
#pageContainer {
margin: 0 auto;
position: relative;
zoom: 1;
min-height: 600px;
}
#pageContainer2 {
margin: 0;
outline: none;
padding: 0;
width: auto;
}
ul {
list-style-type: none;
}
h4 {
text-decoration:underline;
}
#mainContainer {
display: block;
width: 620px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
min-height: 800px;
margin-left: auto ;
margin-right: auto ;
margin-top: 58px;
}
#leftnavigation {
float: left;
height: 300px;
width: 120.5px;
text-align: left;
font-family: sans-serif;
font-size: 15px;
padding-right: 30px;
display:block;
}
#newsfeed {
}
make #leftnavigation AND #mainContainer div float:left
Set to the maincontainer div an overflow:auto; property. This will disable to overlap on floated elements.