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.
Related
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
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");
I'm using jQuery validation to validate a form. The form looks like the following:
<div id="app_install_off" class="edit-ph mtop20"><h3 class="stakes-form-title-saved">APP INSTALL <span class="blue-txt"><!--(saved)--></span></h3><img border="0" align="right" style="margin:0 15px 0 0" src="../img/edit-button.png"></div>
<div id="app_install_on" class="appinstall-ph">
<form novalidate="novalidate" action="/sweepstakes/campaignstep2" id="AppInstallTaskCampaignstep2Form" method="post" accept-charset="utf-8"><div style="display:none;"><input name="_method" value="POST" type="hidden"></div> <div class="form-header"><h3 class="stakes-form-title">APP INSTALL <span class="greentext">(not saved)</span></h3></div>
<div class="form-content-area">
<div class="app-field-ph">
<ul class="apps-form">
<li class="f-label">App Name</li>
<li class="input-ph"><div class="input text"><input name="data[AppInstallTask][task_title]" class="appsform-field" id="AppInstallTaskTaskTitle" border="0" type="text"></div></li>
</ul>
<ul class="apps-form whitebg">
<li class="f-label">Package Name</li>
<li class="input-ph"><div class="input text"><input name="data[AppInstallTask][app_package_name]" class="appsform-field" value="Example: Com.MyAppPackage" id="AppInstallTaskAppPackageName" border="0" type="text"></div></li>
</ul>
<ul class="apps-form">
<li class="f-label">Market URL</li>
<li class="input-ph"><div class="input text"><input name="data[AppInstallTask][web_url]" class="appsform-field" id="AppInstallTaskWebUrl" border="0" type="text"></div></li>
</ul>
</div>
<div class="save-clear-ph">
<img src="../img/clear-button.png" border="0">
<img id="app_install_submit" src="../img/save-button.png" border="0">
<input name="data[AppInstallTask][task_type]" value="Download an App" id="AppInstallTaskTaskType" type="hidden"> </div>
</div>
</form>
</div>
</div>
<!-- The next similar block -->
<div id="like_fb_on" class="appinstall-ph mtop20">
<form action="/sweepstakes/campaignstep2" id="LikeFbTaskCampaignstep2Form" enctype="multipart/form-data" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div> <div class="form-header"><h3 class="stakes-form-title">LIKE FACEBOOK PAGE <span class="greentext">(not saved)</span></h3></div>
<div class="form-content-area">
<div class="app-field-ph">
<ul class="apps-form">
<li class="f-label">Campaign Option Name</li>
<li class="input-ph"><div class="input text"><input name="data[LikeFbTask][task_title]" class="appsform-field" border="0" type="text" id="LikeFbTaskTaskTitle"/></div></li>
</ul>
<ul class="apps-form whitebg">
<li class="f-label">Facebook Page URL</li>
<li class="input-ph"><div class="input text"><input name="data[LikeFbTask][web_url]" class="appsform-field" border="0" type="text" id="LikeFbTaskWebUrl"/></div></li>
</ul>
</div>
<div class="save-clear-ph">
<img src="../img/clear-button.png" border="0">
<img src="../img/save-button.png" border="0">
<input type="hidden" name="data[LikeFbTask][task_type]" value="Like Facebook Page" id="LikeFbTaskTaskType"/> </div>
</div>
</form>
</div>
On the click of the image (id = "app_install_submit"), I'm submitting the form. jQuery validation is implemented as follows:
$(document).ready(function() {
jQuery('#AppInstallTaskCampaignstep2Form').validate({
rules: {
"data[AppInstallTask][task_title]": {
required: true
},
customMessage: "required",
}
});
});
The click event is as following:
$('#app_install_submit').click(function(){
$('#AppInstallTaskCampaignstep2Form').submit();
});
Which is wrapped inside ready() as well.
This works for the first time, highlights the field with error class and message is appended in label. Any further clicks produce this 'nightmare' error:
TypeError: 'undefined' is not a function (evaluating 'this.each')
Also, while the form actually gets validated properly, it refuses to submit.
jQuery version: v1.10.1
Validate plugin version: 1.9.0
Notes: There are other forms in this page, they have separate id, field names are not conflicting either. Also I've checked properly, there are no overlaps of forms. To add on to more frustration, this same set of files works in other pages of my site.
Looking forward to a pointer, where I might be going wrong.
Many thanks in advance.
Working on a sliding login panel using Html, CSS and jquery with some plugins.
http://24.125.42.135/
As you can see, the bar pushes the content downwards when activated (click login at top right). This is great if you are on the first screen. However, if you are on the second screen and then try to press login, the bar is not there.
I'm stumped conceptually on what to do here so that the login button remains fixed at the top like the rest of the menu, but still pushes the content down no matter where you are on the page.
HTML
<!-- Panel -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<!-- Login Form -->
<form class="clearfix" action="#" method="post">
<h1>Sign In</h1>
<label class="grey" for="log">Username:</label>
<input class="field" type="text" name="log" id="log" value="" size="23" />
<label class="grey" for="pwd">Password:</label>
<input class="field" type="password" name="pwd" id="pwd" size="23" />
<label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>
<div class="clear"></div>
<input type="submit" name="submit" value="Login" class="bt_login" />
<a class="lost-pwd" href="#">Lost your password?</a>
</form>
</div>
<div class="left right">
<!-- Register Form -->
<form action="#" method="post">
<h1>Not a member yet? Sign Up!</h1>
<label class="grey" for="signup">Username:</label>
<input class="field" type="text" name="signup" id="signup" value="" size="23" />
<label class="grey" for="email">Email:</label>
<input class="field" type="text" name="email" id="email" size="23" />
<label>A password will be e-mailed to you.</label>
<input type="submit" name="submit" value="Register" class="bt_register" />
</form>
</div>
</div>
</div> <!-- /login -->
<!-- The tab on top -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li id="toggle">
<a id="open" class="open" href="#?signin">Log In | Register</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->
</div> <!--panel -->
CSS
/* sliding panel */
#toppanel {
position: relative; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Javascript
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
I suggest making the rest of the content inside a fixed div that you can scroll.
This way you never move your div, unless you toggle the login div.
But it still gives the same effect as now.