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();
}
});
});

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>

Can't get scrolltop to work correctly

I've created a fiddle to show what is happening.
I am using jquery to fade in a link to the top of the page when the user is scrolling down.
I can get it to work on jsfiddle if I place the code in the javascript window, but if I put it in script tags where my $( window ).load(function() is in the HTML window, it doesn't work at all. Does anybody know why?
$('#slide').bind("scroll", function() {
if ($(this).scrollTop() > 20) {
$("#top").fadeIn();
} else {
$("#top").stop().fadeOut();
}
});
$('#top').on("click",function(){
$('#slide').animate({scrollTop:0}, 'slow');
});
here's the fiddle:
https://jsfiddle.net/8130fdhm/2/
Any help would be most appreciated.

Put in a script tag just before the body end tag. I have updated the jsfiddle here https://jsfiddle.net/8130fdhm/3/
....
<script>
$('#slide').bind("scroll", function() {
if ($(this).scrollTop() > 20) {
$("#top").fadeIn();
} else {
$("#top").stop().fadeOut();
}
});
$('#top').on("click",function(){
$('#slide').animate({scrollTop:0}, 'slow');
});
</script>
</body>

how to fix a div using jquery [duplicate]

This question already has answers here:
Code working in jsFiddle but not in browser
(2 answers)
Closed 8 years ago.
HTML
<div id='countdown'></div>
Jquery
<script>
var elementPosition = $('#countdown').offset();
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition.top){
$('#countdown').css({'position':'fixed','top':'0'});
} else {
$('#countdown').css('position','static');
}
});
</script>
This code is working on JSFiddle, but when I tried it, it didn't work for me.
I tried looking on the console (developer's view) and it's pointing on elementPosition.top . However, top is unknown property. Can someone help me with this?

The only reason I could see is the code is not in a dom ready handler
jQuery(function () {
var elementPosition = $('#countdown').offset();
$(window).scroll(function () {
if ($(window).scrollTop() > elementPosition.top) {
$('#countdown').css({
'position': 'fixed',
'top': '0'
});
} else {
$('#countdown').css('position', 'static');
}
});
})

Put your code inside DOM ready handler $(function() { .... }); to make sure all of your elements inside the DOM have been loaded properly before executing your javascript code
$(function() {
var elementPosition = $('#countdown').offset();
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition.top){
$('#countdown').css({'position':'fixed','top':'0'});
} else {
$('#countdown').css('position','static');
}
});
});
Your code works in jsFiddle because jsFiddle has already done that part for you.

jQuery if div contains text, toggle button

I'm trying to get a button to be toggled if a div contains a string of text. Something like:
$(document).ready(function(){
$(function() {
if ('$div#trackingnumber:contains('Hello')');') {
$("dinput#submitam").toggle()});
}
});
Does anybody know how to do this?

You are on the right way. I only see some syntax errors. Try this
$(document).ready(function(){
if ($("#trackingnumber:contains('Hello')").length != 0)
{
$("dinput#submitam").toggle();
}
});
Checkout this jsFiddle too.

Just do like this
$(document).ready(function(){
if ($("div#trackingnumber:contains('Hello')").length > 0)
$("dinput#submitam").toggle();
});

$(document).ready(function() {
if ( $("#trackingnumber:contains('Hello')").length > 0 ) {
$("#submitam").toggle();
}
});