We Keep Coding

script written inside a page affects in another page

I have multiple pages that loads inside an div while navigate, the script written inside page 1 overlaps with the script written in page 2. Likewise the script that loaded in previous page also loads in the current page. I use load() to load an html page
i have tried remove(), off(click) but not succeed
$(document).off('click','.areaClk');
$(document).on('click','.areaClk',function(){
$(this).addClass('keyenable');
});
code in page 1 should not works in page2

well,you can use "window.location.pathname" to get the current webpage url on which your script is applying.If you dont want your script to apply for a specific page you can do something like below
//here give url where you want your script to apply
if (window.location.pathname == "localhost/mysite/page1")
{
// add script that you want to execute only for specific page
alert("applying only for page 1");
}

loading GIF image while navigating

is there any way that loading GIF image while onclick and simultaneously, navigation should happen.
i tried using jquery but loader animations are not happening while page navigates in some mobile browser, is there a solution using ajax to overcome that problem?

The best way to do is is to use AJAX to load new content. What you can do is have a button which when clicked clears the html of the initial page and reloads content for the other html page.
Lets say you have the page's HTML contents in a div called #div and there's a button called #button which when clicked takes you to the new page. What you can do now is that whenever #button is clicked, you can clear the HTML contents of the current div, load the HTML of the new page (and while it loads you can display the GIF image) and then populate the div with the HTML of the new page.
$("#button").click(function() {
//till the time the post function below doesn't return the following image will be displayed
$("#div").html('<img src = "images/ajax-loader.gif" />');
$.post("get_html.php", function (data) {
//get the new HTML content
$("#div").html(data);
});
});
This is just an example, if you are more specific in what you need, maybe I could write code suited to your needs.

Loading an external .htm file into a div with javascript

So I got this code
Javascript:
<script type="text/javascript">
$(function(){
$('.ajax') .click(function(e){
e.preventDefault()
$('#content').load( 'file.htm' )
})
})
</script>
html:
Link
it works perfectly in firefox, but nothing happens when I click the link in chrome and IE simply opens a new window with the file. any advice?

I am not a coder of any sort, and I know there is more than one way to make this work.
This is what worked for me for MY situation.
I had a working site but with A LOT of code / DIV content all in one page and I wanted to clean that up.
I hope this Helps someone else!
I have been searching for this solution for quite some time and I have run across many examples of how it can work in different instances.
My scenario was as follows:
I have a photography website that uses a series of DIV tags containing the various "pages" so to speak of the site.
These were all set as:
<div id="DivId" style="display:none"></div>
The following script in the head of the page:
$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("slow").siblings().hide("slow");
});
});
</script>
and called using the anchor links like this:
HOME
Where name was the name of the DIV to be called.
Please note the DIV will be called inside the parent container DIV.
Lastly and most importantly for this particular question and scenario, the DIV were all placed on the page as shown above.
Each div content was created just as if it were within the DIV tags but minus the opening and closing DIV tags and then saved as a separate .txt file, and called by placing this is the head of the parent page:
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js">
and
$(document).ready(function() { // this runs as soon as the page is ready (DOM is loaded)
$("#DivName") // selecting "div" (you can also select the element by its id or class like in css )
.load("PathToFile.txt");// load in the file specified
$("#AnotherDiv").load("AnotherFile.txt");// Additional DIV can be added to populate DIVs on th eparent page.
});

Change the link to href="#" or "javascript:void(0);return false;"
<a class='ajax' href='#'>...</a>
The loading logic is all in your ajax call. But, you have also a link which points to the file, too.
So, it seems that some browsers give different priorities on how the click is handled.
Anyway, links that do something other than changing page (f.ex. executing js) shouldn't have an explicit HREF attribute other than something that "does nothing" (like above)

I believe the problem is that the script loads before the document is loaded.
try this:
$(document).ready(function (){
$('.ajax').click(function(e){
e.preventDefault()
$('#content').load( 'file.htm' )
});
});
I am not sure, but i can not see any other problem.

Preloader does not preload and loads the page a second time

I found this nice jQuery preloader/progress bar, but I cannot get it to work as it is supposed to. The problem is that it first loads my page and after my whole page is loaded the 0%-100% bar displays quickly, after that it reloads my page again. So it does not show the progress bar BEFORE the page loads and it loads the page a second time as well.
Here is my implementation code:
<head>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.queryloader2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("body").queryLoader2();
});
</script>
</head>
<body>
My content...No other reference in here for the Jquery preloader
</body>
Thanks for any help in advance.

I could be very, very wrong here, but in my opinion:
The plugin is flawed.
You have some issue in your page that causes a redirect.
I have created a test fiddle and found out the following:
If there are no images on the page, then the plugin's private function completeImageLoading(); is never called because it is only bound to the image elements. When there are no images -> there's no binding -> no triggering -> nothing completes -> you stay with overlay 0% as demonstrated by the fiddle that is NOT RUN (jsfiddle doesn't see relative images when the page is not run).
The plugin doesn't take into consideration remote images. So if you declare them like so <img src="http://example.com/image.jpg"> - then it won't work because the plugin doesn't recognize them. In fact it is using $.ajax to load images which, obviously, generates a error when trying to access another domain.
The plugin doesn't reload the page (at least in Google Chrome)... check your console output while in the fiddle. It displays the message once per click on Run.
Suggestions:
Make sure you provide at least one relative or background image (though I haven't tested backgrounds...) for the plugin to work.
Show us more code. The fiddle demonstrates that the plugin does NOT cause page reload (at least in Chrome... are you using another browser?). It must be something you made that interferes here.
Specify some options for the plugin (behaves weird when there are none).
Edit regarding preloader
Regarding preloader... if displaying progress is not mandatory for you, then you can just use a window.onload trick. On DOM ready $(...) you create an opaque page overlay with a "Please wait..." message and some animation if you fancy it. Then you wait for window.onload event which "fires at the end of the document loading process... when all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading." When window.onload triggers, you just remove your overlay and voila - the page is ready!
Edit 2 regarding preloader
Actually, you don't even need $(...)... what the hell was I thinking? Just create your overlay (a simple div with a unique id) in your html, style it so that it fills the screen and give it a z-index:1337 CSS attribute so that it covers the entire page. Then, on window.onload:
window.onload = function () {
// Grab a reference to your overlay element:
var overlay = document.getElementById('myOverlay');
// Check if the overlay really exists
// and if it is really appended to the DOM,
// because if not - removeChild throws an error
if (overlay && overlay.parentNode && overlay.parentNode.nodeType === 1) {
// Remove overlay from DOM:
overlay.parentNode.removeChild(overlay);
// Now trash it to free some resources:
overlay = null;
}
};
Of course, it's not really a preloader, but simply an imitation.
Here's a working fiddle you can play with.
P.S. I personally don't appreciate preloaders, but that's just me...

Try out this(Remove the document.ready event and simply call this):-
<script type="text/javascript">
$("body").queryLoader2();
</script>

Complicated issue in breaking out of an iFrame and loading the 'return url'

I've the following issue using iframes.
I've an iFrame 'frameParent'. Inside frameParent i've a page 'parentPage.aspx' with several links in the format
http://test.aspx?pageURL=http://something.aspx?returnUrl=http://domain/parentPage.aspx
So when you click the link test.aspx gets loaded inside frameParent. Inside test.aspx i've a frame 'childFrame'. Using a JS function in test.aspx, i take the pageURL
http://something.aspx?returnUrl=http://domain/parentPage.aspx
and set it as the src for childFrame.
So something.aspx gets loaded inside 'childFrame' with returnUrl as the same parentPage.aspx.
After clicking OK or Cancel in something.aspx i return back to parentPage.aspx. But i dont want to load parentPage.aspx in childFrame (since something.aspx is in childFrame). I want to break out and load it in the parentFrame.
How can i do that?
Hope i've explained well.

loads one frame up
loads in the very top frame if there are multiple nested frames.