How to highlight (un)used JavaScript live in Dreamweaver - javascript

I am working in Dreamweaver CS4 and implemented JQuery code that I found online for a gallery function.
I am only using a very small part of the gallery functions available, and would like to delete the unused script in order to get more clarity and a cleaner script. But as a JavaScript beginner I can't identify what is important and what is not.
My question: Is there a way in Dreamweaver to view/highlight the JS code that the site is using? I am imagining a tool that you could turn on when running the live view that would visualize the portions of code that is being used.
Or, the other way round, is there a way to highlight the unused code.
The live code button doesn't seem to do this.
Thanks for your help!

My question: Is there a way in Dreamweaver to view/highlight the JS code that the site is using?
No. You would need to use Firebug or a similar javascript tracker/debugger to see how the code is used. The most DW will tell you is which external files are linked to a page.

Related

Javascript library that creates Custom QR Codes with a logo in the middle?

I would like to create a custom qr code with javascript that contains a logo in the middle.
I already found this project on github:
https://github.com/kaarposoft/qrlogo
but unfortunately this script creates 1000 qr codes, whereupon the logo is always positioned differently, apart from that this project is not really easy to handle. (no documentation etc). I have rewritten in such a way that only one qr code is generated and not more than one and also that it uses an img tag instead of waiting for an upload. Nevertheless, this is not optimal because the logo is always randomly on the qr code and it is a project and not a library.
So I would like to know if someone knows a library or has programmed something to generate a qr code with javascript from an img tag and a string.
Many greetings and thanks.
qrcode-with-logos does the trick for me. I also came across easyqrcodejs which has a lot of extra features, though I have not yet used it myself.
Checkout the Zebra Crossing project.
It has ports to many languajes, including javascript.
zxing project on GitHub

JS plugin to highlight & run javascript in the page

I'm writing the documentation of a JS lib and I frequently insert code examples. What I would like is to allow users to edit et execute these examples (with a RUN button for example).
Does someone know a light js plugin which could do that? (with code highlighter).
Edit: just something to run JS code, like a very simple web console, no need to edit CSS and HTML.
Codepen allows you to embed code samples with syntax highlighting, and an ability to run them in a sandboxed environment.
Here's an example code snippet for embedding (so this answer doesn't get flagged for not having code, but really the docs are extremely easy to read):
<p data-height="268" data-theme-id="0" data-slug-hash="ClnAe" data-user="afkatja" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/chriscoyier/pen/ClnAe'>ClnAe</a> by Katja Hollar (<a href='http://codepen.io/afkatja'>#afkatja</a>) on <a href='http://codepen.io'>CodePen</a></p>
Here's a blog post from Codepen with more details on how-to.
Here's an example of a blog post that uses an embedded Codepen.
Edit: Just realized you wanted the code samples to be editable. I'm afraid that's a Codepen PRO feature as documented in this blog post. So still an option perhaps, but there may be alternatives that do it for free.

Keep javascript functions collapsed in VS2013

I am working with the new Visual Studio 2013 that now also has better support for embedded javascript code inside ASPX-Pages.
Since I there are some ASPX pages that have pretty much javascript code on it, I am collapsing the functions I don't need. However the next time I open the ASPX page in the editor the functions are all expanded again...
I am now asking: Does anyone know if there is a setting or something that enables to keep them collapsed, once they got collapsed by me? Just like it works for methods / classes collapsed in .cs files.
I also could not find a direct solution for this, so I looked up information regarding macros in Visual Studio. I found that recording the collapse operation (Ctrl+M) on the specified functions and running this macro at each startup solved my problem temporarily, but not after extensive change in my code.
I would recommend looking into parametering macros for an easy to maintain, semi-automatic code-collapse on startup. This is not a read-and-go answer, but it can give you some hints on where to start a workaround.
http://msdn.microsoft.com/en-us/library/b4c73967(v=vs.90).aspx

How do I post a jsfiddle example of some trouble I'm seeing in Rails?

This may be a very basic question, but is it possible to post a jsfiddle that captures a Rails environment, the js, css, and HTML that is generating a nagging problem? I posted another SO question here: Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right
... and it was suggested I post something to jsfiddle. Honestly, I'm just completely in the dark as to how I might gather the css, js, and HTML in a way that can be copy-pasted into jsfiddle. Is there some slick way to pull the 4 necessary components together?
I am mostly interested in being being able to share and debug code that pertains to display and layout.
Many thanks in advance.
Sites like jsfiddle and jsbin are useful as testbeds for various issues involving HTML, CSS, and JavaScript. A good workflow for using them might be as follows:
Before going to one of those sites, use a browser debugger (Firebug, the Chrome debugger, or even the debugger in modern versions of IE if you must) to figure out the mechanics of the issue. Are you seeing unexpected JavaScript behavior? Weird layout? Whatever the problem, see if you can narrow the focus as much as possible.
Now, go to one of the workbench sites (make an account for yourself too; it helps to be able to find old experiments) and start trying to reproduce the problem. Start as simply as possible and work up. It can be hard and frustrating, but in my experience even the process of trying to figure out an isolating test case can itself lead to enlightenment :-)
If you do manage to isolate a behavior that you don't understand or can't explain or whatever, you can then save the test case (jsfiddle has "Save" and "Update" buttons; jsbin seems to magically save things automatically) and then post the URL here (or anyplace else). If you do post here, it's a good idea to copy the relevant code from your test case directly into your question.
I use both of those sites (and there may be more of them out there). The jsbin site gives you a little more control over your page, and provides a way to see your page outside of an <iframe>. That's kind-of important if you're testing for mobile applications. Otherwise they're both great resources.
Oh, and both sites let you import various popular libraries via simple configuration tools. That's really handy for tracking bugs that you think may have been introduced by a library version change (rare, but really freaky when it happens).

How does jsfiddle mark up code? Is there a library for this?

If you've ever used www.jsfiddle.net, you might notice that it marks up code with proper colorings, and various other helpers like translating tabs to four spaces or shift-tab. With Firebug I see that it's doing this with an iFrame. Is there an open source library to do this? I want to let people write Python on a web page, but make it pretty like jsfiddle.
Check out CodeMirror.
Look here (SyntaxHighlighter)
Here you can find a simple tutorial.

Categories