We Keep Coding

Sliding div out with css and jquery without triggering scrollbar?

I've been wrestling with this for way too long.
Problem: I'm trying to make the image slide off of screen when the button is pressed, which I have successfully done, but not adequately. There are two problems:
I don't want to hide overflow on the body to hide the horizontal scroll being triggered when the div moves off the screen.
When I click on the button for a second time, I want the div to slide in from the right back to the original position. I haven't been able to figure this one out. I know I can do it, but creating another css class, but I know there has to be an easier way.
JSFiddle
CSS:
#abs {
position: absolute;
height: 200px;
width: 200px;
background-color: grey;
left: 0;
top:0;
transition: transform 3s;
}
.open {
transform: translateX(1050px);
}
.hide {
display: none;
}
p {
text-align: center;
}
JS:
$('#clickMe').on('click', function(){
$('#abs').toggleClass('open');
if($("#abs").hasClass("open")) {
setTimeout(
function() {
$("#abs").hide();
},
2500);
} else {
$("#abs").show();
}
})

Hi Please refer to the fiddle.https://jsfiddle.net/cdx7zeo2/1/
I modified your code to use jQuery animate.
$('#clickMe').on('click', function(){
var right = parseInt($('#abs').css('left'));
console.log(right);
if(right === 0){
$( "#abs" ).animate({
left:'2500px'
}, 1500);
}else{
$( "#abs" ).animate({
left:'0px'
}, 1500);
}
})
Also modified the id test to have overflow-y hidden, so that you don't need to tough overflow property of body. Note, here we are not using open class anymore.
#test {
position: relative;
height: 500px;
width: 500px;
background-color: black;
overflow-y:hidden;
}

Horizontal slide banner design & functionality

I need to show the vertical banner which will slide out horizontally from the right of the screen once user click the open button/div and should be able to close the same. Base design is show in the sample image below
I have set up fiddle for the same http://codepen.io/anon/pen/oXgePX
<div class="horizontal-slide" id="other-menu"><<</div>
<div class="menu-other slide-right slide-opened" id="other-menu-content">
horizontal on right slide div
</div>
UPDATE:
I managed to do it by wrapping banner & button inside another div.
.wrapper{
float:right;
position:absolute;
right:0;
}
example: http://codepen.io/anon/pen/aOzyxo
still need to improve it so that button also slides with the banner for smooth look

You've to change your css
For example:
/* float */
float:right;
/* absolute position */
position:absolute;
You need it like this:
http://codepen.io/anon/pen/mJyMgW
Or do I missunderstand your Question?

