show/hide div using toggle function onclick? - javascript

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.

Related

How to get displayed text of div using jquery

I have a div just like this:
<div id="content" style="width:300px; height:500px; overflow:hidden">
...large text...
</div>
I get the text in this div via the following code:
var text = $(content).html()
There is a lot of text in the div, and part of the text is hidden through overflow:hidden. I don't want to get all the text, but only the text that is currently visible in the div. How do I do that?
$("#content").text()
should give you the inner text of the div having the id of content.
Hide the div with js, removed the overflow:hidden part for the clickable link and nest the content div within it:
Show/hide
<div class="content">
...large text...
hide
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".content").hide(); //hide content on page load
$(".show_hide").show(); //show the clickable link
$('.show_hide').click(function(){
$(".content").slideToggle(); // slideToggle() shows and hides
});
});
</script>
.content {
Width: 300px;
height:500px;
background-color: #fff;
Color: #000;
margin-top:10px;
border-bottom:5px solid #3399FF;
}
.show_hide {
display:none;
}
edit
Here let's say you have an and a inside the div
<script language="javascript">
function toggle() {
var text = document.getElementById("#content p");
if(text.style.display == "none") {
text.style.display = "block";
text.innerHTML = "show";
}
else {
text.innerHTML = "hide";
}
}
</script>
Then just call the toggle function from within

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">

Div Visibility not working in Firefox, inner image not displaying

[edit]Problem now solved
I have an edit(div with an image) button within another div that contains editable content, my plan is to have the button hidden until the cursor hovers over the content div.
My problem is that if I use display:none; in the CSS and then use a javascript function to show and hide the divButton again then the image does not display in FireFox.
If I use element.style.visibility = "visible"; then FireFox doesn't show the div at all.
Any input would be really appreciated thanks :)
Relevant code:
HTML
<div id="c1ContentSrc" class="widgetContent editable">
#Html.Raw(HttpUtility.HtmlDecode(row.column1Content))
<div id="c1ContentEdit" class="cmsEditButton"><img src="../../Content/images/cmsEdit.png" alt="edit" /></div>
</div>
CSS
.cmsEditButton{
display:none;
position:absolute;
top:37px;
right:8px;
width:16px;
height:16px;
}
Alternate CSS
.cmsEditButton{
visibility:hidden;
position:absolute;
top:37px;
right:8px;
width:16px;
height:16px;
}
javascript function
function showEditButton(id, editId) {
if(editId.style.display == "none"){
if (!id.isContentEditable) {
editId.style.display = "block";
}
}else{
editId.style.display = "none";
}
}
Alternate javascript code
function showEditButton(id, editId) {
if (editId.style.visibility == "hidden" || editId.style.visibility == "") {
if (!id.isContentEditable) {
editId.style.visibility = "visible";
}
}else{
editId.style.visibility = "hidden";
}
}
Function calls
document.getElementById("c1ContentSrc").addEventListener("mouseover", function () {
showEditButton(document.getElementById("c1ContentSrc"), document.getElementById("c1ContentEdit"))
}, false);
document.getElementById("c1ContentSrc").addEventListener("mouseout", function () {
showEditButton(document.getElementById("c1ContentSrc"), document.getElementById("c1ContentEdit"))
}, false);
Problem has been solved now with the following change, moved the image above the razor output, it seemed to be interfering, also removed the unnecessary div
<div id="c1ContentSrc" class="widgetContent editable">
<img id="c1ContentEdit" class="cmsEditButton" title="edit" src="../../Content/images/cmsEdit.png" alt="edit" />
#Html.Raw(HttpUtility.HtmlDecode(row.column1Content))
</div>
Instead of using visibility; you can use
display:none;
display:block;
display:none !important;
style="display:none;" //inline css
Avoid using visibility if you are using display, You can simultaneously play with them and implement the right code...

mouseover show div

I haven't been able to find the answer to this anywhere.
How do you make a hidden div appear when mousing over where it would have been?
Please do not tell me how to make a link, I know how to make a link ;)
I have tried:
a.) onmouseover set visibility to visible and onmouseout set visibility to hidden
this works in 0 browsers
b.) setting borders to 0px and background transparent and innerhtml to "" onmouseout and reverting onmouseover
this works in chrome
c.) This was the most popular answer on the internet, which i knew wouldn't work, but I tried anyway: make a container div set to visible and then do visibility visible and visibility hidden for the inner div
d.) Setting opacity to 1/100 and 0
works in chrome
e.) last resort: i tried making a transparent gif and having it display onmouseout
this also failed
I haven't tried jquery's .hover but I have read that it may not work correctly.
I have no other ideas. Will somebody help, please?
If I get it right you want div element to show if you are over it and hide when the mouse is not over. If that's it you can do it only with html and css:
<head>
<style>
#outerDiv{width:100px;height:100px;background-color:blue;}
#innerDiv{width:100px;height:100px;background-color:red;display:none;}
#outerDiv:hover #innerDiv {display:block;}
</style>
</head>
<html>
<div id="outerDiv">
<div id="innerDiv">some text</div>
</div>
</html>
The outer div is always visible and when it's hovered the inner one is shown.
I think that this is going to help you: http://jsfiddle.net/eb4x9/
The mouseover event won't trigger when the div is hidden so you can detect it's position and size.
Here is the source:
HTML
<div id="foo"></div>
CSS
#foo {
width: 300px;
height: 300px;
background-color: red;
visibility: hidden;
}
JS
$(document).mousemove(function (event) {
var div = $('#foo'),
divLeft = div.offset().left,
divTop = div.offset().top,
divWidth = div.width(),
divHeight = div.height();
if ((event.pageX >= divLeft && event.pageX <= divLeft + divWidth) &&
(event.pageY >= divTop && event.pageY <= divTop + divHeight)) {
div.css('visibility', 'visible');
} else {
div.css('visibility', 'hidden');
}
});
$(document).mouseleave(function (event) {
var div = $('#foo');
div.css('visibility', 'hidden');
});
Best regards!
Try setting the display attribute of the div to 'block' along with the visibility attribute to 'visible' in your onmouseover event.
Set the display to 'none' and visibility to 'hidden' to hide.
Of course the trouble will be firing the mouse over on a hidden div.
This works in every browser I have ever used it in.
Try this, having two divs one empty and other with your content and toggling between them on mouseover
<html>
<head>
<script>
function toggle() {
var your_div = document.getElementById("your_div");
var empty_div = document.getElementById("empty_div");
if(your_div.style.display == "block") {
your_div.style.display = "none";
empty_div.style.display = "block";
}
else {
your_div.style.display = "block";
empty_div.style.display = "none";
}
}
</script>
<style>
#empty_div{width:100px; height:100px;}
#your_div{width:100px; height:100px; border: 1px solid #000fff;}
</style>
</head>
<body>
<div id="your_div" onmouseover="toggle()">xyz</div>
<div id="empty_div" onmouseover="toggle()"></div>
</body>
</html>

Categories