Getting rid of those pesky pipes

[wellman]

Well after receiving so much help on this forum, I thought I could contribute a VERY small nugget of wisdom. I don't know about anyone else, but I hate it when pipe (|) separators are on the end of a line. This ends up happening if you have camera info enabled for your galleries. To turn this off, place the following snippet into your customization footer.


<script type="text/javascript">
// Remove trailing pipe (|) from "other sizes"
var objElement = document.getElementById("exifOtherSizes")
if (objElement != null) {
var str = new String(objElement.innerHTML);
str = str.replace('|', '')
objElement.innerHTML = str;
}
</script>

The example above removes the pipe from the "exifOtherSizes" element of the camera info. Use the FF Webdeveloper Extension to get the IDs of other elements you want to clean up.

[Andy]

This is great, Greg - but I can't seem to make it work on the pipe on the footer .... I'm not sure if JT blocks that or not.

A.

[{JT}]

I will have an easier solution for this soon ;)

But - most people don't have this problem with because their "other sizes" is not the last thing in the list. Normally it is keywords or something else.


This is great, Greg - but I can't seem to make it work on the pipe on the footer .... I'm not sure if JT blocks that or not.

A.

[wellman]

But - most people don't have this problem with because their "other sizes" is not the last thing in the list. Normally it is keywords or something else.

Good point. :D

[Andy]

Well after receiving so much help on this forum, I thought I could contribute a VERY small nugget of wisdom. I don't know about anyone else, but I hate it when pipe (|) separators are on the end of a line. This ends up happening if you have camera info enabled for your galleries. To turn this off, place the following snippet into your customization footer.


<script type="text/javascript">
// Remove trailing pipe (|) from "other sizes"
var objElement = document.getElementById("exifOtherSizes")
if (objElement != null) {
var str = new String(objElement.innerHTML);
str = str.replace('|', '')
objElement.innerHTML = str;
}
</script>

The example above removes the pipe from the "exifOtherSizes" element of the camera info. Use the FF Webdeveloper Extension to get the IDs of other elements you want to clean up.

I want to go "pipeless" in my footer - but no joy. Any ideas?

[ivar]

I want to go "pipeless" in my footer - but no joy. Any ideas?Andy, add this to your Javascript.addEvent(window, "load", rem_pipes);

function rem_pipes () {
for (var i = 0; i<3; i++) {
var objElement = document.getElementById("footer")
if (objElement != null)
{
var str = new String(objElement.innerHTML);
str = str.replace('|', '')
objElement.innerHTML = str;
}
}
}It's for your footer only, not for your feeds. Normally, the code is read only once, so only the first pipe is removed. I put a loop in there for you, so it takes out all of the pipes. I assumed you just wanted the pipes removed, but you can also replace them by something else

