How to debug bookmark anchors not working because of JavaScript - javascript

I came into an issue where I thought all of my links containing anchor bookmarks (ie: "/index.php#top") were not working with FireFox. I came to the conclusion that there is some JavaScript within the Joomla 2.5 template I am developing that is killing off all of my links within my pages that contain hash marks (making them not go anywhere).
To see what I am talking about, here is my template that is working correctly:
http://www.lawsonsp.com/ink-information/textile-plastisol-inks?jtpl=8
and here is my template containing the issue:
http://www.lawsonsp.com/ink-information/textile-plastisol-inks?jtpl=9
On this page (on both templates) the image links at the top of the main content should link down to their corresponding sections below (ie: "#white")
How do I go about diagnosing WHICH Javascript code is killing the links containing hash marks? (preferably with FireFox, but with any method would be appreciated)

I recently had to tackle this exact problem. I found using jQuery to listen for and manage the event was the most effective solution. Here is a sample of the code I used:
JHtml::_('jquery.framework');
jQuery(document).on('click', '#go-to-my-anchor', function(e) {
e.preventDefault();
window.location.hash = '#my-anchor';
});

I found that, in the lower section of the jqm.init.js file, some settings are initialized and/or deactivated before JQuery mobile is loaded. A couple of these lines are commented out by default, and I found two that correspond to handling links with a hash like in my issue.
I've made sure the following lines are uncommented to allow normal link handling by the browser instead of JQuery (I'm pretty sure)
$(document).bind("mobileinit", function() {
...
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
...
});
If anyone sees a problem with this, please let me know as I am admittedly new to JS coding...

Related

JS works on some pages but not others... file exists in page source though

I don't know much javascript so I'm pretty much copy-pasting. I'm making a website and there is a navigation sidebar. I have this script to toggle a class the sets display to none.
$(document).ready(function () {
$("#sidebar-toggle").on("click", function () {
$("aside.navigation").toggleClass("no-sidebar");
});
});
I know the code works because it functions perfectly on a select few pages - views that happen to be defined in a specific Flask blueprint. Not on any other page.
I've checked that the structure doesn't change between pages (maybe I made a jinja template mistake) and it doesn't - all referenced elements exist and have the correct ids and classes. The javascript file containing the script above is loaded on every page and viewing it through the browser shows the correct code.
I'm hoping this can be resolved by a misunderstanding in how js files work and/or the syntax above. If anything other info would help, lmk.
Okay the non-functioning pages were throwing a type error that referenced some code for modals (that was also in main.js) above the sidebar code. The problem was solved by moving the sidebar code above the problematic code.
Now I need to figure out why a11y dialogs are throwing an error on some pages and not others...
Edit: Solved that too.
In my case base.js contained the following code:
var cast_crew_modal = document.getElementById('cast-crew-dialog')
var cast_crew_dialog = new A11yDialog(cast_crew_modal)
cast_crew_dialog.on('show', function (cast_crew_modal, cast_crew_trigger) {
console.log(cast_crew_modal)
console.log(cast_crew_trigger)
})
Great except the cast_crew_modal only exists in Flask views defined in the Production blueprint. On all other pages, that first variable gets set as none/null because it can't find #cast-crew-dialog. Hence why the original sidebar code only worked on production pages.

How To Access and Click Button PhantomJS

I am trying to automatically download a plugin on my wordpress site by implementing phantomJs. For some reason, I cannot seem access the download button (shown below)
This is the HTML code to the image (with domain sensitive information blurred out for security purposes)
So far, I have tried accessing this element by using the following code:
function() {
page.evaluate(function() {
let mainLink = document.querySelector('a[data-slug="better-wp-security"]')
mainLink.click()
})
}
Some things to mention:
This function, as it is part of a larger file, will NOT execute until the page has finished loading.
PhantomJS is executing correctly, there are no problems with permissions
The script before-hand is properly accessing the install plugins page, which I verified by capturing screenshots before trying to click.
I have defined click earlier int he file, it works perfectly.
Any ideas how I can accomplish this? Thanks all!
ADDED INFORMATION:
It seems as if the path from the main div element is as follows:
#the-list .plugin-card plugin-card-better-wp-security .plugin-card-top .action-links .plugin-action-buttons .install-now button
I imagine the solution to this question has something to do with this sequence.
I was able to accomplish this by now going after the data-slug attribute, but rather going after the href element itself. Although I can't generate my own wponce value without the use of the Rest API, I was able to search the document to find an href that contained certain parts of the url. This is the final code below:
document.querySelector('a[href*="action=install-plugin&plugin=better-wp-security"]').click()
That's it! Simple and easy!

Alter Youtube Video Page using Chrome Console JS & CSS

