Develop Reference

Hide div on page but div shows before being hidden

How do I get the <div> not to show at all when the page loads? The div is set to hidden in JS and the <div> hides but its after the <div> has already shown on the page for a brief second.
I am using this popup in my website.
http://mootools.net/forge/p/popupwindow
Here is my code :-
<script type="text/javascript">
App = {};
window.addEvent('domready', function() {
App.popUp1 = new PopUpWindow('', { contentDiv: 'trailerquestion', width: 559 });
App.popUp2 = new PopUpWindow('', { contentDiv: 'popup-redflag', width: 559 });
});
</script>
<?php
function JSLink($text, $onclick) {
return "$text";
}
$asklink=JSLink('<div class="buttonNew greenB bigrounded trailer-button-question"><span>Ask me a question</span></div>', 'App.popUp1.open(); App.popUp1.positionTo(this, 1180, 100);');
?>
<?php
echo $asklink;
?>
<div id="trailerquestion">
<?php
$this->load->view('popup/popupaskmequestion',$results);
?>
</div>

Set the div's display to none with CSS, not Javascript. Then change the display property with Javascript when you want it to be shown.

If you want the div to just be hidden but take up the space it requires, use -
<div id="trailerquestion" style="visibility:hidden">
If you want the div to not take up any space at all and be hidden, use -
<div id="trailerquestion" style="display:none">

Set the element to be hidden with css e.g <div id="trailerquestion" style="display:none">
You might need to set it to display again when you show the dialog if your dialog library doesn't do that for you.

How to get content of a non-specific DIV-Element using jQuery

I've a problem and I hope that it's possible to explain.
I have a lot of short texts which come from a mysql-DB.
while ($foo = mysql_fetch_object($query)) {
$text = $foo -> column_text_db;
echo '<div class="atextdiv">' . $text . '</div>';
}
now i want to add an onclik-Event-Handler to the "atextdiv"-Container(s) who takes the content and put it on an input-field:
<form>
<input type="text" id="clickcontent" />
</form>
My problem: Each page has a different number of records in database. The final HTML-Code (after parsing the PHP-Code) could be:
<div id="wrapper">
<div class="atextdiv">Papa was a rolling stone</div>
<div class="atextdiv">Oh my god! They killed Kenny</div>
<div class="atextdiv">Foo Bar</div>
<!-- more content -->
</div>
<form>
<input type="text" id="clickcontent" />
</form>
So, how can I get the content of each "atextdiv"-Container after click on it?

Just like:
$(".atextdiv").click(function() {
console.log($(this).text());
});
Use a combination of this and the .text method inside the click handler.

You can bind click event on '.atextdiv' and in event fetch its value using .text()
$('#wrapper').on('click', '.atextdiv', funnction(){
$("#clickcontent").val($(this).text())
})

Just grab the innerHTML of the item that the click event is occurring on:
$('.atextdiv').click(function(e){
alert(e.currentTarget.innerHTML);
})
http://jsfiddle.net/9VE6A/8/

Jquery a .click then .slideDown div

I have anchor which when you click would slidedown a form within a div, and then click again would slide it back up. Initially I just used .toggle, but now I have multiple anchors and multiple divs with the same class, so I had to rework the code or else anytime you clicked on any of the anchors all the divs would slidedown and you would see 4 forms.
So, I thought I could just rewrite the code with .closest, but it doesn't seem to be working. I think it's because .closest has to go up the DOM hierarchy, so it won't work for my div the way it's laid out. I tried .sibling but that doesn't work either. Any ideas?
Pre-Pay with Credit Card
<div style="display: none;" class="payment-form-wrapper">
<h3><?php _e('Submit a Payment', 'jc_stripe'); ?></h3>
<form action="" method="POST" id="stripe-payment-form" class="payment-form">
...
</form>
</div>
<script>
$("a.payment-form-show").click(function() {
var e = $(this).closest("div.payment-form-wrapper");
if (e.is(":hidden")) {
e.slideDown("slow");
$(this).html("Don't Pre-Pay with Credit Card")
} else {
e.slideUp("slow");
$(this).html("Pre-Pay with Credit Card")
}
return false;
});
</script>