Maybe you wanted something like this. It's a good start I think.
$(function() {
//slideout-menu-toggle
$(".banner-slide").click(function(event) {
var _slideMenu = $("#right-banner");
if (_slideMenu.hasClass("slide-opened")) {
$( "#right-banner" ).animate({ "right": "-190px" }, "slow" );
$( "#hbanner" ).html("<<");
//alert('a')
} else {
$( "#right-banner" ).animate({ "right": "0" }, "slow" );
$( "#hbanner" ).html(">>");
}
_slideMenu.toggleClass("slide-opened");
});
});
#right-banner {
position:absolute;
right:0;
top: 0;
width: 210px;
}
.right-banner {
width: 150px;
height: 200px;
background-color: green;
padding: 20px;
float: right;
background-color: blue;
}
#hbanner {
float: left;
background-color: red;
cursor:pointer;
}
.wrapper {
float: right;
position: absolute;
right: 0;
z-index: 100000;
}
.content {
width: calc(100% - 210px);
background-color: magenta;
height: 200px;
float: left;
text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content">
This is sample text</div>
<div class="wrapper">
<div id="right-banner" class="slide-opened">
<div class="banner-slide" id="hbanner">
>>
</div>
<div class="right-banner" id="hbanner-wrapper">
horizontal on right slide div
</div>
</div>
</div>

You can do it cleaner and simpler using CSS transitions and a simple toggleClass in jQuery:
$('#button').on('click', function(){
$('#banner').toggleClass('unfolded');
});
Demo : http://codepen.io/mbrillaud/pen/NqPvZM

use a JQ toggle class
$('#slider').toggleClass('sliderthing');
that plus CSS to give it looks and stuff should work well

I managed to do it by wrapping the banner & button inside another wrapper.
Here is the updated example : http://codepen.io/anon/pen/aOzyxo
I have added some exact animation so that red button hide/shows immediately upon click event with some smooth animation.
.wrapper{
float:right;
position:absolute;
right:0;
z-index:100000;
}

adding an semi-black transparant overlay in front of a div

I have a div that looks like the following:
<div class="row-fluid product-to-be-categorized" data-id="584472"><img src="http://origincache-prn.fbcdn.net/10311205_575850285866660_368389950_a.jpg"></div>
I wanted such that when the div is clicked then it adds an semi-black-transparant overlay in front of the div, so the picture is covered with this transparant layer in front of it.
I have the following click handler:
$('.product-to-be-categorized').on('click', function(event) {
});
but I am unsure on what is the quickest and simplest way to do this

Simplest way would be to add a class with a pseudo element to the div on the click event.
DEMO
CSS :
.product-to-be-categorized {
position:relative;
width:50%
}
.product-to-be-categorized img {
display:block;
width:100%;
}
.overlay:before {
content:'';
position:absolute;
width:100%;
height:100%;
background: rgba(0, 0, 0, 0.5);
}
jQuery :
$('.product-to-be-categorized').click('click', function (event) {
$(this).addClass('overlay');
});
(if you need to toggle the overlay, just replace ".addClass" by ".toggleClass" in jQuery code)

Firstly, in the click handler you can append a div to the container:
$('.product-to-be-categorized').on('click', function(event) {
$('<div />').addClass('overlay').appendTo(this);
});
Which has the following CSS:
.product-to-be-categorized {
position: relative;
/* other styling... */
}
.overlay {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #000;
opacity: 0.5;
}
Example fiddle
You can also make the overlay togglable by checking for its existance and removing:
$('.product-to-be-categorized').on('click', function(event) {
if ($('.overlay', this).length) {
$('.overlay', this).remove();
}
else {
$('<div />').addClass('overlay').appendTo(this);
}
});
Example fiddle

img is blocking hover function to fire

i need some help with the following:
i have a an image placed in my body which has a hover function
<div id="wrapper">
<img style="position: absolute;" src="img/image.png" name="man" width="150" id="man_1" />
</div>
$("#man_1").hover(function () {
$('#wrapper').append('<img id="hoverimg" src="bla.png">');
console.log("enter mouser");
},function () {
$('#hoverimg').remove();
console.log("leave mouse");
});
as you can see when im hovering the image, it appends another image which has the same top and left values as #man_1. The problem is, that when im leaving the mouse the remove does not fire because the mouse is actually on the new hoverimg
hope you get my point! Thanks

Working FIDDLE Demo
Maybe with another markup, it be easier to to this:
HTML
<div id="wrapper">
<div class="photo">
<div class="image"><img src="http://placekitten.com/200/220" /></div>
<div class="size"><img src="http://placehold.it/200x40" /></div>
</div>
</div>
CSS
.photo {
position: relative;
height: 220px;
overflow: hidden;
width: 200px;
}
.photo .image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.photo .size {
position: absolute;
height: 40px;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
margin-bottom: -40px;
transition: margin-bottom 0.3s;
}
.photo .size.show {
margin-bottom: 0;
}
JS
$(function () {
$('.photo')
.on('mouseenter', function () {
$(this).find('.size').addClass('show');
})
.on('mouseleave', function () {
$(this).find('.size').removeClass('show');
});
});

You have to use the mouseenter and mouseout events
$("#man_1").mouseenter(
function() {
$('#wrapper').append('<img id="hoverimg" src="bla.png">');
console.log("enter mouser");
});
$('#hoverimg').mouseout(
function() {
$('#hoverimg').remove();
console.log("leave mouse");
}
);

What if you bind the hover event to the #wrapper instead?
That works, in this FIDDLE.

Please have a look at http://jsfiddle.net/2dJAN/43/
<div class="out overout">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSuTs4RdrlAhxd-qgbGe9r0MGB9BgwFrHDvfr9vORTBEjIYnSQ8hg" />
</div>
$("div.overout").mouseover(function() {
$(this).append("<img src='http://files.softicons.com/download/system-icons/apple-logo-icons-by-thvg/png/512/Apple%20logo%20icon%20-%20Classic.png' id='hovering'/>")
}).mouseout(function(){
$('#hovering').remove();
});
I used mouseover and mouseout instead of hover.
I understood as you want to show both images on mouseover and remove the added image on mouseout. Is that correct or not?

JQuery Animation

It's simple slide up animation. The problem is when I change "top" parameter of myDiv class, animation is working incorrectly, instead of sliding up, it slides down from top. It only works incorrectly when I click button for the first time. When I change myDiv's top parameter to a bigger number there is no more problem. Can you please help me to find what is wrong with the code.
<style>
.box {
position:relative;
width: 200px;
height: 500px;
}
.myDiv {
position: absolute;
width:100%;
overflow: hidden;
bottom:0px;
top:10px;
left:500;
}
</style>
<script>
var swt = 0;
$(document).ready(function () {
$(".b1").click(function () {
var div = $(".myDiv");
if (swt == 0) {
div.animate({
top: '300px',
opacity: '1'
}, "slow");
// div.animate({height:'300px', opacity:'1'},"slow");
swt++;
} else {
div.animate({
top: '500px',
opacity: '1'
}, "slow");
// div.animate({height:'0px', opacity:'1'},"slow");
swt--;
}
});
});
</script>
</head>
<body>
<button class="b1">Start Animation</button>
<p>posds</p>
<div class="box">
<div class="myDiv" style="background:#7549B1; width:200px;"></div>
</div>
</body>
</html>

I'm not really sure whay effect do you want, but maybe it's changing the bottom value instead of top:
if(swt==0){
div.animate({bottom:'500px', opacity:'1'}, "slow");
swt++;
} else {
div.animate({bottom:'300px', opacity:'1'}, "slow");
swt--;
}
http://jsbin.com/ixigaf/1/edit

Do not use bottom and top on a same element, it will create a conflict. Define height and animte top with negative value:
Here is jsFiddle.
if(swt==0){
div.animate({top:'-300px', opacity:'1'}, "slow");
swt++;
}else{
div.animate({top:'-500px', opacity:'1'}, "slow");
swt--;
}

http://jsfiddle.net/Cyberek/yLBeK/
This is as I understand buggy, but if You change in css top from 10px to 100px (same as top in js) everything should be ok.
.myDiv {
position: absolute;
width:100px;
height: 100px;
overflow: hidden;
top:100px;
left:100px;
background: red;
}
$(".b1").click(function () {
var div = $(".myDiv");
if (swt == 0) {
div.animate({
top: '100px',
opacity: '1'
}, "slow");
// div.animate({height:'300px', opacity:'1'},"slow");
swt++;
} else {
div.animate({
top: '200px',
opacity: '1'
}, "slow");
// div.animate({height:'0px', opacity:'1'},"slow");
swt--;
}
});