Javascript Help - my breadcrumbs script to work correctly - javascript

Can someone take a look at this and tell me what I'm doing wrong? Basically the script is supposed to grab the URL of the page, splits the URL into an array via '/' and then document writes the HTML href link for each subdirectory. It kinda works until there is a webpage that is 2 folders deep from the root, and then it messes up.
If this is the URL for example: website.com/root/folder/subfolder/page.html it gives me:
> Home / Folder / Subfolder / Page
visually on the page, which is correct. (website.com/root/ is the actual home page.)
The link for 'Home' is correct and takes you to website.com/root/.
The second link for 'Folder' is correct and takes you to website.com/root/folder/.
However, the third link for 'Subfolder' is wrong and for some reason links to website.com/root/ again.
It's got to be something on line 14 where it says getLoc(i-3,subs[i],subs.length)+defp+ but I can't figure out what I'm missing.
Here is the script:
function breadCrumbs(base,delStr,defp,cStyle,tStyle,dStyle,nl) {
tit=document.title.replace(/Ak DRB > /g,"");
loc=window.location.toString();
subs=loc.split("/");
document.write('<strong>></strong> Home '+'<span class="'+dStyle+'">'+delStr+'</span> ');
if (loc.includes(".html") && !loc.includes("index.html")) {
a=1;
}else{
a=2;
}
for (i=4;i<(subs.length-a);i++) {
SUB=makeCaps(unescape(subs[i]));
document.write(''+SUB+' '+'<span class="'+dStyle+'">'+delStr+'</span> ');
}
if (nl==1) document.write("<br>");document.write('<span class="'+tStyle+'">'+tit+'</span>');
}
function makeCaps(a) {
g=a.split(' ');for (l=0;l<g.length;l++) g[l]=g[l].toUpperCase().slice(0,1)+g[l].slice(1);
return g.join(" ");
}
function getLoc(c,e,f) {
var d="";
if (c>0) {
for (k=0;k<c;k++) d=d+"../";
}else{
d="../"+e+"/";
}
return d;
}

OMG, I got it to work. I just had my relative path structure wrong and was trying to make it too complicated. All you need for the final getLoc function is:
function getLoc(c,e,f) {
var d="";
var g=f-5;
if (c==g) {
d="./";
}else{
d="../";
}
return d;
}

Related

JackBox- Responsive Lightbox - Image Viewer, use Javascript function instead of href

This is a long shot.... but I hope someone can help.
I'm using a JackBox - Responsive Lightbox - and it works fine with a static HTML, but I want to change the code to be more flexable.
I use DataTables and use a model to view more details - including photos of the main asset and an image if the area/asset is "excluded" - so there could be 100's of items in the list.
If I use the static link:
<a class="jackbox data-group="text_link" data-title="Text Link"
href="/system/showImage.php?
subFolder=assetPhotos/Legionella/Assets&filename=main121212.jpg">View</a>
Everything works fine...
However, if the global variable exclusion is set to "main121212.jpg" and I change the above to:
<a class="jackbox" data-group="text_link" data-title="Text Link"
href="javascript:showImageForJackBox('assetPhotos/Asbestos/Assets',
'exclusion')">View</a>
and have the function showImageForJackBox declared as to:
showImageForJackBox = function(path,outImageFile) {
switch (outImageFile.toString()) {
case "exclusion":
theFile = exclusion ;
break;
default:
theFile = "" ;
}
location.href = "'/system/showImage.php?subFolder=" + path + "&filename=" + theFile ;
}
I get an error in the debugger console of firebox saying:
referenceError: showImageForJackBox is not defined
javascript:showImageForJackBox('assetPhotos/Asbestos/Assets', 'exclusion'):1:1
Does anyone have any ideas on how I can go about ensuring the function is referenced.
Thank you in advance for any help given
ARGH Idiot!
I just needed to change the "Attributes" - so after the AJAX call to find the filename for the exclusion... I just changed the href and data-thumbnail Attributes!
exclusionPhoto = data.exclusionPhoto ;
if (exclusionPhoto === null ) { exclusionPhoto = "" ;}
var a = document.getElementById('viewExclusionPhoto');
a.setAttribute("href", "/system/showImage.php?subFolder=assetPhotos/Asbestos/Assets&filename=" + exclusionPhoto);
a.setAttribute("data-thumbnail", "/system/showImage.php?subFolder=assetPhotos/Asbestos/Assets&filename=" + exclusionPhoto);

Load html on an element with jQuery