I used it on my site (http://ivar.smugmug.com) to see if it works, and it works great.

[wellman]

I used it on my site (http://ivar.smugmug.com) to see if it works, and it works great.

Nice! :thumb

[Andy]

Andy, add this to your Javascript.

Thanks, Ivar! OK It's gone from my homepage but not from the #feeds part. :dunno

[ivar]

Thanks, Ivar! OK It's gone from my homepage but not from the #feeds part. :dunnoYep, by design, but that is easy enough to change.addEvent(window, "load", rem_pipes);

function rem_pipes () {
for (var i = 0; i<3; i++) {
var objElement = document.getElementById("footer")
if (objElement != null)
{
var str_a = new String(objElement.innerHTML);
str_a = str_a.replace('|', '')
objElement.innerHTML = str_a;
}
var objElement = document.getElementById("feeds")
if (objElement != null)
{
var str_b = new String(objElement.innerHTML);
str_b = str_b.replace('|', '')
objElement.innerHTML = str_b;
}
}
}

[Andy]

Yep, by design, but that is easy enough to change.addEvent(window, "load", rem_pipes);

function rem_pipes () {
for (var i = 0; i<3; i++) {
var objElement = document.getElementById("footer")
if (objElement != null)
{
var str_a = new String(objElement.innerHTML);
str_a = str_a.replace('|', '')
objElement.innerHTML = str_a;
}
var objElement = document.getElementById("feeds")
if (objElement != null)
{
var str_b = new String(objElement.innerHTML);
str_b = str_b.replace('|', '')
objElement.innerHTML = str_b;
}
}
}


:clap :clap THANK YOU, IVAR :D Wonderful, wonderful....

Pipes gone. Wonderful. Now I can use this bit of CSS:

#feeds .note {display: none;}

which removes the "what are feeds?" link.

http://williams.smugmug.com/photos/53333632-L.gif

[Andy]

I actually didn't like it with nothing there, so I just used a dot separator instead...

&middot

http://www.htmlcodetutorial.com/characterentities_famsupp_69.html

[ivar]

I actually didn't like it with nothing there, so I just used a dot separator instead...

&middot

http://www.htmlcodetutorial.com/characterentities_famsupp_69.htmlLooks good, i like it. You can always go for the classic "laying down pipe" ( - ) or another of the i don't know how many symbols there are.

[Andy]

It only works now for the first of my three feeds boxes on my homepage

www.moonriverphotography.com

anyone got a fix?

[devbobo]

Hey Ivar,

I have modified your code. Read up on using regular expressions, they are much more powerful than having to loop through code multiple times.

Cheers,

David



addEvent(window, "load", rem_pipes);

function rem_pipes () {
var objElement = document.getElementById("footer")
if (objElement != null)
{
var str_a = new String(objElement.innerHTML);
str_a = str_a.replace(/\|/g, '')
objElement.innerHTML = str_a;
}
var objElement = document.getElementById("feeds")
if (objElement != null)
{
var str_b = new String(objElement.innerHTML);
str_b = str_b.replace(/\|/g, '')
objElement.innerHTML = str_b;
}
}

[ivar]

thanks David, i need to read up, i know.... I'm stuck in the oldschool stuff from years ago :lol3

[Andy]

Neither Devs nor Ivars removes the pipes from box 2 and 3 on the homepage

[ivar]

Neither Devs nor Ivars removes the pipes from box 2 and 3 on the homepageMine shouldn't work, but dev's should. It works on my site...

[Andy]

I had some dupe JS (user error :uhoh)
and, I added section for feedHelp


// fix the pesky pipes

addEvent(window, "load", rem_pipes);

function rem_pipes () {
var objElement = document.getElementById("footer")
if (objElement != null)
{
var str_a = new String(objElement.innerHTML);
str_a = str_a.replace(/\|/g, '')
objElement.innerHTML = str_a;
}

var objElement = document.getElementById("allFeeds")
if (objElement != null)
{
var str_b = new String(objElement.innerHTML);
str_b = str_b.replace(/\|/g, '')
objElement.innerHTML = str_b;
}
var objElement = document.getElementById("feedHelp")
if (objElement != null)
{
var str_b = new String(objElement.innerHTML);
str_b = str_b.replace(/\|/g, '')
objElement.innerHTML = str_b;
}
}

[ivar]

I had some dupe JS (user error :uhoh)
and, I added section for feedHelp


// fix the pesky pipes

addEvent(window, "load", rem_pipes);

function rem_pipes () {
var objElement = document.getElementById("footer")
if (objElement != null)
{
var str_a = new String(objElement.innerHTML);
str_a = str_a.replace(/\|/g, '')
objElement.innerHTML = str_a;
}

var objElement = document.getElementById("allFeeds")
if (objElement != null)
{
var str_b = new String(objElement.innerHTML);
str_b = str_b.replace(/\|/g, '')
objElement.innerHTML = str_b;
}
var objElement = document.getElementById("feedHelp")
if (objElement != null)
{
var str_b = new String(objElement.innerHTML);
str_b = str_b.replace(/\|/g, '')
objElement.innerHTML = str_b;
}
}


Devbobo,

Lets see if i understand this correctly. Because all pipes are located in children of #cobrand_footer, can i use the following and still achieve what Andy is getting above?

addEvent(window, "load", rem_pipes);

function rem_pipes () {
var objElement = document.getElementById("cobrand_footer")
if (objElement != null) {
var str = new String(objElement.innerHTML);
str = str.replace(/\|/g, '')
objElement.innerHTML = str;
}
}will the /g search through all of the children?

[bigwebguy]

...will the /g search through all of the children?
sorta kinda...you're on the right track.
/g enables "global" matching. When using the replace() method, specify this modifier to replace all matches, rather than only the first one. taken from this site: http://www.regular-expressions.info/javascript.html

[ivar]

sorta kinda...you're on the right track.
taken from this site: http://www.regular-expressions.info/javascript.htmlThanks, also for the link. So it just doesn't care about children, is that more like it?

I actually decided to try the code on my site, and it works fine. I haven't noticed any problems yet.

[bigwebguy]

it knows nothing about children, regular expressions do pattern matching on strings, dat's it.

[ivar]

it knows nothing about children, regular expressions do pattern matching on strings, dat's it.Cool, that's what i was thinking, thanks! :thumb

[Andy]

Is there a way to make it so that the pipes are gone gone, first time visit? It's a bit annoying to see them change everytime you move from one photo to the next - :ear

Go here http://www.moonriverphotography.com/gallery/52248/1 in smugmug small and then use the > arrow to navigate from photo to photo you will see it..

[ivar]

Is there a way to make it so that the pipes are gone gone, first time visit? It's a bit annoying to see them change everytime you move from one photo to the next - :ear

Go here http://www.moonriverphotography.com/gallery/52248/1 in smugmug small and then use the > arrow to navigate from photo to photo you will see it..I doubt if it is possible to make it happen before.... The page builds first, and then the JS kicks in, and changes what needs to be changed. (on a page by page basis) Same thing happens on my pages with the words i have changed by JS. First the page builds, then the changes kick in. Maybe someone else knows something smart or geeky to speed things up a little but? :ear

[devbobo]

I have explain this before, but I am more than happy to do it again.

ok...Andy is using this method to call his pipe removal function...

addEvent(window, "load", rem_pipes);The problem with the "load" event on the window, it's not call until the page fully loads including images.

A different approach is to include...


<*script>
rem_pipes();
<*/script>
in the footer block, this will ensure that the function is called immediately. Depending how much code there is to load for a page, you still might see a small delay but it will be heaps better than the current method.

Cheers,

David

[Andy]

I have explain this before, but I am more than happy to do it again.

ok...Andy is using this method to call his pipe removal function...

addEvent(window, "load", rem_pipes);The problem with the "load" event on the window, it's not call until the page fully loads including images.

A different approach is to include...


<*script>
rem_pipes();
<*/script>
in the footer block, this will ensure that the function is called immediately. Depending how much code there is to load for a page, you still might see a small delay but it will be heaps better than the current method.

Cheers,

David

I put this in my footer, no difference IMO. :dunno

[bigwebguy]

I put this in my footer, no difference IMO. :dunno
you should try taking out the:

addEvent(window, "load", rem_pipes);

it might help.

[Andy]

you should try taking out the:

addEvent(window, "load", rem_pipes);

it might help.

:nah didn't help.

[bigwebguy]

:nah didn't help. well they dont both need to be in there at any rate.

[gavin]

well they dont both need to be in there at any rate.

I can not get it to work>
?

[pigeon]

Well, actually your footer. I like it. I read this thread, and tried the different suggestions. I want to leave my footer as is, leave the feed *icon*, but remove the feed text. And I'd like "SmugMug" the same color text as the rest of the line.

What am I missing?

Also, I'm wondering - as I see something I want to tweak, I add code to either the CSS or javascript boxes. At what point does that become bloated, and can some of it be consolidated to be more efficient?

thanks,
teresa