We Keep Coding

Checking to see if page title is in array via jQuery

I've created semi-dynamic page titles on a static site by using the following on each page (for example):
<?php $title="Example"; ?>
And added this to my header file:
<title>Company Name Here<?php if ($title!="") { echo " | $title"; } ?></title>
That part is working well.
Now, I would like to use jQuery to check if a page title for the ACTIVE page is in an array so that (if it is) I can apply a class to a navigation element or two. And, if it not in the array, I'd remove that class. Like so (in partial pseudocode):
if $(title) of currently visible page is in this array(about, page2, page3) {
$('a#idname').addClass('selected')
} else {
$('a#idname').removeClass('selected')
}
Maybe there's a better way to do this. I'm open to suggestion. I'm just not very clear on the syntax for determining:
What page is currently loaded
How to use some identifier for the current page to change the class of an element on the page after page load. I know how to do it on click, but as soon as the page loads, the class goes away.
Any help greatly appreciated. Thanks in advance!

You can retrieve the document's title by accessing the title property on the document object, document.title. In order to get the portion of the string after the pipe, |, you could simply split the title on the | character and then get the second element in the returned array.
If the page's title is "Company Name Here | About" like in your question, then document.title.split('|') would return the array ["Company Name Here ", " About"], therefore .split('|')[1] would return the string "About".
Use the .indexOf() method in order to check if the title string is in the array titleArray and then add/remove the class accordingly.
Here is a basic example:
var title = document.title.split('|')[1];
var titleArray = ['About', 'Page2', 'Page3'];
if (title && titleArray.indexOf(title.trim()) > -1) {
$('span').addClass('selected');
} else {
$('span').removeClass('selected');
}
.selected { color: #f00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Company Name Here | About</title>
<span>The title is in the array if this is red.</span>

Delete all divs that has part of a string - jQuery

Heey all,
I want to delete all divs that contains a part of a string.
How can i achieve this?
My old HTML looks like this:
<div class="article-options_4"></div>
My new HTML looks like this, where 4 is the main article id and 2 is the option id of the article:
<div class="article-options_4_2"></div>
Here is my current jQuery which checked if the clicked article is false:
if(this.checked == false) {
$('.article-options' + '_' + $(this).val()).remove();
}
The problem is that when adding new article options with ajax i need to add an extra id to delete every article item when the main article is unchecked. Atleast i think thats the right way...
The problem i faced with this piece of code is that its only deleted one item and not all with the main article ID thats why i added the id of the article options see the html above.
Im curious how i could solve this!

Use the attribute selector, with a ^ to grab everything that starts with the class name. Do not forget the last _ or else selecting article-options_4 will also pick article-options_40 and article-options_400 and so on.
if(this.checked == false) {
$('[class^=article-options' + '_' + $(this).val() + '_').remove();
}

You may use starting with jQuery Attribute Selector
$("div[class|='.article-options_'" + MAIN_ARTICLE_ID + "']").remove()
The [attribute|=value] selector is used to select elements with the specified attribute starting with the specified value.

Split website link into 2 href link?

On my website public: http://abv.mk/company.aspx?id=40056 , i want to split http://www.donholding.com.mk & http://www.webklinika.mk to be separate links (and separate clickable like two different links - hrefs).
But in my admin-panel for the field website i only have 1 field available, where i input 2 web site links splited with ","
So is it possible in the public asp-file "company.aspx", to edit the file and insert some Javascript code, so i split the link from 1 href to 2 hrefs ?
<span id="ctl00_ContentPlaceHolder1_lblComWeb"><a target="_blank" href="http://www.donholding.com.mk, www.webklinika.mk" title="">www.donholding.com.mk, www.webklinika.mk</a> | donholding#live.com</span>

I'm guessing you have one field in the DB which stores the URL. This should probably instead be its own table - company_url, which takes company_id (in thie case, 40056) and the URL. You should bring back a DataSet, and create a HTML string to put in to the Literal (or whatever you're using).
That's the "you should do this" answer.
Now.. you could do...
$(document).ready(function(){
var el = $('span[id$="lblComWeb"]');
var el_a = el.children('a');
links = el_a.html();
links = links.split(',');
el.html('');
$.each(links,function(l){
var e = ''+links[l]+'';
el.append((l > 0 ? ',' : '') + e);
});
});
as you're already using jQuery. However, it's cheap and dirty and nasty and yucky.
Just putting that snippet in to your company.aspx file (between some tags) should do the trick.

