Since I do want to use the same panel on every page in a jQuery multipage html file, I'm interested in using the same code for every page.
This should work with external panels. However, I do have a problem with the positioning: As far as I can see, an external panel always opens on the full page height. What I want to have is instead the same behavior as the panel in the jQuery mobile demo page:
always visible on big screens (e.g. desktop browser) and,
when always visible, "inside" the page (e.g. below the header).
All in all: I wan't to create an external panel with the exact behavior of the (internal) panel on the demo page.
My first thought was to include an external html file on every page, so I can at least only edit this single file to save it everywhere. This looks great at first, but doesn't work at all because then the elements would have the same id (e.g. using forms in the panel).
Is there a clean solution for this problem?
The exact CSS and HTML from the JQM Demo Page is (see below). The JQM Demo page shows the panel below the header if the browser window is larger than 60em --- 960px and in my demo i set it 40em
External Panels go at end of data role page(s).
Demo expand the window to reveal the panel
https://jsfiddle.net/jag6ose3/
Html
<div data-role="page">
<div data-role="header">
<h1>External panels</h1>
Opanel
</div>
<div role="main" class="ui-content my-content">
<h1>Content Area</h1>
</div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
<br>
<ul data-role="listview">
<li>The Panel</li>
<li>option A</li>
<li>option B</li>
<li>option C</li>
<li>option D</li>
</ul>
</div>
Css
#media (min-width: 40em) {
#my-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 25%;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.my-content {
width: 67%;
padding-top: 2em;
padding-left: 5%;
padding-right: 3%;
float: right;
}
.opanel {
visibility:hidden;
}
}
Code
$(function () {
$("body>[data-role='panel']").panel(); //initialize the external panel
$(document).on("click", ".opanel", function () {
$("#my-panel").panel("open")
});
});
There is a more complex example. Width of panel is 300px and window is less then 900px, icon .opanel will be displayed.
<script id="panel-init">
function resizeP() {
var cw = $("body").prop("clientWidth");
var padding2x = 32;
if (cw > 900) {
$(".my-content").width(cw - 300 - padding2x);
}
else
$(".my-content").width(cw - padding2x);
}
$(function () {
$("body>[data-role='panel']").panel(); //initialize the external panel
$(document).on("click", ".opanel", function () {
$("#my-panel").panel("open");
});
});
$(document).ready(function () {
resizeP();
});
$(window).resize(function () {
resizeP();
});
</script>
<style>
##media screen and (min-width: 900px) {
#my-panel {
visibility: visible;
position: relative;
left: 0;
clip: initial;
float: left;
width: 300px;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.my-content {
width: 300px;
/*padding-top: 2em;
padding-left: 5%;
padding-right: 3%;*/
float: right;
}
.opanel {
visibility: hidden;
}
}
.ui-content {
padding: 16px;
}
.countBubl {
float: left;
margin-top: -30px;
margin-left: 35px;
background: #ed1d24;
color: #fff;
padding: 2px;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading {
margin: 0;
}
.ui-li-static.ui-collapsible {
padding: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
border-top-width: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn,
.ui-li-static.ui-collapsible > .ui-collapsible-content {
border-bottom-width: 0;
}
</style>
<div data-role="page">
<div data-role="header">
<h1>External panels</h1>
Opanel
</div>
<div role="main" class="ui-content my-content">
<h1>Content Area</h1>
<button>dds</button>
<p>A paragraph with a tooltip. Learn more</p>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">Mail</li>
<li>Inbox</li>
<li>Outbox</li>
<li data-role="list-divider">Contacts</li>
<li>Friends</li>
<li>Work</li>
</ul>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li>Summary <span class="ui-li-count ui-btn-corner-all countBubl">12</span></li>
<li>Favs</li>
<li>Setup</li>
</ul>
</div><!-- /navbar -->
</div>
</div>
<div data-role="panel" id="my-panel" data-position="left" data-display="overlay" data-theme="a">
<div data-role="collapsibleset" data-theme="a" data-inset="false">
<div data-role="collapsible">
<h2>Mailbox</h2>
<ul data-role="listview">
<li>Inbox <span class="ui-li-count">12</span></li>
<li>Outbox <span class="ui-li-count">0</span></li>
<li>Drafts <span class="ui-li-count">4</span></li>
<li>Sent <span class="ui-li-count">328</span></li>
<li>Trash <span class="ui-li-count">62</span></li>
</ul>
</div>
<div data-role="collapsible">
<h2>Calendar</h2>
<ul data-role="listview" data-theme="a" data-divider-theme="b">
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
<li>
<a href="index.html">
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a>
</li>
<li>
<a href="index.html">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a>
</li>
<li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
<li>
<a href="index.html">
<h3>Avery Walker</h3>
<p><strong>Re: Dinner Tonight</strong></p>
<p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
</li>
<li data-role="list-divider">Wednesday, October 6, 2010 <span class="ui-li-count">3</span></li>
<li>
<a href="index.html">
<h3>Amazon.com</h3>
<p><strong>4-for-3 Books for Kids</strong></p>
<p>As someone who has purchased children's books from our 4-for-3 Store, you may be interested in these featured books.</p>
<p class="ui-li-aside"><strong>12:47</strong>PM</p>
</a>
</li>
</ul>
</div>
<div data-role="collapsible">
<h2>Contacts</h2>
<ul data-role="listview" data-autodividers="true" data-theme="a" data-divider-theme="b">
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li>Bob Cabot</li>
<li>Caleb Booth</li>
<li>Christopher Adams</li>
<li>Culver James</li>
</ul>
</div>
</div>
#*<br>
<ul data-role="listview">
<li>The Panel</li>
<li>option A</li>
<li>option B</li>
<li>option C</li>
<li>option D</li>
</ul>*#
</div>
</div>
Related
In the below set of code basd on selecting the .help-menu elements on left .help-descr div navigated to particular section .
Similarly on scrolling the .help-descr div I want to add active class selection to appropriate .help-menu elements
This what I have tried:
Its something similar to the attached link Add Menu Active Class when scrolling to div I am not able to replicate same approach here
help.js
// on load of page
$(function() {
$('.backend-feature li :first').addClass('active');
$('.backend-head').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $('.backend-feature li :first').text() + '</span');
});
//on click of backend feature menu
$(".backend-feature-li").on('click', function() {
$('.frontend-head').removeClass('active');
$('.frontother-head').removeClass('active');
$('.frontend-feature li').find('a').removeClass('active');
$('.front-otherfeature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.backend-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Backend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
// on click of frontend feature menu
$(".frontend-feature-li").on('click', function() {
$('.backend-head').removeClass('active');
$('.frontother-head').removeClass('active');
$('.backend-feature li').find('a').removeClass('active');
$('.front-otherfeature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.frontend-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
//on click of frontend other features menu
$(".front-otherfeature-li").on('click', function() {
$('.backend-head').removeClass('active');
$('.backend-feature li').find('a').removeClass('active');
$('.frontend-feature-li').find('a').removeClass('active');
$(this).siblings().find('a').removeClass('active');
$('.frontend-head').addClass('active');
$('.frontother-head').addClass('active');
$(this).find('a').addClass('active');
$('.selected-item').empty();
$('.selected-item').append('<span>Supported Features</span><i class="ion-android-arrow-dropright"></i><span>Frontend</span><i class="ion-android-arrow-dropright"></i><span>Other Features</span><i class="ion-android-arrow-dropright"></i><span style="font-weight:bold;">' + $(this).text() + '</span');
});
.ion-help-circled {
cursor: pointer;
}
.help-row {
flex-wrap: nowrap;
max-width: 100%;
}
.help-menu {
background-color: #efefef;
overflow: auto;
padding: 15px;
height: 85vh;
}
.help-descr {
position: relative;
background-color: white;
padding: 25px 25px;
overflow: auto;
height: calc(100vh - 107px);
border: 1px solid #efefef;
}
.help-menu ul .front-otherfeature-li {
margin-left: 18px;
}
.help-menu ul li {
list-style-type: none;
margin: 8px;
}
.help-menu ul .backend-head,
.help-menu ul .frontend-head {
margin-left: 0px;
}
.backend-feature li a,
.frontend-feature li a,
.frontend-otherfeature li a {
padding: 0;
text-decoration: none;
color: black;
}
.help-menu li .active {
font-weight: bold;
}
.help-menu a:hover {
font-weight: bold;
}
.main-section {
background-color: white;
}
section {
display: flex;
flex-direction: column;
padding-bottom: 15px;
}
article {
display: flex;
flex-direction: column;
padding-left: 30px;
}
.main-section ul>li {
margin-top: 6px;
}
.main-section p {
margin-bottom: 0px;
}
.backend-feature-arrow,
.frontend-feature-arrow,
.other-feature-arrow {
margin-right: 6px;
cursor: pointer;
}
.selected-item span {
padding: 6px;
}
.descr-seclevel {
list-style-type: square;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline'">
<link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/style.css">
<link src="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" src_type="url" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="./vendors/css/ionicons.min.css">
<script defer src="./js/help_page.js"></script>
<title>Revive</title>
</head>
<body>
<div id="header">
<div class="dashboard-header">
<div class="dashboard-left-header">
<ul style="margin-bottom: 0px;">
<li>
<a style="cursor: default;" class="logo" href=""><img src="./assets/img/img1.png"></img>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row help-row">
<div class="col-sm-3 help-menu">
<ul>
<li style="font-weight: bold;">Supported Features</li>
<li>
<ul>
<li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size:18px ;display:inline-block"></i>Backend</li>
<li>
<ul class="backend-feature">
<li class="backend-feature-li">Datasources</li>
<li class="backend-feature-li">Joins</li>
</ul>
</li>
<li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Frontend</li>
<li>
<ul class="frontend-feature">
<li class="frontend-feature-li">Properties</li>
<li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Other Features</li>
<li>
<ul class="frontend-otherfeature">
<li class="front-otherfeature-li">Actions</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="col-sm-9 help-descr">
<div class='selected-item'></div>
<section class="main-section" id="datasource">
<header>
<h1>Datasources</h1>
</header>
<article>
<p>The supported Datasources:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Excel</li>
<li>Csv</li>
<li>Oracle Database</li>
<li>MSSQL server</li>
<li>PostgreSQL</li>
<li>MySQL</li>
</ul>
</article>
</section>
<section class="main-section" id="joins">
<header>
<h1>Joins</h1>
</header>
<article>
<p>The supported Joins:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Inner Join</li>
<li>Left Join</li>
<li>Right Join</li>
<li>Full Outer Join</li>
</ul>
</article>
</section>
<section class="main-section" id="properties">
<header>
<h1>Properties</h1>
</header>
<article>
<p>The supported Properties:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Titles on charts</li>
<li>X-axis and Y-axis Titles will be renamed</li>
<li>Text Properties like font style ,size and color</li>
<li>Background color</li>
<li>Grid lines</li>
<li>Borders for charts</li>
<li>Alias name for values</li>
<li>Legends will be enabled only if present</li>
<li>Color of Chart:</li>
<ul class="descr-seclevel" style="margin-left: 20px;">
<li>If color is applied it will be added else default color is applied</li>
<li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li>
</ul>
</ul>
</article>
</section>
<section class="main-section" id="actions">
<header>
<h1>Actions</h1>
</header>
<article>
<p>Actions supported:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Only on-select is supported</li>
<li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li>
</ul>
</article>
</section>
</div>
</div>
</body>
</html>
If you put an IntersectionObserver on each of the main sections the system will tell you when it comes into view or goes out of view.
Then you can add or remove the active class from the related link in the menu.
This snippet gives a demo but it had to shorten the overall length of the menu area just so we got to see the content below and it also fixed it otherwise it scrolled up and the effect of adding the active class couldn't be seen as the menu item was off the screen.
To make it obvious which section(s) are in view a lime background has been put on the link.
Note, there is some thought needed on what 'active' actually means since more than one section can be in the viewport at once. This snippet does not attempt to tackle that - it's ouside the scope of this question.
The snippet needs to be viewed full page.
const callback = (entries, observer) => {
entries.forEach(entry => {
const id = entry.target.id;
const el = document.body.querySelector('[href="#' + id + '"]');
if (entry.isIntersecting) {
el.classList.add('active');
} else {
el.classList.remove('active');
}
});
};
const sections = document.querySelectorAll('.main-section');
const options = {
threshold: 0.33
};
const observer = new IntersectionObserver(callback, options);
sections.forEach(section => {
observer.observe(section);
});
.ion-help-circled {
cursor: pointer;
}
.help-row {
flex-wrap: nowrap;
max-width: 100%;
}
.help-menu {
background-color: #efefef;
overflow: auto;
padding: 15px;
height: 85vh;
height: 30vh;
/* changed for demo so we can see stuff */
}
.help-descr {
position: relative;
background-color: white;
padding: 25px 25px;
overflow: auto;
height: calc(100vh - 107px);
border: 1px solid #efefef;
}
.help-menu ul .front-otherfeature-li {
margin-left: 18px;
}
.help-menu ul li {
list-style-type: none;
margin: 8px;
}
.help-menu ul .backend-head,
.help-menu ul .frontend-head {
margin-left: 0px;
}
.backend-feature li a,
.frontend-feature li a,
.frontend-otherfeature li a {
padding: 0;
text-decoration: none;
color: black;
}
.help-menu li .active {
font-weight: bold;
background-color: lime;
/* ADDED JUST FOR DEMO */
}
.help-menu a:hover {
font-weight: bold;
}
.main-section {
background-color: white;
}
section {
display: flex;
flex-direction: column;
padding-bottom: 15px;
}
article {
display: flex;
flex-direction: column;
padding-left: 30px;
}
.main-section ul>li {
margin-top: 6px;
}
.main-section p {
margin-bottom: 0px;
}
.backend-feature-arrow,
.frontend-feature-arrow,
.other-feature-arrow {
margin-right: 6px;
cursor: pointer;
}
.selected-item span {
padding: 6px;
}
.descr-seclevel {
list-style-type: square;
}
<div style="position: fixed; z-index: 1;">
<!-- added just for demo -->
<div id="header">
<div class="dashboard-header">
<div class="dashboard-left-header">
<ul style="margin-bottom: 0px;">
<li>
<a style="cursor: default;" class="logo" href=""><img src="./assets/img/img1.png"></img>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row help-row">
<div class="col-sm-3 help-menu">
<ul>
<li style="font-weight: bold;">Supported Features</li>
<li>
<ul>
<li class='backend-head'><i class="backend-feature-arrow ion-ios-arrow-down" style="font-size:18px ;display:inline-block"></i>Backend</li>
<li>
<ul class="backend-feature">
<li class="backend-feature-li">Datasources</li>
<li class="backend-feature-li">Joins</li>
</ul>
</li>
<li class='frontend-head'><i class="frontend-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Frontend</li>
<li>
<ul class="frontend-feature">
<li class="frontend-feature-li">Properties</li>
<li class="frontother-head"><i class="other-feature-arrow ion-ios-arrow-right" style="font-size:18px ;display:inline-block"></i>Other Features</li>
<li>
<ul class="frontend-otherfeature">
<li class="front-otherfeature-li">Actions</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!--ADDED -->
<div class="col-sm-9 help-descr">
<div class='selected-item'></div>
<section class="main-section" id="datasource">
<header>
<h1>Datasources</h1>
</header>
<article>
<p>The supported Datasources:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Excel</li>
<li>Csv</li>
<li>Oracle Database</li>
<li>MSSQL server</li>
<li>PostgreSQL</li>
<li>MySQL</li>
</ul>
</article>
</section>
<section class="main-section" id="joins">
<header>
<h1>Joins</h1>
</header>
<article>
<p>The supported Joins:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Inner Join</li>
<li>Left Join</li>
<li>Right Join</li>
<li>Full Outer Join</li>
</ul>
</article>
</section>
<section class="main-section" id="properties">
<header>
<h1>Properties</h1>
</header>
<article>
<p>The supported Properties:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Titles on charts</li>
<li>X-axis and Y-axis Titles will be renamed</li>
<li>Text Properties like font style ,size and color</li>
<li>Background color</li>
<li>Grid lines</li>
<li>Borders for charts</li>
<li>Alias name for values</li>
<li>Legends will be enabled only if present</li>
<li>Color of Chart:</li>
<ul class="descr-seclevel" style="margin-left: 20px;">
<li>If color is applied it will be added else default color is applied</li>
<li>If a chart contains multiple color representing its data and if palate is assigned it will be applied </li>
</ul>
</ul>
</article>
</section>
<section class="main-section" id="actions">
<header>
<h1>Actions</h1>
</header>
<article>
<p>Actions supported:</p>
<ul class="descr-firstlevel" style="margin-left: 20px;">
<li>Only on-select is supported</li>
<li>With Actions from one dashboard to different dashboard interacts with all charts in target dashboard</li>
</ul>
</article>
</section>
</div>
</div>
so I have a div with navigational links (set up using ul/li and a href within the li's).
Below that I have 4 other div's. I only want 1 div shown at a time, they will then switch based on the users selection of the navigational LI's
I've used a similar setup on a different page, and have tried to port it over to my current page but to no avail...
JSFIDDLE
Please see the above jsfiddle for the HTML/CSS/JS involved.
HTML:
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
Any help is welcomed, I am still learning (aren't we always), so with any fixes/tips, please detail why it works, or what i did wrong that's making this not work. (if that makes sense!)
Thanks again for your help!
This is one way of achieving it.
HTML - added "navlink" class to your anchor elements, and gave them a data-section attribute that refers to the tab they should show:
<div id="content">
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li><span>Home</span></li>
<li><span>Find Your Vehicle</span></li>
<li><span>Downloads</span></li>
<li><a data-section="support" href="#support" rel="support"><span>Support</span></a></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
JavaScript - see inline comments:
$(document).ready(function(){
// start of at the home page
navigateTo("#home");
// for every navlink element
$('.tabs > li > a').each(function() {
//when it is clicked
$(this).click(function(e) {
e.preventDefault();
// navigate to the section ilinked to in the href
navigateTo($(this).attr('href'));
});
});
});
function navigateTo(sectionId) {
//hide all tabs
$('.tab_content').hide();
//then show the one we want
$(sectionId).show();
}
You don't need separate click handlers for each menu item. The #tabs li click handler will suffice. I removed the click handlers on each of the links since they are not necessary.
$("#tabs li").click(function() {
// First remove class "active" from currently active tab
$("#tabs li").removeClass('active selected');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active selected");
// Hide all tab content
$(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn(0);
// At the end, we add return false so that the click on the link is not executed
return false;
});
ul {
list-style: none;
}
.man-banner {
background: url("../images/man-logo.png") no-repeat top;
border-radius: 8px 8px 0 0;
height: 93px;
max-width: 915px;
margin: 15px 15px 0 15px;
}
.banner-nav {
background: #F0F1F2;
border-bottom: 1px solid #D6D8DB;
height: 40px;
max-width: 915px;
margin: 0 15px 15px;
}
.banner-nav a {
font-family: MAN-light, Arial, sans-serif;
font-size: 16px;
margin-left: 20px;
text-decoration: none;
display: block;
float: left;
height: 40px;
position: relative;
color: #303C49;
line-height: 40px;
}
.banner-nav a:hover {
color: #303C49;
}
.banner-nav a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 5;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.banner-nav a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
ul.tabs li.selected a,
ul.tabs li.selected a:hover {
top: 0px;
font-weight: normal;
background: #FFF;
border-bottom: 1px solid #FFF;
color: #000;
}
/***************************/
/** Main Content Area **/
/***************************/
#content {
width: 950px;
margin: 5 10;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active"><a data-tab-id="#home"><span>Home</span></a>
</li>
<li><span>Find Your Vehicle</span>
</li>
<li><span>Downloads</span>
</li>
<li><span>Support</span>
</li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content">
1234156124
</div>
<div id="findvehicle" class="tab_content">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
You can try to use css to show and hide the blocks when there is an onclick event.
Here some sample code:
CSS
.activetab {
display: block;
}
.tab {
display: none;
}
JAVASCRIPT / JQUERY
$(document).ready(function() {
$(".tabmenu").on("click", function() {
$(".activetab").removeClass("activetab");
$(this).addClass("activetab");
});
});
HTML
<div id="content">
<div class="man-banner"></div>
<div class="banner-nav" id="tabs">
<ul class="tabs" style="padding-left: 0px">
<li class="active tabmenu"><span>Home</span></li>
<li class="tabmenu"><span>Find Your Vehicle</span></li>
<li class="tabmenu"><span>Downloads</span></li>
<li class="tabmenu"><span>Support</span></li>
</ul>
</div>
<div id="tab-content">
<div id="home" class="tab_content tab">
1234156124
</div>
<div id="findvehicle" class="tab_content tab">
abasdjfniasjfnasdf
</div>
<div id="downloads" class="tab_content tab">
asdfniadhnfiasdn890384834854854jnrjrjr
</div>
<div id="support" class="tab_content tab">
asdfniadhTHIS IS SUPPORT
</div>
</div>
</div>
If you want I can create a JSFiddle to see how it works
Hope this works for you!
You have a syntax error, you are closing your document ready callback more than once.
$("#findvehicle").click(function(){
$('a[rel="find_your_vehicle"]').trigger("click");
});
}); // Remove this
$("#downloads").click(function(){
$('a[rel="downloads"]').trigger("click");
});
}); // Remove this
When you remove these extra closes the tabs appear. You'll probably want to hide all but the default tab in that document ready call also.
Here is a JSfiddle with the code to my problem:
https://jsfiddle.net/367v2n1q/14/
On the right you will see a red bar which has a fixed position. I'm trying to get the body to have a min width of 808 pixels, but it is letting me re-size the body to smaller than 808.
The center div stops shrinking when it hits 808 pixels wide, but then the fixed div on the right keeps on going and envelops the rest of the content.
CSS
body.total{
background-color: black;
position: relative;
min-width: 808px;
}
.rightSidePane {
position: absolute;
background-color: red;
clear: both;
top: 0;
right: 0;
}
HTML snippet
<!DOCTYPE html>
<html>
<head>
<!-- head stuff here -->
</head>
<body class="total">
<div id="wrapper" class="leftSidePane">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<div class="content">
<div class="mainContent">
<h1>
WWW.SITE.COM
</h1>
<h2>dedicated to stuff</h2>
<p style="text-align: center;
color: #5D5D5D;">last updated: 01.01.2016</p>
<br>
<p style="
font-family: 'Times New Roman';
color: #C1C1C1;
font-weight: bold;
font-size: 20px;
text-align: center;
">Site visited 27 times</p>
<br><br>
<hr>
</div>
</div>
<div class="rightSidePane">
<!-- Side bar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand-right">
</li>
<li>
<a href="#">
</a>
</li>
<li>
<div class="barfix"></div>
</li>
<li class="board">
</li>
<li class="nextBar">
</li>
<li>
<div class="tileRightInit" id="bs">
<div class="barTextRight">MAIN</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">News</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">Links</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">Credits</div>
</div>
</li>
<li>
<div class="tileRight" id="bs">
<div class="barTextRight">About</div>
</div>
</li>
<li class="bottomRight">
</li>
</ul>
</div>
</div>
</body>
</html>
I figured out the problem. I needed to be using absolute positioning for the div on the right. Here is the fixed JS fiddle: https://jsfiddle.net/367v2n1q/15/
Here is the fixed CSS:
body.total{
background-color: black;
position: relative;
min-width: 840px;
}
.rightSidePane {
position: absolute;
background-color: red;
clear: both;
top: 0;
right: 0;
}
The HTML remained the same. Thanks #Roope for pointing out that the body never fell below 808px width, I don't know why I didn't catch that but you pointed me in the right direction.
I know I keep putting out these troubleshooting things, but I seriously have researched this on api documentation and looked for other answers on Stackoverflow and nothing is coming up. I have a accordion div that takes the right css, but is not working as an accordion. This is html code:
<div id="accordion" class="ui-accordion">
<ul>
<h3 class="ui-accordion-header">Page One</h3>
<div>
<li class="ui-accordion-content">Subpage 1A
</li>
<li class="ui-accordion-content">Subpage 1B
</li>
<li class="ui-accordion-content">Subpage 1C
</li>
</div>
<h3 class="ui-accordion-header">Page Two</h3>
<div>
<li class="ui-accordion-content">Subpage 2A
</li>
<li class="ui-accordion-content">Subpage 2B
</li>
<li class="ui-accordion-content">Subpage 2C
</li>
</div>
<h3 class="ui-accordion-header">Page Three</h3>
<div>
<li class="ui-accordion-content">Subpage 3A
</li>
<li class="ui-accordion-content">Subpage 3B
</li>
<li class="ui-accordion-content">Subpage 3C
</li>
</div>
</ul>
</div>
And my javascript code
$(document).ready(function () {
$('#accordion').accordion();
});
And Finally here is my css for the elements shown:
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin-top: 2px;
padding: .5em .5em .5em .7em;
min-height: 0; /* support: IE7 */
}
.ui-accordion .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-noicons {
padding-left: .7em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
}
Here is the jsFiddle example:
Please review and help me know how to get this collapsing and expanding.
your html markup is wrong check out http://jqueryui.com/accordion/ (view source)
<div id="accordion">
<h3>Section 1</h3>
<div>Section 1 body</div>
<h3>Section 2</h3>
<div>Section 2 body</div>
</div>
you have an extra ul tag inside the main container
updated your fiddle
I had only one combination. I needed to put the a combination in each content div like so:
<div class="ui-accordion-content">
<ul>
<li><a><!--Content goes here--></a></li>
</ul>
</div>
I have corrected it and you can see the updated fiddle here.
I have this div and I have set its z-index : 99999, its working fine on firefox and safari, but when I ma testing it on chrome , the footer is not the top element,
What else should I do to make it topmost element
<div id="footer" style="z-index: 99999 !important; width: 100%; height: 65px; position: fixed; bottom: 0px; ">
<div class="container">
<div class="footer-nav">
<ul>
<li>Team</li>
</ul>
<ul>
<li>Jobs</li>
</ul>
<ul>
<li><Twitter></li>
</ul>
</div>
<hr>
</div>
</div>
http://jsfiddle.net/A5jcT/2/
<div id="footer">
<div class="container">
<div class="footer-nav">
<ul>
<li>Team</li>
</ul>
<ul>
<li>Jobs</li>
</ul>
<ul>
<li><Twitter></li>
</ul>
</div>
<hr>
</div>
</div>
#footer
{
border:1px solid blue; z-index: 9999;width: 100%;
height: 65px;position: ; bottom: 0px;
}
.container
{
border:1px solid red;position:relative;z-index: -10
}
.footer-nav
{
border:1px solid green;position:relative;z-index: -20
}
it looks like you have to make other elements also positioned. Now you have the footer on top.