Zmiana układu strony bez przeładowywania - najlepiej przydała by się pomoc życzliwego informatyka

Odpowiedz Nowy wątek
2018-03-31 16:59
0

witam,

jestem na forum od 3 minut...
Mam swoją niekomercyjną stronę www z podglądem gniazda bocianów [(http://bociany-online.pl)], którą sam zrobiłem. Niestety moja wiedza jest w tym zakresie mocno ograniczona. Dlatego zwracam się o pomoc w przebudowaniu jej.

Mianowicie chodziłoby mi o dwie najważniejsze rzeczy:

  • zamieniać miejscami obraz z obu kamer na stronie bez jej przeładowywania
  • zmianę tła
    Dodatkowo super byłoby jak by strona była responsywna.

Będę wdzięczny za każdą pomoc.
Pozdro
Sylwek

Pozostało 580 znaków

2018-03-31 19:16
1

Witamy, na forum!
Jeśli chodzi o zmianę źródła w Iframe powinno zadziałać coś takiego:

<div id="banner-message">
  <p>Jakis tekst</p>
  <iframe width="50"crolling="no" id ="box" src="bocian1">
  bociek1
</iframe>
  <button id ="button1">Zmien kamerę</button>
</div>
<script>
var button = $("#button1");
var iframe = $("#box");

// handle click and change iframe src
button.on("click", function(){
//remove alert, it's only to show that src is changed
 alert(iframe.attr('src'));
    if( iframe.attr('src')=="bocian1"){

    iframe.attr('src',"bocian2");
  }
  else{
    iframe.attr('src',"bocian1");
  }

})
</script>

Niestety ale cała strona to drobna zbieranina różnych skryptów i elementów i ciężko by było dalej coś z tym robić.

edytowany 2x, ostatnio: jurek1980, 2018-03-31 19:19

Pozostało 580 znaków

2018-03-31 21:11
0

dzięki za odpowiedź. Strona oczywiście jest do wymiany tak że mogę zacząć od zera. Wkleiłem Twój skrypt na testową stronę http://bociany-online.pl/i.php ale coś nie działa. Powklejałem linki src i przez to skrypt stracił czytelność. Czy można wartości src dla bocian1 i bocian2 zdefiniować gdzieś na początku?

Nie wiem czy się tak da ponieważ chodziło mi o przełączanie kamer a raczej ich zamianę miejscami na stronie?

Pozostało 580 znaków

2018-03-31 22:57
0

Wyszedłem z błędnego założenia, że prawidłowo załaduje Ci się Jquery na stronie, bo już go używałeś. Uruchom konsolę w przeglądarce np. w Chorme naciskasz F12. Zobacz ile masz błędów w postaci nie załadowanych plików CSS itd. Jeśli chodzi natomiast o brak działania skryptu to może być to spowodowane wcześniejszym błędem, jaki pokazuje konsola.
Jeśli chodzi o zamianę okienek to trzeba troszkę przerobić skrypt i dodać drugie okno Iframe i drugą wartość.
Popatrz tutaj: https://jsfiddle.net/xktpLfgk/1/ powinno Ci pokazać jak to ma działać, a linki pozmieniaj sam.
Acha, jak zmieniasz linki, to musisz uważać na cudzysłów. Cały adres ma być jednym stringiem czyli ma być otwarty i zamknięty w cudzysłów np: iframe1.attr('src') == "https://youtuXXXX.be/XXXXXXXXXXXXX"

edytowany 1x, ostatnio: jurek1980, 2018-03-31 22:58

Pozostało 580 znaków

2018-04-01 08:42
0

Pozmieniałem tak jak radziłeś ale gdzieś coś jest nie tak - zamienianie nie działa

<div id="banner-message">
  <p>Jakis tekst</p>
  <iframe width="200" height="150"scrolling="no" id="box1" src="https://www.youtube.com/embed/live_stream?channel=UCRwBKYKS3yAKgsit_k7yB_w&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen">
</iframe>
  <iframe width="200" height="150" scrolling="no" id="box2" src="https://www.youtube.com/embed/live_stream?channel=UCryHv9zS6NYZq5LHPIATLuw&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen">
  bociek2
</iframe>
  <button id="button1">Zmien kamerę</button>
var button = $("#button1");
var iframe1 = $("#box1");
var iframe2 = $("#box2");

// handle click and change iframe src
button.on("click", function() {
  //remove alert, it's only to show that src is changed
  alert("ifame1 ma: " + iframe1.attr('src') + " ifame2 ma: " + iframe2.attr('src'));
  if (iframe1.attr('src') == "https://www.youtube.com/embed/live_stream?channel=UCRwBKYKS3yAKgsit_k7yB_w&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen") {
    iframe1.attr('src', "https://www.youtube.com/embed/live_stream?channel=UCryHv9zS6NYZq5LHPIATLuw&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen");
    iframe2.attr('src', "https://www.youtube.com/embed/live_stream?channel=UCRwBKYKS3yAKgsit_k7yB_w&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen");

  } else {
    iframe1.attr('src', "https://www.youtube.com/embed/live_stream?channel=UCRwBKYKS3yAKgsit_k7yB_w&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen");
    iframe2.attr('src', "https://www.youtube.com/embed/live_stream?channel=UCryHv9zS6NYZq5LHPIATLuw&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen");
  }

})

Pozostało 580 znaków

2018-04-02 16:04
0

Zamiast tego:

var iframe1 = $("#box1");
var iframe2 = $("#box2");

zrób

var iframe1 = $("#box1").attr('src');
var iframe2 = $("#box2").attr('src');

i pod kliknięcie podepnij tylko funkcję zamieniającą te wartości, nie ma sensu robić jeszcze większego śmietnika w kodzie :)

Pozostało 580 znaków

2018-04-03 19:00
0

Własnie próbuję opanować ten śmietnik. :) Zacznę z tą stroną od zera tylko najpierw muszę zrobić tą zamianę kamer a coś nie bardzo mi to wychodzi. Wprowadziłem proponowane zmiany (tzn nie do końca...) ale przycisk jest nieaktywny. Dlatego proszę o dalszą pomoc

