Dynamically loading sound link with Javascript - javascript

I am trying to get some dynamically loaded links to display via a javascript file and a JSON array(where links are contained).
Link1 is to another webpage, open in new tab is the hope.
Link2 is to a site hosting an mp3 of a sound. Hopefully get the sound to just play in this window, otherwise in a new tab.
My problem is I'm not too familiar with js syntax to know where I'm wrong.
The error is nothing happens: in the status bar at the bottom I see: "#http://etc.com" because of the # hash sign it doesn't show but I need the hash sign for the navigation/local links.
here is the link to what's on the server so you can see the big picture:
wordExplorer
Here is the code:
function SetAnchorProperties(aElemObj, classStr, hrefStr) {
var aStr = arguments[3];
if (aElemObj) {
if ((classStr) && (hrefStr)) {
aElemObj.setAttribute('class', classStr);
if (hrefStr.search("http")) {
(aElemObj.setAttribute('href', hrefStr));
} else {
(aElemObj.setAttribute('href', '#' + hrefStr));
}
console.log(classStr, hrefStr);
console.log(hrefStr.search("http"));
}
if (aStr) {
aElemObj.textContent = aStr;
}
}
}
Thanks so much!!
Cam

Related

Rewrite url doesn't work when opening in new tab

I am using a jS code to redirect all outbound links to the redirect page (which contains ads for me to monetize). It works quite well. But it doesn't work when the user chooses to open the link in a new tab.
Is there a way to fix it?
This is my code:
<script type='text/javascript'>
jQuery(document).ready(function () {
jQuery('a[href*="http://"]:not([href*="http://example.com"])').click(function (e) {
e.preventDefault();
var target = e.target || e.srcElement;
if ($(target).attr('target') == "_blank") {
window.open("http://example.com/redirect.html?url=" + $(target).attr('href'), '_blank');
} else {
window.location = "http://example.com/redirect.html?url=" + $(target).attr('href');
}
});
});
</script>
One option is to just go ahead and replace the actual link hrefs on page load, using a simple script like the one below. One added benefit of this is that it's a bit more honest/transparent to let the user know they're being redirected through a different site.
const links = document.querySelectorAll('a:not([href*="https://example.com"])');
for (let link of links) {
link.href = `https://example.com/?ref=${link.href}`
}
Google
Yahoo
Internal

Wordpress theme blocks target="_blank" on links. How do I reactivate it for some external links?

