Skip to main content

Posts

Showing posts from January 11, 2012

FancyBox iFrame broke after Tables & Styles in IE

I'm wondering if there's any particular rules regarding using and stylizing 'fancybox' windows. I've implemented a 'fancybox' using the iFrame call - and when I just had some simple text, a background color, and an Image; it rendered great IE 6+. BUT, now that I've added a simple table with some styles for buttons within - it breaks in 6/7. Anything particular I should avoid implementing and putting inside an iFrame called .html while using fancybox supporting IE6/7? ! Update (please help me debug - here's what I have being called in the fancybox via iFrame): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style> h1 { font-famil

Send custom message from iframe guest to iframe host where host HTML from portlet

I'm trying to send a custom message from an iframe guest to an iframe host using jQuery (We are developing both guest and host). The guest and host are on the same domain but on different ports. Also, the iframe host is being rendered from a portlet within a Liferay portal instance (5.2.3) and the portal mangles the host URL of the portlet. The host and guest URLs look like: host: http://localhost:8080/host/foo/bar?p_p_id=portletname_WAR_portletname_INSTANCE_nNz9&... guest: http://localhost:8081/guest I know that trying to do this messaging violates the same origin policy enforced by browsers. To get around this I've looked at using PortHole, EasyXDM and the jquery-postmessage-plugin. The problem I have is this: For these libraries to work the sender (iframe guest) needs to know the host url but cannot know the mangled portlet host url in advance.

Open new tab in Chrome extensions

I'm trying to write a simple google extension that will upon clicking "ctrl+alt+x" search for the selected text in google. This is my mainfest: { "name": "A jQuery Chrome extension", "version": "0.1", "description": "Use jQuery to build Chrome extensions", "content_scripts": [ { "matches" : ["http://*/*"], "js": ["jquery.js", "jquery.hotkeys.js", "content.js"] } ], "background_page": "background.html", "permissions": [ "tabs" ] } And this is my content.js: $(document).bind('keydown', 'alt+ctrl+x', function() { var selectedText = window.getSelection().toString(); if (selectedText) { var googleQuery = "http://www.google.com/search?q=" + selectedText; alert(googleQuery); chrome.tabs.create({"url

How can I highlight search terms using animated color change

I have a word cloud and I want to pick a few unique pre-defined words from it and smoothly change their color. Basically I want to do this, // font color animation $(".second a").hover(function() { $(this).animate({ color: "#00eeff" }, 400); },function() { $(this).animate({ color: "#FFFFFF" }, 500); }); but instead of hover being the trigger I just want to have a setTimeout function trigger the change. How can I do that? Any help will be greatly appreciated

function is setting all instead of each

I have a simple function that sets the width of a bar based on an argument. And I call the function on .each with jQuery. The console logs the statement correctly, showing me it seems to work. However, the style seems to be overridden by the last value found. Here is the function: function barGraph(innerWidth, barWidth) { innerWidth = parseInt(innerWidth) * .01 || .50; barWidth = parseInt(barWidth) || 267; // find percentage of total width var innerWidth = Math.floor(innerWidth * barWidth); var $innerBar = $('.slider-box div'); $innerBar.css('width', innerWidth + 'px'); console.log("Width should be: " + innerWidth + 'px'); } then i call the function on each with jQuery: $(document).ready(function() { var $innerBar = $('.slider-box div'); $innerBar.each(function(index) { var newWidth = $(this).attr("data-bar-width"); barGraph(newWidth, 267); }); }); the console log shows

prettyPhoto, &ldquo;title&rdquo; and tooltips

In prettyPhoto, how can I have the photo description come from something other than "title" (added to <a> tag surrounding the <img>)? When hovering over the image, it displays ugly html on my website that I only want to be seen and displayed by prettyPhoto when it opens (hence it contains html), but not as a tooltip. One thought I had was to plug into an event but the only one relevant is changepicturecallback, and I can't figure out how to access the current photo element from that. Maybe it's something in jQuery itself but I'm a little lost as to where to find it. Any idea would help. Thanks, Igor

jQueryUi tabs loaded dynamically in jQueryUi dialog don&#39;t work

I am having a Ruby and Rails application. I am loading a form using Ajax. The form is an existing rails view. The form in turn contains jQueryUi tabs. Unfortunately the tabs are not shown when the form is loaded in the jQuery dialog box. Here is the code for the dialogbox $('#create_candidate').click( function(e) { var url = $(this).attr('href').replace('?','.js?'); var new_candidate_dlg = $('<div id="new_candidate_dlg">Loading form ...</div>'); new_candidate_dlg.load(url); new_candidate_dlg.dialog({ autoOpen:false, width: 'auto', height: 'auto', modal: true, close: function() { $('new_candidate_dlg').remove(); }, open: function() { $('#tabs').tabs(); } }); new_candidate_dlg.dialog('open'); e.preventDefault(); }); Strangely, If I change the code like following, the tabs do appear bu

Validate field, select or checkbox without form tag

Good day, I found a lot of topics about that, but, without a proper answer. Many of topics ended with question why you just can't add form? I'm working on a project that based on ASP.NET and I have one form tag, one form tag that contains all the html code inside it. I can't use any ASP.NET controls and must done validation by front-end (jQuery). Everything is fine when there is only one form and one submit button, then I can use simple query validation plugin, but it gets complicated when I have more than one form and of course more than one submit button. Any suggestion, ideas or real example how to do that? Maybe I can somehow put every field and submit button inside a div and validate them by submit within that div? Thank you!

Why doesn&#39;t JQuery consolidate its constants?

All my constants are near the top of my javascript file like below. When I search the core JQuery file, nothing comes up for Constant and I can't see that they are pulling out constants? Do they not have any, do they have them spread out throught the code, if so, why don't they consolidate them? I'm not concerned about the language construct const but the concept of pulling out your constants into one place like below. var Arc = ( function ( window, undefined ) { var Constant = { /** * Code Configuration */ VALIDATE_ON: 1, JSON_ON: 0, /** * Paths Configuration */ ROOT: '', PICTURES: '../pictures/', TEXT: '../text/', FAVICON: '../images/logo_small.ico', IMAGES: 

How to make background images clickable (javascript or css)

Please take a look this fiddle How to make the background image clickable? When click "Take the survey" will go to a new page. <div style="height:300px;width:300px;border-style:solid;border-width:5px;background-image:url('http://cdn.survey.io/embed/1.0/right_top_blue.png'); background-repeat:no-repeat;background-position:right top;"> By default, the background-image property repeats an image both horizontally and vertically. </div> Javascript or CSS are all preferred. Edit: I don't want to use image float to right corner.

Html5 canvas and jquery

I have created a triangle using canvas but i was wondering if there was a way to change the fillStyle color on mouseover as if it were a div and jquery. var context = document.getElementById("canvasId").getContext("2d"); var width = 150; var height = 105; context.beginPath(); context.moveTo(75, 0); context.lineTo(150, 105); context.lineTo(0, 105); context.closePath(); context.fillStyle = "#ffc821"; context.fill(); Thank you for the support

How to activate setInterval() incase a text control has the focus

Actually I have an update enquery into this point . I have smth like that : $(document).ready(function() { setInterval(doSmth, 10000); function doSmth() { var result = document.getElementById("fooText").value; if (result != "") { doSmthElse(result); } }); } } }); I need to activate the interval ,that is fired each 10 seconds, in case only a text control has the focus else do nothing !!

