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