We Keep Coding

Scroll page to element on mobile is not working but on desktop yes, preventDefault is a problem?

I'm doing a website for desktop and mobile as well, the menu works perfect on desktop but not working on mobile, because I want the smothly scroll to id I use this code:
I found out that event.preventDefault() block a function I turn it off and it transfers me to id, but the animation is disabled at this point
$( 'a[href^="#"]' ).on( 'click', function ( event ) {
var target = $( $( this ).attr( 'href' ) );
var znacznik = $( $( this ).attr( 'a' ) );
if ( target.length ) {
event.preventDefault();
$( 'html, body' ).animate( {
scrollTop: target.offset().top - 80
}, 1000 );
}
} );
Is there any way to make it works on android? Maybe another function then event.preventDefault(); ?

I believe you may be overthinking this one, put an href on the button you want to scroll to, like so:
<button></button>
And for the smooth scrolling all I would do is set your CSS to the following:
html {
scroll-behavior: smooth;
}
Sets the entire page to have animations be smooth between elements.

jquery if is not working

I have this code.. the problem is that the CSS is not applying in both div's but only in the first one #main-wrapper
I have the same code but this time in a button press and its working, but with the if statement only the single works.. im not sure if the codes is somewhere wrong please help ... i tried to put the script in the end of the body tag but still nothing
if (window.location.href.indexOf("#expand") > -1) {
$( "#main-wrapper" ).animate({ 'width':'984px' }, 'slow');
$( "#sidebar-wrapper" ).animate({ 'display':'none' }, 'slow');
}

You can't animate 'display':'none'.
You could animate the opacity:
$( "#sidebar-wrapper" ).animate({'opacity':0}, 'slow', function(){
$(this).remove();
});
or, as suggested by Me.Name in comments:
$( "#sidebar-wrapper" ).fadeOut('slow');
or use slideUp:
$( "#sidebar-wrapper" ).slideUp();

Fixed Header Issue When Scrolling To Anchor From External Page

I recently repurposed a template for http://c42d.com, a portfolio website I'm building for a company called C42D. My issue concerns the scrolling functionality of the navigation system.
It works properly on the homepage. When you click any link in the nav at the top, it scrolls right to that section on the page perfectly, and it takes into consideration the height of the fixed header. The following Javascript is responsible for this functionality:
/** Hash Scroll */
/** Portfolio Filter */
$( '#navbar-spy' ).off( 'click' ).on( 'click', 'a', function( e ) {
if(!$( this ).attr( 'href' ).match(/^#/)) return;
e.preventDefault();
var elmHash = $( this ).attr( 'href' );
var elmOffsetTop = Math.ceil( $( this.hash ).offset().top );
var windowOffsetTop = Math.ceil( $(window).scrollTop() );
if( elmOffsetTop != 0 ) {
elmOffsetTop = elmOffsetTop - 84;
if( windowOffsetTop == 0 ) {
elmOffsetTop = elmOffsetTop - 0;
}
}
//console.log( $( this ).attr( 'href' ) );
$( 'html:not(:animated), body:not(:animated)' ).animate({ scrollTop: elmOffsetTop }, 1100 );
});
Unfortunately, when you navigate to any interior page on the site (http://c42d.com/termsandconditions, for example) and click a link in the nav, it brings you right to the proper anchor on the homepage, but doesn't take into consideration the height of the fixed header, and the title becomes partly obscured.
Any help would be greatly appreciated.
Thank you!
Zan

What I would do is on page load, detect the hash if any, and if there is, then run that same animation code to go to that.

Replacing an element by sliding it out and a new one in

basically, I want to show a table, and when the user clicks a link, I want the table to slide out to the left and another table to slide in from the right to the position where the original table was.
I've come so far (http://jsfiddle.net/JqkyA/4/):
$( "table.grid-1" ).hide( "slide", { direction: "left", duration: 5000 } );
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
Problem is, while the second table is sliding in, its x-position is correct but it is always displayed below the original table. I don't want that - I want the second table to slide in at the exact same y-position as the original table.
Any ideas on how to achieve this?
EDIT:
To be clear, I would like the new table to slide in on the same y-coordinate as the old table, but I still want the old table to be shown during slide-out. I also would like to have the new table slide in right next to the old one (no 'pause' between the tables as wm.p1us suggested).
Thanks for any help.

I think you should go with a different approach.
Instead of sliding the 2 tables just slide their container using negative margin and then hide the first table using the complete callback.
I also added display: inline-block to both tables.
Something like this:
$(".grids").animate({'margin-left': -110 }, 5000, function () {
$('table.grid-1').hide();
$(this).css("margin-left", 0);
});
See this working demo

$( function() {
$( "a" ).click( function() {
$( "table.grid-1" ).css({'position': 'absolute'});
$( "table.grid-1" ).hide( "slide", { direction: "left", duration: 5000 });
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
} );
} );

I've forked your JSFiddle
I added
<div class="inner">
as an inner wrapper and floated the tables to the left. animation is done by changing margin-left of the first table.
This will work as you wanted - the first table is still visible when the second one comes in..

Try this,
$( function() {
$( "a" ).click( function() {
if($( "table.grid-1" ).css('display') != 'none')
{
$( "table.grid-1" ).hide();
}
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
} );
} );
Let me know is it usefull?.

Trying to Load Page on Load instead of click

I'm using this code:
$( document ).ready( function() {
$( 'a.dynamicLoad' ).click( function( e ) {
e.preventDefault(); // prevent the browser from following the link
e.stopPropagation(); // prevent the browser from following the link
$( '#MainWrapper' ).load( $( this ).attr( 'href' ) , function() {
/* Content is now loaded */
ThumbnailScroller("tsv_container","vertical",10,800,"easeOutCirc",0.4,500);
});
});
});
along with this:
<li>HELP</li>
To load pages when the link is clicked.
I would like to know how do I add to the current script so that I can load a page the minute the page loads up, while keeping it working the way it already is? I'd like to load a page named "Homepage.html"

This should do it:
<script type="text/javascript">
jQuery(function() {
jQuery('#MainWrapper').load('Homepage.html');
});
</script>
Or if you still need that callback:
<script type="text/javascript">
jQuery(function() {
jQuery('#MainWrapper').load('Homepage.html', function() {
ThumbnailScroller('tsv_container','vertical',10,800,'easeOutCirc',0.4,500);
});
});
</script>