why javascript works on my website, but not locally - javascript

I have a JavaScript code that I got from the site: http://www.micahcarrick.com/change-image-with-jquery.html I only modified the name of the images as to use .png files I have. The issue is if I open this in a web browser locally, then when I click on one of thumbnails called django.gif I am directed to the actual image rather then the new image replacing the other. However, if I put this .html script on a Godaddy.com website and go to it with the same web browser it does work correctly just like the original site: http://www.micahcarrick.com/code/jquery-image-swap/index.html . I notice that at the site I got this code from the author mentions that "The thumbnails are links to full size versions of the images. If a user does not have JavaScript, the links still go to the large image." Does this mean I don't have Java Script? I can run other simple JavaScript codes locally. Why does this work when I put it on a site, but does not work when testing locally, even when using the exact same web browser? Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example: Change Image with jQuery</title>
<style type="text/css">
body { width: 600px; margin: auto; }
#imageWrap {
width: 640px;
height: 420px;
background: url('ajax-loader.gif') center center no-repeat;
}
</style>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
</head>
<body>
<h1>Example: Change Image with jQuery</h1>
<p>
Main image is replaced using jQuery when a thumbnail is clicked. See full
description at <a
href="http://www.micahcarrick.com/change-image-with-jquery.html">Change
Image with jQuery</a>
</p>
<a href="bidu.png" class="thumbnail"><img src="django.gif"
alt="Image 1"/></a>
<a href="athex.png" class="thumbnail"><img src="django.gif"
alt="Thumbnail 2"/></a>
<div id="imageWrap">
<img src="bidu.png" alt="Main Image" id="mainImage"/>
</div>
</body>
</html>
Thank you,
Tom

This line right here is what's causing your issues:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
The "//" before the URL tells the browser to use the same protocol as the page is, and when running locally, the protocol is going to be "file:" which the browser will use to look into your local drive to find the jquery library (which it won't find, thus breaking the page). To fix this, prepend "http:" or "https:" to the URL so it looks like
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

I see two problems.
1. Your script tag src attribute for jQuery will not locate the correct resource. Running locally, this syntax (//ajax...) will resolve as file:///ajax.googleapis.com/..., which is not where jQuery is. Try putting a http:// or https:// in front of it.
2. You're using a deprecated jQuery function. .live() is not in version 1.6.2 - you need to use .on() instead, like so:
$(".thumbnail").on("click",function() { ... });
That should work.
Hope this helps.

change the src of the script tag to include the http: protocol
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"

Related

curl: How to fix "Please turn JavaScript on and reload the page"

When I am using curl in order to retrieve a html page, I face with the following message:
Please turn JavaScript on and reload the page.
I am not sure how to handle this, hence I can open the same page on my web-browser.
[Q] How could I fix this in order retrieve html-page's information only using terminal?
$ curl http://bsod.pw/
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("recaptcha-form").submit();
}
</script>
</head>
<body>
<div id="recaptcha-loading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; z-index: 30001; opacity: 0.8;">
<p style="position: absolute; color: White; top: 30%; left: 40%;">
<img src="https://250410.selcdn.ru/antiddos/lg.rotating-balls-spinner.gif">
</p>
</div>
<center><noscript><h1 style="text-align:center;color:red;"><strong>Please turn JavaScript on and reload the page.</strong></h1></noscript>
<form id='recaptcha-form' action="/captcha" method="POST">
<button id='submitbutton' style="visibility:hidden;" class="g-recaptcha" data-badge=bottomright data-sitekey="6LcigjgUAAAAACyu9edrmWKmIce8h0kIFQz7iyRo" data-callback='onSubmit'></button>
<script>
window.onload = function(){
document.getElementById('submitbutton').click();
}
</script>
<br/>
</form>
</center>
</body>
</html>
If you do inspect element on the site(http://bsod.pw/) you can see that more detailed html code.
Thank you for your valuable time and help.
There is no "error". You make a GET request using curl. It returns you some HTML. The HTML happens to contain mostly links to JavaScript code that your browser is supposed to load and to execute. Your browser (with JS activated) could load the .js scripts and run them. Those scripts would generate some neat web page. If you don't load the linked scripts, and do not execute them, then you don't get much out of the page. Consider using a proper headless browser instead (see example below).
Here is a small example that is supposed to demonstrate the point:
<!DOCTYPE html>
<html>
<head>
<title>Source code empty, page full!</title>
</head>
<body>
<div id="fillThis">
<p>Almost nothing there in the source code!</p>
<p>... but inspect this div after JS is executed.</p>
</div>
<script>
var fillThis = document.getElementById("fillThis");
for (i = 0; i<1000; i++) {
var child = document.createElement('p');
child.innerHTML = "tons of content " + i;
fillThis.appendChild(child);
}
</script>
</body>
</html>
Just save this as "something.html", and open it in the browser. When you ask you browser to show page source, this is exactly what you will get. However, when you inspect the div by right-clicking on it, it will show a that it has >1000 child elements appended to it. Those are generated by JS in your browser, they do not come from the server in form of HTML.
Edit
I tried to access the page using PhantomJS, it almost worked. Here is what I did:
#!/bin/bash
cat <<HereDoc > /tmp/phantomjsScript.js
var page = require('webpage').create();
page.open('http://example.com', function(status) {
if(status === "success") {
console.log(page.frameContent);
}
phantom.exit();
});
HereDoc
phantomjs /tmp/phantomjsScript.js
This is a bash script that generates a helper script in /tmp, which is then executed by phantomjs. PhantomJS loads the website, and also executes the JavaScript. Unfortunately, the website that you've linked to is protected by a captcha-mechanism, and is not directly accessible, so the above example uses example.com instead. If you can somehow work around the captcha, you probably can use a similar script to load the HTML, run the JS, and then dump the rendered DOM to the console.
Try running the code on chrome. Actually the error is due to captcha connection and the error says "Cannot contact reCAPTCHA. Check your connection and try again."

HTML to word converting using javascript

I am trying to convert HTML to word (.docx) by using JavaScript. I am using this http://www.jqueryscript.net/other/Export-Html-To-Word-Document-With-Images-Using-jQuery-Word-Export-Plugin.html plug-in for conversion. But this one is just converting every thing inside the HTML file. i mean with head tag all elements even with some content inside. output file looks like this
Mime-Version: 1.0 Content-Base:
file:///home/userprofile/JsWs/sample.html Content-Type:
Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html"
--NEXT.ITEM-BOUNDARY Content-Type: text/html; charset="utf-8" Content-Location: file:///home/userprofile/JsWs/sample.html
<p>this is going to be paragraph </p>
</body></html>
--NEXT.ITEM-BOUNDARY--
and my html is
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="FileSaver.js"></script>
<script src="jquery.wordexport.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("a.word-export").click(function(event) {
$("#export-content").wordExport();
});
});
</script>
<div id="export-content">
<p>this is going to be paragraph </p>
</div>
<a class="word-export" href="javascript:void(0)"> Export as .doc </a>
</body>
</html>
Help me out how can i convert content of HTML in word.
I don't believe this will open in Microsoft Word consistently on all devices. I've actually been working on a similar project googoose. It is meant to convert html to word documents as well. This does work for me on both my desktop and mobile phone version of Microsoft Word.
From my testing, Word will have problems with MIME header, and also the fact that there are no html, body tags, etc.
You should look into this project if you're still trying to do this. It should be supported for some time, as there's also a Wordpress Plugin that uses googoose, which is linked to on the readme. The default action is to download the document on page load, but you can set it to be run onClick. For example,
Just include jquery and this plugin.
<script type="text/javascript" src="http://github.com/aadel112/googoose/jquery.googoose.js"></script>
Then to invoke onClick
jQuery(document).ready(function($) {
$("a.word-export").click(function(event) {
$(document).googoose({
area: '#export-content'
});
});
});
With googoose you can include a table of contents, header, footer, automatic page numbering, etc. You can open the document up in Print view, set the margins, and page size. It's way more configurable than the referenced script, which is not configurable at all.
Try this,
function ConvertToHtml()
{
var div = document.createElement("div");
div.id = "export-content";
div.innerHTML = "<p>this is going to be paragraph </p>";
document.body.appendChild(div);
$("#export-content").wordExport();
}

