Notepad++ and Codecademy


#1


I'm making a website project for my class. I had the teacher download notepad++ and I plan to send her the my code. I tried to use this code (on notepad++) on my images in order to give it a nicer effect:


 <script>
        $(document).ready(function() {
    $("img").mouseenter(function() { 
        $("img").fadeTo("fast", 1);
    });
    
    $('img').mouseleave(function() { 
        $('img').fadeTo("fast",0)
    });
});
        
        </script>

The problem is that it doesn't work on any of my images. By the way they are in a

. When I used the same code on code academy though it worked on my images. Is there a difference between Notepad++ and Code academy? Also, is there a way to use this jQuery code only to affect one image at a time?

#2

@dragonflare,
Give us the FULL HTML-code you are using....


#3

here it is:

<html>


<head>
<link rel="stylesheet" type="text/css" href="CSS.css"/>
<style type="text/css">
body { 
     
    background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQtorTRr-jC3T666q_t3kShytmEs1YU0MlarWPjyGktkKtTACV2NA");

    background-image: height: 60px;
    }
a { text-decoration : none; 
}

 h1 { font-size : 5em;
     
  background-color: white; 
  
}

thead { font-size: 50px;
        }
    
`indent preformatted text by 4 spaces`
#th{ background-color: #ffe6ff;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
#bob { background-color:#e6f2ff;
border-top-left-radius: 30px;
border-top-right-radius: 30px;}



td img { height : 200px ; 
         width : 230px ; 
		 
		
   }
     
div  { width : 1000px;
 margin: auto;
}

p { background-color:white; 
    font-size: 23px
	}

#radius {border-radius: 10px;}


#right {float:right;
 border : 5px solid #ff99cc;
border-top-left-radius: 30px; 
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}


#left {float:left;
border : 5px solid #cce6ff;
border-top-left-radius: 30px; 
border-top-right-radius: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}

#hi {border-bottom-right-radius: 30px;}

#hello {border-bottom-left-radius: 30px;}


     
      
</style>

 
 
 
<title> First webpage</title>
</head>

<body>
<div> 

<h1 id= "radius"> Happy Birthday </h1>
</div>


<table id ="right">
<thead> 
<th colspan = "3" id ="th">Cute Kittens </th>

</thead>
<tr> 
<td> <img src = "data:image/jpeg;base64,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"/>
</td>
<td> <img src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcROxEbrqYlfhUT1qeeL_UX_28aI0gYu2D_Q8zaes_Zx8qXaA5H7"/> 
</td>
<td> <img src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRWQwHONGVgO7IT5Y06UeKCKPpGB2cy-_nIwAni33N3uu9Up6agEg"/>
</td>
</tr>
<tr>
<td> <img src = " https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTr6Ye9mR3XnCbtC-Eh5fTlKHrSBSJS6y4_rJnjuTTTw9N0exAD"/>
</td>
<td> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS7Mk3wA7pSODBX6pq18SVwsnN-i9Kyj7nKJ48sYIrswM7KrMjA"/>
</td>
<td> <img src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTBw04RoTIMEk55A7DyiwIioeaxZ0MkI2L5YkAtluU9bpgBVeHEbg"/>
</td>
</tr>
<tr>
<td> <img id="hello"  src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRkOPqMIpk0BqbT9p7_UrLc8iKG-S-bgEn2xEWB7J8cwQQGAY7j"/>
</td>
<td> <img src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTIKhJjEZfj077APkwkj5sSJu2NsUc-PnaDOa6JOzo2Uy8Yd3qKCw"/>
</td>
<td> <img id="hi" src= "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR2m9KcpnVEEKLs8DeXMpFz-sRBOOHKjLy3CSgu1J68qLTyxQHW"/>
</td>
</tr>

<table id ="left"> 
<thead>
<th colspan= "3" id ="bob"> Cute Puppies </th>
<tr>
<td> <img src = "https://sp.yimg.com/xj/th?id=OIP.M935222b312661fa59f950081517b86ccH0&pid=15.1&P=0&w=298&h=187"/>
</td> 
<td> <img src ="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTOYzA6kZ85TptquhHhOSf2TTRkFpeWYWDlkYeTOygX_S10dkVu0w"/>
</td>
<td> <img src ="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTXWlrfc7Lir68y08tvwZ_cyImKPlRsc-ImKbBoTr8zlMeV-fn9_Q"/>
</td>
</tr>

<tr>
<td> <img src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTMwKQSseHFK984R5Bscz08oEQw_UepGvrOg3atmq3HNFf7zFnb"/>
</td>
<td> <img src ="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQsqqyvszOejXFow9AYPBTFbzorm1O18tFMKZHQ-0w1X-PMl-sY"/>
</td>
<td> <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQLZU0pBm0wCaE4ckB4AByaRL12MXIBknnRlJ44G7FzBZTB9CywMA"/>
</td>
</tr>

<tr> 
<td> <img id="hello" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQE31pGCptX4fn6JWpL4DjGOw7X8NegBKkT0Cx4dZenLB_NMA3M"/>
</td>

