Develop Reference

Why does this jQuery code works only once?

I have this short jQuery code to make the picture disappear when the window is resized. For some reason, after it disappears, it doesn't appear again.
Here is the code:
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").css("display","none");
} else if($(window).width() >= 700){
$("#side-pic").css("display","show");
}
});
});
Also if by any chance you know if there is a way to make picture move under a certain div in my code, I'll be glad to hear it! Thank you guys in advance!

There is no display property such as display: show. Try using $("#side-pic").css("display","block"); instead.
Another Alternative would be hide/show:
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").hide();
}
else if($(window).width() >= 700) {
$("#side-pic").show();
}
});
});

That's because the "show" is not a valid display value. https://developer.mozilla.org/en-US/docs/Web/CSS/display
Also, why the else if, isn't an else good enough?
Or rather a reusable CSS class and jQuery's toggleClass() Method:
jQuery( $ => {
$(window).on('resize', function() {
$("#side-pic").toggleClass("is-hidden", $(this).width() < 700);
});
});
.is-hidden {display: none;}
<div id="side-pic">SIDE PIC</div>
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

You can also write a code Like following
$(document).ready(function(){
$(window).resize(function(){
if($(window).width() < 700) {
$("#side-pic").hide();
} else if($(window).width() >= 700){
$("#side-pic").show();
}
});
});

inconsistent css height for element using jquery

I have a relatively simple jquery function I am using to set the height of one div, based on the parent height.
(function() {
var $window = $(window);
function resize() {
if ($window.width() > 800) {
$(".event-list").each(function() {
var parentHeight = $(this).height();
$(this).children('.text').css("height",parentHeight);
$(this).children('.pattern').css("height",parentHeight);
});
} else {
$(".event-list").each(function() {
$(this).children('.text').css("height", 'auto');
$(this).children('.pattern').css("height", 'auto');
});
}
}
$window
.resize(resize)
.trigger('resize');
})(jQuery);
You can see it working here: http://theadventureschool.com/new-site/events/
On my local computer this works correctly every time, but when I pushed the site live, sometimes the height is the correct value, and sometimes it defaults to 22px.
Any help to resolve this would be greatly appreciated.
Thanks,
Jenny

You should wait for the image to finish loading. If I take the image out and resize the page I get the 22px height. Try adding in a listener on the image load and once the image is done loading then do the initial sizing.
(function() {
var $window = $(window);
$(".event-list img").load(function() {
resize();
});
function resize() {
if ($window.width() > 800) {
$(".event-list").each(function() {
var parentHeight = $(this).height();
$(this).children('.text').css("height",parentHeight);
$(this).children('.pattern').css("height",parentHeight);
});
} else {
$(".event-list").each(function() {
$(this).children('.text').css("height", 'auto');
$(this).children('.pattern').css("height", 'auto');
});
}
}
$window
.resize(resize)
.trigger('resize')
.load(resize);
})(jQuery);

$(document).ready() solve this?
JQuery documentation:
https://learn.jquery.com/using-jquery-core/document-ready/

I need a jQuery function to only work above 700px screen size, cant spot the error in my code

I have a jquery function that i want to disable below 700px. I have the following function:
<script>
$(document).ready(function() {
$(window).resize();
});
</script>
and
<script>
$(window).resize(function() {
if( $(this).width() > 700 ) {
$(window).load(function() {
$('.dh-container').directionalHover();
});
}
});
</script>
This seems like it should work, but i'm a noob to jquery, and can't find the error in my code, and the chrome inspector isn't displaying any errors.
If someone could spot my error, that would be great. And in the future, how would i go about diagnosing a jquery error that the chrome inspector doesn't point out?
Thank you

Your code works fine
<script>
$(document).ready(function() {
$(window).resize();
});
$(window).resize(function() {
if( $(this).width() > 700 ) {
$(window).load(function() {
alert("It's Working above 700px width");
});
}
});
</script>
Always start by testing simple procedures to find out mistakes.
Another way:
<script>
var width = $(window).width();
if (width > 700) {
alert('Display Above 700px');
} else {
alert('Do nothing since it's under 701px');
}
</script>

java script functionality only in mobile device

I want java script functionality only in mobile device 767px.
This is my code
$('#my-btnn').click(function () {
$('#mobile-login').hide();
$('#user-settings').slideToggle('fast');
});

You can simply check window width in order to determine if function should work or not:
$('#my-btnn').click(function () {
if ($(window).width() < 767) {
$('#mobile-login').hide();
$('#user-settings').slideToggle('fast');
}
});

You can bind your click by checking your resolution. Use onResize and check by screen.width
$(window).resize(function() {
if (screen.width <= 767) {
$('#my-btnn').bind('click', function () {
$('#mobile-login').hide();
$('#user-settings').slideToggle('fast');
});
}
});
And you can check if you were binded early.
Or you can just to add this checking in onReload

Working with full height content

i have made this code:
http://codepen.io/FelipeMartinin/pen/xHpqJ
I made a code that does the content have the same height of the window. But I wish he'd stop doing that when the window width is less than 768px. Could help me do this? Thank you in advance
jQuery(document).ready(function($) {
$(window).on("resize", function () {
$('.featuredContent').height($(window).height() - $(".header").height());
}).resize()
});

You could add if ($(window).width() > 768) before setting the height:
jQuery(document).ready(function($) {
$(window).on("resize", function () {
if ($(window).width() > 768)
$('.featuredContent').height($(window).height() - $(".header").height());
}).resize();
});

jQuery(document).ready(function($) {
$(window).on("resize", function () {
if ($(window).width() < 768) {return;}
$('.featuredContent').height($(window).height() - $(".header").height());
}).resize();
});