Develop Reference

Changing the URL of an element I cannot edit

I am using a Content Management System that places a title on the top of all our webpages. If you click on this title, it takes you to the main homepage. This part of the page is something I cannot change, but fortunately I can add CSS and/or Javascript to these webpages.
Is there a way to make it so that clicking on that title, it takes me to a different URL? I cannot edit the HTML that is used to display that title (Posted below)
I have honestly not been able to think up of a solution for this. I can only imagine that it's possible through Javascript, but I'm not sure.
<h1 class="page-title">
<span><a data-home-link="" href="/sites/ww/MyWebPage">My Web Page</a></span>
</h1>
I would like to be able to click on the "H1" element and have it take me to a different webpage, different from "MyWebPage".

If you cannot change the html to add an id you could use document.querySelector or document.querySelectorAll
For example, if it's the only 'a' element with that link address on the page you can use:
document.querySelector('a[href="/sites/ww/MyWebPage"]').setAttribute('href', '/elsewhere/page');
Or if it's the 1st of >1 you can use:
document.querySelectorAll('a[href="/sites/ww/MyWebPage"]')[0].setAttribute('href', '/elsewhere/page');

You can simply give your element a unique id and then edit its attributes with javascript. So you will have:
<a data-home-link="" href="/sites/ww/MyWebPage" id = "someId">
And then with javascript, you can change its attributes like so:
document.getElementById('someId').setAttribute('href',
'/sites/someOtherFolder/..');

Should you want to not display the enforced title at all, just use JavaScript or jQuery to hide class "page-title"
Eg with jQuery
$(document).ready(function () {
$(".page-title").hide();
});

Finding a specific html element in a htmlCollection array using jquery

I hope I worded the title correctly.
Basically I am working in a sharepoint environment.
On every page of my site I have a sidebar menu with quicklinks to various other pages.
In my sidbar menu which is mostly, if not entirely, generated by SharePoint each menu item in the list is given the class 'menu-item-text'.
Now there is a specific menu item where I want to, using javascript, append text to the existing text. A counter specifically.
So I have something like this..
MenuItem1
MenuItem2
MenuItem3
MenuItem4
MenuItem5
and I want to do a calculation on page load and display the numeric results of the calculation to MenuItem3, such as..
MenuItem1
MenuItem2
MenuItem3 (5)
MenuItem4
MenuItem5
So I assume the way to do this is via javascript. And normally this would be easy if I could target it directly with an ID, but I have a generic class name like this - <span class="menu-item-text">MenuItem3</span>
If I use document.getElementsByClassName('menu-item-text'), i am given back a 'HTMLCollection[389]'
how can i find the 'MenuItem3' item in this array? I assume I can idenitfy by where the 'innerHTML' of the 'menu-item-text' object is equal to 'MenuItem3'.
But unsure how. :)
Thanks!
EDIT:
Here is what the html looks like on the page for the side bar. There is a lot to it...

Well either your class name or html text should be permanent fixed with html.
If li text are fixed like 'MenuItem3' and having class 'menu-item-text'
then you can do in this way.
var element = $('.menu-item-text:contains("MenuItem3")')
otherwise you should allocated id to each element based on your requirement.
Here is plunker

How to get visible div inputs in a page through php?

I have been trying to get the names of the visible div inputs there are two visible..!
but it's getting difficult for me..I got a way out with javascript but I really want to to do it in PHP..! as names of divs and inputs are changing on every visit and reloading the page..! so it's quite difficult to target by any permanent name or ID..!
Here is how I got it from a user in javascript :
var isCandidateRegion=function(node){
return (node.innerText.indexOf('Username')>-1 && node.innerText.indexOf('Hours')>-1);
};
//Find the last table in th document that contains 'Username' and 'Hours'
var candidateRegions=[].filter.call(document.querySelectorAll('table'),isCandidateRegion);
var targetRegion=candidateRegions[candidateRegions.length-1];
var isVisible=function(node){
return (node.offsetWidth && node.offSetWidth >0) || (node.offsetHeight && node.offsetHeight>0);
};
var inputs=[].filter.call(targetRegion.querySelectorAll('input'),isVisible);
var usernameInput=inputs[0].name;
var hoursInput=inputs[1].name;
console.log(usernameInput,hoursInput);
So what I want is to get the names in a php variable so that I can use it in php now..I can see the names of the inputs in console but I want it to store in a PHP variable..!
So if there is any way please or alternative of using jQuery or Javascript as PHP will be great..!

