Suche Javascript

Das Forum fĂĽr Programmierer und Systemadmins. Von Shell-, Perl- und PHP-Scripts bis zur objektorientierten Programmierung mit C++.

Suche Javascript

Beitragvon wavenetuser » Do 16 Nov, 2006 14:03

Hi ihr

Ich suche folgendes (vielleicht bereits fertiges) JS:
Af der Seite von http://www.amazon.com/ sieht man oben 3 Menüpunkte. Wenn man mit der Maus über "See all 35 Product Categories" fährt, öffnet sich ein popover mit einem Text darin.

Der Text wird wohl ein verstecktes DIV sein.
Vielleicht kennt jemand ein Multibrowser-kompatibles JS dafĂĽr bevor ich es selbst schreiben muss .
Bild
wavenetuser
Board-User Level 3
Board-User Level 3
 
Beiträge: 1266
Registriert: Do 09 Feb, 2006 02:35

Beitragvon Tom-Wien » Do 16 Nov, 2006 14:18

Code: Alles auswählen
</script>
<style>
.gc-popover-tiny { font-size: 10px; font-family: verdana,arial,helvetica,sans-serif; }
.gc-popover-tiny a, .gc-popover-tiny a:visited { text-decoration: none; color: #003399; }
.gc-popover-tiny a:hover { text-decoration: underline; color: #CC6600; }
.gc-tiny { font-family: verdana,arial,helvetica,sans-serif; font-size: 1em; }
.gc-title { font-family: tahoma, sans-serif; margin-top: 10px;
margin-bottom: 6px; color: #c60; font-weight: bold; line-height: 1em;
}
</style>
<div id="findGifts" style="display:none">
<table width=500px cellpadding="0" cellspacing="0" border="0" style="border:2px solid #A5C6DE;">
<tr>
<td>
<table width=100% style="border-bottom:1px dotted #999999;"><tr><td width="33%"><a href="/gp/gift-central/ref=cm_gift_topnav_gclogo/104-6790324-3343113"><img src="http://ec1.images-amazon.com/images/G/01/gifts/giftcentral/06/logos/gc-logo-popover-a._V39690492_.gif" width="116" alt="Gift Central" height="30" border="0" /></a></td>
<td width=66%><img src="http://ec1.images-amazon.com/images/G/01/gifts/giftcentral/06/popover-blurb._V37077551_.gif" width="318" alt="Gift Central" height="28" border="0" />
</td></tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<table width=100% cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td style="padding-left:6px;"><div class="gc-title">Gift Guides</div></td>
<td style="padding-left:6px;"><div class="gc-title">Lists &amp; Registries</div></td>
<td style="padding-left:6px;"><div class="gc-title">More to Explore</div></td>
</tr>
<tr>
<td valign="top" class="gc-popover-tiny" style="line-height:2em;padding-right:6px;padding-top:3px;padding-left:6px;">
<strong><font color="#cc6600">›</font></strong>&nbsp;<a href="/gp/gift-central/gift-guides/am/holiday-guides/ref=cm_gift_topnav_gg_hol06_lp/104-6790324-3343113">Gifts for the Holidays</a><br />
<strong><font color="#cc6600">›</font></strong>&nbsp;<a href="/gp/gift-central/gift-guides/am/price-guides/ref=cm_gift_topnav_gg_price_lp/104-6790324-3343113">Gifts by Price</a><br />
<strong><font color="#cc6600">›</font></strong>&nbsp;<a href="/gp/gift-central/gift-guides/am/relationship-guides/ref=cm_gift_topnav_gg_rel_lp/104-6790324-3343113">Gifts by Relationship</a><br />
<strong><font color="#cc6600">›</font></strong>&nbsp;<a href="/gp/gift-central/gift-guides/am/kids-guides/ref=cm_gift_topnav_gg_kids_lp/104-6790324-3343113">Gifts for Kids and Teens</a><br />
<strong><font color="#cc6600">›</font></strong>&nbsp;<a href="/gp/gift-central/gift-guides/am/recipient-guides/ref=cm_gift_topnav_gg_recip_lp/104-6790324-3343113">Gifts by Personality</a><br />
<strong><font color="#cc6600">›</font></strong>&nbsp;<a href="/gp/gift-central/gift-guides/am/occasion-guides/ref=cm_gift_topnav_gg_occ_lp/104-6790324-3343113">Gifts by Occasion</a><br />
<strong><font color="#cc6600">›</font></strong>&nbsp;<nobr><a href="/gp/gift-central/gift-guides/ref=cm_gift_topnav_gg_lp/104-6790324-3343113" style="font-weight:bold;">See all Gift Guides</a></nobr><br />
</td>
<td valign="top" class="gc-popover-tiny" style="line-height:1.7em;padding-right:none;padding-top:3px;padding-left:6px;">
<strong><font color="#cc6600">›</font></strong>&nbsp;<a href="/gp/registry/wishlist/ref=cm_gift_topnav_wl_hp/104-6790324-3343113">Wish Lists</a><br />
<strong><font color="#cc6600">›</font></strong>&nbsp;<a href="/gp/registry/babyreg/ref=cm_gift_topnav_babyreg/104-6790324-3343113">Baby Registry</a><br />
<strong><font color="#cc6600">›</font></strong>&nbsp;<a href="/gp/wedding/homepage/ref=cm_gift_topnav_wedreg/104-6790324-3343113">Wedding Registry</a><br /><br />
<span class="gc-tiny" style="font-weight:bold;color:#cc6600;"><nobr>Find someone's Wish List:</nobr></span><br />
<form style="margin:0px;" method="get" name="wishlist-search" action="/gp/registry/search.html/ref=cm_gift_topnav_wlsearch/104-6790324-3343113">
<input type="hidden" name="type" value="wishlist">
<nobr><input type="text" style="border:1px solid #999999;height:16px;width:130px;font-family:verdana,arial,sans-serif;font-size:9px;color:#666666;" value="name or e-mail" name="field-name" onclick="this.value='';" />&nbsp;
<input type="image" src="http://ec1.images-amazon.com/images/G/01/gifts/registries/wishlist/v2/go-button.gif" style="vertical-align:middle" value="Go" alt="Go"  onClick="parseName();" /></nobr>
</form>
</nobr><br />
</td>
<td valign="top" class="gc-popover-tiny" style="line-height:1.7em;padding-right:none;padding-top:3px;padding-left:6px;">
<strong><font color="#cc6600">›</font></strong>&nbsp;<a href="/gp/gift-central/organizer/ref=cm_gift_topnav_organizer/104-6790324-3343113">Gift Organizer</a><br />
<strong><font color="#cc6600">›</font></strong>&nbsp;<a href="/gp/ecards/homepage/ref=cm_gift_topnav_ecards/104-6790324-3343113">E Cards</a><br />
<strong><font color="#cc6600">›</font></strong>&nbsp;<a href="/Fresh-Flowers-Indoor-Plants/b/ref=cm_gift_topnav_flo/104-6790324-3343113?ie=UTF8&node=3745171">Fresh Flowers</a><br /><br />
<a href="/gp/product/B00067L6TQ/ref=cm_gift_topnav_gcert/104-6790324-3343113"><img src="http://ec1.images-amazon.com/images/G/01/gifts/giftcentral/06/giftcert/gift-cert-roto-pop-a._V39691089_.gif" width="157" alt="Gift Certificates" height="58" border="0" /></a><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
                </td>
                <td valign="bottom" align="right">
                 
<script language="javascript" type="text/javascript">
  <!--
  function submitSearch(form) {
    var value = form.q.value;
    if (value) {
      if (value == "robots.txt" || value == "favicon.ico") {
        value = '"' + value + '"';
      }
      if (typeof(encodeURIComponent) != "undefined") {
        value = encodeURIComponent(value);
      } else {
        value = escape(value);
      }
      location.href = "http://a9.amazon.com/?dns=www&src=amz&qs=" + value;
    }
    return false;
  }
LG

Tom
TA KOMBI
Tom-Wien
Advanced Power-User
Advanced Power-User
 
Beiträge: 3559
Registriert: So 07 Mär, 2004 11:02
Wohnort: Wien / LA

Beitragvon wavenetuser » Do 16 Nov, 2006 14:20

:clap: :rotfl:
Das ist aber leider nicht alles ;)
Rauskopieren wäre auch für mich kein Problem :)
Aber das soll nicht Sinn der Ăśbung sein ;)

