Develop Reference

Loading gif in page:failed to load resource Cordova

For some time I'm trying to develop my own app using cordova. The first page I created is the login. When the user clicks on the submit button I check the credentials by sending them using ajax. Meanwhile I want to display a loading animation,and I found how to do it:
$.mobile.loading('show')
It works..almost. It only shows a black circle on the middle of the screen. I checked the console only to find :
Failed to load resource
ajax-loader.gif (0,0)
I ran multiple test: I commented the security policy,copied the image in different folders,checked the spelling and finally created my own span with url(images/ajax-loader.gif) and ..it worked. Then I did the same thing with the original loader(I found its span in the DOM explorer) and added an inline style url(images/ajax-loader.gif)..it worked!
Finally I realised this:
It is like it tries to load the same image from two different sources. How can I fix it?
Other details:Jquery 2.0.0/Jquery-mobile 1.4.5

This is some weird behaviour still not explained-so ANYONE can post the correct reason/explanation for this- but I will post the fix.
I took a look at this post and thought to give it a try.
This is how the css looks like(I edited it in debug mode so it should be overridden) :background: url(.././images/ajax-loader.gif)
Now it works but the question IS still active.

Strange image re-size issue

I am using the Twitter Bootstrat Freelance theme (http://startbootstrap.com/templates/freelancer/) and have incorporated Own Carousel.js (http://www.owlcarousel.owlgraphic.com/demos/demos.html).
All is working well apart from whenever I click an image to view it in a modal window, it appears the wrong size - until I resize my browser window, or refresh the page, or eg press f12. It then seems to 'fix itself'.
Not sure if this is a js conflict issue or I am doing something silly (I am quite new to js). I have looked at the console and can't see any errors, I have also tried different versions of jquery and bootstrap however no difference.
I have created a jsfiddle here http://jsfiddle.net/johnny_s/34L6t/2/
If you view the jsfiddle, try click an image and once it opens in the modal window, resize the screen slightly and you will see what I mean. It somehow suddenly fixes itself.
I would appreciate any help or direction on this issue, as I am trying to create a personal project which needs to be finished quite soon :s

Need to include the following external js files.
Thanks to #Sebsemillia for the help
owl.autorefresh.js
owl.autoplay.js

Why would a website behave strange in live environment?

I have a website that behaves as expected in local environment but not while it is live (I have tried two different web servers)
I think problem is javascript related.
Link: http://tevfikiltermimarlik.com/
when you just go to that url every thing is normal. A carousel is shown.
But.
If you click "HAKKIMIZDA" (bottom) again everything is normal.
after that, if you click "ANASAYFA" (homepage) now the carousel doesn't show.
And finally, If you hit F5 everything is OK again.
Another strange problem is that:
if you click "REFERANSLARIMIZ" that loading icon ("YUKLENIYOR") never goes away as long as you dont hit F5.
Those problems are really very strange to me. What may cause these to happen?

From the theme's page on themeforest - it looks like back in March they fixed some Ajax and colorbox bugs. Maybe this was one of them. Is this site perhaps using an older version? I couldn't find the version number anywhere in the source.
http://themeforest.net/item/truestory-fullscreen-html5-template/3902394

I was looking at the live site with Firebug and noticed on styles.css li, #home-slider .slides li img line 2409 it has the property:
display:none;
When I remove that CSS the images show up as they should.

Jquery mobile loads correctly in Firefox, but not Chrome or Safari

I created a mobile site in html and jquery, but it is not loading properly in Chrome (or on an iphone). There is no backend to the site - all changes to content would happen right through editing the html. Inside of my html, I made no specific reference to ajax. And, each page links through "#pageid. The problem is that as I navigate the site, various pages do not display correctly unless I hit "refresh." URL is mobile.shorelinelake.com. I am VERY new to this, so please be patient with a newbie :) Thanks for any help!
http://mobile.shorelinelake.com (if you click through to "Lake" and then "Sailing," or "Cafe" to "Menu," you can see the problem - the page jumps after loading, cuts off the header, places content below the footer, or will entirely hide jquery elements...)

One thing I noticed right away is that your using an old version of Jquery and Jquery Mobile. There have been alot of improvements since the alpha that you are using. Also you are linking to a few files that aren't there. Phonegap.js and ajax-loader.gif for some reason are not found. In my console I see 196 warnings that I believe are all related to you using old versions.
Also you have 31 html errors. One example is here
line 88:
<a href="tel:16509657474" div data-role="button" data-theme="c" class="ui-btn-text">
You have alot of stranded </p> tags. Most of them are in the menu page. Fixing these errors is necessary to troubleshoot your problem. Try running your document through an html5 validator to find these mistakes.
I also recommend breaking this into smaller pieces. Here is my reasoning:
Easier to maintain and edit.
Keep the dom size reasonable. Jquery will remove the old pages from the dom keeping it very manageable.
Faster page loading resulting in a better user experience. Your user will probably not be going to each page. Only load what they need to see.
Bandwidth could be costing your user extra money on a mobile device.

Problem with jQuery in IE8 with Fancybox

I recently aquired an old website (we're talking tables, image maps, you name it).
I was asked to make an old link to a Flash gallery into a lightbox. I simply used a javascript: openLightbox() on the gallery link (top right corner). I know, I know, but it doesn't seem out of place on this site.
Anyway, I also include a JavaScript file scripts.js, which
Includes jQuery and CSS files for fancybox.
Use AJAX to get some JSON of image filenames
Create a hidden unordered list on the page with links to the images from JSON
Attach the fancybox method to these images
Then, on the openLightbox() I simply call the click() function on the first link.
Nice and easy, I thought. It worked like a charm in Firefox. Then my arch nemesis decided it didn't want to play ball. That's IE7/8.
I've had the IE8 Developer Tools out for a while but haven't been able to figure it out.
The only error I'm getting is "v is null or not an object" which is referencing the minified/packed jQuery code on Google's CDN. Obviously that's not the problem, so does anyone have any idea what is wrong here?
Here is a link to the page: http://edgewaterterraces.com.au/
Also...
script.js file
Thank you very much for your time.
UPDATE
Wow, it seems to work on this page. What gives?

You are embedding both jquery and script.js twice on the front page.
Once in line 12, once in line 27.