Multidesk.be » Forums » Webdesign & graphics » Effect werkt niet in Firefox

  • Pagina
  • 1 van 1
0 gasten lezen dit onderwerp.
^ Onderwerp geschreven door Pascal op woensdag 18 april 2012 om 22:19:50.
Pascal's avatar
Multiviteit: 214
Ik heb een niftig nieuw (webkit) effectje op mijn website staan. Spijtige is dat het enkel werkt met Chrome en Safari, niet met Firefox. Met IE kan ik hier momenteel niet testen.

Weet iemand hoe dit komt? En is het te fixen dat het in Firefox wel werkt?

zie HIER (hover over plaatjes).
Normaal faden ze in en uit. Bij Firefox knallen ze gewoon aan en uit...

ALvast bedankt voor de hulp!
^ Reactie #1 geschreven door Wheeldigger op woensdag 18 april 2012 om 23:46:15.
Wheeldigger's avatar
Multiviteit: 10173
Moderator
Google Chrome - hoover werkt.
IE8 - zwart scherm.
FF (laatste update) - knalt aan/uit.
Opera (laatste update) - knalt aan/uit.
Safari - wit scherm (heb nog een oude zonder updates, zie ook niet hoe updates te doen).
Netscape Navigator 9 - knalt aan/uit.

Dit alles op XP prof SP3.



^ Reactie #2 geschreven door Fred31 op donderdag 19 april 2012 om 02:54:24.
Fred31's avatar
Multiviteit: 2519
ik heb win 7 Ultimate 64bit
in chrome fade het in en uit.
in IE8-zwart scherm
in opera- knalt aan en uit.

misschien een missende plugin ofzo?
Deze tekst werd het laatst bewerkt voor 15.29 % door Fred31 op donderdag 19 april 2012 om 02:56:09.
Thermaltake Armor Silver(Big Tower), Power Supply-Antec Earthwatts 650 W, Mobo ASUSMaximus HERO VII 16GB DDR3 ram, Intel i7 QUAD-CPU 4,6GHz overcl , Gigabyte HD6950-2GB GDDR5,Watercooling RESERATOR 1,
Win10 64bit pro. Laptop TOSHIBA Satellite L775-1
^ Reactie #3 geschreven door Pascal op donderdag 19 april 2012 om 08:30:29.
Pascal's avatar
Multiviteit: 214
Hm, ik zie op het werk nu indd dat IE een zwart scherm geeft.
Safari werkt op m'n Imac wel gewoon normaal.

Dat het effect niet ondersteund wordt door een browser, daar kan ik inkomen, maar dat er zwarte en witte schermen getoond worden is wat vreemd.

Is er iemand die hier een handje kan helpen? Als ik stukken code of css moet posten, laat het gerust weten.
^ Reactie #4 geschreven door thekid op donderdag 19 april 2012 om 08:53:24.
thekid's avatar
Multiviteit: 5273
Moderator
hey Pascal

al gedacht om gewoon jquery te gebruiken? Het is een standaard effect in hun library en zou toch vrij standaard moeten zijn :)

http://api.jquery.com/fadeOut/
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #5 geschreven door Pascal op donderdag 19 april 2012 om 21:17:56.
Pascal's avatar
Multiviteit: 214

Dixit

Dixit thekid op 19/04/2012 08:53:24:

hey Pascal

al gedacht om gewoon jquery te gebruiken? Het is een standaard effect in hun library en zou toch vrij standaard moeten zijn :)

http://api.jquery.com/fadeOut/


Doeme! Ik heb er nu al zowat een eeuw over gedaan om dit effect min of meer in orde te krijgen. (blush)
Ik denk dat het zelfs sneller zal gaan om FF een mail te sturen met de vraag om hun browser aan te passen naar mijn effectje!

De jscript, doet die ook fade-out want ik zie op die website alleen dingen die gewoon verdwijnen.

