Develop Reference

Changing display of elements in hover of another element does not work as it should

I want to change the display of the elements with the .slide-prev and .slide-next classes. As I'm using a slide plugin, it automatically creates the navigation elements outside the ul, so the only way the display change worked was with javascript. The problem is that it did not work as it should.
When I move the mouse over the div with the class .intro-noticias the elements appear, and when I leave they disappear, so far so good. The problem is when I hover over the elements .slide-prev and .slide-next, they are shaking, disappearing depending on where the arrow is and do not activate the hover.
It may be that I let something simple go by, but I really have not found it, if anyone knows what's causing it, I appreciate it.
Video demonstrating the problem
$(".intro-noticias").hover(function() {
$('.slide-prev,.slide-next').css("display", "block");
}, function() {
$('.slide-prev,.slide-next').css("display", "none");
});
.intro-noticias {
width: 100%;
height: 85vh;
margin-top: 70px;
}
.slide-prev {
z-index: 20;
position: absolute;
top: 70px;
left: 0;
text-indent: -9999px;
height: 40px;
width: 40px;
border: solid 1px #fff;
background: rgba(0,0,0,0.5);
display: none;
}
.slide-prev:after {
content:"icon";
width: 20px;
height: 20px;
position: absolute;
bottom: 9.5px;
left: 2px;
display: block;
background: url("img/icones/previous.png") left center no-repeat;
}
.slide-prev:hover {
background: red;
transition: all 0.2s ease-in;
}
.slide-next {
z-index: 20;
position: absolute;
top: 70px;
left: 40px;
text-indent: -9999px;
height: 40px;
width: 40px;
border: solid 1px #fff;
background: rgba(0,0,0,0.5);
display: none;
}
.slide-next:after {
content:"icon";
width: 20px;
height: 20px;
position: absolute;
bottom: 9.5px;
right: 2px;
display: block;
background: url("img/icones/next.png") right center no-repeat;
}
.slide-next:hover {
background: red;
transition: all 0.2s ease-in;
}
<ul>
<li>
<div class="intro-noticias">
<div>
<h2></h2>
</div>
</div>
</li>
</ul>
Previous
Next

You can wrap ul and anchors into the <div class="cont"> and bind events mouseenter and mouseleave to this div.
<div class="cont">
<ul>
<li>
<div class="intro-noticias">
<div>
<h2></h2>
</div>
</div>
</li>
</ul>
Previous
Next
</div>
$(".cont").mouseenter(function() {
$('.slide-prev,.slide-next').css("display", "block");
});
$(".cont").mouseleave(function() {
$('.slide-prev,.slide-next').css("display", "none");
});

Css transform animation from right to left

I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE

Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.

Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});

Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});

Absolute position of button centered but now full width

I have fixed this issue before on a previous project but have totally forgotten how i resolved it so thought I would see if anyone knows of the top of their heads :)
I absolute position a button at the bottom of a container, and use left: 0 and right: 0 to center the button but then it makes it full width any ideas how to prevent this?
fiddle mockup: http://jsfiddle.net/1t6Ljkjg/
ul li img {
width: 500px;
}
.ty-subcategories__item {
position: relative;
margin: 0;
display: inline-block;
width: 49%;
}
.ty-subcategories__item .logo-box {
width: 58%;
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
text-align: center;
}
.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
font-size: 0.7rem;
border: 2px solid #fff;
color: #fff;
text-transform: uppercase;
background: #f14fa1;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
}
<ul>
<li class="ty-subcategories__item">
<a href="http://2015.ambientlounge.com/interior/gold-class-bean-bags/butterfly-sofa-bean-bags/" class="ty-subcategories-block__a">
<img class="ty-pict ty-subcategories-img " src="http://2015.ambientlounge.com/images/detailed/3/category-panel-butterfly.jpg?t=1437997789" alt="left" title="left">
<div class="logo-box left"><span class="ty-btn ty-btn__primary">Shop Now</span>
</div>
</a>
</li>
</ul>

