jQuery element for Cargo website design

October 14, 2010 4:09 AM

Javascript help: I am designing the layout for a portfolio website using the wonderful CargoCollective. My client wants a specific layout, which I will need to use javascript to implement. But I have almost no javascript knowledge. I need to search for a CSS tag, determine whether it has a certain value, and if it does apply a specific layout for that value. Help much appreciated

From this discussion I started on Cargo I have this as a starting point:


$(document).ready(function() {
if ($(".view_tag_info").length != 0) {
$(".project_thumb").css("border", "10px solid #f00");
}
});


(they can't help me any further)

I need to determine whether the .view_tag_info equals 'showcase' and if it is then lay those thumbnails out in a single column on the left. This page discusses a method, but I don't understand how to implement it into the above code:

function (a, i, m) {
return new RegExp("^" + m[3] + "$").text(a.textContent ||
a.innerText || jQuery(a).text() || "");
}

The site I am laying out is here. I want eventually to end up with a layout that looks something like this: mockup

posted by 0bvious to Computers & Internet (13 answers total)

Response by poster: Sorry, that mockup link is wrong. Should link to here
posted by 0bvious at 4:11 AM on October 14, 2010

So you want to search for a tag with a class of "view_tag_info" and if the text content inside that tag is "showcase" then you want to apply some css changes to the main content column?
posted by artlung at 5:11 AM on October 14, 2010

I don't see any element on the site linked with the class "view_tag_info". What does that element contain in the version you are working on?

If you can do a search for the DOM elements that match what you want, you can easily copy or move them to your Recent Work section. Do the "showcased" project_thumbs just have a showcase class on them?
posted by Allenthar at 5:32 AM on October 14, 2010

Best answer: there is no elements on that page with class view_tag_info, but the following code will let you select the whole item that has the showcase tag. I'm not quite sure what you want to do with it past that. If you post more details I might be able to help.

$(".thumb_tag:contains(showcase)").closest(".project_thumb")
posted by pyro979 at 5:35 AM on October 14, 2010

Response by poster: Perhaps this page makes more sense...

Cargo sites are all run by javascript, I don't completely understand it. But if I add this code to the HTML then ALL the thumbnails in tag/filter view come up with thick red borders:

$(document).ready(function() {
if ($(".view_tag_info").length != 0) {
$(".project_thumb").css("border", "10px solid #f00");
}
});

Basically then, I need to limit the impact of this code to only tags that contain the word 'showcase'. The javascript finds all view_tag_info elements, and then it should search those until it finds just SHOWCASE elements and then apply the formatting to those elements alone.

Thanks for the help so far
posted by 0bvious at 6:08 AM on October 14, 2010

$(".view_tag_info:contains(showcase)") will allow you to select only elements that contain the text "showcase"
posted by pyro979 at 6:15 AM on October 14, 2010

Response by poster: OK, so thanks to pyro979, this works:


$(document).ready(function() {
if ($(".view_tag_info:contains(showcase)").length != 0) {
$(".project_thumb").css("border", "10px solid #f00");
}
});


Now I can start formatting the layout of the thumbnails. I need to figure out a way to call up some other elements though also, like the content text for each tagged post.

How can I alter the code above so that I can edit multiple CSS elements? Can I use this same code to alter things that aren't CSS? like the html itself?
posted by 0bvious at 6:20 AM on October 14, 2010

Best answer: I'm not too familiar with Carco, unfortunately, but something like this:


$(document).ready(function() {
if ($(".view_tag_info:contains(showcase)")) {
$("#page_1").addClass("showcased");
}
});

would give the page_1 id a "showcased" class. You could then style all the project_thumbs in that class using css:

.showcased .project_thumb { clear: both;}

That way that css can live in your stylesheet without causing any layout changes until you add the showcased tag to #page_1

On preview, you could also change this line in the javascript:

$("#page_1").addClass("showcased");

to

$("body").addClass("showcased");

which encompasses the entire body of the page, so

.showcased h1

will effect all the h1s within the body with a class of showcased.

I'm not sure where the content you have in your mockup is coming from, but hopefully w/ css you can layout everything accordingly.
posted by backwards guitar at 6:24 AM on October 14, 2010

Best answer: And sorry, just to be a tad more clear, you'd want:

.showcased h1 { font-size: 30pt; }
posted by backwards guitar at 6:28 AM on October 14, 2010

Response by poster: Thanks Backwards Guitar, that sorted out all my woes!
posted by 0bvious at 6:42 AM on October 14, 2010

Response by poster: Can I use javascript to wrip out specific content?

So I want to show the content for specific posts, but those posts have embedded video from vimeo in them. I juat want the text to show. All the content I want removed is wrapped in a vimeo
posted by 0bvious at 7:34 AM on October 14, 2010

Best answer: Does it have to be javascript? You could grab the .project_content and then use css to hide any of the iframe stuff, so:

.showcased .project_content iframe {display: none }

or something to that effect.
posted by backwards guitar at 8:40 AM on October 14, 2010

Response by poster: Thanks again

I will try that tomorrow...
posted by 0bvious at 11:37 AM on October 14, 2010