We Keep Coding

Sidebar Overlaps Column

When scrolling horizontally, the sidebar overlaps the other column. I am using jQuery + CSS to achieve this. How can I prevent this overlapping?
Before user reaches div container:
http://prnt.sc/b9j4t6
When user reaches div container (how it should always look):
http://prntscr.com/b9j7mz
Overlap Issue:
http://prnt.sc/b9j56m
Code:
var element = $('.price-container');
var baseTop = element.offset().top;
$(window).scroll(function () {
var top = $(this).scrollTop();
if (top >= baseTop)
element.css({"position": "fixed", "top": "10px"});
else
element.css({"position": "", "top": ""});
});

The reason the left container is overlapping the right container is because you are setting it to be fixed. This takes the element out of the normal flow of the page.
If you dont want it to happen you can either set up within your css a media query to say if your page is smaller than x position: static;
// change max-width: 480px to suit your screen size
#media screen and (max-width: 480px) {
.price-container { position: static !important; }
}
Or in your javascript
var top = $(this).scrollTop(),
width = $(window).width();
if (top >= baseTop && width >= [the point you want to break] ) {
element.css({"position": "fixed", "top": "10px"});
}

zslider javascript should work only in screen resolution below 768px

i want to use zslider javascript in my website, but can any one tell me how to make it work only in screen resolution below 768px
Here is the zslider script link:
http://www.cssscript.com/demo/mobile-friendly-content-carousel-slider-with-pure-javascript-zslider/

Use media queries to show slider content below 768px:
#media (min-width: 768px) {
.z-slide-wrap {
display: none;
}
}
Than use JavaScript to initialize slider only if width is below 768px:
if (window.innerWidth <= 768) {
var slider1 = new Slider('#demo', '.z-slide-item', {
// OPTIONS HERE
});
}

How can I reload css styles when change windows width?

How can I reload css styles when change windows width?
I tried this but without success. A simple reload (F5) helps to correct the css tags.
jQuery(function($){
var windowWidth = $(window).width();
var trigger = 1024;
if (windowWidth < trigger) var smaller = true;
else var bigger = true;
$(window).resize(function() {
if(windowWidth != $(window).width() &&
( ( smaller == true && $(window).width() > trigger ) ||
( bigger == true && $(window).width() < trigger )
)
){
window.location.reload();
return;
}
});
});
CSS example
.example {
display: block;
padding: 12px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
#media screen and (min-width: 1024px) {
.example {
left: 80px;
top: 80px;
width: auto;
padding: 8px;
}
}
The original CSS styles had been modified by some JS, so I want to reload the original when the windows becomes smaller or bigger then 1024px.

You should hook your code (whatever you want to do, i didnt understand what you want to do very well actually) inside a jquery resize event
Here is an example:
$( window ).resize(function() {
$( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
});
Dont really see the why of using javascript or jquery to change css whenever viewport vidth gets risezed, generally its just better to use css media queries.

Actually it works when you call the function with a timeout
setTimeout(function(){
window.location.reload();
},1);

CSS Media Query and Javascript/jQuery don't match up

In my CSS I have a media query like so:
#media (min-width: 800px) { /* styles */ }
And then in my jQuery, I'm targeting the window width and performing some actions.
Edit: as per the answers below, I have changed this function but my JS and CSS still didn't align. The problem was fixed by using the Modernizr function as specified in the accepted answer.
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth >= 800) {
// do something
}
});
The problem is that while the jQuery is executing bang on 800px or more, the CSS is kicking in at 740px.
Is there a known problem with these not aligning? Or could there be something on my page affecting the CSS and why it's 740px not 800px? Maybe there's something else I should be using instead of $(window)?
Edit: I've tested in Safari and it works perfectly. In Chrome and Firefox, the jQuery functions run spot on to 800px and so does the CSS. But in Chrome, the CSS actually runs after 740px, even though the media query is 800px - how can I get these to align perfectly?

You can use Modernizr to execute the media query in JS (the mq() method will return a boolean):
$(window).resize(function() {
if (Modernizr.mq('(min-width: 800px)')) {
// do something
}
});

Move your width check, or else the viewportWidth variable will always be the same thing:
$(window).resize(function() {
var viewportWidth = $(this).width();
if (viewportWidth >= 800) {
// do something
}
});

Valid code would be:
$(window).resize(function() {
var viewportWidth = $(window).width();
if (viewportWidth >= 800) {
// do something
}
});
Everytime window resizes the new value will be stored in viewportWidth variable. In your code viewportWidth gets the only value of the $(window).width() when the page was loaded.

What I just tried, and it seems to work, is to use the CSS media query to style an object, and then use javascript to test if the object has that style. Javascript is asking CSS what the answer is, rather than having two parts of the page determine it separately:
CSS:
#media (min-width: 800px) {
#viewType {width:3px;}
}
HTML :
<div id="viewType" style="display:none"></div>
JavaScript:
var answer = ($("#viewType").width()==3)

I agree with Steve answer. the jquery(window).width(); is does not match with the media queries and even doesn't provide accurate window width size. here is my answer taken from Steve and modified.
CSS :
#media (max-width: 767px) {
//define your class value, anything make sure it won't affect your layout styling
.open {
min-width: 1px !important;
}
}
.open {
min-width: 2px;
}
Js :
// when re-sizing the browser it will keep looking for the min-width size, if the media query is invoked the min-width size will be change.
$(window).on('resize orientation', function() {
var media = $('.open').css('min-width');
if( media == '1px') // means < 767px
{
// do your stuff
}
});
That's it~ hope it help.

Disable fancybox on handhelds

I need to make sure that upon clicking a link to view a html file, on an iPhone or Android or any handheld, it doesn't use Fancybox to view it, as it does on a computer.
I've tried ways with #media with no luck.
Is there any code to disable certain bits of javascript depending on what device it is?
Thanks!

Andre's solution will work for a specific subset of devices, but a better approach might be to do it based on screen size, since that's presumably why you don't want to use facnybox (because the screen is too small).
How about this:
if (window.innerWidth < 500 && window.innerHeight < 500) {
//small screen device - don't use fancy box
}
You can swap out the width and height for whatever the threshold is for fancybox looking okay.

I am using this approach and it is working fine for me...
if( $(window).width() > 480 && (!navigator.userAgent.match(/Android/i) ||
!navigator.userAgent.match(/webOS/i) ||
!navigator.userAgent.match(/iPhone/i) ||
!navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/))
){
$(".royalSlide").click().fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
}

For fancybox 2 this worked for me.
$(".fancybox-img").click( function( e ) {
if ( window.innerWidth < 799 ) {
e.stopPropagation();
e.preventDefault();
}
})
$(".fancybox-img").fancybox( {
margin : 100,
autoSize : true,
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

you can use something like
if( navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/)
){
// your fancybox instantiation here
}
but it will never be 100% accurate

Thinking inside of the box, no pun intended, a non-js solution:
.fancybox-overlay {
display: none !important;
}
#media (min-width: 1200px) {
.fancybox-overlay {
display: block !important;
}
};

disable fancybox with screen size
#media (min-width: 1000px) {
.fancybox-is-open {
display: none !important;
}};