I want to know that how I can view my codes in browser at same time when typing codes just like codepen.io
I am using sublime text 3 and chrome browser please suggest me how to achieve it..
I would recommend htmledit when you type code it will produce results without even refreshing the page, it works great in chrome as well.
Brackets has a great live previewer, it's an offline text editor so give it a shot, in my opinion it is also a lot better than Sublime Text!
Related
I have created a website and have added a button and lot of text. What I want is to use the browser search (Ctrl+F), when I press the button which I added in website.
How can I achieve this?
It kind of works for FF. See this page
Find in This Page...
update: from mark's comment:
From my testing
window.find()
is supported in Chrome 37, and FF31, but
not IE11
update:
for more information on this window.find go here
No. In general, you cannot invoke browser controls from inside the webpage - security, sandboxing, and all that.
You need to make some sort of in-page search - if you're using a CMS, most of them have a simple search feature built-in.
If you want to do this in JavaScript, there are various scripts that emulate this in-page; randomly selected from my query "javascript find in page" is this one: http://www.seabreezecomputers.com/tips/find.htm
Is it possible to have a search field without a database?
I have a basic HTML and CSS website where on only one page I need a search box to search only that page (large page with lots of data), if possible to search the whole site would be great but only need one page now and don't want to use a database.
Have you seen this done or know if it is possible? I have seen search fields where you link to Google's database and you embed results on your site but that won't work.
Since you have only CSS and HTML code (and no PHP + MySQL) the only solution for you is to use JavaScript which runs on client side. You can use the window.find() function but it doesn't work on all browsers. See: Use Browser Search (Ctrl+F) through a button in website?
What you need is to tell the user to hit CTRL + F in order to use the browser's search module.
FOUND IT...
It works on Firefox, Chrome, Safari, and even Opera. Don't care about IE.
http://www.javascripter.net/faq/searchin.htm
If you use, read the bottom. You will want to use an iframe for the HTML otherwise your search box searches the keyword in the actual box... which is kind of funny. Anyways thanks for the votes guys and sorry you couldn't be as cool as #valicu2000 who pointed me in the right direction to find this solution.
I'm working on a web app for folks with brain injuries. I'd like to make the cursor in the textbox more noticeable than a think blinking line.
Is there a way to make it larger?
(Searched on Google and SO. No luck)
This isn't naively possible/reliable on all browsers as it's controlled by the OS. I would suggest a help doc of sorts that links your users to modify their system so that not only yours, but all websites, are easier for them to navigate.
see: http://etc.usf.edu/techease/4all/vision/how-do-i-change-the-cursor-options-in-windows-7/#html
Here is a demo of how to do it from another post (Styling text input caret)
Demo: http://shachi.prophp.org/demo.html
I've found that we can use DIV as a TEXTAREA by setting contenteditable='true' and overflow='auto' (or 'scroll') (I don't care about the appearance, just the functionality), but I really can't find the solution with Google search to make it really like a TEXTAREA, the problem is related to line-spacing, when pressing enter key, the next line is too distant from the one before in DIV. When designing with DreamWeaver, if I try editing the DIV's content and pressing enter key and switch to the code window, I can see there are P tags automatically inserted. That's why the lines in DIV are too distant from each other and it can't look fine like in a TEXTAREA. I want to say that it is so ugly and awkward.
Could you please let me know how to suppress that nasty automatic insertion of P tag into DIV's content whenever pressing Enter key? Or could you give me any other solution to make the lines in DIV normal as in TEXTAREA?
Thank you very much!
Your help would be highly appreciated! (I'm just a newbie in Web programming, so please be patient!!! Thankssss!! :))
UPDATE!!!
You may all misunderstood me, when I say I press the Enter key, it is not in code editor like DreamWeaver, It is when I load the page in the browser and try typing as a normal user. That's when I test the page.
Something like this?
#myDiv p{
margin: 0px;
}
I'm not 100% sure that the margin is what is causing the line height issues, you may want to try changing height, padding, etc. until you figure it out.
I tried making a fiddle and I'm not having the same problem, line spacing looks normal to me: http://jsfiddle.net/dFzjT/
Upon closer inspection, Chrome is adding extra divs upon each newline.
Switch to edit in the code view instead of the WYSIWYG HTML editor. Then you will want to type in between the opening and closing div tags:
<div>your text here.</div>
I've found that the strange problem (which might make some of you think I'm noob?, vote down me?) was not the fault of mine, it was the fault of the browser I was using, it was Opera browser. I didn't think it renders the DIV's content that way.
After try using a different browser like Google Chrome, FireFox and it is normal now, like a TEXTAREA as I want.
Thanks!
Here's the thing.
A lot of the answers on here answer the question, but they all miss an important point.
We were all new to this at some point.
So let me give you some advice that I wish I got when I started down this road.
Learn to read the code, and your life will be easier.
It might seem daunting now, but trust in your own ability to learn, and just struggle for a few days. You'll come out on the other end with a headache and a smile.
Write the code, save, and refresh the page in your browser.
This way, you look at it in a browser.
You should also get yourself all the important browsers: Chrome, Firefox, Internet Explorer, Opera & Safari.
Learn to use a localhost server like MAMP / XAMPP / Visual Studio.
This way you can write server-side code; that way you can test, check and tweak - all without having to upload anything.
Most of all, though..
Stay away from the WYSIWYG.
They're all just bad news.
Just write your own code.
:{D
A standalone tool is welcome as well, as long as it is free.
Thanks.
You're looking for jsFiddle.
JSFiddle is great for sandbox testing this kind of stuff. Here's the link: http://jsfiddle.net/
Firebug works well for me. As well as this it provides a lot of other very useful development tools (change css on the fly, see computed layout, debug javascript etc).
Besides jsfiddle, I think you can simply use HTML edit feature of firebug, which is immediately shown in Firefox.
On the HTML tab, simply click Edit, and now paste (or write) your HTML5, then click Edit button another time. All done!
The Web Developer add-on for Firefox lets you directly edit the HTML or CSS of the current page and changes are immediately rendered.