I'm trying to give a button slide in effect just for a mock up using bootstrap lists and overlays. I want to make it look like the button is coming in from the right. Here is the code for what Im trying to do. I'm trying give the li element a positive relative and z-index so it is "above" the .pull-right div.
Any idea what I could do for this to work? The button labeled Test should look like it is coming in from the right, therefore half the text should be visible and half should be not.
As per my understanding I think you might have to hide the overflow of the li
So, I added a class to your html structure
<ul class="list-group">
<li class="list-group-item pos-rel overflow-x-fix">
<p class="inline-block">Test</p>
<div class="pull-right pos-abs">
<button>Text</button>
<button>Test</button>
</div>
</li>
</ul>
And changed the CSS like this
inline-block{
display: inline-block;
}
.pos-rel{
position: relative;
z-index: 999;
}
.pos-abs{
position: absolute;
right: -2%;
top: 20%;
z-index: 1;
}
.overflow-x-fix {overflow-x: hidden;}
Here is the example
Related
What i'm trying to achieve
example of the closed version /
example of the opened version
At the top of the page in a 'fixed' header, i have a 'search' button next to a 'toggle' for the main menu. The header-search div (magnifying glass) is positioned next to the menu toggler (green). A form is currently positioned 'absolute' within the header to take up the full width of the header minus the padding on each side and its controls (search and toggler) as follows:
styles from header
.header {
top: 0;
left: 0;
width: 100%;
position: fixed;
background-color: var(--color-primary-700);
}
styles from header__aux
.header__aux {
display: flex;
column-gap: 1rem;
flex-flow: nowrap row;
}
.header-search {
display: block;
position: static;
}
.header-search__form {
top: 1.5rem;
height: 4rem;
overflow: hidden;
position: absolute;
left: var(--g-gutter);
width: calc(100% - (7rem + (var(--g-gutter)*2)));
}
.header-search__form-label {
top: -99.9rem;
left: -99.9rem;
color: inherit;
position: absolute;
}
.header-search__form.is-active
.header-search__form-input {
transform: translateX(0%);
}
.header-search__form-input {
width: 100%;
height: 4rem;
padding: 0 1.2em;
transform: translateX(100%);
border: .2rem solid #8097b3;
border-top-left-radius: 2rem;
border-bottom-left-radius: 2rem;
transition: transform 1s ease-in-out
background-color: var(--color-primary-700);
}
A input field inside this form is given 100% width and then using transform: translateX(100%) pushed completely to the right outside the overflow of the form (which retains it's width as set above). When a user presses the 'search' button a class is-active sets this transform: translateX(100%) to 0 and the input field should slide (from the right) to it's original position 100% of the width as seen in this image.
What this looks like in HTML
<header class="header section">
<div class="header__container container">
<a class="header__brand" href="#" aria-label="x">
<!-- svg brand -->
</a>
<div class="header__navs" id="headerNavs">
<div class="header__mask">
<ul id="headerMenu" class="header-menu">
</ul> <div class="header__langs header-langs">
Language
</div>
</div>
</div>
<div class="header__aux">
<div class="header__search header-search">
<button aria-label="Open of sluit het invoerveld voor een zoekopdracht" class="header-search__toggle" id="headerSearchToggle" aria-pressed="false" role="button" tabindex="0">
<i id="headerSearchIcon" class="far fa-search"></i>
</button>
<form class="header-search__form" action="/" id="headerSearchForm" role="search" method="get">
<label class="header-search__form-label" for="headerSearchInput">Zoeken</label>
<div class="header-search__form-slide">
<input placeholder="Zoeken …" required="" class="header-search__form-input" id="headerSearchInput" minlength="2" type="search" value="" name="s">
</div>
</form>
</div>
<a aria-label="" class="header__toggle header-toggle" aria-controls="headerNavs" aria-expanded="false" id="headerToggle" href="#">
Toggle
</a>
</div>
</div>
</header>
The problem
When opening the 'search' the input immediately jumps to the end of the animation which is seen in the example of the opened version (top) and then continues moving left, constantly correcting it's position back to what is seen in the image causing a weird 'flickering' effect usually in this position. Sliding the input 'back' to the right works perfectly.. What's even weirder is that it sometimes does work correctly for a few attempts once i've been on the page for a while. Then suddenly it breaks again.
What i've tried
Different types of browsers, including checking it on my own mobile device (not in the dev tools)
Giving the input the same fixed width as the parent
Removing a translateY on the parent and reverting to 'top' top position it in the vertical center
Adding 1 or multiple parents to the input to force it to inherit that width
As mentioned in a comment, adding transform:translateZ(0.1px); to force rendering using the GPU
What works, but i can't explain
Removing the overflow on the parent form element works and allows the animation to play smoothly, but that shows the input behind the element as seen in this image
I can think of some ways to make this look better, but i just really want to know what i'm missing. I believe i've done these types of simple animations 1000s of times now. A parent with overflow, hiding a child that's translated over.. or perhaps i'm mistaken. Hopefully someone can make sense of this - many thanks if you've taken the time to do so :)
I have a scenario in which I have a team page with pictures and some blurb. Under each picture I have social media links much like the following:
These are images that sit within a horizontal list underneath each item using the below base markup.
<ul>
<li>
<a><img src=""/></a>
</li>
<li>
<a><img src=""/></a>
</li>
</ul>
At the moment these are images but I would very much like if when hovered the grey inards of these images turned blue.
I was thinking just have a span with a background image like this:
<a><span class="linkedin"></span></a>
.linkedin{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture)
}
.linkedin:hover{
height:28px;
width:auto;
background-image:url(link/to/the/linkedin/picture-blue-version)
}
However, when I attempted this the space was empty instead of taking the size of the image.
If I enter as content I get a small part of the background image, furthermore giving the class an absolute position takes it out of document flos
Is this the ideal approach?
The problem is if you use a <span> element you need to set it to display: inline-block and you need to set a width for the image to show up. Then it works, here is a demo:
.linkedin {
display: inline-block;
width: 140px;
height:100px;
background-image:url(http://ipsumimage.appspot.com/140x100,ff7700)
}
.linkedin:hover {
background-image:url(http://ipsumimage.appspot.com/140x100,0000FF)
}
<span class="linkedin"></span>
As you see on the first :hover it flickers. Cause it will not load the image bevore you :hover the first time. This is why you should consider another solution. Like mentioned in some comments you could use http://fontawesome.io/icons/ and then just change the color.
To prevent flickering you could do the same with using <img> tags then the source will be loaded and ready to be shown on :hover. But it works best with also setting positions, demo like so:
a.special {
position: relative;
}
a.special img {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
a.special img:first-child {
visibility: visible;
}
a.special:hover img:first-child {
visibility: hidden;
}
a.special:hover img:last-child {
visibility: visible;
}
<a class="special" href="#">
<img src="http://ipsumimage.appspot.com/140x100,ff7700">
<img src="http://ipsumimage.appspot.com/140x100,0000FF">
</a>
Best approach for this is to use SVG's and change the fill of the SVG on hover.
Your approach should work however, it might be that you've not got the correct size image? try 'background-size: cover;' Or that the element has no width. Try setting a width on the span too. (don't forget to give it 'display: inline-block;' too.
Ed: checkout https://css-tricks.com/lodge/svg/
Font-Awesome is a great idea for what you're trying to achieve. Takes less data to load the page too if you can get away with using text in place of images.
By the way, when using the :hover property there is no need to redefine the width and height of the image... Just redefine the changes you'd like to make.
Please check this image
I want when clicking on the + sign inside the red circle, to make a div shows. this div have many check box.
I made the div already. but I didn't know what is its style to be above the text and above the white space in the image
I am sorry if i couldn't understand my mean.
<h3>html</h3>
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<%-- Start Dropdown Code --%>
<a id="DropdownSeviceLink" href="#">+</a>
<script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
<%-- End Dropdown Code --%>
</div>
<div id="line-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
<canvas class="overlay" width="479" height="265"></canvas>
</div>
the div is id = div1 ,which I didn't show its content because that doesn't matter for the answer, but I dont know where to put it.
I would like to have the div like this
kindly help
If you need to make "glued" child, you have to define relative position to the parent, absolute position and z-index to child(ren).
#div1 {
position: absolute;
top: 32px;
right: 0;
}
jsfiddle
You'll need to use two main CSS properties. position: absolute to place it up there and z-index to place it 'above' other items visually. In order for position: absolute to work, you'll also need to set a parent to position: relative.
The dropdown is there by default but hidden. When the + is clicked, a class is toggled on the menu to show/hide it.
The main bits:
HTML:
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<a id="DropdownSeviceLink" href="#">+</a>
<div class="menu">
lkj sldkj sldkj slkdj slkdj
</div>
</div>
CSS:
.menu {
display: none;
position: absolute;
top: 10px;
right: 10px;
z-index: 100;
}
.menu.shown{
display: block;
}
.chartHeaderClass {
position: relative;
}
JS:
$('#DropdownSeviceLink').on('click', function(){
$(this).parents('.chartHeaderClass').find('.menu').toggleClass('shown');
return false;
});
Here's an ugly codepen to get you on the way. http://codepen.io/anon/pen/poqjK
I am trying to generate a menu like the following:
There are several items in the menu and the active one has an arrow after it.
The menu items are tags like the following code:
<div class="menuCenter">
<div class="linksWrapper">
Home
<a class="menuCenterLinkLeft" href="#">Plans & Pricing</a>
<a class="menuCenterLinkLeft" href="#">Sign In</a>
<a class="menuCenterLinkLeft active" href="#">Sign Up</a>
<a class="menuCenterLinkLeft" href="#">Contact</a>
</div>
</div>
I tryied two options:
1- Absolutely positioning the arrow image with javascript. I have problems when resizing the page.
2- Using the :after pseudo element, like this:
.linksWrapper a.active:after
{
content: url("images/arrowImg.png");
position: relative;
left: -40px;
top: 30px;
}
The problem with this approach was the horizontal alignment of the arrow. It should be below the center of the link and I could not achive that.
I can use HTML5 or CSS 3.
Any help?
Try this:
.linksWrapper a.active:after {
content: url("images/arrowImg.png");
position: absolute;
left: 50%;
top: 30px;
margin-left: - <width-of-your-image> / 2; /* negative number!*/
}
sidenote: I avoid putting { on a newline, since it may have nasty effects in javascript.
The trick is left:50%; combined with correcting the position by setting it back half width via margin-left.
See example.
The absolute positioning approach should work, you need to put the arrow inside of another div that has position:relative defined, so that the absolute coordinates are relative to this parent div, instead of being relative to the body element.
However, I would go with this approach instead:
Make the arrow a part of the background image of the actual a.active items - this way it will center with background-position and you don't need any scripting!
I put this together really quick..
http://jsfiddle.net/8Sqwq/1/
Because I wasn't too sure how flexible your code could be, this is the best I could come up with.
Which ever href has the classname of .active will inherit the arrow
// I updated the fiddle to show it in action.
Looking at the CSS specification of the W3C and observing the rendering of my own solution I have come to only one conclusion:
If I have dialog window (absolutely positioned) with an input field (relative) in it and usual autocompleter script (usual includes ul list beyond input (absolutely pos.)) - I can't make a dropdown list of autocomplete values visible normally and place it over buttons and borders of parent dialog window?
It’s make me feel bad.
Can any one debunk this regrettable result?
Sorry for my English.
upd2:
<div id="modal-window" style="display: block; position: absolute; z-index: 9000; visibility: visible; opacity: 1; left: 530px; top: -58px;">
<div id="modal-window-body">
<input id="city" name="city" />
<ul class="autocompleter-choices" style="position:absolute; z-index: 19999; visibility: visible; opacity: 1; left: 8px; top: 406px; width: 126px; overflow-y: scroll; height: 189px;">
<li class="autocompleter-selected">
<span class="autocompleter-queried">
N
</span>
amibia
</li>
</ul>
<div id="modal-window-buttons">
<span class="button">
ok
</span>
<span class="button">
cancel
</span>
</div>
</div>
</div>
result:
Принимаю ответы на русском языке так же. Очень неприятная загвоздка вышла. Надо решить.
z-index can only be given to positioned elements. Your ul class="autocompleter-choices" seems not to be positioned (if it's true that you're only using inline styles in this doc). Try to position it absolute or relative.
My only guess, based on the minimal information given, is that #modal-window-body has a specified height and overflow:hidden. This explains why it never fully shows and the biggest part of your problem. However, it doesn't explain why it falls under the buttons. Again, my guess is #modal-window-buttons is position: absolute; bottom:0; z-index: higher-that-yours.
I would expand your question to include more information than the inline styles applied during javascript manipulation. Only knowing the current state of the css can we assist further.