Rich-text Reply

Struggling to target a link by it's class name.

adamlcasey 08-06-15
Accepted Solution

Struggling to target a link by it's class name.

[ Edited ]

I'm looking at increasing the font size on a set of 6 buttons on a category page. When I inspect the source code I can see they are built using a styled <a> tag within a paragraph. The a tag has a class name and this is the same class name across all buttons.

 

So I imagined that this code would work:

 

$("a.top-cat-button").css({"font-size":"16px"});

 

But it doesn't seem to work. When I use the Editor to edit the font size the code returned looks like this:

 

$(".mb-category-products > div:eq(1) > div:eq(0) > p:eq(1) > a:eq(0)").css({"font-size":"18px"});

 

As this is very specific to the individual button, so I can't use it to apply the change to all six buttons.
Any suggestions on how to implement this change in a single line of code or do I just need to create 6 lines of code one for each button change?

JMarchant 08-06-15
 

Re: Struggling to target a link by it's class name.

Hi Adam,

Any chance you can post a link to the page or the HTML of the buttons? It should be possible to do it all one line.
James Marchant
Head of Development at Conversion.com

 
adamlcasey 08-06-15
 

Re: Struggling to target a link by it's class name.

Hello again James,

Yes sure it's: http://galt.limebuild.net/baby-toddler.html
JMarchant 08-06-15
 

Re: Struggling to target a link by it's class name.

[ Edited ]

Hi again Smiley Happy,

 

After having a quick look at the page I can't see the code you posted being applied to the page so I assume that you've removed it? I would suggest just adding the styling in before just as we did in your previous post:

/* _optimizely_evaluate=force */
function addCss(css) {
	head = document.getElementsByTagName('head')[0],
	style = document.createElement('style');

	style.type = 'text/css';
	if (style.styleSheet) {
		style.styleSheet.cssText = css;
	} else {
		style.appendChild(document.createTextNode(css));
	}
	head.appendChild(style);
}

addCss('.top-level-category a.top-cat-button{font-size:16px;}');
/* _optimizely_evaluate=safe */

I hope that helps.

James Marchant
Head of Development at Conversion.com

 
adamlcasey 08-06-15
 

Re: Struggling to target a link by it's class name.

Thanks I'm creating a repository of re-usable code snippets and will make sure this gets added now. Thanks again for taking the time to help out.
JMarchant 08-06-15
 

Re: Struggling to target a link by it's class name.

Great, I'm glad to help.
James Marchant
Head of Development at Conversion.com