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.

Hide/show div with javascript and while loop

I am trying for hours now and for some reason i can't find a solution for my problem.
The thing is, i need something like a div thats showing up when i click on an link.
That's working so far.
But the main problem is, that i need it work within a while loop. So i can get the data dynamically into grid, but all of the php created links have the same id and all of the "to-show-divs" show up at the same time. so my question is how can i create dynamic ids or classes and how do i get them to work within javascript?
echo "<div class='grid grid-pad'>";
$db=mysql_query("SELECT * FROM work") or die (mysql_error());
while($var=mysql_fetch_array($db))
{
echo "<div class='col-1-3'>
<div class='content'>
<div id='thumb' ><img alt='$var[id]' src='$var[thumb]'/></div>
<div class='menu' style='display: none;'>$var[link]</div>
</div>
</div>";
}
echo "</div>";
<script>
$(document).ready(function() {
$('#thumb').click(function() {
$('.menu').slideToggle("fast");
});
});
</script>

You can do what the comment suggests or just make an iterator variable and concat that to the id like so:
$index = 0;
while($var=mysql_fetch_array($db))
{
echo "<div class='col-1-3' id='item_". $index ."'>
<div class='content'>
<div id='thumb_". $index++ ."' >STUFF</div>
<div class='menu' style='display: none;'>$var[link]</div>
</div>
</div>";
}

Change <div id="thumb"> to <div class="thumb"> and then use following jQuery:
$('.thumb').click(function() {
$(this).next('.menu').slideToggle("fast");
});
Otherwise you'll have multiple elements with the ID "thumb", which you shouldn't.

Since the DIV is right after the link, you can use the JQuery function next() to get the next node after the link, which is the DIV:
$(document).ready(function() {
$('#thumb').on('click', function(e) {
// prevent IE from actually executing the href of the link
e.preventDefault();
// get next node, call the toggle.
$(this).next().slideToggle("fast");
// prevent executing of the href of the link
return false;
});
});
If you have more of these "thumb" links, please us a class instead of an ID - an ID has to be unique.
Edit:
Realizing that there actually are no links but DIVs, you can skip the "prevent executing" stuff of course.

Dynamic HTML IDs (PHP, Java, and a bit of SQL)

I'm trying to create a web page which generates a series of unique DIV IDs, each displaying different content based off of the entries in an SQL table.
Each div has a "hide" and "show" button, which work independently when manually giving each div a unique name.
I can get the divs themselves to generate based on class names in PHP, which displays the divs correctly.
The problem lies in the "hide" and "show" buttons since they're controlled by JavaScript. The code is as follows:
for ($j = 0 ; $j < $rows ; ++$j)
{
for($i =0; $i < $rows2; $i++)
{
if (mysql_num_rows($ans) > 0) //check if widget table is empty
{
$widgetusr[$j] = mysql_result($ans,$j,'wname')or die(mysql_error()); //user's widget
$widgetstore[$i] = mysql_result($ans2,$i,'wname'); //store widget
if($widgetusr[$j] == $widgetstore[$i] && $widgetusr[$j] != 'Medieval Calendar') //check if user has already purchased the widget
{
echo "<div class=widget_container".$j%2 .">"; //container divs are named 1 and 0. j mod 2 should return either 1 or 0
?>
<!----Start of weather Widget--->
<!---Script for show/hide buttons weather widget--->
<script>
var widg = "<?php echo $widgetusr[$j]; ?>";
var id = "#" + widg;
$(document).ready(function(){
$("#hide1").click(function(){
$(id).hide();
});
$("#show1").click(function(){
$(id).show();
});
});
</script>
<button id="hide1">Hide</button>
<button id="show1">Show</button>
<!---End Script for show/hide buttons weather widget--->
<?php
echo "<div class = 'widget' id='$widgetusr[$j]'>
</div>
</div>
<!----End of Widget---> ";
}
}
else
{
echo "You have no widgets please visit <a href='store.php'> the store </a> to purchase some. <br/>"; //widget table is empty. Redirect to widget store.
}
}
}
?>
I tried to pass the php varriable (containing an SQL value) to JavaScript (which works successfully, I was able to print out "#financial widget" as an id name.), however neither the show, nor hide button works. The generated divs all have the correct names also.
If additional information is required please ask. I tried to be as general as possible.

