up vote 0 down vote favorite

I have a little slideshow that I am trying to implement in a Sharepoint site. I have the show working, however, not to my total satisfaction.

The 'problem' smippet of code that I have (admittedly) used this from the internets:

$(xData.responseXML).find("z\\:row").each(function() {
        var title = $(this).attr("ows_Title");
        var imageLink = imageURL+$(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#')+1);
  var itemLink = itemURL+$(this).attr("ows_ID");
  var liHtml = "<div><img width='200' height='200'  src='" + imageLink +"'/><p align='center'>"+ title + "</p></div>";

However, I would like the var title to be of: a. heavier font-weight (500), and b. lesser line-height.

I've tried a bunch of things that don't work. I tried giving the

element in this part of the code: 

> var liHtml = "<div><img width='200' height='200'  src='" + imageLink
> +"'/><p align='center'>"+ title + "</p></div>";

its own id, and then tried manipulating that id with some jquery, no luck. I tried manipulating the var title when I declare the var, but no luck.

What is this dummy jquery newb missing?

EDIT

A little extra info that I probably should have included (I try to keep these things as short as possible, then realize I've missed pertinent information):

My understanding of CSS leads me to believe that I can have css in 3 places: separate style sheet, in the head of the doc, or inline. I can't put anything in the document head, because I am doing this all in a SP webpart. I tried making < p id="title_par" align='center'>, then maniputlate the $("#title_par").css with jquery, but no luck. Also, tried to do it inline, with , but that didn't work either. So basically, I have no access to the .css file (I have no Sharpoint designer to work with, I only have Site Collection admin privileges)

share|improve this question
2  
Ouch, the code from the internets needs to learn CSS. – minitech Feb 27 '12 at 15:48
This is a CSS problem, not jQuery and not JavaScript specific. Retaged for better answers. – rcdmk Feb 27 '12 at 15:51
What are you doing with those var in the each() ? – Valky Feb 27 '12 at 16:12
Grabbing the urls for all of the images inside the Sharepoint picture library. – mrwienerdog Feb 27 '12 at 17:07
Could you provide the code where you use 'liHtml' for example ? – Valky Feb 27 '12 at 17:25
show 1 more comment

2 Answers

up vote 2 down vote accepted

This can be resolved with CSS.

Add a class to the <p align='center'> like <p align='center' class='classOfTitle'> to style it via CSS and use:

.classOfTitle {
     line-height: 1em; /* you can use any units */
     font-weight: bold; /* font-weight in units isn't suported by all browsers (the standars are inherit, bold and normal */
}
share|improve this answer
Pardon me for sounding stupid, but, here goes..... My understanding of CSS leads me to believe that I can have css in 3 places: separate style sheet, in the head of the doc, or inline. I can't put anything in the document head, because I am doing this all in a SP webpart. I tried making < p id="title_par" align='center'>, then maniputlate the $("#title_par").css with jquery, but no luck. Also, tried to do it inline (option 3), with <p style="font-weight:500" align = 'center'>, but that didn't work either. – mrwienerdog Feb 27 '12 at 16:01
Why don't you put the text-align in the CSS class ? ;-) – Valky Feb 27 '12 at 16:02
I can't access the CSS sheet (Sharepoint). If I could access it, I would actually be able to this, even at my novice level (that is meant to be read as self-deprecating, not in any way rude to you, btw) – mrwienerdog Feb 27 '12 at 16:05
I was asking this to rcdmk, not to you, sorry... Btw If <p style="some style..."> doesn't works nothing could... it's crazy man ;-) – Valky Feb 27 '12 at 16:06
Funny, that's what I thought. I don't get why an inline style doesn't work... – mrwienerdog Feb 27 '12 at 17:08
show 4 more comments
up vote 3 down vote

It is a CSS problem, not Jquery.

Try this

// Your js

var liHtml = "<div><img width='200' height='200'  src='" + imageLink +"'/>
<p class='title'>"+ title + "</p></div>";

// Your css file

.title {text-align:center;font-weight:500;line-height:10px;}
share|improve this answer

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.