http://jsfiddle.net/pz83w/16/
check the fiddle.I have two forms in it.I have a java script for forming a slide transitin between the forms.At first when the page loads,the both forms are shown,but i want only one form shown.Later when I click the links its working fine.How can I correct this.
<div class="demo">
<form class='form show' id="formA">
Card Payment
Internet banking
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form class='form' id="formB">
<div id="internet">
Card Payment
Internet banking
<h2>Internet Banking</h2>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</form>
</div>
and javascript is
$(document).ready(function(){
$(".tabHeader").click(function(){
$(".form").each(function(){
if ($(this).hasClass('show')) {
$(this).slideUp(900).removeClass('show');
} else {
$(this).delay(900).addClass('show').slideDown();
}
});
});
});
You could hide the second form in javascript like this:
$(".form").not(':first').hide();
Or an update of the Jsfiddle: http://jsfiddle.net/pz83w/18/
By default you could use style="display:none" on the form you don't want shown.
Sorry for the bad format sent from my phone.
Update CSS to hide forms without show class
In HTML and CSS, everything is visible unless you specifically ask it not to be.
Your showing and hiding is embedded within an onclick handler, so it won't execute until the links are clicked.
Until the links are clicked, why would a form be hidden? There is nothing to hide them.
You could of course have display: none set in in a stylesheet, but you did not include any CSS, so I assume there is none.
Try putting style="display: none" on the form tag you want to initially hide, like so:
<form class='form' id="formB" style="display: none">
Well, You can add either of the following css properties.
"display: none" or "visibility:hidden"
display:none means that there will be no space allocated for it. visibility:hidden means that the tag is not visible, but space is allocated for it on that particular page.
$("#formB").css("visibility","hidden");
Add this when when you show the page and then make it visible when you want second form to appear when you click on link,
$("#formB").css("visibility","visible");
Related
I have a page where in there is form which has block of input fields. There is also a button provided to 'Add Another' which allows for the addition of more block of the same above as mentioned.
As long there is more than one block of input fields on the page, a 'Remove' link is visible for the user to allow them to remove a the corresponding block from the view.
My issue is that on pressing Tab key, the 'Remove' link never gets highlighted. The focus moves to the next block element.
I have tried using Tab index but it hasn't resolved the issue as Tab key then does not follows a sequence.
<fieldset class="fieldset" id="fieldset-${receiptDetails.id}" style="width: 100%">
<legend style="display: none;">Receipt Detail Section - ${receiptDetails.id}</legend>
<label for="id" class="visually-hidden">Id: </label>
<input type="text" name="id" id="id" style="display: none" value="${receiptDetails.id}">
<div class="form-group">
<label class="claim-label" for="nameAddressOfSupplier" id="name-address-supplier-label">
[#spring.message "receipts-upload.supplier.name.address.label.text"/]
</label>
<textarea class="govuk-textarea" id="nameAddressOfSupplier-${receiptDetails.id}" name="nameAddressOfSupplier">${receiptDetails.nameAddressOfSupplier}</textarea>
</div>
<div class="form-group">
<label class="claim-label" for="purchaseDetails" id="purchase-details-label">
[#spring.message "receipts-upload.purchase.details.label.text"/]
</label>
<textarea class="govuk-textarea" id="purchaseDetails" name="purchaseDetails">${receiptDetails.purchaseDetails}</textarea>
</div>
<div class="custom-form-group">
<label class="claim-label" for="amount" id="amount-label">
[#spring.message "receipts-upload.amount.label.text"/]
</label>
<div class="currency-input">
<div class="currency-input__denomination">£</div>
<input class="currency-input__field text-input" data-component="date-check-length" data-length="9" type="text" id="amount" value="${receiptDetails.amount}" name="amount" style="display: inline"> [#if numberOfReceiptDetails == 1]
<p class="remove-link visually-hidden" id="remove-link_${receiptDetails.id}" name="remove-link">
<span class='googleAnalyticsRemove'>
<a id="remove-receipt-detail_${receiptDetails.id}" name="remove-receipt-detail"
class="action--secondary remove-receipt-detail" style="float: right">
[#spring.message "receipts-upload.remove.text"/]
</a>
</span>
</p>
[#else]
<p class="remove-link" id="remove-link_${receiptDetails.id}" name="remove-link">
<span class='googleAnalyticsRemove'>
<a id="remove-receipt-detail_${receiptDetails.id}" name="remove-receipt-detail"
class="action--secondary remove-receipt-detail" style="float: right">
[#spring.message "receipts-upload.remove.text"/]
</a>
</span>
</p>
[/#if]
</div>
</div>
</fieldset>
<p class="add-another-link" id="add-another-link">
<a href="" id="add-another" class="action--secondary">
[#spring.message "receipts-upload.add.another.text"/]
</a>
</p>
When the user clicks on 'add-another-link' then another fieldset is added to the view with a 'remove-link' visible for each fieldset.
I expect to reach 'remove-link' within each fieldset element from the 'input#amount' when Tab key is pressed but actually the Tab key press highlights the 'textarea[name=nameAddressOfSupplier]' contained within the next fieldset.
I will be grateful for any suggestions.
If you are not using href in <a> tag, tab key (tabindex) will skip that a tag,
if you add tabindex="0", the tab key will reach the link.
Please refer the post: Why would an `a` tag need `tabindex=0`?
I have this code that is in a div. Within the div, there is code to list the trips entered and code to enter the individual trips. I want to use angular to only display the form to enter each trip so when the submit button is clicked, the div will spin around and show the content that was just submitted on the other side of the div. Is There a way to do that the way I have this set up?
<div id="modal">
<main ng-controller="TripsController as trips" id="temp-overflow">
<!-- List of All the Users Trips -->
<h2>All of your trips</h2>
<ul>
<li ng-repeat="trip in trips.current_user_trips">
Title: {{trip.title}}
Destination: {{trip.destination}}
Description: {{trip.description}}
Start Date: {{trip.start_date}}
<div ng-controller="CommentsController as commentsCtrl">
<h3>Comments:</h3>
<ul>
<li ng-repeat="comment in trip.comments">
Entry: {{comment.entry}}
Author: {{comment.commenter}}
</li>
</ul>
<form ng-submit="commentsCtrl.createComment()">
<input type="text" ng-model="commentsCtrl.newCommentEntry" placeholder="entry"/>
<input type="submit" value="Comment"/>
</form>
</div>
</li>
</ul>
<!-- Form to Enter Users Latest Trip -->
<h2>Where have you been?</h2>
<form ng-submit="trips.createTrip()">
<input type="text" ng-model="trips.newTripTitle" placeholder="Title"/>
<input class="search" places-auto-complete types="['geocode']" on-place-changed="placeChanged()"/>
<input type="text" ng-model="trips.newTripDescription" placeholder="Description"/>
<input type="date" ng-model="trips.newTripStartDate" placeholder="Start Date"/>
<input type="date" ng-model="trips.newTripEndDate" placeholder="End Date"/>
<input type="text" ng-model="trips.newTripNotes" placeholder="Notes"/>
<input type="submit" value="Submit your Trip"/>
</form>
</main>
</div>
It sounds like you are looking for the ng-show and ng-hide attributes. You can set a Boolean in your Controller to show or hide certain components of the DOM.
Here is a link to the documentation:
https://docs.angularjs.org/api/ng/directive/ngShow
Hope this points you in the right direction.
I am attempting to make a similar page to this.
The problem is that I can't use the external JS file in ASP.net (as far as I know) so I am defining the functions and trying to use them in the HTML page.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="authenticate.aspx.cs" Inherits="authenticate" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Flitter Authentication</title>
<link href="AuthenticationStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active" onclick="SwitchTab(e)">Sign Up</li>
<li class="tab" onclick="SwitchTab(e)">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required="required" autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text" required="required" autocomplete="off" />
</div>
</div>
<div class="field-wrap">
<label>
REQFIELD<span class="req">*</span>
</label>
<input required="required" autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password" required="required" autocomplete="off" />
</div>
<button type="submit" class="button button-block" />Get Started
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="/" method="post">
<div class="field-wrap">
<label>
REQFIELD<span class="req">*</span>
</label>
<input required="required" autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" required="required" autocomplete="off" />
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block" />Log In
</form>
</div>
</div>
<!-- tab-content -->
</div>
<!-- /form -->
<script>
function SwitchTab(e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
};
</script>
</body>
</html>
Some things I noticed:
in on the onclick events I am using SwitchTab(e) I am sure that e is nothing in that context but I am not sure what I should be using. The script (defined at the bottom) should switch the views on the tab group.
First of all, the snippet you linked on codepen doesn't seem to work at all.
I manage to make it work by changing those lines below :
<li class="tab active"><a onclick="ShowTab(this, event)" href="#signup">Sign Up</a></li>
<li class="tab"><a onclick="ShowTab(this, event)" href="#login">Log In</a></li>
And the javascript function showTab() as :
function ShowTab(that, event) {
event.preventDefault();
$(that).addClass('active');
$(that).siblings().removeClass('active');
target = $(that).attr('href').toString();
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
};
A bit a an explaination now. "e" means nothing to the javascript engine as it's not been defined in the global scope. Whereas "this" refers to the element you just clicked on and "event" to the event (the click) that just occured. I also put the ShowTab() function in the link instead of it's parent, just because it's a lot simpler that way.
I hope it helped.
Oh well, I forgot to tell about "that". As the "this" keyword already exists in the function ShowTab() and is different to the HTML element we need to change the name to something NOT used in the closure.
Can do this very simply using jQuery and removing the inline code. The code within the following click handler is identical to that in your function
$('.tab-group a').click(function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
var target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
If you are going to use jQuery should avoid mixing inline code and unobtrusive jQuery code
Guys my site - http://techinger.com/ When I Click on Login Button It Shows Grey Error Page Instead Of Login Box. I already have Login Box Placed After javascript Code.
Login
Above is Login Button And Below is Login Button Code That i Need To Show Above grey Layer
<div id="loginform" class="logarea">
<div class="popuplog">
<div class="popup-head">
Authorization
<a class="popup-close" href="javascript:;" onclick="$.closePopupLayer('loginPopup')" title="Close"> </a>
</div>
<div class="popupcol">
<form method="post" action="">
<ul class="reset">
<li class="edge">
<label for="login_name"><p>Username:</p></label>
<input class="f_input" type="text" name="login_name" id="login_name" />
</li>
<li class="edge">
<label for="login_password"><p>Password (Forgot?):</p></label>
<input class="f_input" type="password" name="login_password" id="login_password" />
</li>
<li>
<input type="checkbox" name="login_not_save" id="login_not_save" value="1"/><label for="login_not_save"> Third party computer</label>
</li><br />
<li class="lfield lfchek"><div class="sociallogin">
</div>
</li>
<br />
<div align="center"><li><button class="poll-submit" onclick="submit();" type="submit" title="Login"><span>Login</span></button></li></div>
</ul>
<input name="login" type="hidden" id="login" value="submit" />
</form>
</div>
</div>
</div>
Please Tell Me Where Code or Line Is missing That i Can Show Login Modal there?
In your popups.js file you have a line that crashes the code:
if ($.browser.msie && $.browser.version < 7) {
this line calls $.browser which is deprecated since jQuery 1.9
you have 2 options:
remove this line and ignore internet explorer < 7
link jQuery migrate that will restore the deprecated functions:
include the following line right after your link to jQuery:
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
source: https://github.com/jquery/jquery-migrate/#readme
You have in your CSS:
.logarea{
display: none;
}
so you can't see it.
Within a jquery mobile page I have a page with a nested fieldset.
I need to dynamically add an input and button field anytime a certain button is clicked.
My first step has been trying to find the id of the last dynamically added control group.
That is where I am stuck.
I have tried a lot of different ways to get to the div but haven't had any luck so I was hoping I could get some help from the experts.
My latest attempt...
$('#ServicePage #ServiceArticle #ServiceList #collapse #btnaddOther').on('click', function () {
var ct = $('#ServicePage #ServiceArticle #ServiceList #collapse');
getLastId(ct);
});
function getLastId(ct) {
var id = $(ct.last).attr('id');
addOtherItem(id);
}
Below is an example of the page. The div i'm trying to reach is below the 2nd fieldset and has an id of collapse. I need to get the last child div within the collapse div i.e. I need to return the id= addOther_1.
I hope that makes sense.
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
How would I go about accessing this nested div?
Thanks
function getLastId() {
var $x = $('fieldset:last-of-type > div:first-of-type > div:first-of-type')
// addOtherItem($x.attr("id"));
// Just to show we got the id, I am putting it in a div.
// Remove when done and un-comment line 3
$('#tmpDiv').html($x.attr("id"))
}
$('#btn').on('click', function(){
getLastId();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TMP -->
<div id="tmpDiv"></div>
<button id="btn">Click Me</button>
<!-- / TMP -->
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
<article id="ServiceArticle" data-role="content" class="ui-content">
<form>
<br />
<div id="ServiceList" class="ui-corner-all custom-corners">
<div class="ui-bar ui-bar-b">
<h3>Color Services</h3>
</div>
<div class="ui-body ui-body-a">
<fieldset data-role="controlgroup">
<legend>Select Color Services</legend>
<input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
<label for="serviceHiLight">Highlights</label>
<input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
<label for="serviceLoLight">Low-Lights</label>
<input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
<label for="serviceRetouch">Retouch</label>
<input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
<label for="serviceHiLightRetouch">Highlight Retouch</label>
<input type="checkbox" name="service" id="servicePainting" value="Painting" />
<label for="servicePainting">Painting like Ombre or Balayage</label>
<input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
<label for="serviceAllOver">All over color</label>
*<fieldset data-role="collapsible">
<legend>Other</legend>
<div id="collapse" data-role="controlgroup">
<div id="addOther_1" data-role="controlgroup" data-type="horizontal">
<input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
<button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
</div>
<a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
</div>
</fieldset>
</fieldset>
</div>
</div>
</form>
</article>
</div>
I like the "last-of-type" and "first-of-type" selectors
$('fieldset:last-of-type > div:first-of-type > div:first-of-type')
http://api.jquery.com/last-of-type-selector/
The above will select the last fieldset, then the first direct child div, then the first div after that (which is the one you want).
Why not keep track of the last one using an id.. For example: id = 'LastOne', now, when you add a new item, remove the attribute from the actual last one, and then just place it on the one you're about to add. Basically, something like this:
$(document).ready(function(){
$('.add').click(function(){
var nvar = $('#lo').removeAttr('id').clone();
nvar.attr('id','lo');
nvar.insertAfter($('.mydiv').last());
});
});
You click on an ADD button (with the class .add) and then it looks for the LasOne (LO for short), removes it attr, makes a clone of it and then places it below the last one. Of course, you can also remove the attr AFTER you insert. That way, you wouldn't need to use "LAST".. since you don't really know what the last one is.
Check the fiddle working here: http://jsfiddle.net/lrojas94/v26fk8yd/
I was making this wayyyyy to difficult. I got the answer by trying something that charlietfl said "Since it has an ID just use that $('#collapse') since by definition ID's are unique – charlietfl"
Because I am using jquery mobile I did have to include the page name so it was simply
$addOther = $('#ServicePage #collapse');
The name of the jquery mobile page and the id of the div I need to look into.
Thanks everyone for your help.
I forgot to add how I found the last div within that div...
$('#ServicePage #collapse').find('.a').last();
This found the last div withing a div. The div I would looking in has the id #collapse.