I am trying to fill the html of a component with the result of an AJAX request, and it works... but only first time. This is for a phonegap application, and it tries to "encapsulate" a web on the app. I show you my code and after I´ll explain better.
My code is this:
function loadPage(rute, callback)
{
console.log("ruta: " + rute);
jQuery.get(rute, function(htmlTemplate)
{
var data = eraseExtraContentExternalPages(jQuery(htmlTemplate).filter("#wrapper"));
data = eraseLinksExternalPages(data);
console.log("#############BODY(wrapper)############# " + data.html());
jQuery('body').html(data.html());
});
}
function eraseExtraContentExternalPages(data)
{
data.find('#secondary').remove();
data.find('#dd_ajax_float').remove();
data.find('#author-bio-box').remove();
data.find('.googlepublisherpluginad').each(function(index){jQuery(this).remove();});
return data;
}
function eraseLinksExternalPages(data)
{
data.find("a").each(function(index)
{
var a = jQuery(this);
var href = a.attr("href");
if(href && href.indexOf(".jpg")==-1 && href.indexOf(".gif")==-1 && href.indexOf(".png")==-1 && href.indexOf(".jpge")==-1)
a.attr("href","javascript:loadPage('"+ href +"');");
});
return data;
}
What I do (I think is simple), I am trying to erease many html elements that are annoying on the app, and after change the href attribute of the "a" element, for a javascript action (loadPage), and it seems that works, becouse on the first console.log of the loadPage function I can see (when I press a link) how the rute is the correct, and on the second console.log I can see ALL THE CONTENT of data.html on the logcat (with eclipse), but the screen stay white-gray and with a little square on the left top corner...
Any Idea?? Why the html that I can see on the logs doesn´t load on the body??
Thank you very much!!

How Can I Insert My Javascript Into My Drupal Site/Node

I'm trying to insert a cookie that is provided by a video host that will resume a video where the user left off. They have an example that obviously works. When trying to insert this into my Drupal site, the cookie won't work. The video just starts back at the beginning.
I have enabled "PHP input filter", as I read that I needed to do that for drupal to insert the script. Please see the code that is in my node below.
Can anyone help me figure out why this isn't working, how to get it to work, or a better way of doing this with Drupal?
Thank you,
<script type="text/javascript">
wistiaEmbed.ready( function() {
var all_cookies = document.cookie.split(';'), // gets the value of the cookies on the page
cookie_str = "resume_video=",
resume_cookie = does_resume_cookie_exist(all_cookies);
function does_resume_cookie_exist(cookie_arr) {
var i, curr_string, found;
for (i = 0; i < cookie_arr.length; i++) {
curr_string = cookie_arr[i];
if (curr_string.substring(0,5) === cookie_str.substring(0,5)) {
// we've found it!
found = curr_string;
break;
}
}
return found;
}
function set_cookie_time(t) {
document.cookie = cookie_str + t.toString(); // this takes the time (t) and sets the cookie with that time
}
if (resume_cookie) {
num = resume_cookie.split('=')[1];
start_time = parseInt(num);
wistiaEmbed.time(start_time).play(); // plays the video at the specific time defined in the cookie upon return to the page
} else {
set_cookie_time(0); // places a cookie on the visitor
wistiaEmbed.play(); // starts the video from the beginning
}
wistiaEmbed.bind("timechange", function(t) { // on timechange, reset cookie
set_cookie_time(t);
});
wistiaEmbed.bind("end", function() { // if person has watched the entire video, sets the video to beginning upon retun
set_cookie_time(0);
});
});
</script>
<div id="wistia_npcc5k96s9" class="wistia_embed" style="width:640px;height:508px;"> </div>
<script charset="ISO-8859-1" src="http://fast.wistia.com/assets/external/E-v1.js"> </script>
<script>
wistiaEmbed = Wistia.embed("npcc5k96s9");
</script>**strong text**
What version of drupal are you using? Does the code that you gave actually output in your request response?
There are several solutions to this (IMO).
If the code is showing up in the response, it could be some other javascript error that preventing your code from executing.
If that snippet of code is applicable to all nodes of that type you can use the node_view hook in order to inject your code on that node type, for example (I am assuming D7):
function mymodule_node_view($node, $view_mode)
{
if($node->type =='video_page')
{
drupal_add_js('resume_video.js'); // this js holds your code snippet
}
}
Here's a reference that could help you out
https://api.drupal.org/api/drupal/modules%21node%21node.api.php/function/hook_node_view/7
You can similarly inject that snippet of code at the theme layer using a theme hook, probably hook_preprocess https://api.drupal.org/api/drupal/modules!system!theme.api.php/function/hook_preprocess/7
Hope that helps.

Script inside href how to

