We Keep Coding

Make anchor link go some pixels above id

I'm currently working on a website and I'm having a trouble with anchors. My header is fixed and when I click on anchor it sends me on other page how it is supposed to be, but I'm missing 80 pixels which is height of my fixed header. There is a script that made accordion opened on new page when I click on anchor but it should scroll 80px less... here is some code I have over there in my .jsp file
<a href="${parentLink}#${menuItem.name}" class="${menuItem.classes[anchorClasses]}">
and there is a .js that makes my accordion opened on the new page
$(document).ready(function () {
if (location.hash != null && location.hash != "") {
$('.collapse').removeClass('in');
$(location.hash + '.collapse').collapse('show');
}
});
I think that you guys will need more info, so ask me anything that could help you. I'm new in this and I don't even know which code should I post here to help you guys realize what the problem is... Thank you (:

One common way is to add an invisible pseudo element to the original target element of the link via CSS, like this:
#your_anchor_id::before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
pointer-events: none;
}
This will "extend" the element with that ID in a way which causes the anchor to be 80px above the main element, without causing any other visible changes.

Another idea is to use smooth scrolling with an offset. (View the example "Full Page" by clicking that link at top right of the snippet window)
$("nav ul li a").on('click', function(event) {
if (this.hash !== "") {
var myOffset = $('#myOff').val(); //get value from input (offset value)
if (myOffset==='') $('input').addClass('alert');
event.preventDefault(); // Prevent default anchor click behavior
var hash = this.hash; // Store hash
// jQuery animate() method for smooth page scroll
// 900 is the number of ms to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - myOffset
}, 900);
} // End if
});
//$('div:contains(Section)').css('font-weight','bold');
html,body{margin:0;padding:0;font-family:Calibri;}
body{height:2500px;}
ul,li{margin:0;padding:0;}
*{box-sizing:border-box;}
section{
display: grid;
place-items: center;
width: 100%;
height: 500px;
}
nav{position:fixed;width:80vw;background:white;border:1px solid red;}
::placeholder{color:#ccc;}
nav ul li{
display: inline-block;
padding:0;
border: 1px solid rgba(200,200,200,0.3);
}
nav ul li:hover{background: #ddd;}
a{text-decoration:none;padding:10px 25px;display:inline-block;}
#one{background:palegreen; padding:50px;}
#two{background:palegoldenrod;}
#twa{background:lightblue;}
#fer{height:1500px;}
.alert{border:1px solid red;background:#ffc0cb99;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul>
<li>NAV / HEADER:</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li><input id="myOff" type="text" placeholder="Offset (e.g. 75):" /></li>
</ul>
</nav>
<section id="one">
<div>
<div style="text-align:center">Section One</div>
<div>Directions:<br>(a) View as Full Page (link at top right)<br>(b) Enter offset number (for how many pixels the smooth-scroll will stop short)<br>(c) Click nav "Two" or "Three" and observe<br>(4) Repeat using a different offset value<br>Note: The fixed header is deliberately not full width in order to show the top of the next section scrolling UNDER the header (undesireable) The offset prevents that, and is what you are asking about.</div>
</div>
</section>
<section id="two">
Section Two
</section>
<section id="twa">
Section Three
</section>
<section id="fer">
Section Four
</section>
Example code ripped off from:
w3schools Company Theme example

JQuery - only last event handler triggers in event delegation series?

I been trying to build an image slider from scratch that will slide automatically but then go to a certain slide when the corresponding dot at the bottom is clicked.
When I isolate and test each of my event delegation click functions individually, they work great to get the different photos to slide back and forth. But when all functions are together only the 3rd function works. Can you help?
To demonstrate I made a simple mock-up slider here which includes the following JavaScript/jQuery:
'use strict';
$(document).ready(function () {
//DOM cache
var $slider = $('section');
var $slideContainer = $slider.find('ul');
var $windowWidth = $slider.css('width');
var $windowWidthUnitless = $slider.width();
var $dot1 = $slider.find('#dot-1');
var $dot2 = $slider.find('#dot-2');
var $dot3 = $slider.find('#dot-3');
//config
var width = $windowWidth;
var doubleWidth = $windowWidthUnitless * 2;
$($slider).on('click',$dot1,function() {
$slideContainer.css('margin-left', 0);
$dot1.addClass('filled');
$dot2.removeClass('filled');
$dot3.removeClass('filled');
})
$($slider).on('click',$dot2,function() {
$slideContainer.css('margin-left', '-' +width);
$dot1.removeClass('filled');
$dot2.addClass('filled');
$dot3.removeClass('filled');
})
$($slider).on('click',$dot3,function() {
$slideContainer.css('margin-left', "-" +doubleWidth +"px");
$dot1.removeClass('filled');
$dot2.removeClass('filled');
$dot3.addClass('filled');
})
});
Acting on this html:
<section>
<ul>
<li>
<div id="slide-1"></div>
</li>
<li>
<div id="slide-2"></div>
</li>
<li>
<div id="slide-3"></div>
</li>
<li>
<div id="slide-1"></div>
</li>
</ul>
<div class="selected" id="dot-1"></div>
<div id="dot-2"></div>
<div id="dot-3"></div>
and CSS
* {
margin: 0;
padding: 0;
} /* just my default */
section {
overflow: hidden;
width:400px;
height:400px;
}
section ul {
width:1600px;
}
section li {
list-style-type: none;
display: inline;
float: left;
}
[id*="slide-"] {
height: 400px;
width: 400px;
}
[id*="dot-"] {
float:left;
height: 40px;
width: 40px;
border-radius: 20px;
position: relative;
bottom: 45px;
}
(if this helps, here's a more exact but still simplified version of my slider, that actually slides automatically as well and is meant to stop and go to a certain slide when a dot is clicked. Again, it only goes to the last slide.)

In each of the $($slider).on('click',$dotNumber,function() {...} lines, replace $dotNumber with '#dot-number'.
Example: $($slider).on('click','#dot-1',function() {...}
I don't know if there's a particular way to pass a jQuery object to specify a child element to target, but I do know that adding the CSS selector as the second parameter will do it. According to the man page, the second parameter (if it's not the callback) is a string.

dynamic breadcrumbs using anchor tags and isinViewport

Working on creating a small jquery plugin for a client's website that is a simple breadcrumb system using anchor tags, that changes the last element in the breadcrumb list based on which anchor tag is currently visible. Further, I'm using HTML5 data- elements to store each page name, so that I can add that as the second element in the breadcrumb list as well.
For visibility, I'm using this plugin: https://github.com/zeusdeux/isInViewport
This is the fiddle I'm working with: http://jsfiddle.net/7F59C/4/
Here is the HTML:
<div class="header">head element
<div id="breadcrumbs" data-page="About">
<ul>
<li>Home</li>
<li class="currentpage"></li>
<li class="active"></li>
</ul>
</div>
</div>
<div class="spacer"></div>
<div class="gridContainer">
<div class="space">
take up some space<br />
<a class="crumb" id="About" href="#">About Us</a>
</div>
<div class="space">
take up more space<br />
<a class="crumb" id="Other_heading" href="#">Other heading</a>
</div>
</div>
The JS:
$(document).ready(function() {
$jbread();
});
$.fn.jbread = function () {
//set bc as breadcrumbs list
var bc = $("#breadcrumbs");
//BUILD CURRENT PAGE BREADCRUMB ITEM
//set currentpage to current page's data-page value
var currentpage = bc.data("page");
//set currentpage_link to current page's url
var currentpage_link = window.location.pathname;
//add currentpage as next li in breadcrumbs list
$(".currentpage").html('' + currentpage + '');
//UPDATE ACTIVE ITEM IN BREADCRUMB LIST
$.fn.updateCrumbs = function () {
var currentactive = $(e.target);
$(".active").html(currentactive);
}
//WORK WITH ISINVIEWPORT PLUGIN
$('div.gridContainer > a.crumb').updateCrumbs();
$('div.gridContainer > a.crumb:in-viewport(10)').updateCrumbs();
$(window).scroll(function() {
$('div.gridContainer > a.crumb').updateCrumbs();
$('div.gridContainer > a.crumb:in-viewport(250)').updateCrumbs();
});
//STYLE BREADCRUMB LIST
};
And, for good measure, CSS:
#breadcrumbs ul {
list-style: none;
float: left;
padding: 2px;
}
#breadcrumbs ul li a {
text-decoration: none;
color: black;
}
.space {
height: 500px;
background-color: red;
}
.header {
position: fixed;
height: 100px;
background-color: #FFF;
width: 100%;
margin-top: 0;
}
.spacer {
min-height: 100px;
}
INTENDED FUNCTIONALITY:
As the user is scrolling down the page, when one of the anchor tags with the class "crumb" comes intoViewport (which I have set as 250-350 pixels down the page), I would like the list item with the class of "active" to be updated with the anchor tag that just triggered the function. I'm not sure if I'm using $(e.target) correctly, or if it will even reference the correct thing.
I'm hoping to get this function working, and then I need to create an actual demo page to flesh out styling the list after it is populated. That's for another question.
Any thoughts, comments, or criticisms are welcome as I am very new to jQuery and am questioning my logic on this one.

Looks like you want something like
$.fn.updateCrumbs = function () {
var currentactive = this.text();
$(".active").text(currentactive);
}

.replaceWith() to replace content in a div for different link elements

I am trying to load a div with different content based on the link I click...
While it seems to work for the first link when I click it, clicking the other links only replaces the content with the same content for 'encodeMe' , yet I have specified different content that I want to replace for 'htmlize-me'
The first run-through of this I did not use jQuery's .bind() function. I simply used .click() , and both had the same result. Looking through the jQuery API I thought using the .bind() function would bind each function within it to that particular page element, but it seems to apply it to all my links.
I've achieved the same effect using .hide and .show to toggle divs but I want to be more elegant about how I do that, and this was my attempted alternative...
here's the relevant html:
<label for="list-root">App Hardening</label>
<input type="checkbox" id="list-root" />
<ol>
<li id="encode-me"><a class="show-popup" href="#">encodeMe()</a></li>
<li id="htmlize-me"><a class="show-popup" href="#">htmlizeMe()</a></li>
</ol>
<div class="overlay-bg">
<div class="overlay-content">
<div class="the-content"></div>
<br><button class="close-button">Close</button>
</div>
</div>
here's the script I made to trigger the content change:
$('#encode-me').bind('click' , function() {
$('div.the-content').replaceWith('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
'Found in <p>[web root]/redacted/redacted.asp</p>');
});
});
$('#htmlize-me').bind('click' , function() {
$('div.the-content').replaceWith('Hi, Im something different');
});
});

Try something like this:
Use html() instead of replaceWith()
$('#encode-me').bind('click' , function() {
$('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>' +
'Found in <p>[web root]/redacted/redacted.asp</p>');
});
});
$('#htmlize-me').bind('click' , function() {
$('div.the-content').html("Hi, I'm something different");
});
});

