I ran into a unique request for a HTML page. I needed one image to link to a website and an second image which would sit on top of the first that opens the same website in a new window. In effect, the second image is a quasi-maximize button placed in the top right-hand corner.
The trick is the "maximize button" needs to only appear when hovering over the first image.
Special thanks to these two posts. I was able to piece together a solution. I am sharing my work below in the approved answer.
Show div on hover with only CSS
How do I position one image on top of another in HTML?
Here is a sample of the CSS, JavaScript and HTML I used to get the desired effects I wanted. Please let me know where I can improve.
Note: I used JavaScript to guarantee the link would open in a new window. If you know a better way to do this. Please share. It bugs me that I have anchor tags using onClick events.
<html>
<head>
<style type="text/css">
.bannerContainer
{
position: relative;
left: 0;
top: 0;
display:inline;
}
.myBanner
{
position: relative;
top: 0;
left: 0;
}
.myBanner:hover + .newWindowButton
{
display: inline;
}
.newWindowButton
{
display: none;
}
.newWindowButton:hover
{
display: inline;
}
.newWindowButton img
{
/*This positions the maximize button. You will have to play with the positioning to get it just right for your work. This is what worked for me.*/
position: absolute;
top: -106px;
left: 170px;
width:30px;
height:30px;
}
.pointer
{
cursor: pointer;
}
</style>
<script type="text/javascript>
function myLinkClick(Url, isInNewLimitedWindow) {
if (isInNewLimitedWindow) {
window.open(environmentUrl, "_blank", "toolbar=no, scrollbars=no, menubar=no, resizable=yes");
}
else {
window.open(environmentUrl);
}
}
</script>
</head>
<body>
<div class="bannerContainer">
<a class="myBanner pointer" onclick="myLinkClick('http://myWebsite.com', false)">
<img src="firstImage">
</a>
<a class="newWindowButton pointer" onclick="myLinkClick('http://myWebsite.com, true')">
<img src="secondImage">
</a>
</div>
</body>
</html>
Related
I am trying to add an image that pops up for mobile viewers upon website entrance. I have a rough idea of the things that must go into the code but not sure exactly how to put things together. Could anyone help me out or point me in the right direction?
I am using cargo collective to build my website if that helps.
I'd like to do something similiar to: https://badbadbadbad.com/ (whenever viewed on a phone)
J
You can use JavaScript's onload function to make an action happen when a page loads. Example below just shows an alert box with some text, but it's a start.
Post your code and we can help further.
<!DOCTYPE html>
<html>
<head>
<title>Pop Up on Page Load</title>
<script>
document.onload(alert("This is my image."));
</script>
</head>
<body>
<p>This is my website.</p>
</body>
</html>
A simple approach could be:
fiddle.
HTML:
<div class="regularBox"></div>
<div class="modalBox">
<img src="https://cdn.pixabay.com/photo/2016/05/02/22/16/apple-blossoms-1368187_960_720.jpg">
<span class="close">×</span> <!--Click X to close-->
</div>
JS:
function showPopup() {
document.querySelector('.modalBox').style.display = 'block';
}
showPopup(); // show modal image.
function closePopUp() {
document.querySelector('.modalBox').style.display = 'none';
}
document.querySelector('.close').addEventListener('click', closePopUp); // hide modal image
CSS:
img {
width: 80%;
}
.close {
font-size: 50px;
margin-left: -40px;
cursor: pointer;
}
.modalBox {
display: none;
}
.regularBox {
z-index: -1; // placed behind modalbox
position: absolute;
background-color: pink;
width: 500px;
height: 400px;
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
I have a webpage that uses tubular.js script to show youtube video as a site background. There's a sentence on tubular page:
First, it assumes you have a single wrapper element under the body tag
that envelops all of your website content. It promotes that wrapper to
z-index: 99 and position: relative.
So following that, I wrote a simple html/css code:
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
#logocontainer{
position: absolute;
top: 20%;
margin-top: -35px;/* half of #content height*/
left: 0;
width: 100%;
text-align:center;
}
#logo {
margin-left: auto;
margin-right: auto;
height: 75px;
}
</style>
<body>
<div id="wrapper" class="clearfix">
<div id="logocontainer">
<div id="logo">
<img src="img/logo.png"/>
</div>
</div>
</div> <!--wrapper-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script>
<script type="text/javascript">
$(function() {
var options = {
videoId : '9JXVUP1hyxA',
start : 1
};
$('body').tubular(options);
});
</script>
</body>
</html>
but now, when I run it - I see only youtube video without my logo on top... I know the logo is there, because when I comment out the youtube script I can see it, however I don't see it when the video is present. I tried to add z-index:99 to #logo but that didn't do any magic... Can you help me with that?
EDIT:
As A. Wolff suggested below, I added to my css:
#wrapper{
z-index:99;
position: relative;
}
still though - no good results, video is still on top..
I see in their own Tubular they use this little script...
$('document').ready(function() {
var options = { videoId: 'ab0TSkLe-E0', start: 3 };
$('#wrapper').tubular(options);
// f-UGhWj1xww cool sepia hd
// 49SKbS7Xwf4 beautiful barn sepia
});
Just adding this keeps everything on top.
Use the code in this Fiddle as a sample.
Your must use z-index with position: relative/absolute.
Also your z-index in video must be less than in your blocks.
video {
position: absolute;
z-index: 1;
}
div {
position: relative;
z-index: 2;
}
I have a strange problem though, when i click the content with z-index 20, the thing with z-index 1 gets selected in my phone.
The image has both the screen shot - the part on the right side of the image is only for illustrating my problem, as such the white gray div is behind my content div.
Can someone please rescue.
Related CSS files:
#content {
background: #000000;
background: url(../img/WireFrame_test.png) center center no-repeat;
box-shadow: 0 0 15px 15px #222222;
overflow-x: hidden;
z-index: 20;
}
.snapjs-right .snap-drawer-right {
display: block;
z-index: 10;
}
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
z-index: 1;
}
As requested related HTML scripts:
<body>
<div class="snap-drawers" id="leftid">
...
<div class="snap-drawer snap-drawer-right overthrow">
<div>
<h3>Questions</h3>
<div class="demo-social">
</div>
<h4>Java</h4>
<ul>
<li>What is Java?</li>
<li>Uses of Inheritence?</li>
...
</div>
</div>
<div id="content" class="snap-content">
my content goes here
</div>
</div>
</body>
Surely because "Uses of inheritance" is the only link element (other than "What is java"), it will be selected - there's nothing else to select!
Try setting the display of that element to "none" when it is hidden.
You could try to hook into the event when clicking / dragging on the content panel and do an event.stopPropagation(); or an event.preventDefault(); when the panel is closed.
As far as i know, you can see that coz Snap.js add's corresponding classes like (class="snapjs-right" or class="snapjs-left") to the body in order to indicate if a panel is open or not.
So first you've got to check that.
With jQuery it would look something like this:
$(document).ready(function() {
$("#UsesofInheritence_Anchor_ID").bind("click", function() {
if (!($('body').hasClass("snapjs-right"))){
event.stopPropagation();
event.preventDefault();
}
});
});
so I have an image which i would like to overlay with an html button attribute like so:
here is a blank image
i would like to overlay a button like so on the image
and then if the button is clicked have it then look like this
from what i can gather this could be done using CSS using {index-z} somehow, or possible with html5 canvas tag. and then to handle the actually button click with java script.
However i am not completely sure how to accomplish this (the handling of button click with javascript i do know). Could someone link to a tutorial on how to do this or give an explanation it would be greatly appreciated.
Note: the image itself is also an href / link if this changes how this should be done, additionally te image itself will be in a sort of gallery with around 50 similar images or so
You can use positioning to place the "star" button on top of the other image. Your image and button will need to be in a container with the position set to relative. Then you can set your "star" to be absolutely positioned, and that position will be relative to the container:
.image-container {
display: inline-block;
position: relative;
}
.star-button {
position: absolute;
right: 10px;
top: 10px;
}
<div class="image-container">
<img src="main image here">
<img class="star-button" src="star image here">
</div>
Then you can handle the click of the image (or button, or a, or what have you) in your javascript.
JSFiddle
Maybe this example will help you my friend:
Source: ye5
HTML :
<div id="header1" width="259px">
<img src='http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3b.jpg' style='margin-left:259px; margin-top:-128px;'/>
CSS :
#header1 a {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a1.jpg);
height:128px;
width:259px;
display: block;
}
#header1 a:link {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a1.jpg);
height:128px;
width:259px;
display: block;
}
#header1 a:hover {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5-templete/ye5Header3a2.jpg);
height:128px;
width:259px;
display: block;
}
#header1 a:active {
background-image: url(http://2aek.com/inventory/MyBlogspot/ye5 templete/ye5Header3a3.jpg);
height:128px;
width:259px;
display: block;
}