PS: Es ist natürlich kein Problem, ein JS zu schreiben und die Höhe/Breite der DIV nach und nach zu beeinflussen. Jedoch soll es natürlich crossbrowserfähig sein - und eben da dachte ich, gibts viell. schon was fertiges.

Edit: Ich hab kurz getestet - mĂĽsste in etwa so ausschauen:
Code: Alles auswählen
<script type="text/javascript">
<!--
function gross(){
  document.getElementById('ausein').style.borderLeft = "2px solid #f4f4f4";
  document.getElementById('ausein').style.borderTop = "2px solid #f4f4f4";
  document.getElementById('ausein').style.borderRight = "2px solid #f4f4f4";
  document.getElementById('ausein').style.borderBottom = "2px solid #f4f4f4";
//alert(document.getElementById('ausein').style.width);
   var vorher_hoehe = document.getElementById('ausein').style.height;
   var result = parseFloat(vorher_hoehe);
   document.getElementById('ausein').style.height = (15+result);
   document.getElementById('ausein').style.width = (25+result);


   var nachher_hoehe = document.getElementById('ausein').style.height;
   var result1 = parseFloat(nachher_hoehe);


//alert("RESULT: "+result);
//alert(document.getElementById('ausein').style.width);
   if (result1 < 400){
//      alert(new_h);
      setTimeout("gross();", 10);
   } else {
//      alert(result);
      document.getElementById('auseint').style.visibility = "visible";
      return false;
   }
}

function klein(){

//alert(document.getElementById('ausein').style.width);
   var vorher_hoehe = document.getElementById('ausein').style.height;
   var result = parseFloat(vorher_hoehe);

   var vorher_breite = document.getElementById('ausein').style.width;
   var result_breite = parseFloat(vorher_breite);

   if (result > 15) document.getElementById('ausein').style.height = (result-15);
   if (result_breite > 25)  document.getElementById('ausein').style.width = (result-25);


   var nachher_hoehe = document.getElementById('ausein').style.height;
   var result1 = parseFloat(nachher_hoehe);


//alert("RESULT: "+result);
//alert(document.getElementById('ausein').style.width);
   if (result1 > 0){
      document.getElementById('auseint').style.visibility = "hidden";
//      alert(new_h);
      setTimeout("klein();", 10);
   } else {
//      alert(result);
  document.getElementById('ausein').style.borderLeft = "0px solid #f4f4f4";
  document.getElementById('ausein').style.borderTop = "0px solid #f4f4f4";
  document.getElementById('ausein').style.borderRight = "0px solid #f4f4f4";
  document.getElementById('ausein').style.borderBottom = "0px solid #f4f4f4";
      return false;
   }
if (result1 < 20){
  document.getElementById('ausein').style.borderLeft = "0px solid #f4f4f4";
  document.getElementById('ausein').style.borderTop = "0px solid #f4f4f4";
  document.getElementById('ausein').style.borderRight = "0px solid #f4f4f4";
  document.getElementById('ausein').style.borderBottom = "0px solid #f4f4f4";
      return false;

}
}
// -->
</script>
.......
<div id="ausein" style="width:0px; height:0px; float:left;">
          <div id="auseint" style="float:left; visibility:hidden ">Text...</div>
</div>
.......
<a href="#" onMouseOver="gross();"
            onMouseOut="klein();">bla bli blupp</a>

Aber das ist nur mit IE7 getestet und dann ist die Frage ob es auch wirklich funktioniert ... Und wie gesagt: Hab eigentlich keine Zeit fĂĽr :(
Bild
wavenetuser
Board-User Level 3
Board-User Level 3
 
Beiträge: 1266
Registriert: Do 09 Feb, 2006 02:35

Beitragvon Tom-Wien » Do 16 Nov, 2006 14:28

Und wie gesagt: Hab eigentlich keine Zeit fĂĽr

dann kanns ja auch wohl nciht so wichtig sein ...
btw: googeln soll da auch helfen nach java-scripts

auĂźerdem soltle mein paste von vorhin ja auhc nur als "grober anstoĂź" gedacht sein, wies funktioniert ..
LG

Tom
TA KOMBI
Tom-Wien
Advanced Power-User
Advanced Power-User
 
Beiträge: 3559
Registriert: So 07 Mär, 2004 11:02
Wohnort: Wien / LA

Beitragvon wavenetuser » Do 16 Nov, 2006 14:56

danke fĂĽr die tipps.
Vielleicht kennt trotzdem jemand was in die Richtung.
Bild
wavenetuser
Board-User Level 3
Board-User Level 3
 
Beiträge: 1266
Registriert: Do 09 Feb, 2006 02:35


ZurĂĽck zu PROGRAMMIER FORUM

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 5 Gäste