Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Samsung Galaxy A35

Sfat pentru aprinderea automata a...

Masina de copt paine - pareri

Cum reactivez Google Maps?
 Conectare tableta X220la Tv

Femeile tinere nu mai vor sa munc...

La mulți ani @un_dac!

La multi ani de Sfantul Gheorghe&...
 Job - Facultate sau certificare

Deadpool & Wolverine (2023)

sistem hibrid eoliana + panouri +...

Outlook e muta pe Android
 Constructie Mun. Iasi. Casa P+1.

Cum mai rezolvati cu chiriasii ra...

Tastatura si mouse cu baterie int...

AC Gree duce la palpait de becuri
 

Redimensionare versiune mobila

- - - - -
  • Please log in to reply
8 replies to this topic

#1
Happi

Happi

    Junior Member

  • Grup: Members
  • Posts: 55
  • Înscris: 15.11.2013
Salut, detion o tema responsive, nu prea cunosc css, asa ca am venit aici sa va cer ajutor. Despre ce e vorba? Cand redimensionezi fereastra browserului la o dimensiune de mobil, aceasta isi preia versiunea de mobil, dar exista un mic bug. Atunci cand deschizi meniul, il lasi deschis si faci fereastra mare (maximize), meniul de mobil ramane pe pagina, odata cu cel de dekstop.

Acelasi topic il gasiti si la sectiune javascript dar cineva m-a informat ca nu are treaba cu js-ul ci cu css-ul.

Puteti vedea un demo aici(faceti pasii de mai sus): http://evobikes.ro/ya/

Codul din css:

@media screen and (max-width: 640px){
div#topBar{
  height: 50px;
}

div#topBar nav{
  display: none;
}
 
div#topBar #mobileNav{
  display: block;
  color: #FFF;
  line-height: 50px;
  cursor: pointer;
  float: right;
}

div#topBar .mobileHome{
  line-height: 50px;
  color: #FFF;
  display: block;
  float: left;
}

nav#mobileNavigation{
  position: absolute;
  width: 100%;
  z-index: 100;
}

nav#mobileNavigation ul{
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

nav#mobileNavigation ul li{
  height: 50px !important;
  width: 100%;
}

nav#mobileNavigation ul li a{
  height: 50px !important;
  width: 100%;
  font-size: 12px;
  color: #FFF;
  box-shadow: inset 0px 1px 0px #2a3a45;
  background: rgb(31,44,54); /* Old browsers */
  background: -moz-linear-gradient(top, rgb(31,44,54) 0%, rgb(19,27,33) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(31,44,54)), color-stop(100%,rgb(19,27,33))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgb(31,44,54) 0%,rgb(19,27,33) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgb(31,44,54) 0%,rgb(19,27,33) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgb(31,44,54) 0%,rgb(19,27,33) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgb(31,44,54) 0%,rgb(19,27,33) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f2c36', endColorstr='#131b21',GradientType=0 ); /* IE6-9 */
  float: left;
  line-height: 50px;
  text-align: center;
}

nav#mobileNavigation ul li a.login{
  color: #FFF;
  background: rgb(136,183,62); /* Old browsers */
  background: -moz-linear-gradient(top, rgb(136,183,62) 0%, rgb(105,158,22) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(136,183,62)), color-stop(100%,rgb(105,158,22))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgb(136,183,62) 0%,rgb(105,158,22) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88b73e', endColorstr='#699e16',GradientType=0 ); /* IE6-9 */
  box-shadow: inset 0px 1px 0px #AAEF40;
}
}



#2
onlyone

onlyone

    - - - GAME MASTER - - -

  • Grup: Senior Members
  • Posts: 12,845
  • Înscris: 08.10.2005
probabil are lagatura cu

nav#mobileNavigation { display: none; }

care ar trebui sa se regaseasca in celalalt css pentru versiunea > 640px , ca sa fie ascunse cand ai mai mult de 640 pixeli ?

Edited by onlyone, 24 December 2013 - 12:52.


#3
Happi

Happi

    Junior Member

  • Grup: Members
  • Posts: 55
  • Înscris: 15.11.2013
Urmatorul cod referitor cu 640px:

@media screen and (max-width: 640px){
div.slider h1{
  margin-top: 50px;
}
div.sliderWrapper #slideControls{
  position: absolute;
  z-index: 100;
  bottom: 20px;
  width: 100%;
}
div.mainSlider{
  display: none;
}
div.mobileSlider{
  display: block;
}
}



#4
onlyone

onlyone

    - - - GAME MASTER - - -

  • Grup: Senior Members
  • Posts: 12,845
  • Înscris: 08.10.2005
cred ca tu trebuie sa adaugi linia asta

nav#mobileNavigation { display: none; }

in

@media screen and (max-width: 1000px){

#5
Happi

Happi

    Junior Member

  • Grup: Members
  • Posts: 55
  • Înscris: 15.11.2013
Am pus, degeaba.

Se poate verifica la acelasi link

#6
onlyone

onlyone

    - - - GAME MASTER - - -

  • Grup: Senior Members
  • Posts: 12,845
  • Înscris: 08.10.2005
cred ca trebuie sa pui si in bootstrap.css ....

#7
onlyone

onlyone

    - - - GAME MASTER - - -

  • Grup: Senior Members
  • Posts: 12,845
  • Înscris: 08.10.2005
incearca sa modifici una din proprietatile @media (min-width: 768px) cum ar fi cea de mai jos

@media (min-width: 768px) {
  .lead {
        font-size: 21px;
  }
  nav#mobileNavigation { display: none; }
}

#8
Happi

Happi

    Junior Member

  • Grup: Members
  • Posts: 55
  • Înscris: 15.11.2013
Am incercat, inzadar.

#9
onlyone

onlyone

    - - - GAME MASTER - - -

  • Grup: Senior Members
  • Posts: 12,845
  • Înscris: 08.10.2005
mda pentru ca nu e acolo
m-am uitat cu firebug si proprietatea display:block nu vine din css ci din java script, si nu este setata inapoi pe display:none cand creste rezolutia
js/build.js

acum cineva care stie jquery poate iti da o mana de ajutor...

adica

//Mobile Navigation
$('#mobileNav').click(function(){
  $('#mobileNavigation').slideToggle(1000);
});

cand dai click pe buton se expandeaza navigatia, mai dai odata click se strange navigatia
insa ramane setata proprietatea display:block cand se redimenzioneaza fereastra...

Edited by onlyone, 24 December 2013 - 19:55.


Anunturi

Second Opinion Second Opinion

Folosind serviciul second opinion ne puteți trimite RMN-uri, CT -uri, angiografii, fișiere .pdf, documente medicale.

Astfel vă vom putea da o opinie neurochirurgicală, fără ca aceasta să poată înlocui un consult de specialitate. Răspunsurile vor fi date prin e-mail în cel mai scurt timp posibil (de obicei în mai putin de 24 de ore, dar nu mai mult de 48 de ore). Second opinion – Neurohope este un serviciu gratuit.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate