Category Archives: links

Ridimensionare immagini con jQuery

In questo semplice tutorial vi mostreremo come ridimensionare le immagini con jQuery.

  1.  
  2. $(window).bind("load", function() {
  3. // IMAGE RESIZE
  4. $('#product_cat_list img').each(function() {
  5. var maxWidth = 120;
  6. var maxHeight = 120;
  7. var ratio = 0;
  8. var width = $(this).width();
  9. var height = $(this).height();
  10.  
  11. if(width > maxWidth){
  12. ratio = maxWidth / width;
  13. $(this).css("width", maxWidth);
  14. $(this).css("height", height * ratio);
  15. height = height * ratio;
  16. }
  17. var width = $(this).width();
  18. var height = $(this).height();
  19. if(height > maxHeight){
  20. ratio = maxHeight / height;
  21. $(this).css("height", maxHeight);
  22. $(this).css("width", width * ratio);
  23. width = width * ratio;
  24. }
  25. });
  26. //$("#contentpage img").show();
  27. // IMAGE RESIZE
  28. });
  29.  

Calcolare la grandezza di un file in Javascript

Nel tutorial di oggi imparerete come creare una funzione che permette di calcolare la grandezza di un file in Javascript.

  1.  
  2. function validateFileSize(component,maxSize,msg){
  3. if(navigator.appName=="Microsoft Internet Explorer"){
  4. if(component.value){
  5. var myFSO = new ActiveXObject("Scripting.FileSystemObject");
  6. var filepath = component.value;
  7. var thefile = myFSO.getFile(filepath);
  8. var size = thefile.size;
  9. }
  10. } else {
  11. if(component.files[0]!=''){
  12. size = component.files[0].size;
  13. }
  14. }
  15. if(size!='' && size>maxSize){
  16. jAlert('Upload file size should be less than 25MB.','document.theform.uploadbroucher','uploadbroucher');
  17. document.getElementById('uploadbroucher').value="";
  18. return false;
  19. } else {
  20. return true;
  21. }
  22. }
  23.  
  24.  
  25. component - document.getElementById('filed')
  26.  

Creare un tooltip in puro CSS

In questo semplice tutorial vi mostreremo come creare un tooltip in puro CSS.

CODICE CSS:

  1.  
  2. /* base CSS element */
  3. .tip {
  4. background: #eee;
  5. border: 1px solid #ccc;
  6. padding: 10px;
  7. border-radius: 8px;
  8. box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  9. position: relative;
  10. width: 200px;
  11. }
  12.  
  13. /* arrows - :before and :after */
  14. .tip:before {
  15. position: absolute;
  16. display: inline-block;
  17. border-top: 7px solid transparent;
  18. border-right: 7px solid #eee;
  19. border-bottom: 7px solid transparent;
  20. border-right-color: rgba(0, 0, 0, 0.2);
  21. left: -14px;
  22. top: 20px;
  23. content: '';
  24. }
  25.  
  26. .tip:after {
  27. position: absolute;
  28. display: inline-block;
  29. border-top: 6px solid transparent;
  30. border-right: 6px solid #eee;
  31. border-bottom: 6px solid transparent;
  32. left: -12px;
  33. top: 21px;
  34. content: '';
  35. }
  36.  

CODICE HTML: