Develop Reference

Get current URL and add something in front with JavaScript

For a multi-language website, I want two buttons for the two languages that exist on the website.
The standard url would be: mydomain.com/something (this would be in german for example) The english url for this is: mydomain.com/en/something
How can I set up the buttons to get the current url/ page (in this case /something and add /en in front of it? Everything I found was to add stuff after the full domain.
Thank you very much.

check Location Obj MDM docs
console.log(document.location.origin + "/en" + document.location.pathname)

I'm not sure what your end goal is but if it involves reloading the same page with the localisation in the URL (i.e. on button click the page reloads and the page's URL is changed to mydomain.com/en/something meaning that on your next button click, the page would need to reload and its URL would need to be mydomain.com/something again) then you may need to look into RegEx and running it against the current URL to then swap out the URLs in the button so that on click you go to the correct version of the domain.
If the end goal is to only get the current URL and toggle whether the localisation appears in the URL or not then take a look at the snippet below which should hopefully help you out a bit.
For some further reading, I think these resources may be helpful for you:
RegEx: Regular expressions guide
RegEx: Regex101 - this is essentially a playground for practicing and testing your RegEx.
Location Object: MDN or W3Schools
jQuery(document).ready(function($) {
var $languageToggle = $('#language-toggle');
var origin = location.origin;
var pathname = location.pathname;
$languageToggle.on('click', function() {
var $this = $(this);
var toLanguage = $this.data('to-language');
var currentLanguage = $this.data('current-language');
var localisation = '';
/**
* This if statement will help prevent the constructedUrl variable
* from ever having a url such as https://website.com//page
* (notice the double forward slashes after .com).
*/
if (toLanguage) {
localisation = '/' + toLanguage;
}
var constructedUrl = origin + localisation + pathname;
$this.data('to-language', currentLanguage);
$this.data('current-language', toLanguage);
$('#output').text(constructedUrl);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="output">Click on the toggle button</div>
<button id="language-toggle" data-to-language="en" data-current-language="">
Toggle language
</button>

var myFunc = () => {
window.location.href = window.location.href + "place you text here"
}
Click the button and the page will be edited
<button onclick="myFunc()">click me</button>

How to shorten url when sharing a webpage from my website on social media?

How to shorten url when sharing a webpage from my website on social media?
I hope it can be done with javascript and apis, I've checked the bitly api, but don't know how to get starting.
Thanks.

I have 2 useful resources for you:
This one for google url shortener: http://www.i-visionblog.com/2014/07/google-url-shortener-api-javascript.html
And this one for bit.ly: https://bdhacker.wordpress.com/2010/03/30/dynamically-use-bitly-in-your-site-easiest-way/
First, you need an account on http://bit.ly. To create one, go to the
site and register.
Once you’ve registered, login and go to your Account page. There, you
will find your API key.
Put this in your HTML HEAD:
<script type="text/javascript" charset="utf-8" src="http://bit . ly/javascript-api.js?version=latest&login=******&apiKey=*****************"></script>
(remove spaces in bit.ly url. stackoverflow doesn't allow to post answers with that url)
Put this before </body>:
<script>
// Bit.ly API
BitlyCB.shortenResponse = function(data) {
var sss = '';
var first_result;
// Results are keyed by longUrl, so we need to grab the first one.
for (var r in data.results) {
first_result = data.results[r]; break;
}
sss = first_result["shortUrl"].toString();
document.getElementById("qlink").value = sss;
}
BitlyClient.shorten(window.location, 'BitlyCB.shortenResponse');
</script>
And this, somewhere in your page:
<h3>Link to this page</h3><br>
Use this link to tell others about this page! <input onclick = "this.select()" type = 'text' id = "qlink" style = "width:100%;">

Why are disqus comments not loading over https?

The disqus comments are loading here: http://www.oddprints.com/help
but not here: https://www.oddprints.com/help any ideas?
All resources appear to be secure (protocol relative urls) so I don't think it's that.

It because disqus was treating the two urls as different and therefore loading different threads. If you want both http and https urls to have the same comments thread on it, you need to supply a canonical url in the disqus config. This is how I did it:
<div id="disqus_thread"></div>
<script>
/**
* https://disqus.com/admin/universalcode/#configuration-variables
*/
var disqus_config = function () {
this.page.url = "http://www.oddprints.com/help";
//this.page.identifier = "oddprints"; // add a different id here if you want a fresh thread....
};
(function() {
var d = document, s = d.createElement('script');
s.src = '//oddprints.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
Note that in the config I passed the http url as the canonical url and I've not set the page.identifier. I've done this so that it continues to serve up the comments I already had from back when it was just http and using an older version of the disqus snippet.

Disqus comment are loaded but Disqus consider these two page as different.
Did you follow that : https://help.disqus.com/customer/portal/articles/542119-can-disqus-be-loaded-via-https- ?

Tipue Search (Jquery)

I'm trying to customize a Tipue search script.
Currently the script is searching the entire HTML file (including metadata) and triggering false positives on the search results. I'd like to eliminate the metadata from the critera or only allow the script to search a specific DIV (i.e. #pagewrap).
Here is a link to the current script:
http://www.worldonecommunications.com/ndrill/tipuesearch/tipuesearch.js
(Lines 37-77)
The pages are being indexed in a separate file, but I think the problem lies in the file listed above.

I think you need to change these lines:
var t_1 = html.toLowerCase().indexOf('<title>');
var t_2 = html.toLowerCase().indexOf('</title>', t_1 + 7);
...
var t_1 = html.toLowerCase().indexOf('<meta name="description"');
var t_2 = html.toLowerCase().indexOf('"', t_1 + 34);
I'am also searching a way how to modify this engine to out results from page body.

For others who are interested:
The developer finally updated the search script to target only a specific DIV. The updated code can be downloaded from their site:
http://www.tipue.com/search/

Get current URL and modify subdirectory and then go to URL with Javascript

I'm creating a bilingual website for a client. Two versions of the site in different languages will be created and stored in two folders:
/en/
/chi/
What I want to do is create a link to toggle between the two languages. On the conceptual level, I understand that Javascript can detect the current URL and split it into its different components, modify parts of it (in this case change between /en/ and /chi/), and then go to that new URL when the link is clicked.
But I have zero knowledge in javascript so I have no idea how to execute... I have come across this page:
http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/
but it doesn't explain how to modify and go to the new link.
You help will be greatly appreciated!!

To not break usability considerations like Shift + Click to open in a new window, you should create a plain old link (<a>) that points to the other language URL. There's nothing wrong with building the link via JavaScript, but you could also do it on the server using PHP or whatever templating language you're using.
Here's a script that does this with JavaScript if that's what you decide you'd like to do.
<!DOCTYPE html>
<body>
Content before the link.
<script>
(function () {
// this assumes you're on the en version and want to switch to chi
var holder = document.createElement("div");
var url = window.location.href.replace("/en/", "/chi/");
var link = document.createElement("a");
link.innerText = "Chewa"; // or whatever the link should be
link.href = url;
holder.appendChild(link);
document.write(holder.innerHTML);
})();
</script>
Content after the link.
</body>

If you simply want to take the full URL and replace /en/ with /chi/ or vise-versa, use the code below.
HTML
<span onclick="SwitchLang()">View [Some other Language]</span>
JavaScript
function SwitchLang() {
//Does URL contain "/en/"?
if(window.location.href.indexOf("/en/") != -1) {
//URL contain "/en/", replace with "/chi/"
window.location.href = window.location.href.replace("/en/", "/chi/");
}
//Does URL contain "/chi/"?
else if(window.location.href.indexOf("/chi/") != -1) {
//URL contain "/chi/", replace with "/en/"
window.location.href = window.location.href.replace("/chi/", "/en/");
}
}
Or, a bit more concise (un-commented version)
function SwitchLang() {
if(window.location.href.indexOf("/en/") != -1)
window.location.href = window.location.href.replace("/en/", "/chi/");
else if(window.location.href.indexOf("/chi/") != -1)
window.location.href = window.location.href.replace("/chi/", "/en/");
}
Note: In JS, when you modify window.location.href, the new URL is automatically loaded.
Here's a working fiddle for you to play with.

It looks like you need to change the window.location.pathname. For example:
// assuming the url `http://www.example.org/en/foo/bar/page.html`
var paths = window.location.pathname.split("/");
// change `en`
paths[1] = "chi";
// go to the new url
window.location.pathname = paths.join("/");
See:
https://developer.mozilla.org/en/DOM/window.location