We Keep Coding

show/hide div using toggle function onclick?

I am trying to show a div using javascript when a user clicks on another div.
Here is my code, its working fine, except, I need it to work the other way around. The div is visible on load and hidden once the user clicks the other div.
<div id="content_nav">
<div class="login_heading">Logged in as, <strong><?php echo $_SESSION['user'];?>>/strong>, Logout</div>
<div class="control_panel">
<div id="ctrl1" onclick="toggle();"></div>
<p class="control">(0) Messages</p>
<div id="msg_menu"></div>
<script>
var toggle = function() {
var mydiv = document.getElementById('msg_menu');
if (mydiv.style.display === 'none' || mydiv.style.display === '')
mydiv.style.display = 'block';
else
mydiv.style.display = 'none'
}
</script>
css:
#msg_menu{
margin:auto;
width:990px;
height:200px;
background:#000;
}

Modify your css such, that the element is hidden by default. It can then be toggled on/off by the user as required.
#msg_menu{
margin:auto;
width:990px;
height:200px;
background:#000;
display:none;
}
Alternatively, if you prefer a javascript solution, then you can hide the element when it's loaded.

How to prevent jQuery flash from shifting text?

After performing a process, a flash appears at the top of the screen with some basic information (ex. "Table Added"). When this happens, all the elements in the page get shifted down as the flash drops down from the top. The flash stays for a little bit, then disappears. The text, after the flash is gone, then shifts up to its original position.
How would I get the flash to not shift the elements on the page?
The code for the flash is in jQuery, which I am unfamiliar with. Here's the code:
function controller_jsSetError(type, msg) {
$('#errorMessage').html(msg);
if(type == 'NONE') {
$('#errorMessage').hide();
}
else {
$('#errorMessage').attr('class','ui-state-error ui-corner-all');
$('#errorMessage').show();
}
if(type == 'STATUS') {
$('#errorMessage').attr('class','ui-state-highlight ui-corner-all');
$('#errorMessage').delay(3000).fadeOut('slow');
}
}
Thanks you for your time!

This is more question of the CSS. Your code just shows and hides the flash message. What you need is to position these message boxes absolute.
See this DEMO!
<div class="outerBox">
<span id="errorMessage">ERROR!</span>
<p>Some text</p>
</div>
<button onclick="$('#errorMessage').toggle();">show/hide error message</button>
CSS:
.outerBox {
background:#eee;
padding:20px;
position:relative;
width:100%;
}
#errorMessage {
display:none;
background:red;
padding:30px;
position:absolute;
top:0;
left:0;
width:100%;
}

Try adding a preventDefault() at the beginning of your code- see below.
function controller_jsSetError(type, msg) {
event.preventDefault();
$('#errorMessage').html(msg);
if(type == 'NONE') {
$('#errorMessage').hide();
}
else {
$('#errorMessage').attr('class','ui-state-error ui-corner-all');
$('#errorMessage').show();
}
if(type == 'STATUS') {
$('#errorMessage').attr('class','ui-state-highlight ui-corner-all');
$('#errorMessage').delay(3000).fadeOut('slow');
}
}

HTML5 "Lower Lights" dynamic text and incorrect mouse pointer

I'm working on a webpage that has a "Lower Lights" function but the code I have now has a few problems.
The first problem is that for some reason instead of the normal mouse pointer "arrow" it changes to the text select "I" when over the element and its confusing because the user doesn't know its clickable. I've tried changing the tags around it but nothing seems to help.
My second problem is I can't get the text to Dynamically change AND still function. I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but with the script I'm using now that seems impossible.
Here is the code that I'm using. Hopefully someone can point out what I'm doing wrong or point me in the right direction.
Notes: The goal of this was to be as simple and light weight HTML5 as possible. If there is an easier, less code, more light weight, option please let me know. Also I'm not opposed to using jQuery if it makes things more simple but I'm completely lost on that front.
If anymore information is needed please let me know.
<html>
<!-- This script handles the "Lower Lights-->
<script>
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$("#turnoff").click(function () {
$("#the_lights").css({'display' : 'block'});
$("#the_lights").fadeTo("slow",1);
});
$("#soft").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0.8);
});
$("#turnon").click(function () {
document.getElementById("the_lights").style.display="block";
$("#the_lights").fadeTo("slow",0);
});
});
</script>
<style>
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
display:none;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
</style>
<div id ="standout">
<font color="white">
<div id = "turnoff">Lights: Low</div>
<div id = "soft">Lights: Medium</div>
<div id = "turnon">Lights: High</div>
</font>
</div>
<div id="the_lights"></div>
</html>

Is this what you want? Your divs are not links so you need to use the CSS cursor property. cursor:pointer so that it appears clickable. Start out with the first div visible and the other 2 hidden with the hidden CSS class created. I assigned the div id's as numbers. If you actually want divs to use to cycle with, then the code below should work.
example here JSFIDDLE
The jQuery
$(document).ready(function(){
$("#the_lights").fadeTo(1,0);
$(document).on("click","div.lights",function () {
var divId = $(this).attr("id");
$(this).hide();
$("#" + divId).show();
$("#the_lights").css({'display' : 'block'});
if(divId == 1){
$("#2").show();
$("#1").hide();
$("#the_lights").fadeTo("slow",0.8);
}else if(divId == 2){
$("#2").hide();
$("#3").show();
$("#the_lights").fadeTo("slow",1);
}else if(divId == 3){
$("#3").hide();
$("#1").show();
$("#the_lights").fadeTo("slow",0);
}
});
});
The CSS
#the_lights{
background-color:#000;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
#standout{
padding:5px;
background-color:black;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:1000;
}
.lights{
cursor:pointer;
}
.hidden{
display:none;
}
The HTML
<div id ="standout">
<font color="white">
<div class='lights' id = "1">Lights: High</div>
<div class='lights hidden' id = "2">Lights: Medium</div>
<div class='lights hidden' id = "3">Lights: Low</div>
</font>
</div>
<div id="the_lights"></div>
The fiddle
http://jsfiddle.net/gE8VZ/

