hide disabled button and display another - javascript

so I'm using bootstrap form wizard and my navigation buttons look like this:
<ul class="pager wizard">
<li class="previous">
Prev
</li>
<li class="next">
Next
</li>
</ul>
When I reach the final step the next button become disabled, I want it to be replaced by submit button instead.

Aboud Jouda i assume based on some logic you will know you reached the final step. First add a class to your next a tag. Then execute the below function executeThisOnFinalStep() to change the hyperlink text, remove next class and add final class. Based on this, different onClick function will be executed.
<li class="next">
Next
</li>
function executeThisOnFinalStep() {
$(".pager.wizard.next.atag").html("Submit");
$(".pager.wizard.next.atag").addClass("final");
$(".pager.wizard.next.atag").removeClass("next");
}
//Your onClick Functions.
$(".pager.wizard.next.atag").onClick(){
//write your next logic here
}
$(".pager.wizard.final.atag").onClick(){
//write your submit logic here
}

you try this code:
<ul class="pager wizard">
<li class="previous">
Prev
</li>
<li class="next">
Next
</li>
</ul>
javascript code with jquery:
var finalSteps = 3
var steps = 3;
if (steps == finalSteps) {
$('.next').remove();
$('.pager.wizard').append('<li>submit</li>')
}

Related

How to add another check class to replace the current active class when user clicks to another link like a step by step menu?

I have added class active via jquery each time when user clicks on nav menus. How do I add another class check every time user performs menu clicks?
The behavior of my menus would be like a step by step menus. For example, when user clicks on test 1 it will set the li to active. And when user clicks to Test 2 it will set it to active and the previous menu will be replaced by the check class.
Like this example image above.
This is my jquery code. Does anyone has any idea how to alter the Jquery code to perform above?
HTML
<nav id="sidebar" class="get-qoute-sidebar">
<ul class="menus">
<li class="active">
<span>Test 1</span>
</li>
<li>
</i><span>Test 2</span>
</li>
<li>
<span>Test 3</span>
</li>
<li>
<span>Test 4</span>
</li>
<li>
<span>Test 5</span>
</li>
<li>
<span>Test 6</span>
</li>
<li>
<span>Test 7</span>
</li>
</ul>
</nav>
Jquery
$(document).ready(function () {
//load the functions
activeSideBar();
});
function activeSideBar() {
// set active classes on side bar nav li a
$("body").on("click", 'nav#sidebar.get-qoute-sidebar ul li a', function (e) {
$('nav#sidebar.get-qoute-sidebar ul li.active').removeClass('active');
var $parent = $(this).parent();
$parent.addClass('active');
e.preventDefault();
});
}
Please try this one:
function activeSideBar() {
// set active classes on side bar nav li a
$("#sidebar .menus li").on("click", function() {
$(this).siblings(".active").removeClass("active").addClass("check");
$(this).addClass("active").removeClass("check");
// Remove class of the next sibling when going a step back
$(this).next().removeClass("check");
// Remove class of all following siblings when going a few steps back
$(this).find("~ .check").removeClass("check");
// When user jumps directly to step5 mark all previous elements as checked
$(this).prevAll().addClass("check");
});
}

Get data-id of anchor element inside a li element

Html
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
My app got a list of things then after 5secs. it will automatically go to the next li.
but that is not the problem. the problem is with the click function I want to know the data-id of the li.
According to the OP's comments
Remove the onclick attribute.
Bind the click event using jQuery.
Use closest('li') to get the parent of your links.
function clickFunction(e) {
e.preventDefault(); // This is to prevent the execution of your links!
console.log($(this).closest('li').data('id'));
}
$('a').click(clickFunction);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-id="1">
1
</li>
<li data-id="2">
2
</li>
<li data-id="3">
3
</li>
<li data-id="4">
4
</li>
<li data-id="5">
5
</li>
</ul>
(1) Remove onclick attribute.
(2) Attach a .click handler to all your links
$(function () {
// attach an onclick event handler to your links
$('li a[data-id]').click(function (e) {
// prevent the link from going anywhere
e.preventDefault();
// get the parent li
var li = $(this).closest('li');
// get next li's link data id
console.log(li.next('li').find('a').data('id'));
});
});

Console function not defined error?

