Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I have done a html Login page which needs to be animated once the page loads, i have added a java script function to do the same. But nothing happens. Here is my code,
<div id="animate-wrapper" class="afterSlide">
<h1>Login</h1>
<form name="login" id="login" >
<div class="row-fluid nowrap">
<div class="input-container">
<label>User Name:</label>
<input id="d_username" name="d_username" autofocus="autofocus" type="text" placeholder="" autocomplete="off">
</div>
<div class="input-container">
<label>Password:</label>
<input id="d_password" name="d_password" type="password" placeholder="" autocomplete="off">
</div>
<div class="input-container">
<label> </label>
<button type="submit" class="btn">Login</button>
<input type="hidden" name="locale" value="en_US">
</div>
</div>
<div id="eval-users-toggle-container">
<div id="eval-users-toggle">
<div>Login as an Evaluator</div>
<div id="eval-arrow" class="closed"></div>
</div>
</div>
</form>
</div>
And Javascript,
<script type="text/javascript">
$(document).ready(function(){
$("#login-background").fadeIn(1000, function() {
$("#login-logo").addClass("afterSlide");
$("#animate-wrapper").addClass("afterSlide");
$("#d_username").focus();
$("#login-footer").addClass("afterSlide");
});
</script>
Use the Error console of your browser to tackle JavaScript problems.
First of all you are not closing the FadeIn() function parameter and the method itself.
EDIT :
Second problem here is your selector for the fadeIn(). When using an "#" as selector you are selecting by id, but you have no element with id "login-background". I;m guessing you want the whole div containing the form to fadeIn once the page is done loading. In that case you need to select the div by id "animate-wrapper".
Change you JavaScript into:
<script type="text/javascript">
$(document).ready(function(){
$("#animate-wrapper").fadeIn(1000, function() {
$("#login-logo").addClass("afterSlide");
$("#animate-wrapper").addClass("afterSlide");
$("#d_username").focus();
$("#login-footer").addClass("afterSlide");
});
});</script>
Last problem here is that the fadeIn() method is trying to fade in a element which is already visible, therefore it is not doing anything. The element you are trying to fadeIn needs to have the style element "display:none" making it not visible at first.
You can change this by adding a style for your div with id "animate-wrapper" at the top of your CSS code, setting "display:none":
#animate-wrapper {
display:none;
}
Or just adding it in the div itself (which is kind of the uglier solution):
<div id="animate-wrapper" class="afterSlide" style="display:none">
EDIT 2 :
If you want the form to slide in from left to the right, like you said in the comments you will have to modify your JavaScript a bit. jQuery does not have a method to slideIn horizontally. You will need to get the width of the wrapper, and animate show the element. Change the row of the fadeIn() method to this:
var wrapper_width = $("#animate-wrapper").width();
$("#animate-wrapper").width(0);
$("#animate-wrapper").show().animate({width: wrapper_width}, 1000, function() {
Close all the methods brackets properly and create all used ids.
Please check you import jquery (file/cdn) into you code. if no then add cdn into page
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and you can use browser console (Shift+Ctrl+J) for check javascript error.
if you are newer then use firebug for debug javascript/jquery.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
This is my JavaScript code which is not executing properly. I think I am getting something wrong somewhere.
I want to add a search bar to make a search option in a responsive menu navbar. However, it is showing in desktop but not in mobile menus. That's why I am using jQuery to add this manually.
$(document).ready(function() {
$('ul').append("
<li class='fusion-custom-menu-item fusion-main-menu-search fusion-last-menu-item'>
<a class='fusion-main-menu-icon'></a>
<div class='fusion-custom-menu-item-contents'>
<form action='http://www.heilmancenter.com/' method='get' class='searchform' role='search'>
<div class='search-table'>
<div class='search-field'>
<input type='text' placeholder='Search ...' class='s' name='s' value=''>
</div>
<div class='search-button'>
<input type='submit' value='' class='searchsubmit'>
</div>
</div>
<input type='hidden' value='en' name='lang'>
</form>
</div>
</li>
");
});
remove new lines from the html: either concat all lines or put your html code in one line
The first problem is that you mispelled the function keyword, the second one is that you are creating a mult-line string, but the engine doesn't know it and interprets the second line as a instruction. You need to take a precaution, such as add a backslash at the end of any line.
jQuery(document).ready(function(){
jQuery('ul').append("<li class='fusion-custom-menu-item fusion- main-menu\
-search fusion-last-menu-item'><a class='fusion-main-menu-icon'></a><div\
class='fusion-custom-menu-item-contents'><form\
action='http://www.heilmancenter.com/' method='get' class='searchform'\
role='search'>\
<div class='search-table'>\
<div class='search-field'>\
<input type='text' placeholder='Search ...' class='s' name='s'\
value=''>\
</div>\
<div class='search-button'>\
<input type='submit' value='' class='searchsubmit'>\
</div>\
</div>\
<input type='hidden' value='en' name='lang'></form>\
</div></li>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have form simple like this..
And this for code
<form action="aksi.php?opsi=edit&aksi=update" method="post">
<input name="cabangID" type="hidden" value="'.$row['id'].'"/>
<div class="form-group"><label>Image (link)</label><input type="text" class="form-control input-xlarge" name="image_cabang" value="'.$row['image'].'"/>
<img src="'.$row['image'].'" width="420" height="275">
</div>
</form>
Now, I want to improve code like this.. When I change Image link, preview image change automatically without page refresh..
What is the code that I can use? Thank You
Try this (change input field to http://i.stack.imgur.com/uUHMf.png for example and click 'Change' button):
function fnOC()
{
var oim,oin;
oim=document.getElementById('idImg');
oin=document.getElementById('idInput');
oim.src=oin.value;
}
<div class="form-group">
<label>Image (link)</label><input id='idInput' type="text" class="form-control input-xlarge" name="image_cabang" value='http://www.vemix.net/MorningGloryFlower.jpg'/>
<input type='button' value='Change' onclick='fnOC();'/>
<img id='idImg' src="http://www.vemix.net/MorningGloryFlower.jpg" width="420" height="275">
<!--http://i.stack.imgur.com/uUHMf.png-->
</div>
You can do like this:
<input type="text" oninput="update(this.value)">
<img id="image" />
<script>
function update(value) {
document.getElementById("image").src = value;
}
</script>
On input update function is called with one parameter - the value of input field then the value is assigned to attribute src of image.
Note that there is no validation, there is no communication with server (you can do it by AJAX) it is just an example of data binding.
You should propably learn JavaScript.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I wanna hide the div having class "ToBeHiddenWhenSubmitted" and show an animation gif until the next page is loaded completely.
<div class="front-paper" >
<div class="container">
<form name="frm" method="GET" action="new.php" onsubmit="return validateForm()" >
<div class="input-append">
<input class="span6 input-custom" type="text" name="search" value="" style="min-width:10px;"><br><br>
<div class="ToBeHiddenWhenSubmitted">
<select class="btn btn-custom" name="view" id="views" data-native-menu="false" style=" height:42px; width:258px;">
<option value="linkfile">Show Files</option>
<option value="links">Show Links</option>
</select>
<button type="submit" value="Search" id="clickme" class="btn btn-custom">Search</button>
</div>
</div>
</form>
</div>
</div>
This should be as trivial as using .show() and .hide() on your targets within your existing validateForm function.
function validateForm (event) {
$('.ToBeHiddenWhenSubmitted').hide();
$('#animated-gif-selector').show();
// whatever you already do in this function
}
If you are wondering how to continue the animation on the next page, you will have to do that from that page. To do that, hide the form or whatever on your next page by default and show the animated gif by default, then add an ready handler to swap their visibility:
$(function() {
$('#animated-gif-selector').hide();
$('.ToBeShownWhenPageFullyLoads').show();
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a HTML login form in my ASP.NET MVC application that looks like this:
<form action="/Account/Login" class="form" method="post">
<input name="UserName" size="25" type="text" value="">
<input name="Password" size="25" type="password">
<button type="submit" class="glossy">Login</button>
</form>
<div class="loading-mask" id="authenticating">
<span>Authenticating ...</span>
</div>
When the user clicks submit there is a delay before the /Account/Login action is processed and before it returns either with a partial form showing errors or before it takes the user to a new page.
Is there a way that I can make the loading div invisible when the form first appears and then have it become visible after the submit button is clicked. Note that I won't need it to be hidden again as any action after the submit will result in a fresh load of the page.
Note I am looking for some way that does not use jQuery.
Set the display property the to none at first.
#authenticating {
display:none;
}
And then in the form's code
onsubmit="document.getElementById('authenticating').style.display = 'block'"
EDIT
As Dave suggested, it is better to use event listeners.
document.getElementsByClassName('form').addEventListener("submit", function(){
document.getElementById("authenticating").style.display = "block";
}), false);
I'm trying to place a link on a page that will pop up a form for users to share the page via email...
<img src="images/email.jpg">
<div id="tellfriend">
<form id='tellafriend_form' method="post" onsubmit="return executeOnSubmit();"
action="sharemail.php" name="tellafriend_form">
<label for="name">Your Name:</label>
<input class="std_input" type="text" id="name" name="name" size="40" maxlength="35" value="">
<label for="to">Recipient's Email:</label>
<input class="std_input" type="text" id="to" name="email" size="40" maxlength="35">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="18" cols="40">
message here</textarea>
<input type="submit" onclick="javascript: pageTracker._trackPageview('/share/wf360');" name="submit" class="form_but" value="Submit">
</form>
</div><!-- #tellfriend -->
here's the javascript I'm using (in addition to jQuery):
<script>
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};
$(document).ready(function() {
$('#tellfriend').hide();
$('a.email, #tellfriend a.close').click(function() {
$("#tellfriend").fadeToggle('slow');
});
});
</script>
<script type="text/javascript">
function executeOnSubmit()
{
alert('Email has been successfully sent. Thanks for sharing!');
}
</script>
I'm not sure why it's not working: the form isn't popping up.
Answer: http://jsfiddle.net/morrison/f3Uy2/
Notes:
Uses the fadeToggle() function in jQuery.
Notice the changes to the html (ignore the kitten, if you'd like).
It appears you are trying to replace the already existing fadeToggle() function.
Also, the existing fadeToggle() function does not accept 'toggle' as a value for opacity. Quoted from the jQuery API page:
.fadeToggle() works on the same principle as .fadeOut() and .fadeIn(). Like .fadeOut(), .fadeToggle() will fade elements out if they are visible; like fadeIn(), it will fade elements in if they are hidden. Even if an element begins with opacity 0, if it takes up space in the document (i.e. it has a height or width), it isn't considered hidden. The same is true for an element with visibility: hidden. You can use .fadeTo() or .animate() to fade an element from one opacity to another without affecting its display property. If you do that, however, an element that initially has display: none won't become visible just because you're animating the opacity. Hope that helps.
So try removing the function you added at the beginning and it looks like the rest of your code should be okay.
Update:
After looking at your site, it appears you have two copies of jQuery, v1.4.2 (which doesn't have fadeToggle() and v1.5.2 which does have it. But you are loading v1.5.2 after a lot of other scripts have loaded... I get an error on firebug of "$ is not a function" because of this. So, try completely replacing v1.4.2 (the very first script tag) with v1.5.2.... and get firebug ;)
And actually, the script does work - but other scripts are probably broken due to the above reasons. The form pops up WAY at the top next to the first image. You'll need to change the position from absolute to relative and adjust the left to around 130px in the CSS.