Javascript for opening tabs using links - javascript

The below tabs works fine with external js file.How to add the links so that when the user click the link www.ll.com/#comments ,he will see the comments..tab
http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js
<ul id="countrytabs" class="shadetabs">
<li>Tutorial</li>
<li>Comments</li>
</ul>
<div class="contentbox">
<div id="movies" class="tabcontent">
Download movies here
</div>
<div id="comments" class="tabcontent">
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>

Try this, after countries.init():
var tagIndex = window.location.toString().indexOf('#');
if (tagIndex >= 0)
countries.expandit(window.location.toString().substring(tagIndex).toLowerCase());
EDIT: You had a few problems in the example code you provided (You did not wait for the document onload event. You did not follow the naming-conventions of the A links as on the ddtabcontent documentation site, ...)
I have created this example to test its functionality:
<html>
<head>
<script type="text/javascript" src="tabcontent.js"></script>
<script type="text/javascript">
function onload()
{
var countries = new ddtabcontent("countrytabs");
countries.setpersist(true);
countries.setselectedClassTarget("link");
countries.init();
var url = window.location.toString();
var tagIndex = url.indexOf('#');
if (tagIndex >= 0)
countries.expandit(url.substring(tagIndex).toLowerCase());
}
</script>
<style type="text/css">
div.tabcontent
{
display: none;
}
</style>
</head>
<body onload="onload()">
<ul id="countrytabs" class="shadetabs">
<li>Movies</li>
<li>Comments</li>
</ul>
<div class="contentbox">
<div id="movies" class="tabcontent">
Download movies here
</div>
<div id="comments" class="tabcontent">
Put comments here
</div>
</div>
</body>
</html>

Related

Displaying info from sidebar on the same page

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.

appending images to a div jquery

