Develop Reference

SummerNote ContentEditable Attribute Make False

I am trying to contenteditable attribute of summernote html editor pluging making false on page loading , but it doesnt affect.
Here My JS Code:
<script>
$(function(){
$('div#son_durum').children('.note-editor')
.children('.note-editing-area')
.children('.note-editable')
.attr('contenteditable',false);
});
</script>
What Can I Do Achive This?
Thanks

Why did you try to set contenteditable as false? Just leave it and don't initiate summernote on div#son_durum when your page is loading.
Or, do you want to toggle enable/disable state of summernote? A similar issue was already reported. See https://github.com/summernote/summernote/issues/1109

Using v0.8.2.
Here's my solution, though it's not perfect, especially if the developers change the html and or class names, but it works for what I need.
My MVC application has many summernote controls being dynamically added to a page, and each has an ID assigned to it. Some controls only display the image (upload) button, while others only display the text style buttons. For my image-only summernote controls I don't want the user to have the ability to type text, so I have to only disable the text-entry/image panel, not the whole control. This way I still allow the buttons to be used.
Here is my solution, and this works! Make sure this fires after the summernote control initialization.
var container = $('#summernote2').nextAll('div.note-editor:first').find('.panel-body');
if ($(container).length)
{
$(container).prop('contenteditable', 'false');
}
What's Happening?
Within my specific summernote control (id = summernote2), I locate the first div immediately below it with the specific class ('note-editor'). All of these are added dynamically to the page when the control is initialized. See the image below:
Then, using FIND, continue to work down the tree looking for the class 'panel-body', which is where the text is actually placed, highlighted in the image above.
Assuming I find it, then I change the contenteditable property to false. BAM!
There is probably more chaining that could be done, and perhaps more efficient methods but this works pretty neatly.
Why this way?
Because I have multiple controls on the page, and nothing directly linking my ID'd summernote DIV to all those other DIVs that are created as part of the initialization, I thought this was a good solution. Otherwise, how could I guarantee getting the correct panel-body class?
Good luck and let me know what you think! If this answers your question sufficiently, remember to check it as answered!
In a perfect world you'd think the developers would have made it easier. This should be all it takes, but no it doesn't work...:
$('#summernote2').summernote('contenteditable','false');

Trying to embed a custom javascript google map into a wordpress site

I am trying to embed a custom google map into a worpress site. Custom as in I cannot just copy and paste the html code that google would provide for one of their basic google maps, it is dynamic and written in javascript. The way I am trying to do it now is by typing the javascript code into a text widget in the sidebar and using google.maps.Map(document.getElementById("map_canvas"), mapOptions); in the javascript to generate the map in a <div> on the page with id "map_canvas". Upon loading the page and inspecting it, the <div> loads, and the javascript runs without any error but no map shows up on the page. Intuitively it seems like the map is just too big to fit in the <div>, and when I check the style tag of the map_canvas <div> it does have overflow: hidden as part of the css. So changed it to visible which still didn't solve the problem. So now I am stuck... Does anyone have any experience with using javascript with wordpress and could help me out? I've tried to be as detailed as possible but if you need to know any more please let me know. Much appreciated!

The proper way for you to add the JavaScript to the header would be by using wp_register_script() and wp_enqueue_script(). You can add this into the functions.php file.
I'm not entirely sure whether JS executes in a text widget, so you would be better adding this into the page template that you need this to appear on.
It's impossible to tell whether you have styles overriding the div that contains the map, so it may be a good idea to post a link perhaps?

Adding html/any tags to either side of selection - Javascript

Adding HTML/any tags to either side of selection - Javascript
The problem:
After creating a textarea box in my PHP/html file I wished to add a little more functionality and decided to make an textarea that can use formatting, for example
<textarea>
This is text that was inserted. <b>this text was selected and applied a style
via a button<b>
</textarea>
It doesn't matter what the tags are, (could be bubbles for all that I care due to the fact the PHP script, on receiving the $_POST data will automatically apply the correct tags with the tag as the style ID. Not relevant)
The Question/s
How can I create this feature using javascript?
Are there any links that may help?
And can, if there is information, can you explain it?
EDIT: Other close example but not quite is stackoverflow's editor and note that I do not wish to use 3rd party scripts, this is a learning process for me.
The tags that are inserted in the text are saved to a database and then when the page is requested the PHP replaces the tags with the style ID. If there is a work around not involving 3rd party scripts please suggest
And for the anti-research skeptics on a google search, little was found that made sense and there was Previous Research on SOF:
- https://stackoverflow.com/questions/8752123/how-to-make-an-online-html-editor
- Adding tags to selection
Thanks in Advance