ps: misschien valt het niet op, maar ik ben leek :P
Deze tekst werd het laatst bewerkt voor 37.94 % door Pascal op donderdag 19 april 2012 om 21:19:20.
^ Reactie #6 geschreven door Pascal op donderdag 19 april 2012 om 22:03:02.
Pascal's avatar
Multiviteit: 214
Ik heb al gevonden hoe het werkt in firefox. normaal moet het nu ook zachtjes in en uit faden. Opera blijft een wit scherm tonen. IE kan ik nu alweer niet testen.
^ Reactie #7 geschreven door Wheeldigger op donderdag 19 april 2012 om 23:13:05.
Wheeldigger's avatar
Multiviteit: 10173
Moderator
Opera knalt aan en uit, FF gaat goed nu hier.
^ Reactie #8 geschreven door thekid op vrijdag 20 april 2012 om 19:29:20.
thekid's avatar
Multiviteit: 5273
Moderator
helpt dit je wat vooruit?

heb rap eens getest met firefox, chrome & rekonq :)

vragen staat vrij, en ja, 'k weet het mijn css is a mess :D

ziet er dan zo ongeveer uit :) (was er wat aan het over vliegen tot de screenshot werd genomen :D)

http://www.multidesk.be/bijlage/7fa9e74920d14e8ad51f01b982786922.png

CODE
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.   <style>
  6.   .floater
  7.   {
  8.     background-color: #000000;
  9.     color: #ffffff;
  10.     float: left;
  11.     width: 128px;
  12.     height: 128px;
  13.     margin-top: -128px;
  14.     vertical-align: middle;
  15.     text-align: center;
  16.     padding-top: 50px; font-weight: 800; color: #ffffff; font-variant: small-caps;
  17.   }
  18.   .imgfloater
  19.   {
  20.     float: left;
  21.     width: 128px;
  22.     height: 128px;
  23.   }
  24.   a.myfloater
  25.   {
  26.     float: left;
  27.     display: inline-block;
  28.     margin: 5px;
  29.     padding: 0;
  30.     width: 128px;
  31.     height: 128px;
  32.     text-decoration: none;
  33.     overflow: hidden;
  34.   }
  35.   a img { border: 0; }
  36.   </style>
  37.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  38.   <script type="text/javascript">
  39.   var imgBrowser = (function(){
  40.     var imgBrowser;
  41.     window.imgBrowser = imgBrowser;
  42.     imgBrowser = {
  43.       Images: [], TimeOut: 200,
  44.       addCatalog: function(strImage, strTitle, strUrl) {
  45.         var i = imgBrowser.Images.length;
  46.         imgBrowser.Images[i] = [i+1, strImage, strTitle, strUrl, false];
  47.       },
  48.       display: function(target) {
  49.         var msg = '<center><table><tr><td>';
  50.         for (var x = 0; x < imgBrowser.Images.length; x++) {
  51.            msg += '<a href="' + imgBrowser.Images[x][3] + '" class="myfloater" onmouseover="imgBrowser.hover(' + x + ');">' +
  52.                   '<img src="' + imgBrowser.Images[x][1] + '" class="imgfloater" />' +
  53.                   '<div id="floater' + x +'" class="floater" onmouseout="imgBrowser.unhover(' + x + ');">' + imgBrowser.Images[x][2] + '</div>' +
  54.                   '&nbsp;</a>';
  55.         }
  56.         msg += '</td></tr></table></center>';
  57.         $("#" + target).html(msg);
  58.         for (var x = 0; x < imgBrowser.Images.length; x++) {
  59.           $("#floater" + x).hide();
  60.         }
  61.       },
  62.       hover: function(x) {
  63.         if (!imgBrowser.Images[x][4]) {
  64.           imgBrowser.Images[x][4] = true;
  65.           $("#floater" + x).fadeIn(imgBrowser.TimeOut);
  66.         }
  67.       },
  68.       unhover: function(x) {
  69.         if (imgBrowser.Images[x][4])
  70.           imgBrowser.Images[x][4] = false;
  71.           $("#floater" + x).fadeOut(imgBrowser.TimeOut);
  72.       }
  73.     };
  74.     return imgBrowser;
  75.   })();
  76.  
  77.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/album%20leviathan.jpg', 'Lifesblood', 'http://www.mastocave.com/Lifesblood.html');
  78.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Album%20Remission_300x300.gif', 'Remision', 'http://www.mastocave.com/Remission.html');
  79.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Album%20Leviathan_300x300.jpg', 'Leviathan', 'http://www.mastocave.com/Leviathan.html');
  80.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Album%20Call%20of%20the%20mastodon_300x300.jpg', 'Call of the Mastodon', 'http://www.mastocave.com/CallMastodon.html');
  81.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Album%20Blood%20Mountain_300x300.jpg', 'Blood Mountain', 'http://www.mastocave.com/BloodMountain.html');
  82.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Album%20Crack%20the%20Skye_300x300.jpg', 'Crack the Skye', 'http://www.mastocave.com/CracktheSkye.html');
  83.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Album-The-Hunter-300x300.jpg', 'The Hunter', 'http://www.mastocave.com/TheHunter.html');
  84.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Albums-Misc_300x300.jpg', 'Misc Releases, Singles, Boots...', 'http://www.mastocave.com/MiscReleases.html');
  85.  
  86.   $().ready(function() {
  87.     imgBrowser.display('album');
  88.   });
  89.   </script>
  90. </head>
  91. <body>
  92.  
  93. <div id="album">
  94. </div>
  95.  
  96. </body>
  97. </html>
