For some reason, i have this two functions in my javascript, and both seems to work.
The first one, is when user click on one of two divs, it will show the other div, depending on wich was clicked.
The second one, is when the user is on the second div, and clicks on back.
All this is working, but when the user return to the first div, and i click on one of two divs, this isnt going to the second div.
It's closing both divs.
First Div with two options:
<div class="firstQuestion">
<div class="male" onclick="secondQuestion(this);"></div>
<div class="female" onclick="secondQuestion(this);"></div>
</div>
Second div, with back button:
<div class="secondQuestion">
<form class="formAconselhamento" id="male">
<input type="button" id="save_value_male" class="back" name="save_value" onclick="comeBack(this); return false;"/>
<input type="button" id="save_value_male" class="next" name="save_value" />
</form>
</div>
Javascript functions:
function secondQuestion(divID)
{
var clicado = $("#"+$(divID).attr('class'));
$(".firstQuestion").hide();
$("#"+$(divID).attr('class')).show();
}
function comeBack(divID)
{
var backButton = $(divID).attr('id');
if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
{
$(".secondQuestion").hide();
$(".firstQuestion").show();
}
}
How can i resolve my issue?
In comeBack function you hide <div class="secondQuestion"> instead of <form class="formAconselhamento" id="male">
Try something like:
function comeBack(divID)
{
var backButton = $(divID).attr('id');
if ( backButton == 'save_value_female' || backButton == 'save_value_male' )
{
$(divID).closest("form").hide();
$(".firstQuestion").show();
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.maincat{background: #eef;}.subcat{background: #abc;}
</style>
</head>
<body>
<div class="maincat">
<div class="type" rel='one'>first</div>
<div class="type" rel='two'>second</div>
<div class="type" rel='three'>third</div>
</div>
<div class="subcat" style="display: none">
back
<div id="one">
first content
</div>
<div id="two">
second content
</div>
<div id="three">
third content
</div>
</div>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".type").click(function(){
$(".maincat").hide();
$("#" + $(this).attr('rel')).show().siblings().hide();
$('.subcat').show();$('.back').show();
});
$(".back").click(function(){
$('.subcat').children().hide();$(".maincat").show();
});
</script>
</body>
</html>
Related
I'm building a single-page web app. In this one file, I want a specific div to be shown on startup. Perhaps the user will then press a button, and a new div will replace it.
Right now, I'm using js to hide one div and show another in this case. The problem is, the new div appears further down the page (as it is written in the html file after the first div).
How can I, using javascript, simply replace one div with another as the user navigates back and forth between the divs? Is this possible and recommended?
/* JS
When #firstButton is pressed, replace div #first with div #second
When #secondButton is pressed, replace the div #second with div #first
*/
#second {
visibility: hidden;
}
<div id="first">
<h1>First Page</h1>
<button id="firstButton">Go to second page</button>
</div>
<div id="second">
<h1>Second Page</h1>
<button id="secondButton">Go to first page</button>
</div>
Using visibility: hidden is causing your elements to still take up space, which is why your "pages" don't appear to change places.
Switch to display: none, which can be easily toggled with jQuery's .show() and .hide() like so:
$("#firstButton").on("click", function() {
$("#first").hide();
$("#second").show();
});
$("#secondButton").on("click", function() {
$("#first").show();
$("#second").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
<h1>First Page</h1>
<button id="firstButton">Go to second page</button>
</div>
<div id="second" style="display: none;">
<h1>Second Page</h1>
<button id="secondButton">Go to first page</button>
</div>
If you don't want to use jQuery:
document.getElementById("firstButton").addEventListener("click", () => {
document.getElementById("first").style.display="none";
document.getElementById("second").style.display="block";
}, false);
document.getElementById("secondButton").addEventListener("click", () => {
document.getElementById("first").style.display="block";
document.getElementById("second").style.display="none";
}, false);
<div id="first">
<h1>First Page</h1>
<button id="firstButton">Go to second page</button>
</div>
<div id="second" style="display:none">
<h1>Second Page</h1>
<button id="secondButton">Go to first page</button>
</div>
$(document).ready(function () {
$(".req_sent").hover(function () {
$(".drop").toggle("hover");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
I have a simple button i.e. Sent. Now, What I actually want when I hover on Sent button then It show div i.e. <div class="drop"> but it hide when I move cursor from Sent button to <div class="drop">.
Now, I want stay on <div class="drop"> when hover on Sent if I remove my mouse from <div class="drop"> it will hide again. So, How can I do this? Please help me.
Thank You
you can try below code where show drop when hover on sent button. On hover of drop do nothing but hide it when you leave drop
$(document).ready(function () {
$(".req_sent").hover(function(){
$(".drop").show();
});
$(".drop").hover(function(){
//do nothing
}, function(){
$(this).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
Here you go
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
</div>
<script>
$(document).ready(function () {
$(".profile_btnn").hover(function(){
$(".drop").toggle("hover");
});
});
</script>
You want to keep, visible div event mouse out from Sent button. And hide when its mouse over on div
Just don't use toggle() and apply show() to get it done.
Please check below code:
$(document).ready(function () {
$(".req_sent").hover(function () {
$(".drop").show('slow');
});
$(".drop").hover(function () {
$(".drop").hide('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="profile_btnn">
<button type="submit" name="req_sent" class="btnplus req_sent">Sent</button>
</div>
<div class="drop" style="display:none;">
<p>hello</p>
</div>
I am creating a list of radio button selections for an order form. Each of the questions has an answer that contains a div with additional information. I have them all set up to show the div when the radio button is clicked, but when you go to the next question and click an option, it hides the above answer and unselects the radio button for the previous question.
Edit To Clarify: Only one of the radio button options should bring up the additional info box per question. So if you click yes to question 1, you get an info box. If you click NO on question 1, there is no info box.
I would like the previous radio buttons to stay selected. I started with this code and modified it to have multiple questions:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>
<div id="tabs">
<div id="nav">
<p>Show Div 1:<input type="radio" name="tab" value="pkfrom" class="div1" /></p>
<p>Show Div 2:<input type="radio" name="tab" value="pkfrom" class="div2" /></p>
</div>
<div id="div1" class="tab">
<p>this is div 1</p>
</div>
<div id="div2" class="tab">
<p>this is div 2</p>
</div>
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
}
}
}
/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}
hideTabs(); /* hide tabs on load */
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</body>
</html>
Here is the jsfiddle: https://jsfiddle.net/lenniejane/d58phaua/
First you need to put different names of radio buttons, I also made some changes in html :
<div id="tabs">
<div class="nav">
<p><strong>QUESTION 1</strong></p>
<div class="answers">
<p><input name="tab" type="radio" value="residential-yes">Yes</p>
<p><input name="tab" type="radio" value="residential-no">No</p>
</div>
<div class="tab" id="div1">
<p class="fee-notice">ADDITIONAL INFO 1</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
<br>
<div class="nav">
<p><strong>QUESTION 2</strong></p>
<div class="answers">
<p><input name="tab2" type="radio" value="lift-yes">Yes</p>
<p><input name="tab2" type="radio" value="lift-no">No</p>
</div>
<div class="tab" id="div2">
<p class="fee-notice">ADDITIONAL INFO 2</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
<br>
<div class="nav">
<p><strong>QUESTION 3</strong></p>
<div class="answers">
<p><input name="tab3" type="radio" value="inside-yes">Yes</p>
<p><input name="tab3" type="radio" value="inside-no">No</p>
</div>
<div class="tab" id="div3">
<p class="fee-notice">ADDITIONAL INFO 3</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
<br>
<div class="nav">
<p><strong>QUESTION 4</strong></p>
<div class="answers">
<p><input name="tab4" type="radio" value="inside-yes">Yes</p>
<p><input name="tab4" type="radio" value="inside-no">No</p>
</div>
<div class="tab" id="div4">
<p class="fee-notice">ADDITIONAL INFO 4</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
</div>
css :
.tab {
display: none;
}
.nav.showtab .tab{
display:block;
}
and js will be like this :
var inputsEle = document.getElementsByTagName('input');
var navEle = document.getElementsByClassName('nav');
for(i=0; i<inputsEle.length; i++){
inputsEle[i].addEventListener("change", function(e){
var thiisNav = e.target.parentElement.parentElement.parentElement;
diplayNewTab(thiisNav)
});
}
function diplayNewTab(thiisNav){
for(i=0; i<navEle.length; i++){
navEle[i].classList.remove("showtab");
}
thiisNav.className += ' showtab';
}
https://jsfiddle.net/d58phaua/2/
UPDATE:
if you need to keep the "additional info" for previous questions visible when answering another question use this js :
var inputsEle = document.getElementsByTagName('input');
var navEle = document.getElementsByClassName('nav');
for(i=0; i<inputsEle.length; i++){
inputsEle[i].addEventListener("change", function(e){
var thiisNav = e.target.parentElement.parentElement.parentElement;
thiisNav.className += ' showtab';
});
}
Demo : https://jsfiddle.net/d58phaua/3/
https://jsfiddle.net/d58phaua/1/
Here you go.
You just need to put different names of radio buttons
<input name="tab1" type="radio" value="residential-no">No</p>
After start the application, i load content of formularzZgloszeniowy to empty div(#zawartoscTabeli). After click in li element, i load dates from div #ogloszenia to div(#zawartoscTabeli). From this moment, i can't catch event from button #kik.
Has someone any idea how to solve this problem??
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<meta charset="utf-8">
<title>Dokument bez tytułu</title>
<script>
$(document).ready(function() {
$('#zawartoscTabeli').stop().css('opacity', '0').html($('#formularzZgloszeniowy').html()).animate({
opacity: 1
}, 500);
$("section ul").on('click', 'li', function() {
var id = this.id;
$('#zawartoscTabeli').stop().css('opacity', '0').html($('#ogloszenia div:nth-child(' + id + ')').html()).animate({
opacity: 1
}, 500);
});
$('#kik').click(function() {
alert('dddd');
});
});
</script>
</head>
<body>
<div id="wrapper">
<section>
<ul>
<li id="1" style="font-size: 12px;">CLICK</li>
</ul>
<div id="zawartoscTabeli">
</div>
</section>
<!--formularz zgloszeniowy-->
<div id="formularzZgloszeniowy" style="display: none">
<form id="form1" action="rejestracjaUzytkownika.jsp" method="POST">
<div class="formualrz">
<div class="width20">Preferowane miejsce pracy<sup>*</sup>:</div>
<div class="width20">
<input type="text" name="miejsce_pracy" />
</div>
</div>
<div class="formualrz">
<div class="left">Imię i nazwisko<sup>*</sup>:</div>
<div class="right">
<input type="text" name="imie_nazwisko" />
</div>
</div>
<BR/>
<BR/>
</form>
</div>
<!--formularz zgloszeniowy-->
<div id="ogloszenia" style="display: none">
<div>
<p class="bold">Opis stanowiska:</p>
<ul>
<li>123</li>
<li>1234</li>
<li>326236</li>
</ul>
<button id="kik">BACK</button>
</div>
</div>
</div>
</body>
</html>
Link to demo
As you're updating the html of element, the events are unbinded. Use event delegation:
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$('#zawartoscTabeli').on('click', '#kik', function () {
alert('Łot de fack');
});
Demo: http://jsfiddle.net/tusharj/95v7fbbe/1/
Docs: http://learn.jquery.com/events/event-delegation/
I've been trying to hide a button when a div is empty with no luck, why is the div empty? because via back-end wordpress i'm inserting a shortcode in it.
this is the code:
<head>
<script src="jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() { if ( $(".whatever").parents("#content").length == 1 ){
$('input#bt23').show();
}else { $('input#bt23').hide();
});
</script>
</head>
<body>
<div id="content">
///empty
</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" /></body>
That's pretty much it, trying to get the button to disappear if there's no other div insider #Content, any ideas?
I just noticed that, maybe just maybe the div is not empty, it looks like it's empty but i think is filled with space.
So rather than comparing empty with filled, how would it be to compare filled with text and a specific div inside it?
like this:
<div class="content">
<div style="whatever">
<div class="video-wrapper" style="padding-bottom:56.2222222222%;">
Check for text or html:
Without content
$(document).ready(function() {
if ( $("#content").text() ){
$('input#bt23').show();
} else {
$('input#bt23').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"></div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
With content
$(document).ready(function() {
if ( $("#content").text() ){
$('input#bt23').show();
} else {
$('input#bt23').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">Content here</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
With spaces only
$(document).ready(function() {
if ( $("#content").text().trim() ){
$('input#bt23').show();
} else {
$('input#bt23').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content"> </div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
Checking for a specific div
We can be a little creative here. Let's say we're looking for the .video_wrapper div inside the content. We can simply query for it, and if it's not found, the returned length will be zero, causing the input to hide.
$(document).ready(function() {
console.log($("#content .video-wrapper"));
if ($("#content .video-wrapper").length > 0) {
$('input#bt23').show();
} else {
$('input#bt23').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div class="content">
<div style="whatever">
<div class="video-wrapper"></div>
</div>
</div>
</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
Checking for a specific div - plain JS
function windowReady() {
if (document.querySelector("#content .video-wrapper")) {
document.getElementById('bt23').style.display = "block";
} else {
document.getElementById('bt23').style.display = "none";
}
};
window.onload = windowReady;
<div id="content">
<div class="content">
<div style="whatever">
<div class="video-wrapper"></div>
</div>
</div>
</div>
<input type="button" id="bt23" class="bt23" name="Button1" value="720p" />
You trying to accomplish something like this?
$(document).ready(function() {
if ( $("#content").html() == '' )
{
$('input#bt23').hide();
}
else {
$('input#bt23').show();
}
});
well first of all this should be handled server sided in PHP, you should check there if any contend comes out. failing to do that there is a jquery solution.
if($.trim($("#content").text()) == ""){$("#bt23").hide();}