I'm currently coding a website using HTML, CSS and JS. I have used a code found on here to make two images on top of each other fade out to expose the other image on the click of a button (creating the effect of a changing img).
However, I don't want there to be an ugly <input type="button"> on the page to activate the fade, instead, I would like to be able to click an image for the toggle function to be called. How would I go about changing the element that activates the function?
JS code:
$(function(){
$("input:button").click(function(){
$(".logo").fadeToggle("fast");
});
});
HTML:
<input type="button" value="Go Kitty Go"/>
CSS:
#logo1 {
position:absolute;
top:9px;
left: 46%;
height: 29px;
width: 89px;
}
#logo2 {
display:none;
position:absolute;
top: 8.5px;
left: 48.2%;
height: 28px;
width: 60px;
}
input {
position:absolute;
top: 220px;
}
I would like to swap the button with an img to activate the fadeToggle() function.
You havn't posted your full html so I don't know what your img tags look like. But assuming you have given them an id (id="someId"), do this:
$("#someId").click(function(){
$(".logo").fadeToggle("fast");
}); `});`
The only change here is that instead of listening for the click on your button, your code is now listening for the click on your img
Related
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'd like to link an iframe to a button so I can open the below iframe (iframe/ model window) from clicking on the "keep me posted" button on my site: http://www.aphealthnetwork.com.
iframe code:
<iframe width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>
code for the button:
<div class="buttons">Keep Me Posted! or learn more</div>
I've been searching and searching and can't find the answer anywhere.
Not sure what the end goal is exactly, but if you want to show that iframe in a modal when you click on the button, you could put the iframe in an element for the modal, hide that by default, then show the modal when you click the button. I also added a link to close the model. You might want to adjust the height/width of the modal to fit your needs, too. Or let me know what the end goal is and I can help out with that.
$('.buttons a').on('click',function(e) {
if ($(window).width() > 820) {
e.preventDefault();
$('#modal').show();
}
});
$('.close').on('click',function(e) {
e.preventDefault();
$('#modal').hide();
})
#modal {
display: none;
background: rgba(0,0,0,0.5);
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
iframe {
position: absolute;
top: 1em; left: 50%;
transform: translate(-50%,0);
}
.close {
position: absolute;
top: 1em; right: 1em;
background: black;
color: white;
padding: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">Keep Me Posted! or learn more</div>
<div id="modal">
<a class="close" href="#">close</a>
<iframe width='810px' height='770px' src='https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2'></iframe>
</div>
Just use <input type='button' class='buttons' id='kmp' value='Keep Me Posted' /> or something similar instead... then you could make an output Element <iframe id='output'></iframe> and do this, using jQuery:
$(function(){
$('#kmp').click(function(){
$('#output').css('display', 'block').attr('src', 'https://recruit.zoho.com/recruit/WebFormServeServlet?rid=36a8431719e8992d52d2a3fd6413be1b174be02b570ad6d6d795388ce21476a8gid4b981a4b826d7e00d977121adb371cbfd816dda10dd585759e7046fd7a75b6a2');
}
}
You also need to make sure that src is a full document as well. I see that it's not. I threw in that .css('display', 'block') in case you want to start your CSS with #output{display:none;}.
What do you exactly want?
For responsive modal look here
If you want to display the modal content a similar question is here
If you want to only display the iframe use jquery.
Or look at Display website in modal
In my web page I have an image that has a button positioned over it. I want to show and hide the button as mouse enter and leave the image:
$('#UserImage').mouseenter(function()
{
$('#ButtonChange').show();
}).mouseout(function()
{
$('#ButtonChange').hide();
})
It is working but as the button is contained inside the image when the mouse enters the button it is considered to leave the image so the button is hidden then at tha same moment as the button is hidden the mouseenter event is triggered again and the button is shown causing a flickering effect
any suggestion to solve this?
Edit:
$('#UserImage').mouseenter(function() {
$('#ButtonChange').show();
}).mouseout(function() {
$('#ButtonChange').hide();
})
.imageUser {
width: 150px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="position:relative;width=150px">
<img ID="UserImage" class="imageUser" ImageUrl="~/Images/logo.jpg" />
<input type="button" ID="ButtonChange" Text="Change" style="position: absolute;top: 180px;height:25px;left:0px;width:100px;display:none">
</div>
The whole thing is also possible with pure CSS ! for such simple thing, you don't really need Jquery !
.imageUser {
width: 150px;
height: 200px;
}
.img-wrapper {
position: relative;
width: 150px
}
.img-btn {
position: absolute;
top: 180px;
height: 25px;
left: 0px;
right:0; /* gave right, to align the button in center */
margin:0 auto; /* as button as fixed width, margin aligns in center */
width: 100px;
display: none
}
.img-wrapper:hover .img-btn {display:block} /* whenever mouse hovers the image wrapper, the button is shown, other time, its hidden */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="img-wrapper">
<img ID="UserImage" class="imageUser" ImageUrl="~/Images/logo.jpg" />
<input type="button" ID="ButtonChange" Text="Change" class="img-btn">
</div>
Try hover?
$("#UserImage").hover(function () {
$('#ButtonChange').show();
}, function () {
$('#ButtonChange').hide();
});
I don't have an image so I make a div instead. See Fiddle below.
Fiddle: https://jsfiddle.net/9koswww1/1
Change mouseenter to mouseover.
https://api.jquery.com/mouseenter/
Check the bottom of the page for an example.
try this
$('#UserImage').mouseenter(function()
{
$('#ButtonChange').show();
}).mouseleave(function()
{
$('#ButtonChange').hide();
})
Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.
you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});
Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle
I have the following code:
<div id="div3"><img src="" width="20px" /></div>
<div id="div4">
... -> menu
</div>
which by using the following:
div3{
position: absolute;
width: 20px;
height: 20px;
left: 50%;
top: 50%;
margin-top: -10px;
margin-left: -10px;
}
#div4{
display: none;
float:right;
position: absolute;
left: 60%;
top: 50%;
margin-top: -15px;
margin-left: -70px;
}
#div3:hover + #div4 {
display: block;
}
I make the div4 show, after hovering #div3 (which is an image) . However I want div4 appears and remains after uncovering the #div3. I tried couple of codes in jquery but they do not work.
can you help?
As PHPGlue said, you can't do that with just CSS.
You can do something like this using jquery, adjust the code based on your needs:
HTML
<div id="one">Hover me!</div>
<div id="two">HELLOO!</div>
JS
$("#one").on("hover", function(){
$("#two").show();
});
FIDDLE
You can (effectively) do this in pure CSS, such that it works in modern browsers. The trick is to use a very large value for a transition-delay when the hover exits. Like this:
#div3:hover + #div4 { opacity:1; height:20px;transition-delay:0s; }
#div4 { opacity:0; height:0; transition-delay:360000s; }
See http://jsfiddle.net/7Fw3A/1/
Make sure that #div4 is always displayed while it is hovered over. Change your last CSS selector to something like:
#div3:hover + #div4, #div4:hover {
display: block;
}
It will still go away when you move the mouse away from both div3 and div4, but that is often what you want to happen. If not, it's probably best to use a jQuery solution (I'm sure others will post one).
You could possibly add another transparent div that covered the full height and width of the page, give it a high z-index, and make sure that both it and div4 are displayed when that div is hovered over (as it will always be), but that sounds like a bad idea.
As PHPglue said, you need Javascript to do this. (this is only one example. feel free to use whatever JS you want)
$('#div3').hover(function() {
$('#div4').css('display', 'block');
}
I assume you want to make #div4 to appear once you've hovered over #div3, so do the following.
$('#div3').on('mouseover', function () {
$('#div4').addClass('visible');
$(this).off('mouseover');
});
This will add the class visible to #div4 when you mouseover #div3 for the first time. If you add a css selector .visible { visibility: visible; } then this will adjust #div4s css.