I think you should wrap your a.payment-form-show and div.payment-form-wrapper inside a div. Like this:
<div>
Pre-Pay with Credit Card
<div style="display: none;" class="payment-form-wrapper">
<h3><?php _e('Submit a Payment', 'jc_stripe'); ?></h3>
<form action="" method="POST" id="stripe-payment-form" class="payment-form">
...
</form>
</div>
</div>
When the a tag is clicked, you look for the immediate parent and then find the form:
$(this).parent().find("div.payment-form-wrapper");
In this case, the div wrapper serves as the context for your tags. This would create a more maintainable code. Because when you use .next() or some function to look for the .div.payment-form-wrapper, your javascript code is coupled to the current position of the tags. In the future, if you modify the position, or add some tags in between, your code would fail.

Use this...
$(".payment-form-show").on('click', function() {
$('.payment-form-wrapper').slideToggle('slow');
if($('.payment-form-wrapper').is('visible')){
$(this).html("Pre-Pay with Credit Card");
}else{
$(this).html("Don't Pre-Pay with Credit Card");
}
});
An see the DEMO

This code should work even if all the div's have the same class. Check it out:
$(".payment-form-show").on('click', function() {
var slider = $(this).closest("a").next();
slider.slideToggle("slow");
slider.is(":visible") ? $(this).html("Pre-Pay with Credit Card") : $(this).html("Don't Pre-Pay with Credit Card");
});
Fiddle based off of MG_Bautista's fiddle: http://jsfiddle.net/8b5q5/1/

JQuery Dropdown behavior

really new to JQuery.. like 2 hours new. Began to write a drop down menu for a login box like this:
HTML:
<button id="loginButton">Login</button>
When you hover over that, this JQuery runs:
$('#loginButton').live('hover', function() {
login_drop();
});
function login_drop(){
$('#loginBox').fadeIn();
}
$('#loginButton').live('hover', function() {
login_away();
});
function login_away(){
$('#loginBox').fadeOut();
}
And then this HTML DIV appears directly under the button:
<div id="loginBox">
<label for="email_B">Email Address</label>
<input type="text" name="email_B" id="email_B" />
<label for="password">Password</label>
<input type="password_B" name="password_B" id="password_B" />
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<span>Forgot your password?</span>
</div>
and the CSS on that DIV is this:
#loginBox {
position:absolute;
top:70px;
right:100px;
display:none;
z-index:1;
}
This all works, but the behavior of it stinks. How do I make it so you can hover over the button put your mouse in the newly appeared DIV and the div won't fade away until your mouse leaves the div?
Sorry if my coding stinks.
Thanks a bunch guys!
--------------------------------EDITS AKA the ANSWERS--------------------
So for all of you reading this down the line. There are so many ways of making this work depending on how you want the user to interact with it.
Here is way 1...This way the login box fades out when your mouse leaves the login button. This is a quick way fo making it work. This answer is thanks to elclanrs besure to Up 1 his answer below if you like this.
JQuery:
$(function(){
$('#loginButton').mouseenter(function(){ $('#loginBox').fadeIn(); });
$('#login').mouseout(function(){ $('#loginBox').fadeOut(); });
});
HTML:
<div id="loginBox">
<label for="email_B">Email Address</label>
<input type="text" name="email_B" id="email_B" />
<label for="password">Password</label>
<input type="password_B" name="password_B" id="password_B" />
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<span>Forgot your password?</span>
</div>
CSS:
#loginBox {
position:absolute;
top:70px;
right:100px;
width:200px;
height:200px;
display:none;
z-index:99;
background:url(../images/162.png);
}
WAY 2 is adding is a cancel button like Jared Farrish did here:
http://jsfiddle.net/j4Sj5/4/
if you like his answer, be sure to vot him up below!!
and WAY 3 is what I'm attempting now and should be the most user friendly and flashy. I'll post back once I get it to work correctly!