PHP is a server side language which for all intents and purposes relating to how I understand your question, is basically there only to serve and read HTML code. Unless you have something actually written on a DOM element, there is no way for PHP to know whether it is visible or not, as it can't automatically detect its styling like JavaScript can.
JavaScript on the other hand is designed for working with DOM page elements and detecting styles, or manipulating elements.
To make your PHP see what elements are visible, you need to explicitly tell PHP what is and isn't visible by putting it into HTML using JavaScript (or jQuery). This can be done by:
Adding a specific class onto your div that you want to make known to PHP e.g. <div class="visible"> ... </div> or <div class="hidden"> ... </div>.
Adding a data attribute to your element e.g. <div data-visibility="visible"> ... </div> or <div data-visibility="hidden"> ... </div>
In your PHP, on the method reading info from the page you can traverse the DOM and get all div's that have the appropriate class or attribute.

How to get parentNode ID and use it as a variable

I'm trying to run a script on images within specific blog posts. Each post div is given a unique ID by Blogger that I'm trying to get. Because I only want to run the script on posts containing the function call and not the entire page, I want the function to basically find the ID of the div that's calling it, store that ID as a variable, and then pass that variable in to my function.
<script>
var scriptTag = document.scripts[document.scripts.length - 1];
var parentTag = scriptTag.parentNode;
</script>
This returns the correct element but the second I wrap it in a function(){} it doesn't work anymore. How can I assign these variables from within a function so I don'thave to clutter up every post's html with a bunch of variable declarations?
Secondly, once I have these variables assigned is there a way to use the value stored with the getElementByID method to actually select the element?
var parentDivID = parentTag.id;
var postID = document.getElementByID(parentDivID); //can't figure out how to select using this as the variable
For ease of use I'd like it if I could simply wrap the function call in script tags and stick it at the end of my post's html whenever I need to use it.
Details
The script I want to run finds images within divs with a specified class and resizes them to fit side-by-side so that the outer edges of the images completely fill the width of the div.
Here is the question covering that script:
Force dissimilar images to equal heights so combined widths fill fixed div
I would like to call this script at the end of any post body where I plan to use side-by-side formatting. The reason I want to call it at the end of a post instead of on the entire page is because the page uses "infinite scrolling" and I'm worried that as posts load after the fact the resizing script will have already been run and newly loaded posts will not be resized.
So I want the function to be able to find the unique ID of the div that contains the call, use that as a variable and ask the script to look inside that post for divs of a certain class, then look within those divs for image tags and resize those images. I hope that makes sense.
Here's an example of what I'd like the post's html to look like:
<div style="width:500px; margin:auto;">
<div class="widthVal x2">
<img class="caption" alt="Caption 01" src="sample01.jpg" />
<img class="caption" alt="Caption 02" src="sample02.jpg" />
<img class="caption"alt="Caption 03" src="sample03.jpg" />
</div>
<script> resizeMagic(); </script>
</div>
Thanks for any help!

How do i get the css properties by specifying its id

Padding or margin value in pixels as integer using jQuery
after reading the above Answers . One of the user exaplained these
alert($("a").css("margin-top"));
Now I wanted to do these
alert($("#cool").css("margin-top")); ' #cool is my table id <table id="cool">
but it did not work. How do i get the css properties of a tag by specifying its id ?

Seems like you didn't put your code inside a pageLoad event :
$(function(){
alert($("#cool").css("margin-top"))
})
Or you forgot to integrate jQuery.js into your page.