So I have a navigation bar menu. The website default is on the About page. But what I'm trying to accomplish is that when I click on another menu item, like Experience, I'd like the About paragraph to change into the paragraph I have for Experience. I feel like this is very simple but I can't seem to get it right.
Thanks for your help! This is how my html looks:
<nav id="nav-bar">
<ul>
<li>About Me</li>
<li>Experience</li>
<li>Education</li>
<li>Contact</li>
</ul>
</nav>
<div class="title">
<p><span style="font-size:55px;">—</span> Jennifer</p>
</div>
<div class="jenpic">
<img src="jen_1.svg" alt="" />
<div class="vr"> </div>
</div>
<div id="text">
<div class="bio">
<p>blah blah blah</p>
</div>
<div class="experience" style="display:none">
<p>blah blah blah</p>
</div>
<div class="education" style="display:none">
<p>blah blah blah</p>
</div>
<div class="contact" style="display:none">
<p>blah blah blah</p>
</div>
</div>
This is fairly simple. Here is a working snippet:
$("#about").click(function() {
$(".experience").hide();
$(".education").hide();
$(".contact").hide();
$(".bio").show();
});
$("#exp").click(function() {
$(".bio").hide();
$(".education").hide();
$(".contact").hide();
$(".experience").show();
});
$("#edc").click(function() {
$(".bio").hide();
$(".experience").hide();
$(".contact").hide();
$(".education").show();
});
$("#con").click(function() {
$(".bio").hide();
$(".education").hide();
$(".experience").hide();
$(".contact").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav-bar">
<ul>
<li id="about"><a href="#about" >About Me</a></li>
<li id="exp">Experience</li>
<li id="edc"><a href="#education" >Education</a></li>
<li id="con"><a href="#contact" >Contact</a></li>
</ul>
</nav>
<div class="title">
<p><span style="font-size:55px;">—</span> Jennifer</p>
</div>
<div class="jenpic">
<img src="jen_1.svg" alt="" />
<div class="vr"> </div>
</div>
<div id="text">
<div class="bio">
<p>Hi, I’m Jennifer! I am a Speech-Language
Pathologist providing private speech and
language services to the pediatric population.</p>
</div>
<div class="experience" style="display:none">
<p>Prompt I & II trained. Experienced in evaluating, diagnosing and treating speech sound disorders (including articulation, dysarthria, apraxia of speech, phonological), fluency disorders (stuttering), language delays/disorders and pragmatic (social) language weaknesses. Experienced in implementing and training AAC (augmentative and alternative communication) for nonverbal/emerging communicators. Skilled in working with ASD (Autism Spectrum Disorders) & a variety of developmental/medical conditions.</p>
</div>
<div class="education" style="display:none">
<p>Hi, I’m Jennifer! I am a Speech-Language
Pathologist providing private speech and
language services to the pediatric population.</p>
</div>
<div class="contact" style="display:none">
<p>Hi, I’m Jennifer! I am a Speech-Language
Pathologist providing private speech and
language services to the pediatric population.</p>
</div>
</div>
Whenever a menu button is clicked, it hides all the rest and shows the one that is clicked. I hope this helps!
Matt
You can do it with jQuery like this, there's no need of "display:none;":
$( document ).ready(function() {
$(".experience").hide();
$(".education").hide();
$(".contact").hide();
$("#eduNavItem").click(function() {
$(".bio").hide();
$(".education").show();
});
});
#eduNavItem would be the id of the education item at the navigation bar.
I would try to make it so you could add more links and areas quickly.
Add a class to each section so you can hide them all at once.
Then use the href to find the correct section to show. (i have changed your "bio" div to about to match the href.
Javascript
$(document).ready(function() {
$sections = $('.js-section');
$('#nav-bar a').on('click', function() {
var ref = $(this).attr('href').replace('#','');
$sections.hide();
$("." + ref).show();
});
});
Html
<nav id="nav-bar">
<ul>
<li>About Me</li>
<li>Experience</li>
<li>Education</li>
<li>Contact</li>
</ul>
</nav>
<div class="title">
<p><span style="font-size:55px;">—</span> name of person</p>
</div>
<div class="jenpic">
<img src="blah.svg" alt="" />
<div class="vr"> </div>
</div>
<div id="text">
<div class="about js-section">
<p>blah blah about</p>
</div>
<div class="experience js-section" style="display:none">
<p>blah blah experience</p>
</div>
<div class="education js-section" style="display:none">
<p>blah blah education</p>
</div>
<div class="contact js-section" style="display:none">
<p>blah blah contact</p>
</div>
</div>
I would change your code to be similar to below. The advantage with this is that you can continue to develop your site and the code would never need to be changed. It works by using the data-target element to target the element that contains the text. Hope that is helpful ask any questions that you might have, I am happy to help!
$(document).ready(function(){
$('nav#nav-bar a').on('click',function(){
$('.active').removeClass('active');
$( $( this ).attr('data-target') ).addClass('active');
})
})
#text > div {
display:none;
}
.active {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav-bar">
<ul>
<li>About Me</li>
<li>Experience</li>
<li>Education</li>
<li>Contact</li>
</ul>
</nav>
<div class="title">
<p><span style="font-size:55px;">—</span> Jennifer</p>
</div>
<div class="jenpic">
<img src="jen_1.svg" alt="" />
<div class="vr"> </div>
</div>
<div id="text">
<div id='bio' class="active">
<p>Hi, I’m Jennifer! I am a Speech-Language
Pathologist providing private speech and
language services to the pediatric population.</p>
</div>
<div id="experience">
<p>Prompt I & II trained. Experienced in evaluating, diagnosing and treating speech sound disorders (including articulation, dysarthria, apraxia of speech, phonological), fluency disorders (stuttering), language delays/disorders and pragmatic (social) language weaknesses. Experienced in implementing and training AAC (augmentative and alternative communication) for nonverbal/emerging communicators. Skilled in working with ASD (Autism Spectrum Disorders) & a variety of developmental/medical conditions.</p>
</div>
<div id="education">
<p>Hi, I’m Jennifer! I am a Speech-Language
Pathologist providing private speech and
language services to the pediatric population.</p>
</div>
<div id="contact">
<p>Hi, I’m Jennifer! I am a Speech-Language
Pathologist providing private speech and
language services to the pediatric population.</p>
</div>
</div>
Related
I have created a link that I want a modal to pop up when I click on it of a different HTML page is there a way to do so using either JavaScript or Jquery. It is pretty much a resume card that opens a modal of my resume.html page. I have posted the resume card and the resuume.html code below. Is there a way to create a modal from a different page or at least its main tag because that is all I need really.
<a href="">
<div class="card">
<div class="card-body">
<div class="card-top">
<h2>Resume</h2>
</div>
<div class="card-bottom">
<p>I would like to share my resume with whoever it may concern that outlining all the achievements and skills I have achieved.</p>
<button>See More</button>
</div>
</div>
</div>
</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="personal.css">
<title>Resume</title>
</head>
<body class="resume">
<main class="container">
<section class="resume-section flex-resume">
<div class="info">
<h1>Alladin Assaf</h1>
<h2>Web Designer - Front-End</h2>
<p>219 Moss Hill Dr Arlington, Tx 76018</p>
<p>Phone: 682-313-3458</p>
<p>Email: alladin.assaf#icloud.com</p>
</div>
<div class="paragraph">
<p>Hello, I am a recent graduate of the University of Texas at Arlington majoring in Communication Technology. I am a well detailed individual and I love using my creativity to develop visually pleasing websites. In my free time I love to play video games and hang out with friends. </p>
</div>
</section>
<section class="resume-section">
<h2>Education</h2>
<hr>
<ul>
<li>Tarrant County College (2017-2019)</li>
<li>University of Texas at Arlington (2019 - 2021)</li>
</ul>
</section>
<section class="resume-section">
<h2>Skills</h2>
<hr>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>SCSS</li>
<li>JavaScript</li>
<li>Jquery</li>
<li>PHP</li>
</ul>
</section>
<section class="resume-section">
<h2>Certificates</h2>
<hr>
<ul>
<li>Digital Media certificate</li>
</ul>
</section>
</main>
</body>
</html>
You can do like this as in below snippet . And can decorate resume according to need .
function showResume(){
document.getElementById("resume").style.display = "block";
}
function closeResume(){
document.getElementById("resume").style.display = "none";
}
#resume {
display: none;
border:2px solid red;
position:absolute;
top:0;
background-color:white
}
.close{
position:absolute;
right:0;
padding: 8px;
background-color:red;
color:white;
cursor:pointer;
}
<a href="#">
<div class="card">
<div class="card-body">
<div class="card-top">
<h2>Resume</h2>
</div>
<div class="card-bottom">
<p>I would like to share my resume with whoever it may concern that outlining all the achievements and skills I have achieved.</p>
<button onclick="showResume()">See More</button>
</div>
</div>
</div>
</a>
<div id="resume">
<span class="close" onclick="closeResume()">Close</span>
<main class="container">
<section class="resume-section flex-resume">
<div class="info">
<h1>Alladin Assaf</h1>
<h2>Web Designer - Front-End</h2>
<p>219 Moss Hill Dr Arlington, Tx 76018</p>
<p>Phone: 682-313-3458</p>
<p>Email: alladin.assaf#icloud.com</p>
</div>
<div class="paragraph">
<p>Hello, I am a recent graduate of the University of Texas at Arlington majoring in Communication Technology. I am a well detailed individual and I love using my creativity to develop visually pleasing websites. In my free time I love to play
video games and hang out with friends. </p>
</div>
</section>
<section class="resume-section">
<h2>Education</h2>
<hr>
<ul>
<li>Tarrant County College (2017-2019)</li>
<li>University of Texas at Arlington (2019 - 2021)</li>
</ul>
</section>
<section class="resume-section">
<h2>Skills</h2>
<hr>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>SCSS</li>
<li>JavaScript</li>
<li>Jquery</li>
<li>PHP</li>
</ul>
</section>
<section class="resume-section">
<h2>Certificates</h2>
<hr>
<ul>
<li>Digital Media certificate</li>
</ul>
</section>
</main>
</div>
You can now share your website link and it will first show the card then your resume . You can also hide/show card like adding this to the JS function :
document.getElementsByClassName("card").style.display = "none/block";
respectively
This is my site: http://2helix.com.au/v-04/ It's simple, built with HTML.
Now you can right side navbar. When you click on any link it will show you content. By default all content is hidden.
Now I want to point that section when I click on the link. For example: If I click on social link it's should go to social content section.
I know, If I use this It's should work:
<li><a class="showSingle social" target="1" href="social">SOCIAL</a></li>
<div id="social"></div>
If I do this then page is open on new window.
How can I smoothly go to that section without new window?
Thanks.
Here is my code:
<ul class="nav">
<li>SOCIAL</li>
<li><a class="showSingle" target="2">DIGITAL</a></li>
<li><a class="showSingle" target="3">DESIGN</a></li>
<li><a class="showSingle" target="4">DEVELOPMENT</a></li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<div id="div1 mySocial" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</strong></p>
</div>
</div>
</div>
</div>
</div>
// jQuery code...
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
});
You've a huge number of problems with your basic HTML code that you need to fix before you even look at adding jQuery
You cannot give an element 2 ids. <div id="div1 mySocial" class="targetDiv socialContent"> is not valid. You will need to create a separate element for your anchor e.g. <a id="mySocial"></a>
To link to an anchor you need to use # in the href, e.g. <a href="#mySocial" class="social" >
You cannot use target like that. There are specific values that are allowed and numbers are not any of them. Instead you could use the data-target
Now to what you are trying to do with jQuery...
You are hiding all content except for the one you click on, so there is no scrolling required... see the working example below. What exactly are you trying to achieve?
$(document).ready(function(){
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).data('target')).show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>SOCIAL</li>
<li>DIGITAL</li>
<li>DESIGN</li>
<li>DEVELOPMENT</li>
<li>CONTACT</li>
</ul>
<div class="container content">
<div class="row">
<div class="col-md-12">
<a id="mySocial"></a>
<div id="div1" class="targetDiv socialContent">
<h3 class="left"><span>1</span></h3>
<div class="textContent">
<h1><strong>SOCIAL</strong></h1>
<p>As Social Media becomes more intrinsic in our daily life’s, </p>
</div>
</div>
<a id="digital"></a>
<div id="div2" class="targetDiv">
<h3 class="left"><span>2</span></h3>
<div class=" textContent">
<h1><strong>DIGITAL</strong></h1>
<p>Whethere it's eCommerce, web sites, EDM templates</p>
</div>
</div>
<a id="design"></a>
<div id="div3" class="targetDiv">
<h3 class="left"><span>3</span></h3>
<div class="textContent">
<h1><strong>DESIGN</strong></h1>
<p>Requiremtns for design in social </p>
</div>
</div>
<a id="development"></a>
<div id="div4" class="targetDiv">
<h3 class="left"><span>4</span></h3>
<div class="textContent">
<h1><strong>DEVELOPMENT</strong></h1>
<p>Success in Social is standing out</p>
</div>
</div>
</div>
</div>
</div>
Try to change your jquery code like This:
$(document).ready(function() {
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.content').show();
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
$('html, body').animate({
scrollTop: $('#div' + $(this).attr('target')).offset().top
}, 500);
return false;
});
});
});
Add also this code on click.
jQuery('html').animate({
scrollTop: jQuery(".content").offset().top
});
If you replace
target = "1"
with
data-target = "#social"
then the link will jump down to a div with the id = "social"
<li><a class="showSingle social" data-target="social" href="social">SOCIAL</a></li>
<div id="social"></div>
I have these tabs working with no issues. The only thing is every time I click on each tab the page moves to the top. Is there any way of stopping this?
I have read previous posts and I thought the issue was to do with having <a href="#" so I have removed this. So now it is using data-tab but its still jumping to the top.
$('ul.tabs__list li').click(function(){
var tab_id = $(this).attr('data-tab'), $ct = $(this).closest('.tabs');
$ct.find('ul.tabs__list li.current').removeClass('current');
$ct.find('.tabs__content.current').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
$(window).trigger('resize');
});
HTML
<div class="tabs tabs--hero">
<div class="container">
<ul class="tabs__list clear">
<li class="tabs__list--item ademi caps align-center current" data-tab="panel-1">
Containment strategy
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-2">
Aseptic Systems
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-3">
Standard Systems
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-4">
Mobile Clean Rooms
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-5">
Spare Parts
</li>
</ul>
</div>
<div class="section background--white">
<div class="container">
<div id="panel-1" class="tabs__content current">
<div class="group">
<div class="col4">
<div class="feature">
<h2 class="ademi delta primary caps line line__left line--secondary">Restricted Access Barrier Systems (RABS)</h2>
<p class="beta beta--leading">Our innovative RABS provide protection by delivering a physical and aerodynamic barrier over a critical process zone with easier access to the process in the event when intervention is required and can be used for many applications in a fill finish area.</p>
View Products<i class="icon icon-rounded-arrow-pointing-to-the-right beta"></i>
</div>
</div>
<div class="col8">
<div class="feature__slider">
<ul class="slideshow">
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
<p class="slideshow__caption alpha">Designed to provide an ergonomic and practical alternative More Details</p>
<p class="vertical-text slideshow__vertical-text alpha caps">Cell Therapy</p>
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="panel-2" class="tabs__content">
Aseptic Systems content
</div>
<div id="panel-3" class="tabs__content">
Standard Systems content
</div>
<div id="panel-4" class="tabs__content">
Mobile Clean Rooms content
</div>
<div id="panel-5" class="tabs__content">
Spare Parts content
</div>
</div>
</div>
</div>
I think no problem in your TAB js code. just add e.preventDefault();.
$('ul.tabs__list li').click(function(e){
e.preventDefault();
//code goes here.
}
add to function argument e and inside function write e.preventDefault();
First of all sorry for the vague title, but i didn’t know how to explain my problem in a better way.
Anyway this is what i want. Let’s say we have three tabs: one showing artist list, one showing album list and one showing songs. All this three tabs has selectable lists and i would like to be able, for example, to select and artist, then going to albums (that now should be show all as selected because i checked the artis) and be able to deselect one album and then, for, example, be able to go to songs and manage the songs individually.
Of course then i should be able to retrive the list of all the songs selected by the user.
EDIT 1
added two images to explain better
EDIT 2
Added some code. At the moment i have only HTML and CSS, i'm waiting for your help for the JS code :)
that's the HTML structure
<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
<div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro1">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 1</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro2">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 2</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block-title">Seleziona Album</div>
<div class="list-block media list">
<div class="list-group">
<ul>
<li class="list-group-title">Artist 1</li>
<li id="titoliLibro1">
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 1</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 2</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block-title">Seleziona song</div>
<div class="list-block searchbar-not-found">
<ul>
<li class="item-content">
<div class="item-inner">
CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
</div>
</li>
</ul>
</div>
</div>
Edit 3
It's a phonegap application and yes, already using jQuery (as less as possibile for performance) :)
Now my question: which is the best way to handle this? My only idea is to create an array and update it with all the elements selected and, in order to show an element as selected or not, checking it with indexOf to see if it exist… is this a good way? I’m a bit worried about performance.
Thanks
I am trying to use Angular-Foundation-http://pineconellc.github.io/angular-foundation/ but it does not seem to be working. The sample itself is what I am testing (after I tried it on my own app, and it failed there also.)
Here is the plunker - http://plnkr.co/edit/?p=preview
The problem is when you click the hamburger menu icon it does not display the menu. I am not sure even how to debug the problem to figure out what is wrong. I do know if i remove the mm.foundation service it will begin to work, but then it is only foundation, no more angular directives.
Thanks!
More information found in plunker:
HTML:
<div ng-controller="OffCanvasDemoCtrl">
<div class="off-canvas-wrap">
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">OffCanvas</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" ><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Left Sidebar</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li>Right Sidebar</li>
</ul>
</aside>
<section class="main-section">
<div class="small-12 columns">
<h1>How to use</h1>
<p>Just use the standard layout for an offcanvas page as documented in the foundation docs</p>
<p>As long as you include mm.foundation.offcanvas it should simply work</p>
</div>
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
</div>
Javascript:
angular.module('plunker', ['mm.foundation']);
angular.module('foundationDemoApp').controller('OffCanvasDemoCtrl', function ($scope) {
});