Znalazłem 3 rozwiązania tego problemu:

1. Załatwić to skryptem przez terminal systemowy… Co jest kompletnym nieporozumieniem i stratą czasu, chyba że ktoś lubi pisać skrypty :)

2. Pogrzebanie w ustawieniach iPhoto. Korzystam z systemu w wersji angielskiej, więc u mnie robi się to tak: Preferences -> General -> Connecting camera opens -> Wybieramy: No application. To rozwiązanie ma jedną dużą wadę, iPhoto przestaje się włączać nieważne czy podłączysz iPhona czy też swój własny aparat. Co w tym przypadku także mnie nie zadowala.

3. Trzecią metoda rozwiązuje idealnie mój problem i polecam ją każdemu :)

• Krok 1: Podłączamy naszego iPhona do komputera.
• Krok 2: Włączamy Image Capture (Applications -> Image Capture). Nasz iPhone powinien pojawić się na liście urządzeń po lewej stronie.
• Krok 3: Wybieramy iPhona z listy urządzeń. Jeśli zrobimy to poprawnie po prawej stronie pokaże się nam lista zdjęć które mamy na naszym telefonie (patrz obrazek poniżej).

• Krok 4: W lewym dolnym rogu, znajdziemy box z nazwą naszego iPhona, a poniżej będzie napis: “Connecting this iPhone opens” i menu rozwijane. Z tego menu wybieramy “No application”. Gotowe! Teraz możesz podłączać swojego iPhona bez strachu, że uruchomi Ci się iPhoto.

1. Imię,
2. Adres e-mail,
3. Wiadomość,
4. Checkbox wymagany do zatwierdzenia warunków dotyczących prywatności składowanych danych.

Zakładamy, że wszystkie pola są wymagane do przesłania wiadomośći.

Cała procedura wysłania formularza wygląda mniej więcej tak:

1. Użytkownik wypełnia wymagane pola formularza.
2. Forma jest badana przez skrypt jQuery pod kątem prawidłowości wprowadzonych danych.
3. Jeśli nie ma błędów, przekaż zmienne z formularza do skryptu po stornie serwera.  W przeciwnym wypadku pokaż formę i wypunktuj błędy.
4. Skrypt po stronie serwera może dodatkowo walidować dane, jeśli nie ma błędów wysyłamy e-maila.

Dodanie JavaScript

Przejdźmy teraz do stworzenia wersji AJAX nadmienionego formularza.
Jedynymi rzeczami jakie będziemy zmuszeni dołączyć do strony to skrypt biblioteki jQuery, który jest do pobrania ze strony oficjalnej projektu:  http://jquery.com/ oraz nasz skrypt jQuery służący do walidacji danych i przesłania ich do skryptu po stronie serwera np. php

$(document).ready(function(){
//Tutaj znajduje się nasz kod, aktywny w chwili załadowania treści strony
});

Banalnie proste, podłączmy zatem akcję w chwili kliknięcia na opcję wyślij, u nas button o id=”submit”

$(document).ready(function(){
$(”#submit”).click(function(){
return false;
});
});

Banalnie proste spójrzmy zatem na całościowy kod opatrzony w komentarze.

