Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
rollover + czytanie z dokumentu - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: rollover + czytanie z dokumentu (/thread-rollover-czytanie-z-dokumentu)

Strony: 1 2 3

rollover + czytanie z dokumentu - raxiq - 14-05-2012



RE: rollover + czytanie z dokumentu - Radian - 14-05-2012

http://ferrante.pl/frontend/javascript/jquery-to-latwe-1/
zobacz sobie to, są tu 3 lekcje do jquery

a tu przykład: http://ferrante.pl/frontend/javascript/jquery-to-latwe-3/
chyba o to ci chodzi ?

Div nie musi zmieniać stylu, height zmieni się automatycznie gdy tekst będzie dłuższy i nie będzie sie w nim mieścił.

Poniżej znowu masz liste wywoływania zdarzeń w javascript:
http://www.doman.art.pl/kursjs/kurs/events.html

Zamiast klikania może być najechanie myszką nad element itd. itd.

RE: rollover + czytanie z dokumentu - raxiq - 14-05-2012

Generalnie moim głównym problemem nie jest stworzenie elementu, który będzie się rozsuwał tak jak np menu.

Interesuje mnie przede wszystkim jak przerobić wskazany przeze mnie kod tak, aby we wskazanym divie wyświetlał tekst np z pliku txt/html, znajdującego się w tym samym katalogu. Ewentualnie mogę zrobić tak, a nawet to będzie chyba wygodniejsze, żeby była wyświetlana zawartość diva nr 1(którego zawartość sobie ukryje poprzez display:none) w divie nr 2, po najechaniu myszką/kliknięciu myszką w dany element w tym wypadku element tekstowy-nazwisko danej osoby. To jest dla mnie najważniejsze, a z samym rozsuwaniem chyba sobie poradzę. Moje dywagacje były na temat tego co jest po prostu wygodniejsze ;p

Mimo wszystko thx za poradnik do jQuery, kiedyś skorzystam na pewno, aczkolwiek na chwile obecną zależy mi jedynie na tym drobnym zabiegu.

RE: rollover + czytanie z dokumentu - Radian - 14-05-2012

Lepiej zdecydowanie jest ukryć diva i pokazywać przy pomocy javascript:

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Show it</button>

<p style="display: none">Hello 2</p>
<script>
$("button").click(function () {
$("p").show("slow");
});
</script>

</body>
</html>

Sam na javascript znam się średnio :p
http://api.jquery.com/show/

Ale z tego co widzę do show() hide() odpowiada w jQuery za pokazywanie i ukrywanie diva.

RE: rollover + czytanie z dokumentu - raxiq - 14-05-2012

DOBRE ! O coś takiego mi chodziło, może uda mi się to jakoś połączyć z onClick etc. i uzyskam bezpośrednio to co chcę!

Dzięki wielkie.

RE: rollover + czytanie z dokumentu - raxiq - 16-05-2012



RE: rollover + czytanie z dokumentu - camelrafal - 20-05-2012

wyśrodkowanie osiągniesz przez
Kod:
margin-left:auto;
margin-right:auto;
no i musisz podać konkretną lub mniej konkretną(w%) szerokość strony(kontenera)
a w kontenerze to już sobie układasz jak chcesz i co chcesz

RE: rollover + czytanie z dokumentu - camelrafal - 20-05-2012

w kodzie generalnie nie zauważyłem jakiegoś rażącego błędu który mógłby to powodować (przesunięcie 1px) [musiałbyś podać cały kod]
ale co zauważyłem to to że dziwnie nadajesz nazwy id i class
masz id o nazwie body który może ci się mylić z sekcją body dla strony
tak jak i id="menu" i class="menu"
niby jest to poprawnie ale łatwo można popełnić błąd
w stylu masz zapewne sekcje
#menu{}
jak i sekcje
.menu{}
jeżeli będziesz pamiętał które jest które to w porządku tylko lepiej jest stosować id zamiast class jeżeli element występuje na stronie tylko raz(tak jak twoje menu)
natomiast jeżeli na stronie będzie się znajdowało wiele elementów które będą współdzieliły ten sam styl wtedy używasz class

RE: rollover + czytanie z dokumentu - raxiq - 21-05-2012

Możliwe, że gdzieś jest ten błąd, mam prośbę zerknij w takim razie jak możesz resztę kodu, może Ty znajdziesz to czego ja nie widzę ;p

