• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 484
  • Last Modified:

how do i get the picture size for Jquery

hi

I have a Jquery on my website, and i need to change all the pictures for the banners, i am getting the new pictures from MS word 2010, I print screen on the word and past it in the paint and save it from the paint. after i save it from paint and put it in the jquery banners its going out of the space

I tried to convert 978px to cm as a width and 354px to cm as a hieght but it didnt work

the jquery as the following


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="rotator/jquery-ui-personalized-1.5.3.packed.js" type="text/javascript"></script>
<style type="text/css">
/* Rotator Styles */
#wrapper {
      width:978px;
      border:1px solid #92a5bc;
      margin:0 auto;
}

#rotator {
      background:#FFF;
      color:#000;
      height:354px;
      position:relative;

      margin:0;
      font-size:16px;
}

/* Tabs */


ul.ui-tabs-nav, li.ui-tabs-nav-item, li.ui-tabs-nav-item a:link, li.ui-tabs-nav-item a:visited {
      margin:0;
      padding:0;
      border:0;
      outline:0;
      line-height:1.3;
      text-decoration:none;
      font-size:100%;
      list-style:none;
      float:left;
      font-family:Arial, Helvetica, sans-serif;
        width: 195.4px;
        height: 102px;
}

ul.ui-tabs-nav {
      position:absolute;
      bottom:0px;
      left:0;
      z-index:1;
      width:100%;
      border:none;
}

ul.ui-tabs-nav li {
      background:url(rotator/images/tabs_bgr.png) 0 -102px no-repeat;
      border-radius:0 0 2px 2px;
}

ul.ui-tabs-nav li:hover,
ul.ui-tabs-nav li.ui-tabs-selected {
      background-position: 0 1px;
}

/* Non-Selected Tabs */
li.ui-tabs-nav-item a:link,
li.ui-tabs-nav-item a:visited {      
      font-size:1.2em;
      font-weight:bold;
      text-align:center;
      color:#000;
      height:55px;
      padding-top:25px;
      margin-top:22px;
      border-left:solid 1px #ccc;
      border-right:solid 1px #fff;

}

li.ui-tabs-nav-item:first-child a {
      border-left:0;
}

li.ui-tabs-nav-item:last-child a {
      border-right:0;
}

/* Hovered Tab */


#rotator .ui-tabs-nav-item a span {
      cursor:pointer;

}

#rotator .ui-tabs-nav-item a span.red {
      color:#de0505;

}

#rotator .ui-tabs-nav-item a span.gray {
      color:#797979;

}

#rotator .ui-tabs-nav-item a:hover span,
#rotator .ui-tabs-nav-item a:active span {
      background-position: 0 0;
      color:#fff;
       
}

/* Active Tab */
#rotator .ui-tabs-selected a:link span,
#rotator .ui-tabs-selected a:visited span,
#rotator .ui-tabs-selected a:hover span,
#rotator .ui-tabs-selected a:active span{
      background-position: 0 0;
      color:#fff;
       
}

/* Content Panels */
#rotator .ui-tabs-panel {
      font-family:Arial, Helvetica, sans-serif;
      clear:left;
      color:#000;
      height:275px;
}

#rotator .ui-tabs-hide {
      display:none;
}

/* Background Images */
#rotator #fragment-1 {
      position:absolute;
      top:0;
      left:0;
      width:100%;
      background:transparent url(rotator/banner/pricing_n_signup.jpg) no-repeat top left;
        padding:40px 15px 15px 540px;
            z-index:0;
}

#rotator #fragment-2 {
      position:absolute;
      top:0;
      left:0;
      width:975px;
      background:transparent url(rotator/banner/remote_support.jpg) no-repeat top left;
        padding:40px 15px 15px 540px;
            z-index:0;
}

#rotator #fragment-3 {
      position:absolute;
      top:0;
      left:0;
      width:975px;
      background:transparent url(rotator/banner/home_users.jpg) no-repeat top left;
      padding:40px 15px 15px 540px;
      z-index:0;
}

#rotator #fragment-4 {
      position:absolute;
      top:0;
      left:0;
      width:975px;      
      background:transparent url(rotator/banner/asd.jpg) no-repeat top left;
      padding:40px 15px 15px 540px;
      z-index:0;
}

#rotator #fragment-5 {
      position:absolute;
      top:0;
      left:0;
      width:975px;      
      background:transparent url(rotator/banner/spam-protection.jpg) no-repeat top left;
      padding:40px 15px 15px 40px;
      z-index:0;
}

</style>

<script type="text/javascript">
      $(document).ready(function(){
            $("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, false);
      });
</script>
<div id="wrapper">
      <div id="rotator">
            <!-- Tabs -->
          <ul class="ui-tabs-nav">
              <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span>Choose Us</span> <span class="red">&amp; Save</span><br /><span class="gray">Book Online</span></a></li>
              <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span>Remote</span> <span class="red">Support</span><br /><span class="gray">Fix it Now</span></a></li>
              <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span>Home User</span> <span class="red">Support</span><br /><span class="gray">Call Now</span></a></li>
              <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span>Business</span> <span class="red">Solutions</span> <br />
              <span class="gray">Call Now</span></a></li>
            <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><span>Backup &amp; </span> <span class="red">Disaster</span> <br />
                              <span class="gray">Recovery</span></a></li>

          </ul>
          
          <!-- First Content -->
          <a href="http://mywebsite.com.au/BookOnline.asp"><div id="fragment-1" class="ui-tabs-panel" style="">
          </div></a>
          
          <!-- Second Content -->
          <a href="http://mywebsite.com.au/Remotesupport.asp"><div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
          </div></a>
          
          <!-- Third Content -->
          <a href="http://mywebsite.com.au/getquote.asp"><div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
          </div></a>
          
          <!-- Fourth Content -->
          <a href="http://www.mywebsite.com.au/services.asp?id=20"><div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
          </div></a>
       
         <!-- Fifth Content -->
          <a href="http://www.mywebsite.com.au/services.asp?id=6"><div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
          </div></a>
      </div><!-- end rotator -->
</div>
<!-- end wrapper -->
0
flf4eva
Asked:
flf4eva
2 Solutions
 
tailoreddigitalCommented:
You need to stay in px (pixels).

The easiest way to approach this is to check the current pictures sizes (in pixels),  then create the new pictures at the same size.     Once the pictures are edited and ready, upload them to your server to replace the current pictures.   You need to use the same file names or update the references to the images in the code.   Remember the file names are case sensitive.

BE SURE to backup your original pictures in case something goes wrong.
0
 
Plk_In_EECommented:
Hello,
using Jquery .width method you can find out the and width and height of the image as below,

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

Hope this helps.

Cheers,
Karuppan
0
 
flf4evaAuthor Commented:
what i did I opened the original images in paint and i got the exact size
i will reward you guys for trying to help me

thank you
0

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now