Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Podwójny link
Forum PHP.pl > Forum > Po stronie przeglądarki
cedunio
15.08.2008, 11:52:53
Witam
Mój problem polega na tym, że potrzebny jest mi skrypt (widziałem gdzieś taki ale teraz nie mogę go znaleść) który będzie umożliwiał otwarcie pokliknięciu w link dwóch stron jednocześnie w dwóch ramkach.
Proszę o pomoc i z góry dziękuję
lord_t
15.08.2008, 17:06:07
Nadaj kazdej z ramek id a potem skorzystaj z tego (powinno zadziałać):
Kod js:
Kod
function xx(){
document.getElementById("id1").location="adres.pierwszej.strony";
document.getElementById("id2").location="adres.drugi.pl";
}


Kod html:
[HTML] pobierz, plaintext 
  1. <div onclick="xx()">otworz 2 strony</div>
[HTML] pobierz, plaintext


Żeby div wygladał jak link wykorzystaj style css.
cedunio
15.08.2008, 18:00:50
Zrobiłem tak:
Kod
</div><script type="text/javascript">
function xx(){
document.getElementById("1").location="cos.pl";
document.getElementById("2").location="cos2.pl";
}
</script>
<div>


bo tak chyba to powinno wyglądać dry.gif

no i pod obrazek wsadziłem tego diva i nic.
Więc zrobiłem tak 
[HTML] pobierz, plaintext 
  1. <div onclick="xx()">otworz 2 strony</div>
[HTML] pobierz, plaintext

i tez nic:/
o co chodzi?
paziek
16.08.2008, 12:02:22
ale jakie .location? to nie jest .src przypadkiem?
lord_t
17.08.2008, 20:50:17
Cytat(cedunio @ 15.08.2008, 19:00:50 ) *
Zrobiłem tak:
Kod
</div><script type="text/javascript">
function xx(){
document.getElementById("1").location="cos.pl";
document.getElementById("2").location="cos2.pl";
}
</script>
<div>

1) Sama funkcja nic Ci nie da. Musisz ja wywolywać np. przez klikniecie na divie. Stąd też: 
[HTML] pobierz, plaintext 
  1. <div onclick="xx()">otworz 2 strony</div>
[HTML] pobierz, plaintext

2) Nie jestem pewien czy można nadawać id zaczynające się od liczby.

Cytat(cedunio @ 15.08.2008, 19:00:50 ) *
... i pod obrazek ...