I was wondering if I could adjust the style of some html elmements on a web page using the google chrome console.
I watch podcasts on youtube. And I hate the fact that youtube suggests related videos that are miles ahead in the podcast timeline (i'm trying to catch up). I want to adjust a couple of element styles on the site.
What I want to achieve is to run the following code every time a youtube video page loads:
function youtubeVideoPageLoad()
{
youtubeFunction();
$('body').on('transitionend', function(event)
{
if (event.target.id != 'progress') return false;
$('#watch7-sidebar-contents').remove();
$('.html5-main-video').css("width","auto");
$('.html5-main-video').css("height","auto");
$('.player-height').css("height","720px");
$('.ytp-chrome-bottom').css("width","100%");
youtubeFunction();
});
}
$(youtubeVideoPageLoad);
This removes the suggested videos and makes the video and sub content bigger. Just nicer for me.
How can I make this possible because I get .css is undefined. Is this a problem because I cannot use jQuery in the console.
And how could I run this every time a youtube page is loaded?
Thanks
As rism mentioned, If you must do this via the console and using jQuery, you'll need to actually inject jQuery into the page yourself as Google does not use jQuery on the YouTube page.
Here's how:
var script=document.createElement('script');
script.src='https://code.jquery.com/jquery-latest.min.js';
var head=document.getElementsByTagName('head')[0]
head.appendChild(script);
Then you can use jQuery functions like jQuery.find('div').
You still wont be able to use the $ as YouTube has a different value assigned to $ already.
That said, I use Stylebot for this type of stuff. It's a Google chrome extension that allows you to add your own CSS to any website. It saves your custom CSS and applies it anytime you open that webpage.
I personally use it to remove unwanted google ad divs and to fix issues with page layouts when I dont own the page (jumpy menus and what not). I also use it to customize our work websites like Atlassian Jira and Confluence. It has worked well for me.
After you install it, there are a few ways to use it. The simplest is to...
Click the CSS browser action button
Click the "Edit CSS" button at the bottom of the flyout menu
Write your custom CSS in the provided box and click "Save"
I've no idea what your youTubeFunction is supposed to represent so I hope you do. As per comments $ probably doesn't mean jQuery on YouTube and this is conclusion is supported by console.log($) output. So best bet is too just use plain javascript as below or condense it into a single line:
function youtubeVideoPageLoad()
{
youtubeFunction();
var uBody = document.getElementsByTagName('body')[0];
uBody.addEventListener('transitionend', ytCustomizer);
}
function ytCustomizer(event)
{
if (event.target.id != 'progress') return false;
document.getElementById('watch7-sidebar-contents').style.display='none';
var vid = document.getElementsByClassName('html5-main-video')[0];
vid.style.width='auto';
vid.style.height='auto';
document.getElementsByClassName('player-height')[0].style.height= "720px";
document.getElementsByClassName('ytp-chrome-bottom')[0].style.width= "100%";
youtubeFunction();
});
youtubeVideoPageLoad();

Javascript scrollTo only fires on complete page reload

I've given up on this, seemingly done everything and followed practically every link on the internet looking for a fix, to no avail.
I'm using the jquery scrollTo() and localScroll() plugin to animate some scrolling on several pages of my site to anchors/ id's. The problem is, it only scrolls with animation when the page is either completely reloaded in the browser, or visited directly via its URL (the same as a complete reload). If you follow a link to a page using navigation, scrollTo(), the plugin does not work and instead it's a jump to anchors (default behaviour).
$(document).ready(function(){
$('.home .col-xs-6').localScroll();
$('.tour .btn-group').localScroll();
});
The javascript is loaded in a file which does appear in the HEAD (I've checked), and I've also tried putting the above code directly on the page where the .btn-group links are, but it still only works every time on a complete browser refresh, and like I said, when you navigate to a page which contains the above code using site navigation, it reverts to default behaviour.
I've also tried changing the ready function to on('load') which did nothing, and I've included preventDefault(); which also did nothing to help.
This seems so simple yet I can't get it to work properly!
So I ended up doing away with the plugins compeletely and went with this solution below:
$(document).on('page:load', function() {
$(".scroll").click(function(event){
event.preventDefault();
//calculate destination place
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
//go to destination
$('html,body').animate({scrollTop:dest}, 1500,'swing');
});
});
which works. I just need to add scroll to the link class. I believe part of the problem had to do with the turbolinks gem in rails, so I added the page:load function which got it to work. Unfortunately even with the added function, localScroll() still had issues, but the this seems to work just as well.

injecting jQuery, Colorbox, & custom code into a page via a bookmarklet

I've been inspired by the Instapaper bookmarklets that allow a page to be added to Instapaper without a separate pop-up window and without requiring a full page reload. I'd like to combine that idea with a Delicious bookmarklet for bookmarking pages.
The jQuery Colorbox plugin supports loading iframe content into colobox pop-ups, so it seemed like a good place to start. I pieced together several bookmarklets to get the code below, which seemed off to a good start, until I added the "$.fn.colorbox..." line. I can't seem to get a Colorbox to open. I even tried simplifying it to just open the Google hopepage, but no luck there either:
javascript:
function iprl5(){
var d=document,z=d.createElement('scr'+'ipt'),y=d.createElement('scr'+'ipt'),x=d.createElement('scr'+'ipt'),b=d.body,l=d.location,t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');
try{
if(!b)
throw(0);
d.title='(Saving...)%20'+d.title;
x.setAttribute('src','http://cachedcommons.org/cache/jquery/1.4.2/javascripts/jquery.js');
y.setAttribute('src','http://cachedcommons.org/cache/jquery-colorbox/1.3.9/javascripts/jquery-colorbox.js');
b.appendChild(x);
b.appendChild(y);
$.fn.colorbox({href:'http://www.delicious.com/save?url='+encodeURIComponent(window.location.href)+'&title='+encodeURIComponent(document.title)+'&v=5&',open:true,iframe:true});
}
catch(e){
alert('Please%20wait%20until%20the%20page%20has%20loaded.');
}
}
iprl5();
void(0)
Scripts are loaded in a separate thread. You need to wait until the script is loaded before you use it. Usually something like this:
var checkIfLoaded = function(){
if($.fn.colorbox){
// continue your processing
}else{
window.setTimeout(200, checkIfLoaded);
}
}
checkIfLoaded();

Categories

Resources