You really only need one button. Change your php to render the following html
<div class="widget_container">
<button class="btn ">Hide</button>
<div class="widget">widget1</div>
</div>
<div class="widget_container">
<button class="btn">Hide</button>
<div class="widget">widget2</div>
</div>
<div class="widget_container">
<button class="btn">Hide</button>
<div class="widget">widget3</div>
</div>
and output the following Outside of the loop, ensuring jQuery is loaded:
<script type="text/javascript">
//Standar jquery doc ready event, fires when the dom is loaded
$(document).ready(function(){
//add an event listener elements with a class of "btn"
$('.btn').click(function () {
//"this" is the element click, so we find siblings of this with a class
//of "widget" and toggle its visibility
$(this).siblings('.widget').toggle();
//Change the text of the button the below is short hand for:
//if($(this).text() == "Hide"){
// $(this).text("Show");
//}else{
// $(this).text("Hide");
//}
$(this).text($(this).text() == "Hide" ? "Show" : "Hide");
});
});
</script>
Example
Some useful links:
http://learn.jquery.com/using-jquery-core/document-ready/
http://api.jquery.com/click/
http://api.jquery.com/siblings/
http://api.jquery.com/closest/
http://api.jquery.com/toggle/
http://api.jquery.com/text/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Example with fixed height widgets: http://jsfiddle.net/bdpm4/2/
Update 2
Perhaps a better way to do it: http://jsfiddle.net/bdpm4/3/

you should use class instead of id and dont put your $(document).ready() in the loop.
HTML:
<div class="widget_container">
<button class="btn hideBtn">Hide</button>
<button class="btn showBtn">Show</button>
<div class="widget">widget1</div>
</div>
<div class="widget_container">
<button class="btn hideBtn">Hide</button>
<button class="btn showBtn">Show</button>
<div class="widget">widget2</div>
</div>
JS:
$(document).ready(function(){
$('.btn').on('click', function (evt) {
var btn = $(evt.target);
btn.siblings('.widget').toggle();
btn.parent().find('.btn').toggle();
});
});
CSS:
.showBtn {
display:none;
}
here is an example: http://jsfiddle.net/xdA4r/4/

Javascript "close button" not working

Today I tried to make the simpliest close button in javaScript. It unfortunately does not work. This is how it look like:
<div id="popup_bg">
<div id="popup_window">
<span id="popup_close">
</span>
</div>
</div>
and the js code is:
<script type=”text/javascript”>
$("#popup_close").click(function() {
$("#popup_bg").fadeOut();
event.stopPropagation();
});
</script>
I'd also like to make it apply to any of those "popups", so I'd probably change my it to something like $(this).parent().parent().fadeOut(); - is it possible to do so?
Thanks for help guys! :)
#EDIT
As none of Your solutions work I'll place my code literally :D Maybe You'll find some mistakes that makes it faulty:
<?php if(isset(errors['user'])) : ?>
<script type="text/javascript">
$(function()
{
$("#popup_close").on('click', function() {
$("#popup_background").fadeOut();
//event.stopPropagation();
});
});
</script>
<div id="popup_background" >
<div class="popup_window">
<span class="title">
error
</span>
<span class="message"><?php echo errors['user']; ?>
</span>
<span id="popup_close" class="button">OK</span>
</div>
</div>
<?php endif; ?>
I hope that will help You spot any errors. It displays correctly, I click on my "OK" span, nothing happens :p I hate js :D