Deze tekst werd het laatst bewerkt voor 0.87 % door thekid op vrijdag 20 april 2012 om 19:36:24.
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
^ Reactie #9 geschreven door Pascal op dinsdag 24 april 2012 om 18:26:06.
Pascal's avatar
Multiviteit: 214
Alvast bedankt voor de hulp, ik ga het zeker proberen! Hou je op de hoogte!

merci!
^ Reactie #10 geschreven door Pascal op dinsdag 24 april 2012 om 22:21:43.
Pascal's avatar
Multiviteit: 214
Euhm, toch enige bijstand gevraagd..(blush)
De css toevoegen lukt nog net, maar als ik jouw script toevoeg en ik haal mijn eerdere afbeeldingen weg, dan zie ik niets meer...

Zo ziet het er nu uit:

CODE
  1.  
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  4.  
  5. <head>
  6.                
  7. <script type="text/javascript" src="/lib/reflection/reflection.js"></script>
  8.     <style type="text/css">
  9. <!--
  10. @import url("album detail/the sword page.css");
  11. .style4 {font-size: large}
  12. .style6 {font-size: medium}
  13. body,td,th {
  14.         font-size: x-small;
  15. }
  16. h2 {
  17.         font-size: x-large;
  18. }
  19. .demobox {
  20.         float:left;
  21.         margin:20px;
  22.         width:150px;
  23.         height:150px;
  24.         border:2px solid #555;
  25.         overflow:hidden;
  26.         }
  27. .details {
  28.         width:152px;
  29.         height:152px;
  30.         background:#000;
  31.         color:#FFFFFF;
  32.         text-align: center;
  33. }
  34. #demo-3{position:relative;}
  35.  
  36. #demo-3 img{
  37.         opacity:1
  38.         -webkit-transition: opacity;
  39.         -webkit-transition-timing-function: ease-out;
  40.         -webkit-transition-duration: 700ms;
  41.         -moz-transition: 700ms;
  42.         -o-transition: 700ms;
  43.         }
  44.  
  45. #demo-3 .details{
  46.         position:absolute;
  47.         top:0;
  48.         left:0;
  49.         opacity: 0;
  50.         -webkit-transition: opacity;
  51.         -webkit-transition-timing-function: ease-out;
  52.         -webkit-transition-duration: 700ms;
  53.         -moz-transition: 700ms;
  54.         -o-transition: 700ms;
  55.         }
  56.  
  57. #demo-3 .details:hover{
  58.         opacity: .9;
  59.         filter: alpha(opacity=90); /* IE6+ */
  60.         filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90);
  61.         -webkit-transition: opacity;
  62.         -webkit-transition-timing-function: ease-out;
  63.         -webkit-transition-duration: 250ms;
  64.         -moz-transition: 250ms;
  65.         -o-transition: 250ms;
  66.         }
  67.         </style>
  68.  </head>
  69.  
  70. <body>
  71.         <img class=center src="afbeeldingen/header logo.jpg" width="800" height="193"/>
  72.  
  73. <div class="main">
  74.  
  75.   <div class="menu">
  76.                 <a href="index.html"><span>Home</span></a>
  77.                 <a href="Collection.html?page=myth"><span>Collection</span></a>
  78.                 <a href="http://mastocave.forumer.com" target="_blank"><span>Forum</span></a>
  79.                 <a href="Collectors.html"><span>Collectors</span></a>
  80.                 <a href="Links.html"><span>Link</span>s</a>
  81.                 <a href="Contact.html"><span>Contact</span></a></div>
  82.        
  83.   <div class="content">
  84.                 <div class="post">
  85.                   <h1 class="cap style4">The Collection</h1>
  86.                   
  87.             <div class="entry">
  88.                
  89.                 <div class="post">
  90.                  
  91.                   <div align="center">
  92.                     <table width="500" height="694" border="0" cellpadding="0" cellspacing="0">
  93.                          <tr>
  94.                          
  95.                          <td width="230">
  96.                            <div id="demo-3" class="demobox">
  97.                              <a href="Lifesblood.html"><img src="afbeeldingen/Records/Album Lifesblood.jpg"/></a>
  98.                              <a href="Lifesblood.html"><div class="details">
  99.                              <h3>Lifesblood</h3>
  100.                              </div></a>
  101.                                        </div></td>
  102.                         <td width="230">       
  103.                             <div id="demo-3" class="demobox">
  104.                                 <a href="Remission.html"><img src="afbeeldingen/Records/Album Remission.jpg"/></a>
  105.                                 <a href="Remission.html"><div class="details">
  106.                                 <h3>Remission</h3>
  107.                                 </div></a>
  108.                                   </div></td>
  109.                         <td width="230"><div id="demo-3" class="demobox">
  110.                                 <a href="Leviathan.html"><img src="afbeeldingen/Records/album leviathan.jpg"/></a>
  111.                             <a href="Leviathan.html"><div class="details">
  112.                                 <h3>Leviathan</h3>
  113.                                 </div></a>
  114.                                 </div></td>
  115.                         </tr>
  116.                      
  117.                         <tr>                   
  118.                         <td>
  119.                             <div id="demo-3" class="demobox">
  120.                                 <a href="CallMastodon.html"><img src="afbeeldingen/Records/Album call of the mastodon.jpg"/></a>
  121.                                 <a href="CallMastodon.html"><div class="details">
  122.                                 <h3>Call of the Mastodon</h3>
  123.                                 </div></a>
  124.                                 </div></td>
  125.                             <td>
  126.                           <div id="demo-3" class="demobox">
  127.                                 <a href="BloodMountain.html"><img src="afbeeldingen/Records/Album Blood Mountain.jpg"/></a>
  128.                                 <a href="BloodMountain.html"><div class="details">
  129.                                 <h3>Blood Mountain</h3>
  130.                                 </div></a>
  131.                           </div></td>
  132.                           <td>
  133.                             <div id="demo-3" class="demobox">
  134.                                 <a href="CracktheSkye.html"><img src="afbeeldingen/Records/Album crack the skye.jpg"/></a>
  135.                                 <a href="CracktheSkye.html"><div class="details">
  136.                                 <h3>Crack the Skye</h3>
  137.                                 </div></a>
  138.                                 </div></td>
  139.                         </tr>
  140.                      
  141.                         <tr>                   
  142.                             <td>
  143.                             <div id="demo-3" class="demobox">
  144.                                 <a href="TheHunter.html"><img src="afbeeldingen/Records/Album The Hunter 150x150.jpg"/></a>
  145.                                      <a href="TheHunter.html"><div class="details">
  146.                                 <h3>The Hunter</h3>
  147.                                 </div></a>
  148.                           </div></td>
  149.                        
  150.                         <td><div id="demo-3" class="demobox">
  151.                                 <a href="MiscReleases.html"><img src="afbeeldingen/Records/Albums-Misc_150x150.jpg"/></a>
  152.                                 <a href="MiscReleases.html"><div class="details">
  153.                                 <h3>Singles and misc. albums</h3>
  154.                                 </div></a>
  155.                           </div></td>
  156.                         </tr>
  157.                         <tr>
  158.                        
  159.                         </tr>
  160.                     </table>
  161.                   </div>
  162.                 </div>
  163.                 <p><span class="navigation">Click <a href="Timeline.html">here</a> to see all releases, ordered by releasedate</span></p>
  164.                             
  165.                           </div>
  166.                   
  167.                         <h1>&nbsp;</h1>
  168.  
  169.         </div>
  170.   </div>
  171.  
  172.         <div class="footer">&copy;2010 All Rights Reserved. Copyrights are retained by their owners</div>
  173.  
  174. </div>
  175.  
  176.         <img class=center src="afbeeldingen/BannerBelow3.gif" width="706" height="50" usemap="#log"/>
  177.  
  178. </body>
  179.  
  180. </html>
  181.  
Deze tekst werd het laatst bewerkt voor 5.07 % door Pascal op dinsdag 24 april 2012 om 22:23:01.
^ Reactie #11 geschreven door thekid op woensdag 25 april 2012 om 11:00:05.
thekid's avatar
Multiviteit: 5273
Moderator
dus, deze gaan in je style sheet (of in de html in de head tag)
CODE
  1.  
  2.   .floater
  3.   {
  4.     background-color: #000000;
  5.     color: #ffffff;
  6.     float: left;
  7.     width: 128px;
  8.     height: 128px;
  9.     margin-top: -128px;
  10.     vertical-align: middle;
  11.     text-align: center;
  12.     padding-top: 50px; font-weight: 800; color: #ffffff; font-variant: small-caps;
  13.   }
  14.   .imgfloater
  15.   {
  16.     float: left;
  17.     width: 128px;
  18.     height: 128px;
  19.   }
  20.   a.myfloater
  21.   {
  22.     float: left;
  23.     display: inline-block;
  24.     margin: 5px;
  25.     padding: 0;
  26.     width: 128px;
  27.     height: 128px;
  28.     text-decoration: none;
  29.     overflow: hidden;
  30.   }
  31.   a img { border: 0; }
  32.  


deze gaat in je head tag en zorgt ervoor dat jquery meegeladen wordt
CODE
  1.  
  2.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  3.  


dit is ook voor in de head tag, en is een aparte klasse voor in je javascript
CODE
  1.  
  2.   <script type="text/javascript">
  3.   var imgBrowser = (function(){
  4.     var imgBrowser;
  5.     window.imgBrowser = imgBrowser;
  6.     imgBrowser = {
  7.       Images: [], TimeOut: 200,
  8.       addCatalog: function(strImage, strTitle, strUrl) {
  9.         var i = imgBrowser.Images.length;
  10.         imgBrowser.Images[i] = [i+1, strImage, strTitle, strUrl, false];
  11.       },
  12.       display: function(target) {
  13.         var msg = '<center><table><tr><td>';
  14.         for (var x = 0; x < imgBrowser.Images.length; x++) {
  15.            msg += '<a href="' + imgBrowser.Images[x][3] + '" class="myfloater" onmouseover="imgBrowser.hover(' + x + ');">' +
  16.                   '<img src="' + imgBrowser.Images[x][1] + '" class="imgfloater" />' +
  17.                   '<div id="floater' + x +'" class="floater" onmouseout="imgBrowser.unhover(' + x + ');">' + imgBrowser.Images[x][2] + '</div>' +
  18.                   '&nbsp;</a>';
  19.         }
  20.         msg += '</td></tr></table></center>';
  21.         $("#" + target).html(msg);
  22.         for (var x = 0; x < imgBrowser.Images.length; x++) {
  23.           $("#floater" + x).hide();
  24.         }
  25.       },
  26.       hover: function(x) {
  27.         if (!imgBrowser.Images[x][4]) {
  28.           imgBrowser.Images[x][4] = true;
  29.           $("#floater" + x).fadeIn(imgBrowser.TimeOut);
  30.         }
  31.       },
  32.       unhover: function(x) {
  33.         if (imgBrowser.Images[x][4])
  34.           imgBrowser.Images[x][4] = false;
  35.           $("#floater" + x).fadeOut(imgBrowser.TimeOut);
  36.       }
  37.     };
  38.     return imgBrowser;
  39.   })();
  40. </script>
  41.  



