Positioning a CSS button to the top-right in a fieldset - javascript

.bot {
background-color: sky-blue;
position: absolute;
line-height: 22px;
width: 78px;
margin-top: 25px;
margin-right: 35px;
top: 0px;
right: 0px;
}
How do I position my clickable button to remain at the top-right inside a <fieldset>? With this my code, the button hangs outside the <fieldset>.

Try making fieldset as position relative like this below
fieldset {
position:relative;
}

Related

Slide out menu bar with click not working

Exhausted in trying to figure out what is wrong. I can't seem to get my menu box to slide out.
https://jsfiddle.net/87cd9341/5/
My sliding menu box does not slide out when I click on the "nav-toggle".
Not sure if z-index has anything to do with it because I'm using it to cover some elements, but it shouldn't right?
I just added the main elements of the code...when you click the black tab, the blue box is suppose to shoot out right?
When I I manually add "open" into class for the "nav-side" into the html or input 0% into the transform section of the "nav-side" into the css, this is what I want to happen after I click the "nav-toggle' with jquery/javascript.
<div class="nav-side">
</div>
<div class="tab-container">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/script.js"></script>
.plageholder-container {
display: block;
width: 29.064039%;
min-width: 121px;
max-width: 121px;
margin-left: 2.955665%;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
overflow: hidden;
background: #ffffff;
z-index:2;
}
.nav-side {
display: inline-block;
width: 29.064039%;
height:121px;
border-width:3px;
min-width: 295px;
max-width: 500px;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
overflow: hidden;
background-color:blue;
z-index:1;
margin-left: 2.955665%;
padding-left: 120px;
transform:translateX(-100%);
transition: transform .06s ease;
}
.nav-side.open {
transform:translateX(0);
}
.tab-container{
display: inline-block;
width: 29.064039%;
height:121px;
border-width:3px;
min-width: 25px;
max-width: 25px;
position: fixed;
bottom: 2.955665%;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 126px;
padding-right: 0px;
overflow: hidden;
background-color:#ffffcc;
z-index:0;
margin-left: 2.955665%;
}
.nav-toggle{
position: relative;
position: relative;
display: inline-block;
top: 3px;
width:25px;
height:121px;
background-image: url(../Buttons/Button-About_Slider_Letter.svg);
}
$(".nav-toggle").on("click", function(){
$("nav-side").toggleClass("open");
});
});
Theoretically, if my research is correct I think class="nav-side" is suppose to change to class="nav-side open"
when I click the "nav-toggle" link ????????
The problem is probably either the position or z-index. Please provide a jsfiddle.
Missing a dot . in $("nav-side")
$(".nav-side").toggleClass("open");

Positioning a div at specific fixed place irrespective of zoom and scroll

I have a header with fixed position and inside header I have navigation links but when I zoom into browser links are thrown out of window to right. How can I make the navigation links fixed to 50px right no matter I zoom in or out.
jsfiddle here I don't want to change properties of header.
.header {
width: 100%;
min-width: 500px;
position: fixed;
background: red;
height: 60px;
}
.navlinks {
float: right;
margin-right: 50px;
width: 30px;
margin-top: 4px;
height: 20px;
background: black;
}
<div class="header">hello
<div class='navlinks'></div>
</div>
You've already set the fixed position header to width:100% so the min-width:500px is unnecessary.
Remove that and the issue is solved.
.header {
width: 100%;
position: fixed;
background: red;
height: 60px;
}
.navlinks {
float: right;
margin-right: 50px;
width: 30px;
margin-top: 4px;
height: 20px;
background: black;
}
<div class="header">hello
<div class='navlinks'></div>
</div>
JSfiddle Demo

Hovering over two DIVs

I have a div (headline) and another div (button) that appears when you hover over the headline. When you leave the headline, the button should disappear.
In my current code the button disappears when you move your cursor to it. Do you have any ideas how to keep the button displayed when you hover over headline or button, so that the button is clickable?
Thanks.
fiddle: http://jsfiddle.net/L6jtotog/
CSS:
.headline {
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding: 5px;
width: 70%;
position: relative;
}
#button{
display: none;
position: absolute;
top: 5px;
right: 100%;
margin-right: 10px;
}
HTML:
<div>
<div class="headline" onmouseover="func(true)" onmouseout="func(false)">Headline 1 <div id="button">Test</div></div>
JS:
function func(showPanel) {
if(showPanel) {
$("#button").show();
}
else {
$("#button").hide();
}
}
Instead of using something like that, you can do everything with CSS alone!
.headline {
background-color: grey;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
padding: 5px;
width: 70%;
position: relative;
}
#button{
display: none;
position: absolute;
top: 5px;
left: -50px;
margin-right: 10px;
padding-right: 50px;
}
.headline:hover #button {
display: block;
}
<div>
<div class="headline">
Headline 1
<div id="button">Test</div>
</div>
</div>
And in your case, when you need to go to Test, it calls the mouseout which cancels the hover. So I gave an extra padding. Now you can go over the text.
When you set the position attribute of #button to absolute, position:absolute;
it makes the browser think that #button is outside of the div .headline
That is why when the mouse cursor reaches over #button, the browser actually thinks it is outside the .headline and thus, invokes the onmouseout function.
This is why you are getting this problem.
You might want to remove position:absolute from #button and use position:relative.

mootools and iframem, show div at top right corner

I have iframe popup for image, and close button within that iframe. I want that close button at top corner of iframe with some portion outside of iframe. How can I apply it?
Create CSS Class for that and apply it on input button as bellow.
<input type="image" id="DemoID" class="closeBut" src="../App_Themes/NewTheme/facebox/GrayClose.png" style="border-width:0px;">
CSS Class as bellow
.closeBut{
font-size: 12px;
color: #777;
position: absolute;
display: block;
top: -8px;
right: -8px;
width: 20px;
height: 20px;
text-indent: -9999em;
background: url(../App_Themes/NewTheme/facebox/GrayClose.png) no-repeat;
outline: 0;
z-index: 1000;
}

Centring a div horizontally inside another div with absolute position state

I am trying to centre a div horizontally inside another div. The div that I am trying to centre is a scroll-down button that uses jQuery and has a custom icon font made by me and default width/height. I want to centre this div inside my main div and keep the original size as I want to keep using it as a button. For example:
I want to make something like the white arrow that is pointing down in the centre but without messing with my width.
This is my code:
HTML
<div id="intro-tab"> <!-- First/Intro Tab -->
<div id="introtab-godownbtn">Q</div>
</div>
CSS
#intro-tab {
width: auto;
height: 100%;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
font-family: iconFont;
font-size: 50px;
position: absolute;
bottom: 25px;
width: 60px;
height: 30px;
left: 50%;
margin-left: 30px;
background-color: #FFF;
}
#introtab-godownbtn:hover {
cursor: pointer;
}
jQuery
$('#introtab-godownbtn').click(function(){
$("html, body").animate({
scrollTop: (screen.height - 90)
}, 600);
return false;
});
I have tried many ways to centre the button introtab-godownbtn but it doesn't work or it just messes up my buttons size and clicking location. Any solution to my problem?
From what I understand, you're trying to horizontally center an HTML element. Generally, one would use the margin: 0 auto; approach where a fixed width is set on the element it's being applied to. Here's an example of such: http://jsfiddle.net/5XTq2/
Can you provide a mockup/screenshot of the layout you're trying to achieve, if this answer doesn't help? I can happily update the answer to accommodate your need.
EDIT:
As per your Spotify example, if you inspect the page and select the down arrow, it will have the follow styles.
.scroller-arrow {
width: 60px;
height: 60px;
background-image: url(../i/_global/arrow-big.png);
cursor: pointer;
display: block;
margin: 0 auto;
position: relative;
-webkit-tap-highlight-color: transparent;
}
To get the inner absolutely positioned div to be horizontally and vertically centered:
http://jsfiddle.net/7P4n5/
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
HTML:
<div id="intro-tab">
<div id="introtab-godownbtn">Q</div>
</div>
CSS:
body { margin: 0; }
#intro-tab {
width: 100%;
height: 100%;
position: absolute;
background-color: red;
box-shadow: 0px 1px 3px #000;
}
#introtab-godownbtn {
background-color: #FFF;
font-family: iconFont;
font-size: 20px;
width: 60px;
/* this does the centering */
height: 30px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#introtab-godownbtn:hover { cursor: pointer; }

Categories