Displaying info from sidebar on the same page - javascript

I am a beginner at this stuff, and right now I am working on a project. To keep it simple, my project right now has a sidebar that has four different options. (Schedule, progress, add course, drop course). I want users to be able to click on this options (after expanding the side bar) and display the information from which ever of the four they clicked on. I want this information to display on the same page, not link to another page. I have done this before by having invisible pages and using a showpage function. This time around though it is coded differently with classes, and I'm not sure how to go about this. Any help is appreciated!
Note: I don't have any data for these 4 pages right now - I just want to set it up so they function right now. To keep it short: I'm asking what code I need and where to display information (Ex: "Here is your schedule") on the same page when Schedule is clicked.
<!doctype html>
<html>
<head>
<title>STUDENT SCHEDULER APP</title>
<link rel="stylesheet" type="text/css" href="ssaStyles.css">
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function() {
console.log("jQuery was loaded");
});
$(document).ready(function() {
function toggleSidebar() {
$(".button").toggleClass("active");
$("main").toggleClass("move-to-left");
$(".sidebar-item").toggleClass("active");
}
$(".button").on("click tap", function() {
toggleSidebar();
});
$(document).keyup(function(e) {
if (e.keyCode === 27) {
toggleSidebar();
}
});
});
</script>
</head>
<body>
<div id="header">
<h1>Welcome!</h1>
</div>
<div class="nav-right visible-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
<main>
<nav>
<div class="nav-right hidden-xs">
<div class="button" id="btn">
<div class="bar top"></div>
<div class="bar middle"></div>
<div class="bar bottom"></div>
</div>
</div>
<!-- nav-right -->
</nav>
</main>
<div class="sidebar">
<ul class="sidebar-list">
<li class="sidebar-item">Schedule
</li>
<li class="sidebar-item">Progress
</li>
<li class="sidebar-item">Add a course
</li>
<li class="sidebar-item"><a href="#" class="sidebar-anchor">Drop a
course</a></li>
</ul>
</div>
</body>
</html>

Its really simple all you have to do is create sections and these sections will be linked to your link, let me show you how.
<html>
<head>
<title>Example</title>
</head>
<body>
<!--create the links but add a # sign before you give them the section names-->
<div class="side-nav">
About
Contact
</div>
<!--Create an id with the same name as the link href source but leave out the # sign-->
<!--this is the about section-->
<div id="about">
<h1>Hello</h1>
</div>
<!--this is the contact section-->
<div id="contact">
<p> done</p>
</div>
</body>
</html>
the name you give your link should be the same as the div id name, and you will have to disable overflow in CSS if you want to....hope it made sense, if you need more help just ask.

Related

How to show a specific div when a link is clicked and hide others?