replaceWith does exactly what it sounds like, it replaces the div with the h3, so when you click the second link there is no div.
Try setting the innerHTML instead
$('#encode-me').on('click' , function() {
$('div.the-content').html('<h3 style="color: #008ccc;"> function encodeMe( string ) </h3>Found in <p>[web root]/redacted/redacted.asp</p>');
});
$('#htmlize-me').on('click' , function() {
$('div.the-content').html('Hi, I\'m something different');
});

So I figured out a more clever way to do this! Use the DOM to your advantage - set up a nested list structure and change the content using .find() on parent and child elements the list.
Markup
<span style="font-size:1.4em">Type
<ul class="row">
<li>Blah
<div class="overlay-content">
<p></p>
<p class="changeText">Blah</p>
</div>
</li>
<li>Blah2
<div class="overlay-content">
<p></p>
<p class="changeText">Blah2</p>
</div>
</li>
</ul>
</span><br>
<!-- OVERLAYS -->
<div class="overlay"></div>
CSS
.close {
border-radius: 10px;
background-image: url(../img/close-overlay.png);
position: absolute;
right:-10px;
top:-15px;
z-index:1002;
height: 35px;
width: 35px;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:10;
height:100%;
width:100%;
background:#000;
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
display:none;
}
.overlay-content {
position:fixed!important;
width: 60%;
height: 80%;
top: 50%;
left: 50%;
background-color: #f5f5f5;
display:none;
z-index:1002;
padding: 10px;
margin: 0 0 0 -20%;
cursor: default;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}
Script
$(document).ready(function(){
$('.show-popup').click(function() {
var ce = this;
$('.overlay').show('slow', function() {
$(ce).parent().find('.overlay-content').fadeIn('slow');
});
});
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var docHeight = $(document).height(); //grab the height of the page
var scrollTop = $(window).scrollTop(); //grab the px value from the top of the page to where you're scrolling
$('.overlay').show().css({'height' : docHeight}); //display your popup and set height to the page height
$('.overlay-content').css({'top': scrollTop+100+'px'}); //set the content 100px from the window top
});
/*
// hides the popup if user clicks anywhere outside the container
$('.overlay').click(function(){
$('.overlay').hide();
})
*/
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
$('.close').click(function() {
$('.overlay-content').hide('slow', function() {
$('.overlay').fadeOut();
});
});
});

