Develop Reference

Cannot scroll to element if position absolute and overflow-x hidden specified

I have animated ng-view. I'm using slideup animation, which requires absolute position of elements and also overflow-x: hidden to clip the content. In one sub-page I have to use scrollTo element functionality, but it doesn't work if both 2 values are specified.
Here is a main ng-view class which is required for correct animations
.wrapper {
position: absolute !important;
left: 0;
top: 0;
height: 100%;
min-height: 100%;
min-width: 100%;
overflow-x: hidden;
}
And structure:
<div class="wrapper ng-view-div">
<nav>
<ul>
<li><a href du-smooth-scroll="section-1" du-scrollspy>Section 1</a></li>
<li><a href du-smooth-scroll="section-2" du-scrollspy>Section 2</a></li>
<li><a href du-smooth-scroll="section-3" du-scrollspy>Section 3</a></li>
</ul>
</nav>
<section id="section-1" style="background-color: red">
C
</section>
<section id="section-2" style="background-color: blue">
C
</section>
<section id="section-3" style="background-color: green">
C
</section>
</div>
I prepared plnkr to easily show how it looks like for now. Is there any other way to achieve scroll working but with this two values ?

Here, height:100% in the wrapper CSS class creates an issue. Please use the wrapper CSS class below.
.wrapper {
position: absolute !important;
left: 0;
top: 0;
min-height: 100%;
min-width: 100%;
overflow-x: hidden;
}

animate out image on click function while overlapping its sibling elements

