Mostrando entradas con la etiqueta div. Mostrar todas las entradas
Mostrando entradas con la etiqueta div. Mostrar todas las entradas

agregar tags html dinamicamente en un div con html5 y javascript puro - sin plugins

Si queremos dejar de usar los a veces pesados wyswyg, o textareas con opciones de edicion de texto que muchas veces ni necesitamos, les presento el codigo con que lo hice posible :

html 


<input type="button" value="Paste HTML" onclick="cargar();">

<div id="test" contenteditable="true">
    Here is some nice text
</div>

javascript 


function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
            
            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}
function cargar(){
    var inn = '<iframe width="560" height="315" src="//www.youtube.com/embed/tlUVVGCdOiQ" frameborder="0" allowfullscreen></iframe>';
document.getElementById('test').focus(); 
    pasteHtmlAtCaret(inn);
}

ver demo aqui http://jsfiddle.net/fenve/8WLNY/

Publicado por
Etiquetas: , , , , ,

AJAX + JQUERY see add entries without reloading ( ver y agregar div sin recargar la pagina )




Me toca hacer un minuto a minuto, algo asi que cada vez que se presente un evento, los usuarios puedan verlo sin refrescar su pagina, gol!!! y debe aparecer sin mayor refrezco de la web para el usuario. 

que que tengo que hacer ? 

probemos esto

<html>
<head>
<title>JQuery Collapse
<script type="text/javascript" src="jquery.js">
<script type="text/javascript">
$(function(){
 $("#mostrar").click(function(event) {
 event.preventDefault();
 $("#caja").slideToggle();
});
$("#caja a").click(function(event) {
 event.preventDefault();
 $("#caja").slideUp();
});
});
</script>
<style type="text/css">
body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 color: #666666; 
}
a{color:#993300; text-decoration:none;}
#caja {
 width:70%;
 display: none;
 padding:5px;
 border:2px solid #FADDA9;
 background-color:#FDF4E1;
}
#mostrar{
 display:block;
 width:70%;
 padding:5px;
 border:2px solid #D0E8F4;
 background-color:#ECF8FD;
}
</style>
</head>
<body>
<a href="#" id="mostrar">MOSTRAR</a>
<div id="caja">
<p>Lorem ipsum dolor sit amet,...</p>
</div>
</body>
</html>
 y si quieres verlo funcionando ve a este link  DEMO

eso es todo.
Publicado por
Etiquetas: , , , ,
Suscribirse a: Entradas (Atom)

CommentFB