I need to add to this script to make the webpage open a tab on page load.
How can I do this?
I am thinking there is just a JavaScript command I am missing. I just for the life of my cant see it.
JavaScript:
$(document).ready(function(){
$('.tabs').each(function(){
var tab = $(this);
tab.find('.tab_content').hide(); // Hide all divs
tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked
if($(this).hasClass('current_tab')) return false;
tab.find('ul.tab_nav li a').removeClass('current_tab');
$(this).addClass('current_tab'); //Set clicked link class to active
var currentTab = tab.find($(this).attr('href'));
tab.find('.tab_content').hide(); // Hide all divs
$(currentTab).slideDown(); // Show div with id equal to variable currentTab
return false;
});
});
});
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" media="screen" href= "D:\WP\css\style.css"/>
<script src="D:\WP\script\jquery1.9.1.js"></script>
<script src="D:\WP\script\easing.js"></script>
<script src="D:\WP\script\tabs.js"></script>
</head>
<body>
<!--Web page box-->
<div id="tab_style" class="box tabs">
<!--Header start-->
<div id="header">
<ul class="tab_nav">
<li>Home</li>
<li>About</li>
<li>Consulting</li>
<li>Social</li>
<li>Contact</li>
</ul>
</div>
<!--header end-->
<!--contents of site begin-->
<div class="content">
<div id="about" class="tab_content">
<br/>3
<br/>3
<br/>3
</div>
<div id="contact" class="tab_content"></div>
<div id="footer">
<p></p>
</div>
<!--footer ends-->
</div>
<!--contents end here-->
</div>
<!--Web page box end-->
</body>
This might not be the answer you were hoping for, but I just want to suggest that you start with something a little bit less convoluted than the code you posted.
Tabs can be easy: when a tab is clicked, just deactivate the current tab+panel and activate the new one.
Here is a quick demo I just threw together to show you:
HTML:
<div class="tabs">
<span class="tab" data-tab="thing1">Thing 1</span>
<span class="tab" data-tab="thing2">Thing 2</span>
<span class="tab" data-tab="thing3">Thing 3</span>
</div>
<div class="panels">
<div class="panel" data-tab="thing1">
<h2>Thing 1</h2>
<p>blah blah</p>
</div>
<div class="panel" data-tab="thing2">
<h2>Thing 2</h2>
<p>foo bar</p>
</div>
<div class="panel" data-tab="thing3">
<h2>Thing 3</h2>
<img src="http://slodive.com/wp-content/uploads/2014/03/funny-bab.jpg">
</div>
</div>
JavaScript:
// hook tab clicks:
$('body').on('click', '.tab', show);
// show first tab:
show('.tab');
function show(tab) {
// accepts an Event or a CSS selector:
tab = $(tab.target || tab).attr('data-tab');
// de-activate current tab:
$('[data-tab].active').declassify('active');
// activate new tab:
$('[data-tab="'+tab+'"]').classify('active');
}
CSS:
.tab {
display: block;
float: left;
padding: 5px 10px;
margin: 0 5px;
background: #FFF;
transform-origin: 0 100%;
transition: all 500ms ease;
cursor: pointer;
}
.tab:not(.active) {
opacity: 0.5;
transform: perspective(1000px) rotateX(30deg);
}
.panel {
background: #FFF;
padding: 20px;
}
.panel:not(.active) {
display: none;
}
JSFiddle Demo: http://jsfiddle.net/developit/42zcagjb/
Related
I have a page name url.com/yourfirstpage/ when i go to the page all the div are hidden by default (display:none)
if we target #sec1 as url.com/yourfirstpage/#sec1 it only displays sec1 and hide others.
I was wondering if we go the url without having anchor id like url.com/yourfirstpage/ it needs to show all the divs.
#sec1, #sec2, #sec3{
display:none;
}
#sec1:target{
display:block;
}
#sec2:target{
display:block;
}
#sec3:target{
display:block;
}
sec1
sec2
sec3
<div id="sec1" class="page"> this is sec1</div>
<div id="sec2" class="page"> this is sec2</div>
<div id="sec3" class="page"> this is sec3</div>
Here is a trick in case you are able to modify your HTML structure. The idea is to have the elements visible and then we hide them using :target. Since we don't have previous sibling selector or parent selector, I used id within a parent element to be able to select any element:
#sec1:target .page:nth-child(n+2){
display: none;
}
#sec2:target .page:nth-child(2n+1){
display: none;
}
#sec3:target .page:nth-last-child(n+2){
display: none;
}
sec1
sec2
sec3
<div id="sec1">
<div id="sec2">
<div id="sec3">
<div class="page"> this is sec1</div>
<div class="page"> this is sec2</div>
<div class="page"> this is sec3</div>
</div>
</div>
</div>
It can work with any number of sections and we can improve the CSS code as follow:
#sec1:target .page:not(:nth-child(1)),
#sec2:target .page:not(:nth-child(2)),
#sec3:target .page:not(:nth-child(3)),
#sec4:target .page:not(:nth-child(4)),
#sec5:target .page:not(:nth-child(5)) {
display: none;
}
sec1
sec2
sec3
sec4
sec5
<div id="sec1">
<div id="sec2">
<div id="sec3">
<div id="sec4">
<div id="sec5">
<div class="page"> this is sec1</div>
<div class="page"> this is sec2</div>
<div class="page"> this is sec3</div>
<div class="page"> this is sec4</div>
<div class="page"> this is sec5</div>
</div>
</div>
</div>
</div>
</div>
this quick approach may help
you can do with ! selector in CSS by using postcss plugins
[...document.querySelectorAll('a')].forEach(a => {
a.addEventListener('click', () => {
a.parentElement.classList.add('targeted')
})
})
.targeted div {
display: none;
}
.targeted div:target {
display: block;
}
sec1
sec2
sec3
<div id="sec1" class="page"> this is sec1</div>
<div id="sec2" class="page"> this is sec2</div>
<div id="sec3" class="page"> this is sec3</div>
I am new to jQuery. Trying to hide the first div and show second div. When I again click on 2nd div, it will show me the first div.
Here is my code.
$(".c1").on('click', function() {
$(".one").fadeIn();
$(".two").fadeOut();
});
$(".c2").on('click', function() {
$(".two").fadeIn();
$(".one").fadeOut();
});
.right {
font-size: 20px;
float: right;
margin-right: 50px;
}
.ab-container {
margin-bottom: 50px;
}
.container {
padding: 30px 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 Click to see div 2</h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two">
<div class="ab-head ">
<h1>This is div 2 Click to see div 1</h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>
You have your fadeOut and fadeIn calls inverted.
You need to prevent the a link behavior.
Pass as callback your fadeIn call.
Look at this code snippet with those fixes
I've added a hide class to show how the DIVs appear and disappear.
$(".c1").on('click', function(e) {
e.preventDefault();
$(".one").fadeOut(function() {
$(".two").fadeIn();
});
});
$(".c2").on('click', function(e) {
e.preventDefault();
$(".two").fadeOut(function() {
$(".one").fadeIn();
});
});
.right {
font-size: 20px;
float: right;
margin-right: 50px;
}
.ab-container {
margin-bottom: 50px;
}
.container {
padding: 30px 60px;
}
.hide {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 Click to see div 2</h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two hide">
<div class="ab-head ">
<h1>This is div 2 Click to see div 1</h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>
See? now is working your logic!
First, it will work better if you use spans instead of links
The nyou have the order of fadein/fadeout confused:
$(".c1").on('click', function() {
$(".two").fadeIn();
$(".one").fadeOut();
});
$(".c2").on('click', function() {
$(".one").fadeIn();
$(".two").fadeOut();
});
.right {
font-size: 20px;
float: right;
margin-right: 50px;
}
.ab-container {
margin-bottom: 50px;
}
.container {
padding: 30px 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 <span class="right c1"> Click to see div 2</span></h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two">
<div class="ab-head ">
<h1>This is div 2 <span class="right c2"> Click to see div 1</span></h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>
Your code is working you only need to remove the href="" from your <a> tag. However, here is my way of doing it if you like to take a look. And the edited version of the HTML
$('.c1').click(function () {
$('.one').fadeIn();
$('.two').fadeOut();
})
$('.c2').click(function () {
$('.two').fadeIn();
$('.one').fadeOut();
})
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 <a class="right c1"> Click to see div 2</a></h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two">
<div class="ab-head ">
<h1>This is div 2 <a class="right c2"> Click to see div 1</a></h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>
Sorry if this is a really obvious problem to solve. What I am trying to do is have a div, when selected is replaced with another div with the option to revert "back" to the old div when "back" is clicked.
This is what I have so far:
$(document).ready(
function() {
$("#display-one").click(function() {
$("#display-two").fadeToggle();
$("#display-one").fadeToggle();
});
});
#display-two {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="header">
<div id="display-one">Dispay One</div>
</div>
<div id="display-two">
<p>Display Two</p>
<h3>
<div id="back">
back
</div>
</h3>
</div>
Here is a JSFiddle: https://jsfiddle.net/uL8z87r7/1/
Thanks in advance for any help and tips!
-John
Just add #back a to your selector so it will be $("#display-one, #back a")
$("#display-one, #back a").click(function() {
$("#display-two").fadeToggle();
$("#display-one").fadeToggle();
});
#display-two {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<div id="display-one">Dispay One
</div>
</div>
<div id="display-two">
<p>Display Two
</p>
<h3>
<div id="back">
back
</div>
</h3>
</div>
You have to add listener for the back button
$(document).ready(
function() {
$("#display-one,#back").click(function() {
$("#display-two").fadeToggle();
$("#display-one").fadeToggle();
});
});
$(document).ready(function() {
$("#display-one, #back").click(function() {
$("#display-one, #display-two").fadeToggle();
});
});
#display-two {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="header">
<div id="display-one">Dispay One</div>
</div>
<div id="display-two">
<p>Display Two</p>
<h3>
<div id="back">
back
</div>
</h3>
</div>
This question already has answers here:
ReferenceError: Can't find variable: $
(4 answers)
Closed 6 years ago.
I have a span which acts like a button to display divs depending on what span you click. Each span has its on div containing its content which is displayed none when onload. The problem is that the span when click doesn't do anything. It should be displaying its content.
HTML
<p class="lead"><span class="productbtn btn1">FRESH</span><span class="productbtn btn2">CHILLED</span><span class="productbtn btn3">FROZEN</span><span class="productbtn btn4">DRY</span></p>
<div class="section-1" style="display:none">
ASDQWEXZC
</div>
<div class="section-2" style="display:none">
1234567896
</div>
<div class="section-3" style="display:none">
1234567896
</div>
<div class="section-4" style="display:none">
1234567896
</div><p class="lead"><span class="productbtn btn1">FRESH</span><span class="productbtn btn2">CHILLED</span><span class="productbtn btn3">FROZEN</span><span class="productbtn btn4">DRY</span></p>
<div class="section-1" style="display:none">
ASDQWEXZC
</div>
<div class="section-2" style="display:none">
1234567896
</div>
<div class="section-3" style="display:none">
1234567896
</div>
<div class="section-4" style="display:none">
1234567896
</div>
CSS
.productbtn:hover, productbtn:active {
background: #bdc3c7;
color: #fff;
}
.productbtn {
padding: 20px;
background: #ecf0f1;
margin: 10px;
width: 250px;
display: inline-block;
cursor: pointer;
transition: .3s ease all;
}
SCRIPT
$(function(){
$(".btn1").click(function(){
$(".section-1").css("display","block");
$(".section-2, .section-3, .section-4").css("display","none");
});
$(".btn2").click(function(){
$(".section-2").css("display","block");
$(".section-1, .section-3, .section-4").css("display","none");
});
$(".btn3").click(function(){
$(".section-3").css("display","block");
$(".section-2, .section-1, .section-4").css("display","none");
});
$(".btn4").click(function(){
$(".section-4").css("display","block");
$(".section-2, .section-3, .section-1").css("display","none");
});
});
FIDDLE HERE
other Javascript or jquery solutions are acceptable.
FIDDLE HERE
For active status resolve the previous issues above.
SCRIPT ACTIVE STATUS:
$(function(){
$(".btn-click").click(function(){
var active = $(this).addClass("active")
var target = $(this).data("action");
$("."+target).show().siblings("div[class*=section-]").hide();
})
});
Your code wasn't working because you didn't include jQuery. Try adding that in fiddle it will work.
But why to write that long code when you can do it smartly with a much shorter code:
Here is the jQuery:
$(function(){
$(".btn-click").click(function(){
var target = $(this).data("action");
$("."+target).show().siblings("div[class*=section-]").hide();
})
});
Yea that's it, but, if the HTML is like:
<p class="lead"><span class="productbtn btn1 btn-click" data-action="section-1">FRESH</span><span class="productbtn btn2 btn-click" data-action="section-2">CHILLED</span><span class="productbtn btn3 btn-click" data-action="section-3">FROZEN</span><span class="productbtn btn4 btn-click" data-action="section-4">DRY</span></p>
<div class="section-1" style="display:none">
ASDQWEXZC
</div>
<div class="section-2" style="display:none">
1234567896
</div>
<div class="section-3" style="display:none">
1234567896
</div>
<div class="section-4" style="display:none">
1234567896
</div>
Doesn't look like you included jQuery
I added it in the external resources section on the left hand, and now it works https://jsfiddle.net/aLkd4545/1/
Here's how to include it in your code(html):
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
For some dumb practices in which I am not allowed to use alert or any Js dialog box I have to make the following magic happen:
1.Make a div with a link, in this case its the one called info.
2.Made a invisible div, that would be my "PopUp" with some rubbish info inside.
3.When I click on the link info, the invisible div should materialize.
While simple and and even fairly obvious I am having a bit of trouble getting the logic of how to make such thing happen. If it helps me save face I just started programming..like 1 month ago and just HTML CSS, I am new to this whole Js universe.
This is my code as of now:
<div class="scroll-area" id="lista">
<div class="box">
<p>Item #1</p>
<p class="info"><a href="#" id="lnkInfo">Info</p>
</a>
<p class="info"><a href="#">Take</p>
</a>
</div>
<div class="box">
<p>Item #2</p>
<p class="info"><a href="#">Info</p>
</a>
<p class="info"><a href="#">Take</p>
</a>
</div>
</div>
Here comes the groans "PopUp"...
<div class="popUp">
<ul>
<li>BLA BLA</li>
<li>BLA BLA/li>
<li>BLA BLA</li>
<li>BLA!</li>
</ul>
</div>
CSS just in case.
.popUp {
position: absolute;
width: 300px;
height: 300px;
margin: 0 auto;
background-color: #ecf0f1;
top: 100px;
left: 100px;
display: none;
}
.show {
display: block;
}
And what I though would be a start to the JS:
var elementPopUp = document.getElementById('lnkInfo');
elementoPopUp.addEventListener('click', validate);
function validate() {
document.getElementById('popUp').className += ' show';
}
UPDATED you have syntax bugs in your html code fix and you are using getElementById to get element but you set popUp as class change it to id
<div class="scroll-area" id="lista">
<div class="box">
<p>Item #1</p>
<p class="info"><a href="#" id="lnkInfo">Info
</a></p>
<p class="info"><a href="#">Take
</a></p>
</div>
<div class="box">
<p>Item #2</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
</div>
<div id="popup" >
<ul>
<li>BLA BLA</li>
<li>BLA BLA</li>
<li>BLA BLA</li>
<li>BLA!</li>
</ul>
</div>
and css
#popup {
position: absolute;
width: 300px;
height: 300px;
margin: 0 auto;
background-color: #ecf0f1;
top: 100px;
left: 100px;
display: none;
}
#popup.show {
display: block;
}
and javascript
var elementPopUp = document.getElementById('lnkInfo');
elementPopUp.addEventListener('click', validate);
function validate() {
var d = document.getElementById("popup");
d.classList.add("show");
}
I believe if you do this:
<div class="scroll-area" id="lista">
<div class="box">
<p>Item #1</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
<div class="box">
<p>Item #2</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
</div>
And make the javascript this:
function validate(){
document.getElementById('popUp').style.visibility = 'visible';
}
That should work.
I have not tested it, so I may have a syntax or two wrong.
Here is an example of how to affect element style through JavaScript:
HTML
<a id="shower" href="">
show
</a>
<br>
<a id="hider" href="">
hide
</a>
<br>
<div id="popup" class="hide">Hello</div>
JS
document.getElementById("shower").addEventListener("click", function (e) {
var myDiv = document.getElementById("popup");
myDiv.className = "";
e.preventDefault();
});
document.getElementById("hider").addEventListener("click", function (e) {
var myDiv = document.getElementById("popup");
myDiv.className = "hide";
e.preventDefault();
});
CSS
.hide {
display: none;
}
Here is a simplified version of what I'd do:
The HTML:
clickMe
<div id="showMe">showMe</div>
The CSS:
display:none;
The JavaScript:
document.getElementById("clickMe").onclick = function() {
document.getElementById("showMe").style.display = "block";
}
Here is a fiddle to show the effect
Hope this helps ;)