We Keep Coding

Changing logo color on scroll if background has the same color

my project (within Wordpress/elementor) has a number of .slide sections which have 100vh and 100vw.
it also has a fixed header with a svg #logoken hovering on the top of the page.
on scrolling down, the svg logo with id #logoken has to change color as determined in the .slide data attribute data-logo
i wrote the following code and the color change happens, but only for a second and in scrolling up, it doesn't work. i believe it has to do with my check for the slide positione, but i don't see how.
jQuery(document).ready(function( $ ) {
//Scroll action for logo & menu colors
$( window ).scroll( function(e) {
$('.slide').each( function(){
var theSlide = this;
var top_of_element = $(theSlide).offset().top;
var bottom_of_element = $(theSlide).offset().top + $(theSlide).outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if( (top_of_element >= top_of_screen) && (top_of_element < (top_of_screen + $(theSlide).height())) ) {
if ( $(theSlide).data('logo') == 'black'){
if(!$("#logoken").hasClass("black")){
$("#logoken").addClass("black");
}
}
else{
if($("#logoken").hasClass("black")){
$("#logoken").removeClass("black");
}
}
console.log ($(this).attr('id') +" is on top: and logocolor is" + $(theSlide).data('logo'));
}
});
});
});
this is temporary link: http://castaar.ws.webwow.be where you can see my code in action...

generate animation as if it were a marquee

I do not know much about css, but I think this code could help me generate a marquee. basically I want the animation that is done with the boxes, be done with the texts.
My main problem occurs with the animation, it is not very fluid, I want it to be more fluid and it starts from the end of the container to the left. How can I do it? I would be very grateful.
http://jsfiddle.net/joof5dhx/
<div id="horizontalScroller">
<div>it is a message a little more of 100 characteres</div>
<div>it is a message a little more of 110 characteres</div>
<div>it is a message a little more of 120 characteres</div>
<div>it is a message a little more of 130 characteres</div>
</div>
window.horizontalScroller = function($elem) {
var left = parseInt($elem.css("left"));
var temp = -1 * $('#horizontalScroller > div').height();
if(left < temp) {
left = $('#horizontalScroller').height()
$elem.css("left", left);
}
$elem.animate({ left: (parseInt(left)-60) }, 900, function () {
window.horizontalScroller($(this))
});
}
$(document).ready(function() {
var i = 0;
$("#horizontalScroller > div").each(function () {
$(this).css("left", i);
i += 60;
window.horizontalScroller($(this));
});
});
http://jsfiddle.net/hhcbtyyg/

You could just:
window.horizontalScroller = function($elem)
{
var left = parseInt($elem.css("left"));
$elem.animate({ left: (parseInt(left)-60) }, 900, function ()
{
// get the current left of the element
var currentLeft = parseInt($(this).css("left"));
// get the width of the element
var width = $(this).width();
// get the container
var container = $(this).parent("#horizontalScroller");
// get the width of the container
var containerWidth = $(container).width();
// check if the element goes out of the view item X + item w < 0
if ((currentLeft + width) <= 0)
{
// put it on the opposite side: simply container w + item w
$(this).css("left", (containerWidth + width) + "px");
}
window.horizontalScroller($(this))
});
}
I just don't understand why you use height in your code above. If there is something I don't know let me know.
UPDATED:
To make the items appear on the leftmost by default:
$(document).ready(function() {
var container = $("#horizontalScroller");
var children = $(container).children();
var containerW = $(container).width();
// Loop through each item of container
for (var i = 0; i < children.length; i++)
{
var item = children[i];
var itemW = $(item).width();
// this is simply the space between them, remove if you don't need it
var padding = 10 * (i + 1);
// simply: padding + Container Width + (Item Width * (i + 1))
// (Item Width * (i + 1)) because you need to position each element beside each other.
$(item).css("left", (padding + containerW + itemW * (i + 1)) + "px");
window.horizontalScroller($(item));
}
});
your updated fiddle
hope that helps

Hi checked this version of your jsfiddle, i did some modificaitons, since your animation starts from whatever the value of height is your div had. check this I tried to match the height of your css and width in your css, i just noticed that the "left" var in your js gets the height of your element.
CSS:
#horizontalScroller {
position: absolute;
width:300px;
height: 300px;
border: 1px solid red;
overflow: hidden;
}
Maybe you can get some tips how to accomplish it in responsive way.
JSFIDDLE

