Squarespace per page custom navigation links - redirect

So I've spent a day on Google, and trying bits of jquery/javascript to do what I'm looking to do and am officially stuck.
I'm building a site using Squarespace, with the Marquee theme applied. I would like to be able to add a custom link in the primary navigation to send users to an alternative language version of each specific page.
But, I'm struggling. Ive found solutions on here that should work, but I don't think I'm applying it right. Ive tried adding a single link to the navigation and using a script on each page (in the code injection point of the head section) point that link somewhere else.
This would mean I have a single link in the navigation (which is standard across the site) pointing users to whichever page I want...on a per page basis. I know there is a solution out there....just can't make it work!
The section I need the link to work from is:
<div id="desktopNav" data-content-field="navigation-mainNav" data-annotation-alignment="bottom left">
<nav class="main-nav" id="yui_3_17_2_1_1450478013910_660">
<div class="nav-wrapper" id="yui_3_17_2_1_1450478013910_659">
<ul class="cf" id="yui_3_17_2_1_1450478013910_658">
<li class="page-collection">
<span>Menu</span>
</li>
</ul>
</div>
</nav>
</div>
None of this can be edited directly though...
I was thinking something like this could work, but I cant work out how to apply it to my situation...
Change href value for a hyperlink
Any help, gratefully received!

I fixed it...using this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href*="original.site"]').attr('href', 'http://website.com');
});
</script>
It allows me to point a single link in the navigation (which cant be edited directly) to whatever I want it to go to.

Related

Mathjax in Github pages

I have started a new project in Github and as I will need to collaborate with people, I wanted to start a decent documentation. I would like to use Github Pages for this task, but the documentation will need to include many equations, as for instance https://wec-sim.github.io/WEC-Sim/theory.html.
I have read on-line on numerous posts that Mathjax provides a good tool to read equations on browsers and has been linked to Github pages. However, although I tried to follow many different strategies, I have not been able to get my Page to show any equations yet.
You can find my project at https://github.com/enricoande/uuv and the corresponding page at https://enricoande.github.io/uuv/. The page is built from https://github.com/enricoande/uuv/blob/master/docs/README.md.
Initially, I was not able to display equations at all, but could see the text in the Page. Now, I am not even able to see the page. This has happened after adding the file https://github.com/enricoande/uuv/blob/master/docs/_layouts/page.html which reads
<script type="text/javascript"
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
Is it possible that the reason why I can no longer see my page is that Mathjax is too slow (I have found comments on this regard on-line)? Otherwise, have you got suggestions on what I could do to fix the Page to display the equations?
As you can see I am a beginner with Github pages and html.
Any suggestion is well appreciated as I am now utterly stuck. Thank you for the help!
If I open the referenced JS file at https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML, I see
console.warn('WARNING: cdn.mathjax.org has been retired. Check https://www.mathjax.org/cdn-shutting-down/ for migration tips.')
So check https://www.mathjax.org/cdn-shutting-down/ for detailed migration tips.
Example solution
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?...">
</script>
If you open the HTML source of your page, you'll notice that it contains nothing but the script tag.
This is expected since your page template is not actually a template -- for that it would have to contain {{ content }} or similar liquid templating tags so that it can pull content from the actual page.
For example, https://github.com/jekyll/jekyll/blob/master/docs/_layouts/page.html has
---
layout: default
---
<section class="standalone">
<div class="grid">
<div class="unit whole">
<article>
<h1>{{ page.title }}</h1>
{{ content }}
</article>
</div>
<div class="clear"></div>
</div>
</section>
You will then have to create an index.html file in your docs folder that starts with
---
layout: page
---
so that it pulls in the page template (and the script tag).
Try installing jekyll and generating the default site to evaluate good defaults; see the docs for more information on that. Usually, a script tag appears in a head, header or footer template.

Kentico 7 create content placeholder in Portal Master to use in ASCX in inherited page