I'm using this link:
It is intended for use as a bookmark. When clicked it redirects the user to an url that takes the previous location removing the 7 first characters from it.
Instead of removing the first 7 characters from '+encodeURI(location.href)' I want it to do this:
if(encodeURI(location.href).match(/http:\/\//))
{
encodeURI(location.href).substring(7);
}
if(encodeURI(location.href).match(/https:\/\//))
{
encodeURI(location.href).substring(8);
}
if(encodeURI(location.href).match(/^www\./))
{
encodeURI(location.href).substring(4);
}
How could make this work inside the href?
thanks
How about something like this:
location = 'http://www.linkimprov.com/?ref=' + encodeURI(
location.href.match(/(?=https?:\/\/)?(?=www\.)?(.*)/)[1]
).substring(7);
Or in a link:
EDIT: Try this:
location = 'http://www.linkimprov.com/?ref=' + encodeURI(
location.href.match(/^(https?:\/\/)?(www\.)?(.*)/).pop()
).substring(7);

JQuery/Javascript works on & off

I am using JQuery 1.3.2-min in a project to handle JavaScript animations, ajax, etc. I have stored the file on the same server as the site instead of using Google. When I run the site locally on my development machine, everything works fine in FF, IE, Opera, and Safari (all the latest versions - I work from home and I only have 1 machine for personal use and development use) except for some CSS differences between them and when I go to the live site on my machine it works fine also. I have cleared my caches and hard refreshed the page, and it still works.
This is where it gets interesting however. When I send the site to my boss to test in various OS/Browser configurations, one page doesn't work correctly, some of it works, some doesn't. Also, the client (who uses IE 8) has also confirmed that it is not completely working - in fact he has told me that the page will work fine for a hour, and then just "turn off" for a while. I have never heard of this sort of thing before, and google isn't turning too much up. I have a hunch it may partly be with JQuery's .data(), but I'm not sure.
The page is basically nested unordered lists, and three basic actions happen on the list.
The top most unordered list is set to visible (all list via css are set to display: none to keep them hidden on a fresh page request); all list items divs are given a hover action of full opacity on mouseon, and faded back to 50% opacity on mouseoff; and then whenver a paragraph is clicked, the top most unordered list in that list item is displayed.
Here is my Javascript file for the page:
$(function() {
// Set first level ul visible
$('div#pageListing ul:first').css('display', 'block');
// Disable all the hyperlinks in the list
$('div#pageListing li a').click(function() {
var obj;
obj = $(this).parent(0).parent('div:first');
highlight(obj);
return false;
});
// List Item mouse hovering
$('#pageListing li').hover(
// Mouse On
function() {
if ($(this).children('div').attr('id') !== 'activePage') {
$(this).children('div').css('opacity', 1).css('filter',
'alpha(opacity=100)');
}
}, // Mouse off
function() {
if ($(this).children('div').attr('id') !== 'activePage') {
$(this).children('div').css('opacity', 0.4).css('filter',
'alpha(opacity=40)');
}
});
// Active list item highlighting
$('#pageListing li div').click(function() {
highlight($(this));
});
// Sub-list expanding/collapsing
$('#pageListing p.subpageslink').click(function() {
// Get next list
var subTree = $(this).parent('div').next('ul');
// If list is currently active, close it, else open it.
if (subTree.data('active') != true) {
subTree.data('active', true);
subTree.show(400);
} else {
subTree.data('active', false);
subTree.hide(400);
}
});
// Double clicking of list item - edit a page
$('#pageListing li div').dblclick(function() {
var classes = $(this).attr('class');
var classArray = classes.split(' ');
var pageID = classArray[1];
editPage(pageID);
});
// Handle button clicking
$('button#addPage').click(function() {
addPage();
});
$('button#editPage').click(function() {
var div = $('div#activePage');
var classes = div.attr('class');
var classArray = classes.split(' ');
var pageID = classArray[1];
editPage(pageID);
});
$('button#delPage').click(function() {
var div = $('div#activePage')
var classes = div.attr('class');
var classArray = classes.split(' ');
var pageID = classArray[1];
delPage(pageID);
});
});
// Highlighting of page when clicked
function highlight(obj) {
// Get previous hightlighted element
// and un-highlight
var oldElement = $('div#activePage');
oldElement.css('background', 'white');
oldElement.css('opacity', 0.4).css('filter', 'alpha(opacity=40)');
oldElement.removeAttr('id');
// highlight current selection
obj.attr('id', 'activePage');
obj.css('opacity', 1).css('filter', 'alpha(opacity=100)');
obj.css('background', '#9dc0f4');
// add appropiate action buttons
$('button.pageButton').css('display', 'inline');
}
function addPage() {
window.location = "index.php?rt=cms/editPage";
}
function delPage(page) {
var confirm = window.confirm("Are you sure? Any sub-pages WILL BE deleted also.");
if (confirm) {
var url = './components/cms/controller/forms/deletePage.php';
$.ajax( {
url : url,
type : 'GET',
data : 'id=' + page,
success : function(result) {
if (!result) {
document.location = "index.php?rt=cms";
} else {
window.alert('There was a problem deleting the page');
}
}
});
}
}
function editPage(page) {
var url = "index.php?rt=cms/editPage/" + page;
window.location = url;
}
Is it possible that you are linking to (some of) the script files using a src that points to a file on your local disk/HDD? If so, that would explain why it works only on your machine, as then only your machine has access to the script file.
Thank you one and all for your suggestions. The end problem was miscommunication. I work from home, and upload my projects to a SVN server, which the boss then uses to update the live server. Somehow, the correct files were not getting updated - a communication error on my part. Another possible reason was that the page, while being declared XHTML 1.0 Strict, had something like 50 validation errors (mosting incorrectly nested UL), and I cleaned that up to 5 errors. So thank you all, but again a sad example of the importance of team work communication.

Categories

Resources