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>
Related
I have a simple Page with 3 Div elements, and I want when you hover over them for a box with specific text to show up.
First issue is, when it starts to change color the box dissapears and shows again.
Second issue is, when you have multiple divs, it works for only the first one.
var trigger = document.getElementById("trigger");
var popup = document.getElementById("popup");
var text = document.getElementById("popup-text");
text.innerHTML = "This is the pop-up text.";
trigger.addEventListener("mouseover", function () {
popup.style.display = "block";
popup.style.left = event.clientX + "px";
popup.style.top = event.clientY + "px";
});
trigger.addEventListener("mouseout", function () {
popup.style.display = "none";
});
#popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
color: black;
border: 1px solid black;
padding: 20px;
width: 200px;
}
#trigger {
height: 100px;
width: 100px;
background-color: blue;
}
#trigger:hover {
background-color: green;
transition: 0.6s;
}
<div id="trigger"></div>
<div id="trigger" style="background-color: aqua;"></div>
<div id="trigger" style="background-color: brown;"></div>
<div id="popup"><p id="popup-text"></p></div>
From what I can see is that you are generating a blue box in your css,
#trigger {
height: 100px;
width: 100px;
background-color: blue;
}
and you are applying the popup text to only occur on the blue box.
To get the popup to apply to both aqua and brown boxes, end your "trigger" div after the "popup" div.
I'm not sure what you wanted to be blue though>
You are going to come across more issues due to naming conventions with multiple divs with the same IDs (those should be unique to individual divs, class names can be used multiple times), but this answer is to only solve your popup issue.
I suggest looking a little more into trying to accomplish this with CSS only, and then moving onto how to do it with JS.
Good luck!
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.
Here's an image showing what I'm trying to achieve:
As you can see, I'm trying to get the profile options dropdown to be centered below the profile button. The current way I have it set up is to have the dropdown menu have position: absolute, and then use a margin-left: -3% to actually "center" it, but I feel like there should be a more reliable way to actually center it that isn't dependent on a hardcoded percentage value. Below is the relevant code:
index.php:
<div id="navTools">
<button id="navProfile"><img src="./imgs/profile.svg" alt="Profile"/></button>
<div id="profileDropdown">
Account Information
Orders & Returns
Logout
</div>
<a id="navCart" href="cart.php"><img src="./imgs/cart.svg" alt="Cart"/></a>
</div>
styles.css
#profileDropdown {
display: none;
background: #1d1d1d;
position: fixed;
margin-left: -3%;
}
Wrap profile button and profile dropdown in a div. Give that div position: relative and set position: absolute for the dropdown. If you want it to appear at the bottom, set bottom: 0. If you want to center it vertically, set left: 50%, transform: translateX(-50%).
<div id="navTools">
<div class="dropdown-wrapper">
<button id="navProfile"><img src="./imgs/profile.svg" alt="Profile"/></button>
<div id="profileDropdown">
Account Information
Orders & Returns
Logout
</div>
</div>
<a id="navCart" href="cart.php"><img src="./imgs/cart.svg" alt="Cart"/></a>
.dropdown-wrapper {
position: relative;
}
#profileDropdown {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
The background image is an image of an office. The background image will have a few <a> tags where the person can click. For example: there is an <a> tag on a computer that's on the desk. Taking this example, I want to do the following:
Hovering on the <a> tag that is over the computer, will load in a picture of the same office, however, the computer has been outlined with a white line in photoshop (Lets say: img/bureau2). Indicating that it is interactable. Hovering away from this will return it to the original picture which you see when you enter site (img/bureau1)
You can also click on the <a> tag. This will open up another image (img/bureau3).
So far I managed to get the change on hover and click to work. Issue is, hovering away from the <a> tag will cancle the click.
This is what I have so far, how can I tackle this issue?
$(".computerHover").hover(function() {
$("#backgroundImage").attr('src', 'img/bureau2.png');
},
function() {
$("#backgroundImage").attr('src', 'img/bureau.png');
});
$(".computerHover").click(function() {
$("#backgroundImage").attr('src', 'img/bureau3.png');
});
#pagina2 {
width: 100%;
height: 100%;
}
#backgroundImage {
height: 100vh;
width: 100vw;
z-index: 0;
display: block;
}
.computerHover {
width: 105px;
height: 75px;
position: absolute;
right: 28vw;
top: 40vh;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pagina2">
<div id="pagina2Background">
<img id="backgroundImage" src="img/bureau.png">
<div class="computer">
<a class="computerHover"></a>
</div>
</div>
</div>
Seems to me, what you are trying to do, is an image map. But for the sake of your question, I will focus on one particular link.
The reason the click generated image disappears when you move the mouse, is because it is still bound to the previous hover event. The hover method is a shortcut for mouseenter and mouseleave. In order to circumvent that, you need to unbind that event handler.
EDIT:
I reworked my answer to more closely resemble the code in your question. In order to "reset" the image, I would suggest using a link that the user can click to make it less confusing for them.
function switchImage() {
$(".computerHover").hover(function() {
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Computer');
},
function() {
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Office');
});
}
// attach the hover events when page loads
switchImage();
$(".computerHover").on("click", function() {
$(this).off("mouseenter mouseleave");
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=New Background');
});
// reattach hover handlers and set image back to default
$(".reset").on("click", function() {
switchImage();
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Office');
});
#pagina2 {
width: 100%;
height: 100%;
}
#backgroundImage {
height: 100vh;
width: 100vw;
z-index: 0;
display: block;
}
.computerHover {
width: 105px;
height: 75px;
position: absolute;
right: 28vw;
top: 40vh;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="pagina2">
<div id="pagina2Background">
<a class="reset">Start Over</a>
<img id="backgroundImage" src="http://via.placeholder.com/300x300.png?text=Office">
<div class="computer">
<a class="computerHover">Computer</a>
</div>
</div>
</div>
To do what you want you'll need to keep some sort of state that indicates that the user clicked instead of just hover. In the click handler you could add a class or data-* to #backgroundImage element that you later check when you un-hover.
Example codesanbox.
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!