I do not understand why my function isn't working and why I keep getting a "test is not defined error" when I try to run it.
I want the page to scroll down to the appropriate section, when the user clicks the right menu item.
<ul class="timelineNav">
<li class="navItem">
<button type="button" onclick='test("1")'>
Event1
</button>
</li>
<li class="navItem"><a class="navItem" href="url">Event2</a></li>
<li class="navItem"><a class="navItem" href="url">Event3</a></li>
<li class="navItem"><a class="navItem" href="url">Event4</a></li>
<li class="navItem"><a class="navItem" href="url">Event5</a></li>
</ul>
<article id="post1">
some text
</article>
<article id="post2">
some text
</article>
<article id="post3">
some text
</article>
Javascript function:
function test(postLocation){
var post = $('#post'+postLocation).offset();
$(window).scrollTop(post.top);
};
I originally wanted to make the list item itself start the function, but I guess it has to be a button?
You don't show where the function test() is defined, but if it is inside a document-ready handler (or any other function), it is not in the global scope, so it cannot be called from an onclick attribute.
Either:
(1) Stop using an onclick attribute and bind a click event handler to the elements.
(2) Move the definition of the function outside the document-ready handler.
(3) Defined the function like this:
window.test = function(postLocation) {
var post = $('#post'+postLocation).offset();
$(window).scrollTop(post.top);
};
Also, you do not have to use a button. You should be able to make it so the function executes by a click on a list item.
I suggest the following:
HTML:
<ul class="timelineNav">
<li>Event 1</li>
<li>Event 2</li>
<li>Event 3</li>
<li>Event 4</li>
</ul>
<article id="post1">
some text
</article>
<article id="post2">
some other text
</article>
JQuery:
$('.timelineNav').children('li').children('a').click(function(event) {
event.preventDefault();
var $article = $($(this).attr('href'));
$(window).scrollTop($article.offset().top);
});
JSFiddle DEMO
Although the <a> elements are not needed, they do cause the mouse pointer to change.
Updated HTML
Added the id to the button for better jquery selection
<ul class="timelineNav">
<li class="navItem">
<button type="button" id="clickbutton">Event1</button>
</li>
...
JS
Attach event to your button, remove inline event click
$(function () {
$('.navItem').on('click', '#clickbutton', function () {
var location = 1; //define or fetch your location here
var post = $('#post' + location).offset();
alert(post);
$(window).scrollTop(post.top);
});
});
Demo

dynamically update breadcrumb & highlight active color

I am sorry for the title. I don't no how to write the title for the below scenario .
The below question would be easier for an expert. Kindly bear with my English.
I am creating a single page portfolio. In the web site I have top menu,breadcrumb,content & footer.
If i click any menu or submenu the corresponding div is loading properly but I want to change my breadcrumb dynamically based on the menu
Here is the HTML code for top menu
<div id="eyMenuNav">
<ul id="navmenu">
<li class="on">
<a class='link1' href="#first">Article on Technology</a></li>
<li>
<a class="sub" href="#">Success Stories</a>
<ul>
<li>
<a class='link2' href="#second" onclick="onctext();">Customer Quotes</a>
</li>
<li>
<a class='link3' href="#third" onclick="onctext();">CSS, Appreciation - Metrics</a>
</li>
<li>
<a class='link4' href="#four" onclick="onctext();">Lesson Learnt</a>
</li>
</ul>
</li>
<li>
<a class='link5' href="#five">Hexaware Key Contributor</a>
</li>
</ul>
</div>
Here is the HTML code for breadcrumb
<div id="eyBreadCrumb">
<ul>
<li>
<a id="crumb" href="#"><!-- Here I need update my breadcrumb based on the link which i clicked -></a>
</li>
</ul>
<!-- Clearing Element -->
<div style="clear:both;"></div>
<!-- end breadcrumb --> </div>
Here Is the code for javascript which i tried it is working for one menu click but i want for all.
function onctext()
{
document.getElementById("crumb").innerHTML="Success Stories - Customer Quotes";
}
Kindly help me for the above scenario
Note : I am not using jquery only iam working with javascript.
Thanks
Mahadevan
Add this parameter to your onctext() call, so your menu items look like so:
<a class='link3' href="#third" onclick="onctext(this);">CSS, Appreciation - Metrics</a>
And then change your onctext function to retrieve the text from this:
function onctext(elm) {
var text = elm.innerHTML;
document.getElementById("crumb").innerHTML = text;
// set active class
var active = document.getElementsByClassName('active')[0];
if (active) {
active.className = active.className.replace(' active', '');
}
elm.className += ' active';
}

switching two ids with ajax callback

I was kindly helped by Jonathan over here simple javascript question-linking button state to image swap?
The problem is that this makes the "active" class the same class for both list items.
Each list item needs to toggle its own active and its own inactive class (each is a button with its own css styling and background image).
Can you please help me modify the script so that I can do that?
Here is Jonathans provided code:
<li class="transcript">
<a id="transcriptionhorbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
<li class="transcript">
<a id="transcriptionvertbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this);"></a>
</li>
<script>
var buttons = [ document.getElementById("transcriptionvertbutton"),
document.getElementById("transcriptionhorbutton")];
function make_active(el) {
deactivate_buttons();
el.setAttribute("class","active");
}
function deactivate_buttons() {
buttons[0].setAttribute("class","inactive");
buttons[1].setAttribute("class","inactive");
}
</script>
I understand that the problem is here:
function make_active(el) {
deactivate_buttons();
el.setAttribute("class","active");
}
but I don't know enough to separate that into two different classes.
Just add an extra parameter to the function:
function make_active(el, classname) {
deactivate_buttons();
el.setAttribute("class",classname);
}
Then change your calls just a bit. Here is the completed code. Note I changed all calls of setAttribute to .className instead. This was just so you don't run into any trouble with IE6:
<li class="transcript">
<a id="transcriptionhorbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this,'active_class_1');"></a>
</li>
<li class="transcript">
<a id="transcriptionvertbutton" class="inactive"
href="javascript:void()"
onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this,'active_class_2');"></a>
</li>
<script>
var buttons = [ document.getElementById("transcriptionvertbutton"),
document.getElementById("transcriptionhorbutton")];
function make_active(el, classname) {
deactivate_buttons();
el.className = classname;
}
function deactivate_buttons() {
buttons[0].className = "inactive_class_1";
buttons[1].className = "inactive_class_2";
}
</script>

Categories

Resources