logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 01-03-2012, 03:06 PM   #1
sweetpea11
 
Join Date: Jul 2011
Posts: 16
Smile Has anyone gotten their hands dirty with Responsive Web Design yet?

I did a search for Responsive Web Design before posting, and all I saw were tentative talk about it, so has anyone done it yet?

I'm doing my first Responsive Web site & it was tricky, but the results are pretty awesome! There's one aspect that is driving my nuts though which is what brings me here of course. =)

The light box. (doom doom doom) The images are set to 500px which is fine for desktop & tablet but it refuses to scale on a phone! You can't scroll it, you can't resize it, you can't do anything with it! Phones don't have an escape key so... I either need another option or I need to know how to program around it.

I've seen sites do a "formobile" page, but I don't think I'm programmer savy enough for that. Maybe someone has a tutorial they could point me towards?

Thanks so much!
sweetpea11 is offline   Reply With Quote
Old 01-03-2012, 03:18 PM   #2
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Hi Sweetpea!

Lightbox has support for resizing.

http://ryrych.github.com/rlightbox2/#features look under "Live Resizing".
domedia is offline   Reply With Quote
Old 01-03-2012, 03:23 PM   #3
sweetpea11
 
Join Date: Jul 2011
Posts: 16
Default

Oh that is awesome! Going to put it in right now. Thank you so much.
sweetpea11 is offline   Reply With Quote
Old 01-03-2012, 03:55 PM   #4
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Let us know about the final result. I'm sure there's plenty of folks that are curious about responsive design.
domedia is offline   Reply With Quote
Old 01-03-2012, 05:06 PM   #5
sweetpea11
 
Join Date: Jul 2011
Posts: 16
Default

Umm. It's taking more jQuery knowledge than the initial light box did so let me work with it & get back to you!

Some links that helped me where:
http://www.catswhocode.com/blog/crea...-media-queries and
http://www.developerdrive.com/2011/0...ueries-part-1/

There are a bunch of others, but those where pretty basic to get me at least started in the right direction.
sweetpea11 is offline   Reply With Quote
Old 01-04-2012, 02:09 AM   #6
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,175
Default

getting a 403 on the first link. not at all responsive
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 01-04-2012, 02:16 AM   #7
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,175
Default

Quote:
I've seen sites do a "formobile" page, but I don't think I'm programmer savy enough for that.
See if this helps you , its for php and redirects to a mobile version/page of your site
http://sourceforge.net/projects/ismobile/
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 01-04-2012, 01:29 PM   #8
sweetpea11
 
Join Date: Jul 2011
Posts: 16
Default

Quote:
Originally Posted by edbr View Post
getting a 403 on the first link. not at all responsive

My apologies. I didn't realize their site was down. Here is a link to an article that has been going around and around & I believe should be read by all who are interested in responsive web design. http://www.alistapart.com/articles/r...ve-web-design/

It's not a tutorial like the other one was, more an broad overview article, but there are some good links & examples.

Lastly, this one: http://coding.smashingmagazine.com/2...-your-website/ is good especially the section on "Retrofitting an existing site"

The menu was the hardest part for me. Making sure that part transitioned smoothly from one media to the next and in each orientation. Once that part was nailed down, the rest of the rest of the site was a breeze. Just keep everything fluid.

Except the light box. I don't know what I'm doing wrong, but it's not working. I took the old code out completely & replaced it with the new code & it didn't work at all. So I tried to alter the old code with bits of the new scalable code, but it didn't scale. I'm not giving up, I'm sure I'm just missing something. Probably a comma.
sweetpea11 is offline   Reply With Quote
Old 01-06-2012, 04:36 PM   #9
sweetpea11
 
Join Date: Jul 2011
Posts: 16
Default

Update: the rlightbox wasn't working for anything. So I did a search and the only other option that came up was something called fancybox. http://fancyapps.com/fancybox/ Works like a dream! You may have to fiddle with the CSS & jQuery settings to get it to work exactly like you want it to but they give examples for pretty much every variant on their site.

Thank you so much domedia for the hook up, I'm sorry I couldn't get it to work. I swear I tried!

Once the site is finished & I'm authorized to launch I'll post a link so you can see the final results.
sweetpea11 is offline   Reply With Quote
Old 01-06-2012, 05:08 PM   #10
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

No problems, I use Fancybox as well
domedia is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:09 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com