Running jquery on desktop HTML doc

I'm looking to make a very basic html doc that shows an image (or multiple images) and when I click on the image, it hides the image. I can achieve this using jquery. It works in jsfiddle but for some reason will not work when I just click on the html doc on my desktop and launch it in the browser that way. What am I missing? Here is the exact code as I have it in my html doc:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<img id="book" src="C:\Users\user123\Desktop\homeButton.png" alt="" width="100" height="123">
<script>
$(document).ready(function(){
$( "#book" ).click(function( event ) {
event.preventDefault();
$( this ).hide();
});
});
</script>
</body>
</html>
And here is a link to the working jsfiddle:
http://jsfiddle.net/pLXGu/
When I launch the html doc on my desktop, it takes a long time to load the image (15-20 sec) and when I click the image nothing happens (supposed to hide the image on click).
Local documents have no protocol, so you need to supply one for jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>‌​
try
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
When you start a URL with //, browser will try to retrieve the resource using the protocol that is currently being used. So if your URL was //ajax.googleapis.com/...,
when the main document is online (aka document retrieved using HTTP protocol), it will become http://ajax.googleapis.com/...
But in the desktop, you are using the file:// protocol. So it becomes file://ajax.googleapis.com/.... And that does not refer to any filesystem location.
To remedy this, have your link use the full URL including the protocol name.
<script src="http://ajax.googleapis.com/...">
JQuery librery URL must be give it as
https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
instead of
//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

HTML not linking scripts or stylesheets

I'm trying to link jquery and a css file to some HTML and I'm having no luck. The CSS for the page is not styling anything in my browser (Chrome). Also, I've tried putting the script tags in the body and the head (I know this is bad style, I just wanted to try) and I've got console.log()s in my script that aren't logging anything so I know they aren't being linked properly. Can anyone tell me why this isn't behaving?
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="WLE.css">
<title>w/Way Less Effort</title>
</head>
<body>
<img id="logo" src="WLE.jpg">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
console.log("pre-fade");
$(document).ready(function() {
console.log("fading out");
$("#logo").fadeOut("slow");
});
</script>
</body>
</html>
Replace script with this, abouve body tag :P css link is good but maybe css not work or name is not like u writed.
<script type="text/javascript">
alert("Ist work");
</script>
But and this work if i see good. http://jsfiddle.net/2Fv8f/
I think your code is correct
your file css should nam " WLE.css " i mean with capital letters and should be in the same directory with this html file
.
for JQuery it's linked correctly and its work for me and the Img fade out in my test .
and for test your linked files (images , css , js ) you can do that with any code you write . go to your page in Chrome and :
Click right > Inspecte element > Network (Tab) :
and Refresh the page if any images or files doesn't link correctly it will show in red color .
try and you will see .
I hope that's will help you .

Missing Image Replacement using Pure HTML (i have working javascript/css example i wish to make bulletproof for browsers that turn js off)

EDIT: See the end of this question for my solution based on the first answer given (which I have "ticked" in green).
Take at look at this simple static html page:
(these are just images i found using google image search, to explain the question. apologies if any of these images are subject to copyright. i just needed images on live servers...)
<html>
<head><title>Server Test Using Image</title>
<head>
<body>
If the server is alive, I will be a happy browser<br>
<img src="http://getsetgames.com/wp-content/uploads/2009/12/ActivityIndicator.gif" id=spinner width=100 height=100>
<img
src="http://pwhatley.files.wordpress.com/2008/06/walmartfrown.jpg"
width=100 height=100
style="display: none;"
id=linkBad
>
<img
src="http://3.bp.blogspot.com/-vpsc13PCfc0/TaLCGaq2SjI/AAAAAAAACTA/hw2MDzTk6mg/s1600/smiley-face.jpg" style="display: none;" width=100 height=100
onError="document.getElementById('linkBad').style.display='inline'; document.getElementById('spinner').style.display='none';"
onLoad="this.style.display='inline'; document.getElementById('linkBad').style.display='none'; document.getElementById('spinner').style.display='none';"
>
</body>
</html>
i have coded the above example using an excerpt of a larger project I am working on that assesses the online state of a number of servers. whilst this content is produced dynamically, for the purposes of this example you can assume it's a static page that is loaded by a browser. (ie assume there is no way of doing these things at the server back end, as the goal of the site is to inform the viewer of what servers he/she can "reach" from that location)
if you cut and paste this in to an html page, you should briefly see an activity indicator, then you should see a smiling face.
if you edit the src tag of the second img object, to either a different domain name, or an ip address you know is dead, eventually the activity indicator should stop, and be replaced with a frowning face.
note - in this example, editing the file name will not work, as the server that serves it ignores the final path component, so please just edit the server and point it to a bad domain name or something like 127.0.0.9
the activity indicator is a nice touch, but probably will only be available with javascript, as it's dependant on the second image's onLoad or onError executing. so please ignore that - i'd just insert the activity indicator using a script tag dynamically. to keep this example simple, the only scripting you see is in the onLoad and OnError tags.
what I would like to determine is some way of achieving this result using only html - i.e. in the event of javascript being turned off, some alternative way of replacing an image that can't be found with one that can, (i.e. assume the frowning image would be safe because it's on the same server as the html page that linked to it.)
Following is the solution I have created based on the answer i have ticked.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.serviceFails {
background-image: url('http://img185.imageshack.us/img185/1800/080508215859259007ge8.jpg');
}
.service1 {
background-image: url('http://img204.imageshack.us/img204/3783/080508190940132007ve6.jpg');
}
.service2 {
background-image: url('http://img206.imageshack.us/img206/2967/080508153147264007sp6.jpg');
}
/* ... */
-->
</style>
</head>
<body>
<table><tr><td>Service 1</td><td>
<div class="serviceFails">
<div class="service1"><image src="http://www.stuartrobertson.co.uk/images/transparent.gif" width=100 height=100></div>
</div>
</td></tr></table>
<br>
<table><tr><td>Service 2</td><td>
<div class="serviceFails">
<div class="service2"><image src="http://www.stuartrobertson.co.uk/images/transparent.gif" width=100 height=100></div>
</div>
</td></tr></table>
</body>
</html>
Maybe background-image trickery using base64 data URL's will work. The idea being that if you have CSS enabled, at least, an item could have a background image defined in CSS only by means of base64 encoded data and then if the user is able to hit the image (i.e. the service is online) it will be overlaid with the image returned by the server.
So the background image defined in CSS will be effectively hidden from view if the service is online, if it is offline then not. Note that this should be done roughly like so:
<div class="status_test">
<div id="service1Overlay"></div>
</div>
And in CSS:
#service1Overlay { background-image: url('http://myservice.com/statuspic.png'); }
.status_test { background-image: url('<base64-data-url-goes-here>'); }

Categories