$(document).ready(function(){

var errorColor   = ‘#F3D2D3′;
var correctColor = ‘#F2F2F2′;
var errorMarks   = ‘background-color’;

$(”#reset”).click(function(){
// czyścimy wszystkie pola formularza
document.getElementById(’form’

).reset();
});

$(”#submit”).click(function(){

// ustalamy kolory tła pól na nie wskazujące jakichkolwiek błędów
$(”#name”).css(errorMarks, correctColor);
$(”#email”).css(errorMarks, correctColor);
$(”#message”).css(errorMarks, correctColor);
$(”#agree”).css(errorMarks, correctColor);

// zmienna błędu głobalnego
var hasError = false;
// wyrażenie regularne służące do walidacji adresu e-mail
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

// pobieramy wartości odpowiednich pól
var nameVal    = $(”#name”).val();
var emailVal   = $(”#email”).val();
var messageVal = $(”#message”).val();
var agreeVal   = $(”#agree:checked”).val();

// sprawdzamy wartości wypełnionych pól formularza
if(nameVal == ”) {
$(”#name”).css(errorMarks, errorColor);
hasError = true;
}
if(emailVal == ”) {
$(”#email”).css(errorMarks, errorColor);
hasError = true;
} else if(!emailReg.test( emailVal )) {               $(”#email”).css(errorMarks, errorColor);
hasError = true;
}
if(messageVal == ”) {
$(”#message”).css(errorMarks, errorColor);
hasError = true;
}
if (agreeVal == null) {
hasError = true;
}

// jeśli globalna zmienna błędu jest ustawiona na false
if(hasError == false) {
// dynamiczne przejście transparencji formularza o numerze id=”form” do wartości 0.30
$(”#form”).fadeTo(”slow”, 0.30, function() {
// dorzucamy kod z obrazkiem sygnalizującym procedowanie danych przez skrypt
$(”#form”).after(’<div class=”loader”><img src=”img/loading.gif” alt=”Loading…” /></div>’);
// moment kulminacyjny naszej aplikacji w jQuery - przesyłamy dane do skryptu php
$.ajax({
type: “POST”,
url:  ”sendmail.php”,
data: { name: nameVal, company: companyVal, address: addressVal, phone: phoneVal, email: emailVal, message: messageVal },
// msg zawiera wartość zwróconą przez skrypt php w przypadku poprawnego zakończenia działania
success: function(msg) {
// zapiszmy wynik działania skryptu na stronie html w div o id=”content”
$(”#content”).html(msg);
// schowajmy fomę
$(”#form”).fadeOut(”slow”);
},
// wystąpiły błędy
error: function (XMLHttpRequest, textStatus, errorThrown) {
$(”#content”).html(’Przepraszamy, wiadomość nie mogła zostać wysłana.’);
$(”#form”).fadeOut(”slow”);
}
});

});
}
else
return false;
});
});

<?php

// odbieramy zmienne przesłane przez AJAX metodą POST
$Name        = $_POST['name'];
$SenderEmail = $_POST['email'];
$MailContent = $_POST['message'];

$TargetEmail = ‘biuro@company.pl’;

// Constant headers
$headers  = ‘MIME-Version: 1.0′ . “\r\n”;
$headers .= ‘Content-type: text/plain; charset=utf-8′ . “\r\n”;
$headers .= “From: “.$Name.” <”.$SenderEmail.”>\r\n”;

// wysyłamy wiadomość e-mail
if( @mail( $TargetEmail, ‘Wiadomość z formularza na stronie company.pl’, $MailContent, $headers ) ) {
$content = ‘Wiadomość została wysłana pomyślnie. Dziękujemy za zainteresowanie naszą ofertą.’;
}
else
$content = ‘Przepraszamy, wiadomość nie mogła zostać wysłana.’;

// ta wartosc w przypadku sukcesu odbierze nasz skrypt w klauzuli success w funkcji $.ajax()
echo $content;
?>

A więc do dzieła:

1. Najpierw robimy szkielet naszego menu:

<ul>
<li><a href=”#”>Menu 1</a>
<ul>
<li><a href=”#”>Podmenu 1</a></li>
<li><a href=”#”>Podmenu 2</a></li>
<li><a href=”#”>Podmenu 3 z podmenu</a>
<ul>
<li><a href=”#”>Kolejne podmenu</a></li>
<li><a href=”#”>Kolejne podmenu</a></li>
</ul>
</li>
<li><a href=”#”>Podmenu 4</a></li>
</ul>
</li>
<li><img src=”images/menu-podzial.png” alt=”"/></li>
<li><a href=”#”>Menu 2</a></li>
<li><img src=”images/menu-podzial.png” alt=”"/></li>
<li><a href=”#”>Menu 3</a>
<ul>
<li><a href=”#”>Szersze Podmenu 1</a></li>
<li><a href=”#”>Szersze Podmenu 2</a></li>
<li><a href=”#”>Szersze Podmenu 3</a></li>
<li><a href=”#”>Szersze Podmenu 4</a></li>
</ul>
</li>
<li><img src=”images/menu-right.png” alt=”" /></li>
</ul>

2. Tworzymy plik menu.js w którym będziemy mieć funkcje odpowiedzialna za menu:

function mainmenu(){}

$(document).ready(function(){
mainmenu();

$(function() {
$(’#nav’).droppy({speed: 100});
});

});

3. W sumie to by wystarczyło do stworzenia menu rozwijanego, jednak musimy nadać temu odpowiedni wygląd, a więc musimy zdefiniować odpowiednie style w CSS. Do tego potrzebujemy zdefiniować odpowiednie klasy w naszym menu:

<ul id=”nav”>
<li class=”act”><a href=”#” class=”ccc”>Menu 1</a>
<ul class=”back”>
<li class=”toppodmenu”><a href=”#” class=”short”>Podmenu 1</a></li>
<li class=”podmenu”><a href=”#” class=”short”>Podmenu 2</a></li>
<li class=”podmenu”><a href=”#” class=”short”>Podmenu 3 z podmenu</a>
<ul class=”back”>
<li class=”podmenu”><a href=”#” class=”short”>Kolejne podmenu</a></li>
<li class=”podmenu”><a href=”#” class=”short”>Kolejne podmenu</a></li>
</ul>
</li>
<li class=”podmenu”><a href=”#” class=”short”>Podmenu 4</a></li>
</ul>
</li>
<li class=”act”><img src=”images/menu-podzial.png” alt=”"/></li>
<li class=”act”><a href=”#” class=”ccc”>Menu 2</a></li>
<li class=”act”><img src=”images/menu-podzial.png” alt=”"/></li>
<li class=”act”><a href=”#” class=”ccc”>Menu 3</a>
<ul class=”back”>
<li class=”toppodmenu”><a href=”#”>Szersze Podmenu 1</a></li>
<li class=”podmenu”><a href=”#”>Szersze Podmenu 2</a></li>
<li class=”podmenu”><a href=”#”>Szersze Podmenu 3</a></li>
<li class=”podmenu”><a href=”#”>Szersze Podmenu 4</a></li>
</ul>
</li>
<li class=”rog”><img src=”images/menu-right.png” alt=”" /></li>
</ul>

I dopisać do tego CSS:

* {
margin:     0;
padding:     0;
}

img {
border:     0px;
}

li {
font-family:         Tahoma, Helvetica, Arial, “MS Trebuchet”, sans-serif;
font-size:             14px;
color:                #00572A;
}

#header {
height:     100px;
width:         400px;
margin:     0 auto;
margin-top:    10px;
}

a {
font-family:         Helvetica, Arial, “MS Trebuchet”, sans-serif;
font-size:             11px;
text-decoration:    none;
margin-top:            16px;
}

#header .menu {
background:     url(images/menu-bg.png) repeat-x;
height:         48px;
}

#header .menu img.left {
float: left;
}

#header .menu img.right {
float: right;
}

#nav, #nav ul {
font-family:             Helvetica, Arial, sans-serif;
letter-spacing:         1px;
margin:                    0;
padding:                0;
list-style-type:        none;
list-style-position:    outside;
position:                relative;
line-height:            30px;
z-index:                10;
}

#nav .podmenu a, #nav .toppodmenu a {
margin:             0;
display:            block;
padding:            0px 5px;
color:                #ffffff;
text-decoration:    none;
background:            #004b8f;
border-top:            1px solid white;
opacity:             0.9;
filter:             alpha(opacity=90);
}

#nav .act .back li.hover, #nav .act .back a:hover {
background:            #004b8f;
height:                30px !important;
opacity:             0.95;
filter:             alpha(opacity=95);
}

#nav .toppodmenu a {
border:     0px;
opacity:     0.9;
filter:     alpha(opacity=90);
}

#nav a {
display: block;
}

#nav a.ccc {
font-family:        Tahoma, Arial, sans-serif;
font-size:            14px;
color:                 #fff;
margin:                0;
float:                left;
border:                0;
padding:            10px;
}

#nav a.ccc:hover, #nav li.hover {
background:        url(images/blue.png) repeat-x;
}

#nav ul.back a:hover {
background-color:        #3773a9;
color:                    #ffffff;
}

#nav li {
float:        left;
position:    relative;
}

#nav li.act {
height:     48px;
}

#nav li.podmenu {
float:        left;
position:    relative;
}