Ah this is a great one to do yourself. Here's how to do it. First off, live might be overkill for what you need to do. In your case you can use a standard hover event handler in jQuery:
$('#loginButton').hover(function() {
$('#loginBox').fadeIn();
}), function(){
$('#loginBox').fadeOut();
});
The real trick here is that you will trigger the mouse out effect as soon as your mouse moves off the button. This will make the menu disappear when the mouse enters the login box!
So what you actually want to do is handle the hover effect on a containing element. Make sure your #loginButton and #loginBox are contained in a parent element like so:
<div id="loginControl">
<button id="loginButton">Login</button>
<div id="loginBox">...</div>
</div>
Then attach the event to the loginButton's parent:
$('#loginButton').parent().hover(function() { ... }), function(){ ... });
Also, if you are using absolute positioning on #loginBox you'll want to also make sure you use position: relative on it's parent (#loginControl in my example):
#loginControl{ position: relative; }
Let me know if you have any trouble.
Getting More Advanced:
If you want to take this a step further you can try out implementing a simple timeout. I learned early on that it's bad for usability to have a dropdown menu that disappears when I accidentally moved my mouse off the dropdown. To fix this I add a simple delay that prevents the dropdown from hiding if the user's mouse returns to the dropdown within a very short period of time (say 250 to 350ms). I have this as a gist on github in case you want to try it out later: https://gist.github.com/71548

EDIT
(Subsequent EDIT: added a timeout to hide after only a mouseover on the show login element, plus some other updates.)
While I still think using mouseenter and mouseout to handle a login form is not the right way to go from a usability perspective, below is code that demonstrates what Jim Jeffers is describing and attempts to handle some of the pitfalls of the approach:
var setuplogindisplay = function(){
var $loginbox = $('#loginBox'),
$loginshow = $('#loginShow'),
$logincontainer = $('#loginContainer'),
$cancellogin = $('#cancelLogin'),
keeptimeout,
closetimeout;
var keepDisplay = function(){
clearAllTimeouts();
keeptimeout = setTimeout(loginHide, 2000);
};
var loginDisplay = function(){
clearAllTimeouts();
if ($loginbox.is(':hidden')) {
$loginbox.fadeIn();
}
};
var loginHide = function(){
clearAllTimeouts();
if ($loginbox.is(':visible')) {
if (!$(this).is('#cancelLogin')) {
closetimeout = setTimeout(function(){
$loginbox.fadeOut();
}, 1500);
} else {
$loginbox.fadeOut();
}
}
};
function clearAllTimeouts() {
if (keeptimeout) {
clearTimeout(keeptimeout);
}
if (closetimeout) {
clearTimeout(closetimeout);
}
}
$loginshow.mouseover(loginDisplay);
$loginshow.mouseout(keepDisplay);
$logincontainer
.mouseout(loginHide)
.children()
.mouseover(loginDisplay)
.mouseout(keepDisplay);
$cancellogin.click(loginHide);
};
$(document).ready(setuplogindisplay);
http://jsfiddle.net/j4Sj5/19/
Note, you have to make concessions to handle the fact mouseouts will fire when you mouse over elements within the #logincontrol element. I handle this by having them loginDisplay() on mouseenter event (it will work on mouseout, but it makes more logical sense on mouseenter).
I would keep in mind usability of the form when trying to access it and try not to get too clever or over-engineer the user experience. Consider:
<input type="button" id="cancelLogin" value="Cancel" />
Use this to close/hide the form, not an action on another element. If you put the close form action on an event like mouseout, you're going to aggravate your users when they move the mouse accidentally or intentionally out of the way, only to find the login form was closed when they did so. The form, IMO, should have the control which fires the event to hide it according to the user's choice.
<span id="loginButton">Show Login</span>
<div id="loginBox">
<label for="email_B">Email Address</label>
<input type="text" name="email_B" id="email_B" />
<label for="password">Password</label>
<input type="password_B" name="password_B" id="password_B" />
<input type="submit" id="login" value="Sign in" />
<input type="button" id="cancelLogin" value="Cancel" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
<span>Forgot your password?</span>
</div>
$(document).ready(function(){
var $loginbox = $('#loginBox'),
$button = $('#loginButton'),
$cancellogin = $('#cancelLogin');
var loginDisplay = function(){
$loginbox.fadeIn();
};
var loginHide = function(){
$loginbox.fadeOut();
};
$button.click(loginDisplay);
$cancellogin.click(loginHide);
});
http://jsfiddle.net/j4Sj5/4/

Instead of reinventing the wheel, I would recommend looking into a jquery plugin like hoverintent. It does most of the work for you.
And, on a related note, .live() is being deprecated in jquery as of v1.8. you should instead use .on().

This should work. Plus you don't need live() which by the way is deprecated in favor on on(). You also don't need those functions for a simple fadeIn()/fadeOut():
$('#loginButton').mouseenter(function(){ $('#loginBox').fadeIn(); });
$('#loginBox').mouseout(function(){ $(this).fadeOut(); });

How to do this box in Javascript?

I'm trying to do the following sort of thing in Javascript, where you click on the down arrow and it expands downward and displays options (I'll have some input fields and checkboxes and text and stuff in there).
Can anyone please help me out or point me in the right direction, I've tried google searching but I have no idea what they're even called in the Javascript world. "Javascript expanding box", "javascript drop down box", "javascript expanding modal dialog", etc. Nothing seems to hit.
Here's the example:
http://imageshack.us/f/810/examplebe.jpg/
There will be a submit button in the top section (not in the expand section), which will submit the options in the drop down menu as well as the options in the section near the submit button.
Thanks!

Set your markup something like this:
<div class="expandingBox" id="expandingBox">
<div id="expandingBoxContent">
//Content here
</div>
</div>
Expand
and in your CSS, the expandingBox class should be set to:
.expandingBox
{
height: <your initial box height here>
overflow: hidden;
// other styling here
}
Then to get it to expand, you can do something like:
$('#expandButton').bind('click', function(){
var contentHeight = $('#expandingBoxContent').height();
$('#expandingBox').animate({ height: contentHeight }, 1000);
}

a little demo. it may help you
HTML:
<input id="login_button" type="button" value="∨" />
<form name-"myForm" id="login_form" style="height:150px">
<div id="toggle" style="width:150px; height:100px;position:absolute;top:30px;left:20px;background:#9BCDFF;display:none;padding:10px">
<label for="name">Name:</label>
<input type="text" name="name" />
<label for="password">Password:</label>
<input type="text" class="password" />
</div>
<input type="submit" id="#submit" value="Submit" style="position:absolute; top:150px"/>
</form>
JQUERY:
$('#login_button').click(function(e) {
$('#toggle').slideToggle(1200,
function() {});
});
$('#submit').click(function() {
$('form[name=myForm]').submit(function() {
alert('form submit');
});
});

$('#toggleBtn').click(function(){ $("#toggleBox").toggle();});

If you're using jQuery, I think you might want to look at the jQuery UI implementation of the collapsible accordion.

THere is an inbuilt jquery effect 'SlideDown'. Check it here: http://api.jquery.com/slideDown

It should not be really difficult. You can use jQuery animation effects for that.
Some code example, just to give you direction:
// html
<div id="some-container">Click me!</div>
<div id="some-container-to-show">Hey, I'm appeared on screen!</div>
// js
$(function () {
$("#some-container-to-show").hide();
$("#some-container").live("click", function () {
$("#some-container-to-show").slideDown();
});
});