HTML Rendering - Adding extra code (Internet Explorer) - html

I am using Telerik Rad Editor in my project, i have an issue with the way HTML is rendered in editor.
I have discovered some changes that are not ideal. Try this as an example. switch to HMTL Mode and enter the following code.
<!--*
<img alt="Chillisauce Hen Nights" src="http://www.chillisauce.co.uk/includes/email/email_header_hen.jpg" /> *-->
These "" tags are added by us so that when html is viewed in design mode that part of code is not visible but is actually part of my template.
Now switch to Design Mode and then back to HTML Mode. You will notice that additional code has been added...
<!--* <img alt="Chillisauce Hen Nights" src="http://www.chillisauce.co.uk/includes/email/email_header_hen.jpg" originalAttribute="src" originalPath="http://www.chillisauce.co.uk/includes/email/email_header_hen.jpg" /> *-->
If you switch to Design Mode and then back to HTML Mode again, these additional bits will have been added again.
Is there any way to disable that functionality?
EDIT:
I have installed new version of Telerik Controls but I found that this is problem in IE. In other browsers like Fire Fox this works OK but In IE it adds that extra line of code.I have checked and this issue occurred in IE version (6,8 and 9).
Actually i am loading Rad Editor control in "Web Browser Control" in my windows application.

I have found a similar bug report in Telerik Rad Editor forum.
http://www.telerik.com/community/forums/aspnet-ajax/editor/originalpath-originalattribute-injected-into-content.aspx
The admin said that it was a bug and should fixed in version 5.7.2. you can try upgrade your Telerick Rad Editor to the lastest version.

You can try the code on the online demos on Telerik's site - http://demos.telerik.com/aspnet-ajax/editor/examples/default/defaultcs.aspx
The problem does not happen there, so it's most probably a bug that has already been fixed. You should get a newer version of the Telerik controls and upgrade your project.

Related

VS Code Inspect Elements

I have been using Adobe Dreamweaver (2005) for doing web development. I recent switched to VS Code. Dreamweaver has a built in browser where I can inspect a HTML element and it will find it in the editor immediately. This comes in really handy especially when I'm working on messy projects that have been evolving for years. I really like a lot of things about VS Code but this feature is important in saving me a lot of time. Is there any way to get this feature in VS Code?
Thanks
The feature you're looking for is now built into every major browser in the form of dev tools: https://developers.google.com/web/tools/chrome-devtools/open#elements
You can simply click on an element, and in a separate pane, you will be shown the corresponding code.
You can also link DevTools directly to VS code via the extension debugger for chrome in the VS code marketplace - or debugger for Firefox, etc.
However, I recommend starting with the browser dev tools if you're not familiar with them already, as they are simple to use and require no configuration.

Displaying Emoji in Google Chrome