I saw your code, the jquery part of the code is working..
Check here: Jsfiddle -> http://jsfiddle.net/Zahinize/7YD4D/13/
You should rewrite your conditional If statement like this,
<? ini_set('error_reporting', E_ALL); ?>
<script type="text/javascript">
$(function()
{
$("#popup_close").on('click', function() {
$("#popup_background").fadeOut();
//event.stopPropagation();
});
});
</script>
<div id="popup_background" >
<div class="popup_window">
<span class="title">
error
</span>
<span class="message">
<?php
if(isset(errors['user'])){
echo errors['user'];
}
?>
</span>
<span id="popup_close" class="button">OK</span>
</div>
</div>
set error_reporting at that the top..
See more here: http://php.net/manual/en/function.error-reporting.php
Maybe this would help, but frankly i haven't seen error handling like this: error['user'] anywhere.. you should see error handling for writing better code ;)

IDs must unique, you should use classes instead:
<div class="popup_bg">
<div class="popup_window">
<span class="popup_close"></span>
</div>
</div>
Then for selecting the target parent of the clicked element you can use closest method:
$(function() {
$(".popup_close").click(function(event) {
$(this).closest(".popup_bg").fadeOut();
// event.stopPropagation();
});
});
Note that in your code event is undefined you should pass the event object to your handler.

Add document.ready and/or use .on function
<script type=”text/javascript”>
$(function(){
$("#popup_close").on('click', function() {
$("#popup_bg").fadeOut();
event.stopPropagation();
});
});
</script>
Also, ID's may not repeat in your document, use other selector like class

If there are more than one popup better to use class instead of id.
Example.
$(function()
{
$(".popup_close").on('click',(function()
{
$(this).parents("div.popup_bg").fadeOut();
});
});
And html
<div class = "popup_bg">
<div class = "popup_window">
<span class = "popup_close"></span>
</div>
</div>

You need some content in your span or set height and with. Then you will be able to click on it and it will work.
Avoid tricks with parent().parent() this may break if you change your div structure.
As others have said use the jquery document ready (read a tutorial) and use classes not ids if you intend to reuse the code (read a CSS tutorial)...

smarty dropdown with javascript

I'm trying to make a friends list where you can click the button at the top for a drop down menu.
<script>
var dropAll = false;
function changeAllFriendsDrop()
{
if (dropAll == false)
{
dropAll = true;
}
else
{
dropAll = false;
}
}
</script>
My function is simple enough but when i try call it onClick it doesn't seem to be working.
<li role="heading" data-role="list-divider" style="color:#F25A97">
<a >
<button onclick="changeAllFriendsDrop()">All Friends </button>
</a>
</li>
{$friend = array("Josh","Phil","Paul","Sean")}
{if !empty($friend)}
{foreach $friend as $person}
<script> if (dropAll == true){ </script>
<li data-theme="a" style="color:#F25A97">
<a href="">
{$person}
</a>
<a align="left" style="size: 10px">
Last Seen: {$lastLocation}
</a>
</li>
<script> } </script>
{/foreach}
{/if}
It doesn't seem to call the function so the if statement cannot be checked, any advice would be greatly appreciated.

Your callback function dropAll isn't actually causing anything to change on the page, it is just setting a variable. The line if (dropAll == true) will only be evaluated once, and even then will not do anything useful - a JavaScript if like that won't tell the browser to hide content, that's just not how it works. (In fact, since each <script> tag is evaluated separately, you are probably getting a JavaScript error because there's no } in the first <script> tag.)
What you need to do is write a JavaScript function which actually toggles the visibility of those parts of the page. I would strongly recommend using a JavaScript library such as jQuery rather than doing this in "plain" JavaScript.
For instance, if you gave each of the elements you want to toggle class="togglableFriendItem", you could use the jQuery .toggle() function like this:
function toggleAllFriendsDrop()
{
$('.togglableFriendItem').toggle();
}