I'm trying to implement a tab navigation menu.
I found this fiddle example http://jsfiddle.net/S78Bt/3/ doing exactly what I want to do. However, I can't get the tabify to work.
Programmatically change tab using tabify jquery plugin
In the above question, I found the tabify function is not being maintained, so instead we have to type it out, I reckon I made a mistake in completely attaching the JS with my webpage since the buttons (tabs) don't respond at all.
Here's my code:
JS script:
<script>
(function(a){a.fn.extend({tabify:function(e){function c(b){hash=a(b).find("a").attr("href");return hash=hash.substring(0,hash.length-4)}function f(b){a(b).addClass("active");a(c(b)).show();a(b).siblings("li").each(function(){a(this).removeClass("active");a(c(this)).hide()})}return this.each(function(){function b(){location.hash&&a(d).find("a[href="+location.hash+"]").length>0&&f(a(d).find("a[href="+location.hash+"]").parent())}var d=this,g={ul:a(d)};a(this).find("li a").each(function(){a(this).attr("href", a(this).attr("href")+"-tab")});location.hash&&b();setInterval(b,100);a(this).find("li").each(function(){a(this).hasClass("active")?a(c(this)).show():a(c(this)).hide()});e&&e(g)})}})})(jQuery);
$(document).ready(function(){
function getHref(el){
hash = $(el).find('a').attr('href');
hash = hash.substring(0,hash.length-4);
return hash;
}
function setActive(el){
$(el).addClass('active');
$(getHref(el)).show();
$(el).siblings('li').each(function(){
$(this).removeClass('active');
$(getHref(this)).hide();
});
}
$('#ulaa').tabify();
setActive($('#target'));
});
</script>
And here's the UL that I'm trying to put in tabs:
<ul id="ulaa">
<li class="active">abcd</li>
<li id="target" >asdbk</li>
<li>texte</li>
<li>foo</li>
<li>inserttexthere</li>
</ul>
<div class="contenta" id="a">
jQuery is a cross-browser…
</div>
<div class="contenta" id="bb">
The Prototype JavaScript…
</div>
<div class="contenta" id="c">
Ext (X-t) is a JavaScript…
</div>
That's it. I have all this in just the one HTML file. Is there something more I need to do?
Basically, on clicking a tab the link's class should change to 'active' and the previous one that already has 'active' should be removed (made class-less)
and then underneath the horizontal tabs a div should be shown corresponding to the ID and the href.
What's wrong with this code?
I put the following code in a page and uploaded it to my website and works exactly the way the fiddle works.
If you don't include jQuery in your header, you'll get a page that looks like yours.
CODE
<!DOCTYPE html>
<head>
<title>Limerick OneLimerick TwoLimerick</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
body { font: 0.8em Arial, sans-serif; }
.menu { padding: 0; clear: both; }
.menu li { display: inline; }
.menu li a { background: #ccf; padding: 10px; float:left; border-right: 1px solid #ccf; border-bottom: none; text-decoration: none; color: #000; font-weight: bold;}
.menu li.active a {
background: #eef;
}
.content { float: left; clear: both; border: 1px solid #ccf; border-top: none; border-left: none; background: #eef; padding: 10px 20px 20px; width: 400px; }
</style>
</head>
<body>
<div class='mytabs'>
<ul id="menu" class="menu">
<li>Limerick One</li>
<li>Limerick Two</li>
<li>Limerick Three</li>
</ul>
<div id="description" class="content">
<h2>Limerick One</h2>
<p>
The limerick packs laughs anatomical
In space that is quite economical,
But the good ones I've seen
So seldom are clean,
And the clean ones so seldom are comical.
</p>
</div>
<div id="usage" class="content">
<h2>Limerick Two</h2>
<p>
Let my viciousness be emptied,
Desire and lust banished,
Charity and patience,
Humility and obedience,
And all the virtues increased.
</p>
</div>
<div id="download" class="content">
<h2>Limerick Three</h2>
Hickere, Dickere Dock,
A Mouse ran up the Clock,
The Clock Struck One,
The Mouse fell down,
And Hickere Dickere Dock.
</div>
</div>
<script>
$('.mytabs').tabs()
$( '.menu li a' ).on('click', function(){
$( '.menu li a' ).css('background-color', '#ccf');
$( this ).css('background-color', 'green');
});
</script>
</body>
</html>
Related
I have the following simple html that has a tab menu with some javascript to change content when tabs are clicked.
test.html
<!DOCTYPE html>
<html>
<head>
<title>My Menu Test</title>
<style type="text/css" media="all">#import "public/stylesheets/master.css";</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script><!--
$(document).ready(function() {
$('.tablist > li > a').click(function(event){
event.preventDefault();//stop browser to take action for clicked anchor
//get displaying tab content jQuery selector
var active_tab_selector = $('.tablist > li.active > a').attr('href');
//find actived navigation and remove 'active' css
var actived_nav = $('.tablist > li.active');
actived_nav.removeClass('active');
//add 'active' css into clicked navigation
$(this).parents('li').addClass('active');
//hide displaying tab content
$(active_tab_selector).removeClass('active');
$(active_tab_selector).addClass('hide');
//show target tab content
var target_tab_selector = $(this).attr('href');
$(target_tab_selector).removeClass('hide');
$(target_tab_selector).addClass('active');
});
});
//--></script>
</head>
<body>
<div id="page-container">
<div id="main-nav">
<ul class="tablist">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Logout</li>
</ul>
</div>
<div id="content">
<section id="tab1" class="tab-content active">
<div>
Content for Tab1
</div>
</section>
<section id="tab2" class="tab-content hide">
<div>
Content for Tab2
</div>
</section>
<section id="tab3" class="tab-content hide">
<div>
Content for Tab3
</div>
</section>
</div>
</div>
</body>
</html>
master.css
.tablist { list-style: none; height: 30px; padding: 0; margin: 0; border: none; }
.tablist li { float:left; margin-right: 3px; }
.tablist li a { display:block; padding:0 16px; text-decoration:none; border: 1px solid #babdb6; border-bottom:0; font:bold 14px/32px arial,geneva,helvetica,sans-serif; color:#000; background-color:#ccc;
/*=== CSS 3 elements ===*/
webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.tablist li a:hover { background:#babdb6; color:#fff; text-decoration:none; }
.tablist > .active > a,
.tablist > .active > a:hover { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; }
.tab-content.active{ display: block; }
.tab-content.hide{ display: none; }
When I click on Tab1, Tab2 or Tab3 I get the relevant div being displayed and the others being hidden. I do want this functionality unless there is a better way of including different content based on the tab that was clicked. If there is a better way to do this I would appreciate a heads up, however that is probably for a different question.
My Question for now:
I would like to run a different action if you will when I click on the Logout tab. However I still want that logout tab to look the same as the others. Is there a way that when I click the logout tab the url "/logout" actually takes me too the logout page (not provided in this example) instead of trying to hide dive like the other tabs do?
Many Thanks
I like the idea of excluding the logout button from the click function entirely, and writing its own handler (as #xCRKxTyPHoon shows), however, if you desire to still use that click function, and want to be able to add more links in the same fashion without having to write separate handlers for each, you could add something like this at the start of the click function (checks if the href attribute has a slash, and redirects if it does):
if($(this).attr('href').indexOf('/') !== -1){
window.location = $(this).attr('href');
}
Here's a pen with that in there: http://codepen.io/shigidaMark/pen/YqNWRy
The selector $('.tablist > li > a') will find all anchor tags nested within the 'tablist' class object. This includes your logout tagLogout. This is why your logout tab acts like the other tabs.
There are several methods to exclude the logout tab from that loop. The easiest method off the top of my head is to give the anchor an ID and use a :not selector:
<a id="logout" href="/logout">Logout</a>
Your new loop selector would look like this:
$('.tablist > li > a').not('#logout')
Once you exclude the tab from that code, you should be able to handle it separately to have it redirect to the page you want.
I'm been having a lot of trouble figuring out a way to update the text in a section without having to reload the page. What I would like the code to do is update the text and a picture in a section (id="section2" below) when you click on one of the tabs.
What I want the page to do when you click on one of the tabs is to load text (and in the future a .jpg too) from a local .txt file. As of right now, the changeText function updates the text but only when you manually type in the text.
From my code below this works:
$('#section-text').html("test of text1");
but what I would like to do would be to load text in from a .txt file called "text1.txt"
$('#section-text').html("text1.txt");
I'm just starting to venture into the web programming so I have very little experience with JavaScript and JQuery so most of the stuff that I've shown below is trial and error from other sites. I've tried many other methods that I've found online but with very little success. So far this is the closest I've got to my ideal solution, but I find if I just copy and paste my text it loses formatting.
Any help would be greatly appreciated. And if people have any suggestions on cleaning up some of the code it would also be very welcome.
Here is my HTML:
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Test Page">
<title>Test Page</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function changeText(text){
if (text == 'Example 1'){
$('#section-text').html("test of text1");
$('#section-pic').html("images/slide1.jpg");
}
if (text == 'Example 2'){
$('#section-text').html("Change the text");
$('#section-pic').html("images/slide2.jpg");
}
if (text == 'Example 3'){
$('#section-text').html("Something new here");
$('#section-pic').html("images/slide3.jpg");
}
}
</script>
</head>
<div class="nav">
<link rel="stylesheet" href="css/styles.css">
<ul>
<li id="Example 1" onClick="changeText('Example 1');"><a>Example 1</a></li>
<li id="Example 2" onClick="changeText('Example 2');"><a>Example 2</a></li>
<li id="Example 3" onClick="changeText('Example 3');"><a>Example 3</a></li>
</ul>
</div>
<div id="section2" class="section2" align="center">
<div id="section-text" class="section-text">
<iframe src="des/text1.txt" style="overflow:hidden" width ="90%"; height="90%" seamless="seamless" scrolling="no" frameBorder="0"></iframe>
</div>
<div id="section-pic" class="section-pic">
<span class="Centerer"></span>
<img class="Centered" src="images/slide1.jpg" style="height:75%; width:90%"/>
</div>
</div>
</html>
The CSS:
<style>
#header {
background-color:#083266;
color:white;
text-align:center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
#section2 {
width:100%;
background-color:grey;
padding-top:25px;
padding-bottom:25px;
height: 10cm;
}
.section-text {
width:60%;
float:right;
background-color:grey;
padding-top:25px;
padding-bottom:25px;
text-align:center;
}
.section-pic {
background-color:grey;
width: 40%;
float:left;
text-align:center;
}
.Centerer {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.Centered {
display: inline-block;
vertical-align: middle;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 10px;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
width = 100px
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
</style>
AJAX attempt:
var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');
function loadFile() {
reader.open('GET', 'text1.txt', true);
reader.onreadystatechange = displayContents;
reader.send(null);
}
function displayContents() {
if(reader.readyState==4) {
var el = document.getElementById('page_content');
el.innerHTML = reader.responseText;
}
}
UPDATED - My Solution:
For those of you who run into the same problem as I did here is the solution I used. After a lot of searching and asking around I used the display option in my css file. So add the following to your css file:
.hidden { display: none; }
.unhidden { display: block; }
In my case I wanted to update some text and a picture with a click on each tab so I added the following script to my html:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function unhide(divID,divID2) {
$(".unhidden").each(function() {
$(this).removeClass("unhidden").addClass("hidden");
});
//change text
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
//change the images
var item = document.getElementById(divID2);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
and here is the html script that I used:
<div class="section2" align="center">
<div class="nav">
<link rel="stylesheet" href="css/styles.css">
<ul>
<li> Example 1 </li>
<li> Example 2 </li>
</ul>
</div>
<div class="section-text">
<div id="Text1" class="unhidden">
<p> Text for Example 1 </p>
</div>
<div id="Text2" class="hidden">
<p> Add your text here for Text 2 </p>
</div>
</div>
<div class="section-pic">
<div id="Pic1" class="unhidden">
<span class="Centerer"></span>
<img class="Centered" src="images/pic1.jpg" style="height:auto; width:auto"/>
</div>
<div id="Pic2" class="hidden">
<span class="Centerer"></span>
<img class="Centered" src="images/pic2.jpg" style="height:auto; width:auto"/>
</div>
</div>
</div>
There are bunch of things you would need to do. Following is a mockup that would help you understand how you can get the text from an external file. Since you are more looking at a configuration approach, I would recomment using an xml file instead of text ( but the choice is upto you ).
// Register click event for every 'li' element
$('li').click(function()
{
var response = '';
// grab the id of the 'li' for lookup
var value = $(this).attr("id");
$.ajax({
url: "https://url/xml/test.xml", // Check for the structure below
dataType: "xml",
success: function(data) {
xmlDoc = $.parseXML(data);
$(xmlDoc).find("id").each(function ()
{
if($(this).text() == value)
{
$("#section-text").text($(this).find("title").text());
$(".Centered").attr("src",$(this).find("title").text());
}
});
}
});
});
// structure of text file as xml
"<id>Example1<title>Text Of Example 1</title><img>images/example1Image.img</img></id><id>Example2<title>Text Of Example 2</title><img>images/example2Image.img</img></id>",
http://jsfiddle.net/gcfLso5s/4/
I would also recommend reading some articles on jquery and ajax to enhance the understanding on how it works.
Let me know if you got any questions.
You can load a text file Via AJAX request and can set the text.where ever you want to.
I want to create a button that when clicked will show will show a little drop down menu on the side like this one here: http://postimg.org/image/re433fr2l/ this the code that i already have:
HTML
<body background="http://s14.postimg.org/rpo7dneox/NEWW.png/>
<div class="div3">
<UL>
<LI>HOME</LI>
<LI>ARTICLES</LI>
<LI>CONTACT </LI>
<UL>
<div>
CSS:
ul{
font-family: impact;
font-size: 90px;
list-style: none;
}
.div3{
float:right;
width:300px;
height:300px;
border:0px solid cyan;
margin-top: 50px;
margin-left: 570px;
}
a {
color:green;
}
a:hover{
color:orange;
font-size: 100px;
}
You are looking for something like this: http://jsfiddle.net/Ltbodn0j/
$(document).ready(function () {
$(".menu-toggle > button").click(function() {
$(".menu-toggle > ul").toggle();
});
});
Which translates to: if a user clicks the button -> toggle (show/hide) the list.
However, this is a very basic question so I advise you to follow an introductory tutorial on JavaScript and jQuery rather than simply copy-pasting my answer.
I am having some trouble using jQuery to hide my vertical menu. I just learned jQuery, so I am fairly new to using it. I can't get jQuery to modify anything (change color for example, using any action.. mouseenter(), click() etc)
Help is much appreciated.
EDIT: I am getting errors in JSLint.. trying to use jQuery in brackets editor. Not sure what to do :/ First error is on line 1 using $ before defined.. any help would be awesome
This code is simply trying to change the green "link1, link2, link3" text from green to purple when mousing over "Program"
***also, is there a way to easily reduce the size of my ul li items? The area that I can currently click is larger than the text. I tried modifying my display: property, but that messes up the layout of my list.. *******
jQuery
$(document).ready(function() {
$('#headerMenu > li').mouseenter(function() {
('#headerMenu ul li a').Color('purple');
});
});
HTML:
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type='text/javascript' src='script.js'></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
DROP
<ul>
<li><a href='#'>LINK 1</a></li>
<li><a href='#'>LINK 2</a></li>
<li><a href='#'>LINK 3</a></li>
</ul>
</li>
<li>LOGIN</li>
<li>ABOUT</li>
</ul>
</div>
<div class="wrapper">
<div id="mainPhoto"> fffffff
<div> change color</div>
</div>
<div id="mainScrollUp"> </div>
</div>
</body>
</html>
css code
.header {
background-color: skyblue;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
}
#headerMenu > li {
display: inline-block;
text-align: center;
}
#headerMenu li a {
text-decoration: none;
color: black;
padding: 2rem;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#headerMenu ul {
text-decoration: none;
list-style: none;
display: block;
color: red;
padding-left: 0;
position:absolute;
}
#headerMenu ul li a{
color:green;
}
#mainPhoto {
height: 650px;
width: 100%;
background-color: bisque;
color:palevioletred;
}
#mainScrollUp {
z-index: 1;
height: 1000px;
width: 100%;
background-color: aqua;
clear: both;
}
.fixed {
position: fixed;
top: 0;
}
error is on line 1 using $ before defined
You forgot to define jQuery. Try and add the following line to your header tag in your HTML file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Put it before your own script.js please, that way jQuery is defined before calling it in your script.
Understanding your vertical submenu goal, I came up with this:
https://jsfiddle.net/wsj59p20/
Hope it helps!
I don't think this is what you want but it fixes some of your syntax
$(document).ready(function() {
$('#headerMenu > li').mouseenter(function() {
$(this).find('ul>li>a').css('color', 'purple');
});
});
Also, your "using $ before defined" error seems to because you aren't loading jQuery at all in your sample code.
Drop down menu will not work ! for css I used the "display: none;" to hide the list but Im wondering if this is the most efficient way to perform a drop down menu? I used this concept from a codeacademy project.
Im sure there might be some code in here that may make you cringe but please take it easy on me, I'm an absolute rookie at programming! Thank you!
$(document).ready(function() {
$('p').hover(function() {
$(this).find('ul').fadeToggle(400);
});
});
* {
margin: 0;
padding: 0;
}
.main {
margin: 0 auto;
height: 400px;
width: 400px;
}
.container {
max-width: 230px;
max-height: 300px;
margin: 0 auto;
background-color: #024F79;
}
p {
text-align: center;
color: #fff;
border-bottom: 1px solid #fff;
font-size: 18px;
padding: 8px;
}
ul {
list-style-type: none;
display: none;
}
ul li {
padding: 10px;
border-bottom: 1px solid white;
color: white;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="main">
<div class="container">
<p>How do I ?</p>
<ul>
<li>View my Transcript</li>
<li>View my Conformation Page</li>
<li>Register for Courses</li>
<li>Pay for Courses/Exams</li>
</ul>
</div>
</div>
</body>
$(this).find('ul') will look inside of the p element as a result of using this as the context. You could use .next()
$(this).next('ul').fadeToggle(400);
However, a better approach would be to restructure your html and wrap the whole p and ul with a div that has an id in order to facilitate the UI fading.
<div id="menu">
<p>How do I ?</p>
<ul>
<li>View my Transcript</li>
<li>View my Conformation Page</li>
<li>Register for Courses</li>
<li>Pay for Courses/Exams</li>
</ul>
</div>
And then use your original code except target the #menu item
$('#menu').hover(function() {
$(this).find('ul').fadeToggle(400);
});
jsFiddle Demo
Maybe instead of using JavaScript, you can use pure CSS solutions, unless you want to make some animation.