Develop Reference

codeigniter emoji picker js not loading

I'm developing a chat like web application where users can comment their text.Now I want to add emojis in the comment box.My code in main layout to load emoji js,
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="<?php echo base_url() ?>scripts/libraries/jquery.emojipicker.js"></script>
<script src="<?php echo base_url() ?>scripts/libraries/jquery.emojis.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#editor-textarea').emojiPicker();
$('#feed-comment-input').emojiPicker();
$('#input-default').emojiPicker();
$('#input-custom-size').emojiPicker({
width: '300px',
height: '200px'
});
$('#input-left-position').emojiPicker({
position: 'left'
});
$('#create').click(function(e) {
e.preventDefault();
$('#text-custom-trigger').emojiPicker({
width: '300px',
height: '200px',
button: false
});
});
$('#toggle').click(function(e) {
e.preventDefault();
$('#text-custom-trigger').emojiPicker('toggle');
});
$('#destroy').click(function(e) {
e.preventDefault();
$('#text-custom-trigger').emojiPicker('destroy');
})
// keyup event is fired
$(".emojiable-question, .emojiable-option").on("keyup", function () {
//console.log("emoji added, input val() is: " + $(this).val());
});
});
I'm using foreach to load all posts,like
<?php foreach($posts->result() as $r) : ?>
....<posts>...
<div class="field">
<input type="text" id="input-default" class="emojiable-option" placeholder="Default">
</div>
<?php endforeach; ?>
How to load js for all the posts (foreach)
The emoji should load for everypost but it loads only for the first post only.I can't guess why it's not loaded for other post's comment.Or what's the problem with foreach?Can anybody help me to solve this issue?
Or Passing the element directly in emojipicker.js 'll solve the probem?Like,
function EmojiPicker( element, options ) {
this.$el = $('textarea');
.....
}

jQuery UI draggable doesn't work on created element

Draggable function works on other already created elements, but not on the one i'm creating within a function after submit button.
I've checked if i'm adding an id to 'li' elements and it works, so why can't I drag it?
It works when I use it on whole 'ul' element.
HTML:
<div class="container">
<form>
<input type="text" id="entry">
<button id="entryButton">button</button>
</form>
<ul id="list">
</ul>
</div>
$("#entryButton").click(function(){
event.preventDefault(); //stops refreshing
var query = $("#entry").val();
if (query !== "") {
var registry = "<div id='drag'>" + query + "</div>"
$("#list").append(registry)
$("#entry").val("");
return false; //also stops refreshing
console.log(registry);
}
})
$("#drag").draggable({
axis: "y"
});

You can only use an id once, so I would suggest that you use class for that. Furthermore, you should add the draggable to the element after creation, as Ferhat BAŞ has said.
https://jsfiddle.net/exqn1aoc/2/
$("#entryButton").click(function(){
event.preventDefault(); //stops refreshing
var query = $("#entry").val();
if (query !== "") {
var registry = "<div class='drag'>" + query + "</div>"
$("#list").append(registry);
$('#list').children().last().draggable();
$("#entry").val("");
return false; //also stops refreshing
console.log(registry);
}
});

