I am trying to build an web app using apps script it was working well till yesterday but I don't know why my password recovery pages not rendering right. the image URL path getting mess, including googlescriptappconsle link automatically.
I am getting this error:
I tried to debug and checked the script a lot but not found any error in that. don't know why this msg is showing and how to fix this.
forget Password? link at login.
Forget Password
JavaScript.
function recoveryScreen() {
return document.getElementById('root').innerHTML = `
<div class="container">
<div class="row">
<div class="col d-flex justify-content-center">
<img src="https://img.freepik.com/free-vector/authentication-concept-illustration_114360-1640.jpg?t=st=1650012022~exp=1650012622~hmac=0b7d5c7400d49f971b6c626c09516602556c052642171457305bfaf5c17e2461&w=740" alt="">
</div>
</div>
</div>
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-lg-6 d-flex flex-column justify-content-center align-item-center recoveryInput">
<p class="text-center hide">For update your password please provide your email address here.</p>
<input type="text" placeholder="Email Address" id="email" class="hide">
<button type="button" onclick="sendRecoveryLink()" class="hide">Get OTP</button>
<button type="button" onclick="showLogin()" class="mt-2 hide" style="background-color:black;">Back</button>
<p class="pt-4 text-center show" id="msgpara" style="color:red; display: none;">We have sent you an OTP on your mail for update password.</p>
<input type="text" placeholder="Enter OTP" id="otp" class="show" style="display: none;">
<input type="text" placeholder="New Password" id="newpswd" class="show" style="display: none;">
<input type="password" placeholder="Confirm Password" id="confirmpswd" class="show" style="display: none;">
<button type="button" id="update" class="show" style="display: none;">Update</button>
</div>
</div>
</div>
</div>`
}
HTML.
<div class="container-fluid">
<div id="root"></div>
Related
I want to ask, what if we press a button or link from a text that is in the div, then it is automatically submitted in the textarea.
The image below will help you understand my question
If we choose Finance, it means we type Finance also in the textarea and submit.
Can you help me?
Below is the code in my chat widget:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="end-convo"></div>
<!-- /.direct-chat-pane -->
</div>
<!-- /.card-body -->
<div class="card-footer">
<form id="send_chat" method="post">
<div class="input-group">
<textarea type="text" name="message" placeholder="Ketik sesuatu ..." class="form-control" required="" id="message"></textarea>
<span class="input-group-append">
<button type="submit" class="btn btn-primary"><i class='bx bx-send bx-sm'></i></button>
</span>
</div>
</form>
</div>
<!-- /.card-footer-->
</div>
<div class="d-none" id="user_chat">
<div class="direct-chat-msg right ml-4">
<img class="direct-chat-img border-1 border-primary" src="<?php echo validate_image($_settings->info('user_avatar')) ?>" alt="message user image">
<div class="direct-chat-text"></div>
</div>
</div>
<div class="d-none" id="bot_chat">
<div class="direct-chat-msg mr-4">
<img class="direct-chat-img border-1 border-primary" src="<?php echo validate_image($_settings->info('bot_avatar')) ?>" alt="message user image">
<div class="direct-chat-text"></div>
</div>
</div>
I can't get my content to fit in my slideout footer. I'm not sure why this is happening. I'm not sure if I have to add it to the JavaScript.
I added the #slideFootercontent to the beginning to everything that I want in the footer, and it's still not working. To be clear, I want the content to slideout with the slideout footer.
I created a codepen.io
<footer>
<div class="navbar-fixed-bottom">
<div id="footerSlideContainer">
<div id="footerSlideButton"></div>
<div id="footerSlideContent" class="container ">
<div class="row">
<div class="container">
<div class="row">
<br>
<hr>
<div class="col-lg-4">
<h3>Latest Tweets
</h3>
<div id="example1"></div>
<h4>Watch me on Periscope</h4>
#Erica2385
</div>
<!-- col -->
<div class="col-lg-4 border">
</div>
<!-- col -->
<div class="col-lg-4">
<h3> Subscribe
</h3>
<p>Subscribe for the latest newsletters and updates</p>
<div id="mc_embed_signup" class="mailchimp">
<form action="..." method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form-inline" target="_blank" novalidate>
<div class="form-group">
<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL" placeholder="Enter email">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn__bottom--border mailchimp__btn" data-style="shrink" data-horizontal>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="" style="position: absolute; left: -5000px;"><input type="text" name="..." value=""></div>
</form>
<span class="form_nospam">No spam</span>
</div>
<!--End mc_embed_signup-->
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- container -->
<hr class="container">
<div class="container">
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
<div class="pull-right">
<iframe width="100" height="20" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/231337268&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
The problem is that you are styling #footerSlideContainer and #footerSlideContent with position:fixed (that prevents the content from being hidden).
Move the button (#footerSlideButton) outside of #footerSlideContainer, so it shows while that container is hidden and then style the rest appropriately. Check your modified codepen
Note that I changed a few things here and there as you had bad selectors that made some rules useless and also values that created problems.
Essentially, the issue is that the drop down that's created with .ui.inline.dropdown is appearing beneath the rest of the fields in the code below it. Both of which are in an accordion.
My first instinct was to just give the drop down a high z-index and the inputs a lower z-index, but this doesn't appear to have any effect on the issue.
This is the html:
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Advanced
</div>
<div class="content">
<h4>
Results match
<div class="ui inline dropdown">
<div class="text">any</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="active item" data-text="any">Any</div>
<div class="item" data-text="all">All</div>
<div class="item" data-text="none">None</div>
</div>
</div>
of the fields below.
</h4>
<div class="field">
<label for="firstName">Name</label>
<div class="two fields">
<div class="field">
<input type="text" class="form-control" id="firstName" autocomplete="off" placeholder="First Name">
</div>
<div class="field">
<input type="text" class="form-control" id="firstName" autocomplete="off" placeholder="Last Name">
</div>
</div>
</div>
</div>
</div>
...and this is how I'm initializing the drop down and accordion:
$( '.ui.accordion' ).accordion();
$( '.ui.dropdown' ).dropdown();
I'm using Bootstrap: Dropdown on Hover Plugin ( https://cameronspear.com/blog/bootstrap-dropdown-on-hover-plugin/ ) and it works perfectly. The problem is that I don't only have common sub-menus with just links. In a sub-menu I have a big login form where the user has to click some input boxes. My problem is that my menu closes when I click anywhere inside that, even inside a form element. I know it's supposed to do that (or at least it's ok) when there are only links to click on but in my case I need to actually do more than one stuff in there.
Here's part my menu (with the login form):
<li class="dropdown pull loginbox">
LOGIN</i>
<div class="dropdown-menu">
<section id="signin_alt" class="authenty signin-alt">
<div class="section-content">
<div class="wrap">
<div class="container">
<div class="row" data-animation="fadeInUp">
<div class="col-md-4 col-md-offset-1">
<div class="normal-signin">
<div class="title">
<h2>Sign In</h2>
</div>
<div class="form-main">
<div class="form-group">
<div class="un-wrap">
<i class="fa fa-user"></i>
<input type="text" class="form-control" placeholder="Username" required="required">
</div>
<div class="pw-wrap">
<i class="fa fa-lock"></i>
<input type="password" class="form-control" placeholder="Password" required="required">
</div>
<div class="row">
<div class="col-md-6">
<input type="checkbox" class="form-control" checked>
<label>Remember me</label>
</div>
</div>
<div class="row top-buffer">
<div class="col-md-4 col-md-offset-8">
<button type="submit" class="btn">Sign In</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 hidden-xs">
<div class="horizontal-divider"></div>
</div>
<div class="col-md-4">
<div class="sns-signin">
<i class="fa fa-facebook"></i><span>Sign in with Facebook</span>
<i class="fa fa-google-plus"></i><span>Sign in with Google+</span>
</div>
</div>
<div class="col-md-1"></div>
</div>
<div class="row top-buffer bottom-wrap">
<div class="col-xs-6 col-md-2 col-md-offset-1">
Forgot your password?
</div>
<div class="col-xs-6 col-md-2">
Create an account
</div>
</div>
</div>
</div>
</div>
</section>
</div>
All the tags to make the jQuery work are in line 2 and it works! I just need it to not close the sub-menu when the mouse in over it, even if it's clicking like crazy. Any ideas?
Thanks!
You can do that by using a click event on the element you want and then stopping the Propagation inside the click event.
For Example:-
$("#some_id").click(function(e){
e.stopPropagation();
});
The Div, in which you have your form having following code which may closing your div. Also all of this code should be in li tag followed by ul wnder which you should keep your form.
<div class="row" data-animation="fadeInUp">
I'm compiling Ember templates into a JS source file, which loads properly when loaded as an external source in the HTML.
However, when I inline the same source file into the HTML (which is required for the current project), I get the following error on the browser console:
Uncaught Error: Assertion Failed: An error occured while setting up template bindings. Please check "index" template for invalid markup or bindings within HTML comments.
The code of the template that is failing is the following:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="inner-nav">
<a class="navbar-brand" rel="home">
<img src="img/logo.png">
</a>
</div>
</nav>
<main class="login">
<div class="background-image">
<div class="color-overlay"></div>
</div>
<div class="container">
<aside>
<h4>Title</h4>
<p>Intro text, lorem ipsum, lahlahlah, etc.</ p>
</aside>
<article>
<div class="panel panel-default">
<div class="panel-heading">Sign in</div>
<div class="panel-body">
<form role="form" {{action "login" on="submit"}}>
<div class="form-group">
<label for="email">Email address</label>
{{input placeholder="Your email" id="email" class="form-control" value=username}}
</div>
<div class="form-group">
<label for="password">Password</label>
{{input type="password" placeholder="Your password" id="password" class="form-control" value=password}}
</div>
<label class='button-label'><a>Forgot password?</a></label>
<button type="submit" class="btn btn-primary pull-right">Sign in</button>
</form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<label class='button-label'>New user?</label>
<button type="submit" class="btn btn-default pull-right">Sign up</button>
</div>
</div>
</article>
</div>
</main>
Any ideas?
Try using the classNames attribute in your input helper instead of class and see if that helps.