We Keep Coding

I would like a button in a sticky header to turn red on downscroll

Hi there and thanks in advance for all help
I’m working on a wordpress website and I am using Elementor and Elementor Pro.
I have a button in a sticky header. When people start scrolling down I would like this button to turn red and the text turn white. In a gradual way. (When the colors were the other way around.)
Now I sort of know how to do it but I’m not all sure on everything. I got a guide from a post on Medium which is about turning the whole page a different color which I thought I could tweek a biut to target the button. I'm not totally unfamiliar with a bit of coding but I run into some incompatibilities.
I've added the code from the Medium post below.
What I know:
I need to make a class in CSS ie. .changeColor
And call up this change in a Javascript.
I can add the CSS in the custom CSS part of the widget in Elementor. But where do I put the script.js in the rest of the files? WordPress only has .php files I can get into and because I’m working in Elementor, should or can I place it somewhere else?
Also do i put the transition time in the CSS that describes the button or in the CSS that describes the change?
Many thanks for whoever could make all this a bit clearer for me. THANKS!
Colin
Beginsituation:
body {
background: white;
transition: 0.3s all;
}
What needs to happen on scroll
.changeColor {
background: red;
}
A little Javascript
$(function() {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$(‘body’).addClass(‘changeColor’)
}
if ($(this).scrollTop() < 50) {
$(‘body’).removeClass(‘changeColor’)
}
});
});
`
And add a bit of code to the HTML document that refers to the google hosted library for javascript

first of all you should add give an id to your button so jquery can get it throught that
now create a class which you will add in your button when page srolls
.btnChanged{
color: white;
background-color: red;
}
ok so now create a RAW JS file element you can add it from add new element section and put your js
$(function() {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('#yourId_which_you_gave_to_btn').addClass('btnChanged')
}
if ($(this).scrollTop() < 50) {
$('#yourId_which_you_gave_to_btn').removeClass('btnChanged')
}
});
});
hope this will help

jQuery: Move div to the left on click and bring it back to its original position (with the same button)

Here I am again, drowning in my noobness. I have been searching for literally HOURS to solve this problem! I am totally a beginner in jQuery/Javascript so I need some help.
This is what I want to do:
I have a navigation bar that when you click on a button, it hides it, then when you click again, it toggles it back, so the navigation bar is visible again. I have done this with jQuery and it works perfectly.
Now what happens is that, when you click that button and hide the navbar, I want the div content to slide to the left a few pixels and take up the full width (thus growing a bit bigger and filling up the useless whitespace, I especially want this for mobile-users). Again, this works perfectly.
However...if I click back on the famous button, the navigation bar comes back but the div content is still to the left, slightly hidden by the navbar. Whereas I want that when to navigation comes back, the div content comes back to its original place and width aswell.
Thus I have tried many many different codes but nothing seems to work! It either stays left or it just does not do anything. Although interesting and fun, it gets kind of frustrating after a few hours.
Here are a few things I have tried:
-toggle
-animate/stop
-if/else
-Get x position
I did not save any jQuery/javascript code but if need be, I shall provide a snippet. The reason I do not want to provide any code is because it is insanely LONG and confusing and complex!
As such, thank you very much in advance for your help! =)
Ah one last thing: Again, please keep in mind that you are talking to a beginner! So may you please be very specific and methodical (and keep it simple if possible ^^'), I would very much appreciate it since I have been searching for hours on Google and stackoverflow.
Oh woops I forgot! I do not use pixels for my units. I use "%" for the sake of responsiveness...I don't know if that actually works with jQuery...Enlighten me!
**ALRIGHT! Here is my super complicated fiddle...Somehow the jQuery is not working in my fiddle but it is working on my browser.
<html>Some super random code because it won't let me post fiddle without it but all my code is in the fiddle...</html>
https://jsfiddle.net/czcvucxL/1/**

you can get it done toggling a class from .content1 instead of using jquery
Demo
$(document).ready(function(){
$("#CharaCircle a").click(function(){
$("#Header").animate({width:'toggle'},350);
$("#Sidebar, #Sidebar ul li").animate({height:'toggle'},250);
$(".content1").toggleClass("fullwidth");
return false;
});
});
add this class
.fullwidth {
width: 95%;
left: 0;
margin-left: 0;
}
add these to .content1 so the div starts with 10% on the left and allow the animation(transition)
.content1{
left: 10%;
-webkit-transition: left 0.2s ease-in, width 0.2s ease-in;
transition: left 0.2s ease-in, width 0.2s ease-in;
}
EDIT: if you want it only with jquery Demo
$(document).ready(function () {
$("#CharaCircle a").click(function () {
$("#Header").animate({
width: 'toggle'
}, 350).toggleClass("hidden");
$("#Sidebar, #Sidebar ul li").animate({
height: 'toggle'
}, 250);
var properties;
var $content = $(".content1");
//build your set of properties width and marginleft
//are the ones you need to change
if ($("#Header").hasClass("hidden")) {
properties = {
width: "100%",
marginLeft: "0"
};
} else {
properties = {
width: "62%",
marginLeft: "19.4%"
};
}
$content.animate(properties, 250);
return false;
});
});

Dropline Menu in Wordpress

Right, the big problem here is that I have a fix html format that WP generates from the wp_list_pages('title_li='); function. It's a pile of nested lists. Now I wish to style that as a dropline menu with hover functionality.
http://hedag.openskin.org/?page_id=286 You can see what I've managed up to now there, I'm using z-index to try and overlay the current subnav with the one from the hovered subnav. Now I've read up on the z-index and I don't think it's possible to get it working using only css because the seperate "children" lists are in different stacking contexts.
So now my attempt is to remove it using jquery when you hover over another one of the main navigation elements. Would any of you be kind enough to either
tell me what's wrong with my z-index/css stuff and fix it that way (preferred, it'd be pretty cool) or
2. fix my jquery code so it'd work, I'm loading it in the <head> tag.
Current jQuery code:
<script>
jQuery(document).ready(function($) {
$('ul#nav>li').hover( function () {
if ($(window).width() > 767) {
$('ul#nav>li.current_page_item .children').hide();
$('ul#nav>li.current_page_ancestor .children').hide();
}
});
});
jQuery(document).ready(function($) {
$('ul#nav>li').mouseleave( function () {
if ($(window).width() > 767) {
$('ul#nav>li.current_page_item .children').show();
$('ul#nav>li.current_page_ancestor .children').show();
}
});
});
</script>
Using jQuery the menu now works as intended, it'd still be interesting to find a purely css solution to this as I'm fairly sure nested lists are a pretty standard navigation scheme and droplines are often the best option. One other thing that might be interesting to solve is getting the sub-nav to be left or right aligned with the parent ul and not the parent li.

The tricky thing about the CSS z-index property is that it's only applied to elements with a position specified in your stylesheet: either relative, absolute or fixed.
Looking at the source code on the page you linked, you should be able to style this with a pure-CSS solution. You only really need to use JavaScript if you want to support old versions of Internet Explorer.
ul li{ /* your top-level list */}
ul li ul{ display:hidden; position:relative; }
ul li:hover ul{ display:block; }
ul li.over ul{ /* if you want to support old versions of IE */ }
For accessibility, you can use left:-9999px in place of display:hidden. There's a detailed writeup of this technique here: http://www.htmldog.com/articles/suckerfish/dropdowns/ and at the bottom of the page you'll find an example of a horizontal nav menu, if that's what your final design calls for.

If you want to use
jquery.dropy

jQuery fadeOut won't fade on Tumblr - it simply disappears

I have installed an infinite scroll script to my Tumblr blog, and am now in the process of adding a scroll-to-top button. I want this button to fade in once the user scrolls down past a certain point, and fade out when they scroll back up. I also want it to provide a smooth scroll, not just a jump to the top.
I am fluent with HTML and CSS, though I unfortunately know basically nothing about JavaScript and jQuery. I found this tutorial for the JS side of things which taught me how to get the desired scroll button. Everything worked great, but the only problem is that the fadeOut doesn't work - the element simply disappears. Sometimes, if I am lucky, it will start fading out a little for a microsecond or so, but then disappear.
Here is the JavaScript I'm using:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script>
$(function () {
$("#gotop")
.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#gotop').fadeIn(500);
} else {
$('#gotop').fadeOut(500);
}
});
$('#gotop').click(function () {
$('html,body').animate({
scrollTop: 0
}, 400);
return false;
});
});
</script>
I have a simple anchor element in my HTML, styled in CSS using the id #gotop:
Top
CSS:
#gotop {position: fixed;
right: 2em; bottom: 2em;}
As it is, everything works fine, except for the fade out.
I've browsed the internet for similar such issues. I tried various things which I came across, though most of it was greek to me unfortunately.
Edit: I just had a thought. Is it possible that the fade out doesn't occur, because before it has time to fade out, the page has already scrolled back above the "hidden" zone and the element is immediately set to be hidden?
If anybody knows anything, it'd be much appreciated - thanks for your time!

Hope this helps
Js Fiddle Demo
$(function () {
$('#gotop').hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('#gotop').fadeIn(500);
} else {
$('#gotop').fadeOut(500);
}
});
$('#gotop').click(function () {
$('html,body').animate({
scrollTop: 0
}, 400);
return false;
});
});

Okay, after some mucking around I managed to figure out the problem.
It turns out that I had set all elements on my page to have a CSS3 transition assigned to them, through use of the * selector:
* {margin: 0; padding: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;}
I did this for convenience so that any hover I had would have a nice transition. However, it seems that this was what was causing my scroll-to-top button to misfunction!
I would suggest that anybody who is having the same problem as my checks any transitions they've used, and ensure that they're not affecting the to-top button. If there are any doubts, try removing them temporarily just to check.
Hope this helps.

Change div height onclick with animation

I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.
It's actually supposed to turn out something like the news section on this page: http://runescape.com/
I'd like to do it with JavaScript/jQuery if possible.

$('div').click(function(){
$(this).animate({height:'300'})
})
Check working example at http://jsfiddle.net/tJugd/

Here's the code I ended up using:
JS:
document.getElementById("box").addEventListener("click", function() {
this.classList.toggle("is-active");
});
CSS:
#box {
background: red;
height: 100px;
transition: height 300ms;
width: 100px;
}
#box.is-active {
height: 300px;
}
HTML:
<div id="box"></div>
Fiddle:
https://jsfiddle.net/cp7uf8fg/

try
$('div').toggle(function(){
$(this).animate({'height': '100px'}, 100);
}, function(){
$(this).animate({'height': '80px'}, 100);
});
DEMO

jQuery rules. Check this out.
http://api.jquery.com/resize/

The complete solution:
Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.
Responsive design can be then applied to it in your CSS file.
This is mutch better as with JAVA the screen would flicker!
If you use a grid system there will be a media query part there you need to include your settings.
I use a little spacer on HD screen while its increasing till mobile screen!
Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons.
Note that animation is for getting rid of flickering of screen.
This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all.
Even if java fired its doing its work via an elegant animation
var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;
if (header_height > spacer_height) {
$('#header_spacer').animate({height:header_height});
};
Note that I have applied a 5px tolerance margin!
Ho this helps :-)

I know this is old, but if anyone seems to find their way here. #JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.
HTML
<div id='item' onclick='handleToggle()'> </div>
JS
handleToggle(event){
document.getElementById(event.target.id).classList.toggle('active')
}
CSS
#item {
height: 20px;
transition: 1s;
}
.active {
height: 100px;
}