<td> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCCTkTvY6ggrypl26r-j9js5cu7R5GWn2YPwRgBdWYx3ol5yi7Ig"/>
</td>
<td> <img id ="hi" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyu6-3ffpPQqA-M-nsF2Haqto1Ooh3DKtYjrkZIPk_GO-kgJ6Z"/>
</td>
</tr>
</table>
 



</body>

 

 


</html>

#4

First off you didn't close your head tag before adding inline styling, move that outside the head tags

secondly you're missing the jquery library. Add this to your <head> section </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!DOCTYPE html>
<html>
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<title> my site </title>
</head>
<style>
</style>
<body>
</body>
</html>

#5

it still didn't work :frowning:


#6

@dragonflare
Here a basic HTML-code
its your problem to shift around with the CSS definitions....

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="CSS.css"/>
  <style type="text/css">
    body {
      background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQtorTRr-jC3T666q_t3kShytmEs1YU0MlarWPjyGktkKtTACV2NA) no-repeat center center fixed; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
      background-size: cover;
    }
    a { text-decoration : none; 
    }
    h1 {
      font-size : 5em;
      background-color: white; 
    }
    thead { font-size: 50px;
    }
    #th{ 
      background-color: #ffe6ff;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
    }
    #bob {
      background-color:#e6f2ff;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
    }
    td img {
      height : 200px ; 
      width : 130px ; 
    }
    div {
      width : 1000px;
      margin: auto;
    }
    p {
      background-color:white; 
      font-size: 23px
    }
    #radius {
      border-radius: 10px;
    }
    #right {
      float:right;
      border : 5px solid #ff99cc;
      border-top-left-radius: 30px; 
      border-top-right-radius: 30px;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
    }
    #left {
      float:left;
      border : 5px solid #cce6ff;
      border-top-left-radius: 30px; 
      border-top-right-radius: 30px;
      border-bottom-left-radius: 30px;
      border-bottom-right-radius: 30px;
    }
    #hi {
      border-bottom-right-radius: 30px;
    }
    #hello {
      border-bottom-left-radius: 30px;
    }
  </style>
  <title> First webpage</title>
 </head>
 <body>
   <div> 
     <h1 id="radius"> Happy Birthday </h1>
   </div>
   <table id="right">
     <thead> 
       <th colspan="3" id="th">Cute Kittens </th>
     </thead>
     <tbody>
       <tr> 
         <td> <img src="//old-man.jpg"/>
           </td>
         <td> <img src="//old-man.jpg"/> 
           </td>
         <td> <img src="//old-man.jpg"/>
           </td>
       </tr>
       <tr>
         <td> <img src="//old-man.jpg"/>
           </td>
         <td> <img src="//old-man.jpg"/>
           </td>
         <td> <img src="//old-man.jpg"/>
           </td>
       </tr>
       <tr>
         <td> <img id="hello"  src="//old-man.jpg"/>
           </td>
         <td> <img src="//old-man.jpg"/>
           </td>
         <td> <img id="hi" src="//old-man.jpg"/>
           </td>
       </tr>
     </tbody>
   </table>
   <table id="left"> 
     <thead>
       <th colspan= "3" id="bob"> Cute Puppies </th>
     </thead>
     </tbody>
       <tr>
         <td> <img src="//old-man.jpg"/>
           </td> 
         <td> <img src="//old-man.jpg"/>
           </td>
         <td> <img src="//old-man.jpg"/>
           </td>
       </tr>
       <tr>
         <td> <img src="//old-man.jpg"/>
           </td>
         <td> <img src="//old-man.jpg"/>
           </td>
         <td> <img src="//old-man.jpg"/>
           </td>
       </tr>
       <tr> 
         <td> <img id="hello" src="//old-man.jpg"/>
           </td>
         <td> <img src="//old-man.jpg"/>
           </td>
         <td> <img id="hi" src="//old-man.jpg"/>
           </td>
       </tr>
     </tbody>
   </table>
 </body>
</html>

Have a read
http://stackoverflow.com/questions/8039094/css-with-background-image-without-repeating-the-image
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

google search
== the Book ==
jquery [your question] site:developer.mozilla.org
CSS [your question] site:developer.mozilla.org
javascript [your question] site:developer.mozilla.org
[your question] site:jquery.com
[your question] site:getbootstrap.com

== discussions / opinions ==
jquery [your question] site:stackoverflow.com
CSS [your question] site:stackoverflow.com
javascript [your question] site:stackoverflow.com


#8

I found out what was wrong. I used your jQuery library but if forgot to put another script tag to put my code in it. Here is an example of what I did for it to work:

<script type="text/javascript">
$(document).ready(function() {
    $("img").mouseenter(function() { 
        $("img").fadeTo("fast", 1);
    });
    
    $('img').mouseleave(function() { 
        $('img').fadeTo("fast",0)
    });
});

</script>

#9

Thank you for all of your help. It helped a lot!


#10

enter coding in Notepadd++
If we run the html code on IE and Google Chrome then image is displaying but not showing in mozilla firefox.