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');

How is the best way to mask an element for be a link?

I have a question, if which are the best way to make a link some element, for example i have so many images and i want to be they links, the traditional way that i know is this:
<a href="someplace.html><img src="myimage.jpg" ></a>
that is the traditional way but, i need do this for all images that i want to be links, so early i'm do this with jquery library:
<img src="cats.jpg" class="link-cat">
and for make this a link:
$('.link-cat').hover(function(){$(this).css('cursor','pointer');},function(){$(this).css('cursor','pointer');}).on('click',function(){windows.location.href="http://www.cats.com";})
this closely be more code but when i have many images i feel this help me more
so i want to ask wheter is the best way to make a link some element not just an image
thanks.

You could wrap them all in an <a> tag if you want users to see the URL in browser status area and use default cursor for <a>
$('.link-cat').each(function(){
$(this).wrap('<a>').parent().attr('href',this.src);
});
As for your approach to set the css using jQuery it would be much simpler doing it in stylesheet with a CSS rule for the image class and using :hover selector
reference: wrap() API Docs

What will be the Java Script Function To implement sliding animation on a <div> on MouseOver Event

i have following images
<div>
<img src="leftarrow.png"/></br>
<img src="insert.png"/></br>
<img src="edit.png"/></br>
<img src="delete.png"/></br>
</div>
Now what i want is that if a user brings mouse pointer over the image named "leftarrow" a vertical bar should slide in (which should be invisible previously) containing rest of the images i.e "insert", "edit" and "delete" like we have toolbox in Visual Studio etc
thanks in advance :)

This is what I used in my webiste I had to do for IPT: JQuery Effects from W3Schools. This site has "try it yourself" where you can fiddle with the code and get to know and understand the workings of this jquery effect better. In order for it to work, you will need to either download or link to the jquery file (http://www.w3schools.com/jquery/jquery.js)
you can use the slideXX() (where XX = direction) and use the 'speed' parameter to animate it. to your liking.
UPDATE: If you want to make something grow/shrink, you can use the same jquery file, but a different command (specifically either the animate or the toggle commands)
the syntax is: $(selector).animate({params},duration,easing,callback);
for the hide/show commands, the syntax is $(selector).toggle(speed_in_milliseconds);
EDIT: oh, and I almost forgot: use the hide command to hide the buttons on page load
Further information for this can also be found at jquery effects - w3schools.
Hope it helps! If not, just comment and I will see what else can be done

How is it better to make a button?

I want to add a 'fancy' button to my page. I see two possibilities:
an a element with a picture as background and add a javascript function to the click event.
or
an img element and add a javascript function to the click event.
What is your opinion ? Which one is the better way to do it and why ?
Thank you !

Other options include:
A link that styled to look like a button using a background image
A Button element that is styled with a background image and no border.
An Input element with type submit or button styled with a background image and no border.
I find that that button element works the best, particularly if you want rollover hover effects.
jQuery UI has a button plug-in that will style pretty much any kind of interactive element into a fancy button.

Wherever possible, UI elements should be defined as CSS backgrounds. They are not part of the site content, so they don't really need to be indexed by search engines.
Semantically-speaking an A-tag implies a link, and therefore the event should be hooked up to the A-tag, not the image.

The first one. You have more options to style it, and it's easier to "theme" it as well. Imaging a "dark theme" and a "light theme", using CSS you can easily keep the same HTML but have totally different styles and images for your button. In some browsers, images are not necessary; you can easily create your button using pure CSS.

It depends on what you're trying to do.
On my project, we have a form that we want to submit using a button rather than javascript, so we're inserting a button element.
<button type="submit">Sign Out</button>
Then you can style the button using CSS.
Other than that, we use images for non-form buttons and javascript for the functionality behind them.

Not sure what you mean by 'fancy' button but first look into what you're able to do with CSS, look for example at http://hellohappy.org/css3-buttons/ or http://twitter.github.com/bootstrap/base-css.html#buttons .
If you want something fancier than that you should define a link in HTML, with and anchor tag since that's semantically correct and set it's background to an image with CSS. I don't see any reason to use Javascript for the click event as long as you simply want to make A GET request to some other page.

Semantically, <button> and <input type="button|submit|reset" /> elements are the correct choice for interactive elements within the page.
If you're simply styling a link to look like a button, then continue to use an <a> element, but define some styles and use a class, such as <a class="button">.
Pretty much any element can be made into a button, and if you use the correct attributes it will maintain semantics.
The following are semantically identical, but the <img> requires JS support:
<!-- the image is of some fanciful text -->
<img src="some/image.jpg" alt="Continue" role="button" tabindex="0" />
<input type="image" src="some/image.jpg" alt="Continue" />
If you simply have a decorative image that doesn't affect the content, you could use a span or div that's styled with CSS:
<span role="button" tabindex="0" class="button continue-button">Continue</span>

I'm pretty sure you can get that effect with plain CSS, no need for JS unless you want to call a function of some sort, and to spazz the button there is no need for a JS function.
You can simply use CSS actions (not sure they are named this way) like active, hover, focus, etc...
here is an example:
http://jsfiddle.net/RQucV/2/
it has a red color for background at first, changes to blue while clicking and becomes purple when visited. this is possible because i used a 'a' tag which has these properties.
i only changed the background color, but you can also changes many other elements, such as font, background image, margins, borders, you name it.
i think its cleaner to use pure CSS because of the JS clutter. if you want to add more scripts later, something bad is bound to happen when the browser has too much scripting to do. besides, parsing CSS might actually be faster than JS.
Just another tip if you go with pure CSS: not all browsers handle CSS the sameway, i highly recommend appending a "reset.css" to your stylesheet in order to make it play along the sameway in every browser you use.
hope it helps!

What's the easiest way to show a tooltip on my web pages?

I'd like to modify some parts of my website to show popups when a user clicks on some <td> elements. I'd like to keep the modification very simple, which is why I considered using a JavaScript framework. It does not really matter which, but I'd like to be able to include html in the tooltip's text.
What's the easiest way to achieve this? Could you maybe give an example?

qTip, a jQuery plugin, works very well for creating tooltips. It also supports HTML markup inside the tips. To have the tooltip show when clicking the element, rather than on mouseover, you can use the 'show' option:
jQuery('.selector').qtip({show: 'click'});