We Keep Coding

Various divs with same classname and onclick function to call to open corresponding message div

I have a problem with my javascript function that is working for now. I want to change it to a Jquery function but I don't know how.
I have a page with a lot of div's with the same class ("message"). These message windows opens when clicked on "delete" with a onclick function delete_on('. $id .') Inside the message window is a onclick function to close the window.
Message window that opens and closes:
<div class="message">
Sure you want to delete?
YES <a onclick="delete_off('. $id .')">NO</a>
</div>
Link that opens the message window:
<a onclick="delete_on('. $id .')">delete</a>
Javscript functions:
function delete_on($id) {
document.getElementsByClassName("message")[$id].style.display = "block";
document.body.style.overflowY = "hidden";
}
function delete_off($id) {
document.getElementsByClassName("message")[$id].style.display = "none";
document.body.style.overflowY = "auto";
}
I give every onclick function an $id that is counting up for every div and "delete" link. The javascript function knows which div it has to open caused by the $id.
The [$id] part in the function is the problem. I can't make it work in Jquery?!
Can someone help me? Is there another way to combine the javascript function to the right div?

Try setting event listeners using $.on like so:
$('.message').on('click', function () {
// $(this) is the thing clicked...
});
Once you get the $(this) you can navigate around that element relatively. To get its parent, for example:
$('.message').on('click', function () {
var parent = $(this).parent();
});
And manipulate it however you wish.
https://jsfiddle.net/ozdzug33/1/
Good luck!

Problems creating close me link in javascript bookmarklet