Pod jaki obrazek? Pisałeś o ramkach:>
cedunio
18.08.2008, 15:38:30
Kod
   <html>
   <head>
   <script language="JavaScript">
   function xx(){
   document.getElementById("id1").location="onet.pl";
   document.getElementById("id2").location="wp.pl";
   </script>
   <title>citybuilding</title>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
   </head>
   <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  
   <!-- ImageReady Slices (citybuilding.psd) -->
   <table id="Tabela_01" width="945" height="851" border="0" cellpadding="0" cellspacing="0">
       <tr>
           <td colspan="5">
               <img src="images/citybuilding_01.png" width="375" height="230" alt=""></td>
           <td colspan="5">
               <img src="images/citybuilding_02.png" width="375" height="230" alt=""></td>
           <td>
               <img src="images/citybuilding_03.png" width="144" height="230" alt=""></td>
           <td rowspan="4">
               <img src="images/citybuilding_04.jpg" width="51" height="850" alt=""></td>
       </tr>
       <tr>
           <td>
               <div onclick="xx()"><img src="images/citybuilding_05.png" width="86" height="37" alt=""></div></td>
           <td>
               <img src="images/citybuilding_06.png" width="79" height="37" alt=""></td>
           <td colspan="2">
               <img src="images/citybuilding_07.png" width="114" height="37" alt=""></td>
           <td colspan="2">
               <img src="images/citybuilding_08.png" width="121" height="37" alt=""></td>
           <td>
               <img src="images/citybuilding_09.png" width="138" height="37" alt=""></td>
           <td>
               <img src="images/citybuilding_10.png" width="99" height="37" alt=""></td>
           <td>
               <img src="images/citybuilding_11.png" width="88" height="37" alt=""></td>
           <td colspan="2">
               <img src="images/citybuilding_12.png" width="169" height="37" alt=""></td>
       </tr>
       <tr>
           <td height="520" colspan="3">
         <iframe height="520" width="248" name="base" scrolling="no" frameborder="0" src="cos.pl" id="id1"></iframe></td>
           <td colspan="8" rowspan="2">
               <iframe height="520" width="647" name="base" scrolling="no" frameborder="0" id="id2"></iframe></td>
       </tr>
       <tr>
           <td colspan="3">&nbsp;</td>
       </tr>
       <tr>
           <td>
               <img src="images/spacer.gif" width="86" height="1" alt=""></td>
           <td>
               <img src="images/spacer.gif" width="79" height="1" alt=""></td>
           <td>
               <img src="images/spacer.gif" width="82" height="1" alt=""></td>
           <td>
               <img src="images/spacer.gif" width="32" height="1" alt=""></td>
           <td>
               <img src="images/spacer.gif" width="96" height="1" alt=""></td>
           <td>
               <img src="images/spacer.gif" width="25" height="1" alt=""></td>
           <td>
               <img src="images/spacer.gif" width="138" height="1" alt=""></td>
           <td>
               <img src="images/spacer.gif" width="99" height="1" alt=""></td>
           <td>
               <img src="images/spacer.gif" width="88" height="1" alt=""></td>
           <td>
               <img src="images/spacer.gif" width="25" height="1" alt=""></td>
           <td>
               <img src="images/spacer.gif" width="144" height="1" alt=""></td>
           <td>
               <img src="images/spacer.gif" width="51" height="1" alt=""></td>
       </tr>
   </table>
  
   </body>
   </html>


to jest kod calej strony
pomozcie Panowie( i Panie oczywiście) gdyż zrobil bym to we flashu bo wiem ze sie da,
ale nie za bardzo wiem jak( nie moja działka)
Pozdrawiam i licze na pomoc snitch.gif snitch.gif
lord_t
27.08.2008, 21:47:28
To działa na bank:) Trochę okroiłem Twój kod;)
Jednak miało być src a nie location. 

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function xx(){
  5. document.getElementById("id1").src="http://netsprint.pl";
  6. document.getElementById("id2").src="http://google.pl";
  7. }
  8. </script>
  9.  
  10. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
  11. </head>
  12. <body>
  13.  
  14. <iframe id="id1" height="320" width="250" frameborder="1" src="http://google.pl">
  15. </iframe>
  16.  
  17. <iframe id="id2"height="320" width="250" frameborder="1" src="http://netsprint.pl">
  18. </iframe>
  19. <div onclick="xx()">Use the Force Luke!</div>
  20. </body>
  21. </html>
[HTML] pobierz, plaintext


PS. Sory, ze dopiero teraz, ale i programiści mają czasem wakacje;p
cedunio
1.09.2008, 10:45:29
bardzo ladnie wszystko działa dziękuję ale jeszcze jedna sprawa, jak to zrobic aby po najechaniu na tego diva wyświetliła mi się taka łapka jak po najechaniu na zwykłego linka?
pzdr biggrin.gif biggrin.gif

a i czy da to się zastosować do divów bo znalazłem js który umożliwia otwarcie w 1 divie a czy można w 2?
lord_t
1.09.2008, 13:26:14
Co do łapki to css: http://www.kurshtml...kursory.html

Czy co się da zastosować do divów:>? To co się tyczyło iframe'ów? Jeśli tak, to pokaż jak zmieniasz zawartosc tego diva:)
cedunio
1.09.2008, 13:37:25
Kod
<!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="en" lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AXAH (Asynchronous XHTML and HTTP) - Crawl before you AJAX</title>

<script language="JavaScript" type="text/JavaScript">

//object detection to return the correct object depending upon broswer type. Used by the getAXHA(); function.
function getNewHttpObject() {
     var objType = false;
     try {
         objType = new ActiveXObject('Msxml2.XMLHTTP');
     } catch(e) {
         try {
             objType = new ActiveXObject('Microsoft.XMLHTTP');
         } catch(e) {
             objType = new XMLHttpRequest();
         }
     }
     return objType;
}

//Function used to update page content with new xhtml fragments by using a javascript object, the dom, and http.
function getAXAH(url,elementContainer){
     document.getElementById(elementContainer).innerHTML = '<blink class="redtxt">Loading...<\/blink>';
     var theHttpRequest = getNewHttpObject();
     theHttpRequest.onreadystatechange = function() {processAXAH(elementContainer);};
     theHttpRequest.open("GET", url);
     theHttpRequest.send(false);

         function processAXAH(elementContainer){
            if (theHttpRequest.readyState == 4) {
                if (theHttpRequest.status == 200) {
                    document.getElementById(elementContainer).innerHTML = theHttpRequest.responseText;
                } else {
                    document.getElementById(elementContainer).innerHTML="<p><span class='redtxt'>Error!<\/span> HTTP request return the following status message:&nbsp;" + theHttpRequest.statusText +"<\/p>";
                }
            }
         }

}