load img only when popup appear

First, I'm pretty beginner of jQuery or AJAX. I've got around 50+ links on a web page and each link has a div#popup which contain a table and a img. It means around 50 pictures are loading when the page loads and it slower the site quite a bit. So I would like to know if there a way to to load the picture only when mouseover the link?\ Here is the code and script I'm using. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery Popup Div on hover Test</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { var moveLeft = 20; var moveDown = 10; $('a#trigger').hover(function(e) { $('div#pop-up').show(); }, function() { $('div#pop-up').hide(); }); $('a#t

One jQuery Instance, Two Domains

I have two pages: a.example.com and b.example.com a.example.com includes jQuery a.example.com contains an iframe pointing to b.example.com both pages have document.domain set to the same parent domain, example.com How can I use the jQuery include from a.example.com to call $.ajax({ url: " b.example.com " }) from inside the b.example.com iframe? In other words: Both pages can currently access the Javascript of one another, but I can not get the AJAX call to function without throwing XSS errors. That is, without including jQuery on b.example.com too. How do I avoid including jQuery twice? Example of the contents of the iframe: <script> document.domain = "example.com"; function proxyAjax() { var jQueryParent = parent.$.sub(); // Chrome gives error: XMLHttpRequest cannot load http://b.example.com/. Origin http://a.example.com/ is not allowed by Access-Control-Allow-Origin. jQueryParent.ajax({ url : "http://b.example.com/&quo

Image manipulation in canvas

I have a number of images within #mycontainer like: <div id="mycontainer"> <img src="http://localhost:8080/images/my-image.png" /> … </div> I need to convert those into B/W. Pretty common task but I didn't find any solution for this that would just work for me — there is some problem with the actions execution. What I have now is the following: function grayscale(src) { var ctx = document.createElement('canvas').getContext('2d'), imgObj = new Image(), pixels, i, n, gs, url; // wait until the image has been loaded imgObj.onload = function () { ctx.canvas.width = this.width; ctx.canvas.height = this.height; ctx.drawImage(this, 0, 0); pixels = ctx.getImageData(0, 0, this.width, this.height); for (i = 0, n = pixels.data.length; i < n; i += 4) { gs = pixels.data[i] * 0.3 + pixels.data[i+1] * 0.59 + pixels.data[i+2] * 0.11; pixe

JQuery Custom Image Checkbox code not toggling

I am using the following code to make a custom checkbox with my own images. First I included JQuery and added the JQuery code for the required functionality: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("#moreinfo").change(function() { if(this.checked) { $(this).prev().attr("src", "checkbox_unchecked.gif"); } else { $(this).prev().attr("src", "checkbox_checked.gif"); } }); }); </script> Next...here's the HTML: <label for="moreinfo"> <img src="checkbox_unchecked.gif"/> <input name="moreinfo" type="checkbox" id="moreinfo" style="display:none"> </label> The unchecked image is there but when I click on it, it doesn't change/toggle. I'm I missing someth

Change Image onClick Within DIV?

I have a jsFiddle setup to where you will be able to click on the image to the left and when you do it changes the image, but when you click on the DIV as an entirety (expand-one) it does not swap the image out. I want to be able to click on a DIV (as a whole) and swap out an image that is within the DIV without having only being able to click on just the image. You can view what I mean here: http://jsfiddle.net/5PDV5/1/ Thank you all! :)

how to create vertical table heading text with html5 canvas?

Does anyone know if it's possible to create vertical text in a html5 canvas and then have the canvas resize to the content? I've seen posts about adding text and rotating it but don't know how to have the canvas resize automatically to it afterwards. Here is a link to a page with one of the tables: here I basically want to replace the top headings with vertical text in different canvases. The team names need to be dynamic and I'd rather not have them generated as jpg's. Thanks!

Using bootstrap-modal as Backbone.js view

I am attempting to create a Backbone.js view based on a Twitter bootstrap-modal, which makes use of Backbone's automatic event delegation via the events attribute of the view. Unfortunately, bootstrap-modal seems to break Backbone's event delegation as it clones the view HTML before displaying the modal: that.$element .appendTo(document.body) .show() My view: App.Views.ProjectsNav ||= {} class App.Views.ProjectsNav.NewProjectView extends Backbone.View events: { 'click .save': 'save', 'shown': 'shown' } save: (e) -> ... false shown: () -> App.Helpers.Forms.setFocus($(@el), true) false render: () -> $(@el).html(ich.nav_edit_project_template(@model.toJSON())) @$('.modal').modal({'show': true, 'keyboard': true, 'backdrop': true}) @ The corresponding (Mustache) HTML template: <div class="modal hide" style="display: none;

Is it possible to insert in-line javascript code into another javascript/jquery code?

This question looks a little dumb... but I am wondering if is it possible to insert in-line javascript code into another javascript code. Lets put this clear: I'm trying to put a google plus button, appending it through jquery as follows: jQuery('.gplus').append('<g:plusone annotation="inline"></g:plusone>'); This button needs external js in order to work properly. What i'm trying to do is insert the external js doing this: var gplusjs = ' <script type="text/javascript"> (function() {var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })(); </script>'; jQuery('#js').append(gplusjs); The result of this is the code printed as HTML, but not interpreted as a script. This

Canvas Coordinates have offset

