When this code pops up as a form it works well, but when I press "Don't have an Account.." it redirects to the Parent Directory.
Can someone help?
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
<div class="header">
<ul class="headerList">
<li id="item"> Home</li>
<li id="item"> About us</li>
<li id="item"> Contact us</li>
<li id="popup-login">
<button onclick="togglePopup()">Login/Register</button>
<div class="popup" id="popup-1">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<form class="form" id="login">
<h1 class="form__title">Login/Register</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or email">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text">
Forgotten your password?
</p>
<p class="form__text">
<a class="form__link" href="./" id="linkCreateAccount">Don't have an account? Create account?</a>
</p>
</form>
The problem is that by clicking on the button you are clicking on a link <a> with href="./".
The solution for this case should be: implementing javascript trigger instead of usual html-link:
<a class="form__link" href="void(0);" onclick="toggleCreateAccountPopup()" id="linkCreateAccount">Don't have an account? Create account?</a>
Here, href is voided, and JS-trigger toggleCreateAccountPopup() is called - instead of linking to parent dir.
Related
I have created a form modal using jQuery:
<ul class="loginbar pull-right">
<li class="hoverSelector">
<i class="fa fa-globe"></i>
Help
</li>
<li class="topbar-devider">
</li>
<li id="id1 ">
Register
</li>
<li class="topbar-devider">
</li>
<li>
<a>Login</a>
</li>
</ul>
Form code
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: #f4a742">Register a new account</h4>
</div>
<div class="modal-body">
<div class="container content">
<div class="row">
<div class="col-md-6 ">
<form class="reg-page" id="RegID">
<div class="form-group">
<div class="form-group internal">
<label>First Name</label> <input type="text" name="fname"
class="form-control margin-bottom-20">
</div>
</div>
<div class="form-group">
<div class="form-group internal">
<label>Last Name</label> <input type="text" name="lname"
class="form-control margin-bottom-20">
</div>
</div>
<div class="form-group">
<div class="form-group internal">
<label>Email Address <span class="color-red">*</span></label>
<input type="text" name="email"
class="form-control margin-bottom-20">
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6 checkbox">
<label> <input type="checkbox"> I read <a
href="page_terms.html" class="color-green">Terms and
Conditions</a>
</label>
</div>
<div class="col-lg-6 text-right">
<button class="btn-u" type="submit">Register</button>
</div>
</div>
</form>
</div>
</div>
</div> <!-- end content -->
</div> <!-- end modal-body -->
</div> <!-- end modal-content -->
</div> <!-- end modal-dialog -->
</div> <!-- end modal -->
</div> <!-- end container -->
<script>
$( "#id1" ).click(function() {
$( "#myModal" ).click();
});
</script>
It seems everything is okay for me, initial it was work but suddenly it is giving trouble, so what would be the mistake.
When ever I have click on register it is not pop-up the form, could you please let me know what mistake I have done.
$( "#id1" ).click(function(ev) {
ev.stopImmediatePropagation(); // sometimes click event fires twice in jQuery you can prevent it by this method.
$( "#myModal" ).modal(); // you should use native function of Bootstrap.
});
You dont need to add any jquery or js for that at first place.
So you need to add data-target attribute to target your myModal,
<li id="id1 "> Register</li>
So you markup should look like,
<ul class="loginbar pull-right">
<li class="hoverSelector"><i class="fa fa-globe"></i>
Help</li>
<li class="topbar-devider"></li>
<li id="id1 "> Register</li>
<li class="topbar-devider"></li>
<li><a>Login</a></li>
</ul>
Alternate to your js requirement you could do it on click of a tag,
$('ul.loginbar').on('click', 'li#id1 > a', function(){
$('div#myModal').modal('show');
});
I have three columns of equal width of col-md-4, however the middle one has an ng-show set on it and sometimes will not be displayed. Right now when friend requests come in and the right most col-md-4 comes up, it is showing up in the middle when the middle one is still hidden. How do I still have the middle col-md-4 chatWindow take up space even when it is hidden?
<div class="row">
<div class="col-md-4 friendListWindow" ng-init="getFriends()">
Friends List
<form ng-submit='addFriend(username)' name='addFriendForm'>
<input type='text' name='username' ng-model='username' required/>
<input type='submit' ng-disabled='!addFriendForm.$valid' value='Add Friend'>
</form>
Online Friends
<ul>
<span ng-repeat='friend in friends track by $index | orderBy:"name"' ng-click='startChat(friend)'>
<li ng-if='friend.online'>
<span class='friendService'>{{friend.service}}</span>
<span class='friendName'>{{friend.name}}</span>
</li>
</span>
</ul>
</div>
<div class="col-md-4 chatWindow" ng-show="activeFriend">
<div class="activeFriendBox">Chat with {{activeFriend.name}}</div>
<div class="messages">
<div ng-repeat='message in activeFriend.messages track by $index | orderBy:"timeStamp"'>
<span>{{message.from}}</span>
<span>{{message.message}}</span>
<span>{{message.timestamp}}</span>
</div>
</div>
<div class="sendMessage">
<form ng-submit='sendMessage(messageText)' name='messageForm'>
<input type='text' name='message' ng-model='messageText' required/>
<input ng-disabled='!messageForm.$valid' type='submit' value='send'/>
</form>
</div>
</div>
<div class="col-md-4 friendRequestsWindow">
<div class="friendRequests">
<ul>
<li ng-repeat='friend in friendRequests track by $index'>
<span>New friend Request from: {{friend}}</span>
<button ng-click='acceptFriendRequest(friend)'>Accept</button>
<button ng-click='ignoreFriendRequest(friend)'>Ignore</button>
</li>
</ul>
</div>
<div class="acceptedFriendRequests">
<ul>
<li ng-repeat='friend in acceptedfriendRequests track by $index'>
<span>{{friend}} accepted your friend request</span>
<button ng-click='acknowledgeFriendRequest($index)'>Acknowledge</button>
</li>
</ul>
</div>
</div>
</div>
You can use ng-show in the col content instead of the col itself
Instead of
<div class="col-md-4" ng-show="xxx">content</div>
Use
<div class="col-md-4">
<div ng-show="xxx">content</div>
</div>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
<input type="text" id="message" param="1" placeholder="chat here.." />
This is element inside the div which is working fine outside the javascript
here is the case after appended element
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
Now when I do
$('#message').keypress(function(event){
alert('WORKING');
});
alert('working') only works when I type any key in the first element after the append is made on some click and if I type something inside that appended input box I get nothing but why?
Look at using .on() or .live() depending on your jQuery version to bind to elements that are appended.
$("div").on( "keypress", "#message", function(){
alert( "working!" );
});
where div is the selector of a parent of #message.
here work fine;
https://jsfiddle.net/mig1098/0rgd3ppu/
var id='one',img_url='http';//test values
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
$('#message').keypress(function(event){
alert(event.keyCode);
});
I'm using jQuery dialog to gather the informations from users then append to my desired div. This function works very well, but when comes to edit/update my contents, I have no ideas how to do.
Front-Ends HTML
<li class="description_panel">
<a id="editPanel" href="#"></a>
<a id="closeBtn" href="#" class="closeButton"></a>
<div class="panel_title">
<h2>**Subscribe Here!**</h2>
</div>
<div class="panel_img">
<img width="320px" src="link_to_img_url"/>
</div>
<div class="panel_description">
<p>My paragraph 1</p>
<p>My paragraph 2</p>
</div>
</li>
Edit Panel
<div id="edit-dialog-form" title="Edit Panel">
<form id="formUpdatePanel">
<div class="form-group">
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel title::</h5>
<input style="margin-bottom:20px;" id="updatePanelTitle" class="form-control input-lg" name="title" placeholder="Panel Title" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>URL to image: </h5>
<input style="margin-bottom:20px;" id="updatePanelImageURL" class="form-control input-lg" name="imageURL" placeholder="Link to Image URL" type="text"></input>
</div>
</div>
</div>
<div class="rows">
<div class="col-md-12">
<div class="col-lg-12">
<h5>Panel description:</h5>
<textarea id="updatePanelDescription" rows="5" cols="50" style="width:312px"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
JQuery
$('#editPanel').click(function(){
editDialog.dialog("open");
});
var editDialog = {...};
function updateDialog {
}
How to retrieve all the inputs values and textarea value and display in the dialog input box and update/overwrite the contents again.
I have designed a page with ParentTabs and ChildTabs, now on ParentTabs are displayed childTabs with other content each. How can I do that action button (continue) to go to the next child tab in order to display the other content tab.
<div id="content">
<div class="tineUl">
<ul class="mainUl">
<li class="selected"><a><span>TabOne</span></a></li>
<li><a><span>TabTwo</span></a></li>
<li><a><span>ThirdTab</span></a></li>
<li><a><span>FourthTab </span></a></li>
</ul>
</div>
<div id="subContent">
<div class="tineUl">
<ul class="subMainUl">
<li class="selected"><a><span>TabOne</span></a></li>
<li><a><span>TabTwo</span></a></li>
<li><a><span>ThirdTab</span></a></li>
<li><a><span>FourthTab </span></a></li>
</ul>
</div>
<div id="subContentChild">
<p>
SubContent Menu Zone.
</p>
<input type="submit" class="button" value="Cancel"></input>
<input type="submit" class="button" value="Continue"></input>
</div>
</div>
</div>
fiddle: http://jsfiddle.net/Ksb2W/138/
http://os.alfajango.com/easytabs/#twitter-contact choose your tabs .