We Keep Coding

Add Margin to buttons while translating in angular

I have this custom slider
https://stackblitz.com/edit/angular-ivy-airvm5?file=src/app/app.component.css
On Next and Previous buttons clicks images are getting changes from images array but main issue is when we click on next button while translating the next and previous button position are changed to top, but here i want when i translate as different slides will have different height of images so next and previous button should automatically positioned according to the height of images. I was trying to give margin top also
let currentMargin = parseInt(this.nextdiv.nativeElement.style.marginTop);
if(isNaN(currentMargin)){
currentMargin = 0;
}
let newMargin = currentMargin + 70;
this.next.nativeElement.style.marginTop = newMargin+'px';
screenshot:
Any solution Thanks

menu items getting highlight as I scroll to each section with deficiency

I just used this code to get my menu highlighted as I scroll down to each each section of my WordPress site:
(function($) {
$(document).ready(function(){
$("header nav ul").toggleClass("open");
$("section.container").addClass("section");
});
$(window).scroll(function() {
var position = $(this).scrollTop();
$('.section').each(function() {
var target = $(this).offset().top;
var id = $(this).attr('id');
if (position >= target) {
$('#primary-menu > li > a').removeClass('active');
$('#primary-menu > li > a[href=#' + id + ']').addClass('active');
}
});
});
}(jQuery));
css:
.active{
color: #fff !important;
}
Here is the link: http://scentology.burnnotice.co.za
Problem is that the last item(Contact) is not getting highlighted when I scroll all the way down up to contact section.
Also,if I click on a menu item,it goes to the respective section but that menu doesn't get highlighted unless I scroll the page a little bit down'.
How can I solve that?
Thanks in advance

NOTE: It seems that you took that code from my answer to this SO question, I have edited it to cover your case. Other people looking for more code can check it out for a snippet.
So, you have two problems:
The last item is not getting highlighted.
When clicking on a menu item, the page scrolls to the respective section but that menu doesn't get highlighted unless scrolling down the page a little bit.
Problem 1
This one is easy, you just forgot to add the id attribute to the last section :)
It should be:
<section id="contact" class="container contact-us section">
Problem 2
Your click event starts a scroll animation to the corresponding section but, since the navigation bar is on the top of the page, you made the animation to leave a little margin on the top. That margin prevents the section from reaching the top of the page, so the menu item doesn't get highlighted.
#Shnibble pointed you in the right direction, you can add a small positive margin to the value returned by $(window).scrollTop() (or a negative one to the offset().top of the element).
So, following the code you have included, it will be something like:
if (position + my_margin >= target) {
The margin could be the height of your navigation bar:
my_margin = $('#site-navigation').height();
You can, obviously, add a little more or less to tailor it to your needs.

There is a simple solution and it just requires a bit of additional math :)
You are measuring from the top of the (window) viewport and checking to see if it is greater than or equal to the top of a specified target div. Because your content sections are exactly 100% of the viewport, it is impossible for the top of the viewport ever be greater than or equal to the top of the last content div.
What you need to do is offset the point you are measuring from so that you are not measuring from the top of the viewport, but rather some ways down from the top, say halfway or 3/4 of the way down. This will solve both of your issues.
Edit: here is something to get you started, then play around with dividing the window height by 1/2 or something like that:
var position = $(this).scrollTop() + $(window).height;

Highlighted menu items are highlighting too early in a parallax effect

I'm trying to build a website with a parallax effect and dynamically highlighted menu items.
For the moment everything works fine (parallax and menu items) but combined the menu items get a strange behaviour. They are highlighted too early, so the menu items swap from 'home' to 'company' on beginning of the 'home' site and so on.
This is the JS code I am using
$(document).ready(function() {
$('.parallax').scroll(function() {
var position = $(this).scrollTop();
$('.parallax__group').each(function() {
var target = $(this).offset().top;
var id = $(this).attr('id');
if (position >= target) {
$('a').removeClass('active');
$("a[href='#"+id+"']").addClass('active');
}
});
});
});
As I said... it's well working but the menu items are not highlighted when it reaches a new group, but way earlier. What could be the source of the problem? I can provide more code if needed.

Using javascript to find the page number of the current view page in an iboooks epub

I am building a lightbox style div element for an ibooks epub. I want the div to be displayed on the current page being viewed at the time. If the image is on page two of the ebook, I want the lightbox to showup on page two. I have the div width and height set to fill the screen.
document.getElementById("LightBoxDiv").style.width=window.innerWidth+"px";
document.getElementById("LightBoxDiv").style.height=window.innerHeight+"px";
I can manualy set a fixed top value of the div if I know which page number an image is on. My device has a 460px height on the window. So for an image on page two, the top should then be 460 which is the beginning of the 2nd page.
document.getElementById("LightBoxDiv").style.top="460px";
However, as ebooks are dynamic in that the user can change the size of the text larger or smaller, the page upon which something might fall changes. I need a way to set the top dynamically based upon the current page. If I know the current page number being viewed, I can set the div top to
var lighboxHeight = (pagenumber-1)*window.innerHeight;
I tried using the window.pageYOffset to calculate the current page, but this always gives a 0 value as the page does not scroll in an ebook. Unfortunately, I can find no documentation or any reference describing how to use javascript to access the page numbers. Does anyone have any idea how to access or find the current page number in an ibooks epub using javascript?
Thanks,--christopher

I believe I found the solution. This question/answer helped a lot.
//window height
var winHeight = window.innerHeight;
//top of object to be placed in the lightbox
//can be any object
var curOjbTop = document.getElementById(svgId).getBoundingClientRect().top;
//body y value
var bodyTop = document.body.getBoundingClientRect().top;
//amount the object is shifted vertically downward from the top of the body element
var offset = curObjTop - bodyTop;
//page number of the object
//this is actually 1 less than the true page number
//it basically starts the page count at 0, but for actual page number add 1
var curPage = Math.floor(offset/winHeight);
//this sets the top edge of the lightbox at y=0 on the page the item is on
var lightboxTop = curPage*winHeight;
document.getElementById("LightBoxDiv").style.top=lightboxTop;
My lightbox div covers the entire viewing area, but if you wanted a smaller one that was centered, you would need to add an additional half of the window height and then set the top margin to be half the negative amount of the height you wanted.
For example if the light box was 200 x 200, then your lightboxtop would be
var lightboxTop = (curpage*winHeight)+(winHeight*.5);
var topMargin = "-100px";
It may need to be tweeked some, but overall it should work to determine a page number.

Modify Sidenavigation Which Highlights Which Part of Page is Viewed

I currently have a sidenavigation bar which continually checks the users scroll position and if it is greater than a specified .slide height, it adds a class .current to a certain div on a sidebar making it turn orange and thus indicates which part of a page the user is on. Right now, the code only works for one specific height of .slide but I would like to modify it so that each slide (i.e. slide red, slide green, slide blue which are the divs with the colored background) can be of different heights since my content for each section will vary in length.
The fiddle can be found here
JavaScript:
$(document).scroll(function() {
if($(window).scrollTop() > $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.sidenavigation li:eq('+newSlide+')').addClass('current');
}
if($(window).scrollTop() < $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.sidenavigation li:eq('-newSlide-')').addClass('current');
}
});

I was trying to help you with your code and then i realize how hard it is, so I know it is probably not what you really want, but I recommend you a great jQuery plugin, which will solve your problem very fast: http://imakewebthings.com/jquery-waypoints/