What is the best way to implement previous and next page logic - javascript

I have a webpage which is a huge form (6 pages long). In order to make it more user friendly, I decided to break this down into different sections (div tags).
I have placed Previous and Next button on page. On previous click it should display the previous div tag I was at and next should display the next div tag. I was wondering what would be the best way to implement it? So far I have this function which I know is hardcoded for div tag called GeneralSection. Just like GeneralSection, I have 20 more sections. Any ideas how should I go about it ? Help appreciated! :)
$(document).ready(function () {
$("#imgNext").click(function () {
$("#GeneralSection").hide();
});
});

You could just iterate through an array of elements.
Here's a simple JSBin that should get you going: https://jsbin.com/siyutumizo/edit?html,js,output
$(document).ready(function() {
var $steps = $('.step');
var currentStep = 0,
nextStep;
$steps.slice(1).hide(); //hide all but first
$('#next').on('click', function(e) {
e.preventDefault();
nextStep = currentStep + 1;
if (nextStep == $steps.length) {
alert("You reached the end");
return;
}
$($steps.get(currentStep)).hide();
$($steps.get(nextStep)).show();
currentStep = nextStep;
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="wizard">
<div class="step">1</div>
<div class="step">2</div>
<div class="step">3</div>
<div class="step">4</div>
<div class="step">5</div>
<div class="step">6</div>
</div>
<button id="next">Next</button>
</body>
</html>

Another way of implementing this is through siblings.
Jsbin: https://jsbin.com/tarajuyusu/edit?html,js,output
$(function() {
$('div#GeneralSection').slice(1).hide(); // hide all section, except for first one
$('#imgNext').on('click', function() {
var section = $('div#GeneralSection').filter(':visible');
if ($(section[0].nextElementSibling).attr('id') != "GeneralSection")
return;
section.hide();
$(section[0].nextElementSibling).show();
});
$('#imgPrev').on('click', function() {
var section = $('div#GeneralSection').filter(':visible');
if ($(section[0].previousElementSibling).attr('id') != "GeneralSection")
return;
section.hide();
$(section[0].previousElementSibling).show();
});
});

Give each section class pages and per section ids page-1, page-2 like that
$(document).ready(function () {
var pages = $(".pages").length;
$("#imgNext").click(function () {
var nextPageNo = parseInt($(".pages:visible")[0].id.split('-')[1])+1;
if(nextPageNo > pages)
return false;
$(".pages:visible").fadeout();
$("#page-"+nextPageNo).fadeIn();
});
});
Havent fully tetsted but this should get you going.
Update
HTML
<div id="container">
<div id="page-1" class="pages">1</div>
<div id="page-2" class="pages">2</div>
<div id="page-3" class="pages">3</div>
<div id="page-4" class="pages">4</div>
<div id="page-5" class="pages">5</div>
<div id="page-6" class="pages">6</div>
</div>
CSS
.pages{
display: none;
}
#page-1{
display: block;
}

Related

jQuery - Hiding One Div & Showing Multiple Other Divs

http://jsfiddle.net/cEJtA/
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
$(".div1, .div2").hide();
if ($(this).attr("class") == "link1")
{
$(".div1").show();
}
else
{
$(".div2").show();
}
});
});
Can anyone please help with this code.
I want 5 divs that work based on the link that's clicked, so there are 5 divs either shown/hidden.
I can do everything except the if/else statement for more divs - any help please?
Off the top of my head, you can add a data attribute on the class and use that to toggle the targeted div element.
$(function () {
$(".div1, .div2,.div4, .div3, .div5").hide();
$("a").bind("click", function () {
$(".div1, .div2,.div4, .div3, .div5").hide();
var target = $(this).data("target");
$("."+target).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
Link 1
Link 2
Link 3
Link 4
Link 5
<div class="div1">I'm div1</div>
<div class="div2">I'm div2</div>
<div class="div3">I'm div3</div>
<div class="div4">I'm div4</div>
<div class="div5">I'm div5</div>
</body>
</html>
you could also get the current element's class, parse it and generate div class name off of it and use that to show/hide things. e-g
link1 => div1 (replace link with div)
Try this way
<html>
<body>
Link 1
Link 2
<div id="link1" class="commonDiv">I'm div1</div>
<div id="link2" class="commonDiv">I'm div2</div>
</body>
</html>
$(function () {
$(".commonDiv").hide();
$(".link1, .link2").bind("click", function () {
$(".commonDiv").hide();
var id = $(this).attr("class");
$('#' + id).show();
});
});

How to alternate jquery toggle slide actions on click

I want to show two elements on click, one after the other, whereby a user clicks a button the first element with a class(.show-element-one), is shown and when the user clicks the same button for the second time the second element is shown with class(.show-element-two) , am using the code below to show element one on click but I am stuck with showing the second element on the second click.
jQuery(document).ready(function() {
jQuery('#display-elements').click(function() {
jQuery('.show-element-one,.show-element-two').toggle("slide");
});
});
I will appreciate any guides, thanks.
You can set up a counter variable calculate the modulus value for that to display the element of that two classes in circular manner. Something like the code below:
jQuery(document).ready(function() {
var count = 1;
jQuery('#display-elements').click(function() {
jQuery('.show-element-one, .show-element-two').hide();
if (count % 2 !== 0) {
jQuery('.show-element-one').toggle("slide");
} else {
jQuery('.show-element-two').toggle("slide");
}
count++;
});
});
.show-element-one,
.show-element-two {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="display-elements"> Click me </button>
<div class="show-element-one">
show-element-one
</div>
<div class="show-element-two">show-element-two </div>
Maybe you are missing the definition for .slide CSS class. Try the below code.
$(document).ready(function() {
$('#display-elements').click(function() {
$('.show-element-one,.show-element-two').toggle("slide");
});
});
.slide {
display: none;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<div class="show-element-one">show-element-one</div>
<div class="show-element-two slide">show-element-two</div>
<button id="display-elements">Toggle</button>

Onclick event is not working on first click

When the page loads I need to click the button twice to trigger the onclick() function. After doing so, everything works as expected.
As I am new to this web development field I would highly appreciate the detailed explanation.
Thank you in advance.
var hamburger = function() {
var menu = document.getElementById('menuBarSlide');
if (menu.style.right == "-300px") {
menu.style.right = "0px";
} else {
menu.style.right = "-300px";
}
}
<div class="navMenuItem hamburger" onclick="hamburger()">
<span class="ham-icon"></span>
<span class="ham-icon"></span>
<span class="ham-icon"></span>
</div>
I suppose that menuBarSlide is the id of a div, if so this should work for you.
I've added some styling to highlight the div, and a console.log() to be sure that the code executes.
Edit: Maybe the problem is that you expect the element to have a value in the right property but it is different, so logging the style can be helpful.
Edit 2: The problem is in the initial value (that is why your first click is not working, so with this variation menu.style.right = menu.style.right || "-100px"; that problem is solved. That line of code assigns -100px if the value comes null. Additionally, the program logs the value before and after the conditional assignment.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>menuBarSlide</title>
<style>
#menuBarSlide { /*To highligth your div*/
position: absolute;
background-color: grey;
color: red;
}
</style>
</head>
<body>
<div class="navMenuItem hamburger" onclick="hamburger()">
<span class="ham-icon">Item1</span>
<span class="ham-icon">Item2</span>
<span class="ham-icon">Item3</span>
</div>
<div id="menuBarSlide">
<h1>menuBarSlide</h1>
</div>
<script>
var hamburger = function() {
var menu = document.getElementById('menuBarSlide');
console.log("before assing: " + menu.style.right); // To check the current style of the element
menu.style.right = menu.style.right || "-100px"; // Assign -100px if is null, otherwise keep the same value
console.log("after assing: " + menu.style.right); // To check the style after the asigment
if (menu.style.right == "-100px") {
menu.style.right = "30px";
}
else {
menu.style.right = "-100px";
}
}
</script>
<body>
<html>

Highlight active link on menu

I am using some jquery code to highlight the current active page on my site. It is working great for the page. but when I am linking the menu to any div id it is not highlighting. how can I make it work for id as well.
Here is my code:
$(function() {
// this will get the full URL at the address bar
var url = window.location.href;
// passes on every "a" tag
$(".menu_holder a").each(function() {
// checks if its the same on the address bar
if (url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});
I suppose that for menu you use well try this change ul.nav with your class
var url = window.location;
var element = $('ul.nav a').filter(function() {
return this.href == url || url.href.indexOf(this.href) == 0;
}).addClass('active').parent().parent().addClass('in').parent();
if (element.is('li')) {
element.addClass('active');
}
cheers!!
Based on the comments, I assume that you are trying to highlight the div as well the menu clicked.
You can use the below code. It will scroll the div as well as highlight the target div as well as the menu linked clicked.
$(function() {
// this will get the full URL at the address bar
var url = window.location.href;
$(".menu_holder a").on('click',function(event) {
event.preventDefault();
var selectedDiv = $(this).attr('href');
$('html, body').animate({
scrollTop: $(selectedDiv).offset().top - 20
}, 'slow');
$(selectedDiv).addClass("active");
$(this).addClass("active");
});
});
#contact {
margin-top: 1000px;
height:50px;
width:50px;
}
.active
{
background-color : red;
color:#fff;
}
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="menu_holder">
Home
contact
</div>
<div id="contact">
contact section
</div>
</body>
Suppose you have this html:
<div class="Menu">
Div 1
Div 2
</div>
<div id="Div1">
content 1
</div>
<div id="Div2">
content 2
</div>
if you want to highligth the anchor after the click you can use this code that merges yours and adds what you are looking for:
var url = window.location.href;
$(".Menu a").each(function(e) {
if (url == (this.href)) {
$(this).addClass("Active");
}
}).on("click", function(e) {
var a = this;
setTimeout(function() {
if (window.location.href == a.href)
$(a).addClass("Active");
}, 0);
});
I used setTimeout (..., 0) to make the browser process the click and change the location.
That is because window.location.href gives you the actual, absolute URL of the page -- for example, http://stackoverflow.com/questions/38541730/highlight-active-link-on-menu#contact. But, most probably your link has an href that is relative -- basically, this.href is probably just #contact.
I think a better solution would be to use a regular expression like this to get the relative url:
window.location.href.match(/#.*/) //gives you $contact"
EDIT: Thanks to Mottie, here's an even better solution:
window.location.hash //gives you "#contact"

Problems with manipulating divs within simplemodal dialog popup - Further Edit

Ok, I'm having a major headache with simplemodal - I know I'm almost there, but can't get this to quite work right. I have a simplemodal dialog that has several dynamically created divs inside it, such as
<html>
<head>
<!-- Confirm CSS files -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
</head>
<body>
<div id='container'>
<h1>Test Page</h1>
<div id='content'>
<div id='confirm-dialog'>
Page Content Goes Here
</div>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Header Text</span></div>
<div class='message'>
<div id='optionDiv0'><input type='radio' id='options' name='options' value='0' />Option0</div>
<div id='optionDiv1'><input type='radio' id='options' name='options' value='1' />Option1</div>
<div id='optionDiv2'><input type='radio' id='options' name='options' value='2' />Option2</div>
</div>
<div class='buttons'>
<div class='yes'>OK</div>
</div>
</div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/jquery.simplemodal.js'></script>
<script type="text/javascript">
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
confirm("", function () {
for(var k = 0; k <= 3; k++) {
if(options[k].checked) {
var ele = document.getElementById("optionDiv" + k);
ele.style.display = "none;";
//alert("Stop Here");
}
}
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["20%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
containerCss: {
height: 300,
width: 450,
backgroundColor: '#fff',
border: '3px solid #ccc'
},
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
</script>
</body>
</html>
In the click code, I'm trying to make it so when the user clicks on one of the radio buttons, then clicks 'OK', that item is no longer visible in the popup. If I follow that code with an alert("Stop here");(shown in the code above, commented out), then I can see the div disappear from the popup. But once I clear the alert box, (or if I comment it out so it never runs), the next time I activate the dialog, the div that I hid is re-appearing. How can I keep it hidden, so that it remains hidden the next time the dialog is activated, or is that possible? Thanks in advance.
FINAL EDIT: Found the solution for the dialog box reverting to its original state every time it opens. I pasted this in just above the jquery code, and it works like a charm:
<script> $.modal.defaults.persist = true; </script>
Found on this site in another thread, as part of a different question. Thanks for all who helped.
Your code still doesn't look complete to me, but as for your confirm function callback
confirm("", function(){
$('#confirm input[type=radio]').each(function(){
if($(this).is(':checked'))
$(this).parent().empty();
});
});
Like that?

Categories