First for the UI you can change the mouse pointer using CSS cursor property: cursor:pointer; to let the user know it's clickable. Then you can also set an indicator to the current active lights by adding a class to change the styling.
You also don't need to set the display property everytime, "#the_lights" is a <div> element so it has a default block display. And trim down your code to something like this:
$(document).ready(function () {
var lights = $("#the_lights");
lights.fadeTo(1, 0);
$('#standout div').click(function(){
$(this).addClass('active').siblings().removeClass('active');
if($(this).is('#turnoff')){
lights.fadeTo("slow", 1);
}else if($(this).is('#soft')){
lights.fadeTo("slow", 0.8);
}else if($(this).is('#turnon')){
lights.fadeTo("slow", 0);
}
});
});
See this jsfiddle.
I'm not quite sure what you mean by: I need it to cycle through "Light: High" > "Light: Medium" > "Light: Low" but I think a <select> element is a good way to do this. See this jsfiddle.

Is there a javascript to check if another script has been activated?

I have been building a pop out menu for a website with HTML and Javascript, and I've managed to get a button to create a pop out div container with a button inside that closes it. Eventually there will be more buttons and all kinds of things, but I'm keeping it simple for now. Let me say that Javascript is not my strong suit. The problem I am having now that I've got all the buttons working properly and hiding the div, is that while the div disapears when I push the "close" button, the elements within it do not. I'm hoping I can make an if else script that will either hide or remove the elements within the pop out div when the "menu" button (which causes the pop out div to appear) is activated. To even start figuring out that, I'll need a script that can detect if the script that runs when the menu button is pushed is active. My apologies if I'm explaining this poorly, but the relevant code is pasted in below, hopefully that will help. Is there a script that can detect if another script is running that can then activate an if else script? As a bonus, does anyone have any ideas about a script that can hide (or remove) elements conditionally? Both together would be lovely :)
Here is the code:
HTML and Javascript-
<div>
<script>
function sidebar() {
x = document.getElementById("sbb")
x.style.width = "0";
x.style.position = "relative";
x = document.getElementById("sba")
x.style.width = "200px";
x.style.top = "0px";
x.style.bottom = "0px";
x.style.position = "absolute";
}
</script>
<script>
function closesb() {
x = document.getElementById("sba")
x.style.width = "0";
x.style.position = "relative";
}
</script>
<div style="width:100%; height:100; z-index:3">
<button type="button" onclick="sidebar()">MENU</button>
</div>
<div class="sidebar">
<div class="sba" id="sba">
<button type="button" onclick="closesb()">CLOSE</button>yellow</div>
<div class="sbb" id="sbb">yellow</div>
</div>
</div>
CSS-
.sidebar{
position: absolute;
z-index: 2;
margin: 0;
padding: 0;
border: 0;
}
.sba{
width:200px;
top:0px;
bottom:0px;
background-color:#787878;
opacity:.75;
position:absolute;
height:10em;
}
.sbb{
top:0px;
bottom:0px;
right:0px;
width:100%;
margin-left:200px;
height:100%;
position:absolute;
}
NOTE:
1- the word "yellow" in divs "sba" and "sbb" is just to determine the location of the divs on the page, as the pop out menu is done in layers.
2- the button scripts are the only scripts running on the page, and the whole website.
3- I am only interested in answers in Javascript and HTML, and that work on all browsers, or nearly all, right now, please.

http://jsfiddle.net/jpEqt/1/
function sidebar() {
x = document.getElementById("sba")
x.style.display = "block";
}
function closesb() {
x = document.getElementById("sba");
x.style.display = "none";
}
<div class="sba" id="sba" style="display:none">

Using javascript to display text on top of an image on mouse over

I am new to javascript and would like to have an image that is fully displayed but when you mouse over the image text appears over the top in a div tag and fades the image in the background.
This is my attempt however poor and it is not working.
<style>
/*CSS Style sheet*/
div.image_box_text {
opacity:0;
margin-top:-25px;
background-color:#FFF;
}
</style>
<script>
function fadeImg(obj) {
obj.style.opacity=0.5;
obj.filters.alpha.opacity=50;
}
function viewObj(obj1, obj2) {
fadeImg(obj1);
obj2.style.opacity=1;
bj2.filters.alpha.opacity=100;
}
</script>
<div>
<img id='img1' src="../images/index/square/posingS.jpg" onmouseover='viewImg(this, txt1)'/>
<div id='txt1' class='image_box_text' >This is image box one</div>
</div>
Thanks in advance.

This should get you started.
<style>
/*CSS Style sheet*/
div.image_box_text {
opacity:0;
margin-top:-25px;
background-color:#FFF;
}
</style>
<script>
function fadeImg(obj) {
obj.style.opacity=0.5;
}
function viewObj(obj1, obj2_name) {
var obj2 = document.getElementById(obj2_name);
fadeImg(obj1);
obj2.style.opacity=1;
}
</script>
First, you cannot simply call an object by an id as you did in viewObj. You must do a document.getElementById on its id. Next you will have to check if filters exists (it only does in IE). A better way to do this is to make .faded and .hidden classes in your stylesheet and have the hover event trigger the adding and removal of them.
Here's this code in action: http://jsfiddle.net/WpMGd/