First time user and in need of help.
I have three li li li elements, each has their own <img> inside it. I would like to animate the individual <img> inside outwards while overlapping other sibling elements (in this expanding effect, the siblings shouldn't be moving,)when the selected element is clicked.
The HTML markup i have:
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg">
</div>
</li>
</ul>
</div>
CSS Markup:
.card {
position: relative;
width: 28%;
height: 100px;
float: left;
margin: 2.5%;
overflow: hidden;
}
.content {
position: absolute;
width: 100%;
height: 100%;
top: -50%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
JS:
$('.card').on('click','.content',function(){
$(this).css({
'position':'fixed',
'z-index':'10'
});
});
I've done different iterations of this code back and forth, but setting the position of the .content to fixed does somewhat close to what i'm trying to do, it overlaps the other siblings... but without any smooth transitions flowing outwards.
Here is a link to the code in codepen: http://codepen.io/broham89/pen/WrJmyB
I very very much appreciate any help on this.

z-index and position are not technically animatable properties, so whatever solution would have to be a little hacky. You can accomplish this by fiddling with CSS classes and jQuery toggle. I changed the code a bit so the primary animation/transition occurs on the parent li rather than the .content element. In order for all three lis to remain in the same position, I changed them to absolutely positioned elements with different :nth-child positioning declarations and gave the ul a position of relative. Currently, it's designed around three elements, but you can play around with the values if you need more (or use JS to determine the math).
The jQuery code here toggles .cardhover class which moves the element to left position of 0 -- the start of the ul container -- to prevent any overflow. And it also adds .cardactive for z-index which makes sure that the element is on top of other elements during the bigger/smaller transitions. (And it removes the class from any other siblings at the beginning.)
https://jsfiddle.net/nn454trm/11/
$('.card').on('click', '.content', function() {
$(this).parent().siblings().removeClass('cardactive');
$(this).parent().addClass('cardactive').toggleClass('cardhover');
});
ul {
position: relative;
}
.card {
position: absolute;
width: 28%;
height: 100px;
transition: 2s;
margin: 2.5%;
overflow: hidden;
}
.card:nth-child(1) {
left: 0;
}
.card:nth-child(2) {
left: 33.3%;
}
.card:nth-child(3) {
left: 66.66%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
left: 0;
transition: all 1s ease-in;
}
img {
width: 100%;
}
.cardhover {
width: 95%;
left: 0% !important;
}
.cardactive {
z-index: 20;
background: blue; //for demo purposes
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<ul>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
<li class="card">
<div class="content">
<img src="some-img.jpg" alt="" />
</div>
</li>
</ul>
</div>

For smooth transitions, don't you want animate instead of css?
http://api.jquery.com/animate/

How to make the dropdown on click not hover

I have code that makes my menu expand when the parent li is hovered over. I want to change it so that it only expands when it is clicked.
My code in CSS is:
.nav li:hover li {
/* Expanding the list elements */
height: 30px;
position: relative;
top: auto;
}
How do I make this happen only when the parent is clicked?
My HTML:
<ul class="nav">
<li class="dropdown" id="dropdownparent">
Categories
<ul id="dropdown">
<li id="dropdown">Sublink</li>
<li id="dropdown">Sublink</li>
<li id="dropdown">Sublink</li>
<li id="dropdown">Sublink</li>
</ul>
</li>
</ul>
Here is the live page I am using to test this... http://portal.electrovision.co.uk/dropdown-test/

A slight css tweak
.nav li.open li {
/* Expanding the list elements */
height: 30px;
position: relative;
top: auto;
}
And some javascript (jQuery)
$('.nav > li.dropdown').on('click', function(e) {
$(this).toggleClass('open');
});

Matching element heights

I have a menu on the left side of a slider. The slider's height is in direct correlation to the size of the image file that it loads. I want the menu's parent element to be at an equal height to the slider at all time.
I tried to code this with CSS and I looked around on here and realized that doing it with CSS is impossible. So, I tried to code it with Java, but it isn't right.
Any help with this would be amazing!
--Update--
This part is an edit. I tried a few of the suggestions, however they are not working. The slider changes height as it responds to the width of the screen. So, when I drag it out, it will change and the menu is left shorter than the slider. If I max-height the slider, the width will not display at 100% of the 60% allowance.
I believe what I need is a snippet of jquery that:
- grabs the nav element
- detects the height of the .Slider
- makes the nav element the same height as the .Slider element.
I have tried the js code below, but it didn't work.
Does anyone know how to do this?
Here is the code:
window.jQuery( function() {
window.jQuery('nav').height(window.jQuery('.Slider').height ())
});
nav {
display: block;
float: left;
width: 40%;
height: 100%;
}
nav ul {
background: lightgreen;
}
nav ul li {
display: inline;
width: 100%;
height: 33.3333%;
margin-left: 0;
}
.Slider {
display: block;
float: right;
width: 60%;
}
<div id="wrapper">
<nav>
<ul>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</nav>
<div class="Slider">
Pics are here.
</div>
</div>

I think you just need a clearfix, or I don't understand the question. Try this:
.theParent:after {
display: block;
clear: both;
content: "";
}

not only this is possible with CSS, there are thousands of ways to do this. This is just one of those:
.wrapper {
background: lightgreen;
position:relative;
width:100%;
height:100%;
padding:0;
}
nav {
display: block;
float: left;
width:40%;
height:100%;
margin:0;
padding:0;
}
nav ul {
margin:0;
padding:0;
height:100%;
}
nav ul li {
display: block;
width: 100%;
}
.Slider {
display: block;
float: right;
width: 60%;
margin:0;
padding:0;
}
.Slider img {
width:100%;
height:auto;
}
.clear {
display:block;
clear:both;
float:none;
}
and some tiny changes in your HTML
<div class="wrapper">
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<div class="Slider">
<img src="http://www.open.edu/openlearn/sites/www.open.edu.openlearn/files/design-nutshell-homepage.jpg" alt="" />
</div>
<div class="clear"></div>
</div>
(pay attention to that .clear div, which is the main reason why you probably had problems)
IN this case, since I notices you used percentages, I also added responsive behaviors.
fiddle to see it in action

You can use a little Jquery to solve this situation.
Just before the tag, you can add:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('nav').css('height','100%');
</script>

GOT IT!!!! So friggin' happy right now!!
var maxHeight = 400;
$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);

Overlap list item with another child element

I have list of items. When hover, the background should highlight gray per item. I also want to be able to hover on "X" to change its background to red.
However, in the code below, when I hover on each line, the item background lays on top of "X" and there is no way to hover on "X".
Code: http://jsfiddle.net/qhoc/7vtZT/2/
HTML:
<ul>
<li>
<a>Long title for Item 1</a>
<i class=icon></i>
</li>
<li>
<a>Item 2</a>
<i class=icon></i>
</li>
<li>
<a>Item 3</a>
<i class=icon></i>
</li>
<li>
<a>Item 4</a>
<i class=icon></i>
</li>
<li>
<a>Item 5</a>
<i class=icon></i>
</li>
</ul>
CSS:
ul {
border: 1px solid green;
overflow: hidden;
padding: 0;
list-style: none;
width: 100px;
}
a {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 20px;
white-space: nowrap;
width: 80px;
}
a:hover {
background: gray;
}
.icon {
display: inline-block;
float: right;
margin-top: -20px;
background: yellow;
}
.icon:before {
content: "X";
}
.icon:hover:before {
background: red;
}
Question: How to change CSS (preferably) to be able to hover on "X" to change its background color & be "clickable" in JS but also have the item's background in that line highlighted gray?
Right now I cannot event hook "click" event in the "X" because it keeps going under the items.
Requirements:
Width for ul is fixed of 100px
"X" must be in the same line of each li a element and stays in ul's width
If text in a is too long, it must go under "X" but not show outside box ul. There is no wrap.
Each li a has hardcoded width with ellipsis to show "..." on long text. This width can be changed.
No Javascript. Hardcoded CSS position is OK but less prefer.

Change the anchor css from inline-block to block also as a recommendation change the width from 100px (which is hardcoded) to 100% our auto to set the same width as the container
fiddle solution

Add position: relative; to all the li and add position: absolute;, right: 0;, top: 0; to .icon
Link to fiddle

May this can help u i think so..
a {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
padding-right: 10px;
white-space: nowrap;
width: 80px;
height:15px;
}