Working in Kentico 7 on an Ad-Hoc page that inherits from Portal Master. I want to insert some literal script or code right before the </body> tag in the rendered ad-hoc page.
I thought I'd have to do this by editing the portal master and adding the following:
<cms:CMSPagePlaceholder ID="plcBodyEnd" runat="server">
<LayoutTemplate>
</LayoutTemplate>
</cms:CMSPagePlaceholder>
and then in the layout of the Ad-Hoc page do this:
<cms:CMSContent runat="server" id="cntLeft" PagePlaceholderID="plcBodyEnd">
<script type="text/javascript">
ProviderConnections.Transparency.initializeWidget({ });
</script>
</cms:CMSContent>
This worked fine until I went to the design tab on the Ad-Hoc page, where I got the following error:
Object reference not set to an instance of an object.
I don't want to register script blocks. I just want to put text in the Ad-Hoc page that goes there before the </body> tag, which is controlled by Portal Master.
What am I doing wrong?
I'm not 100% sure what you are trying to achieve. Giving an example or attaching a screenshot would be very helpful.
Here are the ways of attaching JavaScript in Kentico:
Through portal engine:
Use JavaScript web part - that gives you an option of choosing where the script should be located
Programmatically from code-behind:
Use CMS.Helpers.ScriptHelper API (wrapper around ASP.NET's ClientScriptManager)
ScriptHelper.RegisterStartupScript() to put the script at the end of the page
ScriptHelper.RegisterClientScriptBlock() to put the script before page's elements
The difference between the two is well explained here.
Programmatically from ASPX markup:
Put your <script> block to a desired location in your .aspx / .ascx files
Evaluate a code-behind variable containing script
<asp:Button ID="btnOK" runat="server" Text="OK" />
<script type="text/javascript">
<%= fieldWithActualScript %>
</script>

How to use facebook share plugin using bootstrap button?

I am trying to use facebook share button to my wordpress theme. I have use this code for that
<div class="fb-share-button btn btn-default" data-href="<?php the_permalink(); ?>" data-type="button_count"></div>
It is showing the share button. You can check the result here http://www.racecarwow.com/crazy-crash-v2-0/ . But my goal is , the share button will be look like the share button of this site http://blog.petflow.com/bravo-heroic-little-girl-saves-a-trapped-puppys-life/ .
I think, http://lipis.github.io/bootstrap-social/ will be a good solution for me. But i could not understand how can i use <div class="fb-share-button btn btn-default" data-href="<?php the_permalink(); ?>" data-type="button_count"></div> to that button. Please help me.
Yes ! i have got the solution by combining following the two site
http://ostr.io/code/html-social-like-share-buttons-no-javascript.html
http://lipis.github.io/bootstrap-social/
Hope it will be helpful for other person.
Well, it appears, that you have a slight mistake in your code, there is no function like the_parmalink() in Wordpress so far, but the correct one is the_permalink().
This function retrieves the permanent link to the post currently being processed in The Loop (as you can guess from it's name).
This tag must be within The Loop, and is generally used to display the permanent link for each post, when the posts are being displayed. Since this template tag is limited to displaying the permalink for the post that is being processed, you cannot use it to display the permalink to an arbitrary post on your web site.
Refer to get_permalink() if you want to get the permanent link for a post, given its unique post id.
So fix your code and try again:
<div class="fb-share-button btn btn-default" data-href="<?php the_permalink();?>" data-type="button_count"></div>

Facebook comment box with data-href using anchor issue

Currently I have 3 comment boxes on a single page. The page has three tabs that display different content, and each tab content has its own comment section, differing from the other two.
To make sure unique comments are loading for each tab, I am currently using something similar to:
<div class="fb-comments" data-href="http://webpage.com/index.html#tab1"
data-num-posts="2" data-width="470"></div>
<div class="fb-comments" data-href="http://webpage.com/index.html#tab2" ...
<div class="fb-comments" data-href="http://webpage.com/index.html#tab3" ...
This works in displaying the relevant content. However, when someone replies to one of these comments, the original commentor receives a link on their fb profile that appears as:
http://webpage.com/index.html?fb_comment_id=fbc_26547577547547_477747457_3745757457435737#4574575475
The problem is that this link the user is given does not show the relevant comment thread, or even the anchor based data-href comment box. Perhaps the end anchor is tripping up the display? If so, is there a paradigm for having different facebook comment boxes on a single page?
Thanks for any help solving this annoying issue.
I implemented something similar using this code
<div class="fb-comments" data-href="http://stabmail.com/study-groups-tutoring/#comm-enl" data-width="880" data-num-posts="20"></div>
<div class="fb-comments" data-href="http://stabmail.com/study-groups-tutoring/#comm-esl" data-width="880" data-num-posts="20"></div>
<div class="fb-comments" data-href="http://stabmail.com/study-groups-tutoring/#psyc" data-width="880" data-num-posts="20"></div>
Perhaps your issue could be solved by simply removing 'index.html', as Facebook would then treat the '#tab' as the page, and not a link to a different part of the page
My solution can be seen working here http://stabmail.com/study-groups-tutoring/

How can I redirect automatically to an other page of my WebApp

I am currently developing a Web App under jQTouch, and I want to know how I should proceed to redirect the user automatically to another page of my Web App.
For instance, let's suppose I have this code :
<div id="foo1">
...
</div>
<div id="foo2">
...
</div>
Now, let's suppose that the currently visible block is foo1. Which code should I write in my JavaScript file to redirect to block foo2 (as though I clicked a link with href="#foo2")?
Thanks and sorry for my English (I'm French).
You may use the jQT.goTo() to transfer to another page, e.g.
jQT.goTo('#foo2', 'slideup');
If you just want to trigger a click event on a link, you could use the click function in jQuery:
<a id="goToFoo2" href="#foo2">Go To Foo2</a>
<script>$("#goToFoo2").click()</script>
A standard link
Link
will not work, but you are on the right track, it just has to be in the correct setting (either a button, or a list). so either:
<ul class="rounded">
<li class="arrow">
Link
</li>
</ul>
or
<a class="button" href="#foo2">Link</a>
will work.