I want to show only one div when the user clicks the links on the icon bar and hide others. When the user clicks home link of the icon bar only 'hoediv'is visible and others hidden.
My work is below please help!!
<!doctype HTML>
<head>
<div class="main-header-div">
<a id="home" href="" > Home</a>
<a id="about" href=""> About us</a>
</div>
</head>
<body>
<script>
$(function(){
$("#home").click(function(){
$("#homediv").show();
$("#aboutus").hide();
return false;
});
});
</script>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
</body>
</html>
What you need to fix?
Firstly, <head></head> only includes metadata, the rest should be in the <body></body>.
If you're not going to make use <a> anchor tags for hyperlinking, then pass the value href="JavaScript:Void(0);" (The void operator evaluates the given expression and then returns undefined) or better yet, don't use anchor tags better yet span or button.
You didn't import jquery.js in your html file.
You can make this a lot more effecient, but I'd suggest you learn some basic html from the widely available sources and then CSS, Jquery,etc.
Sources to refer:
https://www.w3schools.com/html/html5_intro.asp
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/jquery/default.asp
$(function() {
$("#home").click(function() {
$("#homediv").show();
$("#aboutus").hide();
});
$("#about").click(function() {
$("#homediv").hide();
$("#aboutus").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a id="home" href="JavaScript:Void(0);"> Home</a>
<a id="about" href="JavaScript:Void(0);"> About us</a>
</div>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
If you want to simplify it, you can use classes and data attributes to toggle wanted content:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a class="header-link" id="home" data-toggle="homediv" href="#" > Home</a>
<a class="header-link" id="about" data-toggle="aboutus" href="#"> About us</a>
</div>
<div class="content" id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">
This is my site.
</div>
<div class="content" id="aboutus" style="display:none;">
this is about us page
</div>
<script>
$(document).ready(function() {
$(".header-link").click(function(){
$(".content").hide();
$("#" + $(this).attr("data-toggle")).show();
});
});
</script>

jQuery Plugin Interfering W/ Other Javascript

So I am using a plugin that creates a vertical paging animation.
It basically makes a fullscreen box and moves the "sections" through this box.
Here is the html to help show what I mean.
<div id="fullpage">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
I had a simple javascript function to hide my nav whenever you scroll down. The problem is, with this new plugin, you don't actually scroll down. Sections just move inside a stationary box.
Here is the javascript function I was using for the nav.
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y > 0) {
$('#navBar').addClass('scroll');
}
else{
$('#navBar').removeClass('scroll');
}
});
So the y > 0 doesn't trigger with this plugin anymore so the nav won't hide properly.
I'm thinking there has to be a way to change this simple code a little and make it work. Maybe by using IDs inside the sections possibly?
Here is how my html looks with the general structure from the plugin applied.
<!DOCTYPE html>
<html>
<head>
<title>Aldi Rebrand</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body class="red">
<div id="navBar" class="preHidden">
<img id="navLogo" src="images/navLogo.png">
<ul>
<li class = "navLink mainLink">Work</li>
<li class = "navLink mainLink">About</li>
<li class = "navLink mainLink">Blog</li>
</ul>
</div>
<div id="fullpage">
<div class="section">
<div id="aldiPhoto"></div>
<div id="descriptionAldi">
<h2>ALDI Rebrand <span>BRANDING | LOGO | PRINT</span></h2>
<p class="intro"><strong>ALDI</strong> is an international grocer, spanning from Germany to The United States and many other countries around the world.</p>
<p class="prjctDescription">The premise behind this semester long project was to immerse ourselves in the company/brand we were assigned. I was assigned ALDI. In this scenario, the goal of the rebrand was to convey a new “fresh and local” side to ALDI and their proposed farmers market addition to their stores. We were asked to create a brand new logo, at least four pieces of collateral and a brand guideline to demonstrate our research, branding applications and flexibility.</p>
<div class="btnDiv">
<div class="btn1"><p>VIEW ON DRIBBBLE</p></div>
<div class="btn2"><p>VIEW ON BEHANCE</p></div>
</div>
</div>
</div>
<div class="section">
<div id="aldiPage2"></div>
</div>
<div class="section">
<div id="aldiPage3"></div>
</div>
</div>
<div class="ticker"><p class="currentPage">1</p><div class="tickerBtm"><p class="maxPage">3</p></div></div>
</body>
</html>
And here is a jsfiddle of this page: https://jsfiddle.net/L0h1uxLo/1/
You can use the onLeave event to get the scrolled index value and toggle the class scroll.
$('#fullpage').fullpage({
onLeave: function (anchorLink, index, slideIndex, direction) {
//console.log(index);
if (index > 1) {
$('#navBar').addClass('scroll');
} else {
$('#navBar').removeClass('scroll');
}
}
});
Fiddle Demo

.slideToggle() is being triggered many times?

I'm trying to create a Tumblr theme in which the links and post information slide in when you click a + sign. (My test blog is at http://noitsnotitsnotokay.tumblr.com/)
I'm quite the begginner at JavaScript, but I was able to work it out for a links menu with the following code:
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").slideToggle("slow");
});
</script>
But I also have a piece of code that applies to all posts, for the post information. I used nearly the same code, but, as you can probably see, it slides in and out various times.
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").slideToggle("slow");
});
</script>
It seems that the button's order and the way I name the classes in the JavaScript isn't changing much...any tips?
If you you don't want to open all the '.pstinfo' elements when you click on '.plsign', just the related one, try this code:
HTML:
<div class='parentContainer'> <!--put your elements in a parent Container -->
<div class='info'>
Info 1
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 2
</div>
<div class='plsign'>
+ Open
</div>
</div>
<div class='parentContainer'>
<div class='info'>
Info 3
</div>
<div class='plsign'>
+ Open
</div>
</div>
JS:
$(".plsign").on('click',function ()
{
$(this).parent().find('.info').slideToggle("slow");
});
Link to jsFiddle
code block 01
<span class="btn">+</span>
<ul class="lks">
<!-- various links are here -->
</ul>
<script>
$("ul.lks").hide();
$("span.btn").click(function () {
$("ul.lks").stop().slideToggle("slow");
});
</script>
Code block 02
<div class="pstinfo">
<!-- info is here -->
</div>
<span class="plsign">+</span>
<script>
$("div.pstinfo").hide();
$("span.plsign").click(function () {
$("div.pstinfo").stop().slideToggle("slow");
});
</script>
Try this code and Update the result :)

Call jquery "parse/format" html function

