Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
AbbyGoodson

Customize Index Navigation in York Template

Question

Site URL: http://www.chirp-design.com

I am using the York Template for a portfolio site. When you click on an index thumbnail to open up a project page and scroll to the bottom, the index navigation is setup to read "NEXT" (which takes the user to the next project in the index).

I love this feature, but would also like to include a "PREVIOUS" or "BACK" option as well so that users can navigate forward and backward through the index of projects. My site is not live yet, but here is a screenshot of the index navigation as it currently appears (just above the page footer).

Does anyone know how to incorporate custom code to the index navigation so that it can move backward as well?

Screen Shot 2020-06-25 at 4.27.07 PM.png

Share this post


Link to post

24 answers to this question

Recommended Posts

  • 0

Whats the password?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

I have the same question, wanting to add "Previous" to the already existing "Next"  but ALSO... I'm wanted to simply justify both to the left...

I think this could be solved with some Custom CSS, but I don't know much code...

Can anyone help?

https://gregoryherman.com/

Share this post


Link to post
  • 0

Sorry, it's within the pages... Example below ...

Here is the Centered "NEXT" button

I want to justify it left, like everything else, and if possible, add the previous button...

image.thumb.png.7996f3e950b3c7d692e36174d884ef4f.png

Share this post


Link to post
  • 0

Hi, @RyanDejaegher Thanks for responding...

Hopefully what I posted above gives you a more clear look...

I was trying to figure it out myself, am I getting close?

.index-next-link div {

    text-align:left;

}

Share this post


Link to post
  • 0
.index-next {
    text-align: left !important;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@GregHerman I am grasping at straws here with the prev button.......but......  give this a try:

Here's some CSS that we need to add:

nav.index-next {
    display: inline-flex !important;
    margin-top: auto !important;
}

.index-next .link-next-up {
    padding-right: 25px;
}

And some jQuery

$(document).ready(function() {
  var NextLink = $('a.active-link')
  var PrevLink = $(NextLink).prev('a')
  var PrevSpan = $(PrevLink).children('span').first()
  $(PrevLink).attr('class', 'index-next-link page-collection index-page-transition-link link-next-up');
  $(PrevSpan).attr('data-next-link', 'PREV');
})

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@AbbyGoodson, that code that I worked up was based around @GregHermans page. I do not know if it will work at all for yours.

I would need the password to see if it would work, or if it could be made to work.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@rwp Thanks for the effort, but it's not working..

I added the 1st part to the css custom section and the next part to the head of the code injection section under advanced. I assumed that is where jQuery should live.. I saw a lot of text at the top of the pages, if that is any clue?

Wish I could be of more help, but I really appreciate you and your efforts.

Thanks again!!!

Share this post


Link to post
  • 0
1 hour ago, GregHerman said:

@rwp Thanks for the effort, but it's not working..

I added the 1st part to the css custom section and the next part to the head of the code injection section under advanced. I assumed that is where jQuery should live.. I saw a lot of text at the top of the pages, if that is any clue?

Wish I could be of more help, but I really appreciate you and your efforts.

Thanks again!!!

You need to add the jQuery script, check my signature for instructions.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@rwp  THANK yOU AGAIN!!!  you are too kind and I sooo appreciate your efforts..

Unfortunately I'm still struggling with getting this to work.

I added the Jquery code

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

to the code injection .. 

And added <Script></script> tags to your jquery code. 

I've got your css in the custom css section and both the jquery codes in the advanced site wide injection.

Wish I could say it worked....Again, Thank you the effort... you rock.

Share this post


Link to post
  • 0
Posted (edited)
window.Squarespace.onInitialize(Y, function () {
  var NextLink = $('a.active-link');
  var PrevLink = $(NextLink).prev('a');
  var PrevSpan = $(PrevLink).children('span').first();
  $(PrevLink).attr('class', 'index-next-link page-collection index-page-transition-link link-next-up');
  $(PrevSpan).attr('data-next-link', 'PREV');
});

Try replacing the block of code with this one. The ajax loading is causing the issue.

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

BOOM!

That worked! DUDE Thank you so much.. I cant thank you enough for our efforts.. 

you are a coding badass, mad respect.  I owe u one. 

Thanks again Ryan

 

 

Share this post


Link to post
  • 0

Happy to help!


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@AbbyGoodson I just check really quickly, it looks the the code above will work for you too, let me know if it doesn't work right.

See my signature for how to use this code.

 Here's some CSS that we need to add:

nav.index-next {
    display: inline-flex !important;
    margin-top: auto !important;
}

.index-next .link-next-up {
    padding-right: 25px;
}

And some jQuery

window.Squarespace.onInitialize(Y, function () {
  var NextLink = $('a.active-link');
  var PrevLink = $(NextLink).prev('a');
  var PrevSpan = $(PrevLink).children('span').first();
  $(PrevLink).attr('class', 'index-next-link page-collection index-page-transition-link link-next-up');
  $(PrevSpan).attr('data-next-link', 'PREV');
});

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Thanks @rwp!

It looks like this code worked, just needs a little design finessing. Are any of the below options possible?

  • Can "PREV" text say "BACK" instead?
  • Can it be centered instead of left aligned?
  • Can some padding be added above the "PREV NEXT" text? 

Share this post


Link to post
  • 0

Change PREV in the last line to BACK. The css stuff I can do when I get home.

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@AbbyGoodson

Delete the CSS that you got from above

Replace it with this:

nav.index-next {
    display: inline-flex !important;
}

.index-next .link-next-up {
    margin: auto;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

This is looking great! My last question: can the BACK and NEXT text be a little closer together? Maybe 25px apart? See attached screenshot:

1134590192_ScreenShot2020-06-30at3_29_17PM.thumb.png.3823ab49376c9b52cf273f4f768da9e7.png

 

Share this post


Link to post
  • 0

Figured it out...... Change the code to this

nav.index-next {
    display: inline-flex !important;
	width: max-content;
}

.index-next .link-next-up {
    margin: auto;
    padding-left: 20px;
    padding-right: 20px;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...