<textarea> elements cannot contain special markup, only values. You can't apply any styling in a textarea.
What you'll need to do is fake everything that a text box would normally do, including drawing a cursor. This is a lot of work, as hackattack said.
You can do a lot if you grab jQuery and start poking around. Toss a <div> tag out there with an ID for ease and start hacking away.
I've never made one personally, but there is a lot to it. HTML5's contentEditable can maybe get you a good chunk of the way there: http://html5demos.com/contenteditable/
If you want to pass this data back to the server, you'll need to grab the innerHTML of the container and slap that into a hidden input upon submission of your form.
Here's other some things you can check out if you're just messing around:
tabindex HTML attribute, to get focus in your box from tabbing
jQuery.focus() http://api.jquery.com/focus/, to determine when someone clicks in your box
cursor: text in CSS for looks http://wap.w3schools.com/cssref/pr_class_cursor.asp
jQuery.keypress() http://api.jquery.com/keypress/, or similar for grabbing keystrokes
Edit: I think I completely misunderstood
If you're not looking for a rich text editor, and just want some helper buttons for code, maybe selectionStart and selectionEnd is what you're after. I don't know what the browser support is, but it's working in Chrome:
http://jsfiddle.net/5yXsd/

you can not do anything beside basic formatting inside a texarea. If you want complex formatting, look into setting a div's contentEditable attribute to true. Or you can make a wysisyg editor, but that is a big project. I strongly suggest using 3rd party code on this one.

I suggest you using the iframe to implement the WYSIWYG effect.
There is a property in iframe called designMode
See here for more
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
Also there is a lightweight example maybe you would like to take a look:
http://code.google.com/p/rte-light/source/browse/trunk/jquery.rte.js

How does one properly test a javascript widget?

So, I've written a little javascript widget. All a user has to do is paste a script tag into the page, and right below it I insert a div with all of the content the user has requested.
Many sites do similar things, such as Twitter, Delicious and even StackOverflow.
What I'm curious about is how to test this widget to make sure that it will work properly on everyone's webpage. I'm not using an iframe, so I really want to make sure that this code will work when inserted most places. I know it looks the same in all browsers.
Suggestions? Or should I just build one hundred web pages and insert my script tag and see if it works? I would hope there is an easier way than that.

Once you have confirmed that your javascript works cross-browser in a controlled environment, here are some things that might cause problems when used on an actual website:
CSS
You're using a CSS class that is already being used (for a different purpose) by the target website
You're using positioning that might interfere with the site's CSS
The elements you are using are being styled by the website's CSS (you might want to use some sort of "reset" CSS that applies only to your widget)
HTML
You're creating elements with the same id attribute as an element that already exists on the website
You're specifying a name attribute that is already being used (while name can be used for multiple elements, you may not be expecting that)
Javascript
What is the expected behaviour without Javascript enabled? If your script creates everything, is it acceptable for nothing to be present without JS?

At very basic you should make sure your widget works for following test-cases. I am sure then it will work on all web-pages -
http/https: There should not be any warning for HTTPS pages for unencrypted content.
<script> / <no-script>: What if JavaScript is disabled? Is your widget still visible?
What happens when third-party cookies are disabled? Does your widget still work?
Layout-box restrictions: When parent div element's size is less than your widget. Does your widget overflow the given size and destroys owners page?

By keeping all your Javascripts under a namespace (global object) with a very unique name, you should be pretty much OK. Also, you can simply use an anonymous function if you just want to print out something.
Similar question: How to avoid name clashes in JavaScript widgets

dynamically changing position property in css file after d'n'd

hope you can help me, again :)
i want to build a little webbased gui designer. the user can switch into editor-mode and can place the components wherever (s)he wants via drag'n'drop. when (s)he switches back to user-mode i want the position-details in the external css-file to be updated via javascript.
i looked into some examples that sort of do what i want, but i can't seem to figure out, how to get it working.
thnx in advance,
dg

In order to edit external stylesheets with JS you'll need to use the methods listed here : http://www.quirksmode.org/dom/w3c_css.html (see Accessing Stylesheets and Changing Style Sheets). As you can see from PPKs tables, there some significant CSS incompatabilities - this is edge case stuff and I do not know how you would save this generated CSS file.
I would look at posting (possibly with ajax) the values back to the server which generates the new CSS file which is then called by the user-mode page.
In the edit mode I would have all the styles inline (style="...") and then when the page is submitted, enumerate each element's style property to extract the values and use them to build a POST request. Then create the new file on the server.

you want to use jquery... it uses css to select groups of elements and allows you to manipulate the css style on the elements you have selected
lets say you have an div element with the class awesomeDiv:
<div class="awesomeDiv">some content</div>
you can select it using jquery with the following line:
$(".awesomeDiv")
and you can change the css like so:
$(".awesomeDiv").css({'background-color': '#000000', 'width': '250px'});