Develop Reference

Loading javascript file depending on window size

I have this code:
$(window).scroll(function() {
if ($(this).scrollTop()>275)
{
$('.navbar-left').fadeIn();
}
else
{
$('.navbar-left').fadeOut();
}
});
to show my logo on my navbar when scrolled down. The problem is I want to disable this script when the window size is at 768px. I understand I could use:
if ( $(window).width() > 768) {
//Add your javascript for large screens here
}
else {
//Add your javascript for small screens here
}
However, I do not program javascript so this is very difficult for me to integrate into my existing code. Could someone kindly help?
I have attempted so I do not get MARKED DOWN.
if ( $(window).width() > 768) {
if ($(this).scrollTop()>275)
{
$('.navbar-left').fadeIn();
}
else
{
$('.navbar-left').fadeOut();
}
});
}

Here you go.
(function(){
$(window).scroll(()=>{
if(window.innerWidth <= 768){
if($(window).scrollTop() > 10){ //<- set to number you need
$('.navbar-left').fadeOut();
}
else{
$('.navbar-left').fadeIn();
}
}
});
}())
.wrapper{ height: 100px; } /* you may need this to prevent jankiness */
.navbar-left{
height: 100px;
background-color: #f00;
}
.push {
height: 1000px; /* just to test scrolling with no content */
}
<div class="wrapper">
<div class="navbar-left">navbar left</div>
</div>
<div class="push"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

jquery screen with hide/show

I want to a div to be hidden it the screen size is bigger than 700px and shown only if the screen size is less than 700 px;
Here is the code i'm trying to implement with using jQuery 3
jQuery(document).ready(function() {
if ((screen.width>701)) {
$(".mobile-section").css('display', 'none'); $(".yourClass").hide();
}elseif ((screen.width<=699)) {
$(".mobile-section").css('display', 'block');
}
});
It's not working --- am I doing anything wrong ??

Makes no sense really to use javscript/JQuery here if that is all you want try with CSS media queries like
.mobile-section {
display: none;
background-color: orange;
}
#media screen and (max-width: 700px) {
.mobile-section {
display: block;
}
}
<div class="mobile-section">
hello mobile section
</div>
Check out this fildde and resize the viewable area

width() is a function supported by jQuery providing the width property of e.g. document or window elements. In your case it refers to the document.
http://api.jquery.com/width/
An explanation of the difference between jQuery's .width() and screen.width would be good - screen.width is a native DOM property and it returns the width of the whole screen, e.g. if you have a monitor with 1920x1200 resolution, screen.width will return 1920.
$(document).ready(function() {
if (($(this).width() > 701)) {
$(".mobile-section").css('display', 'none');
$(".yourClass").hide();
}
else {
$(".mobile-section").css('display', 'block');
}
});

Use media queries, no JavaScript required.
#media only screen and (min-width: 700px) {
#hideMe{
display:none;
}
}
<div id="hideMe">This should only be displayed on smaller than 700px screens</div>
You can read about media queries here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Try this,
// Returns width of browser viewport
$( window ).width();
// Returns width of HTML document
$( document ).width();
$(document).ready(function() {
if ($(window).width() > 701) {
$(".mobile-section").css('display', 'none');
} else if ($(window).width() <= 700) {
$(".mobile-section").css('display', 'block');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width : 100px; height:100px;border:solid 1px red;" class="mobile-section">
</div>
Hope this helps.

How can i show/hide image with scrollTop

I've got a logo image that in page load is hidden. I'd like that the image would show after page scroll.
Tried that approach:
CSS:
#logo {
display: none;
}
JS/JQuery:
jQuery( document ).ready(function( $ ) {
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >=100){
$('#logo').show();
} else {
$('#logo').hide();
}
});
});
Case 1: if page is loaded with scroll = 0, after page scroll logo image doesn't show.
Case 2: if page is loaded with scroll > 100, logo image is show or hidden correctly.

Your code seems to work fine on scroll. If you just need to also conditionally hide/show the image based on the scroll position when the page loads, you can call the hide/show code when the page loads as well as when you scroll the page.
jQuery(document).ready(function($) {
function hideShow(scroll) {
if (scroll >= 100) {
$('#logo').show();
} else {
$('#logo').hide();
}
}
hideShow($(this).scrollTop());
$(document).scroll(function() {
hideShow($(this).scrollTop());
});
});
body {
height: 500vh;
}
#logo {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" id="logo">

How to keep display: block; working inbetween media queries

I have a menu button that when you click on it under 960px, it will toggle a menu. That menu is permantly shown on a screen that is over 960px. The problem is when I click on the menu to open, and then I close the menu under 960px, when I increase the screen size the menu isn't there because the last action was to close the menu ( when the screen is under 960px. ) How do I make sure that the menu stays open above 960px no matter what state the menu is in under 960px?
Javascript:
$('.leftnavmenu').click(function (e) {
e.preventDefault();
if($(window).width() <= 960) {
$('.left-nav-main-li.active div:nth-child(3)').slideToggle();
} else { ($(window).width() >= 960)
$('left-nav ul.navigation>li>div').show();
}
});
HTML
<div class="left-nav>
<span class="leftnavmenu>Select</span>
<div style="display: none;">
<ul>...</ul>
</div>

You can also do this with a CSS media query
//More than 960px
#media (min-width: 960px){
.left-nav ul.navigation>li>div {
display: block;
}
}

Modifying CSS width with Jquery according to screen width

Hey guys I'm running into some problems with the following code. What I'm trying to do is modify the width of a div via css according to the width of the screen.
<html>
<head>
<script src="../jquery/jquery.js" type="text/javascript"> // Add JQuery Code. </script>
</head>
<body>
<div id="something" style="background-color: black; width: 100px;">hello</div>
<script>
$(document).ready(function() {
if (screen.width = 1024) {
$(#something).css('width':'200px', 'background-color':'blue');
}
elseif (screen.width = 1366) {
$(#something).css('width':'300px', 'background-color':'blue');
}
}
</script>
</body>

You have a few problems.
The width should be checked with range
$(document).ready(function() {
if ($(window).width() >= 1366) {
$('#something').css({ 'width':'300px', 'background-color':'blue' });
} else if ($(window).width() >= 1024) {
$('#something').css({ 'width':'200px', 'background-color':'blue' });
}
});
Edit:
Combined with window.resize, then I think it'll behave exactly what you want.
But you can also consider using css media query to achieve responsive layout.
#media only screen and (min-width:1024px){
.my-style {
background-color: blue;
width: 200px;
}
}
#media only screen and (min-width:1366px){
.my-style {
background-color: blue;
width: 300px;
}
}

Try to use the window's resize event, by the way you are assigning the values inside the if statement,
$(document).ready(function() {
$(window).resize(function(){
var something = $('#something');
if ($(this).width() >= 1366) {
something .css({'width':'200px', 'background-color':'blue'});
}
else if ($(this).width() >= 1024) {
something.css({'width':'300px', 'background-color':'blue'});
}
});
});
Note: your code has lot of syntax errors like passing a undefined var as selector, error with else if etc.. and as well as i received a downvote for that.