I have 2 html pages application and on second page I open dialog by using css only.
1st page has one button:
<button onClick="redirectToDetails()">Go to details</button>
and JS:
function redirectToDetails(){
window.location = "second-page.html";
}
on second page I have button Back and button 'open dialog'
JS:
function goBack(){
window.history.back();
}
function openDialog(){
window.location = "#modal-one"
}
THE DEMO
My dialog content is:
<div class="gl-modal" id="modal-one" aria-hidden="true">
<div class="gl-modal-dialog">
<div class="gl-modal-header">
<h2>Modal in CSS?</h2>
×
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="gl-modal-footer">
Nice! <!--CHANGED TO "#close"-->
</div>
</div>
</div>
The problem:
When I go from 1st view to second view and open Dialog, back button doesn't work. It opens me dialog again because I use window.history.back();
I tried a lot of ways to clear history, to redirect back to main page - nothing works
How can i open dialog and do not record to history , so window.history.back(); will turn me to main view?
Can someone help me with that problem?
In my humble opinion, you should just stick to two technologies, not mix up hyperlinks and hashes and manual history manipulation. Use simple hyperlinks for navigation between views and use hash links for the modals. That way the standard browser back button even works as well.
This version works for me:
index.html
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Main view</h1>
Second view
</body>
</html>
second-page.html
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Second view</h1>
Back
<button onClick="openDialog()" >open Dialog</button>
<div class="gl-modal" id="modal-one" aria-hidden="true">
<div class="gl-modal-dialog">
<div class="gl-modal-header">
<h2>Modal in CSS?</h2>
× <!--CHANGED TO "#close"-->
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="gl-modal-footer">
Nice! <!--CHANGED TO "#close"-->
</div>
</div>
</div>
<script>
function openDialog(){
window.location.hash = "#modal-one"
}
</script>
</body>
</html>
Declare one function as below,
function closeDialog() {
window.history.back();
}
Now change your close tag as below
Nice!
New Second Html File
<!doctype html>
<html >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Second view</h1>
</br>
Back
</br>
</br>
</br>
<button onClick="openDialog()" >open Dialog</button>
<div class="gl-modal" id="modal-one" aria-hidden="true">
<div class="gl-modal-dialog">
<div class="gl-modal-header">
<h2>Modal in CSS?</h2>
<a onClick="closeDialog()" class="btn-close" aria-hidden="true">×</a> <!--CHANGED TO "#close"-->
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="gl-modal-footer">
Nice! <!--CHANGED TO "#close"-->
</div>
</div>
</div>
<script>
function openDialog(){
window.location = "#modal-one"
console.log(window.location);
}
</script>
</body>
</html>
Alternatively, you can use checkbox to trigger the modal, thus you will not need to deal with the hash issue because it doesn't produce hash fragments, basically give both the checkbox display:none, style the label to look like a button.
Also the label must have for attribute to be tied to the corresponding checkbox even if there're other elements between them, it could wrap it too but using for gives you more freedom.
plunker
CSS:
.chkbx, .overlay {
/* hide all overlays and checkboxes */
display: none;
}
#chk1:checked ~ #over1 {
/*if checkbox#chk1 is checked, trigger the display of the div#over1 */
display: block;
}
HTML:
<label class="btn-label" for="chk1">open modal - using label (css only)</label>
<input type="checkbox" class="chkbx" id="chk1">
<div class="overlay" id="over1">
<div class="modal">this is modal
<p>close
and yes you can have another label to close the modal with no need for javascript
<p><label class="btn-label" for="chk1">close</label></p>
</p>
</div>
</div>
The ~ in #chk1:checked ~ #over1 will work only if overlay #over1 comes after (but not necessary right after it, other elements could be between them) the checkbox #chk1, both are siblings and having same parent (you can use chk1:checked + #over1 instead but then #over1 must come right after #chk1 with no elements between them)
Related
Here is my code: When I click on one button, it hide all links. And show on one button also. Links and titles are lists which change their lengths in python. I want to show the link of only button which is clicked not all. I have also tried using div but also same problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Python Jobs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css">
<section class="hero is-dark is-bold">
<div class="hero-body">
<p class="title">
Job Title
</p>
<p class="subtitle">
Python jobs
</p>
</div>
</section>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("a").hide();
});
$("#show").click(function(){
$("a").show();
});
})
</script>
</head>
<body>
<section class="section">
<div class="container">
{% for i in range(0, len-1) %}
<h3>{{i+1}}. {{title[i]}}</h3>
<a href={{links[i]}}>{{links[i]}}</a>
<button id="show">Show</button>
<button id="hide"> Hide</button>
<br>
{% endfor %}
</div>
</section>
</body>
</html>
There are multiple problem in your code.
id must be unique so use class instead of id.
Wrap your each heading and link with container. In your case move your div inside for loop.
Based upon your button click find your heading and link to show / hide.
Initially hide your heading and link (It's depend upon your logic, how you want to present UI)
Example:
$(".hide").click(function() {
$(this).parent('div').find('a ,h3').hide();
});
$(".show").click(function() {
$(this).parent('div').find('a ,h3').show();
});
a,
h3 {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h3>Title1</h3>
Link1
<button class="show">Show</button>
<button class="hide"> Hide</button>
</div>
<div class="container">
<h3>Title2</h3>
Link2
<button class="show">Show</button>
<button class="hide"> Hide</button>
</div>
My goal is to build a dynamic FAQ page where the questions are visible, and when you click on the said question the div with the answer would appear. Once you click the div again it would toggle again.
I've tried a few things and the best result I've accomplished was toggling the first question's answer regardless of what question was clicked.
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<link href="./img/favicon.png" rel="shortcut icon"/>
<meta charset="utf-8"/>
<meta content="width=1280, maximum-scale=1.0" name="viewport"/>
<link th:href="#{css/faq.css}" rel="stylesheet" type="text/css"/>
<link th:href="#{css/faq-new.css}" rel="stylesheet" type="text/css"/>
</head>
<body style="margin: 0;
background: rgba(255, 255, 255, 1.0);">
<input id="anPageName" name="page" type="hidden" value="faq"/>
<div class="faq">
<th:block th:insert="_header.html :: header"></th:block>
<div class="rectangle2">
</div>
<div class="justaskus">
Just Ask Us
</div>
<!-------========= FAQ =========------------->
<div class="faq-container">
<div class="th-start" th:block th:each="faqType, stats : ${faqTypeDaoList}">
<div class="q-type-wrapper">
<div class="type-header">
<h4 th:text="${faqType.faqTypeName}"></h4>
</div>
<!----========= Question ========--------->
<div class="th-wrap" th:each="question, stat: ${faqTypeDaoList[_${stats.index}_].faqList}">
<a href="#">
<div id="box" class="question-box">
<div class="bullet"></div>
<img th:src="#{img/artboard-copy-3-unnamed-3#2x.png}" class="arrow"/>
<img th:src="#{img/artboard-copy-3-unnamed-13#2x.png}" class="unnamed" style="display:none;"/>
<div class="questions" th:text="${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].question}"></div>
<div id="answers" class="dropdown-answer" th:text="${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].answer}"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$('#box').on("click", ()=> {
$(this).children[3].toggle();
});
});
</script>
That is my current code and it does absolutely nothing. Here are a few attempts I took
/* One attempt */
$('.questions').on("click",function(){
// "this" in $(this) --> means the current clicked element
// .find() will search the CHILDREN of the clicked element with the class "sub-nav"
$(this).find("dropdown-answer").toggle();
});
/* Another attempt. This one toggled only the first question's answer regardless if what button was clicked. */
var click = document.getElementById("dropdown-answer");
if(click.style.display === "none") {
click.style.display = "block";
}
else {
click.style.display = "none";
}
Is this even possible?
find() will find children inside the element you provide (so in this case you put this in it so .questions) but your .dropdown-answer is not a child of that element.
you can write it like this
$(this " + .dropdown-answer").toggle();
Or place the element inside the .questions element and get it like this
$(this).find(".dropdown-answer").toggle();
I can't redirect to the next page. Please help me. I have a project due tomorrow. I've been trying for more than five hours. Please help me. I'm begging you guys. I don't know what I'm doing wrong. I'm very new to Javascript.
Please tell me what I'm doing wrong
document.getElementById("one").onclick = function() {
location.href = "lessons.html"
};
<!DOCTYPE html>
<html>
<head>
<title> MaxFluency Tutorials Page</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="tutorial.css">
</script>
</head>
<body>
<header>
<div class="topbar">
<center>
<p> Tutorials</p>
</center>
</header>
</div>
<div class="lessons">
<center>
<button class=les id=one type="button"> <h3> Lesson 1: </h3> Nature of Communication </button>
<button class=les id="2nd"> <h3>Lesson 2:</h3></button>
<button class="les" id="3rd"> <h3>Lesson 3:</h3></button>
</center>
</div>
<div class="nav">
<center><button class="loc"> Home</button>
<button class="loc"> Highscores </button>
<button class="loc"> Support us!</button>
</center>
</div>
<script type="text/Javascript" src="tutorials.js">
</script>
</body>
</html>
Your HTML is quite malformed, with some opening tags not closed anywhere, closing tags that do not have any matching tag, etc... This needs some tidying.
Also, if this Javascript code is in an external file, make sure it is wrapped in an onload event (making sure that all HTML elements actually loaded before calling document.getElementById). Finally, note the semicolon placement. You should place the semicolon after the statement, not after the function's ending }!
Side note: Why re-inventing the wheel when you can simply use an anchor tag (<a>) for redirecting?
onload = function() {
document.getElementById("one").onclick = function () {
console.log("clicked!");
location.href = "lessons.html";
}
}
<!DOCTYPE html>
<html>
<head>
<title> MaxFluency Tutorials Page</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="tutorial.css">
</head>
<body>
<header>
<div class="topbar">
<center> <p> Tutorials</p> </center>
</div>
</header> <!-- this closing tag was missing -->
<div class="lessons">
<center>
<button class=les id=one type="button" > <h3> Lesson 1: </h3> Nature of Communication </button>
<button class=les id="2nd"> <h3>Lesson 2:</h3></button>
<button class="les" id="3rd"> <h3>Lesson 3:</h3></button>
</center>
</div>
<div class="nav">
<center><button class="loc"> Home</button>
<button class="loc"> Highscores </button>
<button class="loc"> Support us!</button>
</center>
</div>
<script type="text/Javascript" src="tutorials.js"></script>
</body>
</html>
1) there is a lonely closing script tag in the head section.
2) your closing header and div tags before .lessons are in reverse order
3) Here is a fiddle that seems to be working. Button goes to a 404 just because the lessons.html doesn't exist here.
I also added a slash for a relative path. I assume you are probably working from a single root directory given that it is a tutorial but I could be wrong there.
location.href = "/lessons.html";
https://jsfiddle.net/y7txje5c/1/
This question already has answers here:
What is the difference between client-side and server-side programming?
(3 answers)
Closed 6 years ago.
Hello this is what i want to do. I want to show the alert box after the user click the link. My link is directed to another php page but it will come back again to the page where the link is found. How can i achieve this? Can someone give me ideas on how to do it?
this is what i tried but not working.
<?php
function fsa() {
echo '<div class="alert alert-success alert-dismissable" id="success-alert">';
echo '<strong>Successfully posted!</strong>';
echo '</div>';
}
<a class='btn btn-info left-margin' href="dbf-import.php" onclick="fsa()">Import Database</a>
This is an example to show the dissmissable alert box when clicking on a button.
$(document).ready(function() {
$('.activater').click(function() {
$('.alert').show()
})
});
.alert {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="container">
<h2>Dismissal Alert Messages</h2>
<button class="activater">Send Message</button>
<a class="activater">SHOW MESSAGE</a>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
Success! message sent successfully.
</div>
</div>
</body>
You can achieve it through Bootstrap modal instead of alert box. You can design it as according to your need.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
click on this link :
<!-- Trigger the modal with a button -->
<span data-toggle="modal" data-target="#myModal">www.google.com</span>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Alert Box. Click 'OK' to go to www.google.com</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onClick="document.location.href='www.google.com'">Go</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
PHP is used to generate the HTML and JS. You can have both in a PHP file but you need to see the difference between PHP and JS. The function you've called fsa() is a JS function because it will run client side (on the client machine and after page has been loaded). The onclick param in the HTML tag needs to have a JS function hooked. This way when you click on your <a> tag, fsa() will be fired and the box will show up on the page.
// this is JS, you need <script> tags !!!
<script>
function fsa() {
// define a new variable
var box = '';
// add the HTML inside the JS variable
box += '<div class="alert alert-success alert-dismissable" id="success-alert">';
box += '<strong>Successfully posted!</strong>';
box += '</div>';
// append the HTML contained inside box to the body
document.querySelector('body').innerHTML += box;
}
</script>
<a class='btn btn-info left-margin' onclick="fsa()">Import Database</a>
If you wish to save the data without reloading the client's page, you may want to use AJAX
First of all, like #Iceman said: You are trying to run a javascript function in php, so start by deleting all that. If you just want the user to get an alertbox when clicking on a link, you can simply add
<script> function fsa(){
alert("Your alert message");
}
</script>
Also, if you don't want the person to leave the side, just put href='#', that should take care of it.
Try this
<script type="text/javascript">
function Alert() {
var answer = confirm ("Successfully posted!Please click on OK to continue.")
if (answer)
window.location="http://www.yoursite.com";
}
</script>
click me
I have a form, when textbox is focused (onfocus), it triggers a marquee tag (in this case 'name') from left of textbox using javascript. But after the modal is opened, the marquee tag disappears and when the text field is focused again(onfocus), the marquee text does not come to display.
NOTE - marquee functionality for my code only worked for Mozilla firefox. So please try the code in firefox.
Steps -
Click the text box.
'Name' flows out using marquee.
Click 'Open modal'.
'Name' disappears (as soon as modal opens).
Close the modal.
Click the text box again, the marquee text doesn't trigger.
<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#vpass{
display:none;
}
</style>
<script>
function anim(field) {
document.getElementById(field).style.display = "block";
}
</script>
</head>
<body>
Open Modal
<div class="modal fade" role="dialog" id="modall">
<div class="modal-dialog">
<div class = "modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">MODAL</h4>
</div>
</div>
</div>
</div>
</br></br></br></br>
<table>
<tr>
<td width="90px"><label id="vpass"><marquee direction="left" behavior="slide">name</marquee></label></td>
<td>
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="name" name="name" onfocus= anim("vpass") required/>
</div>
</td>
</tr>
</table>
</body>
</html>
Thank you
Please notice that <marquee> is an obsolete HTML5 element and its usage has been discouraged by W3C Standards:
The <marquee> element is a non-standard element. HTML5 classifies it as a non-conforming feature.
The reason that you shouldn't use <marquee> its because you can't assure support by the browsers. This advice is also encouraged by Can I Use.
You'd better animate your text with CSS3 animations or JavaScript. This question has some good sources about how you can emulate <marquee> behaviour.
I refactored the code a bit to use CSS transitions instead, as they provide better performance. That way, the moving label is no longer affected by the modal window, at all. Take a look at the updated snippet below:
<!DOCTYPE html5>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
td {
position: relative;
}
#vpass {
position: relative;
left: 100%;
transition: left 0.8s ease-in-out;
}
#vpass.active {
left: 0%;
}
</style>
<script>
function anim(field) {
document.getElementById(field).className = "active";
}
$(document).ready(function() {
$('#name').on('blur', function() {
$('#vpass').removeClass('active');
});
});
</script>
</head>
<body>
Open Modal
<div class="modal fade" role="dialog" id="modall">
<div class="modal-dialog">
<div class = "modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">MODAL</h4>
</div>
</div>
</div>
</div>
</br></br></br></br>
<table>
<tr>
<td width="90px"><label id="vpass">name</label></td>
<td>
<div class="form-group">
<input type="text" id="name" class="form-control" placeholder="name" name="name" onfocus= anim("vpass") required/>
</div>
</td>
</tr>
</table>
</body>
</html>
I also added functionality to deactivate the element class on blur. Let me know if you have any questions!
Try replacing the following anim function with the existing function
function anim(field) {
document.getElementById(field).style.display = "none";
$('#vpass').html('<marquee behavior="slide" direction="left" scrollamount="10">name</marquee>').show();
}
If this solution helps, don't forget to accept this answer