We Keep Coding

How to create a element in another html page with a button click

HTML:
<button id="sendDiv">send</button>
Javascript:
$('#sendDiv').click(function() {
var x = true;
if (x === true) {
var div = document.createElement('div');
div.className = 'store';
document.getElementsByTagName('body')[0].appendChild(div);
}
});
CSS:
.store {
background: lightgrey;
width: 60%;
height: 200px; }
So if I click on the button i will create a div with a color but how do I create it in a another html page ? .. lets say when i click on the button, a div should be created in a another page

you can't if the page is not loaded..
unless you mean writing to the other page's source code?

Gallery. Display divs corresponding to clicked <li> item. Javascript

I'm trying to build a basic gallery which displays a large image [div] depending on which image is clicked. The thumbnail images are stored in a basic unordered list.
I'm a javascript noob, I could use getElementById to change display class etc but I'd prefer not to have a separate function for each image, of which they're may be 100 or so.
Is there a way to call the same function to display a different div depending on which image is clicked [a larger version of that image]?
So:
If img1 is clicked display divA,
If img2 is clicked display divB,
If img3 is clicked display divC...
Many thanks.

The event passed to the onclick method has a target parameter, which refers to the element that was clicked.
Please post your code, preferably in a working JsFiddle, to get a more targeted answer.
Here is a general example of what you want to achieve:
document.onclick = function(e) {
// e.target is the img that was clicked, display the corresponding div
// Get the image number from the id
var number = e.target.id.substr(3)
// Display the corresponding div
document.getElementById('div' + number).style.visibility = 'visible';
}
Please note that the last line will most likely be different in your implementation - I don't know how you are displaying these divs.

You could try as follows
Assign id to all images in such a manner when they will be clicked we
could generate the corresponding div's id with some logical
manipulation.
Such as
images would have id like img_divA,img_divB and when they will be clicked , get there id and do some stuff like substring and you will get divA , divB and so on .. Finally show that by javascript ..

You could do something like this. Here actually a function is created per clickable dom element, but they are programmatically created. I use the num attribute to make the correspondence between the images to show and the images to click but there is many other (good) ways to do it.
// retrieve the divs to be clicked
var toClicks = document.querySelectorAll(".img-to-click");
[].forEach.call(toClicks, function(node){
// retrieve the target image
var num = node.getAttribute("num");
var target = document.querySelector(".img-to-show[num=\"" + num + "\"]");
// create the click listener on this particular dom element
// (one of the image to click)
node.addEventListener('click', function(){
// hide any currently displayed image
var current = document.querySelector(".img-to-show.shown");
if(current) current.classList.remove("shown");
// set the new current
target.classList.add("shown");
});
});
#to-display {
position: relative;
width: 100%;
height: 50px;
}
#to-click {
position: relative;
margin-top: 20px;
}
.img-to-show {
position: absolute;
width: 100%;
height: 100%;
display: none;
}
.img-to-show.shown {
display: block;
}
.img-to-click{
display: inline-block;
background-color: gray;
width: 50px;
color:white;
text-align: center;
line-height: 50px;
vertical-align: middle;
height: 50px;
cursor:pointer;
}
<div id="to-display">
<div class="img-to-show" num="1" style="background-color:blue;"></div>
<div class="img-to-show" num="2" style="background-color:red;"></div>
</div>
<div id="to-click">
<div class="img-to-click" num="1">1</div>
<div class="img-to-click" num="2">2</div>
</div>

Pop up box on page reload

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/

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

Javascript IE vs. Firefox style.visibility implementations

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.