I am attempting to make a tabbed "table" of sorts but I am having trouble making it display the information.
$(document).ready(function() {
$('#orenk ul a').click(function() {
$('#orenk ul a').removeClass('selected');
$(this).addClass('selected');
$('#orenk_changer').html(
('.' + $(this).attr('id') + '_content').html()
);
});
});
body,
html,
div,
ul,
li,
a {
margin: 0;
padding: 0;
}
body {
font-family: arial;font-size:12px; color:#222;}
.clear {
clear: both;
}
a img {
border: none;
}
ul {
list-style: none;
position: relative;
z-index: 2;
top: 1px;
border-left: 1px solid #f5ab36;
}
ul li {
float: left;
width: 12.5%;
}
ul li a {
background: #ffd89b;
color: #222;
display: block;
padding: 6px 0px;
text-decoration: none;
border-right: 1px solid #f5ab36;
border-top: 1px solid #f5ab36;
border-right: 1px solid #f5ab36;
text-align: center;
}
ul li a.selected {
border-bottom: 1px solid #fff;
color: #344385;
background: #fff;
}
h1 {
display: block;
width: 600px;
margin: 0 auto;
padding: 20px 0;
color: #fff;
}
#orenk {
width: 900px;
margin: 0 auto;
}
#tabs {
width: 900px;
margin: 0 auto;
}
#content {
width: 900px;
margin: 0 auto;
height: 270px;
background: #fff;
z-index: 1;
text-align: center;
margin-bottom: 20px;
}
<div class="titlebg" style="padding: 4px; text-align: left; font-size: 20px;">
ORENK PROVINCE
</div>
<div id="orenk">
<ul>
<li>ORENK PROVINCE
</li>
<li>Glass Shores
</li>
<li>Torrid Terrain
</li>
<li>Muculent Plains
</li>
<li>Ambrosial Marsh
</li>
<li>Viscid Expanse
</li>
<li>Opulent Retreat
</li>
<li>Reedy Knolls
</li>
</ul>
<div class="clear"></div>
</div>
<div id="content">
<div id="orenk_changer">
<img src="http://placehold.it/900x270">
</div>
<div id="glass_content" style="display: none;">Glass content test</div>
<div id="torrid_content" style="display: none;">torrid content test</div>
<div id="plains_content" style="display: none;">plains content test</div>
<div id="marsh_content" style="display: none;">marsh content test</div>
<div id="expanse_content" style="display: none;">expanse content test</div>
<div id="Opulent_content" style="display: none;">opulent content test</div>
<div id="knolls_content" style="display: none;">knolls content test</div>
</div>
I am VERY new to javascript and I can get it to display the id where I want the content but when I attempt to get it to show the html inside the container I am trying to call, it does nothing. It's incredibly frustrating. Any one care to point out what I am doing wrong and how to fix it?
jsBin demo
Two things wrong with your ('.' +
$('.' + ›missing $
$('#' + ›you need to target # (Id) elements, not .(class)
$('#orenk ul a').click(function( evt ) {
evt.preventDefault();
$('#orenk ul a').removeClass('selected');
$(this).addClass('selected');
$('#orenk_changer').html(
$('#'+ this.id +'_content').html() // missing $ and # instead of .
);
});
Also, a href="#" (instead of a href="javascript:void(0);") is quite enough if than inside JS you do Event.preventDefault()
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 attempting to have an element in my layout to change text and background colors onMouseOver, and then revert to their original state when rolled off. The problem is that JS doesn't seem to recognize the nature of my CSS.
The element (#sidebar) has these pieces of CSS code (code of the sidebar itself not relevant):
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width:100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
And it looks like this, prior to OnMouseOver:
This is the JS I'm using to attempt the onMouseOver:
<script type="text/javascript">
function changeColor(myColor) {
var sidebar = document.getElementById('sidebar li');
sidebar.style.fontcolor = "#6588C7";
sidebar.style.backgroundColor = "#6588C7";
}
</script>
With this implementation in the div:
<div id ="sidebar li">
<ul><li onmouseover="changeColor('new color')"><p class="class1">writing<p></li></ul>
</div>
But it does this to my sidebar instead:
How can I get the color to stay in the little boxes?
You can really simplify your code by using :hover instead of onmouseover.
I am using a flexbox for li to make center alignment easy. You do not longer need to suppress the list-style because the list items are no longer displayed as a list-item.
You may no longer need class1 for the paragraphs. I just kept them in.
function changeText(myText) {
//find variable on page called 'myContent' and give it var name display
var display = document.getElementById('content');
display.innerHTML = "";
display.innerHTML = "New content.";
}
#sidebar li {
width: 100px;
height: 100px;
border-radius: 25px;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
display: flex;
align-items: center; /* Vertical alignment */
justify-content: center; /* Horizontal alignment */
}
#sidebar li:hover {
background-color: red;
}
/* Apply top margin to all list elements except for the first one */
#sidebar li:not(:first-child) {
margin-top: 10px;
}
#content {
border-radius: 25px;
width: 750px;
height: 500px;
margin-top: 50px;
margin-left: 300px;
background-color: azure;
padding: 50px;
}
<div id="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
<li>
<p class="class1">games/art<p>
</li>
<li>
<p class="class1">music<p>
</li>
</ul>
</div>
<div id="content" onclick="changeText()"> <p>Content here.</p> </div>
getElementById accepts id argument, but you are passing it a selector instead. You may want to use document.querySelector instead. Query selector documentation:
Query Selector
Your div id is not correct. It should be like this:
<div id ="sidebar">
<ul><li onmouseover="changeText('new text')" onmouseout="resetText()"><p class="class1">writing<p></li>
</div>
You don't need javascript for something as trivial as this. You could use :hover CSS pseudo-class. Read more about it here
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width:100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
#sidebar li:hover {
color: tomato;
background: #333
}
<div id ="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
<li>
<p class="class1">writing 2<p>
</li>
</ul>
</div>
div id name is incorrect
var sidebar = document.getElementById('sidebar-li');
<script type="text/javascript">
function changeColor(myColor) {
var sidebar = document.getElementById('sidebar-li');
sidebar.style.fontcolor = "#6588C7";
sidebar.style.backgroundColor = "#6588C7";
}
</script>
and
<div id ="sidebar-li">
<ul>
<li onmouseover="changeColor('#ffffff')">
<p class="class1">writing<p>
</li>
</ul>
</div>
Based on your code you could do :
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width: 100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
<div id="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
</ul>
</div>
<script type="text/javascript">
function changeColor(e) {
var sidebar = e.currentTarget;
sidebar.style.color = "#fff";
sidebar.style.backgroundColor = "#6588C7";
}
var li_elements = document.getElementById('sidebar').getElementsByTagName('li');
for (var i = 0; i < li_elements.length; i++) {
li_elements[i].addEventListener('mouseover', changeColor);
}
</script>
But a simpler solution is to remove the JavaScript and to just do it with CSS :
#sidebar ul {
list-style-type: none;
}
#sidebar li {
width: 100px;
border-radius: 25px;
text-align: center;
background-color: #AFCEEA;
border: 5px solid #195A94;
font-weight: bold;
line-height: 50px;
margin-top: 10px;
margin-left: 5px;
}
#sidebar li:hover {
color: #fff;
background-color: #6588C7;
}
<div id="sidebar">
<ul>
<li>
<p class="class1">writing<p>
</li>
</ul>
</div>
I was going through this code for Codeplayer in Codepen (see link below), there is a #control{} listed in the CSS code but not mentioned in either HTML or JS code. Could anyone tell me why. Is this a mistake? I'm a newbie to web development so would really like to understand if this is standard or a trick... Thank you!
https://codepen.io/likezli/pen/dXPdJL
CSS code:
body {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
li {
list-style: none;
float: left;
}
a {
color: black;
}
.clear {
clear: both;
}
#logo {
font-weight: bold;
padding: 10px 0 0 10px;
float: left;
}
#menuBar {
height: 40px;
width: 100%;
background-color: #EDEDED;
border-bottom: 1px solid #C8C8C8;
box-sizing: border-box;
}
#buttonDiv {
float: right;
padding: 5px 15px 0 0;
}
#runButton {
font-size: 110%
}
#control {}
#toggleDiv {
height: 40px;
margin: auto;
width: 20%;
box-sizing: border-box;
padding-top: 5px;
position: relative;
}
#toggles {
float: left;
margin: 0;
list-style: none;
padding-left: 0;
box-sizing: border-box;
border: 1px solid #D3D3D3;
border-radius: 5px;
}
#toggles li {
float: left;
border-right: 1px solid #D3D3D3;
box-sizing: border-box;
padding: 5px 8px 4px 7px;
}
.codeContainer {
height: 100%;
width: 50%;
float: left;
position: relative;
}
.codeContainer textarea {
width: 100%;
height: 100%;
border: none;
border-right: 1px solid #E5E5E5;
font-family: SourceCodeProRegular, Menlo, Monaco, consolas, monospace;
font-size: 90%;
box-sizing: border-box;
padding: 30px 0 5px 5px;
}
.codeLabel {
position: absolute;
right: 10px;
top: 10px;
}
#cssContainer,
#jsContainer {
display: none;
}
iframe {
height: 100%;
position: relative;
width: 100%;
border: none;
padding-top: 30px;
}
.selected {
background-color: #EAF3FF;
}
a {
text-decoration: none;
}
a:visited {
color: #000000;
}
**here is the html code:**
<div id="container">
<div id="menuBar">
<div id="logo">
CodePlayer
</div>
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
<div id="toggleDiv">
<ul id="toggles">
<a href="#">
<li class="toggle selected">HTML</li>
</a>
<a href="#">
<li class="toggle">CSS</li>
</a>
<a href="#">
<li class="toggle">JS</li>
</a>
<a href="#">
<li class="toggle selected" style="border:none">Result</li>
</a>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="codeContainer" id="htmlContainer">
<div class="codeLabel">HTML</div>
<textarea id="htmlCode"><div id="test"></div></textarea>
</div>
<div class="codeContainer" id="cssContainer">
<div class="codeLabel">CSS</div>
<textarea id="cssCode"></textarea>
</div>
<div class="codeContainer" id="jsContainer">
<div class="codeLabel">Javascript</div>
<textarea id="jsCode"></textarea>
</div>
<div class="codeContainer" id="resultContainer">
<div class="codeLabel">Output</div>
<iframe id="resultFrame"></iframe>
</div>
</div>
**JS Code:**
var windowHeight = $(window).height();
var menuBarHeight = $("#menuBar").height();
// code container height calculated
var codeContainerHeight = windowHeight - menuBarHeight;
$(".codeContainer").height(codeContainerHeight + "px");
// Toggling between HTML, CSS, JS and Output
$(".toggle").click(function(event) {
// toggle items in menuBar
$(this).toggleClass("selected");
// get html of list item (html, css, js or result) in lowercase
var activeDiv = $(this).html().toLowerCase();
// combine it to one of the cor container id's (htmlContainer, cssContainer, etc.)
// toggle show or hide
$("#" + activeDiv + "Container").toggle();
// count the container id's which are not hidden (display != none)
var showingDivs = $(".codeContainer").filter(function() {
return ($(this).css("display") != "none");
}).length;
// 100% width divided by active divs
var width = 100 / showingDivs;
// set the width
$(".codeContainer").width(width + "%");
});
$("#runButton").click(function(event) {
// find html tag in iframe and set this to html("text")
$("iframe").contents().find("html").html('<style>' + $("#cssCode").val() + '</style>' + $("#htmlCode").val());
// run javascript code in iframe
document.getElementById("resultFrame").contentWindow.eval($("#jsCode").val());
});
We can create styles whatever for id, or class in css,,,like you said #control{},,If there is any id or class assigned to tag / element, then only the styles gets reflected,,otherwise css wont applied.
I have a web page with sticky navbar fixed top and structure of sticky navbar and my sticky navbar structure is
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".b").offset().top + $(".b").height() && $("input").val() == "") {
$(".sticky").show();
} else {
$(".sticky").hide();
}
});
});
.container {
width: 1020px;
margin: 0 auto;
}
.container>div {
width: 100%;
height: 300px;
background: #f0f0f0;
border: 1px solid #ccc;
margin: 100px 0;
}
.a:after {
content: "A";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.b:after {
content: "B";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.c:after {
content: "C";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
ul.sticky {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f0f0f0;
height: 50px;
border-bottom: 5px solid #ccc;
display: none;
}
ul.sticky:after,
ul.sticky:before {
content: "";
display: table;
clear: both;
}
ul.sticky li a {
display: block;
float: left;
line-height: 50px;
padding: 0 30px;
text-decoration: none;
color: #999;
}
ul.sticky li a:hover {
background: #999;
color: #f0f0f0;
}
<ul class="sticky">
<li>Home
</li>
<li>About Us
</li>
<li>Download
</li>
<li>Forums
</li>
<li>Contact
</li>
</ul>
<div class="container">
<input type="text" class="input">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
click to see on codepen
and my question is if I'm not putting my .sticky element another pages javascript notifier give me this error and I am not gonna put my .sticky element every page what do I have to do ?
click to see real demo
click to see getting error
You get this error beacause jQuery did not find the element .hotel-search-box in your website.
Javascript
$(function() {
$(window).scroll(function() {
if (!$(".hotel-search-box").length) {
return false; //Check if the element exist
}
if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height() && $(".oda-giris-cikis").val() == ""){
$(".sticky-checkin").show();
}else{
$(".sticky-checkin").hide();
}
});
});
To fix your probleme add a .hotel-search-box element in your page where you want to show your sticky menu.
I'm trying to make the entire li tag area clickable as well as the text which I have made clickable already. I have tried giving it a href property but that doesn't work. I have already set the li background to change color when it's hovered over but as I said, how do I also make the entire area clickable? Thanks in advance.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<h3 id="welcometext">Welcome To<br>Lakeside Books</h3>
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder=" ...Search Book Title" class="searchstyle"/>
</form>
</div>
<ul>
<li style="background-color: #333">
<a href="1Index.html" class="link">
Home
</a>
</li>
<li>
<a href="2Catgeories.html" class="link">
Categories
</a>
</li>
<li>
<a href="http://example.com" class="link">
Bestsellers
</a>
</li>
<li>
<a href="http://example.com" class="link">
Contact
</a>
</li>
</ul>
</nav>
</div>
<div id="sectionone">
<div id="containerone">
<div id="header">
<div id="logo">
<h1>LAKESIDE BOOKS</h1>
<p>KERRYS LOCAL BOOKSTORE</p>
</div>
</div>
</div>
</div>
<div id="sectiontwo">
<div id="containertwo">
<h2 id="sectwohead">Best Selling Books Right Now</h2>
<div id="bestsellerimages">
<figure>
<img src="Images/4.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Girl On The Train <br>
<span style="font-style: italic; font-size: 0.9em">Paula Hawkins</span></figcaption>
</figure>
<figure>
<img src="Images/3.jpg" alt="book2" height="200" width="131" class="imgbot">
<figcaption>Meet Me In Manhattan <br>
<span style="font-style: italic; font-size: 0.9em">Claudia Carroll</span></figcaption>
</figure>
<figure>
<img src="Images/5.jpg" alt="book1" height="200" width="131" class="imgbot">
<figcaption>The Pointless Book 2 <br>
<span style="font-style: italic; font-size: 0.9em">Alfie Deyes</span></figcaption>
</figure>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body { /* ### */
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
background-color: #fdfdfd;
font-family: Arial, "Open Sans", sans-serif-light, sans-serif, "Segoe UI";
}
#wrapper {
width: 100%;
height: 100%;
margin:0 0 0 20%; /* ### */
}
#sidebar {
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav {
color: #DADADA;
display: block;
max-width: 100%;
}
#nav ul {
padding-left: 0;
}
#nav li {
list-style-type: none;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
#nav li:hover {
background:#333;
}
#nav li a {
display: block;
padding: 0.5em 0;
}
.link {
text-align: right;
margin-right: 25%;
letter-spacing: 1px;
}
a:link, a:visited, a:hover, a:active{
color: #DADADA;
text-decoration: none;
}
#welcometext {
text-align: center;
font-style: italic;
text-transform: uppercase;
font-size: 1em;
margin-top: 2em;
}
#searchbar {
width: 70%;
margin-left: auto;
margin-right: auto;
padding: 1em 1em 0.5em 1em;
text-align: right;
}
#searchbar .searchstyle{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar input {
max-width: 95%;
}
#sectionone {
/*position: fixed;*/
top: 0;
right: 0;
width: 80%;
}
#containerone {
margin-top: 0;
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
border-bottom: 2px solid #DADADA;
box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #DADADA;
}
#header {
margin: 6em 0 6em 0;
}
#logo h1 {
color: #ed786a;
text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1);
letter-spacing: 13px;
}
#logo p {
margin-top: -0.6em;
color: #888888;
letter-spacing: 4px;
font-size: 0.85em;
}
#sectiontwo {
width: 80%;
top: 0;
right: 0;
}
#containertwo {
width: 80%;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #888888;
}
#sectwohead{
margin: 2em 0 2em 0;
color: #888888;
}
#bestsellerimages{
float: left;
display: inline-block;
width: 100%;
max-width: 100%;
margin: 0 0 2em 0;
}
#bestsellerimages img{
padding: 0;
}
#bestsellerimages figure{
display: inline-block;
width: 131px;
}
#bestsellerimages figcaption{
font-size: 1.2em;
}
#bestsellerimages figure .imgbot{
margin: 0 0 0.5em 0;
}
This should help see more clearly what I'm trying to do, as you can see in this image - http://i.imgur.com/OZIt9TM.png - The only clickable area is the blue part within chromes inspect that's easy to see. So what I'm trying to do is make the entire area of that specific 'Home Li' clickable.
Rule #1 of list-based menus: Style the links, not the wrappers. Only style the list for positioning (display/float etc.).
Use display:block on your A-tags and put all styling on that tag, not the list itself.
Home
Move background-color: #333 to the .link class in your css, and add display:block to that declaration.
If you are using jQuery (assuming the tags are right) you can do it like this without styling the anchor tags:
$('ul li').click(function() {
location.href = $(this).find('a').prop('href');
});
I would suggest a class name for the ul list like <ul class="navigation">
$('ul.navigation li').click(function() {
location.href = $(this).find('a').prop('href');
});
Ups sorry...Try this..
#nav li {
list-style-type: none;
/* margin: 0; */
/* padding: 0.75em 0 0.75em 0; */
/* text-align: center; */
/* max-width: 100%; */
/* display: block; */
}
#nav li a {
display: block;
padding: 0.5em 0;
margin: 0;
padding: 0.75em 0 0.75em 0;
text-align: center;
max-width: 100%;
}
Wrap your A tag around the LI tag. For example look at the google link. You're putting the A tag around the text only, not the entire element.
<ol>
<a href="http://google.com">
<li>google</li> <!-- DO THIS -->
</a>
<li>
yahoo <!-- YOUR CURRENTLY DOING THIS -->
</li>
</ol>