Tu jest cały kod mojej testowej strony [(http://bociany-online.pl/i.php)]

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bociany online podgląd z kamery na gniazdo bociana</title>
    <meta name="description"
    content="Bociany online w Sławacinku Starym - podgląd z kamery na żywo" />
    <meta name="keywords"
    content="bociany, online, kamera, Sławacinek Stary, Biała Podlaska, gniazdo bociana, bociany, na żywo, Storchen nest, storch, storks online, stork's nest" />
    <meta name="robots" content="all" />
    <meta name="revisit-after" content="1 days" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="Classification" content="webcam" />
    <meta name="author" content="POLCRAFT" />
    <meta name="abstract" content="Bociany na żywo" />
    <meta name="Robots" content="all" />
    <meta name="Rating" content="General" />
    <meta property="og:image" content="http://bociany-online.pl/bocki111.jpg" />
    <link rel="shortcut icon" href="favicon.gif" type="image/gif" />
    <link rel="stylesheet" href="style/style_nowy.css" type="text/css" />   
    <meta name="google-translate-customization" content="9dac0dd6994939da-04ba15561fa8ecc2-ga95df25969371aa5-11"></meta>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <script>    
var button = $("#button1");
var iframe1 = $("#box1").attr('src');
var iframe2 = $("#box2").attr('src');

// handle click and change iframe src
button.on("click", function() {
  //remove alert, it's only to show that src is changed
  alert("ifame1 ma: " + iframe1.attr('src') + " ifame2 ma: " + iframe2.attr('src'));
  if (iframe1.attr('src') == "https://www.youtube.com/embed/live_stream?channel=UCRwBKYKS3yAKgsit_k7yB_w&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen") {
    iframe1.attr('src', "https://www.youtube.com/embed/live_stream?channel=UCryHv9zS6NYZq5LHPIATLuw&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen");
    iframe2.attr('src', "https://www.youtube.com/embed/live_stream?channel=UCRwBKYKS3yAKgsit_k7yB_w&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen");

  } else {
    iframe1.attr('src', "https://www.youtube.com/embed/live_stream?channel=UCRwBKYKS3yAKgsit_k7yB_w&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen");
    iframe2.attr('src', "https://www.youtube.com/embed/live_stream?channel=UCryHv9zS6NYZq5LHPIATLuw&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen");
  }

})
    </script>
 </head>

  <body>
    <div style="align:center;" id="banner-message">
        <p>Jakis tekst</p>
            <iframe width="300" height="169" scrolling="no" id="box1" src="https://www.youtube.com/embed/live_stream?channel=UCRwBKYKS3yAKgsit_k7yB_w&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen">
            bociek1
            </iframe>

            <iframe width="900" height="519" scrolling="no" id="box2" src="https://www.youtube.com/embed/live_stream?channel=UCryHv9zS6NYZq5LHPIATLuw&autoplay=1&showinfo=0&rel=0&controls=2&showsearch=0&fs=1" frameborder="0" allowfullscreen">
            bociek2
            </iframe>
        <button id="button1">Zmien kamerę</button>
    </div>
   </body>
</html>

Pozostało 580 znaków

2018-04-03 20:33
0

Nadal potrzebuję pomocy aby zmusić to do działania: [(https://jsfiddle.net/polcraft/xktpLfgk/58/)]

edytowany 3x, ostatnio: Sylwek Kajor, 2018-04-03 20:35

Pozostało 580 znaków

2018-04-03 20:52
0

Tutaj już wszystko działa jak trzeba [(https://jsfiddle.net/polcraft/xktpLfgk/76/)] ale po wklejeniu na stronę już nie... Ktoś wie co robię nie tak?

Pozostało 580 znaków

2018-04-03 22:30

Próbujesz przypisać obiekty

var button = $("#button1");
var iframe1 = $("#box1").attr('src');
var iframe2 = $("#box2").attr('src');

zanim zostaną one wstawione na stronie. Masz 2 wyjścia:

  1. wstawić swój kod JS w funkcję
    $(function() {
    //Twój kod ze <script>
    });

    JQuery odpali wtedy tą funkcję gdy strona zostanie załadowana, czyli kiedy utworzą się iframe i button.

  2. Przesunąć cały kod <script> ... </script> ZA BEZPOŚREDNIO PRZED </body> Wtedy JS znajdzie obiekty do których chcesz się odwołać.

Na jsfiddle.net działa ok bo prawdopodobnie skrypt jest ładowany na wzór pierwszego rozwiązania.

EDIT:. Fakt, coś mi się pomyliło z tym umiejscowieniem skryptu.

edytowany 1x, ostatnio: Clarc, 2018-04-04 00:18

Pozostało 580 znaków

2018-04-03 23:44
0

Bardzo dziękuję za skuteczną pomoc. Problem rozwiązany - temat do zamknięcia

edytowany 2x, ostatnio: Sylwek Kajor, 2018-04-04 20:42

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0