#nav li.toppodmenu {
margin-top:    19px;
float:        left;
position:    relative;
}

#nav li.rog {
float: right;
}

#nav ul {
position:    absolute;
display:    none;
width:        70px;
top:        23px;
left:        0px;
}

#nav li ul a {
width:    220px;
height:    auto;
float:    left;
}

#nav li ul a.short {
width:    160px;
height:    auto;
float:    left;
}

#nav ul ul {
top:    auto;
}

#nav li ul ul {
left:            160px;
margin:            0px 0 0 10px;
border-left:     1px solid white;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
display:    none;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
display:    block;
}

I to tyle :) nasze menu wygląda tak.
Jeśli chcecie pobrać pliki (żeby nie musieć tego kopiować) możecie wejść bezpośrednio tu.
Menu działa pod wszystkimi przeglądarkami (IE 6.x +, FF 2.x +, Opera, Safari, Chrome).

1. Ci którzy mają na swoim pokładzie Mac OS X Tiger muszą sobie doinstalować narzędzie X11 (znajduje się na płytce Tigera), szczęśliwcy którzy mają Leoparda mogą przejść do punktu 2 :)
2. Teraz ściągnijcie najnowszą wersje Darwine-a i ją otwórzcie.
3. Przenieście Darwine-a i Trix-a do folderu Aplikacje (Applications)
4. Ściągnijcie i zainstalujcie najnowszą wersję ie4osx.
5. Po udanej instalacji na pulpicie pojawi się plik IE6, to znaczy że wasz Mac jest gotowy, aby odpalić na nim Internet Explorera :)
6. Aby go usunąć po prostu przenieś go do kosza.

