I am trying to set a transition between sections on a single page application, they are all on the same page but the other sections are set to display none so when I perform an event the display none is toggled for the section requested, now I don't just want the section to come in like that rather set a timeout that would make the section coming in not come in immediately but after like 5s, how can I achieve this, I already tried settimeout but it doesn't seem to work
Outline of problem
All sections except one have display none,
Event is performed on the page that doesn't have display none to bring in requested section and toggle display none
Upon request of page, the page transitions in or has a timeout, so the page doesn't swoop in immediately
Code below,
HTML
<div class="main-container">
<div class="page padding main" id="page-main">
<div class="modal hidden">
<button class="btn-close-modal">×</button>
<h2 class="modal-header">Login to your account</h2>
<form class="modal-form">
<div>
<label for="">Username:</label>
<input type="text" />
</div>
<div>
<label for="">Password:</label>
<input type="text" />
</div>
<button class="btn header-button">Login →</button>
</form>
</div>
<div class="overlay hidden"></div>
<nav class="header-nav">
<a href="#" class="header-img">
<svg viewBox="0 0 256 256" class="header-svg">
<path
class="path"
d="m 15.625507,46.199537 55.767886,-32.030352 55.623047,32.281229 -0.14485,64.311586 0.14485,-64.311586 55.76788,-32.030352 55.62305,32.281229 -0.14485,64.311579 -55.76788,32.03036 -55.62305,-32.28123 55.62305,32.28123 -0.14485,64.31158 -55.76788,32.03035 L 70.958866,207.10393 71.103708,142.79235 126.87159,110.762 71.103708,142.79235 15.480664,110.51112 Z"
style="
fill: none;
stroke: #000;
stroke-width: 13;
stroke-linejoin: round;
stroke-linecap: round;
"
/>
</svg>
</a>
<button
class="header-button login"
type="button"
data-page="page-login"
>
LOGIN
</button>
</nav>
<div class="header-hero">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="header-text">
<h1 class="header-text-description">
Make Banking Easy with Express
</h1>
<p class="header-text-texts">
Together we can make banking awesome!
</p>
<p class="header-text-texts">
Use our mobile app to your need today
</p>
<button class="header-button header-buttons" type="button">
Services
</button>
</div>
<div class="header-image hide-for-desktop">
<img src="./assets/hand.jpg" alt="" class="header-hand" />
<button class="header-image-1">Transfer</button>
<button class="header-image-2">Loan</button>
</div>
</div>
<div class="page u-none" id="page-login">
<nav>
<a data-page="page-dashboard">User Settings</a>
<a data-page="page-main">Logout</a>
</nav>
<h1>MAIN PAGE</h1>
<form action="" name="login" method="" id="form-id" required>
<label for="name">Name</label>
<input type="text" id="name" />
<label for="pin">Pin</label>
<input type="text" id="pin" />
<button type="submit" class="submit">Submit</button>
</form>
</div>
<div class="page u-none" id="page-signup">
<nav>
<a data-page="page-settings">User Settings</a>
<a data-page="page-login">Logout</a>
</nav>
<h1>MAIN PAGE</h1>
<form action="" name="login" method="" id="form-id" required>
<label for="name">Name</label>
<input type="text" id="name" />
<label for="pin">Pin</label>
<input type="text" id="pin" />
<button type="submit" class="submit">Submit</button>
</form>
</div>
<div class="page u-none" id="page-dashboard">
<nav>
<a data-page="page-main">Back to Main</a>
<a data-page="page-login">Logout</a>
</nav>
<h1>SETTINGS PAGE</h1>
</div>
</div>
CSS
nav {
display: flex;
}
nav a {
color: #00f;
padding: 5px 10px;
cursor: pointer;
}
/* Utility classes */
.u-none {
display: none;
opacity: 0;
animation: 2s fadeIn forwards;
}
#keyframes fadeIn {
100% {
opacity: 1;
display: block;
}
}
Javascript
const ELS_pages = document.querySelectorAll('.page');
const ELS_buttons = document.querySelectorAll('[data-page]');
console.log(ELS_pages);
console.log(ELS_buttons);
const submit = document.querySelector('.submit');
const goToPage = (id) => {
ELS_pages.forEach((EL, i) => {
// console.log(EL.id);
console.log(`${i} : ${EL.id}`);
console.log(id);
// EL.classList.toggle("u-none", EL.id !== id);
setTimeout(() => {
if (EL.id === id) {
EL.classList.remove('u-none');
} else {
EL.classList.add('u-none');
}
}, 20);
});
};
// goToPage("page-main");
ELS_buttons.forEach((EL) =>
EL.addEventListener('click', () => {
goToPage(EL.dataset.page);
})
);
The following is a very basic implementation. It can be changed in many ways depending on your wanted effect. I had to modify your HTML because you had your pages nested on the main page and when the latter got hidden, it was hiding all the other pages too.
const ELS_pages = document.querySelectorAll('.page');
const ELS_buttons = document.querySelectorAll('[data-page]');
const submit = document.querySelector('.submit');
const goToPage = (id) => {
ELS_pages.forEach((EL, i) => {
if (EL.id === id) {
setTimeout(() => {
EL.classList.remove('u-none');
// THIS TIMEOUT IS IMPORTANT TO ALLOW BROWSER TO REPAINT AFTER CHANGING display PROPERTY. IF NOT, TRANSITION COULD NOT WORK.
setTimeout(() => {
EL.style.opacity = 1;
}, 100);
}, 1000);
} else {
EL.style.opacity = 0;
setTimeout(() => {
EL.classList.add('u-none');
}, 1000);
}
});
};
ELS_buttons.forEach((EL) =>
EL.addEventListener('click', () => {
goToPage(EL.dataset.page);
})
);
goToPage('page-main');
nav {
display: flex;
}
nav a {
color: #00f;
padding: 5px 10px;
cursor: pointer;
}
.page {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.u-none {
display: none;
}
<div class="main-container">
<div class="page padding main u-none" id="page-main">
<div class="modal hidden">
<button class="btn-close-modal">×</button>
<h2 class="modal-header">Login to your account</h2>
<form class="modal-form">
<div>
<label for="input-username">Username:</label>
<input id="input-username" type="text"/>
</div>
<div>
<label for="input-password">Password:</label>
<input id="input-password" type="text"/>
</div>
<button class="btn header-button">Login →</button>
</form>
</div>
<div class="overlay hidden"></div>
<nav class="header-nav">
<a href="#" class="header-img">
<svg viewBox="0 0 256 256" class="header-svg">
<path
class="path"
d="m 15.625507,46.199537 55.767886,-32.030352 55.623047,32.281229 -0.14485,64.311586 0.14485,-64.311586 55.76788,-32.030352 55.62305,32.281229 -0.14485,64.311579 -55.76788,32.03036 -55.62305,-32.28123 55.62305,32.28123 -0.14485,64.31158 -55.76788,32.03035 L 70.958866,207.10393 71.103708,142.79235 126.87159,110.762 71.103708,142.79235 15.480664,110.51112 Z"
style="
fill: none;
stroke: #000;
stroke-width: 13;
stroke-linejoin: round;
stroke-linecap: round;
"
/>
</svg>
</a>
<button
class="header-button login"
type="button"
data-page="page-login"
>
LOGIN
</button>
</nav>
<div class="header-hero">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="header-text">
<h1 class="header-text-description">
Make Banking Easy with Express
</h1>
<p class="header-text-texts">
Together we can make banking awesome!
</p>
<p class="header-text-texts">
Use our mobile app to your need today
</p>
<button class="header-button header-buttons" type="button">
Services
</button>
</div>
<div class="header-image hide-for-desktop">
<img src="./assets/hand.jpg" alt="" class="header-hand"/>
<button class="header-image-1">Transfer</button>
<button class="header-image-2">Loan</button>
</div>
</div>
</div>
<div class="page u-none" id="page-login">
<nav>
<a data-page="page-dashboard">User Settings</a>
<a data-page="page-main">Logout</a>
</nav>
<h1>MAIN PAGE 1</h1>
<form action="" name="login" method="POST" id="form-1">
<label for="name-1">Name</label>
<input type="text" id="name-1" required/>
<label for="pin-1">Pin</label>
<input type="text" id="pin-1" required/>
<button type="submit" class="submit">Submit</button>
</form>
</div>
<div class="page u-none" id="page-signup">
<nav>
<a data-page="page-settings">User Settings</a>
<a data-page="page-login">Logout</a>
</nav>
<h1>MAIN PAGE 2</h1>
<form action="" name="login" method="POST" id="form-id">
<label for="name-2">Name</label>
<input type="text" id="name-2" required/>
<label for="pin-2">Pin</label>
<input type="text" id="pin-2" required/>
<button type="submit" class="submit">Submit</button>
</form>
</div>
<div class="page u-none" id="page-dashboard">
<nav>
<a data-page="page-main">Back to Main</a>
<a data-page="page-login">Logout</a>
</nav>
<h1>SETTINGS PAGE</h1>
</div>
</div>
You can use fullpage.js
This is simple and have variety settings. so check this https://github.com/alvarotrigo/fullpage.js
Related
I'm making a web calculator with 2 fields to take inputs, and I want to change its type to paragraph. How to do so? And how add listeners to support tapping on the paragraphs to make them “active” and indicate this somehow with CSS?
Once the web page gets opened somehow I want to take values from the 2 fields.
<div class="calculator">
<div class="screen"></div>
<div class="inputs">
<p id="carbs">Carbs/100g</p>
<p id="portion">Portion (g)</p>
</div>
<div class="calcul">
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button><br>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button><br>
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button><br>
<button id="zero">0</button>
<button id="decimal">.</button>
<button id="clear">C</button><br>
<button id="save">Save</button>
<button id="equals">=</button>
</div>
</div>
To change the input fields to paragraphs and add listeners to them, you can do the following:
const carbsField = document.querySelector("#carbs");
const portionField = document.querySelector("#portion");
carbsField.addEventListener("click", () => {
carbsField.classList.add("active");
portionField.classList.remove("active");
});
portionField.addEventListener("click", () => {
portionField.classList.add("active");
carbsField.classList.remove("active");
});
.input-field {
background-color: lightgray;
padding: 10px;
border-radius: 10px;
cursor: pointer;
display: inline-block;
}
.input-field.active {
background-color: gray;
color: white;
}
<div class="calculator">
<div class="screen">
</div>
<div class="inputs">
<p id="carbs" class="input-field">Carbs/100g: <span id="carbs-value">0</span></p>
<p id="portion" class="input-field">Portion (g): <span id="portion-value">0</span></p>
</div>
<!-- rest of the HTML code -->
</div>
I'm working on a website as part of a project. The idea is to be able to filter the div tags by their title. For example, if you wanted to search for 'Television' or 'Music', etc.
My idea was to use the ID for each div to search and filter. Any advice on how to do that or any method is greatly appreciated!
Search bar:
<input id="search-bar" class="options-button" type="text" placeholder="Search Categories...">
Div tags to be search:
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
CSS for the divs:
.discover-subscribe, .discover-unsubscribe {
width: calc(100% + 14px);
text-align: center;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
color: white;
background: #63c401;
border: none;
font-size: 14px;
margin: 14px 0 -14px -14px;
padding: 10px 10px;
text-shadow: rgba(0,0,0,0.4) 0 0 6px;
box-shadow: rgba(0,0,0,0.3) 0 0 4px;
transition: background 0.2s ease-in-out;
}
.discover-unsubscribe {
background: #DE1B1B;
}
.discover-subscribe:hover {
background: #52A301;
}
.discover-unsubscribe:hover {
background: #B81616;
}
Try the following way with Array's forEach():
var divEl = document.querySelectorAll('div.discover-tile');
divEl.forEach(function(d){
if(d.getAttribute('id') == 'television'){
console.log(d);
}
});
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
Or you can use filter() like:
var divEl = document.querySelectorAll('div.discover-tile');
var television = Array.prototype.filter.call(divEl, function(d){
return d.getAttribute('id') == 'television';
});
console.log(television);
<div class="discover-tile" id="television">
<h2 class="discover-title">Television</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
<h2 class="discover-title">Movies</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
<h2 class="discover-title">Music</h2>
<p class="discover-info">Description</p>
<button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
The answers presented don't cover all the gotchas that you will run into. I would suggest you try using list.js to filter - it is very powerful and has a very small footprint.
http://listjs.com/
I've used it on several projects and it is rock solid and easy to setup.
You can do it in the following way:
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myList div").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<div class="container">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<h2>
example to filter div content</h2>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<div class="list-group" id="myList">
<div>Label 1</div>
<div>Label 2</div>
<div>asdf 1</div>
<div>asdf 2</div>
</div>
</div>
I have two divs, with the same class name of .pageSlide. When I click on the button with class name .moveup or .movedown, I specifically want that button's respective div to slide up or down. At the moment, if I click on the button associated with say, div A, then div B also animates. I'm guessing I need a $(this) selector in the JS somewhere. I'm not sure.
Here's a jsfiddle of working code
https://jsfiddle.net/hpe459ok/
Essentially I have this:
$('.moveup').click(function() {
if ($('.pageSlide').css('top') == '-420px') {
$('.pageSlide').animate({
top: '0'
}, 700);
} else {
$('.pageSlide').animate({
top: '0'
}, 700);
}
});
$('.movedown').click(function() {
if ($('.pageSlide').css('top') == '0') {
$('.pageSlide').animate({
top: '420'
}, 500);
} else {
$('.pageSlide').animate({
top: '420'
}, 500);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
<div class="page1">
content
<button class="moveup">Next page</button>
</div>
<div class="page2 pageSlide">
content
<button class="movedown">Previous page</button>
</div>
</div>
<div class="container2">
<div class="page1">
content
<button class="moveup">Next page</button>
</div>
<div class="page2 pageSlide">
content
<button class="movedown">Previous page</button>
</div>
</div>
Try using the below code:
$('.moveup').click(function() {
$(this).closest(".page1").siblings('.pageSlide').animate({
top: '0'
}, 700);
});
$('.movedown').click(function() {
$(this).closest(".page2").animate({
top: '420'
}, 500);
});
I would use data attributes on your .moveup and .movedown buttons. By setting an attribute data-parent to be the id of the top level parent <div> it becomes trivial to modify your existing functions to handle the proper animations.
$('.moveup').click(function() {
var parent = $(this).data('parent');
if ($('#'+parent).find('.pageSlide').css('top') == '-420px') {
$('#'+parent).find('.pageSlide').animate({
top: '0'
}, 700);
} else {
$('#'+parent).find('.pageSlide').animate({
top: '0'
}, 700);
}
});
$('.movedown').click(function() {
var parent = $(this).data('parent');
if ($('#'+parent).find('.pageSlide').css('top') == '0') {
$('#'+parent).find('.pageSlide').animate({
top: '420'
}, 500);
} else {
$('#'+parent).find('.pageSlide').animate({
top: '420'
}, 500);
}
});
.pageSlide {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 400px;
background: ghostwhite;
z-index: 0;
}
.page2 {
z-index: 1;
top: 420px;
}
.image-wrapper {
height: 400px;
overflow: hidden;
position: relative;
text-align: center;
border: black 1px solid;
}
.overlay-left {
background-color: white;
}
.overlay-right {
background-color: white;
}
.image-overlay-content-left {
background-color: white;
}
.image-overlay-content-right {
background-color: white
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small-12 columns" id="nominate">
<div class="image-wrapper overlay overlay-left">
<div class="image-overlay-content image-overlay-content-left" id="formslide">
<form id="foo" method="post" name="nomForm" action="nominate-test.html#thankyou">
<div class="page1">
<label class="row">
<h2 class="headline">Your name</h2>
<input placeholder="e.g. John Smith" type="text" name="name" id="name" tabindex="1" autofocus>
<span id="nameError" class="error headline"></span>
</label>
<label class="row email">
<h2 class="headline">Your email address</h2>
<input placeholder="example#rofordaward.co.uk" type="text" name="email" id="email" tabindex="2">
<span id="emailError" class="error headline"></span>
</label>
<label class="row">
<h2 class="headline">Company name</h2>
<input placeholder="e.g. Roford" type="text" name="company" id="company" tabindex="3">
<span id="companyError" class="error headline"></span>
</label>
<div class="next">
<button type="button" class="moveup" data-parent="nominate">Next page</button><i class="icon-down-open"></i></div>
</div>
<div class="pageSlide page2">
<label class="row reason">
<h2 class="headline">Reason for nomination</h2>
<textarea id="textarea" rows="6" cols="25" maxlength="1000" name="message" id="message" placeholder="A brief evidence based summary"></textarea>
<span id="messageError" class="error headline"></span>
<div id="text-area-wrap">
<div id="textarea_feedback"></div>
</div>
</label>
<div class="row button-wrap">
<div class="column small-12">
<input class="button" name="submit" type="submit" id="contact-submit" value="Submit">
</div>
</div>
<div class="prev">
<button type="button" class="movedown" data-parent="nominate">Previous page</button><i class="icon-up-open"></i></div>
</div>
</form>
</div>
</div>
</div>
<div class="small-12 columns" id="apply">
<div class="image-wrapper overlay overlay-right">
<div class="overlay-option-headline overlay-option-headline-right">
<h5>Tell us why you're a great business</h5>
<h1 class="headline">Apply</h1>
</div>
<div class="image-overlay-content image-overlay-content-right">
<div class="page1">
<h2 class="headline">Application Form</h2>
<div class="row apply-points">
<div class="column small-12">
<h5>Please make sure you have read our Criteria page and terms and conditions in full before applying.</h5></div>
<div class="column small-12">
<h5>Ensure you have gathered evidence to support your application.</h5></div>
<div class="column small-12">
<h5>Shortlisted companies will be contacted with further instructions.</h5></div>
</div>
<div class="next">
<button type="button" class="moveup" data-parent="apply">Next page</button><i class="icon-down-open"></i></div>
</div>
<div class="page2 pageSlide">
<h2 class="headline">Contact name</h2>
<div class="row apply-points">
<div class="column small-12">
<h5>aduhwijdaduhwijdaduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijdaduhwijdaduhwijdaduhwijdaduhwijdad aduhwijd aduhwijd aduhwijdaduhwijd aduhwijd ijdaduhwijdaduhwijdaduhwijdaduhwijdad aduhwijd aduhwijd aduhwijdaduhwijd aduhwijd</h5></div>
</div>
<div class="prev">
<button type="button" class="movedown" data-parent="apply">Previous page</button><i class="icon-up-open"></i></div>
</div>
</div>
</div>
</div>
So I am trying to open modal over other modal which is not working. there is one link say "login" which opens up another modal for me. why this is happening ?
primary modal call from following
<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="160">
<li>Sign Up</li>
<li class="menu-item-emphasis"><div>Login</div></li>
</ul>
primary modal
<div class="modal1 mfp-hide" id="modal-get-started" >
<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
<div style="padding: 50px;">
<form name="reg_form" id="get-started-form" class="nobottommargin">
<div class="row clearfix">
<div class="col-sm-12">
<h3 class="font-body">Register for Free Trial</h3>
</div>
</div>
<button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>
<button id="customGoogleBtn1" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
<br>
<div style='padding-top: 30px;padding-left: 50px' ng-show ="errorAlreadyRegister">
<span style='color:red;x' >Seems already registered. <a ng-click= "closePopup()" href="#" > Log in </a> instead?</span>
</div>
</form>
</div>
</div>
</div>
wants to open on login link
<div class="modal1 mfp-hide" id="modal-login" >
<div class="block divcenter" style="background-color: #FFF; max-width: 400px;">
<div style="padding: 50px;">
<h3 class="font-body">Login to your Account</h3>
<form class="nobottommargin">
<div class="col_full">
<label class="font-body capitalize" for="login-form-modal-username">Username:</label>
<input type="text" id="login-form-modal-username" name="login-form-modal-username" value="" class="form-control" />
</div>
<div class="col_full">
<label class="font-body capitalize" for="login-form-modal-password">Password:</label>
<input type="password" id="login-form-modal-password" name="login-form-modal-password" value="" class="form-control" />
</div>
<div class="col_full nobottommargin">
<button class="button button-rounded nomargin" id="login-form-modal-submit" name="login-form-modal-submit" value="login">Login</button>
Forgot Password?
</div>
</form>
<div class="line line-sm"></div>
<button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>
<button id="customGoogleBtn" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
<!-- Login with Google -->
</div>
</div>
</div>
function called on login link
$scope.closePopup = function(){
$.magnificPopup.close();
$.magnificPopup.open({
items: {
src: '#modal-login'
}
});
}
I am not that much familiar with button html or jquery so please forgive if this is a repeated question or if I asked it wrong. What i want to do is is to load a tab on an external button click. The code for the tabs are as follows,
<div id="wrapper">
<div id="content">
<div class="c1">
<div class="controls">
</div>
<div class="tabs">
<div id="tab-1" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS data visualizer</p>
</div>
<div style="margin-top: 10px;margin-left: 10px;width: 21%;height: 20px; float: left">
<input type="button" id="btn" name="btn" value="Button" />
<div style="margin-left: 15px; float: left">
Filter :
</div>
<div id='jqxdropdown' style="margin-left: 5px; float: left">
</div>
</div>
<div style="margin-top: 10px;width: 78%;height: 20px; float: right">
<div id='jqxcalendar' style="margin-left: 10px;float: left;"></div>
<div style="margin-left: 10px;float: left;">
<input id="filterButton" type="button" value="Filter"/>
</div>
<div style="margin-left: 10px; float: left">
<font size="1" color="red">
*Filter by ISP only applies to the bar/pie chart
</font>
</div>
</div>
<div id="barChartdiv" style="margin-top: 10px;width:60%; height: 400px;float: left;"></div>
<div id="pieChartDiv" style="margin-top: 10px;width:40%; height: 400px;float: right;"></div>
<div id="linechartdiv" style="width: 100%; height: 500px;float: left;"></div>
</article>
</div>
<div id="tab-2" class="tab">
<article>
<div class="text-section">
<h1>Map view</h1>
<p>TVAS birds eye view</p>
</div>
<div id="google_map_canvas" style="margin-top: 10px;width:1450px; height: 650px;float: left;">
</div>
<div id="over_map">
<input id="outgoingButton" type="button" value="Outgoing"/>
<input id="incomingButton" type="button" value="Incomng"/>
</div>
</article>
</div>
<div id="tab-3" class="tab">
<article>
<div class="text-section">
<h1>Dashboard</h1>
<p>TVAS trend visualizer</p>
</div>
</article>
</div>
</div>
</div>
</div>
<aside id="sidebar">
<strong class="logo">lg</strong>
<ul class="tabset buttons">
<li class="active">
<span>Dashboard</span><em></em>
<span class="tooltip"><span>Dashboard</span></span>
</li>
<li>
<span>Map visualization</span><em></em>
<span class="tooltip"><span>Map visualization</span></span>
</li>
<li>
<span>Trending</span><em></em>
<span class="tooltip"><span>Trending</span></span>
</li>
</ul>
<span class="shadow"></span>
</aside>
</div>
what this code currently does is when the user clicks on the necessary sidebar element it loads its corresponding div to the left of the page. what I need to do the same by clicking on a button jquery or javascript which is situated in the header area of the page.
for example something like this,
<script type="text/javascript">
$(document).ready(function () {
$("input[name='btn']").click(function() {
//code to display the contents of a tab
});
});
</script>
any help would be much helpful :) I don't know how to make this question even more clearer. hope its understandable Thank you :)
I think this will work, I'm sure there is a more concise way though.
$("#tab-1").click(function() {
$(".tab").hide();
$("#tab-1").show();
});
$("#tab-2").click(function() {
$(".tab").hide();
$("#tab-2").show();
});
$("#tab-3").click(function() {
$(".tab").hide();
$("#tab-3").show();
});
Update: This actually works (be sure to change the class and id selectors to your naming convention), as tested here.
$().ready(function() {
$(".show-tab").click(function() {
$(".tab").hide();
var tabid = $(this).attr("id").substring(5);
$("#"+tabid).show();
});
$("#show-tab-1").click();
});