#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    6
    Rep Power
    0

    Smile Jquery code not working


    <head>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#hosptials').hover(makeBigger, returnToOriginalSize);

    function makeBigger() {
    $(this).css({height: '+=10%', width: '+=10%'});
    }
    function returnToOriginalSize() {
    $(this).css({height: "", width: ""});
    }
    });


    </script>

    </head>


    I`m a newbie to jquery. I want to make an image bigger, if we place the mouse on it, and return to normal size , if the mouse is moved away. But the above code is not working for me. even i tried

    $(document).ready(function(){
    alert("hi");
    });

    This is also not working. Help please...
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    Code:
    function makeBigger(what){
       $(what).css("height","+=10%");
       $(what).css("width","+=10%");
    }
    
    function returnToOriginalSize(what) {
       $(what).css("height","");
       $(what).css("width","");
    }
    
    $(document).ready(function(){
     $("#hosptials img").hover(function(what){
        makeBigger(this);
     });
     $("#hosptials img").mouseout(function(what){
        returnToOriginalSize(this);
     });
    });
    Code:
    <div id="hosptials">
    
    <img src="image_1.jpg"/>
    <img src="image_2.jpg"/>
    <img src="image_3.jpg"/>
    
    </div>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    6
    Rep Power
    0

    Red face Setting id to the body background image.


    Thanks.. Actually i didnt include the jquery library in the script. That was the main problem. Thanks for helping me with the code..
    Can you tell me , how to set id to the body background image alone. I`m trying to change the body bacground image every 5 secs.


    javascript code(jquery):

    var currentBackground=0;
    var backgrounds=[];
    backgrounds[0]="/vignesh/images/image1.jpg";
    backgrounds[1]="/vignesh/images/image2.jpg" ;
    backgrounds[2]="/vignesh/images/image4.jpg";


    function changeBackground() {
    currentBackground++;
    if(currentBackground > 2) currentBackground = 0;

    $('body').fadeOut(1000,function() {
    $('body').css({
    'background-image' : "url('" + backgrounds[currentBackground] + "')"
    });
    $('body').fadeIn(100);
    });


    setTimeout(changeBackground, 5000);
    }
    setTimeout(changeBackground, 5000);
    });

    html code:

    <body>

    <span class='style1'><center>Welcome to Sample site</center></span>
    <div id="part1">
    </div>


    <div id="Tabs">
    <ul>
    <li id="li_tab1" onclick="tab('tab1')"><a href="/vignesh/html/Info.html">Info</a></li>
    <li id="li_tab2" onclick="tab('tab2')"><a href="/vignesh/html/Info.html">Gallery</a></li>
    <li id="li_tab3" onclick="tab('tab3')"><a href="/vignesh/html/Info.html">Map</a></li>
    <li id="li_tab4" onclick="tab('tab4')"><a href="/vignesh/html/Info.html">Climate</a></li>
    <li id="li_tab5" onclick="tab('tab5')"><a href="/vignesh/html/Info.html">Specials</a></li>
    </ul>
    </div>


    <div id="hospitals">
    <a href="/vignesh/html/Hospitals.html">
    <img src="/vignesh/images/hospitals.jpg" id="img1" width=180 height=150/>
    </a>
    </div>

    </body>
    </html>


    css code:

    body{

    background-size:cover;
    min-width:1200px;
    }

    This is the code i`m using. This seems to be working. But the effect applies to the entire body. I want the effect to be applied only to the background image. How to set the id for the background image?
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,041
    Rep Power
    119
    You can't give a background-image a id; it is a css property, not an actual html element. What you can do though; is create a wrapper for your page and have it's css background-image to change and then fade-in that element (your wrapper). That should give you the effect your looking for; you would do it something like this:
    Code:
    <html>
    <head>
    
    <style>
    #body_wrapper{
    background-size:cover;
    min-width:1200px;
    }
    </style>
    
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script>
    var currentBackground=0;
    var backgrounds=[];
    backgrounds[0]="/vignesh/images/image1.jpg";
    backgrounds[1]="/vignesh/images/image2.jpg" ;
    backgrounds[2]="/vignesh/images/image4.jpg";
    
    
    function changeBackground() {
    currentBackground++;
    if(currentBackground > 2)
    currentBackground = 0;
    $('#body_wrapper').fadeOut(1000,function() {
    $('#body_wrapper').css({
    'background-image' : "url('" + backgrounds[currentBackground] + "')"
    });
    $('#body_wrapper').fadeIn(100);
    });
    setTimeout(changeBackground, 5000);
    }
    setTimeout(changeBackground, 5000); 
    });
    
    </script>
    
    </head>
    
    <body>
    
    <div id="body_wrapper"><!-- begin "body_wrapper" -->
    
    <span class='style1'><center>Welcome to Sample site</center></span>
    <div id="part1">
    </div>
    
    
    <div id="Tabs">
    <ul>
    <li id="li_tab1" onclick="tab('tab1')"><a href="/vignesh/html/Info.html">Info</a></li>
    <li id="li_tab2" onclick="tab('tab2')"><a href="/vignesh/html/Info.html">Gallery</a></li>
    <li id="li_tab3" onclick="tab('tab3')"><a href="/vignesh/html/Info.html">Map</a></li>
    <li id="li_tab4" onclick="tab('tab4')"><a href="/vignesh/html/Info.html">Climate</a></li>
    <li id="li_tab5" onclick="tab('tab5')"><a href="/vignesh/html/Info.html">Specials</a></li>
    </ul>
    </div>
    
    
    <div id="hospitals">
    <a href="/vignesh/html/Hospitals.html">
    <img src="/vignesh/images/hospitals.jpg" id="img1" width=180 height=150/>
    </a>
    </div>
    
    </div><!-- end "body_wrapper" -->
    
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo