We Keep Coding

Slide left and hide effect using jquery or CSS

I am working on a slide menu,
Please have a look at the demo site:
kotechweb.com/new_focus/
At left side there is a main menu , when toggle , the words right now is squeeze and hide, here is how I implement:
var is_closed = false;
$("#menu_btn").on("click", function () {
if (is_closed) {
$(".nav_bar ul").css("width", "75%");
} else {
$(".nav_bar ul").css("width", "0");
}
is_closed = !is_closed;
});
CSS:
transition: all 1s;
So the logic is using transition to implement the slide animation, however, this approach the text is squeeze when the width is smaller.
How to make the text slide left as well?

You can create a "mask" using
#menu_right{
overflow:hidden;
...
}
and move your menu in this way:
var is_closed = false;
$("#menu_btn").on("click", function () {
if (is_closed) {
$(".nav_bar ul").css("margin-left", "-100%");
} else {
$(".nav_bar ul").css("margin-left", "-0%");
}
is_closed = !is_closed;
});
I think this works like espected

First of all, instead of using CSS transitions use animate in JQuery as it allows for more functionality.
What I actually do for my slide menus is adding overflow-x: hidden to my body tag. I then position the menu outside of the page, so I give it the CSS value of right: 0 to position it just outside the left hand side of the page.
What this allows me to do is that when the user clicks the menu button you can animate the menu to slide out by simply changing the right value, so your final code would look something like this
$("#menu_btn").on("click", function () {
if (is_closed) {
$("#slideoutMenu").animate({right:"[insert width of nav menu]"}, 1000);
} else {
$("#slideoutMenu").animate({right:"0"}, 1000);
}
is_closed = !is_closed;
});

Use just jquery and jquery ui : Here
At the top reference the bellowed code.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
And at script only add this :
$(".nav_bar ul").toggle( "slide");
Or also can use with customized time delay ms unit.
$( ".nav_bar ul" ).toggle( "slide",2000 );

Maybe you should .hide() the text when the sidebar collapses. Hope this helps.

Creating a toggle on click

I am trying in jQuery to click a link and the content within it then comes in to 0px from the right of the screen. Then when you click it again, It closes, a kind toggle effect.
My current jQuery is:
$('.bet-slip-outer').click(function() {
// Responsive Stuff...
var windowwidth = $(window).width();
$('.bet-slip').animate({
'right': '-240px'
});
}, function() {
$('.bet-slip').animate({
'right': '0px'
});
});
However when I click the .bet-slip the right:-240 just seems to take precedence.
What am I doing wrong?
Cheers

with conditional:
define right style.
<div class="bet-slip" style="right:0px;"></div>
jquery
$('button').click(function() {
if($('.bet-slip').css('right') === '0px' ){
$('.bet-slip').animate({'right':'-240px'});
} else {
$('.bet-slip').animate({'right':'0px'});
}
});
other
only style:
$('button').click(function(){
$('div').toggleClass('right');
});
div{
position:relative;
width:100px;
height:10px;
background:green;
right:-100px;
transition:1s;
}
.right{
right:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>
<button>
f
</button>

Use a variable to check if the element has been clicked yet.
toggle = "on";
$('.bet-slip-outer').click(function() {
// Responsive Stuff...
var windowwidth = $(window).width();
if(toggle == "on"){
$('.bet-slip').animate({
'right': '0px'
});
toggle = "off";
}else{
$('.bet-slip').animate({
'right': '-240px'
});
}
});

According to the official documentation, the .click() method only accepts a single handler. You cannot declare two different handlers for that purpose. There are two solutions to that — one is to delegate the animation to CSS, and use .toggleClass() instead, or to use stateful code:
Store the toggle status of the element in its own jQuery data object
Read the data object. If it doesn't exist or is 0, do something (condition 1)
If it exists and is 1, do something else (condition 2)
You can of course modify the binary conditions 1 and 2 into the effect you want to achieve.
In addition, in order to prevent jerky animation due to rapid clicking/toggling, you should stop the animation before you more animations to the queue. This is done by chaining .stop(true, true) to the object.
$(function() {
$('.bet-slip-outer').click(function() {
// Check state
if(!$(this).data('toggle') || $(this).data('toggle') == 0) {
$(this).data('toggle', 1);
$('.bet-slip').stop(true, true).animate({
'right': '-240px'
});
} else {
$(this).data('toggle', 0);
$('.bet-slip').stop(true, true).animate({
'right': '0'
});
}
});
});
.bet-slip {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bet-slip-outer">
<div class="bet-slip">bet-slip</div>
</div>

QUITE HARDING-CODING STYLE VARIABLES IN JS!
You could do something like:
$( ".bet-slip-outer .bet-slip" ).toggleClass( "animation" );
Then in your CSS you would do:
.bet-slip-outer .bet-slip { right: 0px;}
.animation { right: -240px;}
Why to use this option over others?
Your not hard-coding STYLE variables in your java-script your leaving that to CSS (what it's made for). As the project grows if you keep hard-coding it will eventually make your JS code base 'smell.' IE: I pain to change down the road!

How can I hide a button when scrolled to the top of a page?

I'm trying to adapt this JSFiddle to make the menu button on my website hide when I'm at the top of the page and show when I start scrolling down.
I modified the JS to match the CSS on my site. Then I placed it in tags in the head of my page
var $scb = $('<div class="toggle-menu-wrap"></div>');
$('.top-header').append($scb);
var $ccol = $('.content');
$ccol.scroll(function(){
$scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});
However, it still doesn't work. Am I making a mistake in how I'm modifying the JS to fit my CSS?

You can include the toggle-menu-wrap element in your HTML from the start. There is no need to insert it using JS.
Write the one line of CSS you need, which is to hide the element from the beginning
.toggle-menu-wrap {
display: none;
}
Your version of jQuery uses 'jQuery' instead of '$' to reference itself. I would also re-write your JS like:
jQuery(document).ready(function() {
fadeMenuWrap();
jQuery(window).scroll(fadeMenuWrap);
});
function fadeMenuWrap() {
var scrollPos = window.pageYOffset || document.documentElement.scrollTop;
if (scrollPos > 300) {
jQuery('.toggle-menu-wrap').fadeIn(300);
} else {
jQuery('.toggle-menu-wrap').fadeOut(300);
}
}

Like #murli2308 said in the comments above, you need to attach a scroll event listener to the window:
$(document).ready(function () {
var $scb = $('<div class="scroll-border"></div>');
$('.above').append($scb);
var $ccol = $('.content');
$(window).scroll(function(){
$scb.stop(true,true).fadeTo(500, $ccol.scrollTop() > 10 ? 1 : 0);
});
})
Wrapping your code in $(document).ready() would also be a good idea.
The reason $ccol.scroll(function() { ... works in that fiddle is because of the CSS:
.content{
height: 200px;
width: 200px;
overflow: auto;
}
Notice overflow: auto;. This causes that specific div to be scrollable. However, on your website, you scroll the entire page, not $ccol. This means the event handler will never fire a scroll event (since $ccol will never scroll).

You might have forgotten to link Jquery.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
Link this inside your head tag incase.....

This should do the job:
$(window).scroll(function(e){
if ($(this).scrollTop() > 0) {
$(".your_element").css("display", "block");
} else {
$(".your_element").css("display", "none");
}
});

Animated add / remove class

I'm looking to use fadeIn / Out when adding and removing of #left element in this code. Can you remove a class and animate that same element?
var window_width = $(window).width();
var scroll_amount = window_width * .75;
var left=$('#latest_wrapper');
$('#latest_wrapper #right').click(function() {
$('#left').removeClass('none');
$('#latest_wrapper').scrollTo('+=' + scroll_amount, 300);
});
$('#latest_wrapper #left').click(function() {
$('#latest_wrapper').scrollTo('-=' + scroll_amount, 300);
actual_left = left.scrollLeft() - scroll_amount;
if(actual_left <= 0){
$("#left").addClass('none');
}
});
# HTML page
<div id="latest_wrapper" data-offset="1">
<div id="left" class="arrow_wrapper none">
<i class="icon-angle-left"></i>
</div>
<div id="right" class="arrow_wrapper">
<i class="icon-angle-right"></i>
</div>
... more

Can you remove a class and animate that same element?
for that part of your question I can say:
$("#left").addClass('none').fadeOut();
but if you face some css that will make class none to be display none, then you must do animation first and then add your class.
$("#left").fadeOut('normal', function(){
$(this).addClass('none');
});
you can do the same with fadeIn()

Note: I'm assuming that you want to animate based on the properties being set in the CSS.
There are a bunch of options here, depending on your specific use-case.
The easiest and cleanest way would be to use CSS transitions along with your existing JavaScript:
http://jsfiddle.net/j85Az/
.arrow_wrapper {
transition: all 0.5s ease;
}
If you want to use JavaScript for this, you could use jQuery UI:
http://api.jqueryui.com/addclass/
If you don't want to use jQuery UI, you will most-likely need to do this manually using jQuery animate:
$('#left').animate({
//-- new CSS here
}, {
complete: function () {
$(this).removeClass('none');
}
});

Prevent another event from firing before a previous one is complete in jQuery?

http://jsfiddle.net/jmPCt/18/
I'm quite new to JS and jQuery. I've written all the code by hand in the link above. It works and does what I want it to save for but one thing. If you click rapidly on the 'next' link, you'll see either a flash of the next container to display or, if you click rapidly enough, the code will display two containers but I only want one to show only at a time. Is there some way of handling this in jQuery? I've tried using stops as discussed here: How to prevent jquery hover event from firing when not complete? but this does not solve the issue.

You are looking for .stop(). It's implementation changes with the desired behavior but the documentation should clear that up for you: http://api.jquery.com/stop
Here is a demo: http://jsfiddle.net/jmPCt/19/
Because of how .stop() works, when you use it with .fadeIn() or .fadeOut() you can chop-up your animations to the point where they no longer work. The best fix I've found is to always animate to absolute values with .fadeTo(): http://api.jquery.com/fadeTo
Here is the code I added to your JSFiddle, this overwrites the default .fadeIn() and .fadeOut() jQuery functions with ones that use .fadeTo() and .stop():
$.fn.fadeOut = function (duration, callback) {
$(this).stop().fadeTo(duration, 0, function () {
$(this).css('display', 'none');
if (typeof callback == 'function') {
callback();
}
});
};
$.fn.fadeIn = function (duration, callback) {
$(this).css('display', 'block').stop().fadeTo(duration, 1, function () {
if (typeof callback == 'function') {
callback();
}
});
};
Update
If you set the position property for the "slide" elements then they can animate on top of each other which will remove the jumpiness that your code exhibits:
HTML --
<div id="controls">
<div id="countah"></div>
<a href="#" id=prev>prev</a> |
<a href="#" id=next>next</a>
</div>
CSS --
.js .staceyPort {
display: none;
position : absolute;
top : 0;
left : 0;
}
#controls{
position : fixed;
bottom : 0;
left : 0;
z-index : 1000;
background : gold;
}​
Here is a demo: http://jsfiddle.net/jmPCt/21/