I'm using the .html() function to update information in a div whenever a button is clicked, like this:
$("#myPic").click(function() {
$("#myDiv").html("//new content for div goes here
However, for some of these new sections, the html is QUITE lengthy. can i store it on a separate file in the same directory and somehow import it?? Is there a better way?
I was looking for JQuery Grid which will help me more than 1000 - 2000 records. I mainly need search and paging .
View 1 Replies View RelatedI'm working on a project that involves a page with a large amount of images (sometimes 400+). What's the best way to handle this? Should I track the loading-state of all of them, or is it save to assume I can do stuff as soon as the last image is loaded? So.
[Code]...
What would be the danger in having a lot of hidden iframes? i.e.
potentialy 30-40. I need to store a bunch of data and thought about
using hidden iframes to do it but wasn't sure if this would bog down
my page or not. Opinions? I know this is not an IDEAL way to store
data but I'm at my whitts end and it sounds like a nice workaround
right about now!
so I'm trying to get a large amount of text back to my ASP script
on the server. My large amount of text is the source to a web page, and
I want to preserve the formatting on it, ie the indenting. Before any
of this the only way I got stuff back to the server is with query
strings. Now I'm pretty sure there's other ways to get data back to the
sever besides query stings but I'm having trouble finding them. Can
somebody point me in the right direction or tell me how?
I am using Ajax to send a large text box to a server script, however, when the textbox has a lot of data it fails. Is there a better way for me to do this? Here is my code.
Code:
<script type="text/javascript">
function testmail()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
[Code]...
I've been using localStorage to store a large amount of data (> 5mb). I know that most browsers limit localStorage to 5mb. However, on the specification site it states,
Quote:
User agents may prompt the user when quotas are reached, allowing the user to grant a site more space. This enables sites to store many user-created documents on the user's computer, for instance.
Is this available yet? If so, how would I use it?
I'm looking for a very simple image gallery solution (no lightbox or something other fance) with a large image and a x amount of thumbnails at one off the sides, where the big image change whenever another thumbnail is clicked, without page refresh. ( a fade transition would be nice)!Which Plugin, preferably as light as possible, is the most suitable for this task?
View 3 Replies View RelatedI would like to display only a certain amount of list items on a page.
View 3 Replies View RelatedI am constructing a large table on the fly and add it to the dom using html(val). It takes about 6 seconds. I am wondering if there's any practice that would speed up this process?
View 2 Replies View Related'm coming from the Java/Flex world and trying to get my mind around jQuery/HTML5 to evaluate how you would build a large scale application using them. One issue that I can't quite grasp is how to deal with HTML element IDs. My understanding is that jQuery allows you to manipulate HTML elements by referencing them by ID (there are other ways but those seem to require grabbing a list of elements and sorting through them to find the right one) In a large application with namespaced code how do you deal with dynamically created elements and the IDs the elements may contain?
For example, lets say you have a dashboard app that can contain a number of reports, each report is basically a div with the report content (a chart or table) and some associated views that can edit the report's data model. How can I assure that IDs for the report's subcomponents don't collide with IDs elsewhere in the application? I can envision some programmer working on a large project in a team naming a custom widget 'MyWidget' and then some other programmer naming their widget 'MyWidget' effectively causing two 'MyWidget' IDs to be assigned to different elements.
In the OOP world this isn't an issue because programmer one's widget is really something like MyForm.MyDiv.MyWidget and programmer two's widget is MyForm.MyOtherDiv.MyWidget allowing them to have unique names.
This could just be a fundamental misunderstanding of how things work in HTML but from what I've done every ID assignment is basically a global variable.
I've been using jquery for some time, and was very excited about the improvements in jquery 1.4 I have found however, that in one particular instance, jquery 1.4 seems to be performing slower than 1.3x, to the point that it has forced me to downgrade the script. I use jquery heavily throughout my web application; in this particular case, when a very large block of html consisting of a bunch of <tr>s is .appended (or .htmled, tried both) to a table, jquery 1.4 in firefox will give the "unresponsive script" error, prompting the user to stop, debug, or continue. The same block of html works perfectly fine in jquery 1.32 (and quite fast too). I haven't had time to do too much experimentation, as this is in a production environment, and thus downgrading was necessary as it was breaking the page, but I would love to figure out why this is happening so that I may optimize the code sometime in the near future. Have the improvements to .html resulted in code that causes higher cpu usage, or that would have a much higher overhead on longer strings? I've commented much of the code around the call, so that it pretty much consists of an ajax call that returns a chunk of html, which is inserted to a table (that I first empty). I thought it might be something with event bindings that occur after the insertion, but removal of these event bindings does not resolve the unresponsive script error. It seems the .html or .append is doing it. Note that this code, as is, works perfectly in jquery 1.3, even with event bindings, etc.
Does anyone have any ideas? My next step was going to be to try returning the entire table including the <table> tags, and doing a replace instead of an append, but if anyone has other suggestions to try, please let me know. Also, just as an aside, what do you guys consider the 'best practice' to be when returning dynamic data for a table (server side sorting, filtering etc from a db) ? Do you return just the data in json, and repeatedly clone a row element, replacing the values in each row (thus decreasing the size of the ajax call, but increasing the client side processing), or return the full html, and replace the innerHTML of the table?
I would like to create a photo page using 'rollovers' however am
finding it increasingly hard to find any information.
I would like it to display around 10 thumbnails all leading to one big
picture so when you hover over the image with the mouse it displays the
picture in big.
I have searched the net, however have only found info on 'rollovers'
for one image.
I intend to start learning JS over the Xmas holidays, but right now I only have a very basic knowledge of it.I was just wondering if someone could point me in the right direction on how to do this, as I think i should be pretty easy.After someone changes something in the admin area [e.g. the position of an item] I want to be able to have a small div display at the top of the screen saying something like "Position Updated!" and then have it fade away after 2-3 seconds.
View 1 Replies View RelatedI am using this script which allows people to add links to a page and stores them in a cookie. I am redesigning the site and need to limit the amount of links which display to 5 or less. and/or restrict the amount of future entries to 5. Code:
View 2 Replies View RelatedHow do you make a group of content show after a certain amount of time? e.g after 3 seconds.
View 2 Replies View RelatedI have a link that makes an AJAX call to display a certain amount of items in a roster.
the link is:
<a href="javascript:loadRoster('per_page=10');">Show 10 items</a>
<a href="javascript:loadRoster('per_page=20');">Show 20 items</a>
I want to be able to make these calls from a dropdown,
I am trying to make a page that could display an unlimited amount of images. I mean that I want to be able to change the amount of pictures as I want. But in the same time I want the gallery to look like a table without making a table in my html.
View 13 Replies View Relatedi want the code below to display the total loan repayment amount instead of the monthly payment payment = principle * monthly interest/(1 - (1/(1+MonthlyInterest)*Months)) , eg if if l0an is 20$ payment is in 4 months, intrest rate is 15% display = amount to be repaid.
[Code]....
My code that centers html elements fails when the html element is large. For example, I have a list of 443 items, which I break into 3 columns within a div. Therefore there are 148 lines in the div. When I use the code below to center the div, the top part of the div is beyond the top of the window screen.
function centerPopup(){
// Get data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(".popupArea").height();
var popupWidth = $(".popupArea").width();
//centering
$(".popupArea").css({ "position": "absolute", "top": Math.floor(windowHeight/2)-Math.floor(popupHeight/2), "left": Math.floor(windowWidth/2)-Math.floor(popupWidth/2) });
//only need force for IE6
$(".popupBackground").css({ "height": windowHeight });
}
I have an onclick that triggers ajax which calls a php script to pull data from MySQL. This information is then displayed in a div. The problem I am having is that sometimes pulling the data from MySQL takes 2-3 seconds, so the div is empty for about 2-3 seconds. How would I go about adding an animated "Loading" gif to display in the div while it is waiting to display the content?
[Code]...
I want to change the content of different div's using .html(). The change should be done by clicking on the inner element of the container. The content of the clicked container should be changed with the first container. My problem is, that the following code does the change, but only once. After every div has changed one time, no more reaction is shown.
<script type="text/javascript">
Via ajax, data equals <h1>Special</h1>
Code JavaScript:
function searchReplaceAndDisplay(data) {
data.replace('<','<');
data.replace('>','>');
$('#modal').append(data);
}
$.get('getSpecialsHtml.aspx', searchReplaceAndDisplay);
Right now #modal displays <h1>Special</h1>, as plain text.
How can I get #modal to display 'Special' marked up as an h1 element instead of text?
i have a <div> control whose content is changed asynchronously through a ASP.NET AJAX Request.How can i show the display of content with animation , e.g., when the content is added in that div , it should display with sliding down animation , and if contents are disappearing then a sliding up behavior should come
View 2 Replies View RelatedI have a webpage which handle a time-consuming backend processing on the server side. I am hoping to use ajax and display the back-end processing process on the web-front(i.e. in a DIV). .ajaxStart and .ajaxStop sound to be OK if I want to display some fixed content. Is it possible that I grab partial server-side resultset and update a DIV at the front-end without having to wait for the server-side to finish all of the processing.
Below is my sample code which does NOT work for my purpose.
----
<span id="processing_status" class="blink"></span>
<div id="processing_log" style="display:none"></div>
<script type="text/javascript">
/* This is OK, but I want to display server-side processing records */
[Code].....
I have divs that contain html text. What I need is when I move mouse over that div link is displayed to edit content.
I have such code:
$J('div.editable_content').mouseover(function(event) {
$J(event.target).css("border", "1px solid black");
$J('div.content_edit', event.target).show();
return true;
}).mouseout(function(event) {
$J(event.target).css("border", "0px");
setTimeout(function(){
$J('div.content_edit', event.target).hide();
}, 2000);
return true;
});
But the problem is that if I move mouse on content that is inside this div (for example image) than mouseout event is triggered. One solution would be adding this event to all elements inside that div. What selector should I use to select all elements inside div ("div.editable_content *" and "div.editable_content > *" does not seem to work for this problem)? Any better solutions how to do this without attaching events to all elements?