calling javascript inside a div - javascript

here is my code:
$(document).ready(function(){
$('#next').click(function() {
$('.current').removeClass('current').hide()
.next().show().addClass('current');
if ($('.current').hasClass('last')) {
$('#next').attr('disabled', true);
}
$('#prev').attr('disabled', null);
});
$('#prev').click(function() {
$('.current').removeClass('current').hide()
.prev().show().addClass('current');
if ($('.current').hasClass('first')) {
$('#prev').attr('disabled', true);
}
$('#next').attr('disabled', null);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<title>javascript problem</title>
</head>
<body>
<div id='div1' class="first current">
<p>
here the content of div 1
</p>
</div>
<div id='div2'>
<p>
here the content of div 2
</p>
</div>
//then another 9 divs
<div id='div12' class="last">
<input type="submit" value="submit" onclick="submit()">
</div>
<div class="buttons">
<button id="prev" disabled="disabled">Prev</button>
<button id="next">Next</button>
</div>
</body>
</html>
what i want to do is have the buttons (in the div 'buttons') in every div and not below. because i want them not to show up at the end, and i want to change the value of it on the first page.
but when i do this, they dont work anymore.
the codesnippet does not work
but what it does is, when you click 'next' the next div will be shown.
here is how i want it:
<div id='div1' class='first current'>
<p>here the content of div 1</p>
<button id="next">Start</button>
</div>
hope its clear

The id attribute in HTML should always be unique. Instead of using the same id on all your next/prev buttons, you should use a class instead. You can then bind the click event using the class instead and it will apply to all the elements with that class.
<button class="next">Start</button>
$('.next').click(function() { ... });

Related

using javascript to toggle the display of other divs within the main div

The click of the button should toggle the visibility of that corresponding button's div. the first pic is what the code should look like from the start, and the second pic shows what the code should look like after clicking the submit button 1.
.toggleDiv{
background: gray;
max-width: 400px;
}
<!DOCTYPE html>
<html>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<body>
<div class="toggleNav">
<div class="Button1">
<input onclick="toggleMain" type="image" src="images/vinylBtn.png">
Button1
</div>
<div class="Button2">
<input onclick="toggleMain" type="image" src="images/cdBtn.png">
Button2
</div>
<div class="Button3">
<input onclick="toggleMain" type="image" src="images/tapeBtn.png">
Button3
</div>
</div>
<div class="toggleDiv">
<div id="mainText">
<h2>main div</h2>
<p>This is where the different divs shouls be toggling
</div>
<div id="Button1">
<p>This is the first div</p>
</div>
<div id="Button2">
<p>This is the second div</p>
</div>
<div id="Button3">
<p>This is the third div</p>
</div>
</div>
</body>
</html>
You can find all you elements by tag a in toggleNav and then add event listener. See my example in playground https://jsfiddle.net/denisstukalov/ompaeL0d/29/:
const links = document.querySelectorAll("div.toggleNav div a");
for (var i = 0; i < links.length ; i++) {
const divId = links[i].innerText
links[i].addEventListener("click",
function (event) {
event.preventDefault();
document.getElementById(divId).style.display = 'block';
},
false);
}

Add class to previous element

I just want to add class for the button after another class but it's inside of another div. Take a look at this example.
<div class="wrap">
<button class="one">Click</button>
<button class="two">Click</button>
</div>
<div class="bottom"></div>
.add-me{
color:red;
}
In here, I want to add to class button one. But it needs to be applied when bottom class appears.(This is a validation message. So I can't style directly to button one.)
I tried with this way. But it only apply for wrapper div.
$('.bottom').prev('div').first().addClass('add-me');
Here is the fiddle: https://jsfiddle.net/eqhj0vm9/2/
You have to use $('.bottom').prev().find(':first-child').addClass('add-me'); to select the prev element's first child.
$(function() {
$(".activate").click(function(){
$('.bottom').show();
$('.bottom').prev().find(':first-child').addClass('add-me');
});
});
.add-me {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<button class="one">Click</button>
<button class="two">Click</button>
</div>
<div class="bottom" style="display:none"> BOTTOM CLASS </div>
<br />
<button class="activate">Activate bottom class</button>

Fade in and fade out my text using Jquery, and also display:none

I kind of have 2 questions.One... I wish to fade in and fade out my text when I click on the images I have on my site. I very fortunately got to get toggle working thanks to the community here, but now I'm curious as to how I can get fadeIn and fadeOut working.
Also I wish to have my text be hidden or not visible until the moment I actually click on the image. One click of the image should cause the text to fade in. If I click the image again, I would like the text to fade out.
Any suggestions?
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JOHN DOE Project</title>
<link rel="stylesheet" type="text/css" href="something_style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
</head>
<script>
$(document).ready(function () {
$(".clickToHideClass").click(function () {
// now toggle only the 'p' under 'this'
$('p', $(this)).toggle();
});
});
$(document).ready(function(){
$("p").hover(function(){
$("p").css("font-style","italic");
$("p").css("color", "pink");
$("p").css("font-weight", "bold");
},function(){
$("p").css("color","normal");
$("p").css("font-style", "normal");
$("p").css("font-weight", "normal");
});
});
</script>
<body>
<div id="wrapper">
<div id="outerWrapper">
<div id="header"><img src=" PUT SOMETHING HERE FOR IMAGE OF YOUR BANNER OR SOMETHING " alt="JohnDoe" width="366" height="66" />
</div>
<div id="topNavigation"></div>
</div>
</div>
<div id="wrapper">
<div id="outerWrapper">
<div id="contentWrapperhome">
<div class="clickToHideClass" id = 'col1'><a><img src="image/DSC04580.JPG" alt="JohnDoe" width="251" height="251" /></a>
<div id="text">
<h1><a>Language and the World</a></h1>
<p><a>An aspiration and dream of mine</a>
</p>
</div>
</div>
<div class="clickToHideClass" id = 'col1'><a><img src="image/DSC04580.JPG" alt="JohnDoe" width="251" height="251" />
</a>
<div id="text">
<h1><a>Music and Drama</a></h1>
<p><a>Keeps me pumping on every hour of the day!</a>
</p>
</div>
</div>
<div id="col1" class = "clickToHideClass"><a><img src="image/DSC04580.JPG" alt="JohnDoe" width="251" height="251">
</a><div id="text">
<h1><a>Friendship</a></h1>
<p><a> Without them I really wouldn't know Myself</a></a></p>
</div></div>
</div>
</div></div>
<div id="outerWrapper">
<div id="footer">Contact information | Website | Terms | Site by </div>
</div>
</div>
</body>
</html>
This is part of the CSS:
#text p a {
text-decoration: none;
}
In the css I want to enter, "display:none", but doing that will cause the toggle to not work.
If I understand your problem correctly, try this:
$(".clickToHideClass img").click(function() {
$(this).find("#text").fadeToggle();
});

How do I show and hide dive on button click in html css trick?

I have responsive Html website
I want to hide and show on click of next in simple html
DEMO PAGE
Q1.WHAT IS YOUR NAME
ANS - JAMES
Q2.WHAT IS YOUR ADDRESS
ANS- PUNE
here Q1 and Q2 are on the same page but
I want to show only one question at a one time but do not want to create multiple physical pages.
I tried using hide and show trick of css but I want to do it on simple html button click NEXT
want output like following
Q1.WHAT IS YOUR NAME
ANS- JAMES
[CLICK NEXT]
it will load Q2 on same page.
I tried not using one page with different pages like below.
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<nav>
<ul class="group">
<li>Q1</li>
<li>Q2</li>
</ul>
</nav>
<section id="main-content">
<div id="guts">
Q1.WHAT IS YOUR NAME
ANS - JAMES
</div>
</section>
Using just Javascript you can do this fairly easily. Something like this should work:
HTML
<label id="name">What is your name?<input type="text" /></label>
</br>
<label id="address">What is your address?<input type="text" /></label>
</br>
<button id="next">Next</button>
CSS
#address {
display: none;
}
Javascript
document.getElementById('next').onclick=function(){
document.getElementById('address').style.display='block';
};
Here is a fiddle: http://jsfiddle.net/YJRbE/
Or, if you'd prefer to use jQuery, something like this:
$('#next').on('click', function() {
$('#address').show();
});
Here is a fiddle for the jQuery version: http://jsfiddle.net/XyNXq/
Here some example with jQuery which supports more than two questions:
Try to wrap all your questions in a div and use jquery for the click event so each time you click the button a next question will appear.
In this method you should include all your questions inside the wrapper div and set their display to none.
http://jsfiddle.net/ZFZfY/1/
Edit: http://jsfiddle.net/ZFZfY/3/
HTML:
<div class="questionWrapper">
<div class="question show" id="questionOne">
<label>foo bar?</label>
<input type="text">
</div>
<div class="question" id="questionTwo" style="display: block;">
<label>foo bar?</label>
<input type="text">
</div>
</div>
<a class="NextQuestion" href="#">Next Question</a>
CSS:
.question{ display: none;}
.show{ display: block;}
jQuery:
$('.NextQuestion').click(function(e){
e.preventDefault();
loadNext();
});
$('.PrevQuestion').click(function(e){
e.preventDefault();
loadPrev();
});
function loadNext(){
// loop to verify what is visible
$('.questionWrapper').children().each(function(i){
if($(this).css('display') === 'block' && $(this).next().length > 0){
$(this).css('display','none');
$(this).next().fadeIn();
return false;
}
});
}
function loadPrev(){
// loop to verify what is visible
$('.questionWrapper').children().each(function(i){
if($(this).css('display') === 'block' && $(this).prev().length > 0){
$(this).css('display','none');
$(this).prev().fadeIn();
return false;
}
});
}
here is script
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.content').each(function() {
var $this = $(this);
$this.find(':not(.col:first,.active)').hide();
$('.col').children().removeAttr('style');
});
$("#add").click(function() {
$(".col:hidden:first").show("slow");
$('.col').prev().hide();
});
});
</script>
here demo html
<div class="content">
<div class="col">
<h3>What Is Your Name</h3>
<input type="text">
</div>
<div class="col">
<h3>What Is Address</h3>
<input type="text">
</div>
<button id="add" class="active">Add</button>
</div>
Hope this helps.
You can change the visibility of elements on button click like this.
document.getElementById('name').style.display='none';
document.getElementById('address').style.display='block';
Here is the working demo