</script>


<style type="text/css">
<!--
/* ----- Uncomment the global selector below to over-ride the default margin and padding added to all tags  ----- */

*{padding: 0; margin: 0;}

/* ----- global default/initial styles ----- */
body {background-color:#fff; margin: 10px; padding: 0;}

/* ----- base default font size, type, and line height ----- */
html body{font: 62.5%/1.4em Arial, Helvetica, sans-serif;color:#333333}
html>body{font: 62.5%/1.4em Arial, Helvetica, sans-serif;color:#333333}

/* ----- add selectors here for font sizing ----- */
p, table, ul, dl {font-size: 1.2em}
caption {font-size: 1.4em}
h2 {font-size: 1.6em}

/* ----- base links ----- */
a:link {color: #CC6633;}
a:visited {color: #CC6633;}
a:hover {color: #999966;}
a:active {color: #CC6633;}
a:focus{color: #CC6633;}

p {line-height:1.4em;margin:10px 0;}
ul li {display:inline}
hr{margin:10px 0;color:#999999;}

.bluetxt{color:#0000FF}
.redtxt{color:#FF0000}
.greentxt{color:#006600}

-->
</style>
</head>
<body>

<p><a href="http://codylindley.com/Javascript/237/axah-asynchronous-xhtml-and-http-crawl-before-you-ajax">What is this?</a></p>

<ul>
   <li><a href="1.html" onclick="getAXAH('1.html','content');return false;">Load blue Lorem Ipsum <strong>bold</strong> text</a>&nbsp;&nbsp;&zwnj;&nbsp;&nbsp;</li>
     <li><a href="2.html" onclick="getAXAH('2.html','content');return false;">Load green Lorem Ipsum <em>italic</em> text </a>&nbsp;&nbsp;&zwnj;&nbsp;&nbsp;</li>
     <li><a href="3.html" onclick="getAXAH('3.html','content');return false;">Load red Lorem Ipsum regular text </a></li>  &nbsp;&nbsp;&zwnj;&nbsp;&nbsp;
     <li><a href="Lorem-ipsum-nothing.htm" onclick="getAXAH('Lorem-ipsum-nothing.htm','content');return false;">Show example of Error</a></li>

</ul>

<hr size="1px" />

<div id="content">
     <p>Select Lorem Ipsum color and font type above to be displayed here.</p>
</div>
</body>
</html>



korzystam z czegoś takiego wtedy gdy kliknę w którykolwiek z linków to mi w tym divie odpala stronkę. dało by się to zmodyfikować jak dla iframow?
lord_t
1.09.2008, 20:58:10
Przykładowo można zrobić tak:

Zamiast linku:
[HTML] pobierz, plaintext 
  1. <a href="1.html" onclick="getAXAH('1.html','content');return false;">Load blue Lorem Ipsum <strong>bold</strong> text</a>
[HTML] pobierz, plaintext


zrobić taki:
[HTML] pobierz, plaintext 
  1. <a href="1.html" onclick="getAXAH('1.html','content');getAXAH('2.html','contentinny');return false;">Load blue Lorem Ipsum <strong>bold</strong> text</a>
[HTML] pobierz, plaintext


Tylko musisz sobie zrobić drugiego diva o id contentinny
cedunio
3.09.2008, 08:19:39
wielkie dzięki hula jak należy snitch.gif snitch.gif
awos
2.11.2012, 18:28:46
Witam, mam podobny ale trochę inny problem,
dlatego nie piszę nowego postu tylko dopisuję się do powyższego.
Mam stronę opartą na ramkach, lewa to "menu", prawa "tresc".
Chciałbym uzyskać efekt że obrazek stanowiący odsyłacz w ramce "menu", po kliknięciu wymieniał równocześnie dokumenty w ramkach "menu" i "tresc".
Testowałem ww opisane rozwiązania ale nie zadziałały w ramkach [niepływających smile.gif]

Witam, problem już rozwiązany. Odsyłacz do układu ramek z podmienionymi dokumentami.
Pozdrawiam

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.