I created a Web App for NavBar and located it on my template. It is working fine.
{module_webapps,28592,a,,,,false,20,false,1}
And this is the code for this WebApp:
<li>
<a id="{tag_href-id}" href="{tag_href-id}">{tag_title}</a>
</li>
Then, for showing the active page as highlighted, I coded this jQuery in my template:
window.onload = function(){
var url = window.location.pathname;
var index = url.lastIndexOf("/") + 1;
var filenameWithExtension = url.substr(index);
var filename = "#" + filenameWithExtension.split(".")[0];
$(filename).addClass('active');
};
The idea is adding class="active" inside of a tag; if its id equal to last part of the URL.
I used the same idea before, without WebApps. I wonder that, is there any limitation about using jQuery in a page, to change something about an element which comes from Web Apps? Could it be related page`s loading order. Or am I missing another thing?
Related
Here's the issue:
Got multiple internal links on the web, still not connected to actual html files.
Im working with local files for the time being
Wanna make js redirect all of the dead links to one particular page (let's call the file: 404-error-page.html) up until I will finish the rest of html files to make those dead links active again
Purpose: wanna keep user away from seeing 404 blank page and instead show em some temporary page (404-error-page.html)
Sorry if that's messy - 1st time adding a question here.
HTML
<html><body><a href="random-link-directing-to-a-non-existing-page"></body></html>
JS
$('a').on('click', function(event) {
var $element = $(event.target);
var link = "404-error-page.html";
if(result.broken) {
if(result.http.response && ![undefined, 500].includes(result.http.response.statusCode)) {
event.preventDefault();
document.location.href = link;
}
}
});
I've already tried some alterations of this code but it's not working for me.
Firstly, need to make this functional on local files and then ofc online.
Any ideas?
Set the data-dead-link attribute to all your unfinished link tag as the follow.
Correct Link
<a data-dead-link>Dead Link</a>
<a data-dead-link>Dead Link</a>
Before the </body> tag insert the follow script
var deadLinks = document.querySelectorAll(`[data-dead-link]`)
deadLinks.forEach(el => {
el.href = "404-error-page.html"
})
I have issues firing this link (that triggers a script from Chargebee) when is added dynamically via JavaScript. When it's added directly in html it works normally.
The entire generated link is appearing correctly (populated with the variants) in browser when inspected just it doesn't fire.
Here are the pieces I have related to this:
The JavaScript part:
var checkout = document.getElementById("checkout");
var link = '<a href="javascript:void(0)" data-cb-type="checkout"' + data-cb-1 + data-cb-2 + data-cb-3'>Order</a>';
checkout.innerHTML = link;
A simple div:
<div id="checkout"></div>
The script from chargebee:
<script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="site-name"></script>
Once you've loaded chargebee.js script it starts to look for a tag a with specific data-cb attributes. The script does it one time only. If the tag a did not exist in the DOM then, the script does nothing. When you add the tag a later that makes no effect at all, because a "discovery phase" is over.
If you want to have more control over chargebee initialisation process, you should go for "Checkout via API" option provided by the developers.
P.S. There are two hacky solutions:
You may load Chargebee script after adding tag a to the DOM.
function loadChargebee() {
var script = document.createElement("script");
script.src = "https://js.chargebee.com/v2/chargebee.js";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
}
var checkout = document.getElementById("checkout");
var link = '<a href="javascript:void(0)" data-cb-type="checkout"' + data-cb-1 + data-cb-2 + data-cb-3'>Order</a>';
checkout.innerHTML = link;
loadChargebee(); // <=== add Chargebee.js
Leave the tag a in the DOM, load the script as usual but modify data attributes as needed after page load:
<a id="beecheckout" href="javascript:void(0)" data-cb-type="checkout" data-cb-1="" data-cb-2="" data-cb-3="">Order</a>
document.getElementById('beecheckout').setAttribute('data-cb-1','new data value');
My requirement is to show .tiff image on browser. So currently I'm showing tiff file on Internet Explore using img tag like below.
<img src="myTiff.tif" type="image/tiff" alt="My Tiff">
And it works perfect with the tif file having only single page. In case there would an multiple pages in .tif then the img tag only shows 1st image. User can not get option to view other image.
Sample tiff image
I already tried all the option suggested here
I'm using C# on server side & on front end using AngularJS. Any help would appreciated. Thanks :)
Edit
Would it be better way to go with AltraTiff plugin? I looks like working on Internet Explorer.
Content rendering is always browser's responsibility so you rely in its capabilities.
Maybe there is some plugin for some browser that supports multiple-page tiffs, but, if you can't control software installed in your clients, I think your best option would be to implement some pagination by separating pages server side.
You can achieve that easily with imagemagick.
The only drawback is that, if user try to download it, it will download only the single page he were currently viewing.
But yo can mitigate it by providing separate download link or, simply, linking full version to the displayed image. Example using jQuery:
<div id="tiffPager">
<a href="myTiff.tif">
<img width=200 height=200 data-pageCount=5 src="myTiff_page0.tif" alt="My Tiff">
</a>
<button class="pageBack"><<</button>
<button class="pageForward">>glt;</button>
</div>
<script>
$(function(){
var container = $("div#tiffPager");
var img = $("img", container);
var backBtn = $("button.pageBack", container);
var fwBtn = $("button.pageForward", container);
var pgCount = img.data("pageCount");
var currPage = 0;
backBtn.on("click", function(){
currPage = (currPage + 1) % pgCount; // Cycle though pages.
img.attr("src", "myTiff_page" + currPage + ".tif");
});
fwBtn.on("click", function(){
currPage = (currPage - 1) % pgCount; // Cycle though pages.
img.attr("src", "myTiff_page" + currPage + ".tif");
});
});
</script>
I'm a complete noob on javascript so I would need to know if and how this can be done:
I have a site with 2 languages, English and Italian. The Italian pages are on URL like
www.mysite.com/ita/index.hmtl
while english pages are on
www.mysite.com/eng/index.hmtl
The user changes langages from flag icons.
The problem is, I can't change the menu links separately for ITA and ENG sites, so i can't edit the html directly. So right now when an user goes on the english site, the menu links still point to italian pages.
So is there a javascript code to change ALL urls in the page, so when the user goes to the english version of the site on the page
www.mysite.com/eng/index.hmtl
all urls will be changed from
/ita/
to
/eng/
?
You can use regular expression to change links
var url ='www.mysite.com/eng/index.hmtl', lang = '/ita';
url = url.replace(/\/\w*/,lang);
console.log(url); => www.mysite.com/ita/index.hmtl
Keep language in cookie (jquery cookie plugin) and update all references on page load using default or cookie language.
JS
$("a.changeLang").click(function(e){
e.preventDefault();
$.cookie("lang", $(this).attr("href"));
});
var lang = $.cookie("lang");
$("a").each(function(ref){
$(ref).attr("href", $(ref).attr("href").replace("ita", lang).replace("eng", lang);
});
and HTML
<a class="changeLang" href="ita">ITA</a>
<a class="changeLang" href="eng">ENG</a>
I'm currently using this code:
<script type="text/javascript">
if(document.URL.indexOf("/aprol/") >= 0){
function replace_url(elem, attr) {
var elems = document.getElementsByTagName(elem);
for (var i = 0; i < elems.length; i++)
elems[i][attr] = elems[i][attr].replace('mysite.com/', 'mysite.com/eng/');
}
}
window.onload = function(){
replace_url('a', 'href');
}
</script>
and this as samlple html link
Link
But it works only on firefox, not on chrome or IE9.
Can't understand why honestly.
I have a wordpress page. I have a number of links which go to PayPalObjects. PayPalObjects requires that you put code in the footer of the page with triggers to IDs for the elements which trigger a purchase. eg...
<a id="buysong_4" target="PPDGFrame" title="Click here to buy this song now.">$</a>
...and then in the footer of the page:
<script type="text/javascript">
var embeddedPPFlow1 = new PAYPAL.apps.DGFlow( {trigger : 'buysong_1'});
function MyEmbeddedFlow(embeddedFlow) {
this.embeddedPPObj = embeddedFlow;
this.paymentSuccess = function() {
this.embeddedPPObj.closeFlow();
window.location.href = "http://whatever.com/success/";
};
this.paymentCanceled = function() {
this.embeddedPPObj.closeFlow();
top.location.href = "http://whatever.com/fail/";
};
}
var myEmbeddedPaymentFlow1 = new MyEmbeddedFlow(embeddedPPFlow1);
</script>
Now, since I have dozens of such links, I wanted to avoid hard coding these ids into the content. eg...
<a class="buysong" target="PPDGFrame" title="Click here to buy this song now.">$</a>
So I added the following jQuery:
jQuery('.buysong').each(function(index, element) {
jQuery(this).attr('id', 'buysong_' + (index+1) );
});
The rendered page correctly adds the ID attribute to each link, BUT the PayPal js does not trigger properly. IOW: I have to 'hardcode' the ids into the page. This makes me think that the jQuery is firing -after- the PayPal script.
So... how do I 'tell' the PayPalObjects script to only execute -after- the jQuery has assigned the IDs? OR... even if I accomplished that, would it -still- not work because assigning the ID attr. dynamically isn't reliable for what I want to do?
TIA,
---JC