We Keep Coding

How can I update url with hashchange within tabs by using Javascript

I would like to get my page to display the current tab in the URL, please keep in mind I'm still learning, so my coding skills are not the greatest. I would normally use PHP for this, but I've been asked to stick to Javascript/JQuery.
So far, I've managed to get my tabs to display content dynamically within a div by using a simple script.
This is my index bit:
<div class="row">
<div class="col-md-3 col-lg-3">
<div class="custom-left-tabs -text--uppercase">
<div class="custom-left-tabs-btn hidden-lg hidden-md">
Menu<i class="fa fa-angle-down"></i>
</div>
<ul id="lefttabs" class="list-unstyled collapse">
<li class="sub-heading">Getting Started</li>
<li><a data-toggle="tab" href="pages/first.html">First</a></li>
<li><a data-toggle="tab" href="pages/second.html">Second</a></li>
</ul>
</div>
</div>
<div id="content" class="tab-content col-lg-9 -bg--white -padding--m">
</div>
</div>
This is my script:
$(document).ready(function(){
$("#content").load("pages/first.html");
});
$("li").find('a').click(function(){
var page = $(this).attr('href');
$("#content").load(page);
return false;
});
Ideally I would prefer not having all content chucked into one page. I've checked many similar questions/videos, but I can't really find the missing bit.
My question is really how should I write a script that does this extra bit of displaying the current tab on the URL.

Here this thing can be done using iframe which works well,
but as you suggested i have tried it. here is my code.
reference same as you gave before.
Now i am showing code here
use js in this manner:
<script src="jquery.min.1.4.js"></script>
<script src="jquery.blockUI.js"></script>
<script>
$(function(){
$("#tabs a").click(function(e){
$("#tabs li").removeClass("on");
$(this).parent("li"). addClass("on");
var page = this.hash.substr(1);
$("#content_wrapper").block();
$.get(page+".html",function(html){
$("#content").html(html);
$("#content_wrapper").unblock();
});
});
});
</script>
and html code with "<div>" tag.
<ul id="tabs">
<li>TAb1</li>
<li>TAb2</li>
</ul>
<div id="content_wrapper">
<div id="content">
</div>
</div>
i have also used jquery.min.js and blocjUI.js and css
css code is here
<style>
ul {
margin:0px;
padding:0px;
overflow:hidden;
}
li {
float:left;
list-style:none;
padding:10px;
background-color:#333;
border: 1px solid #ccc;
}
li a {
color: #FFF;
text-decoration:none;
font-family:arial;
}
#content_wrapper {
width:400px;
height:300px;
background-color: #ccc;
margin: 0px;
padding:6px;
overflow: hidden;
}
#content {
font-family: arial;
}
li.on {
background-color:#ccc;
}
li.on a {
color:#333;
}
and you will get two different page in one page.
Scrren1:
screen2:

Hide (and show) links when div is dynamically resized

