I am making an expanding radial member with Javascript. There are image buttons on the menu which expands out of a center image which is clicked to expand the menu. My problem is that the button images are not clickable because the center button's image is covering them.
var i=0;
function expand(){
if(i==0){
document.getElementById("menu").style.transform="scale(3)";
document.getElementById("plus").style.transform="rotate(45deg)";
i=1;
}
else{ document.getElementById("menu").style.transform="scale(0)";
document.getElementById("plus").style.transform="rotate(0deg)";
i=0;
}
}
body{
background-color: #303358;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.toggle {
background-color: #303358;
text-align: center;
height: 100px;
width: 100px;
border-radius: 50%;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.fa-plus{
height: 100%;
width:auto;
display: block;
transition: 0.7s;
}
.menu {
background-color: #000123;
height: 100px;
width: 100px;
transform: scale(0);
border-radius: 50%;
border-style: double;
border-color: #C8C8C8;
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -1;
transition: 0.7s;
}
a {
display: inline-block;
position: absolute;
font-size: 15px;
color: #C8C8C8;
}
a:nth-child(1){
top: 6px;
left: 45px;
}
a:nth-child(2){
top: 24px;
left: 77px;
}
a:nth-child(3){
top: 58px;
left: 76px;
}
a:nth-child(4){
top: 78px;
left: 42px;
}
a:nth-child(5){
top: 58px;
left: 10px;
}
a:nth-child(6){
top: 23px;
left: 12px;
}
a:hover {
color: #989898;
}
<div class="toggle" id="toggle" onclick="menu-expand()">
<img src="CTicon.png" id="plus" class="fa fa-plus">
</div>
<div class="menu" id="menu">
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-private">
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public" >
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public2"></i>
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public3"></i>
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public4"></i>
</a>
<a href="https://www.google.com/">
<img src="bepis.png" style="height:20%;" class="fa fa-public5"></i>
</a>
</div>
The reason I've made a new question is because in most answers I found people suggest just adding a pointer-events: none; tag to my center expanding button, but I can't do this because it is also a button. To fix this I've tried using JS to change it, aswell as I have tried using pointer-events: none;. The only fix I have found so far is just changing the z-index of toggle, the issue with this is that the center button then my comes invisible when the menu expands because its placed below the menu itself which i would like to avoid.
Edit: Well now I'm more confused because the freakin thing works in the code snippet on here haha.
So once the code snippet worked on here I realized it must be something outside of the menu itself overlaying the buttons so I put the toggle button to z-index 2 and the menu to 1 and got it all working.
Related
I have tried to follow what is in this tutorial, but it just is working for Chrome, internet explorer doesn't create the ::after element after the iframe.
Any other ideas of how to achieve the same result ?
EDIT:
I am using the IE 11.
The iframe is placed inside a tooltip generated by the qtip2.
The HTML generated is something like that:
<div class="qtip qtip-default qtip-shadow qtip-youtube qtip-rounded qtip-customized qtip-pos-tl qtip-fixed qtip-focus qtip-hover" id="qtip-10"
role="alert" aria-hidden="false" aria-describedby="qtip-10-content" aria-live="polite"
style="left: 843.02px; top: 289.32px; display: block; z-index: 15001; opacity: 1;"
aria-atomic="false" tracking="false" data-qtip-id="10">
<div class="qtip-tip"
style="border: 0px currentColor !important; left: 4px; top: -6px; width: 6px; height: 6px; line-height: 6px; background-color: transparent !important;">
<canvas width="6" height="6" style="border: 0px currentColor !important; width: 6px; height: 6px; background-color: transparent !important;">
</canvas>
</div>
<div class="qtip-titlebar">
<div class="qtip-title" id="qtip-10-title" aria-atomic="true">Link</div>
</div>
<div class="qtip-content" id="qtip-10-content" aria-atomic="true">
<div style="display: block; white-space: pre-wrap; visibility: visible; -ms-word-wrap: break-word;">
URL: http://portal/sites/test2/Pages/default.aspx
</div>
<iframe name="myiframe" class="iframeLinkUrl" src="http://portal/sites/test2/Pages/default.aspx"
style="display: block; visibility: visible;" target="myiframe" rel="nofollow">
</iframe>
<div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
</div>
</div>
</div>
And the CSS rules are inherited from the application in general, hard to put in here everything. But to resize the iframe to make it look like a thumbnail I added something like that:
.qtip-content:after
{
content:'';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.qtip-content::after
{
content:'';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.qtip-customized {
}
.iframeLinkUrl{
transform: scale(0.32, 0.31) translate(-73%,-99%);
}
As you can see, I also used a div to put in front of the iframe, but even like that it didn't work for IE:
<div style="left: 0px; top: 0px; width: 600px; height: 400px; display: block; visibility: visible; position: absolute; z-index: 9999; background-color: transparent;">
</div>
I'm using the w3 schools sidebar navigation and I've been trying to get a side-nav that opens from one div.
exp:
http://www.w3schools.com/w3css/tryit.aspfilename=tryw3css_sidenav_left_right&stacked=h
(Only the right one though)
Later on I'd like to make this nav sit at the bottom and open upwards. To the problem at hand though. I can't get this sidebar to show above the already existing page. The page consists of a randomly selected flash file. I have a feeling that one of the already existing position attributes is affecting this one or maybe one of the styles that I haven't been able to find.
HTML
<nav class="w3-sidenav w3-white w3-card-2 w3-animate-right" style="display:none;right:0;" id="rightMenu">
<a href="javascript:void(0)" onclick="closeRightMenu()"
class="w3-closenav w3-large">Close ×</a>
<i class="fa fa-home w3-xxlarge"></i>
<i class="fa fa-search w3-xxlarge"></i>
<i class="fa fa-envelope w3-xxlarge"></i>
<i class="fa fa-globe w3-xxlarge"></i>
</nav>
<object id="flash-container">
<embed id="flash-content" src="" type="application/x-shockwave-flash" />
</object>
CSS
html,
body {
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
height: 100%;
background-color: #2e1565;
}
#popup-container {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: transparent;
}
#flash-container {
z-index: 0;
position: absolute;
min-width: 100%;
min-height: 100%;
width: 100% !important;
height: auto !important;
}
#flash-content {
position: absolute;
min-width: 100%;
min-height: 100%;
width: 100% !important;
height: auto !important;
overflow: hidden;
z-index: 1;
background-color: #2e1565;
}
#flash_name {
color: #5c5ce0;
z-index: 20;
position: absolute;
padding-left: 50%;
}
#rightMenu {
position: relative;
z-index: 3;
}
JS
function openRightMenu() {
document.getElementById("rightMenu").style.display = "block";
}
function closeRightMenu() {
document.getElementById("rightMenu").style.display = "none";
}
Remove the display:none from the style attribute of the nav tag and it will show.
Here it is with the display:none removed on jsbin: http://jsbin.com/nubewuragu/edit?html,css,js,output
Above is with section tag and below is withoutI need to have the lightbox inside the section tag. Just not sure as to why this is happening or how to override this. The lightbox is appearing but it will not close and is behind the image. Here is the code:
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="fade" class="black_overlay"></div>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>
Nothing In the CSS indicates that there's an issue there...
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
Thanks.
The console reads:
Uncaught TypeError: Cannot read property 'style' of null
Looking at your code
getElementById(' fade').
^^
Learn to use the developer console so you can find these typos.
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
<section id="XXX">
<div id="light" class="white_content">This is the lightbox content. Close
</div>
<div id="fade" class="black_overlay"></div>
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="Image.jpg" alt="Image" height="256" width="300">
</a>
</section>
I created a range of social media buttons which when the mouse hovers it switches to a different image (giving it a highlight effect). The images work as I want them to, however, I can't seem to figure out how to load the page into a new tab/screen. I need to implement the equivalent of .
Assuming I have to change something in the onClick.... ?
Here is code:
<div id="insidefooter">
<ul>
<li>
<div id="facebook" style="cursor:pointer;" onClick="window.location='https://www.facebook.com';"></div>
</li>
<li>
<div id="youtube" style="cursor:pointer;" onClick="window.location='https://www.youtube.com';"></div>
</li>
<li>
<div id="twitter" style="cursor:pointer;" onClick="window.location='https://twitter.com/';"></div>
</li>
</ul>
</div>
Here is CSS:
#facebook {
height: 40px;
position: relative;
top: 0px;
left: 260px;
width: 40px;
background-image:url(/img/index/footer/facebook-button.jpg);
}
#facebook:hover {
height: 40px;
width: 40px;
background-image:url(/img/index/footer/facebook-button2.jpg);
top: 0;
left: 260px;
width: 40px;
position: relative;
}
#youtube {
height: 40px;
position: relative;
top: -62px;
left: 360px;
width: 40px;
background-image:url(/img/index/footer/youtube-button.jpg);
}
#youtube:hover {
height: 40px;
width: 40px;
background-image:url(/img/index/footer/youtube-button2.jpg);
top: -62px;
left: 360px;
width: 40px;
position: relative;
I left out some CSS code to make it simpler, but here is a demo http://fiddle.jshell.net/3Bsyd/2/
Thank you!
onclick="window.open('http://google.pl', '_blank');"
<div id="facebook" style="cursor:pointer;" onClick="window.open('http://www.google.com','_newtab');">Test</div>
I am trying to position a Twitter follow-button on top of a background splash image using:
<style>
div.splash
{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.twitter-follow-button
{
position: absolute; [Edit: Copy and paste error. This used to read "position: relative"]
top: 0px;
left: 0px;
}
</style>
<div class="splash">
<img src="image_1.png">
<a href="https://..." style="position: absolute; top: 320px; left: 225px;">
<img src="image_2.png">
</a>
Email
Link
<a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
Follow #twitter_handle
</a>
</div>
But I cannot get the Twitter anchor to share space with the splash image. Putting style="..." code in the Twitter anchor tag does not work either, even though it does for the other two anchors, one of which also displays an image.
EDIT:
This is the script Twitter provides for this button:
!function(d,s,id)
{
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id))
{
js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);
}
}
(document, 'script', 'twitter-wjs');
I rearranged your code somewhat. I don't know what your splash image so i have just used one of my own. Here is my latest fiddle
#splash {
position: absolute;
height: 100vh;
width: 100%;
top: 0;
left: 0;
background-image: url("http://www.musicmatters.ie/images/bara2.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.twitter-follow-button {
position: absolute;
top: 0px;
left: 0px;
vertical-align: top;
}
a.links1 {
position: relative;
display: inline-block;
float: left;
top: 258px;
width: auto;
padding-right: 20px;
color: white;
text-decoration: none;
font-weight: 900;
}
a.links {
position: absolute;
display: inline-block;
top: 320px;
float: left;
color: white;
text-decoration: none;
font-weight: 900;
}
<div id="splash">
<a href="twitter_handle" class="twitter-follow-button" data-show-count="false" data-dnt="true">
<img src="http://cdn.business2community.com/wp-content/uploads/2015/07/Twitter-icon.png.png" width="30px" height="30px">Follow twitter_handle
<a class="links" href="#">Home</a>
<a class="links1" href="#">Mailto</a>
<a class="links1" href="#">Other Link</a>
</a>
</div>
Try using a z index like so:
div.splash
{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
z-index: -1;
}