Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Subscribe to HRA Now!

 



Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE! 

 



 

 www.CustomReportSharing.com 

From the folks who brought you High Rankings!



Photo
- - - - -

Javascript Slide Show


  • Please log in to reply
10 replies to this topic

#1 qwerty

qwerty

    HR 10

  • Moderator
  • 8,604 posts
  • Location:Somerville, MA

Posted 11 August 2010 - 04:02 PM

I need to replace a Flash slide show, and as I don't work with Flash (I don't have the software to create a Flash file) I need a nice, simple JS-based version. I thought I'd found something pretty straightforward, but even after editing its HTML, scripts, and the various style sheets it required, I've got bupkis: only the first image displays, the captions that were supposed to display temporarily in a fancy translucent line along the bottom of the image are displaying permanently as text above the image, and the whole thing is superimposed over the page's text mf_tongue.gif

I just need a nice, easy script that will let me name four or five images and rotate through them when the page loads. Anybody got one they can recommend?

#2 cfreek

cfreek

    AAAHHHH!!1one1!

  • Active Members
  • PipPipPipPip
  • 166 posts
  • Location:Richmond, Virginia, Earth

Posted 11 August 2010 - 04:24 PM

Have you tried the JQuery Cycle plugin? I use it quite often.
You create one container element, and add one line of JavaScript for the most simple version.

http://jquery.malsup.com/cycle/



#3 qwerty

qwerty

    HR 10

  • Moderator
  • 8,604 posts
  • Location:Somerville, MA

Posted 11 August 2010 - 05:09 PM

Thanks. I'll take a look at it.

#4 qwerty

qwerty

    HR 10

  • Moderator
  • 8,604 posts
  • Location:Somerville, MA

Posted 11 August 2010 - 11:27 PM

Yup, that was exactly what I was looking for. Thanks a lot.

#5 1dmf

1dmf

    Keep Asking, Keep Questioning, Keep Learning

  • Active Members
  • PipPipPipPipPipPipPip
  • 2,160 posts
  • Location:Worthing - England

Posted 12 August 2010 - 03:48 AM

Wow that's a really cool javascript slide show. nice one cfreek.

#6 qwerty

qwerty

    HR 10

  • Moderator
  • 8,604 posts
  • Location:Somerville, MA

Posted 12 August 2010 - 11:12 AM

I should probably start a new thread here, but since the presence of the slide show pointed out the issue, I think I'll just put it here.

Since I made the leap from the dreaded IE years ago and switched to Firefox as my main browser (back when it was still called Firebird or something like that), I've been coding for standards-compliant browsers and then tweaking things to get IE to work. As a non-designer, the tweaking part has always been a real hassle for me, but I've always found that if a page works in FF, it's going to work in Opera, Chrome, and Safari (for Windows, at any rate).

So I coded up this page. It's a very straightforward (and not all that pretty) design, intended to emulate a client's current site but taking it out of tables and using valid code. I checked it for valid HTML 4.01 Strict and the only errors involved the presence of Google Analytics code. I tried it out in FF and IE 8, and everything was fine. It wasn't until after I added the slide show to one of the pages that I tested it in Opera, Safari and Chrome, and it didn't work in Chrome! I had to futz around and specify the width of a block-level element that should have inherited its width from its parent (and does in other browsers).

So that's fixed, although it's not clear to me why it was necessary to fix it in Chrome if it worked everywhere else, but there's still a problem with Chrome. The CSS of the site contains the following:
CODE
body{font-family:Verdana,Arial,Helvetica,sans-serif 76%;text-align:left; background:#fff;}

Simple, right? All of the text on the page uses the same sans-serif font (although colors and sizes differ for various elements). But in Chrome, the page (and not just the page containing the slide show) has all Serif fonts. I had to go into the browser's font setting and set the default Serif font to Verdana -- a sans-serif font -- in order to get it to display properly, and I can't very well put a note on the site telling all Chrome users to do the same.

What could be causing this?



#7 cfreek

cfreek

    AAAHHHH!!1one1!

  • Active Members
  • PipPipPipPip
  • 166 posts
  • Location:Richmond, Virginia, Earth

Posted 12 August 2010 - 11:38 AM

I usually specify font sizes separate from the font-family, but that's just personal preference and an old habit.
Running the CSS through W3C validation does give one warning:

"Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space."

So, have you tried quoting the "sans-serif 76%" to see if Chrome is just picky on that?

#8 qwerty

qwerty

    HR 10

  • Moderator
  • 8,604 posts
  • Location:Somerville, MA

Posted 12 August 2010 - 11:53 AM

Yeah, that worked, although I don't really understand why. I thought the generic font family was sans-serif, which doesn't contain a space rather than sans-serif 76%, which does.

Anyway, thanks. One less reason to yank out my hair.

#9 1dmf

1dmf

    Keep Asking, Keep Questioning, Keep Learning

  • Active Members
  • PipPipPipPipPipPipPip
  • 2,160 posts
  • Location:Worthing - England

Posted 16 August 2010 - 08:28 AM

font-family can ony contain font names, if you want to define all properties you use the 'font' attribute like so.
CODE
body{font:italic bold 12px/30px Georgia, serif;}


here's a link to w3schools with full details

http://www.w3schools...r_font_font.asp




#10 qwerty

qwerty

    HR 10

  • Moderator
  • 8,604 posts
  • Location:Somerville, MA

Posted 16 August 2010 - 11:00 AM

Yup, I ended up defining font size separately:
CODE
body{font-family:Verdana,Arial,Helvetica,sans-serif; font-size:82%;text-align:left; background:#fff;}


#11 1dmf

1dmf

    Keep Asking, Keep Questioning, Keep Learning

  • Active Members
  • PipPipPipPipPipPipPip
  • 2,160 posts
  • Location:Worthing - England

Posted 17 August 2010 - 04:17 AM

I prefer to break my CSS down to each attribute setting rather than a one liner. though having said that, I do break that rule when it comes to border
CODE
border: 1px solid #000;





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

SPAM FREE FORUM!
 
If you are just registering to spam,
don't bother. You will be wasting your
time as your spam will never see the
light of day!