Shifting links (move when clicked)

[jamesmcoats]

I’m not sure what I’m doing wrong here… but I’m using jquery from Jonathan Snook to switch links in the row to the "active" class. However, if I have padding on the "active" class, the links get wonky when clicked. Clicking the first link in the row moves those to the right and clicking the last one moves those to the left and so on…I’ve tried a lot of things, googled, harassed Mike Rundle, and am at a standstill. Any ideas on what I’ve done/not done? If it’s something simple, you have my apologies in advance. Code is below.

Thanks!

url: http://jamesthreeone.com/books2.html

Here’s the script:

Code:

The HTML: (the group id’s are related to another script I’ll be using on the page)

Code:

• Apologetics
• Christology
• Prayer
• Preaching
• Theology
• Seminary
• Other
• Favorites

And the CSS:

Code:

.book-categories ul {margin:0; padding:0 0 15px 0;}
.book-categories ul li {font-size: 12px; display: inline; list-style: none; margin-right: 26px;}
.category-right {margin:0;float:right;}
.active a {background: #000; color: #fff; text-decoration: none; padding:2px 2px;}

[rohitmehta]

Try display:block on a:active. define definite height and width to links. should work.

http://www.rohitmehta.wordpress.com

[jamesmcoats]

Thanks man – but if (and this may be my lack of css skill) i do display:block won’t that put my links vertical? I want to make sure they’re horizontal.

[noahgelman]

No, display: block doesn’t make them vertical, it just tells the browser to treat it as a blocked element.

[jamesmcoats]

Ok, thank you for the clarification. Not sure what I’m doing to screw that up then. Will double-check :)

[jamesmcoats]

So I’ve managed to make it worse. Clicking through the row of links jacks them up even more.

Here’s what I have now:

Code:

.active a {display: block; width: 68px; height: 20px; background: #000; color: #fff; text-decoration: none;}

http://www.jamesthreeone.com/books2.html

What am I doing wrong?

Thanks ;)

[Rob MacKay]

the difference between block and inline are that block elements can have a height and a width and are normally rendered under each other when they are siblings. You can change the way a block element behaves by using the inline-block definition which will have them display as a block element and behave like an inline element.

In-line elements are more about wrapping text, for example a anchor <a> would be normally used within a line of text to create a link. <span> is the in-line equivalent of the general <div> block tag. In-line elements do not render under each other when they are siblings, and are normally used to change text rather than build site structure.

you define them like this:

display:block;
display:inline-block;
display:inline;

this is what I did to just fix the list itself. The reason I used a float is because of IE7 and its reluctance to see display:inline-block;

Code:

.book-categories ul li {
float:left;
font-size:12px;
list-style:none outside none;
margin:12px;
text-align:center;
}

Code:

.clear {
clear:both;
margin:0;
padding:0;
{

Code:

.active a {
background:none repeat scroll 0 0 #000000;
color:#FFFFFF;
text-decoration:none;
{

Code:

• Apologetics
• Christology
• Prayer
• Preaching
• Theology
• Seminary
• Other
• Favorites

Do you have any links to the actual action the script is meant to perform? :)

[jamesmcoats]

Thanks for the info and code! That got it to work perfectly. I have the one script for switching and another that will change the book groups per the link (er, tag) you click. However, I’ve not tried it all together yet.

Here’s the other script I’m using (note: I know very little about jquery, a friend wrote this for me):

Code:

$(function(){

$(‘.book-categories a’).bind( ‘click’, function(){

$(‘.book-groups’).hide();

var group_id = $(this).attr(‘group-id’);

$(‘#’ + group_id ).show();

return false;

});

});

Thanks again for all the help!

[Rob MacKay]

works for me? what do you need it to do more of?

[jamesmcoats]

Hi Rob

Sorry, I wasn’t very clear. I just meant I hadn’t tried it adding the additional jscript. I added it last night and you’re right it seems to work :) I did, however, have a problem when adding the 3rd script that controls the switching of the book groups. So when you click the link, say Christology, it brings up the books associated with that tag. When I add this script in with the other two I have in their right now it voids the switcharoo work you fixed. I pulled the 3rd script switching book groups out so it’s not in the page right now. I don’t have access to my server from work but the script I’m talking about is below. I may have screwed it up a bit but it’s really just the same script as the one that I have in their right now that switches out specific books on the right by clicking one on the left.

Hope that makes some level of sense, I’ve only had one cup of coffee. Thanks again for looking at all this.

Code:

$(function(){

$(‘.book-categories a’).bind( ‘click’, function(){
$(‘.book-groups’).hide();
var group_id = $(this).attr(‘group-id’);
$(‘#’ + group_id ).show();
return false;
}); });

[Author]

Posts