Can't find images associated with Mozilla Ghostwriter demo - javascript

I have kind of a weird question. I want to get the following demo up and running, then modify it:
https://developer.mozilla.org/en-US/demos/detail/ghostwriter-art-studio/launch
However, the source code is apparently outdated. So I went back to the demo itself and used the "save as" command to save the files to my computer. However, no images are downloaded.
I can copy the images form the source download page - but they don't include eraser.png or eraser_shadow.png. So I checked the demo's CSS file. The path looks very simple...yet I can't find the image.
So that's my immediate question - where can I find the images eraser.png and eraser_shadow.png.
I searched the Demo page for support/contact information, but haven't yet figured out how Mozilla/GitHub work. It looks to me like this project may have been abandoned.

The project appears to be open-source with all the other images available. I'm assuming the author just forgot to include these 2 remaining images when he created the repository.
You can pull the images using the F12 developer tools:
https://developer.cdn.mozilla.net/media/uploads/demos/h/u/hunterloftis/1bb05943a07a6f68146f869ae2bb6b39/ghostwriter-art-stud_1305739973_demo_package/css/images/eraser.png
https://developer.cdn.mozilla.net/media/uploads/demos/h/u/hunterloftis/1bb05943a07a6f68146f869ae2bb6b39/ghostwriter-art-stud_1305739973_demo_package/css/images/shadow_eraser.png

Related

How do I load this HTML file for my own visualization?

For this problem, I have not many options as I am not sure which direction I should be heading.
Now I am studying Deep Learning frequently and I want to toy around with Stanford's CS231N's Convolutional Neural Network Demo as I find it extremely user friendly. The visuals are embedded in this website. I really want to toy around with this but I do not know how and where to start.
I have knowledge of Python and VS-Code.
Take the index.html file from the above link.
If you look closely in index.html, there are two scripts you need that to make it work.
Copy the files from the demo folder from the link and the files structure should look like this(same as in the github demo)
Now double click on index.html and choose a browser to open this work and should work as expected. And you can also modify the code and reload the index.html to see live changes.

Saving DIV contents as HTML/HTM file (non-image)

I'm looking to save out a div content (code and all) block by it's ID/CLASS on button click as an html file. Due to specifics of the project saving it out as an image through canvas wasn't an option.
So far I've tried the download attribute, which seems to be unsupported by Safari 10 and back, as well as, IE in general. From there I moved on to FileSaver.js which worked like a dream until I started incorporating required fields into it. After I did some reading on their site, it seems this is an issue for others as well.
I've prepared this fiddle to give you an idea of what I'm working with code wise and for a point of view for any suggestions out there.

Pull To Refresh Script

I've just downloaded jquery.mobile.pulltorefresh from here
I've uploaded it to my server to test and see if its the right one I want to use... However when you go to it:
quotesin.com
It doesn't work at all. Think I'm having a blonde day, if this is no good does anyone know of any lightweight versions I could use? Rather than Cubiq one?
your error is that you mention 3 files that there are not found or can't access
the files are:
1. jquery.mobile-1.0.js
2. jquery-1.6.4.min.js
3. jquery.mobile-1.0.css
you can test this by open your link on google chrome them right click on the page then click inspect element
after that choose resources tab, then expand the script link in the side tree view you can find that these file not found

Web page never stops loading