This page only allows you to display one website.
The href property of the a html tag only support reference to one address/page.
What you could do is put there the link to another page which is yours, and in this page you can put as many different links to anywhere you want and other information too. Maybe search for some URL shortener service which allows something like this.
Now, if you actually do have access to the source code and modify it, all you have to do is:
<span id="ctl00_ContentPlaceHolder1_lblComWeb">
<a target="_blank" href="http://www.donholding.com.mk" >www.donholding.com.mk</a>, <a target="_blank" href="www.webklinika.mk" >www.webklinika.mk</a> | donholding#live.com
</span>

Javascript add ID and hash link to new ID

I "learned" JavaScript a few months ago but quickly picked up Python and spent the past few months writing programs in that language, so I decided it would be a good idea to go back and actually learn JavaScript. Right now I'm making a very simple "blog" with JS that takes the title of the post, generates a hash link from the post, and creates a recent posts section where you can click the link to jump to the post in the page.
For instance, say one of the posts is formatted like this:
<h2 class="post">Another post for you</h2>
<h4>I know you love these</h4>
With multiple posts, and an empty container at the bottom, which will be used to append the recent posts links:
<div id="get-post"></div>
My JS code basically grabs each title with the post class and creates a hash link from the element's title (removing spaces and commas). It then creates and appends a text node consisting of the post title, and then appends the entire link into the get-post container.
var postList = $('#get-post');
var post = $('.post');
function generateRecentPosts() {
post.each(function() {
// Create link from post title that will be used to
// access that post.
var postLink = document.createElement('a');
// Create text node from post title that will be appended
// to the postLink.
var text = document.createTextNode($(this).html());
// Add elements to the DOM.
postLink.href = createLocalLink($(this));
postLink.appendChild(text);
postList.append(postLink);
postList.append('<br />');
});
}
function createLocalLink(elm) {
// Creates the href link that will be used to go to a blog post.
// For example, if the title of the elm parameter is "My Post",
// a link is created called #My-Post that will be used to access
// that post.
elm.id = elm.html().replace(/,/g, '').replace(/\s/g, '-');
console.log(elm.id); // Make sure the ID is added.
return '#' + elm.id;
}
generateRecentPosts();
My problem is that the links it generates to not point to the ID created for each title. When I click on the link, I can see that it successfully created the href hash #My-Post and added it to the anchor tag, but it doesn't take me to the post title.
Example: http://jsfiddle.net/samrap/GQtxL/
I even added a console log function to make sure the ID is being added to the title as I thought that was the problem, but it isn't because the console is printing the correct new ID. I could really use some help in figuring out where exactly the problem is here.

Your h2 tags need to have an id or name attribute that corresponds with the link, that is what makes internal links work. The id is not getting added because you are accessing a jQuery object as if it were a DOM node (elm.id = ...). Modify your createLocalLink function to use jQuery's attr method to set the id property:
elm.attr('id', elm.html().replace(/,/g, '').replace(/\s/g, '-'));
Additionally, since you have jQuery available you could whittle your code down to:
var $this = $(this),
link = createLocalLink($this);
var $postLink = $('a', {
text: $this.text(),
href: link
})
postList.append($postLink).append('<br />');
Here is your fiddle updated: http://jsfiddle.net/GQtxL/1/

This is because your link uses the href = "#My-Post" but none of the posts has the ID "My-Post". It only has a class "post".
This happens because the argument that your are passing to the createLocalLink() function is a DOM Node. But by doing elm.id you are not changing the DOM property but adding another property to the "elm" object. Thus your "elm" object is
x.fn.x.init[1]
0: h2.post
context: h2.post
id: "Another-post-for-you"
length: 1
__proto__: Object[0]
Thus the actual post never gets the attribute ID only "elm" object gets it. Note the empty ID attribute below
draggable: false
firstChild: text
firstElementChild: null
hidden: false
id: ""
innerHTML: "Another post for you"
innerText: "Another post for you"
Thus your document has no element with the ID "My-Post". You can view the source of your HTML to verify this.
For internal links to work there should be an element with the same ID as that used in the href attribute of the link.
For example
<div id="post1">
Your Post Here
</div>
<!--just to show the effect of moving to the post-->
<div style="clear:both; height:900px"></div>
Click Here
This would work because there is an element with the id "post1" and the link uses the href "#post1" which links it to the corresponding element. Hence, add the corresponding id to your post as well (other than your link) for it to work.

In function createLocalLink you are using elm argument as dom node, but actually passing a jQuery wrapped object to it, which don't have id property. To get it work, use elm.get(0).id = ... or elm.attr('id', elm.text().replace(/,/g, '').replace(/\s/g, '-'););

Highlight search values from URL

Currently with a site I'm working on, when you search in the global header you are taken to the search results page. Once you are on the search results page, you can see your search in the url. Example: I searched elephant, search-results.html?elephant. I need my search results page to highlight everything on the page that matches the value, and only the value. I don't want the highlight to pick up "search" or "results just after the question mark, the value. The closest solution I've found is this
http://www.nsftools.com/misc/SearchAndHighlight.htm
but it somehow interrupts my css div headers. Also, (and maybe my brain is just fried from staring at this code for too long) how can I customize this code to read my value? This seems like a solution as well, but I can't get it to work. I used the function highlightSelection() with a body onload and no luck.
http://www.switchonthecode.com/tutorials/javascript-highlighting-selected-text
or even the post here by Coopster, if I could capture the value from the url. I know I can document.write(window.location.search.substr(1)) and it will show me.
http://www.webmasterworld.com/forum83/2418.htm
Thanks for your help guys.

You can try to use the contains:
http://docs.jquery.com/Selectors/contains#text
$("span:contains('Hey')").css("text-decoration", "underline");
The issue with this you must have a class or something that you want to search specifically, you can do a *:contains but it will end up grabbing every element.
http://jsfiddle.net/dLdb2/
You will need ot grab the $_GET value through either javascript or whatever back end you are using. Here is a link to grab it with jQuery:
retrieving $_GET variable in jquery

You can use a part of the Chad solution to retrieve span that contain the specific text.
Then, instead of applying a CSS rule to the whole HTMLElement, you can retrieve its content with .html(), wrap the specific word with specific <span> and then update the content with .html() method again.
// Retrieve and explode URL
var urlParts = window.location.href.split("?");
if (urlParts.length == 2)
{
// Retrieve all span containing the word
$("span:contains('" + urlParts[1] + "')").each(function(index, spanElement) {
var jQSpan = $(spanElement);
jQSpan.html(jQSpan.html().replace(urlParts[1], '<span class="special">' + urlParts[1] + '</span>'));
});
}
Assuming you have a .special CSS class that will highlight the word.
.special {
background-color: yellow;
}
Note: The word in the Javascript function could be injected via PHP or other server side language.
Here is a complete example, assuming your URL is http://path/to/your/file.php?Lorem
<html>
<head>
<script type="text/javascript" src="path/to/your/jQuery.js"></script>
</head>
<body>
<span>
Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.
</span>
<script type="text/javascript">
// Start when DOM is ready
$(document).ready(function() {
var urlParts = window.location.href.split("?");
// Highlight word if we have a word in parameter
if (urlParts.length == 2)
{
// Retrieve all span containing the word
$("span:contains('" + urlParts[1] + "')").each(function(index, spanElement) {
var jQSpan = $(spanElement);
jQSpan.html(jQSpan.html().replace(urlParts[1], '<span class="special">' + urlParts[1] + '</span>'));
});
}
});
</script>
</body>
</html>
Explanation: When the DOM is ready, the Javascript code will try to extract the part of the URL after the '?' (in our case, this is 'Lorem'). Then, Javascript retrieve, via jQuery, all span containing this word and loop on each span to wrap the word with special span (span with CSS class 'special')
If you change the word in the URL and reload the page, the highlight will change dynamically