Skip to main content

Posts

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