I have a js script on my blog page that scans the page, looks for special snippets similar to bb code and translates it into an image. For example, i search for all instances of [ ] and replace it with a box image, or all images of :) and replace it with a smiley.
I also have a live preview script for my comments. My problem is that in my live preview DIV, if the user uses :) or [ ] it won't turn them into images since this .js file only scans the page after it loads. Is there a jquery or javascript command I can do to have it run this script again and analyze this live preview DIV ?
cheers for any aide
The same code that updates the contents of the live preview div should also call your "replace" function. To keep things speedy, you can direct the function to scan only the contents of the live preview div, and not the whole page.
you could use setInterval to run a javascript function every x seconds and looks for things to replace, or you could check on the keyup event.
function analyzePage()
{
// do analyze page stuff here
}
$(document).ready(function()
{
// cause analyzePage(); to be called every 2000 milliseconds
setInterval(function(){ analyzePage(); }, 2000);
});
Related
I insert some HTML code after a Ajax Call and in the Ajax-Callback I need the height of the added Div.
The problem is, in the HTML from the Ajax Call are elements like Images and other elements that have to be laoded first.
I did a simple example of the problem in jsfiddle: http://jsfiddle.net/qbwd663s/3/
As you can see when I add the code the console says 36, but if you click the div it says 242 (cause the image is loaded). Sometimes it works too if the image is allready in the cache, to test it reload the page with cleared cache.
What I need is something like $(document).ready() but only the elements that got called by ajax. Anyone have an idea how I could do that?
$("div *").one("load", function() {
alert($("div").height());
});
Fiddle: http://jsfiddle.net/aravi_vel/qbwd663s/6/
Use the load function as suggested by Harry
This function will handle the other kind of elements that you have listed (iframe etc.)
Hello all have a div1 which contains many other divs2,div3.....
and i want to reload div div1 after every 13 sec but without affecting the process that we are doing on other divs process may be typing messages ,viewing image etc..
can anyone please help me with this..
this is thepiece of code that i have used yet..
the code is working fine it reloads the div1 but every time it loads i need to type the message again if i have not posted it ..and some times it scroll down too..
var auto_refresh = setInterval(
function ()
{
$('#div1').load('home.php #div1').fadeIn("slow");
}, 13000);
You can pass arguments via load, Say draft for not saved and post for saved one. Suppose $('#myContent') contains your post content then the following code can be used:
$("#myDiv").load("home.php?post="+$('#myContent').val())//send posted data
OR
$("#myDiv").load("home.php?, {draft:$('#myContent').val() })//send draft data
I have a javascript function which creates an image dynamically, then shows that image either in a div or on a separate page.
Since the image creation takes a few seconds I'd like to display a simple 'please wait' message so that the user knows something is happening, and I am doing this by replacing the contents of an initially empty div with some text.
$('#chartImage').html('Please wait...');
This works fine on it's own - the div contents are displayed immediately when the triggering link is clicked. The problem is when I add the actual image creation code after it, the 'please wait' does not show up until after the image creation is complete, and only for a split second, so it's kinda pointless.
Is there something like a flush method to make sure all actions have taken effect before continuing?
Alternatively if there is a better way to do this I'm happy to hear it...
-------------EDIT-----------------
Here is a more complete description of what I'm doing, using open flash chart to make an image:
function createChartImage(chartid)
{
$('#chartImageDiv'+chartid).html('Please wait...');
ofc = findSWF("ofc_chart_"+chartid);
x = ofc.post_image( getUploadChartURL(chartid), 'doneChartUpload', false );
setTimeout("",1000); //allow some time for upload to complete
window.location.href = getViewChartImageURL(chartid);
}
The 'please wait' appears to take effect immediately before the final line. If I change the div's contents again at that point, the 'please wait' never shows at all.
(According to the docs for the charts I'm using, the function 'doneChartUpload' should be called when the upload is complete which would remove the need for the setTimeout, but I spent a long time trying to get it working, even copying code verbatim from the page below, to no avail.)
http://teethgrinder.co.uk/open-flash-chart-2/adv-upload-image.php
From assessing your code i would definitely split it up:
function generateChartImageProcess(chartid){
displayLoader();
createChart(chartid);
}
function createChart(chartID){
ofc = findSWF("ofc_chart_"+chartid);
x = ofc.post_image( getUploadChartURL(chartid), 'doneChartUpload', false );
setTimeout("",1000); //these two lines here to be replaced by your chart generations complete process
window.location.href = getViewChartImageURL(chartid);
}
function displayLoader(){
$('#chartImageDiv'+chartid).html('Please wait...');
}
function chartGeneratedComplete(arguments){
//TODO
}
This happens because the image isn't loaded yet, and it takes some time for the browser to load it before it can be displayed.
You could try using the jquery.load() method to add a callback for the event of the image being loaded like this, (supposing the div containing the image has the id #imageContainer):
$('#imageContainer img').load(function() {
// Remove the Please wait
});
BlockUI is a good tool to use for these situations: http://jquery.malsup.com/block/. In both cases (using BlockUI or rolling your own), trigger the "waiting" code first, run your image generator, and then remove the waiting effect after the image is loaded.
I have a piece of code in jQuery that I use to get the contents of an iFrame after you click a link and once the content is completed loading. It works, but I have a problem with it repeating - at least I think that is what it is doing, but I can't figure out why or how.
jQuery JS:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
$("#fileuploadframe").load(function(){
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{action:"savePage",html:response, id: theID},
function(data){
alert(data);
});
});
});
HTML Links ( one of many ):
<a href="templates/1000/files/index.php?pg=0&preview=false"
target="fileuploadframe" class="pageSaveButton" rel="0">Home</a>
So when you click the link, the page that is linked to is opened into the iframe, then the JS fires and waits for the content to finish loading and then grabs the iframe's content and sends it to a PHP script to save to a file. I have a problem where when you click multiple links in a row to save multiple files, the content of all the previous files are overwritten with the current file you have clicked on. I have checked my PHP and am pretty positive the fault is with the JS.
I have noticed that - since I have the PHP's return value alerted - that I get multiple alert boxes. If it is the first link you have clicked on since the main page loaded - then it is fine, but when you click on a second link you get the alert for each of the previous pages you clicked on in addition to the expected alert for the current page.
I hope I have explained well, please let me know if I need to explain better - I really need help resolving this. :) (and if you think the php script is relevant, I can post it - but it only prints out the $_POST variables to let me know what page info is being sent for debugging purposes.)
Thanks ahead of time,
Key
From jQuery .load() documentation I think you need to change your script to:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
var lnk = $(this).attr("href");//LINK TO LOAD
$("#fileuploadframe").load(lnk,
function(){
//EXECUTE AFTER LOAD IS COMPLETE
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{
action:"savePage",
html:response,
id: theID
},
function(data){alert(data);}
);
});
});
As for the multiple responses, you can use something like blockui to disable any further clicks till the .post call returns.
This is because the line
$("#fileuploadframe").load(function(){
Gets executed every time you press a link. Only add the loadhandler to the iframe on document.ready.
If a user has the ability via your UI to click multiple links that trigger this function, then you are going to run into this problem no matter what since you use the single iframe. I would suggest creating an iframe per save process, that why the rendering of one will not affect the other.
i am trying to design a website in flash , and would like to know how to design a loading flash movie , something like a circle rotating till the website loads . I might not be able to explain properly , but its like when you install a software , the installation bar that you get , how to get that on a website using flash or java script?
Alright so you would need a preloader ( I am assuming you are using ActionScript 3.0). This will be a small SWF file that loads your main Flash file. Smallest implementations (like the following) are around 1-2 KB
So in your Flash IDE (Flash CS3,CS4,CS5) you want to create a new fla, lets call it preloader.fla. In this file you will want to have two layers. Name the first layer as actions and the second layer as content.
In your content layer just place a dynamic text field on the stage. Name it txt/percent or whatever you feel like... I am using txt.
In your actions layer you want select the first keyframe and open the actions (code) panel
Then you want to use the loader class to load the external file (your main flash movie) as follows
var ldr:Loader = new Loader();
To handle animations and so forth you will want to listen to the ProgressEvent. You will do this by listening to loading information within the contentLoaderInfo as follows
ldr.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, update);
So as you main file's data gets loaded this event is fired . 'update' will be the function we will call to handle the progress in data.
A next event to listen to will be for when the loading of the main file has completed and we want to display it.
ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, display);
Then we have a function display which handles the completion and displays the main file.
The last thing will be to load the content ,e.g. main.swf.
ldr.load(new URLRequest("main.swf"));
Here we will have text field just show a loading of the bytes from 0 - 100%;
function update(e:ProgressEvent):void {
var percent:Number = e.bytesLoaded / e.bytesTotal;
txt.text = Math.ceil(percent*100).toString();
}
Below is the function that removes the textfield (txt) and adds the main.swf to the display list.
function display(e:Event):void {
removeChildAt(0);
txt=null;
addChild(ldr);
}
Now you can change the txt in the content layer to something different if you want for example as you said a circle rotating...depends on how you want it displayed so I have placed some links below you can follow. Cheers.
Example 1 : [ Demo ] [ Source Code and Files ]
Example 2 : [ Demo ] [ Source Code and Files ]
If you just want a circle rotating until the website loads, please don't use flash.
You should just have an animated gif that waits for the page to load then disappears and shows the content when everything is loaded.
Animated gifs are fully supported accross browsers and will be about 1/100th of the size of the flash animation.