I'm trying to slideUp part of page by jQuery.
I use this code
$("#FirstPage").slideUp(1000);
I will hide FirstPage part of page,but not by time,I mean that it will hide suddenly not by 1000 ms.
the following code is FirstPage part,which should be hide after 1000ms and with slideUp.
<div id="FirstPage">
<div id="Login">
<form method="post" id="LoginForm">
<br />
<input type="text" name="username" id="username" />
<br />
<input type="password" name="passowrd" id="password" />
<br />
<input type="checkbox" name="invisible" value="TRUE" id="invisible" />
<br />
<img src="" /><input type="text" name="captcha" disabled="true" style="display: none"
id="captcha" />
<br />
<input type="button" value="Login ..." onclick="Ajax_Login()" />
</form>
</div>
<div class="OtherFeaturBig" id="WindowsVersion">
<img src="http://localhost/Files/Images/02.jpg" />
</div>
<div class="OtherFeaturBig" id="Advertisment">
<img src="http://localhost/Files/Images/02.jpg" />
</div>
<div class="OtherFeaturSmall" id="AboutUs">
<img src="http://localhost/Files/Images/03.jpg" />
</div>
<div class="OtherFeaturSmall" id="ContactUs">
<img src="http://localhost/Files/Images/03.jpg" />
</div>
</div>
where is my code problem?
This code works fine to slide your div up upon the click of a button:
$("#hide").click(function() {
$("#FirstPage").slideUp(1000);
})
As used in this jsFiddle with your HTML (I removed the non-functioning images): http://jsfiddle.net/jfriend00/JFRGr/.
So, the issue must have to do with either your code or the rest of your HTML, both of which you have not shared. If you want further help, please show us the actual code you are using and explain what triggers the code to run.
As Trikks said, make sure that you aren't calling slideUp before the page is fully loaded.
try
Ensure to run your code after document.ready so the DOM is really loaded. Also ensure that jQuery is loaded and 1sec = 1000 ms...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#FirstPage").slideUp(1000);
});
</script>
Related
I am trying to submit a form inside lightbox modal. But popup showing empty content. my code is as follows:
<amp-lightbox id="success-lightbox" layout="nodisplay">
<amp-list src="http://localhost:4000" width="auto" height="200" layout="fixed-height" items="." single-item>
<template type="amp-mustache">
<div class="lightbox-modal">
<form action="/" method="get" target="_top">
{{#items}}
<input type="checkbox" value={{id}} /> {{/items}}
<input type="submit" value="submit" />
</form>
</div>
</template>
</amp-list>
</amp-lightbox>
<input class="" type="submit" value="show more" on="tap:success-lightbox" />
I included all dependencies required amp-form, amp-lightbox, amp-list, amp-mustache.
If I remove the form tag, checkboxes are showing fine.
The working code:
<amp-lightbox id="success-lightbox" layout="nodisplay">
<amp-list src="http://localhost:4000" width="auto" height="200" layout="fixed-height" items="." single-item>
<template type="amp-mustache">
<div class="lightbox-modal">
{{#items}}
<input type="checkbox" value={{id}} /> {{/items}}
<input type="submit" value="submit" />
</div>
</template>
</amp-list>
</amp-lightbox>
<input class="" type="submit" value="show more" on="tap:success-lightbox" />
I went through docs. but didn't find anything. is it not possible to nest the form inside amp-lightbox ?? if not possible, is there any workaround to submit data from lightbox ??
amp-mustache doesn't support form elements. A simple workaround in your case is moving the form tag outside the amp-list element.
So I read here: https://api.jquery.com/submit/ that I can do this
$("#validationForm").submit(function(event) {
event.preventDefault();
alert('test');
});
in order to prevent the form to be submitted when the submit button is clicked. However, for whatever reason it is not working and I have no idea why. I tried to delete everything except for two inputs and tried pressing the submit button but it still didn't alert me. Anybody know how to fix this? Here is the rest of my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript">
$("#validationForm").submit(function(event) {
event.preventDefault();
alert('test');
});
</script>
<body>
<div>
<h1 id="header" align="center"> </h1>
</div>
<div id="wrapper1">
<div>
<a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">About Website</a>
<h1 class="infoText" style="display:none">Text</h1>
</div>
<div>
<a class="info" id="hvr-float" href="javascript:void(0);">Dear Friends</a>
<h1 class="infoText" style="display:none">Text</h1>
</div>
<div>
<a class="info" id="hvr-float" href="javascript:void(0);">Dear Reader</a>
<h1 class="infoText" style="display:none">Text</h1>
</div>
<div>
<a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">The People</a>
<h1 class="infoText" style="display:none"></h1>
</div>
<div>
<a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">Sign Up</a>
<div id="wrapper2" style="display:none">
<form id="validationForm">
<input class="infoPlaceholder" name="firstName" placeholder="First Name"/>
<input class="infoPlaceholder" name="lastName" id="addRightMargin" placeholder="Last Name"/>
<input class="infoPlaceholder" name="email" placeholder="Email"/>
<input class="infoPlaceholder" name="city" placeholder="City"/>
<input class="infoPlaceholder" name="state" placeholder="State"/>
<p></p>
<div id="wrapper3">
<div style="float:left" id="hvr-float">
<a class="supportWhoText" id="elderlyButton" href="javascript:void(0);">Elderly</a>
<div class="eacQuestion" id="elderlyText" style="display:none">How many elderly?</div>
<div>
<input class="countBoxes" id="elderlyBox" style="display:none" name="elderlyCount" placeholder="#"/>
</div>
</div>
<div style="float:left" id="hvr-float">
<a class="supportWhoText" id="adultButton" href="javascript:void(0);">Adults</a>
<div class="eacQuestion"id="adultText" style="display:none">How many adults?</div>
<div>
<input class="countBoxes" id="adultBox" style="display:none" name="adultsCount" placeholder="#"/>
</div>
</div>
<div style="float:left" id="hvr-float">
<a class="supportWhoText" id="childrenButton" href="javascript:void(0);">Children</a>
<div class="eacQuestion" id="childrenText" style="display:none">How many children?</div>
<div>
<input class="countBoxes" id="childrenBox" style="display:none" name="childrenCount" placeholder="#"/>
</div>
</div>
</div>
<div style="float:left">
<textarea class="comments" name='comment' id='comment' placeholder="Comments"></textarea>
</div>
<div style="float:right" id="hvr-float">
<input type="submit" id="submitButton" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</body>
I know my code is like super nasty... This is my first website that I am building. Please help! I am so lost!
Put your code within $( document ).ready() handler
$(document).ready(function(){
$("#validationForm").submit(function(event) {
event.preventDefault();
alert('test');
});
});
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready. ( Taken from : https://learn.jquery.com/using-jquery-core/document-ready/ )
This can be seen from your code that the code is in head element. So, when the page is loaded the script is executed when the form is not yet available in the DOM. To wait for the DOM to finish loading, you can use ready.
So, you need to use ready
$(document).ready(function () {
$("#validationForm").submit(function (event) {
event.preventDefault();
alert('test');
});
});
Or, you can also move the script at the end of body.
I have a popup login form. I want the form to submit, then close that popup window. How can I accomplish this? The window is currently set to close before the return for the function happens. Where does window.close() go in this case? Thank you for any help.
Form:
<form name="catseczoneform30738" onSubmit="return checkWholeForm30738(this)" method="post" action="https://redlakewalleye.worldsecuresystems.com/ZoneProcess.aspx?ZoneID=12695&Referrer={module_siteUrl,true,true}&OID={module_oid}&OTYPE={module_otype}">
<div class="form">
<div class="item">
<label for="SZUsername">Username</label>
<br />
<input class="cat_textbox_small" type="text" name="Username" id="SZUsername" maxlength="255" />
</div>
<div class="item">
<label for="SZPassword">Password</label>
<br />
<input class="cat_textbox_small" type="password" name="Password" id="SZPassword" maxlength="255" autocomplete="off" />
</div>
<div class="item">
<input type="checkbox" name="RememberMe" id="RememberMe" />
<label for="RememberMe">Remember Me</label>
</div>
<div class="item">
<input class="cat_button" type="submit" value="Log in" />
Lost password?</div>
</div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
function checkWholeForm30738(theForm){var why = "";
if (theForm.Username) why += isEmpty(theForm.Username.value, "Username");
if (theForm.Password) why += isEmpty(theForm.Password.value, "Password");
if (why != ""){alert(why);
return false;
}
theForm.submit();
window.open('http://www.redlakewalleye.com/promotional/activation-form','_blank');
window.close();
return false;
}
//]]>
</script>
</form>
If possible the window.close() should be included as part of the server response to your submit event. If you include the window.close() as part of the submit on the form, it will cause your form to close before the submit has actually happened.
I have 4 inputs 3 of them are hidden. What I want is whenever user will the "Add More Pics". It will show the hidden inputs as many as time link is clicked. I dont have idea how it will work in Jquery? If someone helps I would be thankful.
<html>
<head>
</head>
<body>
<form>
<input type="file" id="pic1" />
<input type="file" style="display:none;" id="pic2" />
<input type="file" style="display:none;" id="pic3" />
<input type="file" style="display:none;" id="pic4" />
Add More Links
</form>
</body>
</html>
try this:
$('#AddMore').click(function(e){
e.preventDefault();
$('input[type="file"]:hidden:first').show()
})
DEMO
Whats wrong with my code . The title is not displayed within the div banAdT :
<form action="" method="post" enctype="multipart/form-data">
<p>
Banner Ad Name :<br />
<input type="text" name="bannerAdName" id="bannerAdName" />
</p>
<p>
Your web page :<br />
<input type="text" name="bannerAdWeb" id="bannerAdWeb" />
</p>
<p>
Ad image :<br />
<input type="file" name="bannerAdImage" id="bannerAdImage"/>
</p>
<p>
Title :<br />
<input type="text" name="bannerAdTitle" id="bannerAdTitle" />
</p>
<p>
Description :<br />
<textarea name="bannerAdDesc" id="bannerAdDesc" ></textarea>
</p>
<div id="button"><input type="button" value="VIEW" onclick="return upload()"/></div>
<input type="hidden" value="POST" />
</form>
<div id="popupContact">
<a id="popupContactClose">x</a>
<div id="contactArea">
<div id="banAdT">
<script>document.write(document.getElementById("bannerAdTitle").value);</script> <!-- Displays nothing -->
</div>
<img src="" id="preview" width="120" height="120" />
</div>
</div>
That's because when the script runs, the element bannerAdTitle won't have a value. I'm not exactly sure what you're trying to do, but you probably want to attach a change event listener to the bannerAdTitle input, and write the value from there:
document.getElementById("bannerAdTitle").onchange = function() {
document.getElementById("banAdT").innerHTML = this.value;
}
That will write the value of bannerAdTitle in the banAdT element every time the change event is fired.
document.write is executed as the page loads, but at that point you haven't given bannerAdTitle a value - the INPUT is empty.