CODEWITHSUNDEEP
javascriptjqueryhidescrolltoponscroll
Emily Chu
Emily Chu

Reputation: 187

jquery window.onscroll listener to display:none and display:inline not appearing in Safari

I am testing in Safari 11.0.3

Site: https://3milychu.github.io/met-erials

I have the following function to create a header that pops out the selected item upon scroll

function scrollState () {


var elmnt = document.getElementById("title");
var rep = elmnt.offsetTop;

if (window.pageYOffset >= elmnt.offsetHeight) { 
       // $('input:not(:checked').parent().hide();
       $('input:not(:checked').parent().css("display","none");
       $("input:checked").css("display", "inline");
        $("label").css("marginLeft", "35%");
       $("label" ).css("fontSize", "4em");
       $("label" ).css("textAlign", "center");
       $("input:checked").css("float", "none");
        $("input:checked").css("verticalAlign", "top");
       $("input[type=radio]").css("width", "3em");
       $("input[type=radio]").css("height", "3em");
        $("input:checked").css("fontSize", "0.5em");
} else  {
        $("input:checked").css("display", "inline")
        $("label").css("marginLeft", "0%");
        $("label" ).css("textAlign", "none");
       $("input:checked").css("float", "right");
       $("input[type=radio]").css("width", "2em");
       $("input[type=radio]").css("height", "2em");
        $("input:checked").css("fontSize", "11px");
        // $('input:not(:checked').parent().show();
        $('input:not(:checked').parent().css("display","inline-block");
        $("label").css("fontSize", "1.5em");

    };
};

I call it by:

window.onscroll = function() {scrollState()};

Why is this not working in Safari? I commented out the .hide() method after seeing that Safari needs it to be replaced with .css("display","none").

This works in Chrome and Firefox as desired (when you use the .hide() and .show() methods)

Upvotes: 1

Views: 189

Answers (2)

Emily Chu
Emily Chu

Reputation: 187

There was a syntax error.

$('input:not(:checked').parent().css("display","inline-block");

should be 

$('input:not(:checked)').parent().css("display","inline-block");

This resolved the issue.

Upvotes: 1

ivanibash
ivanibash

Reputation: 1491

Your $('input:not(:checked').parent().css("display","none"); (the one that replaces .show()) needs to be ('display', 'inline-block')? You want the element to show, but you are writing ('display', 'none')

Upvotes: 1

Related Questions