I have a simple html page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.2">
<link rel="stylesheet" href="js/jquery.mobile-1.2.0.css" />
<script src="js/jquery-1.8.2.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div id="c">
<div data-role="page">
<div data-role="header">
<h1> My Title </h1>
</div>
</div>
</div>
</body>
</html>
when the page loads this is how jquery "parses/formats" the body of that html:
<body>
<div id="c" class="ui-mobile-viewport ui-overlay-c">
<div data-role="page" data-url="/jqueryMobile/TC_Page/main.html" tabindex="0" class="ui-page ui-body-c ui-page-active"
style="min-height: 1464px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">
My Title
</h1>
</div>
</div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
<span class="ui-icon ui-icon-loading"></span>
<h1>
loading</h1>
</div>
</div>
</body>
Note that tags have new attributes. Now my question is how can I know what function of jquery mobile library is doing that? I will like to call the method that is doing that!
The reason why I will like to call that method is because I replace the content of div id 'c' with ajax and the page does not render as I want it to. In other words doing:
$.ajax({
url: 'someUrl',
success: function (result) {
/*
result = "content of first example" =
<div data-role="page"><div data-role="header"><h1> My Title </h1></div></div>
*/
$('$c').html( result );
// I will like to call here something like: $('#c').RrenderHtml();
}
});
does not renders as I want it to. The reason why it not renders correctly is because the tags in the div id c does not have the attributes that jquery created on them when the page loads.
A solution to this problem will be return:
<div data-role="page" data-url="/jqueryMobile/TC_Page/main.html" tabindex="0" class="ui-page ui-body-c ui-page-active"
style="min-height: 1464px;">
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">
My Title
</h1>
</div>
</div>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
<span class="ui-icon ui-icon-loading"></span>
<h1>
loading</h1>
</div>
Instead of:
<div data-role="header">
<h1>
My Title
</h1>
</div>
On the ajax call. The problem with that solution is that I will have to figure out how each response will be formated on a new page by jquery when the page loads. Also some responses I am creating them dynamically like tables. Maybe I could create an iFrame place the jquery libraries in there also the response from the ajax call in the body wait for the page to load and then finally take the end resoult Hope I explained my self correctly.
You don't need to know the methods. There is already a method provided to enhance injected pages and it's:
.trigger('create')
More on this here:
http://jquerymobile.com/demos/1.2.0/docs/pages/page-dynamic.html
http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html

How do I attach a click event to all div's assigned to a certain class name?

I don't know anything about jquery so yeah. I just want so that when you click the "image-url" divs they set the "src: component to the img tag and have the image appear upon clicking. Really appreciate the help.
the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CIS 230 Fall 2012</title>
<link rel="stylesheet" type="text/css" href="midterm.css" />
<script type="text/javascript" src="labs/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.image-url').click(function() {
$("#image").attr("src", $(this).attr("val"));
$("#image").attr("hidden", "false");
});
})();
function imageload(ls) {
document.getElementById("image").src = "../images/" + ls;
}
</script>
</head>
<body>
<div id="header"><div style="float:left; width:40%;"></div><div style="float:right;"></div><h1 class="title">CIS 230</h1>
</div>
<div id="content">
<div id="links">
<div id="link-holder">
<h3>Labs:</h3>
<div class="url">xhtml 1</div>
<div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 1</div>
<div class="url" onmouseover="hover(this)" onmouseout="leave(this)">css lab 2</div>
<div class="url">css lab 3</div>
<div class="url">css lab 4</div>
<div class="url">author page</div>
<div class="url">dog fish</div>
<div class="url">rounded corners</div>
<div class="url">div columns</div>
<h3>Images:</h3>
<div id="image-link-holder">
<div class="image-url" val="me.jpg">Beautiful Me</div> //so they click this
<div class="image-url" val="monster.jpg">Godzilla</div>
<div class="image-url" val="bandw.jpg">Black and White</div>
<div class="image-url" val="duocolor.jpg">DuoColor</div>
<div class="image-url" val="washed.jpg">"Washed" Look</div>
<div class="image-url" val="fade.jpg">Faded</div>
</div>
</div>
<div id="image-holder" style="min-width:400px; background-color:#000000;" hidden="true">
<img id="image" src="" alt="No Image Specified" /> //and my mug shot will appear hopefully
</div>
<div id="links-spacer1" style="min-width:400px; min-height:300px"></div>
</div>
<div id="about">
<h1>Web Design and Development:</h1>
<h2>We cover a lot of things:</h2>
<p>We first review basic HTML and cover CSS styles</p>
<p>Labs made:
<ul>
<li>css lab 1</li>
<li>css lab 2</li>
<li>css lab 3</li>
<li>css lab 4</li>
</ul>
</p>
<p>Once we have the basics down we can cover some more advanced styling. Especially using the &amp<div></div>& tags
</p>
<p>Labs made:
<ul>
<li>sunny.html</li>
<li>dogfish</li>
<li>columns</li>
</ul>
</p>
<p>Then We move onto the graphical component of web design, where we mess around with photoshop</p>
<p>Labs made:
<ul>
<li>monster.jpg</li>
<li>duocolor.jpg</li>
<li>other stuff...</li>
</ul>
</p>
</div>
</div>
<div id="footer">
<p id="disclaimer">This webpage is the work of a student. It is not associated with the SUNY Onondaga Community College. The author of this web page is Jason Dancks, and generated with Dreamweaver. If you think this asshole might have stolen your intellectual property, email him or contact his professor or call him at: (315) 498- 2326</p>
</div>
</body>
</html>
$('.image-url').on('click', function() {...});
You should read up on jQuery selectors.
Edit
Your example already has a valid selector in it. Is it not working? Perhaps it cannot find your jQuery library?
You want to take the value of attribute "val" for the image you click, and replace the 'src' attribute of the img tag with class "image" with the value: here's how you do that.
$('.image-url').on('click', function(){
var img_url = $(this).attr('val');
$('#image').attr('src', '/images/' + img_url).parent().attribute('hidden', false);
});
Happy coding! :)

Categories