I need good and small plugin to show bigger image. One requirement is that images are different images, because images might be large, so if user dosen't click on image, then user doesn't have to download big image, but just smaller image.
Hello,
I would like to be able to click on an achor element from a page inside a jQuery tab and have that new page load directly inside the original tab. I used sample code from the jQuery tutorial page but to no avail!
When I click on the anchor tag, I get redirected to www.google.com but lose my tabs. Does anyone know what I'm doing wrong? would really appreciate it. Thanks!
$(document).ready(function(){
$("#tabs").tabs();
});
$('#tabs').tabs({
load: function(e, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
I am working on a pet project and am at the research stage.
Quick summary
I am trying to intercept all form submits, onclick, and every single keydown. My library of choice is either jquery, or jquery + prototypejs. I figure I can batch up the events into a queue/stack and send it back to the server in time interval batches to keep performance relatively stable.
Concerns
Form submits and change's would be relatively simple.. Something like
$("form :inputs").bind("change", function() { ... record event... });
But how to ensure I get precedence over the applications handlers as I have a habit of putting return false on a lot of my form handlers when there is a validation issue. As I understand it, that effectively stops the event in its tracks.
My project
For my smaller remote clients I will put their products onto a VPS or run it in my home data center. Currently I use a basic authentication system, given a username/password they see the website and then hopefully send me somewhat sane notes on what is broken or should be tweaked.
As a better solution, I've written a simple proxy web server that does the above but allows me to have one DNS entry and then depending on credentials it makes an internal request relaying headers and re-writing URLS as needed. Every single html/text or application/* request is compressed and shoved into a sqlite table so I can partially replay what they've done. Now I am shifting to the frontend and would like to capture clicks, keydown's, and submits on everything on the page.
Is there any tutorial on starting (not install but application start\wake up call with parameters) Adobe AIR app from browser (on button click within flash app using JS function or what ever is needed) ?
Blog articles or any other materials wanted.
Hi I would like to start by saying I'd greatly appreciate anyones help on this. I have built a small caculator to calculate the amount a consumer can save annually on energy by installing a ground heat pump or solar panels.
As far as I can tell the mathematical formulas are correct and my client verified this yesterday when I showed him the code. Two problems. The first is that the calculator is outputting ridiculously large numbers for the first result. The second problem is that the solar result is only working when there are no zeros in the fields.
Are there some quirks as to how one would write mathematical formulas in JS or jQuery?
Any help greatly appreciated. Here is the link - http://www.olliemccarthy.com/test/johncmurphy/?page_id=249
And here is the code for the entire function -
$jq(document).ready(function(){
// Energy Bill Saver
// Declare Variables
var A = ""; // Input for Oil
var B = ""; // Input for Storage Heater
var C = ""; // Input for Natural Gas
var D = ""; // Input for LPG
var E = ""; // Input for Coal
var F = ""; // Input for Wood Pellets
var G = ""; // Input for Number of Occupants
var J = "";
var K = "";
var H = "";
var I = "";
// Declare Constants
var a = "0.0816"; // Rate for Oil
var b = "0.0963"; // Rate for NightRate
var c = "0.0558"; // Rate for Gas
var d = "0.1579"; // Rate for LPG
var e = "0.121"; // Rate for Coal
var f = "0.0828"; // Rate for Pellets
var g = "0.02675"; // Rate for Heat Pump
var x = "1226.4";
// Splittin up I to avoid error
var S1 = ""; // Splitting up the calcuation for I
var S2 = ""; // Splitting up the calcuation for I
var S3 = ""; // Splitting up the calcuation for I
var S4 = ""; // Splitting up the calcuation for I
var S5 = ""; // Splitting up the calcuation for I
var S6 = ""; // Splitting up the calcuation for I
// Calculate H (Ground Sourced Heat Pump)
$jq(".es-calculate").click(function(){
$jq(".es-result-wrap").slideDown(300);
A = $jq("input.es-oil").val();
B = $jq("input.es-storage").val();
C = $jq("input.es-gas").val();
D = $jq("input.es-lpg").val();
E = $jq("input.es-coal").val();
F = $jq("input.es-pellets").val();
G = $jq("input.es-occupants").val();
J = ( A / a ) + ( B / b ) + ( C / c ) + ( D / d ) + ( E / e ) + ( F / f ) ;
H = A + B + C + D + E + F - ( J * g ) ;
K = ( G * x ) ;
if ( A !== "0" ) { S1 = ( ( ( A / a ) / J ) * K * a ) ; }
else { S1 = "0" ; }
if ( B !== "0" ) { S2 = ( ( ( B / b ) / J ) * K * b ) ; }
else { S2 = "0" ; }
if ( C !== "0" ) { S3 = ( ( ( C / c ) / J ) * K * c ) ; }
else { S3 = "0" ; }
if ( D !== "0" ) { S4 = ( ( ( D / d ) / J ) * K * d ) ; }
else { S4 = "0" ; }
if ( E !== "0" ) { S5 = ( ( ( E / e ) / J ) * K * e ) ; }
else { S5 = "0" ; }
if ( F !== "0" ) { S6 = ( ( ( F / f ) / J ) * K * f ) ; }
else { S6 = "0" ; }
I = S1 + S2 + S3 + S4 + S5 + S6 ;
if(!isNaN(H)) {$jq("span.es-result-span-h").text(H.toFixed(2));}
else{$jq("span.es-result-span-h").text('Error: Please enter numerals only');}
if(!isNaN(I)) {$jq("span.es-result-span-i").text(I.toFixed(2));}
else{$jq("span.es-result-span-i").text('Error: Please enter numerals only');}
});
});
How to make inline png transparent inside div? using css
<div id="report'>
<p> some text </p>
<img src=transparent.png" />
</p>
</div>
this is image for example . Other than ball i want to make transparent other white area. Which is looking grey in IE6
I want to do in css like this div#report img {.....} is it possible?
Edit:
I don't want to make whole image transparent.
I have jquery validator running and I the page is so long, so I want the page to scroll up to the top because I display errors on the very top of the page above the form, doesn anyone know where I can put the code for the animation so it fires when the form has errors ?
Given two DOM elements, say a and b, how can we determine which comes first in the document?
I'm implementing drag and drop for a set of elements. And the elements can be selected in any order, but when they are dragged, these elements need to be moved in the "correct" order.
I'll just go straight to the point.
Let's say we have this markup:
<span href="">Text <a href="">Link</a></span>
We have events bound to both elements. How do I make it such that when I click on the anchor tag, the event on the parent will not be triggered? I've tried using the Jquery method stopPropagation() but still no luck. Any thoughts? Thanks.
I have an associative array in JSON
var dictionary = {"cats":[1,2,37,38,40,32,33,35,39,36], "dogs", [4,5,6,3,2]};
Can I get the keys from this? I tried in Visual studio putting a breakpoint but can't see any property that represents keys. Is it not possible?
I'm fine creating a separate array if necessary, but was just hoping it wasnt :
var keys = ["cats", "dogs"];
This is the (quite simple) JS code I'm using:
$(document).ready(function() {
$(".button-list .next").click(function() {
project = $(this).parents().filter(".projektweb").eq(0);
currentimg = project.find(".images-list li.current");
nextimg = currentimg.next();
firstimg = project.find(".images-list li:first");
currentimg.removeClass("current");
if (nextimg.is("li")) nextimg.addClass("current");
else firstimg.addClass("current");
return false;
});
$(".button-list .prev").click(function() {
project = $(this).parents().filter(".projektweb").eq(0);
currentimg = project.find(".images-list li.current");
previmg = currentimg.prev();
lastimg = project.find(".images-list li:last");
currentimg.removeClass("current");
if (previmg.is("li")) previmg.addClass("current");
else lastimg.addClass("current");
return false;
});
});
And this is how the HTML code for the image list looks like:
<ul class="images-list">
<li class="current"><img src="img/1.jpg" alt="" /></li>
<li><img src="img/1b.jpg" alt="" /></li>
</ul>
<ul class="button-list"> <li><a class="button prev" href="#">?</a></li>
<li><a class="button next" href="#">?</a></li></ul>
The CSS:
.images-list {
height: 460px;
list-style-type:none;
float:left;
width: 460px;
overflow:hidden;
position:relative;
}
.images-list img {
height: 460px;
width: 460px;
display:block;
}
.images-list li {
display:none;
}
.images-list li.current {
display:block;
}
What I'd like to do is animate the images as they come and go - right now they just appear, which is OK but a bit more eye-candy would be nice.
Can anyone help me out here? It it even possible to do it this way? Thanks!!
Hello.
I have a table in the database which includes all active users. I then have a user list which needs refreshing to see who is the latest users online.
Whats the best way to tackle this?
The user list is always just who is in the active_users table.
Thanks for reading.
I have a ul list, with 10 items, and I have a label that displays the selected li text.
When I click a button, I need to check the label, versus all the list items to find the matching one, when it finds that I need to assign the corresponding number.
I.e.
list:
Messi
Cristiano
Zlatan
hidden values of list items:
www.messi.com
www.cronaldo.com
www.ibra.com
label:
Zlatan
script (thought)procces:
get label text, search list for matching string, get the value of that string.
(and if someone could point me in a direction to learn these basic(?) stuff.
tried to be as specific as possible, thanks guys!
edit:
really sorry for not being clear.
the li's are all getting a class dynamically (.listitem).
the links can be stored in an array or in a hidden field (or other ul thats hidden)
it doesn't really matter where the links are..
$('.listitem').click(function() {
$("#elname").text($(this).text());
$("#such").attr("href", $(this).attr('value'));
});
I was trying that with the li's having values but I realized that li's can't have values..
thanks again!
First I am a complete novice and need answers in plain and simple terms. I am trying to get the users manual for my Samsung galaxy s4 phone. Samsung "help" sent me a link to click but when I received it it was in Spanish tho the doc I'd said "english". The Samsung support line timed me out because I couldn't type fast enough when I told them I received it in Spanish. I explored the translator and didn't see how to translate a doc. Asked Google how to get the manual they gave a different doc I'd and sent it to clipboards. How can I read it? Now what? Tried to send this message and asking me for a tag and I have no idea what that means so I just clicked one. That's why I need the manual so desperately. It would be so much easier for me to get a paper copy of it but they want
Good evening everybody,
this is my very first question and I hope I've done my search in stack's archive at best!!!
I need to monitor several devices by querying theyr mysql database and gather some informations. Then these informations are presented to the operator in an html table.
I have wrote a php script wich loads devices from a multidimensional array, loops through the array and gather data and create the table.
The table structure is the following:
<table id="monitoring" class="rt cf">
<thead class="cf">
<tr>
<th>Device</th>
<th>Company</th>
<th>Data1</th>
<th>Data2</th>
<th>Data3</th>
<th>Data4</th>
<th>Data5</th>
<th>Data6</th>
<th>Data7</th>
<th>Data8</th>
<th>Data9</th>
</tr>
</thead>
<tbody>
<tr id="Device1">
<td>Devide 1 name</td>
<td>xx</td>
<td><img src="/path_to_images/ajax_loader.gif" width="24px" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="Device2">
<td>Devide 1 name</td>
<td>xx</td>
<td><img src="/path_to_images/ajax_loader.gif" width="24px" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="DeviceN">
<td>Devide 1 name</td>
<td>xx</td>
<td><img src="/path_to_images/ajax_loader.gif" width="24px" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
The above table is directly populated when I first load the page; then, with a very simple function, i update this table every minute without reloading the page:
<script>
var auto_refresh = setInterval(
function() {
jQuery("#monitoring").load('/overview.php').fadeIn("slow");
var UpdateTime= new Date();
var StrUpdateTime;
StrUpdateTime=
('0' + UpdateTime.getHours()).slice(-2) + ':'
+ ('0' + UpdateTime.getMinutes()).slice(-2) + ':'
+ ('0' + UpdateTime.getSeconds()).slice(-2);
jQuery("#progress").text("Updated on: " + StrUpdateTime);
}, 60000);
</script>
The above code runs in a wordpress environment.
It comes out that when devices are too much and internet connection is not that fast, the script times out, even if i dramatically increase the timeout period. So it is impossible even to load the page the first time...
Therefore I would like to change my code so that I can handle each row as a single entity, with its own refresh period. So when the user first loads the page, he sees n rows (one per device) with the ajax loader image... then an update cycle should start independently for each row, so that the user sees data gathered from each database... then ajax loader when the script is trying to retrieve data, then the gathered data once it has been collected or an error message stating that it is not possible to gather data since hour xx:yy:zz.
So rows updating should be somewhat independent from the others, like if each row updating was a single closed process. So that rows updating is not done sequentially from the first row to the last.
I hope I've sufficiently detailed my problem.
Currently I feel like I am at a dead-end.
Could someone please show me somewhere to start from?
Is there a solution for cross browser event. I need to check if user closes their window and to throw an ajax request to my database to sign them out.
I've looked everyone but most cases its not working in all browsers. Anyone have a solution? Or Alternative on how to do this perhaps a conditional statement depending on the browser?
Thanks!
HTML:
<a href="#" rel="tooltip">Open Tooltip</a>
<div id="tooltip">Tooltip Content</div>
I checked out some tooltip plugins but my requirement is a really basic tooltip that shows a hidden div on hover. All plugins either have too many advanced options that I don't require and have already styled tooltips that might be difficult to modify.
I'd appreciate any help. Thanks.
On my registration form i want to show a modal (of twitter-bootstrap) when the user has a successfull signup to tell him to check his email so i put "remote: true" on my form and render a .js.erb wich shows the modal, on my controller.
BUT, in case of inputs errors i need to render the page as html to refresh de form showing those errors.
Can I call the controller from the remote form as JS but render as html? (or any other idea to do what i want)
Thanks!
Hello All,
I have a big problem with Google Chrome and its memory. My app is displaying to user several image charts and reloads them every 10s.
In the interval i have code like that
var image = new Image();
var src = 'myurl/image'+new Date().getTime();
image.onload = function() {
document.getElementById('myimage').src = src;
image.onload = image.onabort = image.onerror = null;
}
image.src = src;
So i have no memory leaks in Firefox and IE.
Here the response headers for images
Server Apache-Coyote/1.1
Vary *
Cache-Control no-store (// I try no-cache, must-revalidate and so on here)
Content-Type image/png
Content-Length 11131
Date Mon, 31 May 2010 14:00:28 GMT
Vary * taken from here
In about:cache page there is no my cached images.
If i enable purge-memory-button for chrome (--purge-memory-button parameter) it`s not help.
Images is in PNG24.
So i think that the problem is not in cache.
May be Google Chrome is not releasing memory for old images.
Please help. Any suggestions.
Thanks.
I have a big html page, like 4000x6000 px with images and text.
I'd like to have something like a map overview of this page in a small div. A scaled version of the whole page which i could use to navigate.
Does anyone know some js script or example how to do that? Thanks.
I have a custom routing application that takes information for a route from google maps. It then creates a Google Visualizations DataTable to hold all the steps in the route.
My current problem is that in order to reduce overflow for very large routes, I have enabled paging in the options of the DataTable. This leads to a not so printer friendly version because only the portion of the data that is shown in the table will be printed. The other portions of the table are loaded dynamically by the API when you click prev and next.
Is there a not so hard way to get the DataTable to be printer friendly when it comes time without sacrificing the ability to have paging enabled?
I am developing a firefox extension and create a table and in it add a image , and I create a image with :
var _img = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "xul:image");
and then I found I couldn't set its attribute "src" with a local image just like use its Url: chrome:\...., so I have to locate it in a web url:http:\ , but a problem will arise, when the http:\ couldn't be visted, How to do? if can I set the attribute of a image with a local url? Thank you very much!