jquery/javascript: looping an animation function with different ID tags one after each other?

Hi I have a function that I want to loop around using a different ID tag each time. This function is called when the navigation link is clicked. So far I have this and I would like to change txt1 to txt2 then txt 3 and up to txt5 thus playing each animation one after each other. Thanks!

function animetxt(){
$o=$(\"#txt1\");
$o.html($o.text().replace(/([\\S])/g,\'<span>$1</span>\'));
$o.css(\'display\',\'inline-block\');
$(\'span\',$o).stop().css({position:\'relative\',
                         display:\'inline-block\',
                         opacity:0,
                         fontSize:84,
                         top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
                         left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
                        }).animate({opacity:1,fontSize:20,top:0,left:0},1000);}

Rating: 3 out of 5 based on 3 ratings

The post jquery/javascript: looping an animation function with different ID tags one after each other? appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/jqueryjavascript-looping-an-animation-function-with-different-id-tags-one-after-each-other.html

Using loop to bind click event over several elements not working in javascript/jquery

I have a map of messages

say:

var Mapping = {
\"notnow\": 2,
\"expensive\": 3,
\"not_worth_it\": 4
}

i have a bunch of html elements (lets say divs with the same name)

so

<div id=\"notnow\"></div>

,etc

now i want to attach a click handler to each of them,

i run a loop as shown below

function setThemUp(){
   foreach(var item in Mapping)
   {
      $(\"#\" + item).bind(\'click\', function () {
      Apply(Mapping[item]); });
   }
}

But for some reason all of them seem to get bound to \”not_worth_it\”:4. Not to their respective values.

I\’m using Jquery 1.5.

Can someone please explain why this might be happening?

My guess is that instead of the Mapping[item] being resolved to their values, it\’s being passed as a reference or something, that\’s why since the value of item eventually points to \”not worth it\” all of them call the function with that value itself. Any way in which i could overcome them.

Hard coding each of them as

  $(\"#notnow\").bind(\'click\', function () {
      Apply(Mapping[\"notnow\"]); });
  $(\"#expensive\").bind(\'click\', function () {
      Apply(Mapping[\"expensive\"]); });
  $(\"#not_worth_it\").bind(\'click\', function () {
      Apply(Mapping[\"not_worth_it\"]); });

does work, but i would prefer an elegant solution with a loop.

Rating: 3 out of 5 based on 3 ratings

The post Using loop to bind click event over several elements not working in javascript/jquery appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/using-loop-to-bind-click-event-over-several-elements-not-working-in-javascriptjquery.html

css – Two column dynamic layout

I have several boxes containing the following!

<div class=\"box\">
  <div class=\"image\">
    <img src=\"anything.png\" /> <!-- The width is dynamic -->
  </div>
  <div class=\"box-text\">
    <h2>Some Title</h2>
    <p>Lorem ipsum ...</p>
  </div>
</div>

The problem is that the text floats to the left after the image. I want it to go straight down, as I\’ve marked it in the following image:

---

---

This is the way it should look like:

I do not want to use #code#PnRhYmxlczw=#/code# or javascript. I can\’t use margin-left for the box-text, because the width of the image is dynamic.

Thanks for your contribution!

Rating: 3 out of 5 based on 4 ratings

The post css – Two column dynamic layout appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/css-two-column-dynamic-layout.html

Set width of javascript popup box

I\’m using the below javascript to display a popup message on page load for a clients website. I am a real novice at js and can only really copy/paste examples I find on the net. Need to know how I can set the width of the popup box. I would like the text to run over two lines, not just span the width of the page. Here is an example of how it appears www.manageourwebsite.com.au

<body onload=\"WelcomeMSG()\">
    <script language=\"JavaScript\">

<!--
function WelcomeMSG () 
{
alert(\"Our Retail shop front will be closed from Friday 21st December 2012 thru to Monday 21st January 2013. The Online store will be open 24/7 as usual  with all online orders being processed as normal.\")

}

 -->
    </script>

Rating: 5 out of 5 based on 5 ratings

The post Set width of javascript popup box appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/set-width-of-javascript-popup-box.html

javascript – Replacing background image for higher quality one if user is on retina device

I\’m attempting to make my first retina ready website, but I came across the problem when I need to replace images to higher resolution in css. I\’m not sure how to, for example, have standard image as a background and then if user is on retina machine have same image but at higher res (at the moment I have both low res and high res images).

Can anyone suggest good sources or explain how to do this? Preferably a css and cross-browser solution, but it could also be javascript or something.

Rating: 1 out of 5 based on 4 ratings

The post javascript – Replacing background image for higher quality one if user is on retina device appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/javascript-replacing-background-image-for-higher-quality-one-if-user-is-on-retina-device.html

javascript – Check whether white spaces exist without using trim

I have following code that checks whether date is valid. http://jsfiddle.net/uzSU6/36/

If there is blank spaces in date part, month part or year part the date should be considered invalid. For this, currently I am checking the length of string before and after trim operation. It works fine. However is there a better method to check for white spaces? (For example, using === operator)

function isValidDate(s) 
{
var bits = s.split(\'/\');

//Javascript month starts at zero
var d = new Date(bits[2], bits[0] - 1, bits[1]);


if ( isNaN( Number(bits[2]) ) ) 
{
    //Year is not valid number
    return false;
}

if ( Number(bits[2]) < 1 ) 
{
    //Year should be greater than zero
    return false;
}


//If there is unwanted blank space, return false
if  ( ( bits[2].length != $.trim(bits[2]).length ) ||
      ( bits[1].length != $.trim(bits[1]).length ) ||
      ( bits[0].length != $.trim(bits[0]).length ) )
{
    return false;
}



//1. Check whether the year is a Number
//2. Check whether the date parts are eqaul to original date components
//3. Check whether d is valid

return d && ( (d.getMonth() + 1) == bits[0]) && (d.getDate() == Number(bits[1]) );

} 

Rating: 1 out of 5 based on 3 ratings

The post javascript – Check whether white spaces exist without using trim appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/javascript-check-whether-white-spaces-exist-without-using-trim.html

javascript – jQuery Click Event PreventDefault

If I have an #code#PmE8#/code# tag:

<a id=\"delete-event\" href=\"/delete/1234\">Delete</a>

And some javascript which prompts to confirm the delete:

 $(\"#delete-event\").click(function(e) {
    e.preventDefault();

    bootbox.confirm(\"Are you sure you wish to delete this?\", function(confirmed) {
        if(confirmed) {
            return true;
        }
    }); 
});

I thought doing e.preventDefault() would prevent the a href from firing, but its not. When I click the a tag it simply goes to the url, without executing the javascript. How can I make this work?

Thanks.

Rating: 5 out of 5 based on 3 ratings

The post javascript – jQuery Click Event PreventDefault appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/javascript-jquery-click-event-preventdefault.html

javascript – Add a pause/interval to every iteration in a FOR LOOP

I want to write a for loop which prints number 1 to 10 with intervals after every iteration \”like this \”

How can I achieve it? I tried sleep() setInterval() setTimeout(\”) and what not but can\’t seem to find any working solution. And if possible I would like to do this using pure Javascript only.

function abc(){
    for(i=1;i<=10;i++){
        document.write(i+\"<br>\");
        sleep(1000);
    }
}

Rating: 3 out of 5 based on 4 ratings

The post javascript – Add a pause/interval to every iteration in a FOR LOOP appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/javascript-add-a-pauseinterval-to-every-iteration-in-a-for-loop.html

javascript – Possible to aquire a CSS defined size for an image via Jscript and change URL values before image loads?

So what I have is the following HTML structure

<div class=\"large\">
<a href=\"http://www.google.com\">
<img src=\"/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1\" width=\"800\" height=\"600\" border=\"0\" /></a>
</div>

Now that mythumb.php is a thumbnailer script that will on the fly create a thumbnail with predefined size limits (in this case 800×600).

However in my CSS file i\’ve set

.large img
{
width:400px;
height:300px;
}

This is done so I achieve a retina effect on iphones/ipad, etc..

However, I was thinking this is better to be accomplished dynamically, and I want to be able to pull the CSS defined width and height and replace those values in the URL

In this case, would it be possible for javascript to change

/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1

to

/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg*&h=300&w=400*&zc=1&s=1

This change should occur before the image loads so we dont waste the users bandwidth downloading the same image twice.

I would also like to only apply this to images being called from the mythumb.php, not my other static images on the page

Does anyone think something like this is possible?

Rating: 1 out of 5 based on 3 ratings

The post javascript – Possible to aquire a CSS defined size for an image via Jscript and change URL values before image loads? appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/javascript-possible-to-aquire-a-css-defined-size-for-an-image-via-jscript-and-change-url-values-before-image-loads.html

html – jQuery to calculate avg of values present inside a td of a table

I am using googlecharts plugin in order to generate a column chart.

i also want to get an average of the values present in the td. Is it possible through google charts plugin or can anyone help me in writing ajquery to calculate the avg.

After calculating the avg I need to add it in paragraph tag with class \”avg\”.

Thanks for the help.

My code is:

<table id=\"weather\">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Mar</th>
                            <th>Apr</th>
                            <th>May</th>
                            <th>Jun</th>
                            <th>Jul</th>
                            <th>Aug</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>Weather</th>
                            <td>20</td>
                            <td>22</td>
                            <td>18</td>
                            <td>24</td>
                            <td>20</td>
                            <td>22</td>
                        </tr>
                    </tbody>
                </table>

And the javascript code:

<script type=\"text/javascript\">
        gvChartInit();
        $(document).ready(function(){
            $(\'#weather\').gvChart({
        chartType: \'ColumnChart\',
        gvSettings: {
            width: 100,
            height: 40,
            colors:[\'gray\'],
            hAxis: {textPosition: \'none\'},
            vAxis: {minValue: 0, textPosition: \'none\', gridlines: {color: \'#ffffff\'}},
            legend: {position: \'none\'}
        }
    });
        </script>

Rating: 5 out of 5 based on 3 ratings

The post html – jQuery to calculate avg of values present inside a td of a table appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/html-jquery-to-calculate-avg-of-values-present-inside-a-td-of-a-table.html