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">
Related
I have a Web Page that contains a button which toggles the function toggleOverlay which displays an overlay, as well as can close the overlay. The overlay is a div. Inside the div, I have nested an iFrame which references another local html file I have and displays it. However, the only way I could make it so that the iFrame would display the local html file was if in the CSS I took out the attribute display:none. But the function depends on that attribute to determine wether the overlay is displayed or not. How can I get around this, because as of currently the overlay div is displayed when the page is first loaded.
Currently
The Overlay is Displayed when the page first loads
display:none has been taken out of the css to allow the iFrame to actually display the local html file
Goals
Make it so that the iframe continues to be able to display the local html file
modify the function so that the overlay does not show up when the page is first loaded but rather when the button is pressed.
HTML
<div id="specialBox">
<iframe src="SlideOne.html" width="100%" height="100%"></iframe>
<button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
CSS
div#specialBox {
position: relative;
z-index: 3;
margin: 150px auto 0px auto;
width: 500px;
height: 300px;
background: #FFF;
color: #000;
}
Javascript
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
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.
hi i just find the code on google and i dont know how to trigger popping a box on load or webpage refresh
HTML
<button id="LearnMoreBtn">Learn More</a>
<div id="overlay"></div>
<div id="popup">
Popup contents here
</div>
CSS
#overlay {
display:none; //This make it initially hidden
position:fixed; //This makes it so it says in a fixed position even if they scroll around
left:0px; //This positions the element to the left most position
top:0px; //This positions the elment to the top most position
width:100%; //This makes the element take up 100% of the parents width
height:100%; //This makes the element take up 100% of the parents height
background:#000; //Give it a black background
opacity:0.5; //Change the opacity to 50% so that is see through.
z-index:99999; //Change the z-index so it will be above everything else
}
#popup {
display:none;
position:fixed;
left:50%; //left and top here position top left page
top:50%; //of the element to the center of the
width:300px; //Set the popup to have a specific width/height
height:150px;
margin-top:-75px; //To get the popup to center correctly we need
margin-left:-150px; //To displace the the top/left margins by half of the width/height
background:#FFFFFF; //Background of white
border:2px solid #000; //And give it a border
z-index:100000; is over the overlay
}
JAVASCRIPT
window.onload = function() {
**document.getElementById("LearnMoreBtn").onclick = function(){**
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
};
thanks in advance =)
heres the demo:
http://jsfiddle.net/j4c7U/
Why not just remove display:none; from #overlay and #popup, this would show your popup as default when the page is loaded or refreshed.
Updated JSfiddle.
Check this -
window.onload = function() {
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
document.getElementById("CloseBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";
}
};
You just had to put the pop code in the window load function rather than calling it from onclick function.
http://jsfiddle.net/j4c7U/82/
If you want to open your popup when their is a refresh / page load, just simulate a click like that:
document.getElementById("LearnMoreBtn").click();
fiddle: http://jsfiddle.net/j4c7U/
[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...
I'm sure this is a poor oversight on my part but I'm hoping someone can explain the correct way to use .style.visibility/.style.display in a way that works in both IE and Firefox.
Basically, I have a custom tab control. The first tab has a custom MP3 player control in it. When the user clicks on a different tab the music needs to continue to play, even though it is no longer visible.
In IE, this works as advertised but in Firefox when the user clicks on another tab the music stops and the control resets to its initialized state.
//<summary>
// Display or hide relevent div areas.
//</summary>
//<param name="divId">The id of the viewable div</param>
function toggleDiv(divId) {
var elems = new Array("0", "1", "2", "3");
var hdnView = document.getElementById('<%=hdnCurrentDiv.ClientID %>');
for (div in elems) {
var elem = document.getElementById(div);
if (div == divId) {
elem.style.display = 'block';
elem.style.visibility = 'visible';
hdnView.value = divId;
//highlightSelection(elem);
}
else {
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}
How do I get Firefox to behave like IE in that when the user clicks on a tab, the player on the previously selected tab continues to play and just makes that div invisible?
Instead of showing/hiding you can set background of each tab to non-transparent color, position them absolutly on top of each other and change their z-index to bring clicked tab to the top of the stack.
This way you don't have a problem with elements beeing destroyed/reset. And you don't have to change the positioning every time a different tab is beeing clicked. All you do is change z-index...
quick example:
<html>
<head>
<style>
ul
{
list-style: none;
}
li
{
display: inline;
}
#Tab1, #Tab2
{
background-color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
</style>
<script>
function toggleTab( tabID )
{
for( var i = 1; i<= 2; i++ )
{
var id = "Tab" + i;
if( id != tabID )
{
document.getElementById(id).style.zIndex = "1";
}
}
document.getElementById(tabID).style.zIndex = "2";
}
</script>
</head>
<body>
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
</ul>
<div style="position: relative;" id="allTabs">
<div id="Tab1">
Tab 1...
</div>
<div id="Tab2">
Tab 2...
</div>
</div>
</body>
</html>
If you set display = 'none', firefox destroys the music player. Your alternative options are:
Just set visibility = 'hidden';
Position the elements absolute and move it to a place far away instead of hiding (-10000, -10000 is a good place to start)
Yes,
display=none will remove the element and all child elements from the document
visibility=hidden the element and children are invisible, but the element exists on the page and takes up space
you could set visibility to hidden and the width and height to 1px or position off the page somewhere, as a semi display none.