I am trying to make an editor everything working fine till now, but now I need to make a handler which could detect any change made in a div or any content edited in the div
<?php $row="testing content" ?>
<!-- my editor section-->
<div id="editor">
<div id="options">
<span><a id="iimg">Insert Image from gallery</a></span>
<span>Upload image to gallery</span>
<span><a id="iheading">Heading</a></span>
</div>
<div id="product_descriptioncontent" contenteditable="true"><?php echo $row; ?>
</div><!-- viewable editor -->
<input type="hidden" name="textareacontent" value="" id="textareacontent" >
<!-- hidden field to submit values -->
</div>
<!-- end of editor section -->
<div id="imc"></div> <!-- image gallery loading section -->
<script>
$(document).ready(function(){
$('#iheading').click(function(){
$('#product_descriptioncontent').append('<h1>Heading</h1>');
});
$('#iimg').click(function(){
$('#imc').load('imagegallery.php',function(){
$('#gallery img').on('click',function(){
$('#product_descriptioncontent').append('<img src="http://localhost/sites/site_pics/otherpic/1.png"><br> ');
});
});
});
$('#product_descriptioncontent').change(function(){
alert("pppp");// how to capture this event
});
});
</script>
I have placed a bit of my code at jsfiddle http://jsfiddle.net/bipin000/UJvxM/1/
thanks for your precious time
Try adding a handler for DOMCharacterDataModified. Might be a cleaner solution.
Do you like this? http://jsfiddle.net/Ralt/hyPQC/
document.getElementById( 't' ).onkeypress = function( e ) {
var evt = e || window.event
alert( String.fromCharCode( evt.which ) )
}
It's not waiting for a change event, it's kind of pointless.
Instead, it's listening to the onkeypress event. Everytime a user changes the content of this div (by adding a character to it), it triggers the event.
You can also see how to get the character clicked (using String.fromCharCode( evt.which )).
PS: a full jQuery solution for your specific case would be this:
$( '#product_descriptioncontent' ).on( 'keypress', function() {
$( '#your-hidden-input' ).val( $( this ).text() )
// Or
$( '#your-hidden-div' ).text( $( this ).text() )
} )
You can bind a custom event to the div and trigger that event upon change
Demo in Stack Snippets and jsFiddle:
$(function() {
$('#wrapper').bind("contentchange", function() {
console.log("Captured content change event");
});
$("#btn").click(function() {
$('#wrapper').html("new value").trigger("contentchange");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="wrapper"></div>
<input type="button" id="btn" value="click here">
Related
$( document ).ready(function() {
console.log( "ready!" );
var counter = 0;
$("button").click(function() {
e="<p class='test' _=\"on click append 'click me' to value of the #search\">click me</p>"
$("h2").append(e)
});
// With on():
$("h2").on("click", "p.test", function(){
alert($(this).text());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/hyperscript.org#0.8.1"></script>
<input id="search" />
<button>generate new element</button>
<h2></h2>
The jquery works, but the hyperscript doesn't append text to the input box.
Well, your hyperscript code appears to work like you intended. The jQuery seems to be the broken one. If you mean to append to the value that the user is typing. Ditch the jQuery appending and just use _hyperscript.
<script src="https://unpkg.com/hyperscript.org#0.8.1"></script>
<input id="search" />
<button _="on click append 'click me' to value of the #search">generate new element</button>
<h2></h2>
I am creating big form and would provide button navigation between sections for accessibility.
It means that you could expand/collapse next or previous section by buttons navigation.
However, when you switch section, current section is hidden (and next one is showed) by display CSS property, so just used button is anymore focused as it's not visible.
Take a look on this JSFiddle or code below to understand issue.
HTML:
An anchor
<article>
<header>First box</header>
<main>
This is first box.
<label><input type="radio" class="focusable" />This is input</label>
<button class="next focusable">Next box</button>
</main>
</article>
<article class="box-hidden">
<header>Second box</header>
<main>
This is second box.
<button class="focusable">Extra button</button>
<label><input type="radio" class="focusable" />This is input</label>
<button class="prev focusable">Previous box</button>
<button class="next focusable">Next box</button>
</main>
</article>
<article class="box-hidden">
<header>Third box</header>
<main>
This is third box.
<label><input type="radio" class="focusable" />This is input</label>
<button class="prev focusable">Previous box</button>
</main>
</article>
An anchor
CSS:
.box-hidden main {
display: none;
}
/* Only cosmetic below */
article { background: #ddd; margin: 10px 0; }
header { background: #ccc; }
button:focus { outline: 2px solid blue; }
JQuery:
$( 'body' ).on('click', '.next', function( event ) {
event.preventDefault();
var next = $( this ).closest( 'article' ).next( 'article' );
$( 'article' ).addClass( 'box-hidden' );
$( next ).removeClass( 'box-hidden' );
});
$( 'body' ).on('click', '.prev', function( event ) {
event.preventDefault();
var prev = $( this ).closest( 'article' ).prev( 'article' );
$( 'article' ).addClass( 'box-hidden' );
$( prev ).removeClass( 'box-hidden' );
});
When you use next or previous button, focus is lost and you have to start again from page begin. It can't happen.
My solution is to find closest focusable (it sucks, because I use class due first focusable could be input either another button) in opened section and focus it:
JSFiddle or add to JQuery:
$( next ).find( '.focusable' )[0].focus();
At end of both functions, analogously replace $( next ) to $( prev ) in second one.
So it will look like:
//[...]
$( next ).removeClass( 'box-hidden' );
$( next ).find( '.focusable' )[0].focus();
});
But I am not sure is it right way, isn't it confuse user navigating by focusable elements?
Maybe I should do it another way?
Note: Buttons are appended by JS, so non-JS users just dont't use them.
Thanks in advance for advices!
I believe you have uncovered a usability issue, not an accessibility issue. I would replace the next and previous buttons with expand/collapse toggles for these sections. This would immediately solve your accessibility issue (because these buttons would always be visible) and it would be a UI model that users are familiar with and solve (what I believe to be) a non-standard and confusing interaction model.
Here is your JSfiddle updated for this implementation (you can probably find better icons than I used) http://jsfiddle.net/zwLLrg9d/7/
I also changed this so that there is correct use of sectioning content. Multiple instances of a <header> element are definitely not recommended.
1.This is my code here i have a div class inner which is dynamically loaded using ajax call
and after ajax call if i click the hide button it is not working.
But its working perfectly before ajax request.
so in order to overcome i just add a outer div and hide that div this time it works..
I don't know why?
$( "#inner" ).replaceWith( data ); /*and*/ $( "#inner" ).hide(); //not working
$( "#inner" ).replaceWith( data ); /*and*/ $( "#outer" ).hide(); //working
Why we cant use the same div class ?
<html>
<div id="outer">
<div id="inner">
<br /> <br /> <br />
<div> <input type="button" value="signup" onclick="changeval();"/>
</div>
<br /> <br />
</div>
</div>
<input type="button" value="hide" onclick="onhide();"/>
<script language="javascript">
function changeval(context)
{
var typeval="sdsf";
var url="sdfsdf";
$.ajax({
type:'POST',
url:'htp://sscs/registration',
data:'&typeval='+typeval+'&url='+url,
success:function(data) {
$( "#inner" ).replaceWith( data );
}
});
}
function onhide()
{
$( "#inner" ).hide();
}
</script>
Use .html()
$("#inner").html(data);
instead of .replaceWith() as
Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.
DEMO of replaceWith, Here you can see div with second class is replace with input content.
It doesn't work because you replace the <div id="inner">.
Including the div and its ID. <div id="outer"> remains so your other hide works, it still finds that div.
Use like this:
$( "#inner" ).replaceWith( function(){
return $(this).data();
} );
After your ajax call the #inner-div does not exist anymore. You are replacing it with the response from your ajax request .
You could use $("#inner").html(data); to keep the div and then hide it once you received the response.
i have a sliding loginbox. if i click on a button the login will slide down $('#loginBox').slideDown()
the loginbox is wrapping by a div
<div id="wrapper" style="position: relative">
<button>Login</button>
<div id="loginBox" style="position: absolute"><input name="username" type="text"></div>
</div>
javascript:
$('#wrapper').on('mouseleave', function(){
$('#loginBox').slideUp();
});
if the input username has preselected values and i want to select one, the mosueleave event is fired. and the loginbox will slide up
how can i prevent this?
here is an example code http://jsfiddle.net/XBPmb/3/
You can check if input has focus on username field:
$('#wrapper').on('mouseleave', function(){
if( $( this ).find( 'input[name=username]' ).is( ':focus' ) ) {
return false;
}
$('#loginBox').slideUp();
});
I've updated your jsFiddle to show how it works.
Using jQuery, when you set a blur event on a text box and set another element as draggable, when you click the draggable element, the blur event does not fire in FireFox. IE is a little better, you get the blur event but you don't get the click event on the draggable element.
If you don't specify the cancel: "" in the draggable constructor, you will get the blur event to fire, but then the element you want to drag is not draggable.
jQuery v1.3.2
jQuery UI v1.7.2
The console.log lines are for FireFox's FireBug plugin.
<HTML>
<HEAD>
<TITLE>Blur/Click Workbench</TITLE>
<script src="js/jquery.js" type="text/javascript" ></script>
<script src="js/ui/ui.core.js" type="text/javascript"></script>
<script src="js/ui/ui.draggable.js" type="text/javascript"></script>
<script type="text/javascript">
function blurring() {
console.log('1 - blurring - ' + $( this ).attr('id'));
}
function clicking() {
console.log('2 - clicking - ' + $( this ).attr('id'));
}
$(document).ready(function() {
$( ".draggableTool" ).draggable( { cancel: "" } );
$( '.property' ).blur( blurring );
$( '#labelContainer' ).click( clicking );
});
</script>
</HEAD>
<BODY>
<input type='text' class='property' id='tb1' />
<br />
<input type='text' class='property' id='tb2' />
<br />
<label class='draggableTool' id='labelContainer' style='height:20px;position:absolute;'>
<textarea id='taLabel' style='height:100%;background-color:white;border:1px solid grey;'>Label</textarea>
</label>
</BODY>
</HTML>
I had the same problem. It's a bug. For a solution see here: http://dev.jqueryui.com/ticket/4261
It could be that the draggable label isn't focusable. Try adding a tabindex attribute to it. This way when you click on it, it'll gain focus (and hence, blur the other elements).