Rather than using left:0 and right:0, you could consider using a CSS transform to center your button. For example, your declaration block might turn into:
.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
font-size: 0.7rem;
border: 2px solid #fff;
color: #fff;
text-transform: uppercase;
background: #f14fa1;
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
}
Here's an updated JSFiddle. Hope this helps! Let me know if you have any questions.
EDIT: Though, if you were hoping to get it centered in the black box (and not just the button's parent element), you'll need to update the width of the parent to something like:
.ty-subcategories__item .logo-box {
width: 161px;
}
(I assumed the black box is square.) Here's a new JSFiddle.
EDIT 2: To make the centering work responsively, we can do a little math: Assuming the black box is square, and the image width/height ratio are always the same, we can then calculate the percentage of the width of the image the box takes, with:
520 (height of image) / 1610 (width of image) * 100% = 32.3%
So this is the width needed for the parent of the button. To avoid text breaking to multiple lines in the button, you can specify the white-space property. So your CSS could become:
ul li img {
width: 100%;
height: 100%;
}
.ty-subcategories__item {
position: relative;
margin: 0;
display: inline-block;
width: 100%;
}
.ty-subcategories__item .logo-box {
width: 32.3%;
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
text-align: center;
}
.ty-subcategories__item .logo-box.left .ty-btn,
.ty-subcategories__item .logo-box.right .ty-btn {
font-size: 0.7rem;
border: 2px solid #fff;
color: #fff;
text-transform: uppercase;
background: #f14fa1;
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
white-space: nowrap;
}
Here's another updated JSFiddle. Let me know if this helps!

Smart Sticky Navigation Menu

I'm having a small problem with some text jumping around in my sticky menu. This is my code: http://jsfiddle.net/u6ywraj8/
As you can see, I want the red #menu to stick to the top when a user scrolls down. However, the text in the top left part of the menu jumps around. I want this text to always be in the top left part of the red menu, I don't want it to have the initial ~100px padding.
Thank you for your help!

Try this one
sticknav {
background: none repeat scroll 0 0 #ffffff;
display: inline-block;
height: 30px;
left: 0;
margin-left: 0;
margin-right: 0;
position: relative;
right: 0;
width: 100%;
z-index: 9999;
}

Add float: left; to this class sticknav{}
sticknav {
background: #ffffff;
height: 30px;
width: 100%;
margin-right: 0px;
margin-left: 0px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
float: left;
}

Horizontally slide out content with JQuery on click, click again to close?

I can't seem to quite find what I need. Without trying too hard to explain it, I basically need the "Connect" social media bar in the top right of this website - http://www.cmssquirrel.com/web_works/
I won't be using it for that purpose exactly, but it works exactly like I need my function to do. Everything I found seems to be a vertical menu style thing. I need to horizontally expand content on click and hide it again on click once more. Not quite sure where to begin?

Here's more of a starting point than a polished solution, but it should get you going in the right direction.
DEMO
HTML
<div class="wrap">
<a class="open" href="#">open</a>
<div class="outer">
<div class="slide">
One
a
uaoeua
aoeue
aaoeeo
</div>
</div>
</div>
jQuery
var w = 0;
$('.slide').children().each(function() {
w += $(this).outerWidth();
});
$('.outer').width(w+5);
$('.wrap').width(w);
$('.slide').css('left', w);
$('.open').toggle(function() {
$('.slide').stop().animate({
left: 0
});
$(this).html('close');
}, function() {
$('.slide').stop().animate({
left: w
});
$(this).html('open');
});
CSS
.wrap {
position: relative;
left: 50px;
top: 20px;
}
.outer {
height: 40px;
position: relative;
overflow: hidden;
}
.slide {
border-radius: 19px 19px 19px 19px;
position: absolute;
top: 0;
right: 0;
background-color: black;
height: 40px;
}
a {
color: gray;
line-height: 35px;
float: left;
outline: none;
}
.slide a {
float: left;
display: block;
padding: 0 10px;
}
.slide > :first-child {
padding-left: 15px;
}
.slide > :last-child {
padding-right: 45px;
}
.open {
position: absolute;
right: -25px;
top: 0;
background-color: black;
border-radius: 19px 19px 19px 19px;
height: 40px;
padding: 0 15px;
z-index: 5;
}

You can extend jQuery's animation functionality to achieve this.
See a demo of this at:
http://dock.ronggur.com/tutorial/jquery%20tutorial%20-%20horizontal%20animated%20menu/
which is outlined at:
http://sandbox.ronggur.com/2009/01/25/jquery-tutorial-horizontal-animated-menu/
Essentially, you could just substitute the hover event in that demo, and use a click event.