jquery slide div by changing margin

I'm making left/right buttons to make a div slide. It slides by changing the left margin. What I'm trying to do is have it check the left margin and then add/subtract pixels to it. So when the page loads, left margin should be 0. Then you click the button and it checks the margin, finds it's 0, adds 150 and sets the left margin to 150. And then if you click it again, it checks the margin, finds it's 150 and adds another 150 and sets the margin to 300.
It succeeds in moving the margin from 0 to 150, but i can't get it to go to 300. I'm thinking it's not able to determine the margin correctly. Any ideas how I can fix this? Thanks!
$('#left').click(function(){
var pos=$('#contentarea').css("margin-left").replace('px', '');
pos=pos+150;
$('#contentarea').animate({ 'margin-left': '-' + pos + 'px'}, 1000);
return false;
});

There is no need to get current margin-left value, you can use the '+=%value%' and '-=%value%' operators. This will add/substract from the current value the specified value.
$('#left').click(function(){
$('#contentarea').animate({ 'margin-left': '+=150px'}, 1000);
return false;
});

try this,
use for Get Margin
$('#contentarea').css("margin-left")
it will return margin default is "PX".
Use For Set Margin
$('#contentarea').css("margin-left","Your Size");
Default size is "PX" not need to provide size with "PX".
Try this function
$(document).ready(function () {
$('#contentarea').css("margin-left", "0");
});
$('#left').click(function () {
var pos = $('#contentarea').css("margin-left");
var size = 0;
if (pos == "0px") {
$('#contentarea').css("margin-left", "150");
}
else {
size = parseInt(pos.slice(0, -2));
size = size + 150;
}
var pos = $('#contentarea').css("margin-left", size);
$('#contentarea').animate({ 'margin-left': '-' + pos }, 1000);
return false;
})

Use parseInt instead of replace to get css margin left value.
$('#left').click(function(){
var pos = parseInt($('#contentarea').css("margin-left")) + 150;
$('#contentarea').animate({'margin-left' : '-' + pos + 'px'}, 1000);
return false;
});

Popover Placement depending up on space available.

Please have a look at the attached image.
As you can see i am showing a popover. Basically i want to change the placement of the popover depending up on the space available( left or right ). Right now its going outside of an image.
Its a fancy-box(iframe)
Showing the popover using this code.
// Position and show the message.
this.message
.css({
left: (tPosition.left + "px"),
top: ((tPosition.top + t.outerHeight()) + "px")
})
.show();

I would do something like this:
this.message
.css({
left : function () {
if ( tPosition.left + $(this).width() >= $(this).parent().width() ) {
return $(this).parent().width() - $(this).width();
}
else {
return tposition.left;
}
},
top : function () {
if ( tPosition.top + $(this).height() > $(this).parent().height() ) {
return $(this).parent().height() - $(this).height();
}
else {
return tposition.top;
}
}
});
Basically you need to check if the popup is going to exceed your containing box boundaries before you show it and adjust it appropriately. On the horizontal axis this is as simple as making sure that mouse position x + the width of the popup is not greater than the width of the parent container. On the vertical axis you want to make sure that mouse position y + the popup height is not greater than the parent container height.

adjust div margin top using variable - jquery

I have a diva and its height is auto calculated using jquery using
$(window).load(function(){
$(window).resize(function(){
var height = $(this).height() - $("#header").height() + $("#footer").height() - 35
$('#content').height(height);
})
$(window).resize();
});
I have another div with id content2 and I want to set the value stored in the variable var height as its margin-top. How can I do this??
Thanks in advance...:)
blasteralfred

Use the .css() method.
$(window).load(function(){
$(window).resize(function(){
var height = $(this).height() - $("#header").height() + $("#footer").height() - 35
$('#content').height(height);
$('#content2').css('marginTop', height); // <-- set here
});
$(window).resize();
});

$('#content2').css('margin-top',height);

//Calculate the height of the offset needed.
var height = $('.navbar-fixed-top').height() + $('.navbar-static-top').height() + 70;
//Then on click on the navbar tab change the offset of the div according, to the top of the window
$('#r_overview').click(function () {
$(window).scrollTop(($('#hackathon_overview').offset().top)-height);
});
$('#r_rules').click(function () {
$(window).scrollTop(($('.rules_row').offset().top)-height);
});
Hope this helps