How to set up the Brackets editor? - javascript

I want to use Brackets to view my HTML, JS, and CSS files I've written. However whenever I open a file from my folder "Code", Google Chrome Opens up an index of my desktop folders, then I have to click the folder "code" and go in the folder to click on it. How can I make it to where when I click on "live preview" Chrome loads the actual HTML file instead of traveling the world first?
Here is a picture of what's going on:
http://imgur.com/a/zLTo5

Referencing your image, Julie/Desktop is your root.
So, here is what I would do.
Lets say Code2 is the folder that contains all your code for the site you are building. In this case, you would open Brackets and select file > open folder and then navigate to the Code2 folder and open it. This sets Code2 as the root directory for Brackets. Now, in that folder, make sure that you have an index.html file - preferrably the one that you are working on. Now clicking the view button should open the actual page in your browser.
If you dont have an index file, and want to load a different file then just toss a blank index file in the root, click the view button and a blank page should open in the browser. Now just change the path to include the proper name of your file and it should load the page you wish to edit. Saving should reload it in browser.
Example. If your index path is http://127.0.0.1:52497/index.html but you want to view a page with the filename of page2.html, then you would change the path to: http://127.0.0.1:52497/page2.html

Whatever directory you have imported into Brackets needs to have an index.html file. You dont have an index file in that root from what I can tell - so it has no idea what you want to load when you click the open in browser button.

Related

CKEDITOR browse and insert image issue

How to browse/insert image in Ckeditor by using opencart's filemanager(image manager) ?
I hope can get to know how to insert an image in ckeditor by using the opencart image manager and code sample
1)Open CKEditor's config.js file. You can usually find it in the "ckeditor" folder of your OpenCart installation.
2)Find the line where the "filebrowserBrowseUrl" configuration is defined and change its value to the URL of your OpenCart's file manager. For example:
config.filebrowserBrowseUrl = '/admin/index.php?route=common/filemanager';
3)Save the config.js file and close it.
4)In your OpenCart backend, go to the page where you have CKEditor integrated. You should now see a "Browse Server" button in the Image Properties dialog box.
5)When you click the "Browse Server" button, a new window should open displaying your OpenCart's file manager. You can now browse your image folders and select the image you want to insert.
6)Once you've selected an image, click the "Insert" button and the image should be inserted into the CKEditor instance.
--Note: The above steps assume that you have the OpenCart's file manager enabled in your backend. If not, you may need to install and enable it first.

How to save a webpage at its current state with images on Chrome?

I have scrolled down a lot on Facebook and now I want to save the page with the loaded content, including images, so I don't have to scroll and wait for it to load next time.
What I tried: copying the inner HTML of the body does not include images as it only contains the HTML code.
When you copy the html of a page then save it as an html file & view it, the images might not work in case they're a relative path; meaning they should be manually & placed alongside your html, but I'm not sure if it's the case of Facebook.
Anyway, here's how to save a Webpage with chrome in general:
You can save it as webpage with Chrome Save As by pressing Ctrl + S on keyboard on windows. And choose 1 of 3 options for saving as a Webpage: HTML Only, Single File, Complete. Below is a screenshot.
You can press Ctrl + P, to save the page as a PDF file.
You can install a Chrome Extension, to save the whole page as an Image. 1 extension is called GoFullPage.

Transfer data from one JS file to Another without

I'm just experimenting with stuff.
I want to know how I can transfer data from one JS file to another without linking the two files i.e using the script tag on the same HTML file.
So, when I click a button on one HTML file ('file1.html'), it does something to another HTML file (file2.html).
I have used 'localStorage.set/getItem' which did what I wanted. However, when I put my files online, and try open 'file1.html' on the browser of my mobile phone, the 'file2.html' which is open on my pc, does not seem to update when I click the button on my mobile phone.
I'm sure 'localStorage' will not fulfill my require unless anyone can show me otherwise. Is there any way I could still update 'file2.html' which is on pc, with the button click of 'file1.html' which is on my mobile?
*It works when both files are open on pc using localStorage.
Thank you.

Firefox Extension change data folder location

Here at MDN, I found out that if I want to load data like images, custom HTML views or videos, I have to store them in top-level project folder called data.
However, that completely breaks my project skeleton.
My goal is to create a "homepage" for my extension that would open whenever a user clicks my extension's toolbar icon. My "homepage" document is currently stored in data/view/main.html. Is there any way to make Firefox accept locations like src/view/main.html?

iFrame file upload with IE produces download dialogue

I'm developing a custom module for Drupal dealing with Document Management. At this point, the module loads, you can upload files (via a hidden iframe and some ajax requests), browse directories and set various levels of permissions. And everything works perfectly in Firefox.
Issue:
In IE however, I run into an issue. For some reason when I upload a file the save file dialogue pops up and asks me to download the file I just uploaded. It looks like it's asking me to download it from the web-servers tmp location however, as that seems to be the file-name and such. However, if I hit cancel and refresh the page I can see that the file I uploaded did actually get uploaded to the server.
Here is how the upload process works. Click the upload button. The upload button is the standard file input form element hidden and placed over a styled version of the button. Clicking on this causes the "Choose a file" dialogue to open.
Select a file and click "Open". A modal dialogue pops up asking you for some further information about the file. The modal is part of the same form element but remains invisible until you click Upload button
Clicking save in the modal causes the file to be uploaded. The "action" attribute on the form is pointed to a page and the target is the iframe.
The iFrame is polled a few times every second to see if it's contents have changed. When the file is uploaded a "success" message appears in the iframe. Since it belongs to the same domain, I scrape the content within the iframe.
Once the iFrame says that the file has been uploaded, I use some JS to update the application with the name of the file
Since I can't use Firebug in IE, I have to stick to utilizing Microsofts Web Developer Toolbar, which makes it very hard to figure out if the bolded step is actually occuring. It seems like it should, since the file IS being uploaded. It is just getting interrupted by that file download dialogue.
Since no one seems to have an answer, I'll post the fix I found. I doubt it's perfect, but it's the best solution I could come up with.
It turned out to be an issue with the polling as suspected. The fix ended up being instead of outputting json to the iFrame, just output some JavaScript that calls a function that updates the main window. That simple.

Categories

Resources