Develop Reference

Move content on window resize

I am using the following jQuery to move content from the top of the main content column in mobile view to the top of the sidebar when in desktop view.
if (ww >= 768) {
$( '#move-me' ).insertBefore($( '#top-widget' ) );
}
Here's a fiddle:
http://jsfiddle.net/richerimage/co6nw6va/1/
This works fine on page load, but I'd like the content to be able to move back and forth on window re-size
Like all things, I guess this is easy if you know how! :)
Any help is greatly appreciated
With thanks
Richard
p.s. also, is there a way to move the content to the top of the #sidebar without the need to reference the #top-widget?

Try this:
$( document ).ready(function() {
doThis();
});
$( window ).resize( function() {
doThis();
});
function doThis(){
var ww = document.body.clientWidth;
if (ww >= 768) {
$( '#move-me' ).insertBefore($( '#top-widget' ) );
}else{
$( '#move-me' ).insertBefore($( '.post_content' ) );
}
}
Check JSFiddle Demo

So you need to use resize event handler:
$( window ).resize( function() {
var ww = document.body.clientWidth;
if (ww >= 768) {
$( '#move-me' ).insertBefore($( '#top-widget' ) );
}
});
jsFiddle

when to stop scrolling

Look at the demo below. On click of next i scroll it but i want to hide next when end has reached. How do i know when to stop scroll
http://jsfiddle.net/77kJp/2/
JS
$("span").click(function(){
$('span').after('<br />'+$( "div.demo" )[0].scrollWidth+'-'+$( "div.demo" ).scrollLeft() + '-'+$( "div.demo p" )[0].scrollWidth );
$( "div.demo" ).animate({
scrollLeft: $( "div.demo" ).scrollLeft() + 800
});
});
ps: 800 in demo is just for ease

run a function after animation complete like this
http://api.jquery.com/animate/
$('selector').animate(
{
right : "100px",
}, 500,
function() {
$('selector').hide(); // this will run after the animation is complete
}
);

You want to use the scroll() event listener. Whenever your demo div is scrolled, check its current position from the left, and if it's greater than a certain threshold, hide your span that says 'next'
Add this JS after your $("span").click() code:
var leftPos;
$(".demo").scroll(function(event){
leftPos = $(".demo").scrollLeft();
if(leftPos > 700){
$("span").hide();
}else{
$("span").show();
}
});

Use the callback function of animate
$("span").click(function(){
$('span').after('<br />'+$( "div.demo" )[0].scrollWidth+'-'+$( "div.demo" ).scrollLeft() + '-'+$( "div.demo p" )[0].scrollWidth );
$( "div.demo" ).animate({
scrollLeft: $( "div.demo" ).scrollLeft() + 800
},function() {
$('span').hide();
});
});

Window re-size event breaks toggle after resize

I am having an issue with the below code. I created a window re-size event for a toggle div. The purpose is so when on smaller devices the header will toggle the content, otherwise the content is just displayed as is. The issue I am having is when I refresh the page, it works perfect. The second I resize it and click to toggle, it causes some sort of recursive call 5 times, so it toggles back and forth 5 times. Any suggestions?
$(window).resize(function() {
if ($(window).width() > 767) {
$(".toggle" ).show();
}
else {
$(".toggle" ).hide();
$( ".opener" ).click(function() {
$(this).next('.toggle').slideToggle();
});
}
}).resize();

It is not recommendable to insert a click function inside a resize function, because you are adding click functions to the tag every time you resize. If you add an unbind to the "opener" before the click line it should work.
$(window).resize(function() {
if ($(window).width() > 767) {
$(".toggle" ).show();
}
else {
$(".toggle" ).hide();
$( ".opener" ).unbind("click");
$( ".opener" ).click(function() {
$(this).next('.toggle').slideToggle();
});
}
}).resize();

Removing class and attr at certain width issues

So, I have a menu that drops down. After, 955 (desktop) width the dropdown menu stays open using javascript and I am unable to close it, which is what I want. This works great, so when on a tablet the menu is closed but can be opened upon click, again this is what I want.
The problem occurs when I manually resize my screen width on desktop to tablet view, although its below 955 the menu stays open and I cant shut it. Please see this bootply example: http://bootply.com/86605
function checkWidth(init) {
if ($(window).width() > 955) {
$( "li#add" ).addClass( "open" );
$('#remove').removeAttr("data-toggle");
}
}
$(document).ready(function() {
checkWidth(true);
$(window).resize(function() {
checkWidth(false);
});
});

Im not sure what the 'init' argument is for as it appears to be doing nothing but you need to add an another condition and remove the 'open' class.
function checkWidth(init) {
if ($(window).width() > 955) {
$( "li#add" ).addClass( "open" );
$('#remove').removeAttr("data-toggle");
} else if($(window).width() < 955) {
$( "li#add" ).removeClass( "open" );
}
}

function checkWidth() {
if ($(window).width() > 955) {
$("li#add").addClass("open");
$('#remove').removeAttr("data-toggle");
} else if ($(window).width() < 955) {
$("li#add").removeClass("open");
$('#remove').attr("data-toggle","dropdown");
}
}

function checkWidth(init)
{/*If browser resized, check width again */
if ($(window).width() < 640) {
$('.second_menu_mid').addClass('rmm');
}else {if (!init) { $('.second_menu_mid').removeClass('rmm');
} }}
$(document).ready(function() {
checkWidth(true);
$(window).resize(function() {
checkWidth(false);
});});

marginLeft as a Javascript variable

I'm trying to animate a 'div' in the mobile version of my website.
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "15px"
}, 500 );
}
});
When the 'div' wil change position I'd like to be able to tap once again on it and let it return to its default position.
I tried to create an 'if' statement...but I can't understand why it doesn't work.
I'd like assume the 'marginLeft' of my 'div' as a variable for my javascript code in order to move it to the right if 'marginLeft=10px' and move it to the left (default position) if the "new" 'marginLeft is not equal to 10px anymore.
I've tried with the following code:
var x = ("#iconReorder").style.marginLeft;
if (x = "10px") {
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "15px"
}, 500 );
}
});
} else {
$(function(){
$( "#iconReorder" ).bind( "tap", tapHandler );
function tapHandler( event ){
$( "#iconReorder" ).animate({
marginLeft: "10px"
}, 1000 );
}
});
}
Can somebody help me?
I hope that what I said is understandable.
Thank you

So if I understood correctly, this should do:
var x = $("#iconReorder");
x.on('tap', function () {
var to = '10px', time = 1000;
if (x.css('margin-left') === '10px') {
to = '15px';
time = 500;
}
x.animate({
marginLeft: to
}, time);
});
or in action. I replaced tap event with click so that I could see what I'm doing. Anyway it should work better now.
There might be some slimmer way to make it work, but I can't think of any at the moment (maybe some toggle method).

try this
$( "#iconReorder" ).animate({
'margin-left': 15
}, 500 );