I have a Google Chrome Extension that supports chat. The chrome extension displays the messages sent to you in desktop notification. I have noticed that whenever I send an emoji from an iPhone, it correctly displays in the Desktop notification. But when I try to display the same emoji in the actual application (it's an iframe injected into the page), it appears as a square.
Seems like there's an open bug at https://code.google.com/p/chromium/issues/detail?id=62435.
I was wondering why it works correctly in Desktop Notification and not otherwise? Also, is there anything I can do to fix it?
I just implemented Emoji support in my extension using the open-source Twemoji library.
In the simplest form, it involves adding a .js file and calling a function on a DOM element to replace Unicode emoji with Twitter CDN provided images:
twemoji.parse(node);
See the repository readme for more options.
Chrome will now support emojis natively (only OSX). You can wait a few weeks until the stable version is released with this feature, or you can download the dev-version form here, that already contains this feature.
Btw, if you want to test if it works, you can use this page (works like a charm).
You can view emoji with a Chrome extension called Chromoji.
It works on Mac OS X, Windows and Linux as well.
Solved by adding Emojis - Emoji Keyboard extension to Chrome.
Additionally, I checked that the Chromoji - Emojis for Google Chrome extension also works.
1st Note: Emojis appear everywhere on the page except for inputs and textarea.
2nd Note: Any of these extensions additionally give us the ability to search for emojis along with the possibility of copying them.
I saw this problem could be solved by updating Internet Explorer to version 11 under Windows 7 x64 (several computers affected, all solved).
In my case, it was because I formatted the pc with pure, no-servicepacked Windows 7 x64. After SP1 on Windows 7 and IE11 have installed, all browsers started to show the emojis correctely. I used for test this site.
If the page shows squares all around the page, the error is not solved. If the page shows several kinds of symbols, than the error is eliminated.
Please tell us if this workaround was effective.

Netbeans with Chrome integration on HTML5 project

I have successfully installed both netbeans and the chrome extension for doing html/css/js work. It appears to work for the most part but I've seen some questionable activity that is... "limiting".
Netbeans > Chrome seems like a fragile interaction. In netbeans, I select run file, and the page opens in chrome always in a new window (is that right?). Part of the marketing here is that you're supposed to be able to edit the css without having to constantly go to the browser and reload. But in netbeans, when I go to the tab of the css file (in the same project), the chrome page bombs with the Dead Folder icon and the text "Something went wrong while displaying this webpage".
What's supposed to be the process here? It seems to work in principle, but not in practice.
[update]
I had also had the addon problem that if I did Run Main Project while looking at the css file, it would show the css file as if it were the main html file. After setting chrome as the default browser, this action shows the actual main html file. At that point, making any change to the css file, any typing at all, will bomb the chrome page.
Take a look at this tutorial.
Once you run a page/project in Chrome with NetBeans integration, in NetBeans there is a window CSS Styles and slightly different Navigator (in 7.3). Now in browser you can start Inspect mode (for instance right click on NetBeans logo in omnibar and check "Inspect in NetBeans mode") and then you can for instance click on elements in browser and if you do that, the CSS Styles window in IDE shows all css properties and rules applied to selected element. You can edit CSS from either CSS Styles or by plain old editing of CSS file in NetBeans. In both cases, changes are visible in Chrome without any reload (without even saving the css file). And you can also use JavaScript debugger in NetBeans.
I don't know what do you mean by "chrome page bombs", but page cannot be debugged by 2 "debuggers" at the same time in Chrome - so you can either use NetBeans or Chrome Developer tools.
There are many new features in the upcoming NetBeans 7.4 (you can download 7.4 Beta from netbeans.org). You can try it as well.

Live preview / WYSIWYG support or plugin for Rubymine?

I'm using Rubymine 5.4 for Windows and it's overall amazing, and 95% as good as Visual Studio as an HTML / CSS Editor with a few exceptions... the main one being a lack of a live preview /WYSIWYG ability, i.e. as I type I can see the resulting preview live (in addition to VS, DreamWeaver also has this feature). I can't seem to find anything like it in the IDE, help, or any Google/Stack searches.
To be clear, what I am looking for is a way to have a split screen view in RubyMine where I can be editing my HTML / CSS in one pane/tab and be seeing the Live Preview of what it would look like in a browser in another tab/pane.
Ideally, this would be:
in RubyMine itself (using native panes/tabs as described above)
the user could configure whatever browser rendering engine (Chrome, FF, IE, etc...) they wanted to view the preview in...
...however, I could live with any variation of the two above, e.g. simply integrated with RubyMine using external windows/browsers, or maybe, the preview only available with limited rendering engines (only Chrome let's say).
Thanks to #CrazyCoder & #LazyOne for the pointers...
After a bit more research, I've confirmed and gotten more detail:
The solution is to use the Official Jetbrains (maker of RubyMine) LiveEdit plugin which you can find here: http://plugins.jetbrains.com/plugin/?id=7007
Detailed Instructions
Download the JetBrains LiveEdit plugin from here: http://plugins.jetbrains.com/plugin/?id=7007
Run Rubymine > Settings > Plugins (type "plugins" in the search
box in settings)
Click the Install Plugin from disk button at the bottom of the list
Navigate to where you downloaded the plugin and select/open it
Activate by checking it on the plugin list
(You will likely have to) restart RubyMine
Once restarted, go to the menubar > View > LiveEdit (which will then be checked)
Download the JetBrains IDE browser Extension for Chrome here: https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?utm_source=chrome-ntp-icon
The Chrome extension supports both WYSIWYG/real-time "LiveEdit" outside the IDE, in an external Chrome window and JavaScript debugging inside the actual RubyMine IDE
I believe there is also an extension for FireFox, which I believe ALSO DOES support
Javascript debugging through the IDE. BUt, I'm not sure if it supports LiveEdit like the Chrome extension
(Launch) Debug your project
Edit as you normally would
Observations/Opinions
The plugin pretty much works seamlessly. I've found it cuts development time significantly by not having to constantly MANUALLY reload the page, i.e. use your mouse or keyboard to bring focus to the browser window and hit refresh... this time adds up especially if you are doing a lot of HTML/CSS and want to check your changes often.
However, I'd suggest turning it off if you're going to do any major back-end/Rails or Javascript as the reload might be slightly longer due to code interpretation/processing and you hit errors as you are mid-statement and the LiveEdit decides to refresh while variables aren't defined or have improper values. In this case, the time you save by not having to manually refresh, may be lost (more than 1x fold) b/c of how often and how long it takes for content to be created/rendered on the server-side or in JS on the client.

How do I build my website in Firefox?

Here's an easy question. How do I configure Visual Studio 2008 to build my webpage in a certain browser? I really want to build in all 5 well-known browsers (IE, Firefox, Chrome, Opera, and Safari), but right now I am having to right click the actual html files and open them in different browsers. In dreamweaver, there is a simple dropdownlist for this...what does visual studio have?
Firsty, you don't build your site for each different web browser. You build one website that's standards-compliant and will work in all browsers.
Having said that, you will probably have to use some non-standard "hacks" to get Internet Explorer to behave as the other browsers do because older versions of IE don't follow web standards.
You should setup your website in IIS using IIS Manager. Then you can run your website in whatever browser you like using a URL like http://localhost/YourWebsite/
Here's an article on creating a website in IIS: http://support.microsoft.com/kb/323972
Alternatively if you want to use the web server that's built into Visual Studio you can right-click one of the pages in your project, select Browse with.. and use the Browse With dialog to set the default browser. Once you've done this you can run your site in the default browser by pressing F5.
See this page for switching the default browser. As far as a dropdown to easily switch like Dreamweaver, there may be a plugin.
Right Click on an Aspx page, choose "Browse With...", and set Firefox as Default.
I like the site browsershots.org, submit your URL and it shows how it looks in different browsers on different operating systems. After a minute or 2 I got back 42 different shots.... good to know I look good on FireFox 3.0.4 on MAC OS X 10.6 :).
How to change the default browser to debug in Visual Studio