We Keep Coding

Form 'submit button' won't SLIDE

Would you please tell me why the slide function won't work ?
https://jsfiddle.net/lcoulon/51gn2v45/
It won't slide either into a real HTML page even i called CSS and jquery :
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
<link href="../css/slide-submit.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
My final is to integrate this submit button into a Bootstrap4 webpage template.
Many thanks for your help,

First, in JSfiddle example problem was with the links.
Here (after few attempts) working example
Second, or your website seems like you forgot to add slider handling code.
As you said, no errors in console, so I just tried to add code directly
(Only this part above to see if it would change something)
/*!
* Slide to submit button
*/
$(".slide-submit button").draggable({cancel: false, containment: "parent", axis: "x", stop: function() {
if (($(this).parent().width() / 2) === ($(this).position().left + 8)) {
$(this).css({left: "auto", right: 0}).addClass("submitted").text("Submitting...").draggable('false');
$(this).closest("form").submit();
} else {
$(this).css({left: 0});
}
}}).on("click", function() {
return false;
});
And it looks like it worked out (recorded animation here)

add style when user scrolls, remove it when user scrolls back to top

I have a class I want to add a style to if a user scrolls down any amount, and I want to remove or add a different class if a user scrolls back up to the top. I am trying to give my nav background a color because its transparent when when the page loads, but the background would kick in if the user scrolls - so my sticky nav can show properly. I don't know if I should use javascript, or where that script should go on in my php to work - ? Any help would be greatly appreciated.
Here is my header code:
Toggle navigation
">" height="height; ?>" width="width; ?>" alt=""/>
Here is what I have so far, placed the script in my :
<script>
$(function () {
$(document).on('scroll', function (ev) {
if ($(document).scrollTop() === 0) {
$('.navbar-fixed-top').removeClass('.colored');
} else {
$('.navbar-fixed-top').addClass('.colored');
}
});
});
</script>
and here is my link: http://o-pd.com/tji16
I'm not able to get the class .colored to be added to .navbar-fixed-top's styles...

Try the following Javascript:
$(function () {
$(document).on('scroll', function (ev) {
if ($(document).scrollTop() === 0) {
$('your-element-selector').removeClass('foo');
} else {
$('your-element-selector').addClass('foo');
}
});
});
Edit: wrapped the code in $(function () {}) so it'll run when the document is ready.

On click add/remove overflow hidden

I'm trying to add/remove .css('overflow-y','hidden') onclick, Which I did. The problem appears when I try to remove that css, also onclick. But this time, user needs to click on another element.
Idea is to have modal (twitter bootstrap 2.3) window where there is some data and when user click on modal button (triggers) the css applies to html element in order to prevent scrolling of the website. And now when I click anywhere on modal (modal shuts down) but there is still overflow-y styling and because of it I can't scroll my page.
So this is what I've made, but I have been stuck here and don't know where I am making mistake. Could anyone help me with this one, and if is possible give me some advice so I could take care in future.
Thanks!
<script type="text/javascript">
$('#myModal').modal('hide') // initializes and invokes show immediately</p>
$('.note').delay(10000).fadeOut('slow');
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
alert('WORKS!');
}
else {
$modal.onclick( function() {
$html.css('overflow-y','scroll');
});
};
});
});
</script>

Put your css in a class and use jquery's .toggleClass() to show/hide the overflow.
Here's a simplified example: http://jsbin.com/towiyaqa/1/

You can use like this:
$button.on('click', function(e) {
$html.css('overflow-y','hidden' ? 'scroll' : 'hidden');
e.preventDefault();
})

Here is solution for problem:
$(document).ready(function() {
var $html = $('html');
var $button = $('.container > .btn-primary');
var $modal = $('.modal-backdrop');
$button.on('click', function(e) {
$('.note').delay(10000).fadeOut('slow');
$html.css('overflow-y', 'hidden');
if ($html.attr('style')) {
console.log("overflow-y: hidden added");
}
});
$('#myModal').on('hidden.bs.modal', function () {
// do something…
console.log("fires myModal");
$html.css('overflow-y','scroll');
});
});
</script>

How can I edit this Javascript without blocking functionality?

So I inherited some code that I am trying to customize and I've hit a roadblock. I believe this little piece of code is the issue:
jQuery(function($){
var photos = [
'cover/001_final.jpg',
'cover/002_final.jpg',
'cover/003_final.jpg',
'cover/004_final.jpg',
'cover/006_final.jpg',
'cover/007_final.jpg',
'cover/008_final.jpg',
'cover/009_final.jpg',
'cover/044_final.jpg',
'cover/085_final.jpg',
'cover/123_final.jpg' ]
$.backstretch(photos[Math.floor(Math.random() * photos.length)]);
$(document.body).on("backstretch.show", function () {
$('body').addClass('load');
});
$('.nav-link a')
.hover(
function() { $(this).addClass('hover'); },
function() { $(this).removeClass('hover'); })
.click(function(){
$(this).removeClass('hover');
});
});
If I understand correctly, this script is randomly loading the backgrounds and then stretching the images and then loading the menu...
..I would like to use the menu feature on another page that does not require a stretched background, how can I remove the dependency on the background loading/stretching and just load the menu?
Thanks in advance.

Try using :
$(function () {
$('body').addClass('load');
});
Instead of :
$(document.body).on("backstretch.show", function () {
$('body').addClass('load');
});

mouseover doesn't show hidden div

<script>
$("#menu-item-58").mouseover(function() { $("#simple_sidenav-3").css('visibility','visible'); });
$("#menu-item-58").mouseout(function() { $("#simple_sidenav-3").css('visibility','hidden'); });
</script>
#simple_sidenav-3 {
visibility:hidden;
}
simple_sidenav-3 is a hidden div.
So why doesn't it show when mouse is over #menu-item-58?
Please check it here http://mentor.com.tr/wp/?page_id=164

try this instead:
jQuery("#menu-item-58").mouseover(function() {
jQuery("#simple_sidenav-3").css('visibility','visible');
});
$ is undefined.

You haven't wrapped your code in the jQuery DOM ready function. Put this between your <script> tags:
$(document).ready(function()
{
$("#menu-item-58").mouseover(function() { $("#simple_sidenav-3").css('visibility','visible'); });
$("#menu-item-58").mouseout(function() { $("#simple_sidenav-3").css('visibility','hidden'); });
}
This will bind the mouse events to the elements when the document (page) has been loaded.

Try changing #simple_sidenav-3 from visibility:hidden; to display:none; Then call something like .slideDown() for a nice effect.
Also, here's some improvements to your code:
jQuery(function() { //waits till the document is ready
jQuery("#menu-item-58").mouseover(function () {
jQuery("#simple_sidenav-3").slideDown();
}).mouseout(function () { //no need to use $("#menu-item-58") twice
jQuery("#simple_sidenav-3").slideUp();
});
});