I am trying to resize a div when a user decides to hide (or show) particular content. For example, I have a contents page (https://jsfiddle.net/4b1g5jp9/1/), when a user clicks hide, I want the div to resize accordingly, hiding all contents except the actual Contents title.
Also, the 'Show' link should only show if the content is actually hidden and vice versa.
I have tried to adapt some JS based on a similar issue I found online and tried the following approach:
<script language="javascript">
function toggle() {
var ele = document.getElementById("contents-list");
if (ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
But the above achieves nothing. Any advice/solution would be appreciated.

By using the event's target we can determine what to show/hide.
If we do it that way, we can use this multiple times on a single page without it messing with each other.
Also, I've used toggle() which basically does the if() you had in your code statement for you.
https://jsfiddle.net/jkrielaars/qhb8ccob/1/
$(document).ready(function() {
$('.toggle').click( function(event) {
$(event.target).parents('.contents-list').find('ul').toggle();
var newText = $(event.target).text() === '[Hide]' ? '[Show]' : '[Hide]';
$(event.target).text(newText);
});
});
.contents-list{
width: 300px;
background-color: #f4f6f9;
padding: 15px;
border: 1px solid #b3b4b5;
}
.contents-list ul{
list-style-type: none;
margin: 0;
padding: 0;
font-size: 14px;
}
#contents-list ul li{
text-decoration: none;
}
.contents-list ul li a{
padding-bottom: 2px;
text-decoration: none;
}
.contents-list a:visited {
text-decoration: none; color:blue;
}
.contents-list ul li a:hover{
text-decoration: underline;
}
.centerContents{
text-align: center;
}
.toggle{
font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents-list">
<div class="centerContents"><b> Contents </b>
<a class="toggle" href="#hideContents">[Hide]</a>
</div>
<br/>
<ul>
<li> 1. What is Mobility? </li>
<li> 2. Why Mobility is important </li>
<li> 3. Other </li>
</ul>
</div>
<div class="contents-list">
<div class="centerContents"><b> Contents </b>
<a class="toggle" href="#hideContents">[Hide]</a>
</div>
<br/>
<ul>
<li> 1. What is Mobility? </li>
<li> 2. Why Mobility is important </li>
<li> 3. Other </li>
</ul>
</div>

Use that structure as your HTML:
<div id="contents-list">
<ul>
<li id="centerContents"><b> Contents </b>
<a class="hideLinks" href="#">[Hide]</a>
<a class="showLinks" href="#">[Show]</a>
</li>
</ul>
<ul class="submenu">
<li> 1. What is Mobility? </li>
<li> 2. Why Mobility is important </li>
<li> 3. Other </li>
</ul>
</div>
Using jQuery:
<script type="text/javascript">
$("#contents-list ul li a.hideLinks").click(function(){
$("ul.submenu").css("display", "none");
});
$("#contents-list ul li a.showLinks").click(function(){
$("ul.submenu").css("display", "block");
});
</script>
Your jQuery script should be right after the HTML, or near the </body> tag. And make sure to call jQuery cdn inside head tag: <script src="jquery-3.0.0.min.js" type="text/javascript"></script>.
NOTE: You can use Show() and Hide() functions instead of css display properties. You can read more about those functions Here.

Toggle div using javascript

I'm trying to use this jsfiddle but it's not working offline. Can you please point out the error: http://jsfiddle.net/2ofkr7ph/
This is my code but it's not working on local.
<html>
<head>
<title>BUILD</title>
<style>
.menu > li {
display:inline-block;
font-weight:bold;
padding:6px 10px;
cursor:pointer;
border:2px solid tomato;
margin:5px;
}
.container {
border:2px solid black;
margin:5px;
}
.container > div {
display:none;
}
.container > div:first-child {
display:block;
}
</style>
<script>
var menu_elements = document.querySelectorAll('.menu>li'),
menu_length = menu_elements.length;
for (var i = 0; i < menu_length; i++) {
menu_elements[i].addEventListener('click', function (e) {
var target = document.querySelector('.container>.' + e.target.classList[0]); // clicked element
Array.prototype.filter.call(target.parentNode.children, function (siblings) {
siblings.style.display = 'none'; // hide sibling elements
});
target.style.display = 'block'; // show clicked element
});
}
</script>
</head>
<body>
<ul class="menu">
<li class="toggle1">One</li>
<li class="toggle2">Two</li>
<li class="toggle3">Three</li>
<li class="toggle4">Four</li>
<li class="toggle5">Five</li>
</ul>
<div class="container">
<div class="toggle1">Here are the contents of 1.</div>
<div class="toggle2">Here are the contents of 2..</div>
<div class="toggle3">Here are the contents of 3...</div>
<div class="toggle4">Here are the contents of 4....</div>
<div class="toggle5">Here are the contents of 5.....</div>
</div>
</body>
</html>
It's working fine on JSFiddle website, but not working on local machine.

The script is loaded and executed BEFORE the HTML elements are encountered. You can move the script to below the BODY tag and it works offline.
Good Luck!

Just add the script at the end of your , and then it'll work fine.

The contents inside the script tag need to be placed in some kind of function and the function needs to be called when the body loads, or else they won't run properly. Place all your Javascript code inside a load function like this:
<script>
function load() {
// rest of the code..
}
</script>
and then set the function to be called when the document loads:
<body onload="load()"> ...
Everything should then work properly.

The problem is not with your java script it is with the fact that you are writing your java script before your html.
This does not give JS enough time to load your html
An easy fix for this is to move your JS to the bottom or use something like document.ready()

I've changed Your code part with jQuery and it's sugar. It's more cross-browser solution and saves You time.
Use this:
<html>
<head>
<title>BUILD</title>
<style>
.menu > li {
display:inline-block;
font-weight:bold;
padding:6px 10px;
cursor:pointer;
border:2px solid tomato;
margin:5px;
}
.container {
border:2px solid black;
margin:5px;
}
.container > div {
display:none;
}
.container > div:first-child {
display:block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('.menu>li.toggle').click(function(){
$('.togglable').hide();
$('.togglable[data-id="'+$(this).data('id')+'"]').show();
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="toggle" data-id="1">One</li>
<li class="toggle" data-id="2">Two</li>
<li class="toggle" data-id="3">Three</li>
<li class="toggle" data-id="4">Four</li>
<li class="toggle" data-id="5">Five</li>
</ul>
<div class="container">
<div class="togglable" data-id="1">Here are the contents of 1.</div>
<div class="togglable" data-id="2">Here are the contents of 2..</div>
<div class="togglable" data-id="3">Here are the contents of 3...</div>
<div class="togglable" data-id="4">Here are the contents of 4....</div>
<div class="togglable" data-id="5">Here are the contents of 5.....</div>
</div>
</body>
</html>

Weird bug on my javascript showhide code

I got this show all thing succesfully done, but now when I click Show all and then click the text or image that opens, it puts the text below to right side of the screen.
JSFiddle
Gyazo
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function () {
$('.toggle-all').click(function() {
$('.printer').each(function () {
$(this).siblings('.gwinfo').slideToggle('slow');
});
});
});
</script>
<style>
.gwinfo {
display: none;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.left{
display: block;
float:left;
width:10%;
}
</style>
General: Rest of code in JSFiddle, feel free to fix some of my code, I would appreciate that a lot. Also if you manage to fix my code, please post a JSFiddle link with fixed code. Thank you a ton, guys!

Instead of using the break tag to clear your floats, use a div. I also fixed some tags that were not properly nested.
<div style="clear: both;"></div>
http://jsfiddle.net/z2tSd/5/

Guess the tags are mis-matched.. Can you change your HTML to the one as below:
<div class="gwshowhide">
<li><a class="printer">Money Printer</a>
<div class="gwinfo">Level Requirement: 1
<br>Price: $1000
<br>Production:
<br>
<img src="images/shop/Amber Money Printer.png">
</div>
</li>
</div>
The existing one's are like where <li> tags are mismatching:
<div class="left">
<div class="gwshowhide">
<li><a class="printer">Money Silo</a>
<div class="gwinfo">Level Requirement: 85
<br>Price: $10,000
<br>Production:
<br>
<img src="images/shop/Diamond Money Silo.png">
</div>
</div>
</li>
</div>
Not sure if this will fix your issue though.. but you can give a try..
Also make sure you are suppressing the bullet list items using the style below:
.gwshowhide {
list-style:none;
}

Jquery UI Draggable revert from outside of window

Probabely this is a very simple question but i am a beginner in Jquery...
I have following Script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">/script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js">
</script>
<script>
$(function() {
$('li').draggable({
containment: 'document',
revert: true
});
$("#config").droppable({
drop: function(event, ui) {
$(ui.draggable).appendTo( "#schub" );
}
});
});
</script>
And this is what my Body contains:
<div style="width:1800px; height:600px; background-color:#efefef;padding:10px;" >
<div style="float:left; width:1250px; height:580px; border:1px solid grey; padding:10px;" >
<div id="config" style="background-color:blue; border:1px solid black; width:700px; height:500px;">
<ul id="schub" style="width:300px; height:500px;"></ul>
</div>
</div>
<div style=" background-color:red;float:left; width:490px; height:580px; border:1px solid grey; margin-left:10px;padding:10px;" id="menu">
<ul class="category">
<li class="dragg" style="background-color:#e6e6e6; border:1px solid black; width:150px; height:98px;">
</li>
<li class="dragg" style="background-color:#e6e6e6; border:1px solid black; width:150px; height:98px;">
</li>
<li class="dragg" style="background-color:#e6e6e6; border:1px solid black; width:150px; height:98px;">
</li>
</ul>
</div>
Now my issue: I want to be able to drag the grey <li> from the red <div> into the blue <div>. It actually works but the grey <li> are always reverting from outside of the window into the blue <div> when i drop them. Why is that happening?? Isnt it posible that my <li> revert from where i drop them?
Thanks very much for your help!

I think i found the solution:
The problem is, that the <li> is getting appended to the new <ul> in the blue div with the css style he has before ge got appended.
After dropping the <li> into the new <ul id="schub">, it has still the css from Jquery which is about left:-1000px; (it gets that because we drag the <li> from right to left). Then its getting appended to the new ul.
The browser thinks that the <li> is en element of the <ul id="schub"> with left:-1000px; which is outside of the window. The definition revert:true; is set on the <li> so it is reverting from outside of the window into the <ul id="schub">.
I actually didn't find a solution, but a workaround:
We can add the definition helper: 'clone' to the <li>. Like that we get a clone of the original. Its actually not reverting from the point we drop it but its getting appended to the new <ul> without reverting from outside of the window.