I'm building a photography portfolio website on Wordpress using this theme: http://wpshower.com/themes/expositio/ . The theme hasn't been updated in years but still works smoothly. I have an issue with assigning target="_blank" to some external links though. The option is there but it has no effect whatsoever.
I've looked for advice and have tried every available plugin that addresses the problem, with the best result being opening the external link in both a new tab and the current tab.
I've looked into all the theme files, they are not many, and thinking that this is a javascript issue, I have identified the following code. It deals with the mobile menu animations but it's the only mention of links.
It was also discussed in a similar thread in here: Wordpress navbar links using href="#" not working as a dummy link
$('a').on('click', function(e) {
e.preventDefault();
var _this = $(this);
// close mobile menu if it's open, redirect otherwise
if (_body.hasClass('toggled-on') && _this.parents('#page').length == 1
&& _this.parents('#primary-navigation').length == 0
) {
load_effect.menuOff();
} else {
load_effect.loader.show();
var href = $(this).attr('href');
$('.site').css('opacity', 0);
setTimeout(function() {
window.location = href;
}, load_effect.duration);
}
Finally, here is website using the same theme where the external links do open in a new tab: http://www.tokyogoodidea.com/
I'd be grateful for any advice on solving this little glitch. I'm not good at all with js and don't know what to change.
Here's my project's link: http://one.clrblnd.com/
Thanks in advance.
There seems to be no reliable way to open a new tab in Javascript (a quick search tells it could be tricky), and the code indeeed looks like it is blocking a new page being opened. You can probably try if this works.
Firstly after this line
var href = $(this).attr('href');
add another line that says (this line gets the value of target attribute/properties from the tag, and assumed to be _self if undefined)
var target = $(this).prop('target') || '_self';
Then look for this line
$('.site').css('opacity', 0);
What it does is to make the whole page blank essentially. You may want to do something with this, for example wrap it in a if statement so it doesn't execute when target="_blank". A quick way to fix it is by replacing it to
target === '_blank' || $('.site').css('opacity', 0);
Next replace (just a few lines after the previous one)
window.location = href;
with
window.open(href, target)
The respective block should look like
load_effect.loader.show();
var href = $(this).attr('href');
var target = $(this).prop('target') || '_self';
target === '_blank' || $('.site').css('opacity', 0);
setTimeout(function() {
window.open(href, target)
}, load_effect.duration);
This is asuming window.open works as expected (documentation is here). What happens in the code is that the author stopped the default behavior after clicking a link with
e.preventDefault();
in order to allow some fancy animation to complete before the browser proceeds to load the intended page. However by simplifying the page load with
window.location = href;
it ignores the target attribute/property of the respective <a /> tag.

How to check if the URL of another frame on my site contains a given string?

My site has a parent page with 2 iframes on it. Currently I have it all running how I would like, with the exception that using the browser back button only changes the content of 1 of the 2 iframes. I'm trying to make a check inside the child frames so that the correct content page is loaded in the sister iframe. My iframes are leftiframe and rightiframe.
This is the code I have at the moment (not working):
<script type="text/javascript">
window.onload = function() {
if(/iframe1.html/.test(parent.leftiframe.location.href))
{
}
else
{
parent.leftiframe.location.href="iframe1.html";
}
}
</script>
If I change it so that it is reading the string from within the current window, like so:
if(/iframe2.html/.test(window.location.href))
then it has no problems reading the URL and will change the URL of the sister iframe without issue. Why does parent.leftiframe not work in place of window?
Thank you!
Try using this instead:
<script type="text/javascript">
window.onload = function() {
if(/iframe1.html/.test(parent.leftiframe.contentWindow.location.href))
{
}
else
{
parent.leftiframe.contentWindow.location.href="iframe1.html";
}
}
</script>

Add parameter to URL with Javascript

I have a web page with a jQuery lightbox that opens automatically on page load. In the lightbox I have implemented the Facebook Like button (this is a 2 click solution for Facebook Like button in email). Now, when a Facebook user visits my web page by clicking on the "Liked" URL on Facebook I want to turn off the lightbox. I don't want to have to create two different pages (one with lightbox turned on and another turned off) and I think I can avoid this by adding a parameter to the URL with Javascript then turn the lightbox on/off based on that parameter. Is this a safe way to do this? How would I do this?
You can get URL params with this JS function that I found here:
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
Then *add use ?lightbox=1 e.g www.example.com?lightbox=1 and read it with the above function:
if(getUrlVars()["lightbox"]=="1"){
//...
}
*to add parameters you can either:
Change the a link href attribute element.href = "http://www.newURL.com?param=1"; and wait for the user to click them
Redirect to the new location window.location.href = "http://www.newURL.com?param=1";
I believe this is the rough code you're after:
<script type="text/javascript">
document.location="http://example.com/index.php?noLightBox=1";
</script>
Then on index.php, you'd want something such as:
<?php
function isset_or(&$check, $alternate = NULL)
{
return (isset($check)) ? (empty($check) ? $alternate : $check) : $alternate;
}
function getGETPOST($var)
{
return isset_or($_GET[$var],isset_or($_POST[$var],"Empty"));
}
?>
Example:
if(getGETPOST('noLightBox') != 1) {
// Code to display the light box comes here.
}
// Else normal page code
Hope this was helpful!
Source: http://php.net/manual/en/function.isset.php
& W3School's tutorials on PHP

sharepoint breadcrum trail editing on the fly

I have been searching for hours now and have found some code that claims to be able to do what i want however...it doesn't.
I am currently trying to remove Pages and .aspx off the end of my page name in the breadcrumb trail in sharepoint. Currently it look like....
mysite > myarea > pages >mypage.aspx
I have tried changing the SiteMapProvider and this takes away the pages link as well as the current page. It then looked like..
mysite > myarea.
I would like to have
mysite > myarea >mypage
I have tried using this snippet of code...I do not claim to own or to have developed this code.
var breadCrumbs = document.getElementById('ctl00_PlaceHolderTitleBreadcrumb_ContentMap')
if (breadCrumbs != null) {
if (breadCrumbs.childNodes.length >= 3) {
if (breadCrumbs.childNodes[2].innerHTML.indexOf('Pages') > 0) {
breadCrumbs.childNodes[1].innerHTML = "";
breadCrumbs.childNodes[2].innerHTML = "";
}
}
}
I put some document.writes in to see where the code was getting to and the breadCrums variable seems to be null therefore the code never gets to the juicy part :P
Any ideas hints tips would be hugely appreciated
Truez
I have run your code on a SharePoint site and was able to get the breadCrumbs element just fine. Have you verified that that is the correct ID of your breadcrumbs object. The ID you use is the default, but you should check. Just view source on the page and do a quick Ctrl-F and search for "Breadcrumb".
Too see if it is just a matter of placement, do this: On a target SharePoint page using IE, open the Web Developer tool (Tools > Developer Tools). Switch to the Script tab and press the Multi Line Mode button at the bottom of the script pane. Paste this code:
var breadCrumbs = document.getElementById('ctl00_PlaceHolderTitleBreadcrumb_ContentMap')
if (breadCrumbs != null) {
if (breadCrumbs.childNodes.length >= 3) {
if (breadCrumbs.childNodes[2].innerHTML.indexOf('Pages') > 0) {
breadCrumbs.childNodes[1].innerHTML = "";
breadCrumbs.childNodes[2].innerHTML = "";
} else {
alert('Pages node NOT found!');
}
} else {
alert('breadCrumbs only has ' + breadCrumbs.childNodes.length + ' children!');
}
} else {
alert('breadCrumbs NOT found!');
}
Then press the Run Script button. This code is just yours with some alerts added to help you see if/where it fails. If you get no alerts and the breadcrumbs element changes as you expect then yes it is placement. Otherwise, it depends on which alert you get. Let me know the results and I can help you correct the issue.

Categories

Resources