Podgląd tutaj!

Dodaj jQuery do header-a (linkuje do pliku z jQuery.com)

<script type=”text/javascript” src=”http://code.jquery.com/jquery.js”></script>

Teraz stwórz reguły CSS dla zakładek, ich tytułów, zawartości i wszelkich elementów które chcemy wystylizować. (dodaj je do pliku .html lub do swojego arkusza stylów .css)

<style type=”text/css”>

/* Główny kontener */

.accordion {

width:500px;

}

/* zawartość zakładek, oraz style dla div-a */

.accContent {

display: none;

border: 1px solid #CCCCCC;

padding: 10px;

text-align: justify;

}

/* Tytuły zakładek (jeśli na nie klikniejsz pokazują swoją zawartość, a inne zakładki się chowają) */

.acctitle {

display: block;

width: 100%;

padding: 3px 3px 3px 10px;

background-color: #000;

color: #FFFFFF;

cursor: pointer;

border-bottom: 1px solid white;

font-family: Helvetica, Arial, sans-serif;

}

/* Podstawowy styl zakładki (przeważnie jest to pierwsza widoczna) */

.defaultAccordion {

display: block;

}

</style>

Następnie definiujemy elementy HTML-a, tam gdzie chcemy żeby wyświetlały się zakładki

<div class=”accordion”>

<a class=”acctitle” ref=”first_section”>Pierwsza zakładka</a>

<div class=”accContent defaultAccordion” id=”first_section”>

<p>Przykłądowy text 1.</p>

</div>

<a class=”acctitle” ref=”second_section”>Druga zakładka (ukryta)</a>

<div class=”accContent” id=”second_section”>

<p>Przykłądowy text 2.</p>

</div>

<a class=”acctitle” ref=”third_section”>Trzecia zakładka (ukryta)</a>

<div class=”accContent” id=”third_section”>

<p>Przykłądowy text 3.</p>

</div>

</div>

Musisz pamiętać, że ref każdego anchor-a musi pasować do id contentu, w przeciwnym wypadku skrypt nie będzie działał.

Na koniec dodaj następujący kod między znaczniku <head> na swojej stronie.

<script type=”text/javascript”>

$(function(){

// zapętla każdy link

$(”a.acctitle”).each(function(){

// dodaje event przy kliknięciu

$(this).click(function(){

// chowa wszystkie div-y z klasą accContent

$(”.accContent”).each(function(){

$(this).hide(”slow”);

});

// główny punkt skryptu - Pobiera atrybut ref  z

// linkowanego tytułu i wyświetla ukrytego div-a z tym id

$(”#”+$(this).attr(”ref”)).show(”slow”);

return;

});

});

});

</script>

Podgląd tutaj!

Trick polega na tym, że możecie użyć hasz-a (#) i podkreślenia dolnego ( _ ), aby wykomentować atrybuty dla IE7, IE6  czy FireFoxa.

FireFox widzi “#” i “_” jako komentarze, Internet Explorer 6 za komentarz uznaje “#”, natomiast Internet Explorer 7 komentuje jak przed atrybutem znajdzie się “_”. Więc jeśli napiszesz swój kod CSS tak jak to jest na przykładzie, “zadowolisz” wszystkie trzy przeglądarki. Jest to świetna metoda, aby pogodzić padding i margin, odkąd FireFox i Internet Explorer definiują je po swojemu. 

Przykład:

#div {

      padding: 0px 0 10px 20px;  /* Wszystkie przeglądarki to widzą */

      #padding: 0px;                  /* FireFox nie zobaczy tego, ale IE7 & IE6 tak */

      #margin: 10px 0 0 20px;      /* FireFox nie zobaczy tego, ale IE7 & IE6 tak */

      _margin: 10px 0 0 30px;      /* FireFox & IE7 nie zobaczą tego, ale IE6 tak */

}

Nie testowałem tego jeszcze pod Operą i Safari (wkrótce to zrobię), ale pod FF i IE działa bardzo dobrze. Enjoy! :)

