I am able to create a div using javascript. However, not able to remove that div that I created previously. Only after post-back, I can remove that div. Actually after creating div, script cannot find that div because page did not loaded again.
What I want to do is to create a page that I am able to add an item and remove that item.
Add script works fine.
Remover script:
<script type="text/javascript">
$(function () {
$('.remove ,.shop-button-large, .shop-button-add').click(function () {
var itemToDelete = $(this).attr("data-id");
if (itemToDelete != '') {
$.post("/ShoppingBox/RemoveFromBox", { "id": itemToDelete },
function (data) {
$("#boxItem-" + itemToDelete + "-" + data.ItemCount).fadeOut(300);
});
}
});
});
</script>
The click handler for the remove was done before the DOM node was rendered. It needs to be insider the $(function() { ... }
http://plnkr.co/edit/IhtyH6ampodXICPBv6Fq?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(function() {
$("#create").click(function() {
var createDiv = document.createElement("div");
createDiv.id = "myDiv";
createDiv.style.margin = "0 auto";
createDiv.style.width = "600px";
createDiv.style.height = "600px";
createDiv.style.backgroundColor = "red";
document.getElementById("myBody").appendChild(createDiv);
});
$("#remove").click(function() {
console.log('remove', $("#myDiv"));
$("#myDiv").fadeOut(300);
});
});
</script>
</head>
<body id="myBody">
Create
Remove
</body>
</html>
In order to clarify, I have prepared a simple code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-2.1.3.intellisense.js"></script>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(function () {
$("#create").click(function () {
var createDiv = document.createElement("div");
createDiv.id ="myDiv";
createDiv.style.margin = "0 auto";
createDiv.style.width = "600px";
createDiv.style.height = "600px";
createDiv.style.backgroundColor = "red";
document.getElementById("myBody").appendChild(createDiv);
});
});
$("#remove").click(function () {
$("#myDiv").fadeOut(300);
});
</script>
<title></title>
</head>
<body id="myBody">
Create
Remove
</body>
</html>
Related
I'm trying to use a Ladda progress indicator button. The spinner starts fine, but when I run a setTimeout to simulate another function, it never stops afterward.
Here's the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ladda</title>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="dist/ladda.min.css">
</head>
<body>
<button id="btn" class="ladda-button" data-color="gray" data-style="expand-right">Fred!</button>
<script src="dist/spin.min.js"></script>
<script src="dist/ladda.min.js"></script>
<script>
document.getElementById('btn').onclick = function() {
var l = Ladda.create(document.querySelector('.ladda-button'));
l.start();
var endIt = setTimeout(stopIt, 5000);
}
function stopIt() {
l.stop(); // Also tried Ladda.stopAll();
alert("End it All!");
}
</script>
</body>
</html>
Any thoughts on how to stop this? TIA
The variable l does not exist in the stopIt-function.
<script>
// Ladda variable needs to be put outside of click event or
// the stopId-function won't be able to use it.
var l = Ladda.create(document.querySelector('.ladda-button'));
document.getElementById('btn').onclick = function() {
l.start();
var endIt = setTimeout(stopIt, 5000);
}
function stopIt() {
l.stop(); // Also tried Ladda.stopAll();
alert("End it All!");
}
</script>
I have a script here that requires a bit of manual work done. The developer doesn't provides modification support and I am not exactly JS proficient so I need some help. Basically the script below shows a woocommerce product image, and there's a preload function. I need to insert a div called .temp-image before the preload_img.onload = function and remove the div within preload_img.onload
if ($(img).length > 0) {
img.data('tm-current-image', false);
var a = img.closest("a");
var a_href_original = a.attr('href');
main_product.on('tm_change_product_image', function(e) {
var tm_current_image_element_id = e.element.attr('name'),
$main_product = e.main_product;
var clone_image = img.tm_clone(),
preload_img = new Image();
preload_img.onload = function() {
$main_product.find('#' + tm_current_image_element_id + '_tmimage').remove();
$main_product.find('.tm-clone-product-image').hide();
clone_image.prop('src', preload_img.src).hide();
img.hide().after(clone_image);
clone_image.show();
if (is_iosSlider) {
setTimeout(function() {
is_iosSlider_element.iosSlider('update');
}, 150);
}
};
clone_image
.attr('id', tm_current_image_element_id + '_tmimage')
.addClass('tm-clone-product-image').hide(); //.show();
preload_img.src = e.src;
a.attr('href', e.src);
img.data('tm-current-image', tm_current_image_element_id);
if (is_yith_wcmg) {
yith_wcmg.yith_magnifier('destroy');
yith_wcmg.yith_magnifier(yith_magnifier_options);
}
});
}
i am not clear your question but you can add div using this, suppose you want add div after this is div and you want to add div after this
<script type="text/javascript">
$(".test").append("<div id='specificdiv'>hello world</div>");
</script>
or
<script type="text/javascript">
$("<div id='specificdiv'>hello this is added div</div>").appendTo(".test");
</script>
or
<script type="text/javascript">
$("<div></div>").attr('id','specificdiv').appendTo('body');
</script>
and remove it
<script type="text/javascript">
$( "#specificdiv" ).remove();
</script>
or
<script type="text/javascript">
$( "#specificdiv" ).empty();
</script>
Problem description
I have prepared this index.html, which creates a simple Ext.form.field.HtmlEditor. I want to have a right-click-context-menu, which is capable of doing something with words that were marked by the user:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link id="theme1" rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type ="text/javascript">
Ext.onReady( function(){
var html_editor = Ext.create('Ext.form.HtmlEditor', {
renderTo: Ext.getBody()
});
});
</script>
</head>
<body></body>
What i have done so far:
I have tried to implement listeners and a contextmenu, but it doesnt show the menu when right-clicking, so at the end of the day my index.html looked like:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link id="theme1" rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type ="text/javascript">
Ext.onReady( function(){
var html_editor_right_click_menu_action_1 = Ext.create('Ext.Action', {
text: 'html_editor_right_click_menu_action_1',
handler: function(widget, event) {
console.log("html_editor_right_click_menu_action_1 clicked!");
}
});
var html_editor_right_click_menu = Ext.create('Ext.menu.Menu', {
items: [html_editor_right_click_menu_action_1]
});
var html_editor = Ext.create('Ext.form.HtmlEditor', {
renderTo: Ext.getBody(),
viewConfig: {
listeners: {
containercontextmenu: function(view, e, eOpts) {
console.log("containercontextmenu listener");
}
}
}
});
});
</script>
</head>
<body></body>
Unfortunately, neither a console.log() for the right-click nor a right-click-menu is showing up.
Can someone point me in the right direction?
EDIT: (progress made)
I made a context menu appear using this code in index.html (the index.html is runnable for itself, if someone wants to copy&paste it), but i can't get rid of the browsers-context-menu showing inside the html_editor:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
<link id="theme1" rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type ="text/javascript">
Ext.onReady( function(){
var html_editor_right_click_menu_action_1 = Ext.create('Ext.Action', {
text: 'html_editor_right_click_menu_action_1',
handler: function(widget, event) {
console.log("html_editor_right_click_menu_action_1 clicked!");
}
});
var html_editor_right_click_menu = Ext.create('Ext.menu.Menu', {
items: [html_editor_right_click_menu_action_1]
});
var html_editor = Ext.create('Ext.form.HtmlEditor', {
renderTo: Ext.getBody()
});
html_editor.getEl().addListener('click',
html_editor_click_handler,
html_editor);
function html_editor_click_handler(btn, e, eOpts){
var clicked_button = btn.button;
var click_x_pos = btn.pageX;
var click_y_pos = btn.pageY;
console.log(clicked_button + " " + click_x_pos + " " + click_y_pos);
if(clicked_button == 2){
html_editor_right_click_menu.showAt(click_x_pos,click_y_pos);
}
}
});
</script>
</head>
<body></body>
How to stop the browser-context-menu from appearing above the extjs5-context-menu?
To prevent the default context menu from showing up, call event.preventDefault()
However, there is an extra wrinkle in this case. The HTMLEditor creates an iframe which is used to do the editing.
You have to then set a contextmenu listener on the body of the iframe, after it has loaded. See https://fiddle.sencha.com/#fiddle/ncn
You should not do what you were doing (handling the click and checking which button was clicked) because there are other ways to show the context menu. On the Mac, you can ctrl+click, on Windows you can use the context menu key on the keyboard.
var html_editor_right_click_menu_action_1 = Ext.create('Ext.Action', {
text: 'html_editor_right_click_menu_action_1',
handler: function(widget, event) {
console.log("html_editor_right_click_menu_action_1 clicked!");
}
});
var html_editor_right_click_menu = Ext.create('Ext.menu.Menu', {
items: [html_editor_right_click_menu_action_1]
});
var html_editor = Ext.create('Ext.form.HtmlEditor', {
renderTo: Ext.getBody()
});
// Find the iframe and wait until it's loaded
var iframe = html_editor.getEl().down('iframe', true);
iframe.addEventListener('load', function() {
// It's loaded, now set the context menu listener
var body = iframe.contentWindow.document.body;
body.addEventListener('contextmenu', html_editor_click_handler);
});
function html_editor_click_handler(e, iframe) {
// Prevents the default context menu
e.preventDefault();
var click_x_pos = e.pageX;
var click_y_pos = e.pageY;
console.log("Context click " + click_x_pos + " " + click_y_pos);
html_editor_right_click_menu.showAt(click_x_pos, click_y_pos);
}
I'm trying to çreate a jquery popup script OO style. I'm doing this because I would like to expand this code with more jquery/javascript without losing oversight. The errors I'm receiving are Object #<HTMLDivElement> has no method 'centerPopup' and Resource interpreted as Script but transferred with MIME type text/x-c: I'm new to OO javascript, but have quite the experience in OO PHP
function popup(){
var popupStatus = 0;
$(document).ready(function () {
$("#button").click(function()
{
this.centerPopup();
this.loadPopup();
});
$("#backgroundPopup").click(function()
{
this.disablePopup();
});
$(document).keypress(function(e)
{
if(e.keyCode==27 && popupStatus==1)
{
this.disablePopup();
}
});
});
this.loadPopup = function (){
if(this.popupStatus==0)
{
$("#backgroundPopup").css(
{
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
this.popupStatus = 1;
}
}
this.disablePopup = function (){
if(this.popupStatus==1)
{
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
this.popupStatus = 0;
}
}
this.centerPopup = function (){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
$("#popupContact").css(
{
"position": "absolute",
"top": windowHeight/2-popupHeight/2,
"left": windowWidth/2-popupWidth/2
});
$("#backgroundPopup").css(
{
"height": windowHeight
});
}
}
var popup = new popup()
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="css/popup.css" type="text/css" media="screen" />
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/popup2.js" type="text/javascript"></script>
</head>
<body>
<center>
<div id="button"><input type="submit" value="Popup!" /></div>
</center>
<div id="popupContact">
<a id="popupContactClose">x</a>
</div>
<div id="backgroundPopup"></div>
</body>
</html>
$("#button").click(function()
{
this.centerPopup();
this.loadPopup();
});
this isn't what you actually think. It's not the instance of popup, but the DOM element (#button). You can fix this by saving a reference on your instance at the beginning of your class:
function popup(){
var self = this;
this.popupStatus = 0; // you should use `this` here
$(document).ready(function () {
$("#button").click(function()
{
self.centerPopup();
self.loadPopup();
});
/* ... snip ... */
Can anyone tell me why the touchenter event is not working in this code. The mouseenter works fine on a desktop. Should be so simple, I'm missing something though.
Example here - http://jsfiddle.net/gCEqH/6/
Full code below:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<img id="myImg" src="http://jackiehutchings.com/wp-content/uploads/2011/09/g-plus-icon-96x96.png" />
<script>
$(window).load(function() {
$('#myImg').on("touchenter mouseenter", function(event){
alert('entered!');
});
});
</script>
</body>
</html>
Maybe something like this would work?
var elementIdTouching = "";
$('body').on("touchmove", function(e){
var tList = e.touches; // get list of all touches
for (var i = 0; i < tList.length; i++) {
var thisTouch = tList[i]; // not 100% sure about this
var elementTouching = document.elementFromPoint(
thisTouch.screenX,
thisTouch.screenY
);
if (elementTouching.id != elementIdTouching) {
elementIdTouching = elementTouching.id;
if (elementTouching.id == "myImg") {
alert("entered!");
}
}
}
}).on("touchend", function(e){
elementIdTouching = "";
});
$('#myImg').on("mouseenter", function(e){
alert('entered!');
});
tList ~ https://developer.mozilla.org/en-US/docs/Web/API/TouchList
Disclaimer: I haven't tested this.