deze gaat ook ergens in een script tag (dus tussen <script></script> tags) (waar je wilt, hier voeg je de afbeelding toe, de titel en de link naar de pagina
(dus via imgBrowser.addCatalog(UrlToImage,Title,TargetUrl);)
CODE
  1.  
  2.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/album%20leviathan.jpg', 'Lifesblood', 'http://www.mastocave.com/Lifesblood.html');
  3.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Album%20Remission_300x300.gif', 'Remision', 'http://www.mastocave.com/Remission.html');
  4.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Album%20Leviathan_300x300.jpg', 'Leviathan', 'http://www.mastocave.com/Leviathan.html');
  5.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Album%20Call%20of%20the%20mastodon_300x300.jpg', 'Call of the Mastodon', 'http://www.mastocave.com/CallMastodon.html');
  6.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Album%20Blood%20Mountain_300x300.jpg', 'Blood Mountain', 'http://www.mastocave.com/BloodMountain.html');
  7.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Album%20Crack%20the%20Skye_300x300.jpg', 'Crack the Skye', 'http://www.mastocave.com/CracktheSkye.html');
  8.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Album-The-Hunter-300x300.jpg', 'The Hunter', 'http://www.mastocave.com/TheHunter.html');
  9.   imgBrowser.addCatalog('http://www.mastocave.com/afbeeldingen/Records/Albums-Misc_300x300.jpg', 'Misc Releases, Singles, Boots...', 'http://www.mastocave.com/MiscReleases.html');
  10.  


Deze code begint wanneer je pagina geladen is en deze zorgt dus dat de afbeeldingen in je html pagina worden weergegeven. Hier is album de ID van de div waarin ze moeten komen. Dit komt ook in een script block
CODE
  1.  
  2.   $().ready(function() {
  3.     imgBrowser.display('album');
  4.   });
  5.  


Deze code gaat op je html pagina, het belangrijkste hier is de id="album" die waar album overeenkomt met de vorige imgBrowser.display('album') tag.
CODE
  1.  
  2. <div id="album">
  3. </div>
  4.  


Dat zou normaal alles zijn. Wil jij dan afbeeldingen toevoegen, dan voeg je een nieuwe toe via imgBrowser.addCatalog en deze komt er automatisch bij
"Human beings make life so interesting. Do you know, that in a universe so full of wonders, they have managed to invent boredom." - Death in Hogfather
  • Pagina
  • 1 van 1

Snel-antwoordformulier
Toon uitgebreid antwoordformulier Bericht nalezen Bericht plaatsen