Solved

how do i get the picture size for Jquery

Posted on 2013-01-23
3
474 Views
Last Modified: 2013-01-27
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
Comment
Question by:flf4eva
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 23

Assisted Solution

by:tailoreddigital
tailoreddigital earned 200 total points
ID: 38812649
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
 
LVL 5

Accepted Solution

by:
Plk_In_EE earned 300 total points
ID: 38816918
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
 

Author Comment

by:flf4eva
ID: 38821069
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article discusses how to create an extensible mechanism for linked drop downs.
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question