I am trying to add a close me link to this function. The way this works, is you paste all of this code without newline characters into a bookmark and the bookmark brings up a blue box on the screen.
Here is what I have so far, the close me link I have created is the "eleCloseLink" node I created:
javascript:(
function(){
var pagebody = document.evaluate( '/html/body' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue;
if (pagebody != null) {
var node = document.createElement("DIV");
node.style.position="fixed";
node.style.color="white";
node.style.background="blue";
node.style.width="350px";
node.style.top="50px";
node.innerHTML = "<br>BLUE BOX<br>2<br>";
var box = pagebody.appendChild(node);
/* Creating close link here */
var eleCloseLink = document.createElement("a");
eleCloseLink.setAttribute('href', 'javascript:( function(){ node.parentNode.removeChild(node); })();');
eleCloseLink.innerHTML = 'close me';
box.appendChild(eleCloseLink);
}
})();
So far I have tried doing this about 10 differen't ways and none have succeeded. The most recent way is putting javascript:( function(){ node.parentNode.removeChild(node); })(); inside of a and that is not working either. I feel like this should be one of the most common things to code as I see them on websites often and therefore there should be a lot of information on it. My scenario may be a little more specific than most b/c the box I am creating is just a DIV element and I am essentially trying to delete the DIV element (i have tried using this as well) with my close me link. Please let me know if anyone has any suggestions on how to create this close me link.

To resolve this, I created a click event listener which called a function that removes the object. To accompany this, I added a id attribute to the DIV object I was trying to remove. When the click event is triggered, the close function then evaluates the div object with XPATH referencing by id attribute. I was then able to run a remove() method on that object.
End Snippet:
/*Create Link in box to close box*/
var eleCloseLink = document.createElement("a");
eleCloseLink.innerHTML = '|CLOSE|';
eleCloseLink.addEventListener("click", CloseBox, false);
eleCloseLink.background = 'red';
box.appendChild(eleCloseLink);
}
/*Function to close the box */
function CloseBox() {
document.evaluate( "//*[#id='thebox']" ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue.remove(this);
}
Still not completely sure if I had to use "this" or not in the remove() method as I was calling the remove() method on the object itself. However this is now working.

Creating a new window that has a button in JavaScript

Hey Im trying to to learn JavaScript at the moment, and I want to be able to create a button on a page that I created in JavaScript, but it always adds the button to index.html instead. Please note I am running this off of WebStorm IDE and don't have a URL/ dont know what to put for window.open(____) because of that.
It successfully creates a new window saying "Hello", but there is no button.
var myWindow=window.open('');
myWindow.document.write('Hello');
var button=myWindow.document.createElement("newbutton");
button.onclick= function(){
alert("blabla");
};
var buttonParent= myWindow.document.getElementById("buttonParent");
buttonParent.appendChild(button)

It looks as though you're creating a new window called myWindow, and writing the text hello to it. However, the container with the id "buttonParent" does not reside within the new window, but rather the document that index.html is in.
Try this out:
var newDiv = document.createElement("div");
newDiv.id = "newButtonParent" //make sure you pick a unique id
myWindow.document.appendChild(newDiv);
var buttonParent= myWindow.document.getElementById("newButtonParent");
buttonParent.appendChild(button);
Edit: Fixed a typo. From:
var buttonParent= myWindow.document.getElementById("buttonParent");
to
var buttonParent= myWindow.document.getElementById("newButtonParent");

When was the element with the ID buttonParent created? If this is your entire snippet, you'd first need to create that element as well, otherwise .getElementById isn't going to find anything in the new window, meaning .appendChild won't work properly.
The other thing to note is that alert is a property of the window object, so just calling alert('!') will attach the alert the the main window. You need to call it as myWindow.alert('!') to have it fire on the new window.
Also, document.createElement takes a tag name, so if you want default button behaviour it should be
myWindow.document.createElement('button');
Here's a working example. I've set the background of the container element to red so you can see it is there.
DEMO - (Click the run button.)
var w = window.open(''),
button = w.document.createElement('button');
button.innerHTML = 'My Button';
button.addEventListener('click', function () {
w.alert('!');
});
var container = w.document.createElement('div');
container.id = 'buttonParent';
container.style.background = 'red';
w.document.body.appendChild(container);
container.appendChild(button);

JavaScript, create div with link and then remove by clicking said div

I'm trying to create a vanilla javascript that creates one div or more when clicking on a specific link. When said div has appeared I want to be able to remove it by clicking on that div.
So far I've successfully made it so that a div is created when clicking a link.
The HTML:
<div class="content">
Click me!
<div id="target"></div>
</div>
And the JavaScript:
(function() {
'use strict';
var createTarget = document.getElementById('target');
var link = document.getElementById('create-div');
function createDiv() {
var content = '<div id="clickme"><div class="main"><div class="secondary"></div></div></div>';
createTarget.innerHTML = content;
}
link.addEventListener("click", function() {
createDiv();
});
})();
What I can't figure out is how to remove the div by clicking on it after it has been created? Bear in mind that I am new and trying to learn vanilla JavaScript for now. I know about jQuery and all the other libraries, but I'd rather just learn the basic JavaScript to begin with.
Through the power of Google I've found out about "removeChild" but I am yet to find out how to get it to work on a div by clicking it.
All help is appreciated!

Try this out :
createTarget.addEventListener("click", function() {
var elem = document.getElementById('clickme'); // to get the id of the div that dynamically created
elem.parentElement.removeChild(elem); // function removes specified child node of your specified element.
});
see this working FIDDLE

style a JavaScript onmouseover alert

This is my code to make the alert appear when i hover over the image;
var special_offers = document.getElementsByClassName("special_offer");
//for each special offer
for(i=0;i<special_offers.length;i++){
var special_offer = special_offers[i];
special_offer.setAttribute("offer_shown", "0");
special_offer.onmouseover = function(){
if( this.getAttribute("offer_shown") == "0" ){
this.setAttribute("offer_shown", "1");
alert('This room has the special offer attached to it, please book soon before you miss out!');
}
}
I wanted to find out how i change this from the bog standard JS alert to a box that i can style, i imagine i'd use some sort of a div.
Any help is much appreciated.

http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
This is a good resource for creating your own modal window. You can use your function to fire the modal window you created instead of just using alert() to fire up the standard alert.

Do you want to direct your message to a div?
Create the div
<div id="mySpecialOffer">
Some Text gets updated
</div>
In your js you could then target this id and update with what ever message you would like.
document.getElementById("mySpecialOffer").innerHTML = 'some Text';
You could even hide the div in css and then unhide with the JS.
Or you can create the HTML...
document.getElementById("mySpecialOffer").innerHTML = '<div> Special Offer Div Inserted </div>';
This is even easier with jQuery.
Is this what you had in mind?

What you should do is open a whole new window, like a small webpage with that message. That would be the easiest way to go!Here is a link: http://www.w3schools.com/jsref/met_win_open.asp
You will want to have the window.open() activated when people mouseover an image.you can specify the size and positioning of the window, in this case the center of the screen, and a small window.
Hope that helps!