Új hozzászólás Aktív témák

• #1755 trisztan94 őstag Sk8erPeter #1754

  Új Válasz 2012-12-19 20:30:03 #1755

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  trisztan94

  őstag

  válasz Sk8erPeter #1754 üzenetére

  Igazad van, nem adtam túl sok infót, bocsi

  jsFiddlen egyáltalán nem működik, egy képre van rakva az even handler. Így néz ki a HTML:

  <img id="PhpTutorials" src="~/Images/PHP.png" width="150px" height="150px" alt="PHP Tutorialok"/>
  <img id="AspdotNetWPTutorials" src="~/Images/ASPdotNet.png" width="150px" height="150px" alt="ASP.NET Tutorialok"/>
  <div class="TutorialsSlideDown"></div>

  css: (nem tudom, hogy kell-é, azért ide rakom)

  .TutorialsSlideDown
  {
  display: none;
  padding: 10px;
  height: 500px;
  background-color: #7AC0DA;
  }
  #PhpTutorials{
  cursor: pointer;
  }
  #AspdotNetWPTutorials{
  cursor: pointer;
  }
  .GoBack{
  cursor: pointer;
  }

  A jQuery kódot feljebb már raktam, de azért berakom mostis:

  $(document).ready(function () {
  $('#PhpTutorials').click(openTutorials('#PhpTutorials', "PHP Tutorialok. <a class='GoBack'>Vissza</a>"));
  $('#AspdotNetWPTutorials').click(openTutorials('#AspdotNetWPTutorials', "ASP.NET Web Pages Tutorialok. <a class='GoBack'>Vissza</a>"));
  
  function openTutorials(id, title) {
  $(id).on('click', function () {
  $('.tutorial_listing').slideUp(400);
  $('.TutorialsSlideDown').slideDown(400);
  $('#PageTitle').html(title);
  $('.GoBack').on('click', function () {
  $('.TutorialsSlideDown').slideUp(400);
  $('.tutorial_listing').slideDown(400);
  $('#PageTitle').html("Tutorialok");
  });
  });
  }
  });

  Ez vizuálisan így néz ki:

  Alaphelyzet
  Beanimálva

  Tehát a lényeg az, hogy amikor a felhasználó rákattint az egyik képre, akkor az felcsúszik (slideUp), eközben a láthatatlan TutorialsSlideDown div felcsúszik, megváltozik a cím. Tehát így tökéletes.
  Írtad ugye, hogy nem szép így az event handlerben a function, így írjam helyette:

  $('#PhpTutorials').click(function(){
  openTutorials('#PhpTutorials', "PHP Tutorialok. <a class='GoBack'>Vissza</a>")
  });

  Ezzel az a baj, hogy csak 2. kattintásra reagál. Asszem le is írtam előző hszben, a lényeg az, hogy első kattintáskor semmi reakció, firebug sem mutat semmit, másodikra meg történik az animáció.

  No a másik kérdés, hogy ugye ide szeretnék tartalmat beilleszteni, aszerint, hogy melyik képre kattintott. Ha a PHP-sra, akkor PHP-vel kapcsolatos dolgok, így tovább. Erre gondoltam, hogy adatbázisból kiszedném a dolgokat amik hozzá tartoznak, amikor rákattintott a user, de még az animáció nem kezdődött el, és így nem kéne minden képhez külön divet létrehoznom.

  jsfiddlen próbáltam img helyett divvel mutatni a példát, de az istenért se csinált semmit

Új hozzászólás Aktív témák