I'm working on a small GreaseMonkey script where I would like to embed a jQuery plugin (Markitup) so that the script is fully self contained (images + js) except for jQuery which is served from google.
I found the site http://www.greywyvern.com/code/php/binary2base64 which says that you can embed javascript with the href if you base64 encode the script, much like serving images as basse64 from CSS.
<script type="text/javascript" href="data:text/javascript;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv..."></script>
So i tried that but couldn't get it to work at all, using Firefox 3.0.5 on OS X.
I put together a small test page to isolate the problem but couldn't get it to work at that page either.
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
</head>
<body>
<script href="data:text/javascript;base64,YWxlcnQoJ2FzYWRhc2QnKTsK"></script>
<script>alert('a');</script>
</body>
</html>
The base64 string (YWxlcnQoJ2FzYWRhc2QnKTsK) says alert('asadasd'); so I'm supposed to get two alerts but the only one I see is the second one where the alert is located as text inside the script tag.
Am I doing something wrong or why isn't this working, any ideas?
maybe just a thought but maybe the "href" should be "src" instead.
If you'd check script tag syntax you'd get
<script src="..."
^^^
src NOT href
Using data URIs here doesn't work in IE 6 btw.
That's funny, I am working on precisely the same problem: making a Greasemonkey script to add markItUp to all textareas of a page.
Now, I don't have an issue with the library script itself. I don't see why you want to insert it as Base64, anyway. As pointed out, it will be larger.
You can put it directly in the GM script if you want (some people do that with jQuery), or add dynamically a <script src="someURL"></script> to the document and wait for loading (there are numerous examples of that on the Net)(inconvenience: creates a traffic on the sites holding the files), or, like I am currently trying, using the latest (0.8) feature of GM:
// #require jquery.js
// #require markitup.js
// #resource miuStyle style.css
The required JS files are automatically loaded into the GM script from a local copy, which is fast and always available. Don't use the packed versions, they don't work here. I also had issues with set.js so I just put in directly in the script.
It works well, but I don't have style nor icons yet.
I must put the miuStyle text in the Web page, I think, and change it so all background images refer to the same image hosted on Photobucket or similar, with offset. I haven't found a way to use local images (in CSS), alas, even with #resource.
My response doesn't address your problem, alas (but John's remark seems valid), but it might put you to another, simpler solution.
Base-64 makes the file larger, but it makes it more machine readable so it actually increases pagespeed. I can definitely see why you'd want this, unless you want to look at 50 lines of gibberish in your file. FYI, I just read a study that base 64 actually loads slower on mobile so if your app is heavy mobile I'd stay away
Related
Here is a link to my site, http://johnathonpowers.bigcartel.com
Trying to play around with images on my product pages...well actually created a test page.
Unable to figure out a few things:
Where does one host a jquery file?
Do I need to have the jquery src for both jquery.min.js (many use the one hosted by google, if I am understanding any of this correctly) and jquery.elevatezoom.js?
If I end up not liking the zoom is this still an appropriate way to have a large image with small thumbnails beneath (perhaps I will explore how to click on the big image to open a full-screen version).
Should all my pictures be the same size? Right now I have square format photos and rectangle...it might end up looking horrible.
Do I put any code into CSS or just the layout and the specific page I want the images to take place?
Will these images replace the ones I upload through bigcartel's system?
There is already a jquery entry in the layout...do I just add to the end of this same section the additional src?
This is what I added to layout:
<script src="http://s000.tinyupload.com/index.php?file_id=24823496361920795072" type="text/javascript"></script>
This is my test page:
<img id="zoom_01" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg"/>
$("#img_01").elevateZoom();
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script></head>
<img id="product_zoom" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg" class="fade_in">
Thanks again for all the help and honestly probably biting off more than I can chew. I just wanted to play around with it and see if it would work/was something I liked, but seems like I have gone down a rabbit hole into a whole other world, way above my rudimentary html skillset.
Here is where I first saw the jquery stuff:
Can I integrate an Internal zoom on my products in my big cartel store?
The best place to host your javascript files is on a server that you have control over -but if you don't have any webspace, you can easily host files with a service like Dropbox or Google Drive.
The Luna theme you're using already loads jQuery in the <head> portion of your Layout, so you don't need to include that script again (and you'll get errors in your browser's javascript console if you try).
Since you're using a separate image zooming library that has a bunch of custom CSS, you'll probably want to have your CSS file hosted on a separate server as well. It's a good idea to put any files you're including in the Layout section, following the same format as the existing theme files.
It looks like the javascript file you're hosting on tinyupload.com is just bringing up a download page instead of actually loading the javascript content into the page, so you'll definitely need to change how that's loaded. Otherwise the HTML code you're using looks like it should work.
Sorry for the basic question, I'm a beginner with some basic knowledge of html, css and beginning with javascript that I'm learning for developing my own web project. I'm trying to create a project with a separate page for functions to keep the page cleaner and see all the functions in one place. I'm watching videos as part of an online course. However, the lectures use Visual Studio in which you can drag and drop the files so that the source link is already coded. If there's an equivalent feature, let me know please.
I know that you are supposed to link the <script type = "text/javascript" script src = XXXX.js> However, whenever I copy the file path, it still doesn't come up. What am I missing?
This should be the text that links your JS file:
<script type="text/javascript" src="path/to/file.js"></script>
Even though with HTML5 you might not need quotes around your attribute content, it's safe to put them in for older browsers. Don't put a space between the attribute name and the equals sign, or between the attribute content and the equals sign. There shouldn't be a script in the middle of your tag (you put one before src). Make sure the file path is relative to your HTML file as well.
NOTE: I am in no way advocating multiple heads within a page
I'm using Apache Tiles and I have a few tiles that include their own heads. The result of the Tiles renders into an HTML page with multiple heads.
My questions:
How is the resulting page handled in IE and Chrome? [It renders and appears successful]
WITH APACHE TILES What is the best practice for dealing with/avoiding multiple heads [for CSS/Javascript] without having to demand all pages use the same JS and CSS files.
For Example with Question Two:
Lets say you have the following pages: home, profile, and gallery listing. Gallery listing has fancy JQuery+YUI+... and more styles. For most users, they would only be interested in the home and profile pages, so why slow them down with loading the JS and CSS files associated with Gallery.
This is what is generated
<html>
<head>
<title>The Template's Title</title>
</head>
<body>
<head> <script src="javascriptfile.js"/></head> Tile One Content
<head> <script src="javascriptfile2.js"/></head> Title Two Content
</body>
</html>
The generated contents is running the script in javascriptfile.js, and javascriptfile2. What I'm asking in the first question: is the extra heads ignored, and the contents considers? are they combined into the html/head level? Is it possible to include CSS files in the second or later head? Will this create an error with a stricter DTD?
Well, in modern Chrome, it's at least possible to know what happens. Chrome uses the HTML5 parser algorithm which describes exactly how invalid mark-up is processed. The gory details are at http://dev.w3.org/html5/spec/tree-construction.html#parsing-main-inbody
What happens in your example is that the first <head> in <body> is discarded. Then the <script src="javascriptfile.js"/> tag is processed, which is a start tag, not a self-closing tag, so everything that follows, including everything that looks like a tag, becomes a text child of the script element. Nothing is displayed and no script is run. If <script src="javascriptfile.js"/> is replaced by <script src="javascriptfile.js"></script>, and ditto for <script src="javascriptfile2.js"/>, the head start and end tags are silent discarded, and the script elements are not moved. "Tile One Content Title Two Content" is displayed and the scripts are run. The DTD makes no difference at all.
IE is somewhat trickier to know, as before IE10, it doesn't use the HTML5 parser algorithm and therefore it's exact behaviour is a mystery. However, a cursory experiment appears to show that it has the same behaviour as described above.
Although some legacy browsers move elements that can only appear in the head - such as <link> - into the head, other browsers do not, and no such behaviour can be relied upon.
All in all, best steer well clear of such constructs.
I don't know about practices for Apache Tiles.
What is the purpose of doing something so egregiously invalid? And why you're asking this seems very unclear.
Not only should you only have ONE <head></head> section on a page, under no circumstances is the <head></head> to be nested anywhere inside the <body></body> section.
This practice makes absolutely no sense whatsoever....
(Side-note: Certain browsers ignore or move invalid tags when the DOM is constructed which will defeat your entire purpose of doing this.)
EDIT (based on comments):
For anyone interested in including <script> tags within the <body>, you can read more about the specific details in my answer here...
Will linking javascript files in the body rather than in the header cause a problem?
You don't really need extra heads to include additional css/js. You can 'inline' the whole <style type="text/css">...</style> part and it will render fine. Will it validate? No. But will run fine.
How is the resulting page handled in IE and Chrome? [It renders and appears successful]
I don't know and I really don't want to know.
What is the best practice for dealing with multiple heads [for CSS/Javascript] without having to demand all pages use the same JS and CSS.
Don't do it :-)
Is there a reason you can't just include the JS files in the body / head without the extra tags?
Or add the css / js files in the 'normal' head section of the document (where it should be).
Well atleast you want the CSS files to be loaded as soon as the page starts loading. JS files can (sometimes) be loaded at the end of the HTML.
For example if the JS files need to have a completely loaded DOM (for e.g. accessing DOM elements).
Note
Sorry this isn't really an answer to your question, however what you are doing just looks way bad. :) And is almost certainly not needed / there will be a better solution for it.
I am developing an eshop .At products page based on category i putted some javascript based filtering. However a problem arises if a category has a lot of products.
This link has something similar i do ...
http://www.snowandrock.com/sunglasses/snowboard/fcp-category/list?resetFilters=true
How ever this page is painfully slow and is over 2mb !!!
Every product for me needs half killobyte but the image is the problem..
So i am looking how to lazy load images..
Since my page has pagination unlike that site i think that loading images that are visible only to the page is a solution.The probem however is how to do it in order to work both for javascript and non javscript enabled people..
The only solution i though is storing the link at the css class somehow of the image for the non visible products and if shown after filtering change via javascript the image src...
Non javascript users dont have this problem as clicking on a filter would navigate them to other page...
Any other idea?
Four options:
Here are three options for you:
Use a background image
Kangkan's background answer has this covered.
If that doesn't work for you, I'm assuming you only need help with the JavaScript-enabled stuff, since you said the non-JavaScript users will see a different page.
Use a plug-in
Paging has been done. You've said in a comment that you're using jQuery. There are lots of jQuery plug-ins for paging. Find one you like, and use it. They will be of varying quality, so you'll want to test them out and review their code, but I'm sure there's a decent-quality one out there.
Server-side Paging
This is where the main page loads either without any products at all, or with only the first page of products. Typically you'd put all of the products into a container, like this:
<ul id='productList'>
</ul>
Then you'd have the usual UI controls for moving amongst the pages of results. You'd have a server-side resource that returned HTML snippets or JSON-formatted data that you could use to populate that list. I'll use HTML for simplicity (although I'd probably use JSON in a production app, as it would tend to be smaller). Each product entry is its own self-contained block:
<li id='product-001'>
<div>This is Product 001</div>
<img src='http://www.gravatar.com/avatar/88ca83ed97a129596d6e8dd86deef994?s=32&d=identicon&r=PG'>
<div>Blurb about Product 001</div>
</li>
...and then the page returns as many of these as you think is appropriate. You request the page using Ajax and update the product list using JavaScript. Since you've said you use jQuery, this can be be trivially simple:
$('#productList').load("/path/to/paging/page?start=X&count=Y");
Here's an example prototype (not production code); it fakes the Ajax because JSBin was giving me Ajax issues.
One big page download, then client-side JavaScript paging
I'm not sure how you're doing your filtering, but if you have an element that contains the product information, you can store the image URL in a data-xyz attribute on it:
<div id='product-123' data-image='/images/foo.png'>
Then when your code makes that visible, you can easily add an img to it:
var prod, imgsrc, img;
prod = document.getElementById('product-123');
prod.style.display = 'block'; // Or whatever you're doing to show it
imgsrc = prod.getAttribute('data-image');
if (imgsrc) {
img = document.createElement('img');
img.src = imgsrc;
prod.appendChild(img); // You'd probably put this somewhere else, but you get the idea
prod.removeAttribute('data-image');
}
Edit In a comment elsewhere you said you're using jQuery. If so, a translation of the above might look like this:
var prod, imgsrc, img;
prod = $('#product-123');
prod.show();
imgsrc = prod.attr('data-image');
if (imgsrc) {
$("<img/>").attr('src', imgsrc).appendTo(prod); // You'd probably put this somewhere else, but you get the idea
prod.removeAttr('data-image');
}
No need to remove it again when hiding, since the image will already be shown, which is why I remove the attribute once we've used it.
The reason I've used the data- prefix is validation: As of HTML5, you can define your owwn data-xyz attributes and your pages will still pass validation. In earlier versions of HTML, you were not allowed to define your own attributes (although in practice no major browser cares) and so if you used your own attribute for this, the page wouldn't validate.
References (w3.org):
Embedding custom non-visible data with the data-* attributes
getElementById
createElement
getAttribute
removeAttribute
appendChild
Off-topic, but a lot of this stuff gets a lot easier if you use a JavaScript library like jQuery, Closure, Prototype, YUI, or any of several others to smooth over the rough edges for you. (You've since said you're using jQuery.)
If you simply wish to load the images slowly and the rest of the page gets loaded first, you can put the images as background and not use the <img> tag. If you use the <img> tag, the image is loaded at the time of loading the page and so the page load becomes slow. However, the background images loads after the page is shown to the user. The user can read the text and see the images loading after some time.
I'm fairly certain it's not possible in plain HTML without some kind of Javascript intervention.
After all, if it was possible to do it without scriping, why would anyone have implemented it in Javascript in the first place?
My question is: How many visitors do you get who these days don't have Javascript enabled? I bet it's very few. And in any case, those people are used to sites not being fully functional when they have javascript disabled; your site will actually be better than most if the only difference they have to put up with is slower loading speed.
(ps - I presume you're using Jquery's LazyLoad plugin for the Javascript enabled people?)
I'd suggest to implement responsive image approach in order to avoid huge image files on devices which cannot display it properly (or human can't tell the difference).
I wrote the following code for my own site. I used JQuery:
1. Name all classes, where U want lazy loading by the same name, say "async"
2. Copy the real image location from 'src' to 'alt' attribute
3. After finishing page loading my script will copy all 'alt' values into 'src'
Look at example. This is full working sample html:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img.async').each(function(i, ele) {
$(ele).attr('src',$(ele).attr('alt'));
});
});
</script> </head> <body> <img class="async" title="Гороскопы" alt="http://virtual-doctor.net/images/horoscopes.jpg" width="135" height="135"/>
</body>
</html>
You can feel the speed in real site, where I used it
http://virtual-doctor.net/
Browser level support
Modern browsers have the ability to load images lazy using loading="lazy" attribute!
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
For more information, visit here.
EDIT: I reread your question & noticed you also want this to work for people with Javascript disabled! Then yes my answer is not acceptable - but I'll leave it for the record.
Here are some Javascript libraries for Image Lazy Loading.
They help you load the images needed when the elements 'would' be in view by simply changing the image src attribute.
github.com/toddmotto/echo and toddmotto.com/echo-js-simple-javascript-image-lazy-loading : plain JS, IE8+, 2KB, only 5 contributors github.com/toddmotto/echo/graphs/contributors
github.com/dinbror/blazy/ and dinbror.dk/blog/blazy - plain JS, IE7+, 1.2KB (minified and gzipped), only ONE contributor github.com/dinbror/blazy/graphs/contributors
github.com/tuupola/jquery_lazyload and www.appelsiini.net/projects/lazyload : jQuery dependency, MIT License, tested with Safari 5.1, Safari 6, Chrome 20, Firefox 12 on OSX & Chrome 20, IE 8 & IE 9 on Windows, Safari 5.1 on iOS 5 both iPhone and iPad. 18 contributors https://github.com/tuupola/jquery_lazyload/graphs/contributors
github.com/luis-almeida/unveil and luis-almeida.github.io/unveil - special: lightweight version of Lazy Load github.com/tuupola/jquery_lazyload : IE7+, jQuery dependency, MIT License, 5 contributors https://github.com/luis-almeida/unveil/graphs/contributors
github.com/shprink/BttrLazyLoading and bttrlazyloading.julienrenaux.fr - special: dedicated for responsive designs : jQuery dependency, IE9+, MIT License, 3KB (minified & zipped), 5 contributors github.com/shprink/BttrLazyLoading/graphs/contributors
Important: I am still investigating which of these Javascript libraries is best to use. Do your homework I'd say, take some time to search what's the best tool for the job. My requirements are usually: license, dependencies, browser support, device support, weight, community, and history.
I have searched this web looking for an answer, but it seems that this time I'm not so lucky, so I am forced to ask. I apologize if it's already answered (could not find it). And yes, English is not my first language, so I also apologize for my spelling mistakes, I try my best.
This is my problem, using Tomcat 5.5, Struts 1.3, JRE 1.5 and I'm using firefox 3.5.6.
In my jsp page I cannot seem to put any src="path/path" in my <script> I have tried deleting the src and all works well, but my project is going to need a lot of use from jquery and I do not want to copy/paste all the js file in every jsp.
This is my code:
<script type="text/javascript" src="js/jquery-1.3.2.js">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>
and the submit button:
<input type="submit" onclick="showMySelf()">
When I click the button, nothing happens (well it actually repaints the page) and when I delete the "src" tag from the script and add all the jquery code to the page it all works well.
I have tried putting another slash in the path as "/js/jquery-1.3.2.js" and returns an error.
I have tried using ResolveURL and it doesn't seem to give me better results.
I have also tried changing the js file to another file ("generics.js" and "js.js"), I also tried with "js/*.js".
Any of theese solutions have archived anything.
I have also tried using the struts tags (like html:submit) but it also did not work.
The path is actually right, since looking the code in my web browser gives me a link to the js file. So I suposse the browser knows were to look for my js file, it does not give me an error or a broken link to the file.
Any ideas of why this is happening?
Thank you all.
Random.
You can not use a script element to load an external file and put code in it at the same time. You need to use two script elements:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>
I think Gumbo solved it.
As a sidenote, a very good way to find out whether a browser can load a JS file is the "Net tab" in Firebug in Firefox. It shows all loaded (and failed) requests of the current page.
The two most likely options are:
a) You are including HTML in your JS file (i.e. <script> tags)
Take it out.
b) You have the wrong URI and when you attempt to resolve your relative URI manually you do so incorrectly
Look at your server access logs to see what is actually being requested (or use a tool such as Firebug)
The first thing to do in such case. Install Firebug and look at the "Console" panel (for possible syntax errors) and the "Net" panel to see whether your jQuery sources are being fetched correctly. The 2nd column there shows the request status code.
alt text http://img46.imageshack.us/img46/6224/jqueryfirebugtmp.jpg
(full size image)