We Keep Coding

remove white-space in isotope js

There is space in-between each item in my grid. http://okbj.ca/ If you click on most recent or resize the window it will remove the space. When you refresh the space comes back. How can I remove this space for good?
I am using the latest versions of chrome, explorer, microsoft edge and firefox. It seems to not work on all of them.

This seems to be a browser-specific issue for you because it appears fine in the latest version of Chrome, Firefox and Safari on OSX.
It appears the issue occurs on Windows. There are two solutions.
Ugly Javascript Hack
Fire a resize event every second. This will force the plugin to recalculate the sizes.
// cross-browser resize event
var crossBrowserResize = function() {
var evt = document.createEvent('HTMLEvents');
evt.initEvent('resize', true, false);
window.dispatchEvent(evt);
};
// fire the event every second
setInterval(function() {
crossBrowserResize();
}, 1000);
Use Media Queries Instead
This type of grid is easily achievable using pure CSS and some media queries. I inspected the elements and they're already using several media queries to adjust how things resize at different breakpoints.
/* 4 columns on tablet landscape and up */
#media screen and (max-width: 1024px) {
.block {
width: 25%;
}
}
/* 2 columns on tablet profile */
#media screen and (max-width: 720px) {
.block {
width: 50%;
}
}
/* 1 column on phone landscape or profile */
#media screen and (max-width: 480px) {
.block {
width: 100%;
}
}

The collapse you want happens only on window resize event (in Chrome). You can dispatch the event once the grid is loaded:
(function fixGrid() {
var img, grid = document.querySelector('.grid');
if (grid) {img = grid.querySelector('img');}
if (img && img.height) {
window.dispatchEvent(new Event('resize'));
grid.style.opacity = 1;
} else {
if (grid) {grid.style.opacity = 0;}
setTimeout(fixGrid, 10);
}
})();

How to run a jQuery Function in smaller width?

I want to do a something in a smaller width of screen But I have a problem. I'm creating a Responsive Navbar, So I want to show a Button when It is in small width & toggling the Menu. But when I hide the Menu in smaller width, It doesn't show the Menu in wider width Because of Hiding in jQuery ...
So I wanted to make jQuery Codes run JUST in smaller width, I wrote this But It doesn't work :
$(window).resize(function() {
if($(window).width() < '48em') {
$('.ji-toggle-btn').click(function() {
$(this).parent().find('ul').toggle();
});
}
});

The proper way to show/hide a button is with a media query in CSS:
.css example:
.ji-toggle-btn {
display: none;
}
#media (min-width: 48em) {
.ji-toggle-btn {
display: block;
}
}
.scss example:
.ji-toggle-btn {
display: none;
#media (min-width: 48em) {
display: block;
}
}
I mocked up a sample of how to do a responsive sidebar:
http://codepen.io/staypuftman/pen/dGOMYO
What you'll notice in this example is how little JS is used. Targeting a .toggle class and using css transitions will get you where you want to go. You're overthinking this approach with the JS.

Your problem is that you're assigning a behavior on smaller resolution. You practically want to assign a click event only when the window size is smaller than 48 em.
With simple words - just remove the click event:
$(window).resize(function() {
if($(window).width() < '48em') {
$('.ji-toggle-btn').parent().find('ul').toggle();
}
});
EDIT I agree with the guy above about the CSS. Those things basically should be done with media queries.

$(window).width() returns an int (screen width in pixels). In order to get that value in ems you need to divide that buy the body's font-size, then compare that with just '48' not '48em'. For example:
$(window).resize(function() {
if(($(window).width() / parseFloat($("body").css("font-size"))) < 48) {
// Do stuff here...
}
});

How do I make document side script conditional?

So I'm having trouble breaking my horizontal scroll when the viewport is 480px or below. My scroll has this document-side script:
<script>
$(function () {
$("#wrapper").wrapInner("<table><tr>");
$(".post").wrap("<td>");
});
$(function () {
$("body").mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 50);
event.preventDefault();
});
});
</script>
When I remove the table wrapping feature then the scroll breaks. Instead I'm hoping for one of these two possible fixes:
a media query command that forces the removal of a class(es) so I can then display as a block.
a way to make the above document-side code conditional on viewport size.
Thanks in advance. I know its not the neatest, but its the only way I was able to get the scroll to work (except on IE)
Thanks in advance.

Here is one way to only horizontally scroll if body is more than 480px wide:
$("body").mousewheel(function (event, delta) {
var $this = $(this); // 'body' in this case
var widthLimit = 480;
if ($this.width() > widthLimit) {
// horizontal scroll
this.scrollLeft -= (delta * 50);
event.preventDefault();
}
});
Here is the media query that will display #wrapper as a block if the viewport is less than 480px:
#media only screen and (max-width: 480px) {
#wrapper {
display: block;
}
}
Note that media queries can generally only change styling and not add or remove classes or ids.

Detecting a screen's width with Javascript

if(screen.availWidth > 850){
//Do this
} else {
//Do this
}
This is what I have right now. My issue right now is if someone was to zoom in to the page, I want the width to change as it will affect how the page is displayed.

Shouldn't you be more worried about someone resizing their browser window? Not everyone keeps their browsers maximized.
To do this:
if( (window.innerWidth || document.documentElement.clientWidth) > 850) {
// do something
}
else {
// do other thing
}
I'm fairly sure this takes the zoom into account, but I've never tested that.

Bind an event handler to the window.onresize event:
window.onresize = function(event) {
if (screen.availWidth > 850) { ... }
};
If you use jQuery:
$(window).resize(function(){
if ($(window).width() > 850) { ... }
});
Besides, if you want to create a responsive design, consider using CSS media queries. This automatically adapts the page if the user zooms or resizes the browser window and also works if the user has JavaScript deactivated.
/* CSS */
#media (min-width: 850px) {
/* style */
}

Can I execute javascript based on window size?

I have a responsive site where I'm using a javascript to create a sticky sidebar.
I'm also using media queries to change from a multi-column layout to a single-column layout when the browser size is less than 768px.
I need to figure out how to disable the sticky menu script in the single-column layout. Essentially, I need something like a media query for the script statement.
This is the code I'm using to enable the script:
<script>
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
</script>
Is there something I can add to it to only have it trigger if the window is 768px wide or wider?
EDIT: I'm looking for a solution that will work if the user resizes the window on the fly.

Try this.
$(function(){
$(window).resize(function(){
if($(this).width() >= 768){
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
}
})
.resize();//trigger resize on page load
});

Try this code:
var height = $(window).height(); //I'm assuming you mean height, you can try .width() if yo u need it
if (height < 768) {
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
}
Hope that helps.

Check this out:
var targetWidth = 768;
if ( $(window).width() >= targetWidth) {
//Add your javascript for screens wider than or equal to 768 here
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
}
else {
//Add your javascript for screens smaller than 768 here
console.log(`am less than ${targetWidth}`)
}