Jquery toggle only showing, not hiding

I am trying to toggle showing something on my page, but it will show up but won't hide after I click the button again. When I click the button, the part I want to show shows up just fine, but when I click it again, it does not hide. Here is my code.
<head>
<script src="JQ.js"></script>
<script>
$(document).ready(function() {
$(".thingy").hide();
$(".show_button").click(function() {
$(".thingy").toggle();
});
});
</script>
</head>
<body>
<div class="show_button_box">
<div class="menu">
<div class="show_button" style="color:black;font-weight:bold;text-decoration:underline;position:relative;top:-8px;left:15px;">Show</div>
</div>
</div>
</body>
/* My php is here*/
echo"
<div class='thingy' onclick='$(\"thingy\").hide();'>
<div id=\"container\">
<div class=\"menu\">
<div class=\"button\" onclick=\"loadpage('bots','Bot Creator');\"><b style='color:black'>Create Bot</b></div><br /><br />
<div class=\"button\" onclick=\"loadpage('close','Emergancy Close Client');\" style=\"background-color:red;color:black;font-weight:bold;border-radius:6px;\">Emergency Close.</div><br /><br />
<div class=\"button\" onclick=\"loadpage('news','Spark News.');\" style=\"background-color:lime;color:black;font-weight:bold;border-radius:6px;\" >Spark News.</div></div><br /><br />
<div id=\"addedcontent\">
<div id=\"b-header\"> header </div>
<div id=\"b-content\"> content </div> </div></div></div>";
}
in your php
you have missed a . in css selector
<div class='thingy' onclick='$(\".thingy\").hide();'>

Categories