Develop Reference

Clicking Add-to-Cart to trigger popup

I am trying to have a popup only display when I click the .add-to-cart button using jQuery/javascript.
Let's say my popup is "#popup", and the button which will trigger the popup is ".add-to-cart", how do I go about this? I am fairly new to javascript, but I've managed to change a div's color and background the moment a user scrolls 200px, I tried using the same method to make it change properties by clicking without any luck.
The idea here was to change the property of the popup from "display:none" to "display:block" to use that in my problem here.
Also, inside the popup there is a button which when clicked, closes that popup again, we'll call it ".continue"
Is this the right way to do it, or is there other ways to display/close this popup?
I would post my code but it's not gonna help much in solving this as I believe this is simple for the experts on here. But here is the javascript i used for my other function that I mentioned which changes properties based on scroll. I suspect I can modify this to be used in this instance as well?
var mybutton = document.getElementById("backBtn");
var mytext = document.getElementById("tilbakeP");
var myarrow = document.getElementById("arrow");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
mybutton.style.position = "fixed";
mybutton.style.top = "20px";
mybutton.style.backgroundColor = "rgba(0,0,0,0.4)";
mytext.style.color = "#fff";
myarrow.style.borderColor = "#fff";
} else {
mybutton.style.position = "absolute";
mybutton.style.top = "";
mybutton.style.backgroundColor = "#fff";
mytext.style.color = "#333";
myarrow.style.borderColor = "#333";
}
}

I figured it out, if anyone comes across this, this worked by settings the popup to "display:none" in css, and using this code to make it display, by pressing add-to-cart CTA:
$('.button.el-button.cta.normal-btn.add-to-basket').click(function(){
$('.installation-popup').show();
});

Events not firing inside mapboxgl popup

I'm attempting to do something custom with clusters, where when you click down on a cluster that cannot be expanded further (eg. two objects with the same or very similar location data), a list of what is contained in that cluster should appear, which you can then interact with. I am able to retrieve the objects, create the list and place it on the correct spot on the map, but I am unable to bind any events to those list entries. I have created similar functionality in other parts of the map application, and these seem to be working as expected. Those were not created using the Popup library, so I could try reusing that technique, but the ease of placing popups makes me want to at least try to get those working with events.
I've tried using addEventListener with the click, mouseup and mouseenter events, but nothing is triggering.
How can I use eventListeners in mapbox popups? Is the HTML passed to the popup being sanitized somehow?
I am currently using mapboxgl 1.2.0.
How the popup is generated:
new mapboxgl.Popup({offset:25}).setHTML(generateListPopup(myEntries).outerHTML)
.setLngLat(coords[0])
.addTo($scope.map);
How the content is generated:
function generateListPopup(entries){
var container = document.createElement('div');
container.maxHeight = "240px";
container.overflowY = "auto";
var ul = document.createElement('ul');
ul.style.listStyle = "none";
ul.style.padding = "0";
container.style.background = "blue"; // does set the color to blue
container.addEventListener('mouseenter', function () { // does not trigger
console.log("by golly"); // does not show
});
angular.forEach(entries, function (e) {
var li = document.createElement('li');
var entry = document.createElement('p');
var f = document.createElement('button');
entry.innerHTML = e.name;
entry.style.cursor = "pointer";
f.addEventListener('mouseup', function () {
console.log("hello"); // nope
});
li.appendChild(f);
li.appendChild(entry);
ul.appendChild(li);
});
container.appendChild(ul);
return container;
}
Any help is greatly appreciated!

I just typed out this whole question before figuring it out, so might as well post it in case anyone ever has the same issue:
use setDOMContent on the returned container instead of setHTML on the returned container's outerHTML. I'm guessing the bound events are lost when the elements are serialized using outerHTML.

Iframe nomenucontext - Modify img tag after creation

Hi I am adding a iframe dynamically, It displays an image from a server. I need to disable the context menu for this item. In chrome I can inspect element and if I add oncontextmenu="return false" I do get the wanted affect. However I am unable to do this while the page is generated. Here is an example of the working html.
However I can not reproduce this when i frame is being created. Here is my code.
$(window).scrollTop(0);
$('#secVerify').show();
$("#popWaitLoad").modal("hide");
imgLoading.hide();
dvIframe.empty();
//else load deposit data into interface
$("#spanType").text(deposit.DepositType);
$("#spanReference").text(deposit.Reference);
$("#spanAmount").text("R " + deposit.Amount.toFixed(2));
$("#spanDate").text(deposit.DateCreatedOffsetS);
imageID = deposit.Deposit_Doc_imageID;
var url = imageUrl + '/' + deposit.Deposit_Doc_imageID + '/false';
var imgFrame = document.createElement("iframe");
imgFrame.src = url;
imgFrame.frameBorder = '0';
imgFrame.scrolling = 'no';
imgFrame.width = '100%';
imgFrame.height = '100%';
imgFrame.align = 'middle';
imgFrame.id = "iframeImg";
dvIframe.append(imgFrame);
I have tried examples like.
$("#iframeImage").contents().find("img").attr("oncontextmenu", 'return false');
$('#iframeImage img').on('contextmenu', function (e) {
e.stopPropagation();
// Your code.
return false;
});
But because the img element seems to be only created is done after page load it seems to not work. I know disabling the the menu will not help much and I have explained all the other methods of obtaining the image that is still available but the client really wants this.
I have added nocontextmenu to the body tag and it works everywhere except for the iframe.
So let me clarify, My iframe is working like it should however I would like to disable the right click aka context menu on the specific iframe.