Dla tych co zaczynają swoją przygodę, jak i dla ekspertów którzy szukają kilku nowych tricków, przygotowałem małe zestawienie rzeczy które ułatwiają mi utrzymanie kodu w czystości (tak jakby:P).

1. Pisz tak aby twój kod był łatwy w czytaniu.

W poszukiwaniu najbardziej optymalnego kodu, kiedyś natrafiłem na coś takiego (i trzymam się tego do teraz):

h1 {}
h1#logo { font-size: 2em; color: #000; }

h2 {}
h2.title { font-size: 1.8em; font-weight: normal; }

Szybki skan kodu CSS dla różnych nagłówków daje nam wszelkie potrzebne informacje, a dodatkowo nie wymaga od nas męczenia się z nieczytelnym kodem. Taki kod jest także wygodny gdy pracujesz nad dużym projektem razem z kilkoma osobami i używasz takich samych tagów (np. h2) w wielu miejscach, więc możesz sobie wystylizować każdy oddzielnie, nie martwiąc się że jakieś inne klasy wpłyną na styl twojego nagłówka.

Tą samą technikę można stosować do paragrafów, anchorów i wszelkich multiklasowych tagów.

2. Grupuj kod w bloki.

Może to być oczywiste dla niektórych z was, ale często jak oglądam czyjś kod CSS nie jest on podzielony na “sekcje”. Jest o wiele łatwiej pracować na takim kodzie tygodnie, miesiące, a nawet lata później. Nawet łatwiej Ci będzie znaleźć klasy i elementy które chcesz zmienić.

Tak zazwyczaj dziele swojego CSS-a:

/* Structure */

Tu wrzucam główną strukturę serwisu, divy i klasy.

/* Typography */

Tutaj wymieniam wszystkie paragrafy, nagłówki i to co związane z definicjami czcionek (pogrubienie, rozmiar, itd.)

/* Links */

Jak sama nazwa wskazuje, wszelkie definicje anchor-ów.

/* Lists, images, etc. */

Box przeznaczony na listy, obrazki i wszystko co nie zmieściło się w poprzednich kategoriach.

Jeśli natomiast stworzyliście jakieś skomplikowane menu, to proponuję stworzyć dodatkowy box właśnie na to menu. Wszystkie nazwy pisze po angielsku, bo nigdy nie wiadomo kto czyta Twój kod :)

3. Przestań używać tak dużo div-ów!!

Temat poruszany przez wielu programistów i świrów czystości kodu. Uważam, że nie ma nic złego w używaniu ich tam gdzie jest to konieczne, ale jak ktoś nadaje styl nagłówkowi za pomocą div-a, zamiast użyć do tego tagów nagłówka to nawet mnie na twarzy pojawia się malutki uśmieszek. Spróbujcie przy tworzeniu stron użyć małych tagów lub span ułatwi wam to życie.

4. Nadaj styl wszystkiemu na raz.

Złapałem się na tym, że w każdy element wkładałem “margin: 0; padding: 0;”. Przypomniałem sobie jak jeden mój kumpel używał “*” do nadania odpowiedniego stylu wszystkim elementom na raz. Dlatego stwierdziłem, że nie ma sensu wszędzie definiować to na nowo, jak mogę zrobić to w jednym miejscu.

To naprawdę proste:) 

* { margin: 0; padding: 0; }

Teraz możesz zdefiniować margin i padding tam gdzie naprawdę tego potrzebujesz!