Just use class instead of id for multi pal created item to drag and put your draggable inside button click.
$("#entryButton").click(function() {
event.preventDefault(); //stops refreshing
var query = $("#entry").val();
if (query !== "") {
var registry = "<div id='drag' class='drag'>" + query + "</div>"
$("#list").append(registry)
$("#entry").val("");
$(".drag").draggable({
axis: "y"
});
return false; //also stops refreshing
console.log(registry);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div class="container">
<form>
<input type="text" id="entry">
<button id="entryButton">button</button>
</form>
<ul id="list">
</ul>
</div>

First you need to put the draggable() function inside your click function.
Second, do not use id . Duplicate id's are not valid HTML and that's what causing only the first #drag to be draggable. Use class instead
See snippet below
$("#entryButton").click(function() {
event.preventDefault(); //stops refreshing
var query = $("#entry").val();
if (query !== "") {
var registry = "<div class='drag'>" + query + "</div>"
$("#list").append(registry)
$("#entry").val("");
$(".drag").draggable()
return false; //also stops refreshing
console.log(registry);
}
})
.drag {
height: 100px;
width: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div class="container">
<form>
<input type="text" id="entry">
<button id="entryButton">button</button>
</form>
<ul id="list">
</ul>
</div>

Replace div after form submit Jquery

I've created a form that when a user submits, the form the #search div is replaced by the #loading div that shows a loading image. So far it works fine.
The problem I have now is that I want the #loading div to be replaced by the #results 10 seconds after the #loading div is shown.
Can someone please help with the last few lines of code?
Here it is so far:
<div id="search">
<div id="search-area">
<h1>Heading Here</h1>
<form id="target" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<input type="text" value="http://"/>
<input type="submit" value="Analyze"/>
<div class="clearfix"></div>
</form>
</div>
<div class="clearfix"></div>
</div>
<script>
$( "#target" ).submit(function( event ) {
$("#search").slideUp("slow", function() {
$(this).replaceWith("<div id='loading'>" +
"<h2>Please be patient while<br/>" +
"we analyse your website.</h2>" +
"<img src='/images/progress.gif'/>" +
"</div>");
});
$("#loading").delay(10000).slideUp("slow", function(){
$(this).replaceWith("<div id='results'>" +
"<h2>Here are the results</h2>" +
"</div>");
});
event.preventDefault();
});
</script>

$("#target").submit(function (event) {
$("#search").slideUp("slow", function () {
$(this).replaceWith("<div id='loading'><img src='/images/loading.gif'/></div>");
});
setTimeout(function () {
$("#loading").slideUp("slow", function () {
$(this).replaceWith("<div id='done'>Done!</div>");
});
}, 10000);
event.preventDefault();
});

The loading div is not available until after the first animation finishes, the second animation needs to be inside the callback:
$("#target").submit(function (event) {
$("#search").slideUp("slow", function () {
$(this).replaceWith("<div id='loading'>" +
"<h2>Please be patient while<br/>" +
"we analyse your website.</h2>" +
"<img src='/images/progress.gif'/>" +
"</div>");
$("#loading").delay(10000).slideUp("slow", function () {
$(this).replaceWith("<div id='results'>" +
"<h2>Here are the results</h2>" +
"</div>");
});
})
event.preventDefault();
});
DEMO

Replace Log In text to say Logged in with jquery

I am fairly new to this and I need help making the link "login" to be replaced with logged in after clicking submit with javascript/jquery.
Here is what I have on my index page. Currently I have a pop up login page and I need to stop the function after clicking the word submit and then replace login with logged in.
This is a simple demo site and only needs simple code. Thank you!
<Head>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('.popbox').popbox();
});
<div id= "toggle" class='popbox'>
<a div id=login class='open' href='#'>Login</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
<form name="myform" action="#" method="post" id="subForm">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'193731474136796', cookie:true,
status:true, xfbml:true
});
</script>
<img src="facebookbutton.png">
<script>
//your fb login function
function fblogin() {
FB.login(function(response) {
//...
}, {scope:'read_stream,publish_stream,offline_access'});
}
</script>
<div class="line-separator"></div>
<div class="input">
<input type="username" name="cm-name" id="name" placeholder="Username" />
</div>
<div class="input">
<input type="password" name="cm-password" id="password" placeholder="Password" />
</div>
<input type="submit" value="login" id="submit" /> Forgot Username or Password?
</form>
And I have a linked javascript page for the popup.
(function(){
$.fn.popbox = function(options){
var settings = $.extend({
selector : this.selector,
open : '.open',
box : '.box',
arrow : '.arrow',
arrow_border : '.arrow-border',
close : '.close'
}, options);
var methods = {
open: function(event){
event.preventDefault();
var pop = $(this);
var box = $(this).parent().find(settings['box']);
box.find(settings['arrow']).css({'left': box.width()/2 - 10});
box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});
if(box.css('display') == 'block'){
methods.close();
} else {
box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
}
},
close: function(){
$(settings['box']).fadeOut("fast");
}
};
$(document).bind('keyup', function(event){
if(event.keyCode == 27){
methods.close();
}
});
$(document).bind('click', function(event){
if(!$(event.target).closest(settings['selector']).length){
methods.close();
}
});
return this.each(function(){
$(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
$(settings['open'], this).bind('click', methods.open);
$(settings['open'], this).parent().find(settings['close']).bind('click', function(event){
event.preventDefault();
methods.close();
});
});
}
}).call(this);
EDIT:
I figured out what was wrong. Thank you guys!
jsfiddle

This is a pretty simple solution. It replaces the login link with a span that contains the text you wanted.
http://jsfiddle.net/gVVcM/
jQuery:
$('button').on('click',function(){
$('#login').replaceWith('<span>Logged In</span>');
});
HTML:
<a id='login' href='#'>Log In</a>
<button>Submit</button>
edit: now that you posted the submit id.
$('#submit').on('click',function(){
$('#login').replaceWith('<span>Logged In</span>');
});
edit2: Prevent Default?.
$('#submit').on('click',function(e){
e.preventDefault();
$('#login').replaceWith('<span>Logged In</span>');
});

If you're using jQuery you can call the following once you've successfully logged in.
$('a#login.open').text('Logged In');
This is if you're trying to be super specific about the element you're searching for. If you are using chrome or anything other than IE you can try this out in the console debugger window to see that it works.

Jquery Image click not working in IE

HI
In my project I have a Popup image .
When the user clicks on the left part of the image it will redirect the user
to page1.aspx. When the user clicks on the right part of the image
it will redirect the user to page2.aspx. I used JQuery for this and it works
fine in Fire fox. But it doesn't work in IE.
What could be the reason,. Any help will be appreciated.
Thanks
Here is the code
<script type="text/javascript">
swfobject.registerObject("inhalerVideo", "9.0.0", "expressInstall.swf");
/* jQuery Nonsense */
$(document).ready(function()
{
//!\: Slider nav thingy.
$("#link_one").click(function()
{
var aWidth = $(this).width();
if($(this).hasClass("closed"))
{
$(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"});
if($("#link_two").hasClass("open"))
{
var bWidth = $("#link_two").width();
$("#link_two").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"});
$("#link_two a").hide();
}
$("a", this).show();
}
else
{
$("a", this).hide();
$(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"});
}
});
$("#link_two").click(function()
{
var aWidth = $(this).width();
if($(this).hasClass("closed"))
{
$(this).removeClass("closed").addClass("open").animate({width: aWidth + 205 + "px"}, {queue: false, duration: "fast"});
if($("#link_one").hasClass("open"))
{
var bWidth = $("#link_one").width();
$("#link_one").removeClass("open").addClass("closed").animate({width: bWidth - 205 + "px"}, {queue: false, duration: "fast"});
$("#link_one a").hide();
}
$("a", this).show();
}
else
{
$("a", this).hide();
$(this).addClass("closed").removeClass("open").animate({width: aWidth - 205 + "px"}, {queue: false, duration: "fast"});
}
});
//!\: This could all be achieved with CSS.
$(".subnavonfirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
$(".subnavon").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
$(".subnavonlast").prev(".subnavoff").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
$(".subnavonlast").prev(".subnavofffirst").prev(".navoff").css("background-image", "url('images/nav_on_bg.gif')").children("a").css("color", "#fff");
});
</script>
<!-- Main Content Container -->
<div id="mainContentContainer">
<!-- Top Link Slider -->
<div id="headerContainer" class="printHide">
<div id="headerLinkContainer">
<div id="banner_container">
<div id="link_one" class="sub closed">
<img class="major" src="images/patient_info.gif" border="0" />
<img class="minor" src="images/sub_nav.gif" border="0" />
<!-- -->
<!-- -->
</div>
<div id="link_two" class="sub closed">
<img class="major" src="images/prescribe_info.gif" border="0" />
<img class="minor" src="images/sub_nav.gif" border="0" />
<!-- -->
<!-- -->
</div>
<div id="link_three" class="open"><img src="images/isi.gif" border="0" /></div>
</div>
</div>
</div>

Have you tried using an imagemap? That way it's supported by almost all browsers, including IE.
You can also capture the click() event of the <area> tag if you wish.
EDIT: Upon looking at your site, perhaps you could bind the expanding div functionality to the image .major rather than to the .sub div.
It looks like the .sub div is intercepting the click event on IE, but standards-compliant browsers understand that the .minor picture should be rendered 'above' the .sub div.