I have used setAttribute to set the attributes and targeted a container to appendChild.
function example(){
var target = document.getElementById('container');
var element = document.createElement('img');
element.setAttribute('src', 'http://gopalshenoy.files.wordpress.com/2011/04/product_demos.jpg');
//element.setAttribute('width','100%');
//element.setAttribute('height','100%');
element.setAttribute('id','iframeImage');
element.setAttribute("oncontextmenu","return false;");
target.appendChild(element);
}
// Demo-Snippet use.
window.onload=example;
<!-- Demo Snippet use -->
<div id="container"></div>
If you build more than one element using this function you might find further issues due to duplicated ID's.
ID's are used to target a specific element 'one of' so if you want to build multiple elements I would recommend giving them unique ID's.
I hope this helps. Happy coding!

How can I dynamically add a paragraph to a document without overwriting everything else in javascript?

I'm just learning how to write javascript, but i've already learned java. the difference in syntax is driving me nuts. i'm just doing a dumb little sample code to see if i can add a paragraph to the end of a page at the click of a button. but i can't seem to do it. i'm positive that i'm really close to achieving my goal though. i already know the button functions properly. there is a similar post that has helped me, but i can't seem to quite get to where i want. here's the javascript:
function displayDate()
{
//object that will hold newParagraph
var iframe = document.createElement("iframe");
iframe.width = 400;
iframe.height += 50;
iframe.id ="iframe";
var comment = "woohooo! go me.";
//var doc = iframe.contentDocument || iframe.document;
var newParagraph = document.createElement('p');
newParagraph.textContent = comment;
//doc.body.appendChild(newParagraph);
iframe.appendChild(newParagraph);
document.getElementById("updateDiv").appendChild(iframe);
//the id updateDiv is in my html
}
the iframe shows up as a blank box without the text. i cannot figure out how to get the text to appear in the iframe.
here's the similar post if you're curious: Adding iframe and paragraph elements dynamically

If you just want to add a paragraph to the document, ditch the iframe. An iframe embeds a completely new document inside your browser window. For your purposes, simply appending the <p> element onto the <div id='updateDiv'> should be enough:
function displayDate() {
var comment = "woohooo! go me.";
var newParagraph = document.createElement('p');
newParagraph.textContent = comment;
document.getElementById("updateDiv").appendChild(newParagraph);
}
and here's the HTML:
<button id='a'>Click Me!</button>
<div id='updateDiv'></div>
And here's the fiddle example:
http://jsfiddle.net/MYy72/

Loading two different content in to two different places by selecting on link without reloading the page.

I am new to web developing and I am looking to use javascript to create a dynamic page that without reloading the page it will change the content of three different divs (div #1 would be some text with an specific W and H, div #2 would be a picture and dive #3 would be a larger picture)
Thank you so much in advance for your help.

What you simply need to do is attach an event handler some to some event, and then, through javascript, change out the DOM elements for your new view. For example, clicking on a link or button will initiate this change:
<script type="text/javascript" language="javascript">
document.getElementById('myElement').attachEvent('click', function()
{
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
// modify div1, div2, div3 properties, child nodes, etc
});
</script>
In this situation, I would definitely recommend using jQuery to greatly simplify the amount of code that you will need to write.

I wasn't sure exactly how you were getting the text and image links and if you were using JQuery or not, so this is about as generic as I can put it. You can make it more dynamic by passing the text and image links to the function.
function load_divs(){
var div1 = document.getElementById('IDDIV1');
var div2 = document.getElementById('IDDIV3');
var div3 = document.getElementById('IDDIV3');
div1.style.height = ###px;
div1.style.width = ###px;
div1.innerHTML = 'PUT YOUR TEXT HERE';
div2.innerHTML = '<img src="LINK_TO_IMG" />';
div3.innerHTML = '<img src="LINK_TO_LARGER_IMG" />';
}