POP UP HTML TEMPLATE

  • Status: Closed
  • Prize: $250
  • Entries Received: 3
  • Winner: lgdelrosario

Contest Brief

I currently have a template I have developed for an information section.
http://www.rawmats.com/info/Template1.php
I would like the current template to be polished up to make it as efficient and attractive as possible.
OBJECTIVE:
Template for the template page and the pop-up page
1) Hide template page, instead of just sending to bottom
2) W3 compliant, 3) fast loading, 4) attractive, 5) modern 6) minimalistic code 7) no Flash, only HTML, CSS, JS, PHP
8) Work on Chrome, Opera, Safari, Firefox and yes, sorry IE too! 9) Prefer imbeded CSS instead of a separate CSS file.
10) Maintain high text to code ratio http://99webtools.com/text-to-code-ratio.php
"function before form" Keeping it old school HTML as far as possible.

UPDATE:
Since starting the contest I have actively been looking around for a transition between pages myself and have decided I want to use this one WITH your styling:
http://www.rawmats.com/book/
Flip pages 2-3 I have used the pop-ups.
The original code is open-source from:
http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout/

1) Maybe the thumbnails should be in DIV tags not tables?
2) Bug - the screen does not scale down on a mobile well (the original Template1, 2, 3 etc worked OK for PC and mobiles)
3) Bug - If the Pop-Up is showing and the Left and Right Arrows on the keyboard are used then the book stops working after the PopUp is closed.
4) I want to get the pages to be exactly screen size preferably without scroll bars so its like a Kindle reader feel. I will do this by ensuring that the content is not too long - unless you have better solution. (NOT SQL DB!)

Recommended Skills

Employer Feedback

“Really pleased with his work - has attention to detail and knows his stuff. Takes pride in his work. Maybe the best Freelancer I have ever worked with!”

Profile image perfumervw, Thailand.

Public Clarification Board

  • perfumervw
    Contest Holder
    • 9 years ago

    Q.=> How many thumbnails per page?

    Answer=> I'd like to keep the same page of thumbnails for every size of screen but just a smaller version for mobiles.

    The standard number of thumbnails/page will be 24 (6 x 4) but I plan to have a 12 (4 x 3) and 6 (3 x 2) - THIS DEPENDS ON CONTENT NOT SCREEN SIZE

    So the first example http://rawmats.com/info when you open it on a laptop or an iPhone (landscape) its the same look but just a smaller version (i.e. NOT less of bigger thumbnails).

    The pop-up likewise is full screen on a laptop or iPhone (landscape)

    As far as possible I would like to avoid scroll bars.

    The 'feel' is to be there is a fixed screen like a touch screen TV that you can open the thumbnails. So content will have to be limited by ME to not spill over the screen size. If the user needs to see closer they have to zoom in themselves

    • 9 years ago
    1. perfumervw
      Contest Holder
      • 9 years ago

      Hi
      Many thanks for your entry - I thought you were sure to win it - but c'est la vie.
      You have great styling and if you are OK I will invite you to offer for any future contests/projects I put up.
      All the best,
      Steve

      • 9 years ago
    2. pbalasa
      pbalasa
      • 9 years ago

      Thank you very much, Steve!
      I am glad you had a great result and hope my design and ideas helped!

      Kindest regards,
      Peter

      • 9 years ago
  • perfumervw
    Contest Holder
    • 9 years ago

    I think Igdelrosario's got it just 1 day to go..

    • 9 years ago
    1. lgdelrosario
      lgdelrosario
      • 9 years ago

      please email me how to chat with you online, looking forward to work with you :)

      • 9 years ago
  • fathimak
    fathimak
    • 9 years ago

    http://amftechsolutions.com/tmp/

    • 9 years ago
    1. arvigenio
      arvigenio
      • 9 years ago

      I will post later the thumbnail version of my creation thnx

      • 9 years ago
    2. arvigenio
      arvigenio
      • 9 years ago

      I also sent you a private message

      • 9 years ago
  • MagicalDesigner
    MagicalDesigner
    • 9 years ago

    Sir please sealed the contest.I want to submit my entry thanks

    • 9 years ago
    1. perfumervw
      Contest Holder
      • 9 years ago

      The contest is now sealed.

      • 9 years ago
    2. perfumervw
      Contest Holder
      • 9 years ago

      You didn't submit so the contest has been unsealed

      • 9 years ago
  • fathimak
    fathimak
    • 9 years ago

    I will show demo tomorrow

    • 9 years ago
  • perfumervw
    Contest Holder
    • 9 years ago

    UPDATED BRIEF - CHECK IT OUT

    • 9 years ago
  • SourceForge
    SourceForge
    • 9 years ago

    hello, still in progress ?

    • 9 years ago
    1. perfumervw
      Contest Holder
      • 9 years ago

      Yes still in progress.

      • 9 years ago
    2. perfumervw
      Contest Holder
      • 9 years ago

      Update:
      I have actively been looking around for a transition between pages and have found this one:
      http://www.rawmats.com/book/
      Do you think that the templates could be put onto this page and when a thumbnail is clicked it opens the popup?
      Click on popup > back to book
      The code is at:
      http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout/

      • 9 years ago
  • perfumervw
    Contest Holder
    • 9 years ago

    FYI: I currently like the general way my original template works.
    Equal thumbnails - full screen pop-up page - looks same cross-browser. Even works pretty much the same on a mobile device.
    However:
    I am looking for just a less clunky transition from template to template (maybe slide, fade or hopefully you have a better idea) or a more interesting opening/closing on the pop-up (transition, expanding, fading or...??).
    But it must feel to the user:
    Quick, modern, simple, minimalist, attractive interface, wanting to click more....
    Maybe:
    No scroll-bars. Full screen without menu bars as default. Consider transition effects as long as they are just CSS, JS, HTML, PHP. Absolutely NO FLASH.

    • 9 years ago
  • quangtranvn
    quangtranvn
    • 9 years ago

    let me do it and you will not be disappointed, I have a lot experience make a webpage from a->z.

    • 9 years ago
  • perfumervw
    Contest Holder
    • 9 years ago

    Think old school - keep it simple and stupid

    • 9 years ago

Show more comments

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!