I have 2 tabs that lay on a block with a background image. Depending on which tab is clicked, the background image of the tabs and the tab content panel should change height. I cannot do it through CSS so I thought of using JS to change heights, but it is not working.
Here is my code:
$('#two-tab').click(function() {
$('.search-tabs').height('350px');
$('#two-panel').height('272px')
});
.search-tabs {
background-image: url('https://i.pinimg.com/originals/af/8d/63/af8d63a477078732b79ff9d9fc60873f.jpg')!important;
background-position: center top!important;
height: 281px!important;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.tab-radio{
display:none;
}
#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel{
display:block
}
#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab{
background:#F5A000;
color:#000;
}
.tab-wrapper {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
}
.tab {
cursor: pointer;
width: 160px;
padding: 5px 0px;
margin: 0px 10px;
background: #FFF;
display: inline-block;
text-align: center;
color: #000;
border-radius: 6px 6px 0px 0px;
font-size: 13px;
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.panels {
height: 229px;
width: 333px;
position: relative;
border-radius: 0px 0px 8px 8px;
border-top: 3px solid #F5A000;
background-color: rgba(255, 255, 255, 0.5);
}
.panel {
display: none;
animation: fadein .8s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-tabs">
<div class="tab-wrapper">
<input class="tab-radio" id="one" name="group" type="radio" checked>
<input class="tab-radio" id="two" name="group" type="radio">
<div class="tabs">
<label class="tab" id="one-tab" for="one">Tab 1</label>
<label class="tab" id="two-tab" for="two">Tab 2</label>
</div>
<div class="panels">
<div class="panel" id="one-panel">
Content for tab 1
</div>
<div class="panel" id="two-panel">
Content for tab 2
</div>
</div>
</div>
</div>
But this is not working. Any ideas?
You defined the height for .search-tabs with !important which overwrites the height that you set in the click handler.
!! I added my own picture so you please swap it with a picture of your desire.
!! This is the only JavaScript code that you will need for this to work, The lines that you wrote, I deleted them
!! Add this code in the JavaScript file and delete the previous code that you wrote.
This piece of code will do the follows
If you click tab 2 it will change the height of the desired elements
If you click tab 1 it will bring all the elements back to their original form.
ps: when you copy this code in your editor, right-click on the display and click on format document or just click (shift + alt + f)
const searchContainer = document.querySelector(".search-tabs");
const panel = document.querySelector("#two-panel");
const tabOne = document.querySelector("#two-tab");
const tabTwo = document.querySelector("#one-tab");
let changingFunc = function(one, two) {
searchContainer.style.height = `${one}`;
panel.style.height = `${two}`;
};
const panelHeight = panel.offsetHeight;
tabOne.addEventListener("click", function() {
changingFunc("350px", "272px");
});
tabTwo.addEventListener("click", function() {
changingFunc("281px", `${panelHeight}px`);
});
Related
I've an idea. For this I need a list like this draw:
So the main idea is to have a plus and a minus button. When a users presses the plus button, another input get's added. When pressing the minus button beside each input, the related input should be removed.
So I've startet with this here but I'm not very with it and the functionality is not given yet. How can I deal with this a smart way? Is there a problem with the id's? I mean I could copy a row or insert it (with JS) but how can I get the values later of all inputs in one map (with JS) for example? A lot of questions..
.out-task {
display: flex;
margin-bottom: 8px;
}
.delete-task-button {
margin-left: 6px;
background: red;
}
.button {
width: 30px;
height: 30px;
display: block;
border-radius: 50%;
color: white;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.add-task-button {
background: green;
}
<div class="wrapper">
<label>Tasks</label>
<div id="tasks-wrapper">
<div class="out-task">
<input type="text" id="task" name="task" value="">
<span class="delete-task-button button">-</span>
</div>
</div>
<span class="add-task-button button">+</span>
</div>
Thanks for helping me out!!!
As I have criticized everyone, I let you do the same on my code:
const ListTasks = document.querySelector('#wrapper > div')
, PosInsertTask = document.querySelector('#wrapper > div > span.add-task-button')
, taskWrapper = document.querySelector('#template > div')
;
ListTasks.onclick=e=>
{
if (e.target.classList.contains('add-task-button'))
{
let newTask = taskWrapper.cloneNode(true)
ListTasks.insertBefore(newTask, PosInsertTask)
}
else if (e.target.classList.contains('delete-task-button'))
{
ListTasks.removeChild(e.target.closest('.out-task'))
}
}
.out-task {
display : flex;
margin-bottom: 8px;
}
.delete-task-button {
margin-left: 6px;
background : red;
}
.button {
width : 30px;
height : 30px;
display : block;
border-radius : 50%;
color : white;
display : flex;
justify-content: center;
align-items : center;
cursor : pointer;
font-weight : bold;
}
#wrapper { display: inline-block; border: 1px solid grey; padding:.8em;}
#wrapper h4 { text-align: center; }
.add-task-button {
background: green;
margin: auto;
}
#template { display: none;}
<div id="wrapper">
<h4>Tasks</h4>
<div>
<div class="out-task">
<input type="text" value="">
<span class="delete-task-button button">-</span>
</div>
<span class="add-task-button button">+</span>
</div>
</div>
<div id="template">
<div class="out-task">
<input type="text" value="">
<span class="delete-task-button button">-</span>
</div>
</div>
Thanks to some awesome people on stack overflow i was able to get my classes toggled and got my form slide up and down correctly. I'm having issues validating the form before it becomes submitted. Could someone help me with a step in the right direction? I just want the validation to check that the fields have some text in them before allowing the submit.
Assignment 6
<!-- video https://youtu.be/XEoWYcolaEM -->
<style>
body {
background-color: #fff;
font-family: arial, sans-serif;
font-size: 100%;
}
a {
color: blue;
}
#welcome p strong {
color: navy;
font-size: 1.2em;
}
#welcome p:first-of-type {
margin-bottom: 50px;
}
section {
margin-bottom: 50px;
}
/* main container */
#main {
width: 960px;
margin: 50px auto;
border: 2px solid #000;
padding: 20px;
background-color: #e0e0ff;
position: relative;
box-sizing: border-box;
}
/* form container */
#loginDiv {
width: 300px;
position: absolute;
left: 650px;
top: 6px;
z-index: 100;
border: 1px solid navy;
}
/* paragraph that shows the text "Login" which is clicked on to display/remove the form */
#login {
margin: 0;
cursor: pointer;
background-color: rgb(255,255,255);
padding: 5px 0 2px 30px;
}
#login:hover {
background-color: rgb(110,138,195);
}
/* plus sign icon for login form */
.plus {
background: url(img_open.png) no-repeat 8px 7px;
background-color: rgb(110,138,195);
}
/* minus sign icon for login form */
.minus {
background: url(img_close.png) no-repeat 8px 7px;
}
/*form is hidden when the page loads */
#loginDiv form {
padding: 10px 10px 10px 10px;
display: none;
background-color: rgb(255,255,255);
}
#loginDiv label {
display: block;
width: 100px;
margin: 0 15px 0 0;
}
#loginDiv input {
font-size: 1.2em;
border: 1px solid navy;
}
#loginDiv input:focus {
background-color: rgb(110,138,195);
border: 2px solid navy;
}
#loginDiv input[type=button] {
width: 100px;
}
footer {
text-align: center;
margin-top: 50px;
margin-bottom: 10px;
padding: 20px;
border-top: 1px solid #000;
}
/* ad is not shown when the page loads */
#ad {
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: yellow;
position: absolute;
left: 330px;
top: -500px; /* you can change this inbitially for viewing purposes only but be sure to set it back */
box-sizing: border-box;
background-image: url(ad.jpg);
background-repeat: no-repeat;
}
/* close button on ad */
#adbtn {
width: 50px;
height: 50px;
border: 2px solid #000;
border-top-width: 1px;
border-right-width: 1px;
background-color: #fff;
font-size: 3em;
text-align: center;
cursor: pointer;
box-sizing: border-box;
position: absolute;
top: 0px;
right: 0px;
}
</style>
<script src="jquery-1.12.3.min.js" type="text/javascript"></script>
<script>
//Fading in Advertisent
$(document).ready(function(){
$("#ad").animate({
top: '100px',
},(5000));
//Closing The Advertisement
$("#adbtn").click(function(){
$("#ad").fadeOut(5000);
});
$(".plus").click(function(){
$("form").slideToggle(1000); // half second duration
$(this).toggleClass("plus").toggleClass("minus");
$('button').click(function(){
$("form").val(1);
});
}); // end function
}); // end function
</script>
</head>
<body>
<!-- main container -->
<div id="main">
<section id="loginDiv">
<!-- when this is clicked on the below form should be displayed and plus sign should change to minus sign-->
<p id="login" class="plus">Login</p>
<form>
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="pw">Password:</label>
<input type="password" name="pw" id="pw">
</p>
<p>
<input type="button" value="Submit">
</p>
<!-- placeholder for response if form data is correct/incorrect -->
<p id="error"> </p>
</form>
</section>
<section id="welcome">
<h1>Welcome to the Local jQuery User Group Website</h1>
<p> <strong>Click the login button at the top of the page to login. To become a member please Register</strong> </p>
<h2>About this page layout:</h2>
<p> The main container (parent) has 'relative' positioning so that the 'login' container can be absolutley positioned with respect to
that main container. Otherwise, it would default to being absolutley positioned with respect to the window. </p>
<p> In order for the login panel to be placed on top of the page we need to use absolute positioning, otherwise,
it would move the rest of the content down as done in the FAQ assignment. Technically, absolute positioning takes that element out of
the normal flow of the document, so that it is on top of the page. The 'ad' is also absolutely positioned to the same main container. </p>
</section>
<section>
<h2>This week's agenda:</h2>
<p>There will be a live meeting this Tuesday evening from 7:00pm to 8:00pm PST using our WebEx Conferencing Software.
It will be recorded! Please note that the code samples will be available on our GitHub repository. </p>
</section>
<footer> Copyright © Local jQuery User Group </footer>
<!-- ad which is absolutely positioned -500px from the top so you do not see it when page loads-->
<div id="ad">
<div id="adbtn"> X </div>
</div>
<!-- end main container -->
</div>
</body>
</html>
Take a look into jQuery Validate.
This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options.
I hope you can learn from this. I'll just give you an example with one of your fields and a submit button. Initially the submit button is disabled, then you can use the keypress event to check if 1 or more characters are entered and enable the submit button.
Fiddle: https://jsfiddle.net/stevenng/8w89v3tp/1/
HTML:
<label for="username">Username:</label>
<input type="text" name="username" id="username">
<button class="js-submit">submit</button>
JS:
var $submit = $('.js-submit');
var $username = $('#username');
$submit.attr('disabled', true);
$username.keypress(function() {
if ( $username.val().length > 0 ) {
$submit.attr('disabled', false);
}
});
$submit.on('click', function(){
// do something
});
I have a div which currently has a static background image, and I need to create a slideshow of background images and text for this div. I would like to fade the background images and the caption text in and out. Does anyone know of a good way to do this using jQuery? My knowledge of JavaScript and jQuery is very limited. I tried to use some ready-made plugins as the Backstretch, Responsiveslides but I could not understand them enough and edit them for my use.
Here is my current code: http://jsfiddle.net/1zdyh3wo/
HTML
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 1</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
<div class="nav-wrapper">
<div class="nav-arrows prev"></div>
<div class="nav-dots">
<div class="current"></div>
<div class=""></div>
<div class=""></div>
</div>
<div class="nav-arrows next"></div>
</div>
</div>
CSS:
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
/* -- COMMON -- */
body {
font: 400 14px 'Montserrat', Helvetica, sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
color: white;
}
.separator {
width: 24px;
height: 4px;
}
.separator.white {
background-color: white;
}
.separator.black {
background-color: black;
}
/* -- MENU -- */
/* -- CANVAS -- */
.content {
position: absolute;
z-index: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
right: 0;
bottom: 100px;
left: 0;
width: 33.333333333%;
margin: 0 auto;
}
.sectionTitle {
font: 700 32px/24px 'Montserrat', Helvetica, sans-serif;
line-height: 24px;
margin-bottom: 24px;
letter-spacing: 4px;
}
.sectionDescription {
font: 400 14px/18px 'Montserrat', Helvetica, sans-serif;
margin-top: 24px;
}
/* -- SLIDER -- */
.bg-slider {
background: url(../img/slides/image1.jpg) no-repeat center center fixed;
background-color: red; /* demo purpose only */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* -- SLIDER - NAVEGATION -- */
.nav-wrapper {
display: inline-block;
min-width: 250px;
margin-top: 24px;
padding: 4px;
}
/* -- SLIDER - NAVEGATION ARROWS -- */
.nav-arrows {
float: left;
width: 20px;
height: 20px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
border: 4px solid white;
}
.nav-arrows.prev {
border-top: none;
border-right: none;
}
.nav-arrows.next {
border-bottom: none;
border-left: none;
}
/* -- SLIDER - NAVEGATION DOTS -- */
.nav-dots {
margin: 0px 8px;
float: left;
}
.nav-dots div{
float: left;
width: 12px;
height: 12px;
margin: 4px 18px;
cursor: pointer;
border-radius: 50%;
background: rgba(255,255,255,.5);
}
.nav-dots .current:after {
float: left;
width: 12px;
height: 12px;
content: '';
border-radius: 50%;
background: white;
}
Here a visual aid, how I would like the result to be:
Desktop version:
Mobile version:
To keep things really simple:
Make a "wrapper" div for the entire slider
Make an individual "wrapper" div for each individual slide
Put the slider navigation outside of of the individual slides (I put it outside of the slider altogether, but that's your choice based on your desired positioning).
Make a function that will do all the transitions
Here's an example HTML structure, based on yours
<div id="slider">
<div class="content bg-slider active">
<div class="wrapper">
<h1 class="sectionTitle">Image title 1</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the first image. Wanna know more? Click here.</h2>
</div>
</div>
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 2</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the second image. Wanna know more? Click here.</h2>
</div>
</div>
<div class="content bg-slider">
<div class="wrapper">
<h1 class="sectionTitle">Image title 3</h1>
<div class="separator white"></div>
<h2 class="sectionDescription">This is the description of the third image. Wanna know more? Click here.</h2>
</div>
</div>
</div>
Here's the functional JavaScript, with comments.
$(document).ready(function(){
// Hide all slides, re-show first:
$(".bg-slider").hide()
$(".bg-slider:first-child").show();
// Prev button click
$(".nav-arrows.prev").click(function(){
slidePrev();
})
// Next button click
$(".nav-arrows.next").click(function(){
slideNext();
})
// "Dots" click
$(".nav-dots div").click(function(){
slideTo($(this).index());
})
});
// "Previous" function must conclude if we are at the FIRST slide
function slidePrev() {
if ($("#slider .active").index() == 0) {
slideTo($("#slider .bg-slider").length - 1);
}
else {
slideTo($("#slider .active").index() - 1);
}
}
// "Next" function must conclude if we are at the LAST slide
function slideNext() {
if ($("#slider .active").index() == $("#slider .bg-slider").length - 1) {
slideTo(0);
}
else {
slideTo($("#slider .active").index() + 1);
}
}
// Slide To will be called for every slide change. This makes it easy to change the animation, or do what you want during the transition.
function slideTo(slide) {
$("#slider .active").fadeOut().removeClass("active");
$("#slider .bg-slider").eq(slide).fadeIn().addClass("active");
$(".nav-dots .current").removeClass("current");
$(".nav-dots div").eq(slide).addClass("current");
}
Finally, here's the updated Fiddle to demonstrate: http://jsfiddle.net/1zdyh3wo/1/
I am using a layout on the blog website Tumblr. I'd like to remove the "Childhood Influences" category from the Show All feature. I've only managed to remove it from the front page, but I would like the Childhood Influences to only show up when you click on its tab. Here's the code:
<!--
CURRENTLY WATCHING #2
pistachi-o (nutty-themes # tumblr)
Theme Documentation:
http://nutty-themes.tumblr.com/themedoc
Please Do Not:
http://nutty-themes.tumblr.com/terms
-->
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<meta name="description" content="" />
<meta http-equiv="x-dns-prefetch-control" content="off"/>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<style type="text/css">
/* Reset ----------------------------- */
body,div,dl,dt,dd,ol,ul,li,pre,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}
/* Scrollbar ----------------------------- */
::-webkit-scrollbar {width: 6px;}
::-webkit-scrollbar-track {background: #FFF;}
::-webkit-scrollbar-thumb {background: #DDD;}
/* General ----------------------------- */
body {
background: #f3f3f3;
font-size: 10px;
color: #000000;
font-family: 'Roboto Condensed', Arial, sans-serif;
line-height: 100%;
}
a:link, a:active, a:visited {
color: #130912;
text-decoration: none;
}
a:hover {
color: #f38335;
text-decoration: none;
}
b {
color: #f7941d;
text-decoration: none;
}
/* Isotope (DO NOT EDIT) ----------------------------- */
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
-webkit-hiatus-duration: 0.8s;
-moz-hiatus-duration: 0.8s;
hiatus-duration: 0.8s;
}
.isotope {
-webkit-hiatus-property: height, width;
-moz-hiatus-property: height, width;
hiatus-property: height, width;
}
.isotope .isotope-item {
-webkit-hiatus-property: -webkit-transform, opacity;
-moz-hiatus-property: -moz-transform, opacity;
hiatus-property: transform, opacity;
}
/* Navigation ----------------------------- */
#shows {
position: relative;
width: 100%;
height: 10px;
margin: 0px auto 10px;
background: blue;
padding: 15px 0px;
background: #fafafa;
text-align: center;
}
/* Contents ----------------------------- */
#container {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#containers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainer {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
#nextcontainers {
width: 840px;
position: relative;
text-align: center;
margin: 50px auto;
}
.stylewrap {
background: #edd456;
width: 200px;
height: 165px;
margin: 5px;
text-align: center;
text-transform: uppercase;
}
.hiatus {
background: #a0c1ba;
}
.complete {
background: #45c0ab;
}
.childhood {
background: #e3e3e3;
}
.next {
background: #c6c6c6;
}
.stylewrap img {
margin: 0;
width: 200px;
border-bottom: 2px solid #F3F3F3;
}
h2 {
margin: 10px 0px 3px;
line-height: 100%;
}
#filters {
text-transform: uppercase;
}
#filters li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
#dash {
text-transform: uppercase;
margin: 25px;
}
#dash li {
display: inline;
margin: 2px;
padding: 2px 5px;
}
.stylewrap:hover .grey {
filter: none;
-webkit-filter: grayscale(0%);
}
</style>
</head>
<body>
<div id="shows">
<ul id="filters" class="show-set clearfix" data-option-key="filter">
<li style="background: #f5f5f5;">Show All</li>
<li style="background: #f5f5f5;">Currently Watching</li>
<li style="background: #f5f5f5;">On Hiatus</li>
<li style="background: #f5f5f5;">Completed</li>
<li style="background: #f5f5f5;">Next Up</li>
<li style="background: #f5f5f5;">Childhood Influences</a></li>
</ul>
<ul id="dash">
<li>Back Home</li>
<li>Dashboard</li>
<li>Theme Credits</li>
</ul>
</div>
<div id="container">
<!-- To add completed show copy and paste the following -->
<div class="stylewrap next">
<img class="grey" src="http://imgur.com/Bktk9mC.jpg">
<h2 class="name">6teen</h2>
Up Next
</div>
<!-- End of Complete Show -->
<div class="stylewrap current">
<img class="grey" src="http://imgur.com/IO7NGnK.jpg" />
<h2 class="name">18 to Life</h2>
Season 2 Episode 11
</div>
<div class="stylewrap childhood">
<img class="grey" src="http://imgur.com/NTMO0xq.jpg">
<h2 class="name">7th Heaven</h2>
(1996-2007)
</div>
<!-- To add completed show copy and paste the following -->
<div class="stylewrap complete">
<img class="grey" src="http://imgur.com/vPkxn7c.jpg">
<h2 class="name">About a Girl</h2>
(2007-2008)
</div>
<!-- End of Complete Show -->
<!-- To add hiatus show copy and paste the following -->
<div class="stylewrap hiatus">
<img class="grey" src="http://imgur.com/owiMXh5.jpg">
<h2 class="name">Awkward.</h2>
Returning September 23, 2014
</div>
<!-- End of Hiatus Show -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/whx9ghv/1eGm9d17y/isotope.js"></script>
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.stylewrap',
filter: '.current, .hiatus, .next, .complete',
getSortData : {
name : function ( $elem ) {
return $elem.find('.name').text();
}
}
});
var $optionSets = $('#shows .show-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.show-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
filter: '.current, .hiatus, .next, .complete';
}
return false;
});
});
</script>
</body>
</html>
I believe the problem is in the jQuery, but I just can't figure it out. I've spent 2 days on this, but I'm not too advanced so I've just been searching everywhere I can for an answer.
edit: Sorry for being unclear. The problem is solved!
Well...not sure if this is the best way, but you could simply alter the data-option-value attribute for the Show All option to omit childhood from the selector. You HTML might then become:
<li style="background: #f5f5f5;">Show All</li>
Here's a JSFiddle to show you the code in action. Now clicking "Show All" will not reveal the item tagged with childhood. Hope this helps! Let me know if you have any questions.
Your question isn't very clear but I believe you're asking how to remove a certain element from your unordered list.
This line:
<li style="background: #f5f5f5;">Childhood Influences</a></li>
represents a list element with a text value of "Childhood Influences". Remove the line, and this list item will no longer show up.
Edit: I misread your question, give me a second and I will edit this answer again to address your entire question correctly
I have the following HTML markup:
<div id="PlanViewControls" class="ui-widget ui-state-default ui-corner-all" >
<div id="Level1Controls">
<div class="separated">
<div id="PlanViewZoomSlider"></div>
</div>
<div class="separator">|</div>
<div class="separated">
<label>
Rack Info:
<select id="RackInfoSelect">
<option value="Name">Name</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<label>
Enable Auto-Refresh:
<input id="PlanViewRefreshCheckbox" name="Enable Auto-Refresh" value="value" type="checkbox" />
</label>
</div>
</div>
<div id="Level2Controls">
<div class="separated">
<label>
Levels To Display:
<select id="LevelSelect">
<option value="All">All</option>
</select>
</label>
</div>
<div class="separator">|</div>
<div class="separated marginedTop">
<a id="ExportPlanView" href="javascript:void(0)" target="_blank" title="Export the plan view as a pdf.">
<span class="cs-icon cs-icon-edit-search-results" style="float: left; margin-right: 5px;"></span>
<label id="ExportLabel">Export</label>
</a>
</div>
</div>
</div>
CSS (w/ latest jQueryUI for major styling)
#RightPaneContent
{
overflow: hidden;
}
#PlanViewControls
{
display: none;
min-height: 20px;
margin-bottom: 5px;
}
#PlanViewControls > div
{
min-height: 20px;
padding-top: 5px;
padding-bottom: 3px;
padding-left: 3px;
padding-right: 5px;
}
.component-slider
{
width: 100px;
margin-left: 5px;
margin-top: 3px;
}
#PlanViewControls label
{
display: block;
padding-left: 15px;
text-indent: -15px;
float: left;
}
#PlanViewControls input
{
width: 13px;
height: 13px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
}
#PlanViewControls div.separator
{
padding-top: 4px;
}
.marginedTop
{
margin-top: 3px;
}
#ExportLabel
{
padding-top: 1px;
}
#PlanViewControls
{
min-width: 700px;
}
#ExportLabel:hover
{
cursor: pointer;
}
#PlanViewControlsOverlay
{
background: white;
opacity: 0.7;
filter: alpha(opacity=70);
position: absolute;
z-index: 10001;
}
I am really unhappy with this solution because on wide displays the second level of controls looks unnatural -- there is enough space to hold them all in one level.
The solution I currently have in my head consists of:
Measure the available width of the space I would like to take up.
Measure the width of each control I have.
Place as many controls as I can on the first line.
Append a second level if I run out of space.
Obviously it doesn't make sense to collapse to just 1 item per row -- I would be specifiying a min-width for my first level controls.
Is this the proper way to go about doing this? Or is there an easy way to express this using CSS/HTML?
Just as a visual helper I've attached below what my page looks like on a landscape monitor vs a portrait monitor.
Hm, I would use pure CSS for that:
<div id="controls">
<div> "Separated" </div>
<div> another control </div>
<div> and one with an icon </div>
...
</div>
#controls {
width: 100%;
min-width: 10em; /* or whatever */
/* implicit height: auto; */
overflow: hidden; /* to hide the leftmost borders */
}
#controls > div {
display: inline-block;
border-left: 1px solid blue;
padding: 1em 0;
margin: 1em -1px; /* move the borders 1px into the off */
}
This should give a scalable toolbar, and there is no need for different level-divs.