OK I have made many searches before posting this but I couldn't really get what I needed, the thing is I have a popup modal for login/register
<!--Signin/Signup container-->
<div id="modal" class="popupContainer" style="display:none;">
<section class="popupBody">
<!-- Social Login -->
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fa fa-facebook"></i></span>
<span class="icon_title">سجل عن طريق الفيس بوك</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fa fa-google-plus"></i></span>
<span class="icon_title">سجل عن طريق كوكل</span>
</a>
</div>
<div class="centeredText">
<span>أو استخدم الايميل الخاص بك</span>
</div>
<div class="action_btns">
<div class="one_half">Login</div>
<div class="one_half last"> Register</div>
</div>
</div>
<!-- Username & Password Login form -->
<div class="user_login">
<form>
<label>الايميل / اسم المستخدم</label>
<input type="text" />
<br />
<label>كلمة السر</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">احفظ معلومات الدخول على هذا الجهاز</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> رجوع</div>
<div class="one_half last">Login</div>
</div>
</form>
هل نسيت كلمة المرور؟
</div>
<!-- Register Form -->
<div class="user_register">
<form>
<label>الاسم الكامل</label>
<input type="text" />
<br />
<label>عنوان البريد الألكتروني</label>
<input type="email" />
<br />
<label>كلمة المرور</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">أرسل لي رسائل في حال وجود أي تحديثات</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last">Register</div>
</div>
</form>
</div>
</section>
</div>
<!--Signin/Signup End-->
and this is the script:
<script>
// Plugin options and our code
$("#modal_trigger").leanModal({
top: 100,
overlay: 0.6,
closeButton: ".modal_close"
});
$(function () {
// Calling Login Form
$("#login_form").click(function () {
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#register_form").click(function () {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function () {
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
});
/*--------------------------------*/
</script>
</div>
Now what I need is to create an action method so when the user click Register or Login it get called to do what necessary
How can I do that. my knowledge in jquery and javascript is kind of limited
I will appreciate any help.
thank you in advance
Attach ids to your buttons:
<div id = "login_button" class="one_half last">Login</div>
Then attach an event listener to them:
$("#login_button").click(function() {
// Do something
});
Same for the Register button.
Related
so here is the code i use this for me to show/hide the comment box it works actually but the problem i encounter when i make multiple comments when i tried to click the reply on the 1st comment the comment box show/hide but when i tried to click other comments it doesnt work anymore it only works on the first one.... is there any way to fix this?..
HTML code
<div id="replybutton" class="btn4 like" style="margin-top:-25px;margin-left:-10px;">
<span class="btn reply" id="replyb">Reply</span> •
</div>
<div class="col-lg-12" id="reply" style="background:#eff9c7;margin-left:50px;margin-top:-20px;display:none;" >
<img src="img/icons/no-icon-available.png" class="pull-left" style=" border-radius:50%;margin-bottom:3px;width:30px;height:30px;" />
<p style="margin-top:18px;line-height:15px;"><strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br>
<div class="btn4 disabled" style="margin-top:-25px;margin-left:-10px;">
<span style="margin-left:5px;font-size:12px;color:gray;"><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" style="width:88%;height:25px;margin-top:-10px;" placeholder="Write a reply..." />
</div>
JAVASCRIPT
<script type="text/javascript">
$(document).ready(function(){
$('#replybutton').click(function(){
$('#reply').toggle();
});
});
</script>
id must be unique in a HTML Page, you should change id to class replybutton and reply and jquery code would be,
$(document).ready(function(){
$('.replybutton').click(function(){
$(this).next('.reply').toggle();
});
});
Snippet,
$(document).ready(function() {
$('.replybutton').click(function() {
$(this).next('.reply').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> •
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> •
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> •
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
So I am trying to open modal over other modal which is not working. there is one link say "login" which opens up another modal for me. why this is happening ?
primary modal call from following
<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="160">
<li>Sign Up</li>
<li class="menu-item-emphasis"><div>Login</div></li>
</ul>
primary modal
<div class="modal1 mfp-hide" id="modal-get-started" >
<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
<div style="padding: 50px;">
<form name="reg_form" id="get-started-form" class="nobottommargin">
<div class="row clearfix">
<div class="col-sm-12">
<h3 class="font-body">Register for Free Trial</h3>
</div>
</div>
<button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>
<button id="customGoogleBtn1" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
<br>
<div style='padding-top: 30px;padding-left: 50px' ng-show ="errorAlreadyRegister">
<span style='color:red;x' >Seems already registered. <a ng-click= "closePopup()" href="#" > Log in </a> instead?</span>
</div>
</form>
</div>
</div>
</div>
wants to open on login link
<div class="modal1 mfp-hide" id="modal-login" >
<div class="block divcenter" style="background-color: #FFF; max-width: 400px;">
<div style="padding: 50px;">
<h3 class="font-body">Login to your Account</h3>
<form class="nobottommargin">
<div class="col_full">
<label class="font-body capitalize" for="login-form-modal-username">Username:</label>
<input type="text" id="login-form-modal-username" name="login-form-modal-username" value="" class="form-control" />
</div>
<div class="col_full">
<label class="font-body capitalize" for="login-form-modal-password">Password:</label>
<input type="password" id="login-form-modal-password" name="login-form-modal-password" value="" class="form-control" />
</div>
<div class="col_full nobottommargin">
<button class="button button-rounded nomargin" id="login-form-modal-submit" name="login-form-modal-submit" value="login">Login</button>
Forgot Password?
</div>
</form>
<div class="line line-sm"></div>
<button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>
<button id="customGoogleBtn" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
<!-- Login with Google -->
</div>
</div>
</div>
function called on login link
$scope.closePopup = function(){
$.magnificPopup.close();
$.magnificPopup.open({
items: {
src: '#modal-login'
}
});
}
Using link
https://demo.owncloud.org/index.php/apps/files/?dir=/&fileid=2
I want to use the hidden field
HTML
<div id="controls" style="width: 1100px; min-width: 1100px;">
<div class="breadcrumb">
<div class="crumb svg last" data-dir="/">
<a href="/index.php/apps/files?dir=/">
<img class="svg" src="/core/img/places/home.svg" alt="Home">
</a>
</div>
</div>
<div class="button view-switcher" id="gallery-button">
<div id="button-loading"></div>
<img alt="Gallery view" src="/core/img/actions/toggle-pictures.svg" class="svg">
</div>
<div class="actions creatable" style="">
<a class="button new" href="#" data-original-title="" title="">
<span class="icon icon-add"></span>
<span class="hidden-visually">New</span>
</a>
<div id="uploadprogresswrapper">
<div id="uploadprogressbar">
<em style="display:none" class="label outer">
<span class="desktop">Uploading...</span>
<span class="mobile">...</span>
</em>
</div>
<input type="button" value="" style="display:none" class="stop icon-close">
</div>
</div>
<div id="file_action_panel" activeaction="false"></div>
<div class="notCreatable notPublic hidden">
You don’t have permission to upload or create files here
</div>
<input type="hidden" id="permissions" value="31" name="permissions">
<input type="hidden" value="537919488" name="MAX_FILE_SIZE" id="max_upload">
<input type="hidden" value="537919488" id="upload_limit">
<input type="hidden" value="979339338" id="free_space">
<input type="hidden" value="(max )" class="max_human_file_size">
Javascript
The relevant section for the JS is show below, please view
if (response.data !== undefined && response.data.uploadMaxFilesize !== undefined) {
$('#max_upload').val(response.data.uploadMaxFilesize);
$('#free_space').val(response.data.freeSpace);
$('#upload.button').attr('data-original-title', response.data.maxHumanFilesize);
$('#usedSpacePercent').val(response.data.usedSpacePercent);
$('#owner').val(response.data.owner);
$('#ownerDisplayName').val(response.data.ownerDisplayName);
Files.displayStorageWarnings();
to be displayed using code
My name is <span id="free_space"></span> ...!!!
The code is not working, I tried it with firebug
working code(try)
<script type="text/javascript">
document.getElementById('dem0').value=document.getElementById("free_space").value
</script>
My name is <span id="dem0"></span> ...!!!
solved
<script type="text/javascript">
var e=document.getElementById("free_space").value;
document.getElementById("dem0").textContent=e;
</script>
Trying to use a custom build example to generate and load code pages only when the user clicks on check boxes and submits. However the textarea does not seem to update at all.
I am attempting to get my code working like this example
http://gregfranko.com/jquery.selectBoxIt.js/customDownload.html
jsfiddle
http://jsfiddle.net/lollipopwizardkid/ujp0b1uw/
Here is the code.
<section class="custom-downloads" id="css-downloads">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
1. Choose and Download CSS components
<small>Get just the CSS you need</small>
</h1>
</div>
<div class="row">
<div class="span3">
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.css"> SelectBoxIt CSS</label>
</div>
</div>
<br />
<a class="btn" data-bind="css-downloads" id="css-generate">Generate CSS</a>
<a class="btn btn-primary download-button" id="css-download" download="jquery.selectboxit.css">Download CSS</a>
<br /><br />
<textarea class="source-area default sourceView" id="generated-css-source">// Minified source</textarea>
</section>
<section class="custom-downloads" id="javascript-downloads">
<div class="page-header">
<a class="btn btn-small pull-right toggle-all" href="#">Toggle all</a>
<h1>
2. Choose and Download JavaScript components
<small>Get just the JavaScript you need</small>
</h1>
</div>
<div class="row">
<div class="span3">
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.core.min.js" disabled> SelectBoxIt Core</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.ariaAccessibility.min.js"> Aria Accessibility</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.destroy.min.js"> Destroy method</label>
<label class="checkbox"><input checked="checked" type="checkbox" value="selectboxit/jquery.selectBoxIt.disable.min.js"> Disable method</label>
</div>
</div><!-- /row -->
<br />
<a class="btn" href="#" data-bind="javascript-downloads" id="javascript-generate">Generate JavaScript</a>
<a class="btn btn-primary download-button" id="javascript-download" download="jquery.selectboxit.js">Download JavaScript</a>
<br /><br />
<textarea class="source-area default sourceView" id="generated-javascript-source">// Minified source</textarea>
</section>
</div>
</div><!--/.fluid-container-->
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Downloads</h3>
</div>
<div class="modal-body">
<a class="btn btn-large" href="#" target="_blank" data-lang="css" download="jquery.selectboxit.css">Download CSS</a>
<a class="btn btn-large" href="#" target="_blank" data-lang="javascript">Download JavaScript</a>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.tocify.min.js"></script>
<script src ="js/base64.js"></script>
<script src="js/javascripts/DownloadBuilder.js"></script>
<script>
$(function() {
$("a[href='#']").click(function(event) {
event.preventDefault();
});
$(".toggle-all").on("click", function() {
$(this).parent().parent().find('input[type="checkbox"]').not(":disabled").each(function() {
$(this).attr("checked", !$(this).attr("checked"));
});
});
var builder = new DownloadBuilder();
$("#css-generate").on("click", function() {
builder.buildURL($("#css-downloads input[type='checkbox']:checked"), "jquery.selectboxit.css", "css", function(data) {
$("#generated-css-source").text(data.content);
if(!data.content) {
$("#css-download").fadeOut("slow");
}
if(data.url) {
$("#css-download").attr("href", data.url).fadeIn("slow");
}
});
});
$("#javascript-generate").on("click", function() {
builder.buildURL($("#javascript-downloads input[type='checkbox']:checked"), "jquery.selectboxit.js", "javascript", function(data) {
$("#generated-javascript-source").text(data.content);
if(!data.content) {
$("#javascript-download").fadeOut("slow");
}
if(data.url) {
$("#javascript-download").attr("href", data.url).fadeIn("slow");
}
});
});
});
</script>
</body>
</html>
I am using the below code to show the login modal popup. Its working well. But i need another one function to show the model popup without button click. If i call that function means the same popup should be appear. Please help me to do this.
<a id="modal_trigger" tabindex="-1" href="#modal" class="btn">Login </a>
<script type="text/javascript">
$("#modal_trigger").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close" });
$(function () {
// Calling Login Form
//$("#login_form").click(function () {
//$(".user_login").show();
//return false;
//});
})
</script>
<div id="modal" class="popupContainer" style="display: none;">
<header class="popupHeader">
<span class="header_title"><i class="fa fa-user"> Login</i></span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</header>
<section class="popupBody">
<!-- Social Login -->
<div class="user_login">
<form>
<label>Username</label>
<input type="text" />
<br />
<label>Password</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">Remember me on this computer</label>
</div>
<div class="action_btns">
<div class="one_half"><i class="fa fa-angle-double-left"></i> Back</div>
<div class="one_half last">Login</div>
</div>
</form>
Forgot password?
</div>
</section>
</div>
try this it will show the popup
$('#login_form').trigger('click');