I'm currently working on a student project and I encounter an issue with my code. We built an e-doc which mixes video, images, sounds and texts datas about people working during the night.
It's made of HTML, Javascript and a bit of PHP to access a DB.
Recently we discovered that the page keeps loading infinitely when you arrive on the website... It brokes some of our JS code and we don't know how to identify the ressource that might be corrupted or so...
What can make a page load "forever" ? And what kind of tools (ie firebugg or the built-in chrome stuff) should we use to identify the problem ?
You can find our dev- version right here : http://mgprddev2012.dream-valenciennes.com
EDIT : PHP Error is now OK, i forgot to upload the newest version of the code on the dev platform.
Many thanks
You're not crazy - this page does indeed take a very, very long time to load.
If you look at the Network tab in Chrome Developer tools, you can see that there are a lot of images, audio files and video files loading up all at the beginning, and most of them are not visible right away. And some of them are very big. This is probably one of those situations where it's best to defer loading of most of these assets until you need to display them, or at the very least until after you've loaded the assets you need right away.
I recommend checking you YSlow, which is an auditing tool that will give you some tips on how to make your web page load faster and appear to load faster. The site also has some good tips and thorough explanations for why different strategies are effective.
A few hints for this particular page:
A lot of your images are pictures of text. Consider rendering these as actual html text. You can still modify the size of each letter with CSS, and you'll have the added benefit that Chrome will be able to translate the text for non-French-speaking users. You should be able to use CSS borders to get those lines around the text, or try SVG.
Your background image is 2.2 MB. That's quite big. Try saving it at a lower compression setting.
You have a bunch of icons in individual png files. Consider putting them all in in one file and display them as CSS Sprites.
There are several png files that look like they could be jpg's, except for the transparency. If you're feeling ambitious, you can make a jpg with the color channels on the left side, and the alpha channel rendered as grayscale on the right, and use canvas to composite them.
You also have a few png files containing sprites for animation. You can convert them to videos and try the same canvas trick as above. If you're willing to use WebGL, I have some code you can use.
Stops loading fine for me. Firebug will usually tell you if something is loading in the background. Look at the console area to see if any thing is stalling upon page load. Are you saying in it's current state it hangs, because for me it finished just fine.
In the console you can also see javascript errors that may cause things to not work properly.
In JavaScript console:
Uncaught TypeError: Cannot call method 'pause' of undefined debout.js:979
It says that debout.pop02 is not declared. Where do you initialize it?

Anyone know how to use the jQuery Gallery View Plugin?

I found the jQuery Gallery View plugin because I was looking for a good way to cycle through pictures including text and one that was well designed. This plugin does not seem to be updated anymore and does not have much documentation so I am having difficulties implementing it. Does anyone have an idea as to how it works?
Thanks in advance for any help you can give.
Heres the code I have now (of course with the pictures at the right locations just not possible to attach in jsfiddle): http://jsfiddle.net/chromedude/GgusY/
Here's a start.
I'm taking a total guess at what your markup is supposed to be, because you were missing a bunch of </div> (close div) tags.
Things I had to change to get it this far:
Download galleryview-2.1.1.zip, and from that file...
Paste in contents of galleryview.css and jquery.galleryview-2.1.1js into the fiddle (normally you'd do this with proper external scripts and stylesheets)
Fix the markup so that all those <div class="panel"> tags are properly closed
Get a copy of jquery.timers-1.1.2.js onto the page
Step 2: got the loader image working by hosting the loader.gif file on imgur and editing the CSS accordingly.
Themes are tougher, because apparently, this genius™ plugin tries to figure out where your themes are hosted based on the location of the <script> tag which was used to load the galleryview plugin code. Absolute genius... </sarcasm>
Check it out →
no more image 404s. Loaded next.gif, prev.gif, panel-nav-next.gif, and panel-nav-prev.gif onto imgur so that jsfiddle can actually get the images.
I had to actually edit the plugin source for this one; if your server has the directory structure that galleryview expects, this should not be necessary.
Now here's the thing
You could keep wrestling with this plugin.
Or, you could use a different one, like Galleria. As far as I can tell from the example you've been trying to assemble, Galleria does all the same stuff. Since Galleria is actively maintained, you should actually be able to use it with a reasonably recent version of jQuery, as well as actually get support for it from the developer.
Get the latest version of jquery gallery view here:
http://plugins.jquery.com/node/7317/release
Then following on from that:
http://jsfiddle.net/chromedude/GgusY/
$('#photos .filmstrip').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100
});

Categories