Kod:
html, body {
  margin:0;
  padding:0;
  font-size:11px;
  font-family:Tahoma, Helvetica, sans-serif;
  color:#d0d0d0;
  line-height:1.4em;
  
}

body {
margin: 0;
  padding:0;
  background: url(backgroundlayout.png) no-repeat center;
  background-color: black;
  border: 0;
}

img {
  border:0;
}

a:link, a:visited {
text-decoration:underline;
color:white;
border:0;
}

a:hover {
color:#f7bf00;
}

/* Struktura */

div#logo {
    margin: 0;
      padding:0;
  width: 960px;
  height: 231px;
  background-color: grey;
}

div#menu {
margin: 0;
  padding:0;
  width:960px;
  height:39px;
}

div#container {
margin: 0;
  padding:0;
  width:960px;
  height:643px;
}

div#footer {
margin: 0;
  padding:0;
  clear:both;
  font-size:0.9em;
  width: 960px;
  height: 62px;
}


/* MENU */

ul.menu, ul.menu li {
    height:39px;
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.menu li {
float:left;
}

ul.menu a:link, ul.menu a:visited {
  float:left;  
  height:39px;
  display: block;
  color:#8d8d8d;    
  text-decoration: none;
    text-align: center;    
    font-size:1.1em;
    margin: 0;
    padding: 0;
}

ul.menu a:hover {
  color:white;  
  background:#2b2b2a;  
  margin: 0;
    padding: 0;
}


body#index ul.menu a#link0:link, body#index ul.menu a#link0:visited,
body#onas ul.menu a#link0:link, body#onas ul.menu a#link0:visited,
body#zakres ul.menu a#link1:link, body#zakres ul.menu a#link1:visited,
body#zaufaj ul.menu a#link2:link, body#zaufaj ul.menu a#link2:visited,
body#referencje ul.menu a#link5:link, body#referencje ul.menu a#link5:visited,
body#cennik ul.menu a#link5:link, body#cennik ul.menu a#link5:visited


{
  color:white;
  background:#2b2b2a;
margin: 0;
    padding: 0;
}

/* CONTENT */

div#content_main {
  width:600px;
  height: 643px;
  float: left;
  margin: 0;
    padding: 0;
}

div#content_main p:hover {
  color: red;
}

div#content_right {
  float:right;
  width:360px;
  height: 643px;
  color:#a1a1a1;
  line-height:1.3em;
  margin: 0;
    padding: 0;
}

div#content_contact {
  float:right;
  width:340px;
  height:303px;
  color:#a1a1a1;
  background-color: #696969;
  line-height:1.3em;
  margin: 0;
    padding: 0;
}

div#content_location {
  float:right;
  width:340px;
  height: 340px;
  color:#a1a1a1;
  background-color: #2F4F4F;
  line-height:1.3em;
  margin: 0;
    padding: 0;
}

/* FOOTER */



#footer_left {
  float:left;
  width: 480px;
  height: 62px;
  text-align:left;
  margin: 0;
    padding: 0;
}

#footer_right {
  float:right;
  width: 480px;
  height: 62px;
  font-size:1em;
  text-align:right;
  margin: 0;
    padding: 0;
}


#footer a:link, #stopka a:visited, #stopka_right {
  color:#474747;
  text-decoration:none;
}

#footer  a:hover {
   color:#fff;
   text-decoration:underline;
}

Jeżeli chodzi, o css, to pozwoliłem sobie po prostu zapożyczyć z pewnej dobrze napisanej strony, jak szablon/podstawę dla mnie. Dzięki temu mogę trzymać się jakiejś dobrej struktury i łatwiej mi się uczyć na tym. Sam takiego nie napiszę, a z edycją i czytaniem znaczników raczej nie mam problemu.

I teraz tak: chcę wstawić background jako tło tak aby było widoczne po bokach - więc 1px x 975px w moim wypadku, wstawiam do sekcji html, body tak ? Jak tam widać jakieś niejasności to walcie śmiało ;p lepiej poprawiać teraz jak później Big Grin[/align]

RE: rollover + czytanie z dokumentu - camelrafal - 21-05-2012

background wstawiasz w body
tam widze że masz już background tylko że bez-powtarzania(no-repeat) a powinieneś mieć z powtarzaniem-x(repeat-x)

czyli:
Kod:
body {
margin: 0;
   padding:0;
   background: url(backgroundlayout.png) repeat-x center, black;
   border: 0;
}

a co do tego przesunięcia 1px to skopiowałem ten kod co podałeś i u mnie wszystko jest ok i na firefox i na opera