www.webdeveloper.com
Results 1 to 2 of 2

Thread: Apple Store Selection

  1. #1
    Join Date
    Feb 2013
    Posts
    2

    Apple Store Selection

    Hi,
    I am trying to make an order form type web page. I want it to look like the apple store page, where you select device (for instance iPhone 5) then it brings you to this page (the customize page that I am currently working on) where you would select the color (black or white) and it will put a border around the image you selected. This all works fine, but I am having trouble making it look better. Once the border gets added the images all shift down to compensate for the border and allow it to be displayed on the page, what I am trying to do is make the images stationary , maybe a little bit of a margin around the image, but the margin style wont work on the img tag. Here is what I have so far.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
      <title>Customize Your Mountable!</title>
      
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.3.min.js'></script>
    <script type='text/javascript'> 
    $(window).load(function(){
    $(document).ready(function(){
    
        $(".mountableBody").click(function(){
    		$(".mountableBody").removeClass('selected');
    		$(this).addClass('selected');
            var color=$(this).attr('href').split('=')[1]
            $('#mountableBodyColor').val( color );
            return false;
        });
    });
    });
    </script>
    <style type="text/css">
    .mountablesBody{
    	width:100px;
    	height:100px;
    	-webkit-border-radius: 25px;
    	-moz-border-radius: 25px;
    	border-radius: 25px;
    		
    }
    .selected{ border:5px solid red; }
    </style>
    </head>
    <body>
    <img src="" style="background-color:blue; margin:50px 100px;" height="100px" width="100px" class="mountableBody" href="#?color=blue" />
    <img src="" style="background-color:green; margin:50px 100px;" height="100px" width="100px" class="mountableBody" href="#?color=green" />
    <img src="" style="background-color:orange; margin:50px 100px;" height="100px" width="100px" class="mountableBody" href="#?color=orange" />
    <div id="customization_form" >
        <form id="customization" action="javascript:alert('success!');">
            <input type="hidden" id="mountableBodyColor"  name="mountableBodyColor" value=""/>
            <input type="submit" value="Submit" />
        </form>
    </div>
    </body>
    </html>
    
    
    <!-- Hosting24 Analytics Code -->
    <script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
    <!-- End Of Analytics Code -->
    and here is the outcome: [url]http://mountables.net84.net[/]

  2. #2
    Join Date
    Feb 2013
    Posts
    2

    bump

    If anyone even just has some guidance I would appreciate it, I was thinking of maybe surrounding it in a div with padding, but i dont think that will work.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles