Tuesday, January 8, 2013

[javascript questions] Using 'this' variable in jQuery fadeIn?

[javascript questions] Using 'this' variable in jQuery fadeIn?

Using 'this' variable in jQuery fadeIn?

Posted: 08 Jan 2013 01:35 AM PST

I am trying to make a button, which will favorite the thread, using ajax. But it have to only fade in and out the favorited image on the favorited thread.

I am getting the following error: Uncaught SyntaxError: Unexpected token this

And that is my code line 11: $(this + ' .is_favorited').fadeIn("slow");

Here is the full Javascript source:

$(".do_favorite").live("click", function() {      var item = $(this).closest(".box");      var content = $(this).attr('data-id');      alert(content);      $.post( 'ajax.favorite.php?sid=' + content + '',          $(this).serialize(),          function(data) {              if (data == "1") {                  // Favorite it                  $(this + ' .not_favorited').fadeOut("slow", function (                      $(this + ' .is_favorited').fadeIn("slow");                  ));              }else if (data == "2") {                  // Un-Favorite it                  $(this + ' .is_favorited').fadeOut("slow", function (                      $(this + ' .not_favorited').fadeIn("slow");                  ));              }else {                  alert("DER SKETE EN FEJL DU");              }          }      );      return false;  });  

Hope someone can help me figure this out, as I really need to use this, to make it fade only the clicked one.

In chrome, how can it show the full size image url when user drag a thumbnail image in my website?

Posted: 08 Jan 2013 01:35 AM PST

We show thumbnail images to save bandwidth.

However, when user drag a thumbnail image to another browser tab, we wants to show the full size image.

The image is not a link.

What's the right way to do it?

Make an input secret get focus when page is ready

Posted: 08 Jan 2013 01:35 AM PST

I´m trying to do that with DOM:

        <script type="text/javascript">              document.addEventListener('DOMContentLoaded', function() {                  document.getElementById('frmTotem:undCGC').focus();              });          </script>  

Where "undCGC" is an input secret from richfaces -> h:inputSecret.

But focus() or select() functions do not work properly. Any cue will be very welcome. Thanks!

Mozila Firefox - setting the content of an iframe isn't working

Posted: 08 Jan 2013 01:34 AM PST

I am having a hard time trying to set the content of an iframe using Firefox browser. In my code I have a label for which I set the content in code-behind on page load event

<asp:Label ID="lbnAdd" runat="server" />  lbnAdd.Text = "<iframe style=\"display:none;\" id=\"myIframe\" frameborder=\"0\" scrolling=\"no\" height=\"380px\" width=\"745px\"></iframe>";    ClientScript.RegisterClientScriptBlock(this.GetType(), "Test", "<script type='text/javascript'>function MyTest() { document.getElementById('myIframe').style.display=\"block\"; frames['myIframe'].location.href = 'myURL'; } </script>");  

I must say that this works perfectly in IE8, Chrome and Opera, but not in Mozilla. Javascript alerts me that frames['myIframe'] is undefined in Firefox, while it is object in the rest of the browsers. What could be the explanation for this, any suggestions?

Thank you!

How to pass arguments to addEventListener listener function?

Posted: 08 Jan 2013 01:34 AM PST

The situation is somewhat like-

var someVar = some_other_function();  someObj.addEventListener("click", function(){      some_function(someVar);  }, false);  

The problem is that the value of someVar is not visible inside the listener function of the addEventListener, where it is probably being treated as a new variable.

Thanks in advance.

pushing new created object to javascript array overwrites some part of previous data

Posted: 08 Jan 2013 01:33 AM PST

When pushing new created object into javascript array, some elements of array becomes same as the last one as if the last pushed object overwrites some parts inside the old ones. As seen below.

var urlRoot = "http://.../";  var allBooks = [];   var i = 1;  var max = 2; //3;    getPage(i);    function getPage(bookNo) {        if (i > max) {          return;      }        $.ajax({          url: urlRoot + bookNo,          type: 'GET',          cache: false,          success: function(res) {              var html = res.responseText;                allBooks.push(new Book(html));              //allBooks[i - 1] = new Book(html);                console.log(allBooks);                i++;              getPage(i);          }      });  }  

console.log(allBooks) gives the result below when only two elements pushed and three elements pushed (Value of label 'EnglishbookHeading' changes; but content of array 'Pages' are all same as the last pushed one has.):

[Book, Book]  0: Book      EnglishbookHeading: "Revelation"  Hadiths: Array[43]  __proto__: Book  1: Book      EnglishbookHeading: "Belief"  Hadiths: Array[43]  __proto__: Book  length: 2  

    Array[3]  0: Book  EnglishbookHeading: "Revelation"  Pages: Array[53]  __proto__: Book  1: Book  EnglishbookHeading: "Belief"  Pages: Array[53]  __proto__: Book  2: Book  EnglishbookHeading: "Knowledge"  Pages: Array[53]  __proto__: Book  length: 3  

Book.js :

define(["Page"],      function (Page) {            var englishbookHeading;          var thisPages = [];            function Book(html) {              setBook(html);                this.EnglishbookHeading = englishbookHeading;              this.Pages = thisPages;          };            function setBook(html) {              var con = $(html); //Context                ...                var chapters = tumHadisler.find('div.chapter');              var index = 0;                chapters.each(function () {                    var Page = new Page();                    ...                    thisPages[index] = Page;                    index++;              });          }            return Book;      });  

Page.js :

define(function () {        function Page() {            this.ChapterId = "";            ...      }        return Page;  });  

how to add confirm box before submit buttons?

Posted: 08 Jan 2013 01:33 AM PST

adding confirm box

here is my code and i want to add confirm box with it..........

i am having a form with two submit button i need the confirmation box with them and then send to the next page of jsp...how can i do this? this is the code for confirmation box,how can i place it in my form ?? how can i do so...........

    onclick="return confirm('Are you sure?');"       myform.jsp        <form id="form1" name="form1" method="post" action="">                              <p>&nbsp;</p>                              <p align="center">Enter your choice:-                                  <label> <br />                                          <label>                                          <input type="submit" name="Submit" value="delete" onclick="this.form.action='logi.jsp?flag=1&act=1';this.form.submit();" />                                      </label>                                      <br />                                        </br>                                      <label>                                          <input type="submit" name="Submit" value="Delete" onclick="this.form.action='delete1.jsp?flag=1&act=1';this.form.submit();" />                                      </label>                                      <br/>                                </div></form>  

Backbone: Two Change Events on Model Save

Posted: 08 Jan 2013 01:33 AM PST

When I try to update a model in Backbone via save the change event on the model is fired twice. Events are fired in this order.

  1. change
  2. request
  3. change
  4. sync

However, if I pass (wait: true), only the first change event is fired.

Can anybody explain why this is happening, and how I can get change to only fire once without passing (wait: true)?

Two change events:

    editItem: function() {          this.model.save({              name: "Howard the Duck"          });      }  

One change event:

    editItem: function() {          this.model.save({              name: "Howard the Duck"          }, (wait: true);      }  

Pseudo code:

App.Views.Item = Backbone.View.extend({      initialize: function() {          this.model.on("change", this.changing, this);          this.model.on("request", this.requesting, this);          this.model.on("sync", this.syncing, this);      },        events: {          "click a": "editItem"      },        editItem: function() {          this.model.save({              name: "Howard the Duck"          });      }        changing: function() {          console.log("changing");      },                requesting: function() {          console.log("requesting");      },        syncing: function() {          console.log("syncing");      }  });  

How to use options in dataTables initiated with aaData js array?

Posted: 08 Jan 2013 01:32 AM PST

I have initialized my datatable with an aaData object and options like this:

$('#dataTable').dataTable(dataTableObj, {      "bPaginate": false,      "bLengthChange": false,      "bFilter": true,      "bSort": false,      "bInfo": false,      "bAutoWidth": false  });  

The browser renders my table but does not activate the options. I've tried every combination but simply did not get any response from my table.

PS. my table works well. Especially with a large amount of data (23 cols and way more than 1000 rows).

Remove array with a unique id from localstorage

Posted: 08 Jan 2013 01:32 AM PST

I current have an array in localstage. What I've been trying to figure out is when a user wants to delete a particular entry (displayed in a list), jQuery searched through all of the arrays, and deletes the array with the entry they want removed.

This is what my array currently looks like with 2 entries. The unique feild is actually the Phone Number and not the ID:

[{"id":9635,"name":"John Doe","tel":"88-555-88","relationship":"brother"},  {"id":9635,"name":"John Doe","tel":"00-555-555-55","relationship":"brother"}]  

Below is my current method but it always ends up deleting the wrong array!!

$(document).live('click',function(e) {      e = e || event;      $.lastClicked = e.target || e.srcElement;  });    function getMyUrls() {      var myUrls;      var storedUrls = localStorage.getItem("contact");      if (storedUrls) {           myUrls = JSON.parse(storedUrls);      }      else {           localStorage.setItem("contact", JSON.stringify(myUrls));      }      return myUrls;  }      function removeContact(id) {        var lastClickedElement = $.lastClicked;        $(lastClickedElement).closest('#edit_btn_contact').fadeOut("fast");      $(lastClickedElement).closest('#directory-item').toggle("slow");        var pickMe = $(lastClickedElement).closest('#js-output-tel').attr('href');        var myUrls = getMyUrls();      if (pickMe !== -1) {          myUrls.splice(pickMe, 1);          localStorage.setItem("contact", JSON.stringify(myUrls));  }  

Here is how my information is saved into localStorage

function SaveItems(){      //Run if validation didn`t fail      if (validate()){          item = {              id: contacts[0].id,              name: contacts[0].displayName,              tel: contactsPhoneNumber,              relationship: $('.js-output-relationship').find().text()      };      //Read and parse current items array      if( storage['contact'] != undefined ){              obj = storage['contact'];              contact = JSON.parse(obj);      }      //If not exists create empty array      else{               contact = [];      }      if( $('#directory-item').find('input[name=id]').val() == '' ) {               //If id undefined push new item to array and save it to a localstorage               contact.push(item);      }      else{               //Else save to chosen record               contact[$('#directory-item').find('input[name=id]').val()] = item;               $('#directory-item').find('input[name=id]').val('');      }      save = JSON.stringify(contact);      storage['contact'] = save;      location.reload();      }      return false;  }  

Passing variable with single quote in javascript

Posted: 08 Jan 2013 01:31 AM PST

I have an onClick call on a link:

<a onClick="fomateName('Andrew Dsouza')"> //this is working good  

The problem is the variable inside fomateName would contain single quotes and my fomateName Takes a variable like

var a='Andrew D'souza'. Need to format a variable present with single quote Ex;

<a onClick="fomateName('a')"> which turns to     <a onClick="fomateName('Andrew D'souza')"> //this is not working ,because present of single quote  

Any Idea how to pass text with proper quotes in a javascript.

with single quote not the name actually

executing a script on clicking a button with redirection

Posted: 08 Jan 2013 01:31 AM PST

I am new in web developing, have created contact form, what I need here is, on clicking the 'send message' button the script contact.php should execute and the web page should redirect to a thank you page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    <!-- BEGIN html -->  <html xmlns="http://www.w3.org/1999/xhtml">            <!-- BEGIN head -->          <head>                    <!-- Title -->                  <title>School Uniform Online</title>                    <!-- Meta tags -->                  <meta http-equiv="content-type" content="text/html; charset=utf-8" />                  <meta name="viewport" content="width=100%; initial-scale=1; minimum-scale=1;" />                    <!-- Favicon -->                  <link rel="shortcut icon" type="image/ico" href="http://2.bp.blogspot.com/-njBB6VMluSQ/UOfeuu5qhWI/AAAAAAAAAFU/XYrSBEqA3RI/s1600/favicon.ico">                    <!-- Stylesheets -->                  <link rel="stylesheet" href="css/stylesheet.css" type="text/css" />                  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ropa+Sans" type="text/css" />          <link href="css/ie.css" rel="stylesheet" type="text/css" />                  <!--[if lt IE 9]><link rel="stylesheet" href="css/ie.css" type="text/css" type="text/css" /><![endif]-->                  <!-- <link rel="stylesheet" href="css/dark.css" type="text/css" /> -->                <!-- END head -->          </head>            <!-- BEGIN body -->          <body class="top">            <!-- BEGIN .quick-shop -->            </div><div class="main">                              <div class="main-dock-wrapper">                              <div class="main-dock">                                <ul>                                  <li><b>For Support Dial: +971559852686 |                                    Email:Sales@School-uniform.in</b></li>                                  <div class="search">                                    <form action="#" method="get">                                      <input type="text" class="input-text-1 trans-1" placeholder="search schools" />                                </form></li>                              </div>                            </ul>                          </div>                              <!-- END .main-dock-wrapper -->                        </div>                          <!-- END .main-dock-wrapper --></div>                          </div>                    <!-- BEGIN .main-body-wrapper -->                  <div class="main-body-wrapper">                              <!-- BEGIN .main-dock-wrapper -->                              <!-- BEGIN .main-header -->                          <div class="main-header">                                      <div class="main-menu custom-font-1">                                    <div class="logo style1"><br />                                            <font size="+3" color="F527A9">&nbsp;&nbsp;School-Uniform.in</font></div>                                          <table>                                                  <tr>                                                          <td>                                                                  <ul>                                                                    <li><a href="index.html" class="single">Home</a></li>                                                                          <li>                                                                                  <a href="buynow.html" class="single">Buy now</a>                                                                            </li>                                                                          <li>                                                                                  <a href="about.html" class="single">about us</a>                                                                            </li>                                                                          <li><a href="contact.html" class="single">contact us</a></li>                                                                  </ul>                                                          </td>                                            </tr>                                    </table>                            </div>                                    <div class="clear"></div>                            <!-- END .main-header -->                          </div>                              <!-- BEGIN .main-content-wrapper -->                          <div class="main-content-wrapper">                                    <!-- BEGIN .catalog -->                                    <div class="clear"></div>                            <div class="main-content-wrapper">                                    <div class="main-title">                                      <p class="custom-font-1">Contact us</p>                          </div>                                    <!-- BEGIN .single-full-width -->                                    <div class="single-full-width">                                      <div class="contact-form">                                        <form action="contact.php">                                          <p>                                            <label>Your name:</label>                                            <input type="text" class="input-text-1" />                                      </p>                                          <p>                                            <label>Your e-mail:</label>                                            <input type="text" class="input-text-1" />                                      </p>                                          <p>                                            <label>Message topic:</label>                                            <select name="select">                                              <option>Shipping &amp; handling</option>                                              <option>Question about items for sale</option>                                              <option>Other technical problems</option>                                        </select>                                      </p>                                          <p>                                            <label>Your message:</label>                                            <textarea name="textarea" class="textarea-1"></textarea>                                      </p>                                          <p class="submit">                                            <label></label>                                            <a href="thankyou.html" class="button-1 custom-font-1 trans-1"><span>Send message</span></a> </p>                                    </form>                                        <div class="text">                                          <p><b>Nam velit nulla, egestas sit amet luctus eu, aliquam vel enim. Proin tortor est, ornare sit amet fringilla id, lacinia a velit. Aliquam erat volutpat.</b></p>                                          <p>Quisque pharetra libero at orci lacinia elementum ultricies nisi imperdiet. Vestibulum nisl purus, gravida non tincidunt nec, bibendum quis ante. Donec porta eros nec elit semper quis blandit ipsum placerat. Praesent sagittis aliquet malesuada. Pellentesque orci mi, semper nec vulputate eget, euismod vel neque. Aliquam scelerisque tempus gravida.</p>                                    </div>                                  </div>                                      <div class="clear"></div>                                      <!-- END .single-full-width -->                                </div>                                    <div class="clear"></div>                                    <!-- END .main-content-wrapper -->                            </div><div class="footer">    <div class="footer_resize">        <p class="right">Powered by <a href="http://www.unera.in">Unera Infotech</a></p>        </div>    </div>                            <!-- END .main-content-wrapper -->                    </div></div></div></div></body></html>  

DOM manipulation on a cloned node

Posted: 08 Jan 2013 01:31 AM PST

I have a query related to DOM manipulation. I am performing some operations on the DOM nodes in a web page by cloning the entire document node and then performing the operations on the cloned copy.

One particular operation that I am performing on the DOM is changing the 'src' attribute of the 'img' tags. When I do that, I see a 404 error (404 (Not Found)) in the console for that page in the browser. The path I am setting is not present but since I am performing the operations on the cloned copy, I assumed that it should not show any error. Am I doing something wrong here? Is there a way to avoid this error from being displayed?

The code snippet is provided below:

//code snippet    var doc = document.documentElement.cloneNode(true);  var allNodes = doc.getElementsByTagName('*');    //for loop to interate through the node    //When an img node is found  node.src = "some_image.png";  

CheckBox Issue in IE6

Posted: 08 Jan 2013 01:31 AM PST

I am dynamically generating checkboxes for a popup window (displayed using AJAX) using javascript and on a button click I also need to call a function that checks all the check boxes before the popup is rendered.

All pages in use are JSPs and the popup is also included using the tag so it is generated already when the parent page gets loaded.

The problem is that I'm able to check all the custom generated checkboxes using the same function in IE7 and IE8. But it does not work for IE6.

I'm using something like:

var i;  for(i=0; i<size; i++){       document.getElementById('chk'+i).checked = true;  }  

How to call Struts1 Action from Ajax or JavaScript?

Posted: 08 Jan 2013 01:30 AM PST

I need to call an action on load of a JSP. To keep track of number of users who visited that page.

I hav an action VisitorCounterAction. Where il update the database. On load of the JSP im calling an ajax function callCounter();

{            alert("callCounter");          if (window.XMLHttpRequest)          {// code for IE7+, Firefox, Chrome, Opera, Safari          xmlhttp=new XMLHttpRequest();          }          else          {// code for IE6, IE5          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");          }            // i need some correction here          xmlhttp.open("GET",VisitorCounterAction,false);          xmlhttp.send(null);          alert("callCounter returned from Action");          }  

I am getting an exception as:

/web/guest/content?p_p_id=31&p_p_lifecycle=0&p_p_state=pop_up&p_p_mode=view&_31_struts_action=%2Fimage_gallery%2Fview_slide_show&_31_folderId=10605 generates exception: null

Please help me with this. Or any other way to call the Action. I can't reload the page as it'll call onload function again.

Thanks, Dj

Accessing chrome.history from javascript in an extension and changing the page being viewed

Posted: 08 Jan 2013 01:30 AM PST

My goal is to create a button that when clicked deletes the parent divs on reddit whose links have already been visited. Due to security issues, visited link status cannot be detected from unprivileged javascript, thus, I attempted a chrome extension. However, this doesn't seem to work either, as even the javascript called from an extension with history permission returns "Uncaught TypeError: Cannot call method 'search' of undefined." Thus, I am still looking for a way to do this.


{   "background": {"scripts": ["background.js"]},   "browser_action": {"default_icon": "icon-128.png","default_title": "uniquify-reddit"},   "name": "uniquify-reddit",   "icons": {"128": "icon-128.png" },   "permissions": ["history","tabs","http://reddit.com/*",],   "version": "0.1",   "manifest_version": 2  }  


chrome.browserAction.onClicked.addListener(function(tab) {      chrome.tabs.executeScript(tab.id, {file: "bookmarklet.js"})  });  


chrome.history.search(      {text: 'http://www.google.com', maxResults:1},       function(results) { alert(results[0].title) }  );  

How to focus multiselect on tab key in extjs?

Posted: 08 Jan 2013 01:29 AM PST

I am using a multiselect control in my page (xtype: Ext.ux.form.MultiSelect). when I am using tab to switch from one control to another, it is skipping multiselect control. How can I focus multiselect control, when I use tab key?

UPDATE: Sample code below

Ext.create('Ext.container.Container', {                  layout: {                      type: 'vbox'                  },                  width: 400,                  minHeight:200,                  renderTo: Ext.getBody(),                  border: 1,                  style: { borderColor: '#000000', borderStyle: 'solid', borderWidth: '1px' },                  defaults: {                      labelWidth: 80,                      style: {                          padding: '10px'                      }                  },                  items: [{                      xtype: 'datefield',                      name: 'startDate',                      fieldLabel: 'Start date'                  }, {                      xtype: 'multiselect',                      name: 'multi select',                      fieldLabel: 'multiSelect',                      store: [[123,'One Hundred Twenty Three'],                              ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],                              ['6', 'Six'], ['7', 'Seven']                              ]                    }, {                      xtype: 'datefield',                      name: 'endDate',                      fieldLabel: 'End date'                  }]              });  

Add elements using jQuery()

Posted: 08 Jan 2013 01:29 AM PST

Im trying to appendTo() element to document. I have:

                    jQuery('<div/>', {                          id: "1",                          style: "float:right;",                            rel: data.uploadFileList[0].id,                          onmouseover: ""                                                  }.addClass("delete")                                                      ).appendTo($("[id='"+value+"']").find('#'+parameter));                            jQuery('<a/>', {                          href: url,                          rel: "lightbox"                      }).addClass("icon")                      .appendTo($("[id='"+value+"']").find('#'+parameter));  

Can I some how do it in one jQuery() ? Add two element one by one?

Jquery : Select first thee listitem of each unordered list

Posted: 08 Jan 2013 01:27 AM PST

I am new to jQuery. I want to select first three list items(li) of each unordered list (ul) in a single jquery Statement .I am using following code -

 <div>  First Unordered List  :      <ul>          <li>First Ul li1 want to select</li>          <li>First Ul li2 want to select</li>          <li>First Ul li3 want to select</li>          <li>First Ul li4</li>          <li>First Ul li5</li>          <li>First Ul li6</li>      </ul>      Second Unordered List       <ul>          <li>Second Ul li1 want to select</li>          <li>Second Ul li2 want to select</li>          <li>Second Ul li3 want to select</li>          <li>Second Ul li4</li>          <li>Second Ul li5</li>          <li>Second Ul li6</li>      </ul>  </div>  

here the unordered list could be more then two.

Thanks in advance..

Count divs with a certain class

Posted: 08 Jan 2013 01:27 AM PST

Seems pretty simple but I can't get it to work.

I have two divs with the class 'user'. I want to output "you have 2 divs".

<script type="text/javascript">      $(document).ready(function() {          function divcount() {              var mycount =  $('.user').length();               document.write(mycount)          }      });  </script>  

I'm sure I'm missing something simple..

How do I create a fade picture slideshow with jQuery?

Posted: 08 Jan 2013 01:27 AM PST

I have the following jQuery code below I am trying to use (I know it's not optimized, but I do not think that is the issue; feel free to optimize it though):

$(document).ready(function(){    var cur = 0;    function slideshow() {    $("#imgdisp").fadeOut(400);    if (cur >= 3) {      cur = 1;    } else {      cur++;    }    $("#imgdisp").empty().append("<img height='456px' width='691px' id='img' src='slideshow_home/home_"+cur+".jpg'>");      $("#imgdisp").fadeIn(400);      setTimeout(slideshow,4000);    }    slideshow();  })  

With the following HTML file:

<!DOCTYPE html>  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <script type="text/javascript" src="jscodes/slideshow.js"></script>  <link type="text/css" rel="stylesheet" href="csscodes/slideshow.css">  <div id="imgdisp">  <img height="456px" width="691px" id="img" src="slideshow_home/home_1.jpg">  </div>  </html>  

What I am trying to create is a slideshow that does the following (in order):

1) fade out current image

2) remove the current image

3) append a new image (called home_2.jpg, and it goes up to home_3.jpg)

4) fade in

5) wait four seconds to repeat with the next image

However, when I try to run this code, it appends the new image before fading out, so the image appears abruptly, fades out, then fades in, and waits four seconds before it repeats. My questions are:

1) How do I fix this code such that it changes the image while the div is faded out?

2) Is there a way to have the image fade immediately to the next image?

Thanks in advance to everyone who contributes :)

How to Arrange Table in Array to Prototype?

Posted: 08 Jan 2013 01:26 AM PST

So, I want to to modify the Array so that it displays its content in table, row by row, a single time. With the code below it displays the code progressively each element appearing more than once.

How to solve this? thx.

$(function() {    Array.prototype.ToTable=function(){    tabelul="<center><table border><tr>";    for(a=0; a<this.length;a++){    this[a]=tabelul+="<td> <div class='Expresion'>" + this[a] + "</div></td></tr>"  }      }    vaz=['one', 'two', 'three','four'];      vaz.ToTable();    $('#show').html(vaz)  })    <div id="show"></div>  

Key event doesnt trigger in Firefox on Android when word suggestion is on

Posted: 08 Jan 2013 01:25 AM PST

I have a search field that triggers an autocomplete search while typing. I have it trigger on keyup. This works perfectly in most browsers, but in Firefox on Android, this does not work. It seems like the keyup event is not triggered while typing. This only happens if word suggestions is turned on in the Android keyboard settings.

I see on Google search that the autocomplete search works there for the same setup, so it is obviously possible to do. I wonder how? Is it a special event I need to listen to for this to work?

Additionally I have tried to listen to the events change, keydown and keypress, but none is triggered.


<input type="text" id="searchField"    autocomplete="off" spellcheck="false" autocorrect="off" />  

jQuery event binding:

  $('#searchField').keyup(function (e) {      var searchValue = $(this).val();      searchApi._executeAutocomplete(searchValue);    });  

Sometimes, the key event is triggered, which is typically hitting a key that is not resulting in the process of forming a word. The most obvious here is Enter, which always triggers. Another is Space, which triggers because no word contain a space since space is the definition of a word completed. Backspace triggers if the the last character deleted was not within a word. This means it triggers if you just deleted the last remaining letter of a word (so it is the start of the field, or cursor following a space), but not if you deleted some characters at the end of a word where the cursor is still immediately following a letter. Basically, the key event is not triggered if the key press results in some kind of word suggestion from the keyboard app.

As a side note, I can say that everything works fine in Chrome on the same device.

Javascript issue maintaining history after browser refresh?

Posted: 08 Jan 2013 01:22 AM PST

var _history = new Array();  var _index=-1;  function updateHistory(shapeparam)  {      _index = _index + 1;          _history.splice(_index,_history.length);      _history.push(shapeparam);  }  

From the above code i can maintain history without refresh it is working fine. I want to make availiable the values even after refresh, please help me whether it is possible using javascript cookies.

disabled zooming when scrolling the mouse in the tooltip of scatter plot highcharts

Posted: 08 Jan 2013 01:21 AM PST

I have a scatter plot highcharts in my page, it renders very well. The problem is when I scroll the mouse within the tooltip area the chart zooming functionality is executing. I need to disabled this one. But I don't want totally to disabled the zooming of the chart since the requirements stated that it needs the chart to zoom in, to look into the dots information when there are overlapping dots. Any help on this please? Or any one has an idea how to find the zoomtype property manually using javascript? I try it to find using firebug but no to avail.

//Code sample

var data = [    [1, 1],    [2, 2],    [3, 3],    [4, 4]  ];  var chartingOptions = {    chart: {      renderTo: 'container',      zoomType: 'xy'    },    tooltip: {      useHTML: true,      shared:false,      formatter: function() { return '<div style="height:100px;width:200px;overflow:auto"><table><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr><tr><td>sdsd</td></tr></table>'}    },    series: [{      type: 'scatter',      name: 'serie',      data: data    }]  };    chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);  var chart = new Highcharts.Chart(chartingOptions);  var $tooltip = $(chart.tooltip.label.element);  $tooltip.mouseup(function (e) {    chart.tracker.selectionMarker = chart.tracker.selectionMarker.destroy();  });  

How to design an UI framework for multiple web applications with the same layout?

Posted: 08 Jan 2013 01:21 AM PST

I'm trying to design an ui framework for multiple web applications but having trouble designing the infrastructure for our situation:

  • 7 (or more) separated web applications build with asp.net mvc
  • Some web applications on internal servers, some hosted
  • All with the same basic css/images/javascript (shared components each application can use)
  • Every application has some unique css and javascript
  • Every application has its own TFS branch and solution
  • Every application has its own release management (monthly/yearly/etc.)

What I want to achieve:

  • Fix UI bugs once and not for all applications
  • Consistent UI for all applications
  • Don't bother the other developers with UI stuff

What would be a smart infrastructure?

watching the route and changing a variable in a directive's scope.

Posted: 08 Jan 2013 01:17 AM PST

I have created a directive below, which creates a set of buttons based on the data that is provided to it.

angular.module('btnbar.directive', ['messaging']).  directive("btnBar", function(){    return {      restrict: 'E',        $scope.buttons = [{href: '#/students', icon:'icon-ok'},                           {href: '#/students', icon:'icon-remove'},                           {href: '#/students/new', icon:'icon-plus'}];          },      template:'<div class="btn-toolbar">' +        '<a class="btn" ng-repeat="b in buttons" href={{b.href}}>' +        '<i class={{b.icon}}></i></a></div>',      replace:true    }  });  

The above directive works well. Every time the ng-view in the view changes, I would like to pass a new array for the buttons.

So I want to do the following 2 things -

  1. Watch for the change in the route.

  2. On change in the route, change the 'buttons' var in the 'btnbar.directive' scope.

How do I do that ?

more than 20 results in nokia map 'nokia.places.search.manager.findPlaces' function?

Posted: 08 Jan 2013 01:16 AM PST

using nokia maps "nokia.places.search.manager.findPlaces" i get upto 20 place search results. how get more results?

How to use Google Chart with data from a csv

Posted: 08 Jan 2013 01:16 AM PST

I have a csv file that looks like that:

week,value1,value2  1,2,3  2,7,9  

I would like to plot a stacked graph of it using google chart (week being my x (horizontal) values and values1 and values2 being the two set of y's). Unfortunately, I didn't find any easy way to do so. That probably relates to me being a complete noob in js.

Is there any simple way to do that?

Automatically trigging a close on lightbox_me

Posted: 08 Jan 2013 01:15 AM PST

I'm trying to use lightbox_me as a message alert but, I'm having some problems getting the element to close after a few seconds. Is this possible?

Here's my code

$('#message').lightbox_me({      centered: true,      closeSelector: "#close-message",       overlayCSS:{background: 'black', opacity: .8},      onLoad: function() {           $('#message').find('input:first').focus()          $ele.lightbox_me();          }  });  

Ended up using this after help from Dunli, thanks

// test message  $('#message').lightbox_me({      centered: true,      overlayCSS:{background: 'black', opacity: .8},      onLoad: function() {           $('#message').find('input:first').focus()          setTimeout(lightbox, 5000);          function lightbox() {              $('#message').trigger('close');          }      }     });  

No comments:

Post a Comment

Search Articles/Question