I have been trying to get a script working to toggle a piece of HTML when i toggle a button,
But so far i have not been able to get it working,
let newImg5 = document.createElement("img");
newImg5.src = "https://www.pcinvasion.com/wp-content/uploads/2016/12/discord.jpg";
newImg5.style = `position: absolute; bottom: 15px; left: 15px; z-index: 100000; width: 50px; height: 50px; cursor: pointer;`;
document.body.prepend(newImg5);
newImg5.addEventListener("click", () => {
toggle.html <iframe src="https://discordapp.com/widget?id=68awdawdawdawds8&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
});
It sounds like you want to do something like this:
let newImg5 = document.createElement("img");
newImg5.src = "https://www.pcinvasion.com/wp-content/uploads/2016/12/discord.jpg";
newImg5.style = `position: absolute; bottom: 15px; left: 15px; z-index: 100000; width: 50px; height: 50px; cursor: pointer;`;
document.body.prepend(newImg5);
/* create iframe */
let iframe = document.createElement('iframe');
iframe.setAttribute('id', 'iframe');
iframe.setAttribute('src', 'https://discordapp.com/widget?id=68awdawdawdawds8&theme=dark');
iframe.setAttribute('width', '350');
iframe.setAttribute('height', '500');
iframe.setAttribute('allowtransparency', 'true');
/* Make iframe appear on click */
newImg5.addEventListener("click", () => {
document.body.append(iframe);
});
Related
I have a windows full-sized div container which reacts to incoming drag&drop events for files.
<div id="drag-overlay">
<div id="drag-overlay-text">This is shown while drag is active...</div>
</div>
Unfortunately the container doesn't propagate clicks to underlying objects like buttons anymore. Is there a simple CSS fix, or do I need to register a click-handler on the div container and manually propagate the clicks/drags manually? Latter doesn't really feel like a good solution
#drag-overlay {
position: absolute;
top: 0;
z-index: 1;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
}
Registration of the drag and drop handler:
var holder = document.getElementById('drag-overlay');
holder.ondragover = () => { ...
holder.ondragleave = () => { ...
holder.ondragend = () => { ...
holder.ondrop = (e: DragEvent) => { ...
...
I'm guessing that the problem is the buttons are technically "under" the drag-overlay since its absolutely positioned, so no actions to them can be seen.
Since you didn't post a lot of code, I put together this working sample, that shows putting the button outside of #drag-overlay and absolutely positioning it with a higher z-index than #drag-overlay.
var btn = document.querySelector("button");
btn.addEventListener("click", function(e) {
e.preventDefault();
console.log("click");
});
#drag-overlay {
position: absolute;
top: 0;
z-index: 1;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
}
button {
position: absolute;
top: 0;
z-index: 2;
left: 0;
right: 0;
}
<button>TEST</button>
<div id="drag-overlay">
<div id="drag-overlay-text">This is shown while drag is active...</div>
</div>
I need to show my paragraph inside my <div> when click on the <div>. This is my code:
const area = document.getElementById("area");
const popup = document.getElementById("popup");
function showPopup(event) {
let x = event.clientX;
let y = event.clientY;
popup.style.left = `${x}px`;
popup.style.top = `${y}px`;
popup.style.visibility = "visible";
}
area.addEventListener("mousedown", showPopup);
.area {
border: 1px solid;
position: absolute;
height: 200px;
width: 200px;
}
.popup {
visibility: hidden;
position: absolute;
display: inline-block;
}
<div id="area" class="area">
<p class="popup" id="popup">popup</p>
</div>
Note that this is inside another main body <div> (also with position: absolute).
Try this
<div id="area">
<div class="area""
<p class="popup" id="popup">popup</p>
</div>
</div>
I tested your code and observed you are changing style.top property based on your ClientX value which is causing popup element to appear over random position. Use following updated code and it's should be good.
function showPopup(event) {
console.log(event.clientX, event.clientY)
let x = event.clientX;
let y = event.clientY;
popup.style.left = `${x - 8}px`;
popup.style.top = `${y - 8}px`;
popup.style.visibility = "visible";
}
and few CSS changes as -
.area {
border: 1px solid;
position: relative;
height: 200px;
width: 200px;
}
.popup {
visibility: hidden;
position: absolute;
display: inline-block;
margin: 0;
}
For more close positioning of popup element.
Hello im trying to get a code working for tampermonkey, Where if you click a button it will hide a piece of HTML and when you click it again it shows up again.
let newImg4 = document.createElement("img");
newImg4.src = "https://image.flaticon.com/icons/png/512/63/63801.png";
newImg4.style = `position: absolute; bottom: 290px; right: 20px; z-index: 100000; width: 50px; height: 50px; cursor: pointer;`;
document.body.prepend(newImg4);
newImg4.addEventListener("click", () => {
let w = HIDE HTML HERE!("<iframe src="https://discordapp.com/widget?id=yesihavetheidijuswanttokeepittomyselffornow&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>");
});
Any help would be greatly appriciated!
Thanks in advance.
You have to first get the iframe (the comment from Hisham missed that), and then set its display style to none.
let newImg4 = document.createElement("img");
newImg4.src = "https://image.flaticon.com/icons/png/512/63/63801.png";
newImg4.style = `position: absolute; bottom: 290px; right: 20px; z-index: 100000; width: 50px; height: 50px; cursor: pointer;`;
document.body.prepend(newImg4);
var elem = document.getElementsByTagName("iframe")[0];
newImg4.addEventListener("click", () => { if (elem.style.display === "none") { elem.style.display = "block"; } else { elem.style.display = "none"; } });
<iframe src="https://discordapp.com/widget?id=yesihavetheidijuswanttokeepittomyselffornow&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
I have embedded a PDF viwer in my page and would like to disable the object in such a way that it's not possible to interact with it (no scrolling, no zoom in/out). My html object looks like this:
<div id="pdf">
<object width="650" height="500" type="application/pdf" data="./forms/my.pdf?#zoom=45&scrollbar=0&toolbar=0&navpanes=0" id="pdf_content">
<p>PDF could not be loaded.</p>
</object>
</div>
Is it even possible to disable the object?
If your PDF is rendering as intended on page load and you simply want to prevent mouse interaction, you can cover it up with an invisible element like so with CSS:
#pdf {
position: relative;
}
#pdf::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(0, 0, 0, .3);
}
And per your request, a way to toggle this on/off (using jQuery):
$('#toggle').on('click', function() {
if ($('#pdf').hasClass('enable')) {
$('#pdf').removeClass('enable').on('mousedown scroll', function() { return false; });
$(this).text('Enable PDF Interaction');
} else {
$('#pdf').addClass('enable').off();
$(this).text('Disable PDF Interaction');
}
});
#pdf {
position: relative;
/* sizes for example since PDF won't load: */
width: 650px;
height: 500px;
}
#pdf::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(0, 0, 0, .3);
}
#pdf.enable::before {
content: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">Disable PDF Interaction</button>
<div id="pdf" class="enable">
<object width="650" height="500" type="application/pdf" data="https://upload.wikimedia.org/wikipedia/en/d/dc/Convergent_Synthesis_Example.pdf" id="pdf_content">
<p>PDF could not be loaded.</p>
</object>
</div>
My motive is to create a progress image while postbacking to the server in mvc3 view. when ever process is running the progress image with background div should popup. the popup should not allow to access controls on the page. for example i have dropdown in my view, when i post back back progess image should come and i should not allow to click on dropdown.
i have tried many ways all are working if it is not postbacking but while postback is happending i am able to click on actual page controls. but i should not allow to click. any help?
the code which i tried is...
<style type="text/css">
.modal
{
position: fixed;
top: 0;
left: 0;
background-color: #f7f7f7;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading
{
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="loader.gif" alt="" />
you should use jquery UI dialog box for it and set opacity.
you can find some examples here
http://jqueryui.com/dialog/#modal-confirmation