I have a popup in my app:
<div id="modal"></div>
let modal = document.getElementById('modal')
modal.innerHTML = `
<button class="close-button" onclick="close_modal()">Close</button>
`
#modal{
width: 30em;
height: 24em;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
}
When I click certain button function is triggered which has modal.classList.add('open-modal') in it.
.open-modal{
visibility: visible !important;
}
close_modal function is:
function close_modal(){
modal.classList.add('close-modal')
}
CSS:
.close-modal{
visibility: hidden !important;
}
It works just fine once(i can open and close popup but when I try to open it second time it doesn't. Why is this happening and how to fix it?
After adding a new class, you must remove the previous class from the element's classlist. So the modal won't seem to work anymore after having both classes at the same time.
for ex.
function changeVisibility(modal) {
if(modal.classList.contains('open-modal')) {
modal.classList.remove('open-modal');
modal.classlist.add('close-modal');
} else {
modal.classList.remove('close-modal');
modal.classList.add('open-modal')
}
}
If your trying to do modals, you should use HTML's <dialog> element (Also see HTMLDialogElement). MDN has a tutorial on it.
Related
There is button is on the left side of its container, with the text Go Right!.
When the button is on the left side, clicking it results in the button moving to the right side of the container.
When the button is on the right side, the button text is Go Left!
When the button is on the right side, clicking it results in the button moving to the left side of the container.
I tried this:
html:
<body>
<div class="container">
<button id="flip-flop" onclick="moveRight()">Go Right!</button>
</div>
</body>
js file:
function moveRight(){
const flip_flip_button = document.getElementById("flip-flop")
flip_flip_button.addEventListener("click", function () {
flip_flip_button.style.left = 400 + "px";
});
}
css:
.container {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
background-color: gray;
transform: translate(-50%, -50%);
}
#flip-flop{
position: relative;
}
image
This code result, the button is move right (by second click? don't know why also) but not responsive.How can I move right button just until container right side?
Several problems here.
You are adding a click listener every time the button gets clicked. Instead, only add one listener, that does the actual work you want.
Don't work with element.style, as that produces inline styles, which are widely consider very bad practice. Instead, prepare a CSS class in your CSS that contains the desired styles, and toggle that class on click.
In this case the easiest way to get your button aligned to the right is setting text-align: right on the button's parent element.
document
.getElementById('flip-flop')
.addEventListener("click", function() {
this.parentNode.classList.toggle('right');
});
.container {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
background-color: gray;
transform: translate(-50%, -50%);
}
#flip-flop {
position: relative;
}
.right {
text-align: right;
}
#flip-flop::after {
content: " right!";
}
.right #flip-flop::after {
content: " left!";
}
<div class="container">
<button id="flip-flop">Go</button>
</div>
I am trying to make a scenario where if someone clicks on the iframe, so it will open a new window to check the same URL on the web browser tab. But the scroll and other mouse events on the iframe will not affect it.
I tried different approaches but nothing worked
Approach 1: Tried to get the onClick event of the iframe itself, but the issue is of cross-origin persist
Approach 2: Tried to provide the onClick event to the parent element of iframe, but as pointer-events of the iframe are enabled it won't let the parent onClick to work.
Approach 3: Tried to make an overlay of anchor tag, above the iframe. It did work but it stops the iframe scroll.
Here is my code:
<div>
<iframe src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
</div>
iframe {
width: 100%;
height: 100vh;
pointer-events: none;
}
a {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
Fiddle: here
Is it possible to achieve this scenario with the cross-origin URL?
Your code does not work because you have pointer-events: none; set to it. You can do like this that you click the "button overlay" and redirect the user with javascript, once it is clicked it "removes" the button overlay.
In my case I have set the background to be red just to make it clear, and I don't remove the button I just hide it. You can adjust to your use case. Also note that this script only allows for one of this iframes and buttons. If you have more the script have to be modified to loop through and add eventListeners to button and to look at its parent to add the class on the container (or if you just remove the button)
const redirectAction = document.querySelector('.js-open-url')
redirectAction.addEventListener('click', function() {
window.open(
redirectAction.dataset.href,
'_blank'
)
document.querySelector('.container').classList.add('container--is-open')
})
.container {
position: relative;
}
iframe {
width: 100%;
height: 100vh;
}
.button {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: red;
}
.container--is-open .button {
display: none;
}
<div class="container">
<iframe src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
<button class="button js-open-url" data-href="https://fr.wikipedia.org/wiki/Main_Page"></button>
</div>
I'm having a little trouble with CSS and can't seem to find a solution. I have this HTML
<div id="closelink">
Close
Click to close
</div>
Now I want to hide the text «Click to close» only, without hiding neither the div, nor the link within it.
Can this be done?
The visibility attribute can be overriden on children elements, so you are able to do this:
#closelink {
visibility: collapse;
}
#closelink a {
visibility: visible;
}
<div id="closelink">
Close Click to close
</div>
.closelink {
font-size: 0px;
}
.close-link a {
font-size: 12px;
}
Try
#closelink {
position: relative;
left: -9999px;
}
#closelink a {
position: relative;
left: 9999px;
}
<div id="closelink">
Close Click to close
</div>
It works but you can use visibility:hidden instead of visibility:collapse
To avoid the child element breaking to a new line (as happens with just using visibility: hidden/collapse and visibility: visible), and to avoid drawing a 9999px block in the browser (generally frowned upon as it is unnecessary overhead), try this:
#closelink {
position: relative;
visibility: hidden;
}
#closelink a {
position: absolute;
left: 0;
top: 0;
visibility: visible;
}
<div id="closelink">
Close Click to close
</div>
You can adjust your left: 0 value to provide some padding.
There are three methods I could think of:
One
#parent {
opacity: 1;
}
.child {
opacity: 0;
}
<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>
Two
.child {
visibility: hidden;
}
<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>
Three
.child {
display: none;
}
<div id="parent">
dkjfdkf
<span class="child">Annoying text</span>
</div>
Opacity is best if you want the image to always be on the page to keep the structure but, you don't want it to be visible.
Hope this was helpful.
I'm relatively new to coding and am running into a particular issue with my website. My homepage has images on it with overlay text hover effect that occurs when a cursor is moved over the image. It works perfectly on desktop, however, not on mobile. I would like for the hover text to appear when the user swipes across the image in any direction. I've done some research and it appears that I should somehow be using jQuery and the touchmove function to make this happen. But I just can't figure it out. I am using Shopify (debut theme) to build my website. Any help will be greatly appreciated!
Here's my CSS for hover event:
//hover effect//
.container {
position: relative;
width: 100%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 99%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #000000;
}
.container:hover .overlay {
opacity: 0.7;
}
.text {
color: white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
white-space: pre;
}
Thanks!!!!
You'd need to apply a class with the desired effect to the target element.
You could do it with Jquery, but javascript is perfectly capable to do it on its own.
Something like:
Javascript:
const myTargetElement = document.getElementsByClassName('overlay')[0]; // index to be confirmed
// add hover style
myTargetElement.addEventListener('touchmove', function (e) {
e.target.classList.add('hover'); // or whichever class name you'd like
});
// remove hover style on end
myTargetElement.addEventListener('touchend', function (e) {
e.target.classList.remove('hover'); // or whichever class name you'd like
});
CSS:
.container:hover .overlay,
.overlay.hover {
opacity: 0.7;
}
Note: if you want to target all the elements .overlay on your page with that code, you would need something like:
Javascript:
const myTargetElements = document.getElementsByClassName('overlay');
// convert HTML collection to array
const myTargetElementsArray = [].slice.call(myTargetElements);
myTargetElementsArray.forEach(function (element) {
// add hover style
element.addEventListener('touchmove', function (e) {
e.target.classList.add('hover'); // or whichever class name you'd like
});
// remove hover style on end
element.addEventListener('touchend', function (e) {
e.target.classList.remove('hover'); // or whichever class name you'd like
});
});
so Moustachiste's code works! It had a few syntax errors but I was able to resolve them quickly. Here's the final version:
const myTargetElements = document.getElementsByClassName('overlay');
// convert HTML collection to array
const myTargetElementsArray = [].slice.call(myTargetElements);
myTargetElementsArray.forEach(function (element) {
// add hover style
element.addEventListener('touchmove', function (e) {
e.target.classList.add('hover'); // or whichever class name you'd like
});
// remove hover style on end
element.addEventListener('touchend', function (e) {
e.target.classList.remove('hover'); // or whichever class name you'd like
});
});
Paste the code into your theme.js and adjust the variable names accordingly. Should work for everyone!
Cheers to this guy!
I need to show a Modal in TypeScript. I don't want to use any library(bootstrap,..) to style it, I have to use own less styling for it. what I can use to Create a Modal? it can be a javascript modal that supported by typescript and by all browsers.
I tried to use showModal() like this:
This is my TypeScript Code:
function CreateModal() {
document.getElementById("myDialog").showModal();
}
It gave me this error - showModal is not exists.
even if It works it is not supported in IE and Firefix only works in chrome.
and this is my index.html
<script src="scripts/TypeScripts/Modal.js"></script>
<button onclick="CreateModal()">Show dialog</button>
<dialog id="myDialog">This is a dialog window</dialog>
I tried to use Onclick as well but it says does not existed.
span.onclick = function () {
modal.style.display = "none";
}
I know it's been a few months since this question was asked, but I recently had the same problem and was able to get a solution working.
In the typescript, you can ignore the need for the HTMLDialogElement by casting your dialog to type any.
openMyDialog() {
let myDialog:any = <any>document.getElementById("myDialog");
myDialog.showModal();
}
In your HTML, you just attached this function to the angular (click).
<button (click)="openMyDialog()">Open My Dialog</button>
The same technique can be used for the dialog's show() and close() functions.
If you're up for doing everything manually, you can place a partially transparent grey DIV over everything on the page, then a single DIV on top of it with your dialog. Toggle visibility with JS/CSS, and you're able to style any way you like it.
Here's a quick example, with a significant need for improved styling:
div.greyModal {
opacity: 0.7;
background-color: grey;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div.modalContent {
opacity: 1;
position: fixed;
width: 75%;
left: 50%;
margin-left: -37.5%;
height:100px;
background-color: white;
border: solid 4px black;
border-color: black;
}
<div>
This is the web page content. <span style="color:red">This is red text that appears faded when the modalToggle divs are visible</span>
</div>
<div class="greyModal modalToggle">
</div>
<div class="modalContent modalToggle">
This is the content of my modal dialog
</div>