i would like to know how i can prevent two containers from canceling. the codes are almost the same i just changed a few things it doesn't mater which one i put first but the second one is not working if i switched them around the one that i put first works but not the second one. I'm using toggle to display one at a time. I'm just going to post a small part of my code.
JavaScript for first part
<script>
var z = 1; //value to make div overlappable
$('#addText').click(function (e) {
/** Make div draggable **/
$('<div />', {
class: 'ui-widget-content',
appendTo: '.container',
draggable: {
containment: 'parent',
start: function( event, ui ) {
$(this).css('z-index', ++z);
}
}
});
});
$(document).on("dblclick", '.text', function()
{
$(this).hide(); $(this).closest('.item').find('.edit_text').val($(this).text()).show();
});
$(document).on("click", ".edit_text", function()
{
return false;
});
$(document).on("click", function()
{
var editingText = $('.edit_text:visible');
if (editingText.length)
{
editingText.hide();
editingText.closest('.item').find('.text').text($(editingText).val()).show();
}
});
var count = 1;
var selectedDraggable;
ko.bindingHandlers.draggable={
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).draggable();
$(element).addClass('item' + count);
count++;
$(element).on('click', function () {
selectedDraggable = $(this);
})
}
};
var vm=function(){
var self=this;
self.items=ko.observableArray();
self.textContent = ko.observable('');
self.init=function(){
self.items([]);
}
self.remove=function(item){
console.log(item);
self.items.remove(item);
}
self.addNew = function() {
self.items.push( self.textContent() );
self.textContent('');
}
self.init();
}
ko.applyBindings(new vm());
JavaScript for second part
var z = 1; //value to make div overlappable
$('#addText').click(function (e) {
/** Make div draggable **/
$('<div />', {
class: 'ui-widget-content',
appendTo: '.container4',
draggable: {
containment: 'parent',
start: function( event, ui ) {
$(this).css('z-index', ++z);
}
}
});
});
$(document).on("dblclick", '.text1', function()
{
$(this).hide(); $(this).closest('.item1').find('.edit_text1').val($(this).text()).show();
});
$(document).on("click", ".edit_text1", function()
{
return false;
});
$(document).on("click", function()
{
var editingText = $('.edit_text1:visible');
if (editingText.length)
{
editingText.hide();
editingText.closest('.item1').find('.text1').text($(editingText).val()).show();
}
});
var count = 1;
var selectedDraggable;
ko.bindingHandlers.draggable={
init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).draggable();
$(element).addClass('item1' + count);
count++;
$(element).on('click', function () {
selectedDraggable = $(this);
})
}
};
var vm=function(){
var self=this;
self.items1=ko.observableArray();
self.textContent1 = ko.observable('');
self.init=function(){
self.items1([]);
}
self.remove=function(item){
console.log(item);
self.items1.remove(item);
}
self.addNew1 = function() {
self.items1.push( self.textContent1() );
self.textContent1('');
}
self.init();
}
ko.applyBindings(new vm());
toggle
$("#show_first").click(function(){
$(".firstdiv").toggle();
$(".seconddiv").hide();
});
$("#show_second").click(function(){
$(".secoddiv").toggle();
$(".firstdiv").hide();
});
HTML for toggle
<button type="button" id="show_first">Display Front</button>
<button type="button" id="show_second">Display Back</button>
HTML for container and input text (first)
<div class="firstdiv"><center>Front</center>
<div class="container1" style=" float: left;" >
<p align="center"><textarea data-bind="value: textContent" Placeholder="Type text to append" rows="4" cols="21"></textarea>
<button type="button" data-bind="click: addNew">Create</button></p>
<div id="box" class="container" style="float:left;">
<div data-bind="foreach:items" class="fix_backround">
<div class="item" data-bind="draggable:true,droppable:true">
<center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center></div></div></div></div></div>
HTML for container and input text (second)
<div class="seconddiv"><center>second</center>
<div class="container3" style=" float: left;" >
<p align="center"><textarea data-bind="value: textContent1" Placeholder="Type text to append" rows="4" cols="21"></textarea>
<button type="button" data-bind="click: addNew1">Create</button></p></div>
<div id="box1" class="container4" style="float:left;">
<div data-bind="foreach:items1" class="fix_backround1">
<div class="item1" data-bind="draggable:true,droppable:true">
<center><span class="text1" data-bind="text:$data"></span><input class="edit_text1"/></center></div></div></div></div></div>
Script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet"href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://circletype.labwire.ca/js/circletype.js"></script><script src="http://tympanus.net/Development/Arctext/js/jquery.arctext.js"></script>
You are including jQuery, Knockout, and jQuery-UI each twice. That's probably not the problem, but it's not good.
You're using jQuery to control which block displays, and that's a Knockout no-no. It is Knockout's job to manipulate the DOM. Have a look at Knockout templates, or the if binding for ways of controlling what displays.
It looks like you have a typo in your toggle js for the seconddiv class. You're missing an 'n' in your jquery call for it: secoddiv. If this code is straight from the source that may be the problem.
Related
I have some html code with below structure. when I click on tag a with "moreCases" class,div with class "container-cases" is become show and when I click on "lessCases" div with class "container-cases" is become hide but tag a with "moreCases" do n't become show.how I can solve it?
HTML:
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
JavaScript:
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.prev(".moreCases").removeClass('hide').addClass('show');
});
});
});
You have to target the parent() before using prev():
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
});
.hide{
display: none;
}
.show{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
Remove the last .addClass('hide')
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show');
});
});
Working example
There is no need to iterate over the .moreCases & .lessCases instead you can simply add the click event to it. Beside since the click is on an a tag , prevent the default behavior by adding e.preventDefault
$(document).ready(function() {
$(".moreCases").click(function(e) {
$(this).next().removeClass('hide').addClass('show');
$(this).removeClass('show').addClass('hide');
});
$(".lessCases").click(function(e) {
e.preventDefault();
$(this).parent().removeClass('show').addClass('hide');
$(this).parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
I need for the row number to show up on the added items to the list
<!DOCTYPE html>
<html>
<head>
<title>JavaScript & jQuery - Chapter 7: Introducing jQuery -
Example</title>
<link rel="stylesheet" href="css/c7.css" />
</head>
<body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries <span id="counter"></span></h2>
<ul>
<li id="Row: 1" class="hot"><em>fresh</em> figs</li>
<li id="Row: 2" class="hot">pine nuts</li>
<li id="Row: 3" class="hot">honey</li>
<li id="Row: 4">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button>
</div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description" />
<input type="submit" id="add" value="add" />
</form>
</div>
<script src="js/jq.js"></script>
<script src="js/ex.js"></script>
</body>
</html>
Js
$(function() {
var ids = '';
var $listItems = $('li');
$listItems.on('mouseover click', function() {
ids = this.id;
$listItems.children('span').remove();
$(this).append(' <span class="priority">' + ids + '</span>');
});
$listItems.on('mouseout', function() {
$(this).children('span').remove();
});
});
$(function() {
var $list, $newItemForm, $newItemButton;
var item = '';
$list = $('ul');
$newItemForm = $('#newItemForm');
$newItemButton = $('#newItemButton');
$('li').hide().each(function(index) {
$(this).delay(450 * index).fadeIn(1600);
});
function updateCount() {
var items = $('li[class!=complete]').length;
$('#counter').text(items);
}
updateCount();
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e) {
e.preventDefault();
var text = $('input:text').val();
$list.append('<li>' + text + '</li>');
$('input:text').val('');
updateCount();
});
$list.on('click', 'li', function() {
var $this = $(this);
var complete = $this.hasClass('complete');
if (complete === true) {
$this.animate({
opacity: 0.0,
paddingLeft: '+=180'
}, 500, 'swing', function() {
$this.remove();
});
} else {
item = $this.text();
$this.remove();
$list
.append('<li class=\"complete\">' + item + '</li>')
.hide().fadeIn(300);
updateCount();
}
});
});
When you hover your mouse over the rows, the row number would appear trailing
(appear after) the text of that row. After the mouse leaves the row, the row number should disappear. The “NEW ITEM” button in the example let you insert new rows. After new rows are inserted, you need to make sure the effect you implemented above works for the newly added rows also.
You can view my page here: http://et791.ni.utoledo.edu/~gaugsbu/asg4/asg4.2.html
Rules for event delegation are pretty simple. You have to delegate events to an element/document that is a permanent asset and target the elements that are dynamic.
You can't store $listItems since that collection won't include new ones added after code is run.
It seems your <ul> is permanent so do something like:
$('ul').on('mouseover click', 'li', function(event){
// do stuff
}).on('mouseout','li', function(event){
// do stuff
})
I have html where I display array from js
Here is code
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<div id ="container">
<div id="data"></div>
<input id="text" type=text/>
<button id="get" onclick="getValue()">Update</button>
</div>
Here js code
var tasks = ["Task 1", "Task 2"];
$.each(tasks, function(){
$('#data').append('<li class="clickable">'+this + '</li>');
});
I get element from list like this
$(document).on('click', '.clickable', function() {
var str = $(this);
});
And now I need to strike it via js. How I can do this?
You can do this to strike the element on click:
var tasks = ["Task 1", "Task 2"];
$.each(tasks, function(){
$('#data').append('<li class="clickable">'+this + '</li>');
});
$(document).on('click', '.clickable', function() {
$(this).css("text-decoration", "line-through");
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<div id ="container">
<div id="data"></div>
<input id="text" type=text/>
<button id="get" onclick="getValue()">Update</button>
</div>
But if you want to add and remove strike on click each time then use this:
var tasks = ["Task 1", "Task 2"];
$.each(tasks, function(){
$('#data').append('<li class="clickable">'+this + '</li>');
});
$(document).on('click', '.clickable', function() {
$(this).toggleClass('strikeClass');
});
.strikeClass{
text-decoration: line-through;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<div id ="container">
<div id="data"></div>
<input id="text" type=text/>
<button id="get" onclick="getValue()">Update</button>
</div>
You have two options.
1) Wrap around del tag
$(document).on('click', '.clickable', function() {
var str = $(this);
srt.wrap("<del></del>");
});
2) Add style attribute
$(document).on('click', '.clickable', function() {
var str = $(this);
str.css("text-decoration", "line-through");
});
If you need to remove element, simply do onClick="$(this).remove();"
$(document).ready(function() {
$(document).on('click', '.clickable', function() {
$(this).remove();
});
var tasks = ["Task 1", "Task 2"];
$.each(tasks, function() {
$('#data').append('<li class="clickable">' + this + '</li>');
});
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<div id="container">
<div id="data"></div>
<input id="text" type=text/>
<button id="get" onclick="getValue()">Update</button>
</div>
i do not understand what you mean
$(document).on('click', '.clickable', function() {
var txt = this.textContent;
this.innerHTML = txt.strike();
});
I have this working bootstrap popover, which works fine with time attribute.
But I want it to have the functionality of when someone has their mouse on the content it should not close and should close when mouse leaves the content.
Below is the code related to it. https://jsfiddle.net/bob_js/eLLaacju/5/
HTML
<div>
Title
</div>
<div class="container">
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-a" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
<br>
<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="hover" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-b" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
</div>
jQuery:
$(function () {
$("#popover-a").popover({
html: true, trigger: 'hover', delay: {show:50, hide: 1000},
content: function(){
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true, trigger: 'hover', delay: {show:50, hide: 1000},
content: function(){
return $('#popover-content-b').html();
}
});
});
CSS:
.circle-macro {
border-radius: 50%;
background-color: rgb(68, 104, 125);
color: white;
padding: 0 8px;
font-family: 'Times New Roman';
font-style: italic;
z-index: 10;
cursor: pointer;
}
.hidden{
display: none;
}
If you mean that when the user moves the mouse on the popover, it should not close, then here is a code I use for this. Credits go to the author of this fiddle for the original idea and code.
$.fn.popover.Constructor.prototype.leave = (function(fn) {
return function(obj) {
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget).data("bs." + this.type);
if (!self) {
self = new this.constructor(obj.currentTarget, this.getDelegateOptions());
$(obj.currentTarget).data("bs." + this.type, self);
}
var container, timeout;
fn(obj);
if (self.$tip && self.$tip.length) {
container = self.$tip;
timeout = self.timeout;
container.off("mouseenter.popover").one("mouseenter.popover", () => {
clearTimeout(timeout);
container.off("mouseleave.popover").one("mouseleave.popover", () => {
$.fn.popover.Constructor.prototype.leave.call(self, self);
});
});
}
};
})($.fn.popover.Constructor.prototype.leave);
What it does is basically captures mouse enters on the popover, and denies closing the popover.
https://jsfiddle.net/bob_js/eLLaacju/6/
jQuery
$(function () {
$("#popover-a").popover({
html: true, trigger: 'manual', animation:false,
content: function(){
return $('#popover-content-a').html();
}
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
$("#popover-b").popover({
html: true, trigger: 'manual', animation:false,
content: function(){
return $('#popover-content-b').html();
}
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
});
I have updated it and this works fine, found it in stackoverflow as well.
http://plnkr.co/edit/x2VMhh?p=preview
first, there are codes I wrote.
<body>
add
<div class="panel">
<div class="box"></div>
</div>
<div class="popup">
sure
cancel
</div>
<script>
$(function(){
$('#btn').click(function(){
$('.popup').show();
$('#sure').on('click', function(){
var $box = "<div class='box'></div>";
$('.panel').append($box);
});
$('#cancel').on('click', function(){
$('.popup').hide();
});
});
})
</script>
</body>
then,there are steps i did.
the result
why i click the cancel button at first, and next time i click Sure button, there appears two DIVs actually.I just want one div.
How to solve this problem?
Do not add the event-handler as many times you click on #btn.
Bind click handlers for "sure" and "cancel" out of the click handler for "#btn"
$(function() {
$('#btn').click(function() {
$('.popup').show();
});
$('#sure').on('click', function() {
var $box = "<div class='box'>Added</div>";
$('.panel').append($box);
});
$('#cancel').on('click', function() {
$('.popup').hide();
});
})
.popup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
add
<div class="panel">
<div class="box"></div>
</div>
<div class="popup">
sure
cancel
</div>
If elements in the pop-up are created dynamically, Use Event delegation
$(function() {
$('#btn').click(function() {
$('.popup').show();
});
$(document).on('click', '#sure', function() {
var $box = "<div class='box'>Added</div>";
$('.panel').append($box);
});
$(document).on('click', '#cancel', function() {
$('.popup').hide();
});
})
.popup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
add
<div class="panel">
<div class="box"></div>
</div>
<div class="popup">
sure
cancel
</div>