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

0

witam,

jestem na forum od 3 minut...
Mam swoją niekomercyjną stronę http://bociany-online.plbocianó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

3

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ć.

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?

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"

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");
  }

})
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 :)

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>
0

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

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?

1

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.

0

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

0

Tak najprościej dodać do styli .kamera_mala i .kamera_duza float: left;. Chyba można zrobić to lepiej i ładniej ale musiałbym sobie chwilę przypomnieć pozycjonowanie div-ów no i nie ta godzina :)
A tło masz tutaj https://www.w3schools.com/css/css_background.asp

0

Ładujesz na stronie 2 wersje Jquery. Używaj jednej.
Link do CSS tworzącego tło z obrazka: https://www.w3schools.com/howto/howto_css_full_page.asp

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