Parent() UL of div

HTML:
<ul id="column">
<li id="widget8">
<div class="testhub"></div>
</li>
</ul>
JS:
if ($("#widget8").parent("#dock")) {
$(".testhub").html("<p>dock</p>");
}
else {
$(".testhub").html("<p>not dock</p>");
}​
CSS:
#dock {
width: 90%;
height: 100px;
background-color: blue;
}
#column {
width: 90%;
height: 100px;
background-color: red;
}
#widget8 {
width: 90%;
height: 50px;
background-color: yellow;
}
.testhub {
width 50%;
height: 25px;
background-color: black;
color: white;
}​
http://jsfiddle.net/zVx8s/1/
All i am trying to do is get the ul that the li is in and if it is on #dock then write something to testhub. But doesn't seem to work, check the jsfiddle.
I presume i am using parent incorrectly.

Try this: Working demo http://jsfiddle.net/268mh/
Please note you can never have same id's in DOM. SO I have made widget8 to class instead!
Rest hope demo helps the cause! :)
code
$(".widget8").each(function() {
if ($(this).parent().prop("id") == "dock") {
$(this).find(".testhub").html("<p>dock</p>");
}
else {
$(this).find(".testhub").html("<p>not dock</p>");
}
});​
HTML
<ul id="dock">
<li class="widget8">
<div class="testhub"></div>
</li>
</ul>
<ul id="column">
<li class="widget8">
<div class="testhub"></div>
</li>
</ul>
​

The first problem is that on your fiddle you use 2 uls with the same id. Use class instead.
You have to loop thrue your lis and check parent's length.
$(".widget8").each(function) {
var $element = $(this).parent("#dock");
if($element.length > 0) {
var message = 'dock';
}
else {
var message = 'not dock';
}
$($element, this).html('<p>' + message + '</p>');
});
​
demo
So if you just want to test if has id you just have to use the right selector.
$('#dock .widget8').html('<p>dock</p>');
The selector above get elements which are inside #dock and has class .widget8.
demo

You forgot length to check if it actually exists.
if ($("#widget8").parent("#dock").length)
---^---

The problem is that this expression:
$("#widget8").parent("#dock")
evaluates to a jQuery object, and objects are always "true" values in JavaScript. (Always. Even new Boolean(false) is a "true" value.)
To see if the above jQuery object contains any actual elements, you can use the .length property:
if ($("#widget8").parent("#dock").length) {
(But I agree with jeff that it's more clear to write parent().is("#dock"): get the parent, check if it's #dock, rather than get the parent-if-it's-#dock, see if it exists.)

If you're trying to test the parent id, you can use this:
if ($("#widget8").parent().is("#dock")) {
$(".testhub").html("<p>dock</p>");
}
else {
$(".testhub").html("<p>not dock</p>");
}​