I have div container, that holds 4 more divs and each of these divs have a header, image and a paragraph tag. What I am making is a game, where when I click on one of the divs, images, the remaining 3 images that were not clicked move to the move to another div section with a class of "enemies". How would I do this without having a bunch of onclick functions for each character?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 4 Game</title>
<link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Added link to the jQuery Library -->
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src = "assets/javascript/game.js"> </script>
</head>
<body>
<div class = "characters">
<div class="charContainer">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer1">
<h2 id="c2"></h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer2">
<h2 id="c3"></h2>
<img class="obi" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer3">
<h2 id="c4"></h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
</body>
</html>
jQuery
$(document).ready(function(){
$('#c1').text("Darth Vader");
$('#c2').text("Luke Skywalker");
$('#c3').text("Obi Won");
$('#c4').text("Darth Maul");
var health = $('#c1hp').data('hp');
$('#c1hp').html(health);
var health = $('#c2hp').data('hp');
$('#c2hp').html(health);
var health = $('#c3hp').data('hp');
$('#c3hp').html(health);
var health = $('#c4hp').data('hp');
$('#c4hp').html(health);
$('.charContainer').on('click', function(){
var yourCharacter = $(this);
$('#your').append(yourCharacter);
});
});
I am trying to move anyone of the <div>s .charContainer, .charContainer1, .charContainer2, .charContainer3 including the header, <img> and <p> tag inside of it to the <div> with id #your.
Update: I found a solution by doing a .each function for the charContainer. Instead of having 4 different charContainers, I just all named them the same class and in the .each function, for each of these classes that did not get appended to the chosen character box, i added a class called .foes, so that I can now differentiate between divs that have been "selected" and those that have not.
I believe your error was that you have different classes for "charContainer" (1,2,3,4). In your case the event should look like
$('.charContainer, .charContainer1, .charContainer2, .charContainer3').on('click', function(){
Also the way you do it - you will add multiple characters clicking on them one after another. How about this:
$(function() {
$('.charContainer').on('click', function(){
var yourCharacter = $(this);
$('#your').empty().append(yourCharacter.clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "characters">
<div class="charContainer">
<h2 id="c1">Darth Vader</h2>
<img class="vader" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer">
<h2 id="c2">Luke Skywalker</h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer">
<h2 id="c3">Obi Wan</h2>
<img class="obiwan" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer">
<h2 id="c4">Darth Maul</h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
</div>

Hide all divs that contain an element inside

I have three divs with same class, inside theses divs I have others divs with two different class:
<div class="TotalResults">
<div class="resultPassed"></div>
</div>
<div class="TotalResults">
<div class="resultPassed"></div>
</div>
<div class="TotalResults">
<div class="resultError"></div>
</div>
I would like to hide all divs that have class="resultPassed" inside him. how can I do this with javascript or jquery?
This should work :
$('.resultPassed').parent().hide()
Try it :
$("div").has(".resultPassed").hide();
Final code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="TotalResults">
<div class="resultPassed">I am resultPassed</div>
</div>
<div class="TotalResults">
<div class="resultPassed">I am resultPassed</div>
</div>
<div class="TotalResults">
<div class="resultError">I am not resultPassed</div>
</div>
<button class="btn">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").on("click",function(){
$("div").has(".resultPassed").hide(1000);
})
})
</script>
</body>
</html>
In Jquery -
$('.resultPassed').parent().hide() will change the display to none.
In pure JS -
var arr = document.getElementsByClassName("resultPassed");
for (var i = 0; i < arr.length; i++) {
arr[i].parentNode.style.display = "none";
}

Refresh a div without a full page been refreshed?

Is it possible to refresh a div on a click of a button and not auto refresh?
Once I've printed #print-container I would like to refresh #print-container to its original state without refreshing the whole page.
<body onLoad="renderTime();">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4" id="printarea" >
<div id="print-container">
<div class="item"></div>
<div class="total"></div>
</div>
</div>
<div class="col-xs-8">
<ul class="final">
<li class="remove"><input type="submit" value="Remove Last" class="print-btn remove-item"></li>
<li class="remove"><input type="submit" value="Refresh" class="print-btn" data-corners="false" id="submit" onclick="refresh()"></li>
</ul>
<hr />
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="content">
<ul class="sub-menu">
<li><button class="menu item1">Item 1</button></li>
<li><button class="menu item2">Item 2</button></li>
</ul>
</div>
<!--END BEER-->
</div><!--end box-->
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(".menu a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).fadeIn(5);
});
</script>
<script type="text/javascript">
//add item
$('.item1').click(function(){
$('<div class="delete">Item 1 - <span class="skill"> 840</span></div><br />').appendTo('.item');
counter();
});
$('.item2').click(function(){
$('<div class="delete">Item 2 - <span class="skill"> 910</span></div><br />').appendTo('.item');
counter();
});
</script>
<script type="text/javascript">
var counter = function() {
var total = 0;
$(".skill").each(function() {
total += + parseInt($(this).text() , 10);
});
$('.total').text('Total: \u0E3F' + total);
};
</script>
<script type="text/javascript">
function refresh() {
setTimeout(function () {
location.reload()
}, 100);
}
</script>
</body>
If your div is loaded from an external source (doesn't matter if it's on the same server or not) you can use the jQuery function load() to "refresh" the div.
For example - if your div loads some content from the file content.html, then you can use jQuery to reload the div's content:
$("#button-id").click(function() {
$("#div-id").load("content.html");
});
It's as simple as that!
Here's a simple plugin that caches div content inside it's own attribute, and reverts back on event
(function($, window){
var nodes = $('[reload]'); // all <div reload=""/> elems
var serializer = new XMLSerializer(); // serializer
nodes.each(function(){ // iterate over all elems
var domStr = serializer.serializeToString($(this)[0]); //serialize html to str
$(this).attr('cache', domStr.replace(/\n/g, '')); // remove new-line
$(this).click(function(){ // event
$(this).html($(this).attr('cache')); // restore content of div
});
});
// demoPurpose: modify div, add attribute(style), change text
$('#style').click(function(){
$(nodes[0]).children().first().css('color', randomColor());
$(nodes[0]).children().last().css('color', randomColor());
$(nodes[1]).children().first().css('color', randomColor());
$(nodes[1]).children().last().css('color', randomColor());
$(nodes[1]).children().last().text(Date.now());
});
// demoPurpose: simple random colorizer
function randomColor(){
var colors = ['red', 'blue', 'green', 'yellow', 'black', 'pink'];
return colors[Math.floor(Math.random() * colors.length)];
}
})(jQuery, window);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div reload="">
<h1>h1</h1>
<p>p</p>
</div>
<hr />
<div reload="">
<h1>another h1</h1>
<p>with dummy p</p>
</div>
<hr />
<p><button id="style">style</button><small>Click on button to change div</small></p>
<p><small>Click on div to reload it's content</small></p>
Although it might seem quite heavy, this should help you to understand the idea behind

Why does my javascript-code to hide/show div-boxes not work?

I'm trying to hide/show the main-contentholders on my website based on what menu-option the reader clicks on. This seems like a simple thing to me, I've done it multiple times before but now it just won't work. My code looks like this:
<!DOCTYPE html>
<html>
<head>
<title id="titel">Mercedes F1</title>
<link rel="stylesheet" href="mercedes.css">
<meta name="viewport" content="width=device-width; initial-scale=1">
<script>
function sidbyte(p){
var p;
if(p == 1) {
document.getElementById("forare").style.display = "block";
document.getElementById("mercedes").style.display = "none";
document.getElementById("statistik").style.display = "none";
}
else if(p == 2) {
document.getElementById("forare").style.display = "none";
document.getElementById("mercedes").style.display = "block";
document.getElementById("statistik").style.display = "none";
}
else if(p == 3) {
document.getElementById("forare").style.display = "none";
document.getElementById("mercedes").style.display = "none";
document.getElementById("statistik").style.display = "block";
}
}
</script>
</head>
<body>
<div class="page">
<nav>
Förarbiografi
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
Mercedes F1
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
Statistik
</nav>
<div id="forare" class="main">
<h1 class="rubrik">Förare</h1>
<p>
</p>
</div>
<div id="mercedes" class="main">
<h1 class="rubrik">Mercedes F1 genom åren</h1>
<p>
</p>
</div>
<div id="statistik" class="main">
<h1 class="rubrik">Statistik</h1>
<p>
</p>
</div>
</div>
</body>
</html>
The main problem is that whenever you are clicking on the a tag the page reloads. So put # inside the href attributes of the a tags. Thats it.
Click Here
jsFiddle
Note : The local p declared inside the function is of no use as you are using the parameter. So better you remove that if you are only using the parameter, though it doesn't effect your code unless you refer to that with this keyword. Like,
this.p // refers to the local p you declared.
You're reloading the page each time the action is triggered, so the default state is returned, meaning that the transformation is no longer applied. By giving the <a> tag an href of # or javascript:void(0);, you can prevent the page refresh. Or even better, you can actually execute the JS from the href itself.
I actually recommend using javascript:void(0);, since it doesn't jump to the top of the page by default, while # does. However, that behavior can be prevented with a simple onclick="return false".
Codepen
Find the below code which i did using jQuery. It's very short and easy to understand.
HTML
<div class="page">
<nav>
<a class="one" href="#">Förarbiografi</a>
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
<a class="two" href="#">Mercedes F1</a>
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
<a class="three" href="#">Statistik</a>
</nav>
<div id="forare" class="main">
<h1 class="rubrik">Förare</h1>
<p>Content</p>
</div>
<div id="mercedes" class="main">
<h1 class="rubrik">Mercedes F1 genom åren</h1>
<p>Content</p>
</div>
<div id="statistik" class="main">
<h1 class="rubrik">Statistik</h1>
<p>Content</p>
</div>
</div>
JS
$('.one').click(function(){
$('.main').hide();
$('#forare').show();
});
$('.two').click(function(){
$('.main').hide();
$('#mercedes').show();
});
$('.three').click(function(){
$('.main').hide();
$('#statistik').show();
});
CSS
.main{
display:none;
}
JS FIDDLE DEMO

Categories