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.
Related
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.
I'm rendering over 600 forms in an MVC format (php Codeigniter). Each one of these forms has a button labeled "More Options". When you click this button - a hidden div, located in the same parent element, is toggled, displaying more input fields and data. The problem is that the sibling toggle is quick in console, but when I click the actual button, it takes very long to trigger.
Using id's is the recommended fix, but it is slightly impractical when I have this many div elements to go through.
Here is my js file
jQuery(document.ready(function(){
jQuery("form >button[name='more_data'].meta_button").click( function(){
jQuery(this).siblings("div.meta").toggle("fast");
});
});
Here is the structure (there are 650 of these div's, with more to come)
<div>
<li id="bCIya8DZyr4idseJe5cbLA" class="even">
<form action="url" method="post" accept-charset="utf-8">
<div class="space_name"></div>
<button name="more_data" type="button" class="meta_button">More Options</button>
<input type="submit" name="Submit" value="Submit">
<div class="meta" style="overflow: hidden; display: block;">
<div class="meta_block">Set Estimates:
<div class="input_estimate">1:
<input type="number" name="estimate_1" value="" id="estimate_1" class="estimate">
</div>
<div class="input_estimate">2:
<input type="number" name="estimate_2" value="" id="estimate_2" class="estimate">
</div>
<div class="input_estimate">3:
<input type="number" name="estimate_3" value="" id="estimate_3" class="estimate">
</div>
</div>
</div>
</form>
</li>
</div>
Note: I'm running jQuery 1.7.2
Don't use a delegate
Using a delegate (.on() with a selector) like #jrummell suggested is faster when you have multiple event listeners, because you reduce the number of listeners to one.
Simpler selector using a class
So in this case though I would recommend using a simpler selector:
$(function(){
$('.meta_button').on('click', function(){
$(this).siblings('div.meta').toggle('fast');
});
});
This way you have quite simpler selector and less checks when a click is triggered, because there is no delegate. Also the clicks on other elements in the forms are not captured.
Animations slow things down
An animation could slow things down. An animation which is performed over multiple elements simultaneously even more.
Try moving all div.meta elements in a single parent and applying animation only on that single element.
You could also remove the animation entirely by just using toggle() (the comment about the multiple items is still valid in this case).
Example:
$(function(){
$('.meta_button').on('click', function(){
$(this).parent().find('.meta_holder').toggle();
// OR
// $(this).next('.meta_holder').toggle();
});
});
Including jQuery.ui.css made the redisplay incredibly slow. Costly css rules killed the display and slowed down rendering times. The "nudge in the right direction" is in the comments of the question.
I'm doing a validation in javascript and need to create a floating div for each field when submitting the form
I'm using blur to check the field, but do not know how to create a floating div
would be as in the diagram below
someone has an idea?
[field 1] [float error message]
[field 2] [float error message]
[field 3] [float error message]
Append the floating div after the field that was blur'd like so
$('input[type=text]').blur(function() {
// do your validation
if (error) {
$('<p>')
.text('Validation Error: '+error)
.css('float', 'left')
.insertAfter(this);
}
});
IMHO it's best to keep all styling in CSS. I would personally replace the ".css()" call with ".addClass()", then setup a style rule that floated the error messages. If this approach was used, and the fields were originally wrapped like this:
<div class="field">
<label>Name:</label>
<input type="text" name="name" placeholder...>
</div>
<div class="field">
<label>Email:</label>
<input type="text" name="email" placeholder...>
</div>
...
Then clearing the validation would be as simple as:
$(this).siblings('.validation-error').remove();
If you are asking for technique, then any in-line element after the field element will do the trick. Ex.
<input type="text" name="firstName"><span>show on error</span><br />
<input type="text" name="lastName"><span>show on error</span><br />
<input type="text" name="empId"><span>show on error</span><br />
make these errors hidden initially (through styles) and show/hide them by script on validation as,
if(err_cond_of_elem)
$(elem).next().show();
else
$(elem).next().hide();
Edit:
If your errors are dynamic then you can add them by .html() metod of JQuery
$(elem).next().html(custom_err_message).show();
Since you have not provided any markup or code, I'll provide a pattern for my response.
Here's how I would do this.
1.) Create your form with text inputs and error message in your markup. So the markup could be something like:
<form id="whatever">
<fieldset>
<input type="text" id="1" value=""/><div id="error1">text for error 1</div>
<input type="text" id="2" value=""/><div id="error2">text for error 2</div>
<input type="text" id="3" value=""/><div id="error3">text for error 3</div>
</fieldset>
..
..
</form>
2.) Create your css to float text inputs left. The error divs could be set as display:none, float:left; This would make sure error messages are hidden when page loads and float properly. Also, my philosophy is to let HTML do HTML and CSS do CSS and JS do JS. So rather than manipulating the dom with jquery, just place markup and content on your page and use css to handle initial visibility and positioning. No need to do that with js.
3.) Then, in your method to check input values on blur, if the validation detects an error, all you have to do is show the corresponding error with .show(). Then as the user works to correct the input and passes your validation check, set the corresponding error to .hide().
I'm working on a site where there are popup windows on the header generated by Jquery Tools Tooltip (http://flowplayer.org/tools/tooltip/index.html). My problem with them is twofold:
1) In IE7/IE8, the popups are visible on page load, causing the header to break apart and scatter across the page. The CSS I wrote should be preventing this (it does in FF) but it's not working:
#container > section > header .trigger + *{
position:absolute;
left:-9999px;
z-index:1000;
}
For reasons unknown, IE is perfectly happy if I wrap the elements beneath the element with class .trigger in a UL. This was the way I'd originally set up the HTML, but I ended up going with Jquery tabs and scrubbing all mentions of lists in the header from the CSS, so I can't figure out why that's working.
2) My second problem is that when the form in the popup under the "Write to Us" heading is submitted, the header disappears and the content container shifts. What should be happening is the "thank you" message should be loading in the same popup the contact form was in. As the form is being generated by a plugin in the CMS I'm using, I'd ideally like to solve this problem without having to figure out a way to have JS intercept the plugin's output, but if necessary I will.
Here's the code for the form:
<form method="post" id="zcrc4246f0a2add167f83d1d4084631a0b4" class="zemContactForm" action="/qp2txp/#zcrc4246f0a2add167f83d1d4084631a0b4">
<div>
<input type="hidden" name="zem_contact_nonce" value="735c856baeffe5da43125cbf5a628084" />
<input type="hidden" name="zem_contact_form_id" value="c4246f0a2add167f83d1d4084631a0b4" />
<label for="Name" class="zemText zemRequired Name">Name</label><input type="text" id="Name" class="zemText zemRequired" name="Name" value="" maxlength="100" />
<label for="Email" class="zemText zemRequired Email">Email</label><input type="text" id="Email" class="zemText zemRequired" name="Email" value="" maxlength="100" />
<label for="Project" class="zemSelect zemRequired Project">Project</label>
<select id="Project" name="Project" class="zemSelect zemRequired">
<option>Branding</option>
<option>Print</option>
<option>Web</option>
<option>Interiors</option>
<option>Other (Please Describe)</option>
</select>
<label for="Message" class="zemTextarea zemRequired Message">Message</label><textarea id="Message" class="zemTextarea zemRequired" name="Message" cols="58" rows="8"></textarea><br>
<input type="submit" class="zemSubmit" name="zem_contact_submit" value="Send" />
</div>
</form>
And the Jquery:
<script>
$(document).ready(function() {
$("header .trigger").tooltip({
position: 'bottom center',
offset: [30, -60],
relative: 'true',
delay: '70'
});
$("footer .trigger").tooltip({
position: 'top left',
offset: [-40, 100],
relative: 'true',
delay: '70'
});
});
</script>
Any help would be greatly appreciated. I'm stumped.
For the first problem try display:none; instead of left:-9999px; for the second problem you will need to post the code.
Trying and change your CSS + selector to apply the z-index. + selectors are buggy (like most useful CSS declarations) in the IE family.
http://www.quirksmode.org/css/contents.html
I found a thread, Change an element's class with JavaScript, that is along the lines of what I'm going for, but I don't know how to implement it.
I have a page with 4 input buttons and two CSS styles: "Selected" and "notSelected". One button will be hard coded initially as "Selected". When the user clicks another button, I'd like to programatically iterate through all the buttons (the number of buttons on each page will be between 2 and 10), set the clicked button's class to "Selected", and make sure all the other buttons are set to "notSelected".
I've got the logic down, but I've never done anything with JavaScript before, so I haven't the slightest idea about how to do this. If someone knows of a tutorial/piece of code already out there that does this, please point me in the right direction.
Thanks a ton!
You can go the easy way and use a framework like jQuery that does the hard work for you
As you are new to JavaScript, this might be a bit much, but have you considered using jquery? Take a look at toggleClass(): http://api.jquery.com/toggleClass/
Hi just made a quick script, Hope that helps you. Let me know if you find any problem with the script.
I am using focus event and input box, you may change it as needed.
function doSelect( obj ){ var
mylist=document.getElementById("formDiv")
var inputItems=
mylist.getElementsByTagName("input");
for (i=0; i < inputItems.length;
i++){
document.getElementById(inputItems[i].id).className
= "Notselected"; } document.getElementById(obj.id).className
= "selected"; }
Have a form tag within the div tag id="formDIV"
Have few input tags of type text and onfocus="doSelect(this)"
<body> <div
id="formDiv"> <form
name="testform">
<input type="text"
name="tx1"
id="text1"
onfocus="doSelect(this)"/>
<input type="text"
name="tx2"
id="text2"
onfocus="doSelect(this)"/>
<input type="text"
name="tx3"
id="text3"
onfocus="doSelect(this)"/>
<input type="text"
name="tx4"
id="text4"
onfocus="doSelect(this)"/>
<input type="text"
name="tx5"
id="text5"
onfocus="doSelect(this)"/>
</form> </div>
</body>
this should
help.