某些用戶(包括我)根本沒有看到註冊表格 - 尤其是在Chrome中。流星:註冊表格有時無法正確呈現
請在Firefox中先看看: http://openstrategynetwork.com/joinus
在Chrome中會發生什麼:
的按鈕和輸入框纔開始出現,當你將鼠標懸停在該地區:
或者在瀏覽器窗口大小調整時顯示所有內容。
最奇怪的 - 還有一點點怪異 - 事情是,當我向後滾動,我看到在後臺登記表格:
我使用的useraccounts
包。
注意:這裏是all source。
我的配置文件(配置/ at_config.js):
// Options
AccountsTemplates.configure({
// preSignUpHook: function (error, state) {
// console.log("love");
// },
// defaultLayout: 'emptyLayout',
focusFirstInput: false,
showForgotPasswordLink: true,
overrideLoginErrors: true,
enablePasswordChange: true,
sendVerificationEmail: true,
// enforceEmailVerification: true,
//confirmPassword: true,
//continuousValidation: false,
showLabels: false,
//forbidClientAccountCreation: true,
//formValidationFeedback: true,
homeRoutePath: '/',
redirectTimeout: 2000,
//showAddRemoveServices: false,
showPlaceholders: true,
negativeValidation: true,
positiveValidation: true,
negativeFeedback: true,
positiveFeedback: true,
// Privacy Policy and Terms of Use
//privacyUrl: 'privacy',
//termsUrl: 'terms-of-use',
texts: {
sep: "OR REGISTER with your social account:",
title: {
signUp: "REGISTER by creating a new account:"
},
button: {
signUp: "REGISTER"
},
socialSignUp: "",
socialWith: ""
}
});
var submitFunction = function(error, state){
// if (!error) {
// if (state === "signIn") {
// // Successfully logged in
// console.log("hook logged in");
// }
// if (state === "signUp") {
// // Successfully registered
// console.log("hook singup");
// }
// }
};
// remove fields and add them back in the right order
AccountsTemplates.removeField('email');
AccountsTemplates.removeField('password');
//all register fields
AccountsTemplates.addFields([
{
_id: 'firstName',
type: 'text',
placeholder: "First Name*",
required: true,
re: /^[^\d]{2,}$/i,
errStr: "Please enter your first name.",
},
{
_id: 'lastName',
type: 'text',
placeholder: "Last Name*",
required: true,
re: /^[^\d]{2,}$/i,
errStr: "Please enter your last name.",
},
{
_id: 'email',
type: 'email',
placeholder: "Email Address*",
required: true,
displayName: "email",
re: /[email protected](.+){2,}\.(.+){2,}/,
errStr: 'Invalid email',
},
{
_id: 'institution',
type: 'text',
placeholder: "Institution/Company*",
required: true,
// re: /^[^\d]{2,}$/i,
minLength: 2,
errStr: "Please enter the institution or company you work for.",
},
{
_id: 'interests',
type: 'text',
placeholder: "Interests regarding Open Strategy*",
required: true,
re: /^[^\d]{2,}$/i,
errStr: "Please enter the your interests in the institution/company.",
template: 'interests'
},
{
_id: 'position',
type: 'text',
placeholder: "Position",
re: /^[^\d]{2,}$/i,
errStr: "Please enter the your position in the institution/company.",
},
{
_id: 'uploadProfile',
type: 'text',
template: 'uploadInput'
},
{
_id: 'password',
type: 'password',
placeholder: "Password*",
required: true,
minLength: 6,
errStr: 'Password must be at least six characters long',
},
{
_id: 'password_again',
type: 'password',
placeholder: "Confirm Password*",
required: true,
minLength: 6,
errStr: 'Password must be at least six characters long',
}
]);
我的助手文件(客戶端/模板/帳戶模板/ joinus.js):
Template.joinUs.onRendered(function() {
// if scrolling is necessary $("html, body").animate({ scrollTop: 0 });
window.scrollTo(0, 0);
// SCRIPT
setInterval(function(){
if(window.location.href.split('/').pop()=='joinus'){
var pswVal = $("[name='at-field-password']")[0].value;
var pswValL = pswVal.length;
var pswAVal = $("[name='at-field-password_again']")[0].value;
var pswAValL = pswAVal.length;
if(pswVal==pswAVal && pswValL>5 && pswAValL>5){
$('.form-group:eq(15) .glyphicon.glyphicon-remove.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok').css("color","green");
$('.form-group:eq(15) .help-block').addClass('hide');
$("[name='at-field-password_again']").css({"border-style":"solid", "border-color":"green"})
}else{
$("[name='at-field-password_again']").css({"border-style":"", "border-color":""});
$('.form-group:eq(15) .glyphicon.glyphicon-remove.form-control-feedback').removeClass('glyphicon-ok').css("color","");
$('.form-group:eq(15) .help-block').removeClass('hide');
}
}
}, 10);
});
Template.joinUs.events({
'click .js-scrollToForm': function (evt, tpl) {
evt.preventDefault();
$('html, body').animate({
scrollTop: $('#js-scrollStop').offset().top - 35
}, 2000);
}
});
我的HTML文件(客戶端/模板/帳戶模板/ joinus.html):
<template name="joinUs">
<!-- Stage -->
<header>
<div class="header-content">
<!-- Breadcrumb -->
<ol class="breadcrumb text-left">
<li><a class="breadcrumb-link" href="{{pathFor route = 'home'}}">Home</a></li>
<li class="active">Join us</li>
</ol><!-- End of Breadcrumb -->
<div class="header-content-inner">
<h1>YOUR BENEFITS</h1>
<hr>
<h2>As a member of OSN you will become part of a thriving network of scholars interested in open strategy. There are many advantages of joining the OSN. Registration is free.</h2>
<button type="button" href="#joinus" class="btn btn-primary btn-xl page-scroll js-scrollToForm">JOIN US</button>
</div>
</div>
</header> <!-- ./Stage -->
<!-- Services Section -->
<section id="services">
<div class="container">
<div class="row text-center extra-spacing-top extra-spacing-bottom joinus-icons">
<div class="col-sm-4">
<span class="fa-stack fa-4x">
<!-- <i class="fa fa-circle fa-stack-2x"></i> -->
<i class="fa fa-bullhorn fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">News</h4>
<p class="text-muted">As a member you can submit news to the whole Open Strategy community and disseminate related research findings.</p>
</div>
<div class="col-sm-4">
<span class="fa-stack fa-4x">
<!-- <i class="fa fa-circle fa-stack-2x text-primary"></i> -->
<i class="fa fa-comments-o fa-stack-1x fa-inverse joinus-icons"></i>
</span>
<h4 class="service-heading">Collaborations</h4>
<p class="text-muted">Collaborate internationally by searching for data on OSN members.</p>
</div>
<div class="col-sm-4">
<span class="fa-stack fa-4x">
<!-- <i class="fa fa-circle fa-stack-2x text-primary"></i> -->
<i class="fa fa-newspaper-o fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Literature</h4>
<p class="text-muted">Search for Open Strategy literature on specific topics within the Bibliography</p>
</div>
</div>
</div>
</section>
<!-- <div id="js-scrollStop"></div> -->
<!-- Registration Form -->
<section class="bg-light-gray extra-spacing-top" id="js-scrollStop">
<div class="container">
<form>
{{> atForm state='signUp'}}
</form>
</div>
</section>
</template>
編輯:
由於@Jeremy Iglehart錯誤可能會歸結到這個文件:
客戶端/模板/帳戶模板/ at_form_mod.html:
<template name="myAtForm">
{{#unless hide}}
<div class="at-form">
<!-- {{#if showTitle}}
{{> atTitle}}
{{/if}} -->
{{#if showError}}
{{> atError}}
{{/if}}
{{#if showResult}}
{{> atResult}}
{{/if}}
{{#if showPwdForm}}
{{> atPwdForm}}
{{/if}}
{{#if showTermsLink}}
{{> atTermsLink}}
{{/if}}
{{#if showSignUpLink}}
{{> atSignupLink}}
{{/if}}
<!-- {{#if showServicesSeparator}}
{{> atSep}}
{{/if}} -->
{{#if showOauthServices}}
{{> atOauth}}
{{/if}}
<!-- {{#if showSignInLink}}
{{> atSigninLink}}
{{/if}} -->
</div> <!-- end main div -->
{{/unless}}
</template>
的.LESS文件可以在這裏找到(太長時間粘貼在這裏): client/templates/styles/styles.less
埃米爾,首先 - 偉大的設計...保持它,你會到達那裏。這對我來說就像一個流氓CSS問題沒有?有些東西被設置爲隱藏或某物。你有沒有可能會這樣做的CSS? –
它在我看來像https://github.com/OpenStratNet/OSN/blob/master/client/templates/account-templates/at_form_mod.html是你的問題可能的地方 - '{{#unless hide}}和在那裏你有{{#if'showOauthServices}}'你在哪裏定義'hide'和'showOauthServices'? –
@JeremyIglehart:謝謝你的激勵話語。非常友善:)雖然我想在這個項目後停止編程:(不幸的是,我不知道這是在哪裏定義的,它在useraccounts包中,但它已經是一個很好的提示了。 PS:我只是想知道爲什麼Chrome有問題 –