I just started with fabric.js and I have a (probably beginner) error: I am using fabric with jquery with the following code: $(document).ready(function () { canvas = new fabric.StaticCanvas('scroller'); canvas.add( new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' }) ); }); This code should draw a 140x100 Rectangle on the canvas. Sadly, only a quarter of the Rectangle appears. If I change the top and left values to higher numbers, more of the Rectangle appears on the canvas. So it seems, that the canvas origin is not at 0/0, but at sth. higher. Does someone know how to fix this or what I am doing wrong? Thanks in advance, McFarlane

Mysterious &#39;function&#39; being attached to array

I have the following code: // button sets var sets = ['.diamond-colour','.diamond-cut','.diamond-clarity','.diamond-certificate']; // for each set for (set in sets){ console.log('Set: '+set); console.log(sets[set]); } The console log shows: Set: 0 .diamond-colour Set: 1 .diamond-cut Set: 2 .diamond-clarity Set: 3 .diamond-certificate Set: findIndex function (value){ var ctr = ""; for (var i=0; i < this.length; i++) { if (this[i] == value) { return i; } } return ctr; } It appears to be a new array element with the key of findIndex and a value being that function. Would anyone have any idea what this is and why it's appearing?

how to avoid errors with system resources when creating a file in javascript

I am getting this error: 0x800705aa (Insufficient system resources exist to complete the requested service. When I run the following code using the variable rawString which is coming in as a very long st var fso = new ActiveXObject("Scripting.FileSystemObject"); var s = fso.CreateTextFile(sWIPDirectory + day + "_" + company.split(" ").join("_").split(":").join("") + "_" + type + "_" + cid + ".smtp", true); s.writeline(rawString); s.Close(); Is there a more efficient way to create a file with this long string?

How to display Google map for city

I am trying to display a Google map when a user searches for a city and presses the search button but I am not getting how to do it properly. Here is my code done so far. Not getting how to take user input and check that city is in array; if yes, then display it on Google map. For example, if user types city name Houston, USA then it should display on Google map after checking if city name is in our database. Script: function searchResult(cityname) { var namesOfCity = ["houston,boston,newyork,florida"]; //check the user input //if match display it on google map } function initialize() { if(GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.setUIToDefault(); } } HTML <body onload="initialize()" onunload="GUnload()"> <input type="text" id="cityname" value="

Newer alternative or newer version of Fancyupload?

I'm in need of a mootools upload widget. It seems that Fancyupload is still at the top of most recommendations and searches for this category. However, the project appears to have been left untouched for at least a few years, and it seems to be non-functional in IE9, and is optimized for mootools 1.2. I've also tried swfupload, but it's less polished and seems less active than fancyupload. Are there newer tools that provide similar functionality? Any recommendations?

Using jQuery and Google Visualization API

I am using Google Visualization API and jQuery. When I include both scripts as well as my js script ( report.js ) in the head, the page show nothing, even if report.js is empty. But if I remove the last line, it is ok. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="report.js"></script> When I using "inspect" to check the source, I find the head is totally messy: What is the problem here?

Display hidden form field based on select box choice

Here is a form element I have. <select id="state" name="state" style="width: 212px;"> <option value="nsw">New South Wales</option> <option value="qld">Queensland</option> <option value="vic">Victoria</option> <option value="nt">Northern Territory</option> <option value="tas">Tasmania</option> <option value="sa">South Australia</option> <option value="wa">Western Australia</option> <option value="act">Australian Capital Territory</option> <option value="notinoz">Not in Australia</option> </select> What I want to do is below this add another select box element , if user chooses "not in Australia" in the options above. I am really after the cleanest lightest code possbile. I am presuming we create a div and set visibility:hidden just no

How can you control window focus in Firefox?

I'm trying to open a pop-up window but keep the opener window in focus. This is pretty easy in everything except Firefox. This will suffice for most browsers: window.open('gets-opened.html', '', 'width=600,height=400,status=0,scrollbars=1,toolbar=1,menubar=1,resizable=1,location=1'); window.focus(); In Firefox, the opened window maintains focus. I realize that there is a setting for Firefox to allow JavaScript to "raise or lower" windows and that this is disabled by default. I have seen sites that are able to get around this, though. Kayak is one example. When you select other providers to compare against from their search, the new windows go behind the main window, even with "raise or lower" windows disabled. How are they getting around this? I realize that this is a security measure to prevent annoying pop-unders, but it seems odd that, from a pop-up window opened on the same domain, I can change the HTML in the opener window

AJAX MySQL Polling

I was wondering if someone could help me develop an AJAX/javascript script that will run a PHP script once every 5 minutes sending. This script runs sql query against a mysql table to see if a specific field is 0 or not. if it is not 0, i need it to return to the ajax/javascript function and change the titlebar of the browser with the number.

How come this JQuery code returns nothing?

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script> var newvalue = '<img class="youtube_replace youtube_canvas" data-code="Wn-_MyJV37E" src="http://img.youtube.com/vi/Wn-_MyJV37E/0.jpg" />'; var abc = $('<div>' + newvalue + '</div>').find('*').each(function() { }).html(); alert(abc); </script> I want abc to equal "newvalue". But in my current code, abc is empty. Why? This is what I truly want to do, but for example purposes, I left this blank above: var whitelist = ['a','div','img', 'span']; var abc = $('<div>' + newvalue + '</div>').find('*').each(function() { if($.inArray(this.nodeName.toLowerCase(), whitelist)==-1) { $(this).remove(); } }).html(); //abc is now sanitized!!!

Check a value from Array in javascript?

I have a: var pageURL = location.href; // stores the URL of the current page in the var pageURL And I have : var Page = Array (); page [0] = "http://web1.com" page [1] = "http://web2.com" page [2] = "http://web3.com" Now I want to make a function (called nextPage) to check which one of these pages in the array equals the PageURL. Also I need to have a button, so when I click it it will take me to the next page. What that mean I want to increment the page by 1.

I can not get result after calling JavaScript function

I am working with Javascript StopWatch in C# web Aplication. But I don't get output from javascript. Below is my code. <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script type="text/javascript" language="JavaScript"> var state = 0; function startstop() { if (state == 0) { state = 1; then = new Date(); then.setTime(then.getTime() - ms); } else { state = 0; now = new Date(); ms = now.getTime() - then.getTime(); document.stpw.time.value = ms; } } function swreset() { state = 0; ms = 0; document.stpw.time.value = ms; } function display() { setTimeout("display();", 5

Grey boxes appear in parts of embedded Google Map in modal box

I'm having a problem with embedding a Google Map via the v3 API in a modal box. Grey boxes appear in the map canvas when the modal is shown. Resizing the browser window, bringing up Web Inspector, etc. makes all map tiles visible, i.e. it "force re-render" the map. The parent element of the map element ( section#map-modal , see code below) has display: none set in its CSS on page load. The JS modal code automatically sets display: block when the show button is clicked. If I temporarily remove display: none from the modal element, the map renders correctly on page refresh. Isn't the Google Map liking having a hidden parent element? I'm using Twitter's Bootstrap modal jQuery plugin, and am controlling the modal itself with CSS. It's fixed positioned, have a pixel width, etc. Nothing unusual. I've of course googled around for solutions, and many points to the Google API method of triggering the resize event: google.maps.event.trigger(map,

jquery match element based on id

I'm a noob to jquery. Stuck and would appreciate some help. Currently building a tool to grab data from a particular page. The page looks like this: <table width="100%" border="0" align="center" cellpadding="3" cellspacing="1"> <tbody> //This is data group 1 <tr id="parent0"> //Record 1 <td align="left"> <---------- text1 here -------> </td> <td align="left"> <---------- text2 here -------> </td> <td align="left"> <---------- text3 here -------> </td> </tr> <tr id="parent0"> //Record 2 <td align="left"> <---------- text1 here -------> </td> <td align="left"> <---------- text2 here -------> </td> <td align="left"> <---------- text3 here -------> </td> </tr> </tb

Cross Language Variables - Implementation

Certain Variables I use acrross Javascript and PHP, for example JSON_ON. I need it set to either 1 on both sides or 0 on both sides...this sets encoding and decoding of structured data. One way I could implment this is to just have PHP open up the .js file and read the variable. Is this done? Are there better ways to implement variables across languages? I only want to have to set the variable in one place, in this case the .js File.

Problems with Accessing Attributes from a Backbone.js Model

I have a JSON File looking like this: JSON : { "clefs": [ {"title": "..", "path": ".."}, ... , {"title": "..", "path": ".."} ], .... "rests": [ {"title": "..", "path": ".."}, ... , {"title": "..", "path": ".."} ] } This is a nested JSON, right? So I try to convert that into Model/Collections nested into Backbone.js like this: Backbone.js : window.initModel = Backbone.Model.extend({ defaults: { "title": "", "path": "" } }); window.CustomCollection = Backbone.Collection.extend({ model: initModel }); window.Init = Backbone.Model.extend({ url : function(){ return "/api/data.json" }, parse: function(response) { clefs = new CustomCollection();

JSON data is not parsed?

I followed the advice here on how to use JSON. After using $resultAml = json_encode($resultArray); in PHP I get this at the client: [{"id":"1","0":"1","title":"Facebook","1":"Facebook","url":"http://facebook.com","2":"http://facebook.com","domain":"facebook.com","3":"facebook.com","tag":"","4":""},{"id":"1","0":"1","title":"Ideeli","1":"Ideeli","url":"http://www.ideeli.com","2":"http://www.ideeli.com","domain":"ideeli.com","3":"ideeli.com","tag":"web","4":"web"},{"id":"1","0":"1","title":"Kikin","1":"Kikin"

# character in url of jquery mobile page

Why is it that when I visit my jQuery mobile page, lets say page.php it shows up fine, but when I visit the same page page.php#someDetailsHere it just shows a white page? And how can I fix this? I use a third party app that redirects to my webpage with the # added to the url..

Magento Best Way to Call Modalbox After Item is Added to Cart

I'm looking for a way to call a Modalbox (http://okonet.ru/projects/modalbox/index.html) after a customer has added an item to a cart... How do you call a Modalbox from within php? I was thinking of calling the modalbox after the success message in the CartController.php, however, I don't know how to do this from PHP, only from an HTML link with OnClick.

Restarting from beginning after clearInterval

link to test site I want to restart the animation from the beginning once it stops at the last image. I tried the code below but it won't return to the first image. $(document).ready(function () { window.setInterval("slideshow()", 3000); }); function slideshow() { var time = window.setInterval("slideshow()", 3000); next = $(".next"); inside = parseInt($(".inside").css("left")); if (inside == -3080) { window.clearInterval(time); inside == 0; } else { next.trigger("click"); } }

viewport scale doesn&#39;t work after orientation change

I use the following function to rescale my viewport on iPad: function rescale(scale){ var headElements = document.getElementsByTagName("meta"); for(var i = 0; i< headElements.length; i++){ var theElement = headElements[i]; if(theElement.name == "viewport"){ theElement.content = "width=device-width, user-scalable=no, initial-scale=" + scale + ", maximum-scale=" + scale + ";"; } } } This works an unlimited number of times (in either portrait or landscape orientation), until I change the orientation of the device, when it ceases to work until i reload the page. Is this a bug in iOS, or are there any workarounds?

Change Image onClick Within DIV?

I have a jsFiddle setup to where you will be able to click on the image to the left and when you do it changes the image, but when you click on the DIV as an entirety (expand-one) it does not swap the image out. I want to be able to click on a DIV (as a whole) and swap out an image that is within the DIV without having only being able to click on just the image. You can view what I mean here: http://jsfiddle.net/5PDV5/1/ Thank you all! :)

how to create vertical table heading text with html5 canvas?

Does anyone know if it's possible to create vertical text in a html5 canvas and then have the canvas resize to the content? I've seen posts about adding text and rotating it but don't know how to have the canvas resize automatically to it afterwards. Here is a link to a page with one of the tables: here I basically want to replace the top headings with vertical text in different canvases. The team names need to be dynamic and I'd rather not have them generated as jpg's. Thanks!

javasript Is there a limit to else if statements

I am getting value from a text field. I have one if and several else if statement. The problem the last else if doesn't execute even if the condition is true. If I change the last else if to if it executes and gives alert. When i change that back to else if the statement doesn't execute. The else if before that is fine as it's firing/executing on a particular condition. function Valcheck() { var txtVal = document.getElementById("sometextField").value; if(txtVal =="%") { alert("% is only allowed with other characters."); return; } else if(txtVal.indexOf("%") != -1) { if((txtVal.indexOf('%')) != (txtVal.length-1)) { alert(" % is only allowed at the end."); return; } } else if(txtVal.indexOf(",") != -1) { alert("Comma or comma separated values are not allowed."); return; }

Using bootstrap-modal as Backbone.js view

I am attempting to create a Backbone.js view based on a Twitter bootstrap-modal, which makes use of Backbone's automatic event delegation via the events attribute of the view. Unfortunately, bootstrap-modal seems to break Backbone's event delegation as it clones the view HTML before displaying the modal: that.$element .appendTo(document.body) .show() My view: App.Views.ProjectsNav ||= {} class App.Views.ProjectsNav.NewProjectView extends Backbone.View events: { 'click .save': 'save', 'shown': 'shown' } save: (e) -> ... false shown: () -> App.Helpers.Forms.setFocus($(@el), true) false render: () -> $(@el).html(ich.nav_edit_project_template(@model.toJSON())) @$('.modal').modal({'show': true, 'keyboard': true, 'backdrop': true}) @ The corresponding (Mustache) HTML template: <div class="modal hide" style="display: none;