Solved

how do i get the picture size for Jquery

Posted on 2013-01-23
3
468 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
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Searchbox Branding 11 35
jQuery Parallax 1 38
Need to click button twice to get results 2 32
Need some help with powershell script 5 34
This article will show, step by step, how to integrate R code into a R Sweave document
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

932 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now