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

Can I link a folder to a specific page?


UtopiaCreates

Question

As brought up here: http://answers.squarespace.com/questions/8532/folder-navigation-top-folder-doesnt-link-to-anything-can-i-get-it-to-or-remove-link-behavior

Folders should have a click through link so that it can be clicked to go to another page. It should work the same as a regular folder in that it should still have an active colour if that has been set so that if you are on a page that is held within that folder or the page the folder link is connected to the "active color" works.

Please vote up if you agree.

Another possible option is to make a special kind of page that works like a folder in that anything placed under it shows up in navigation as a drop down but it is also a normal page and can have content on it. That would save having to create a special no linked page that works with the pass through. Maybe have a check box or such for people that want it to just act like a normal Folder.

Link to comment
  • Answers 38
  • Created
  • Last Reply

Recommended Posts

SUCCESS! I banged my head against the wall for the longest time trying to figure this out because none of the above code was working. I finally broke down and inspected my home page in the console and saw an error related to using mixed content. All the code examples in this thread were using the jquery script from HTTP, this makes sense since the question was originally asked a few years ago. This jquery script is now hosted with HTTPS as well.... big difference. I was using an insecure jquery script on a secure SS page, thus the mixed content error. So here's the solution, add an S to the end of the http in the jquery scripts URL

Old Example:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

New Example:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

Isn't coding fun? So as per the above example from JPWV, here's the correct way, or rather whats working for me:


<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
  $('.main-nav li a').each(function () {
if ($(this).text() == 'Folder1') {
$(this).attr('href','http://www.hsustudios.com/page1');
$(this).attr('onclick','true');
}
if ($(this).text() == 'Folder2') {
$(this).attr('href','http://www.hsustudios.com/page2');
$(this).attr('onclick','true');
}
  });
});
</script>














Link to comment

Hi there!

Tiny beginner question for you.

I changed : http://www.hsustudios.com/page1 with my website link but It leads to no were cause I created a mywebsite.com/name.i.want.for.this.folder.link but it doesn't exist so logically there is nothing related to each other.?

So my questions: - Do you paste this in the header? - How do you create the href link name? - Are the folder1 and folder2 detected automatically but the code through my website? - Is the src script is suppose to be my website name?

I'll be waiting from you! Thanks a lot Laury :)

Link to comment

You must be sure you are injecting this into the HEADER CODE INJECTOR space for HTML. This is not CSS.

To find this space, go to the editing pane where there is a list on the left that starts with PAGES and ends with HELP. Just above Help is the SETTINGS link. Click that, then Advanced, then Code Injector. The Header window injection place should be at the top of the that section.

Link to comment

Last try:


<!-- makes navigation folder a clickable link -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
 $('.main-nav li a').each(function () {
   if ($(this).text() == 'FolderName') {
       $(this).attr('href','http://www.TargetWebPage');
       $(this).attr('onclick','true');
   }
 });
 });
</script>



Link to comment

OK. Finally. This is what you paste into the Header Code Injector. Replace FolderName and TargetWebPage with your info. The first line with the < ... > is only a note and will not affect coding if deleted.

You can add more folder actions by adding the following code after the last single } .

Link to comment

Hi jpwv. Thanks for your reiterations. I appreciate your help, even though following instructions was not my problem.

I was having a very frustrating time. I was doing it right EXCEPT when I cut and pasted into a text editor, it was converting into smart quotes. D'oh! When I fixed those it now works beautifully!

Link to comment

This JavaScript works great for me in the desktop mode of the Wexley template.Instead of 'PayPal' the folder links to a gallery page ('/food/') which is placed in the "Not Linked-Section" – but in the mobile view this clickable folder is not displayed in the mobile menu. I need that folder beeing part of the mobile menu as well. Any ideas how to fix that?

Link to comment

To have a folder in the navigation header link directly to a page:

First you have to have a page to link to the Not Linked section of your page list.

Then you can use the Header code injection.
(Home)/ Settings/ Advanced/Code Injection/Header ... paste HTML code.


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
 $('.main-nav li a').each(function () {
if ($(this).text() == 'Folder1') {
$(this).attr('href','http://www.hsustudios.com/page1');
$(this).attr('onclick','true');
}
if ($(this).text() == 'Folder2') {
$(this).attr('href','http://www.hsustudios.com/page2');
$(this).attr('onclick','true');
}
 });
});
</script>

<!-- note -->

for adding invisible notes in html

This worked for me in Ishimoto.

Link to comment

You can add a line that says :


$(this).attr('onclick','true');

after the attr('href') line, that will fix it. So:


<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function() {
 $('.main-nav li a').each(function () {
   if ($(this).text() == 'Donate Now') {
       $(this).attr('href','http://www.paypal.com');
       $(this).attr('onclick','true');
   }
 });
});
</script>

Make sure the 'Donate Now' is the exact same text as in the HTML, capitalization matters.

Best,Forrest (cloudyreason.com)

Link to comment

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.

×
×
  • Create New...