How can I update url with hashchange within tabs by using Javascript - 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:

Related

Why my JavaScript don't works on localhost? [duplicate]

This question already has answers here:
Why is this jQuery click function not working?
(9 answers)
Why document.ready is used in jQuery
(4 answers)
Closed 3 years ago.
In codepen https://codepen.io/mkliver/pen/oKbENd i got working script.
When i copy this code on my localhost nothing works. My code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Welcome to Foundation</title>
<link rel="stylesheet" href="stylesheets/collapsable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
$('.tree .question').click( function() {
$(this).parent().toggleClass('expanded').
closest('li').find('ul:first').
toggleClass('show-effect');
});
</script>
</head>
<body>
<ul class="tree">
<li class="tree__item hasChildren">
<span>
<div class="icon"></div>
<a class="question">Question 1</a>
</span>
<ul>
<li>
<span>Everything I seem to investigate lately seems to present itself with an annoying bug/feature in various browsers. Last time it was the inconsistency between browsers and generated content on form elements.</span>
</li>
</ul>
</li>
</ul>
</body>
collapsable.css same as on codepen.
What can be wrong?
Try moving the <script> to just before </body> or wrapping it in an additional $(), which is jQuery's shortcut for $(document).ready()
You must put your script right before the body tag close. The problem that was being caused is because the script is being loaded before the actual elements being selected and manipulated.
Hope this helps!
Here is a minimal index.html file to open in a local browser, my guess is because you didn't use jQuery's $('document').ready() function, and didn't include the script at the bottom, it tried to apply your callback function to an empty DOM.
index.html
<style>
body {
font-family: Helvetica, sans-serif;
font-size:15px;
}
a {
text-decoration:none;
}
ul.tree, .tree li {
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
.tree ul {
display:none;
}
.tree > li {
display:block;
background:#eee;
margin-bottom:2px;
}
.tree span {
display:block;
padding:10px 12px;
}
.icon {
display:inline-block;
}
.tree .hasChildren > .expanded {
background:#999;
}
.tree .hasChildren > .expanded a {
color:#fff;
}
.icon:before {
content:"+";
display:inline-block;
min-width:20px;
text-align:center;
}
.tree .icon.expanded:before {
content:"-";
}
.show-effect {
display:block!important;
}
</style>
<body>
<div class="row">
<div class="twelve columns">
<div class="row">
<div class="eight columns">
<ul class="tree">
<li class="tree__item">
<span>
Вопросы
</span>
</li>
<li class="tree__item hasChildren">
<span>
<div class="icon"></div>
<a class="question" href="#">Вопрос 1</a>
</span>
<ul>
<li>
<span>Everything I seem to investigate lately seems to present itself with an annoying bug/feature in various browsers. Last time it was the inconsistency between browsers and generated content on form elements.</span>
</li>
</ul>
</li>
<li class="tree__item hasChildren">
<span>
<div class="icon"></div>
<a class="question" href="#">Вопрос 2</a>
</span>
<ul>
<li>
<span>So I soldiered on and came up with a pretty decent attempt, and remember folks I’m not a designer so be kinder this time with design critiques all I’m doing is showing you how to do the technique ;). With that out of the way let’s dig into the inner workings and road blocks I faced.</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
$('.tree .question, .icon').click( function() {
$(this).parent().toggleClass('expanded').
closest('li').find('ul:first').
toggleClass('show-effect');
});
</script>
</body>

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;
}

CSS How to use margins with different divs

Edit: Added Javascript and Masonry tags. I've been looking at masonry and all my modules are the same size so I'm not sure how masonry can help me as I'm not trying to get different size elements to line up. I'm still looking through masonry tutorials as it's a little confusing at the moment. If this is the fix I apologize for adding the additional tags.
I'm creating three divs offline, issues, and then go. I'm taking what I'm calling modules and placing them within these three divs. When I place more than 3 modules they create another row. Unfortunately my titles don't move with the modules and I have to manually go in and change the margin-top to line everything up. I'm not sure how to make it to where the issue rows will change based on how many modules are in there. Any help would be greatly appreciated.
<div class="grid_17">
<div id="offlinetitle">
<p>System is Offline</p>
</div>
<div id="issuestitle">
<p>System is partially offline or experiencing issues</p>
</div>
<div id="issuescontents">
<a href="#" class="big-link" data-reveal-id="AccessModal" data-animation="none">
<div class="grid_3">
<p id="contexttitle">Access</p>
<p id="accesssubmenu">Last Update: 08/30/2013 5:00pm</p>
</div>
</a>
<div id="AccessModal" class="reveal-modal">
<h1>Access</h1>
<p>This is text to describe something>
<p4>Last Update: 08/30/2013 5:00pm</p4>
<a class="close-reveal-modal">×</a>
</div>
</div>
<div id="gotitle">
<p>All systems go</p>
</div>
</div>
My CSS is as follows grid 17 is the parent container that everything is in then the last container is the actual modules.
.grid_17{
}
#offlinetitle{
color:#FFF;
font-size:25px;
background:#F00;
height: 35px;
text-decoration:none;
list-style:none;
}
#issuestitle{
color:#FFF;
font-size:25px;
background:#FC0;
height: 35px;
text-decoration:none;
list-style:none;
margin-top:15px;
}
#gotitle{
color:#FFF;
font-size:25px;
background:#093;
height: 35px;
text-decoration:none;
list-style:none;
margin-top:535px;
}
.container_24 .grid_3 {
width: 213px;
background:#CCC;
height:55px;
margin-top:10px;
}
If more information is needed please let me know. Thank you for your help!
You need to wrap each "module" (title and contents) in it's own div and then float this parent div to the left. Something like this:
<div class="grid_17">
<div>
<div id="offlinetitle">...</div>
</div>
<div>
<div id="issuestitle">...</div>
<div id="issuescontents">...</div>
</div>
<div>
<div id="gotitle">...</div>
</div>
</div>
With CSS similar to:
.grid_17 { width: 300px; }
.grid_17 > div { float: left; width: 100px; height: 100px; }
Note about clearfix: If you display anything after the grid_17 div, you'll also need to clear the float. I won't go into depth here, but you might want to look up the clearfix class.

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.

Categories