I want to displayan alert box showing the source of images that are dragged into the #dropzone.
Can anyone see what I'm doing wrong here?
<img src="http://upload.wikimedia.org/wikipedia/en/5/53/Arsenal_FC.svg" alt="arsenal">
<div id="dropzone"></div>
<script>
var drop = document.getElementById(‘dropzone’);
drop.ondrop = function (event) {
window.alert(event.dataTransfer.getData(‘Text’));
return false;
};
drop.ondragover = function () { return false; };
drop.ondragenter = function () { return false; };
</script>
Few Ideas:
It seems that you have copied this code from some website, without correcting quotes. ‘dropzone’ should be 'dropzone'
Div without content is practically invisible. Do you have any css style for height and width?
To get dropped file name you should use something like event.dataTransfer.files[0].fileName
Most web browsers requires one to prevent default action on dragenter and dragover to be able to catch drop event.
drop.ondragover = function (ev) {
ev.preventDefault();
return false;
};
drop.ondragenter = function (ev) {
ev.preventDefault();
return false;
};
Related
I find it very complex to create a separate menu for mobile/small screen devices, so I decided to go with the main one, however my goal is to display all the links by default (when loading the page), actually the user needs to click on a small icon to display the dropdowdown links, it's very popular practise and most users are comfortable with that however my client insist on showing all links without clicking on anything.
I managed to hide that icon but I'm stuck because I cannot display those links anymore, is there a way to activate that onClick function by default? Or maybe disable dropdown secondary list on mobile?
The code below is navigation:
NavigationView.prototype.initialize = function() {
this.$el.on('click', (function(_this) {
return function(e) {
if (!$(e.target).closest('.navigation').length) {
return _this.$('.navigation .open').removeClass('open');
}
};
})(this));
this.$el.on('focus', '.header-navigation-link.primary-link', (function(_this) {
return function() {
var $menuWrapper;
$menuWrapper = $(_this.$el.find('.has-dropdown.open'));
if ($menuWrapper.length) {
return $menuWrapper.toggleClass('open', false);
}
};
})(this));
return this.$el.on('focus', '[data-is-dropdown] .secondary-link', (function(_this) {
return function(event) {
var $target;
$target = $(event.currentTarget);
return $target.parents('.has-dropdown').toggleClass('open', true);
};
})(this));
};
NavigationView.prototype.toggleNavigation = function(e) {
var $target;
$target = $(e.target);
if ($target.parents().hasClass('has-dropdown')) {
e.preventDefault();
return $target.parent().toggleClass('open');
}
};
return NavigationView;
What I'm trying to change is that ToggleClass; active by default so don't need to click on icon to show secondary-list
I believe this is the syntax you are looking for:
this.$el.on('click', myFunction); //runs myFunction onclick
function myFunction() {
//display dropdown code here
}
myFunction(); //runs myFunction onload
I want to make a button that toggles a new class when it's clicked, then when that new class is clicked, it sets goAway to true. Here's what I'm using, does anyone notice something that would prevent this? It works in all other onclick functions that have the line: goAway = true;
var goAway = false;
$("button:not(.MyNewClass)").click(function(){
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
$(document).ready(function() {
$('.MyNewClass').click(function() {
goAway = true;
});
});
I have also tried this below, but neither seem to work...
var goAway = false;
$("button:not(.MyNewClass)").click(function(){
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
$(document).ready(function() {
$('.MyNewClass').click(function() {
window.onbeforeunload = null;
});
});
You can try either one of this.
First one:
$(window).unbind('onbeforeunload');
Second one:
window.onbeforeunload = false;
I hope this works for you.
Update:
I noticed you placed onbeforeunload function inside click function.
Once try by placing this function out side of click function.
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
Finally! I figured it out. Attached a JavaScript onClick event to the element set to toggle with jQuery ;)
The html button:
<button onclick="removeWarning()">This is the button</button>
Then the rest:
<script>
var goAway = false;
$("button").click(function(){
$(this).toggleClass('MyNewClass');
window.onbeforeunload = function () {
if (!goAway) {
return 'Syanara mutha ******';
}
}
});
function removeWarning(){
if ($("button").hasClass('MyNewClass')){
goAway = true;
}
}
</script>
Working with Wordpress Meta Box and I used the code of Dale Sattler from this How can I use the built in Wordpress “browse link” functionality? to create a custom field with wp browse link it works fine, but it inserted the data in wp-editor too.
I try to prevent the default event using code here Use WordPress link insert dialog in metabox? but doesn't work, I try that code too but it have a bug too.
here is my code
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.
var link_btn = (function($){
'use strict';
var _link_sideload = false; //used to track whether or not the link dialogue actually existed on this page, ie was wp_editor invoked.
var input_field = '';
/* PRIVATE METHODS
-------------------------------------------------------------- */
//add event listeners
function _init() {
$('body').on('click', '.link-btn', function(event) {
_addLinkListeners();
_link_sideload = false;
input_field = $(this).attr('href');
var link_val_container = $(input_field);
if ( typeof wpActiveEditor != 'undefined') {
wpLink.open();
wpLink.textarea = $(link_val_container);
} else {
window.wpActiveEditor = true;
_link_sideload = true;
wpLink.open();
wpLink.textarea = $(link_val_container);
}
return false;
});
}
/* LINK EDITOR EVENT HACKS
-------------------------------------------------------------- */
function _addLinkListeners() {
$('body').on('click', '#wp-link-submit', function(event) {
var linkAtts = wpLink.getAttrs();
console.log(linkAtts);
var link_val_container = $(input_field);
link_val_container.val(linkAtts.href);
_removeLinkListeners();
return false;
});
$('body').on('click', '#wp-link-cancel', function(event) {
_removeLinkListeners();
return false;
});
}
function _removeLinkListeners() {
if(_link_sideload){
if ( typeof wpActiveEditor != 'undefined') {
wpActiveEditor = undefined;
}
}
wpLink.close();
wpLink.textarea = $('html');//focus on document
$('body').off('click', '#wp-link-submit');
$('body').off('click', '#wp-link-cancel');
}
/* PUBLIC ACCESSOR METHODS
-------------------------------------------------------------- */
return {
init: _init,
};
})(jQuery);
please help, please ....
Ok I think I found a way to remove the link from the content. In your submit event you need to add:
$('body').on('click', '#wp-link-submit', function(event) {
var linkAtts = wpLink.getAttrs();
var link_val_container = $(input_field);
link_val_container.val(linkAtts.href);
var $frame = $('#content_ifr'),
$added_links = $frame.contents().find("a[data-mce-href]");
$added_links.each(function(){
if ($(this).attr('href') === linkAtts.href) {
$(this).remove();
}
});
_removeLinkListeners();
return false;
});
$('#content_ifr') is the iframe that loads tinymce editor with content inside. Since the iframe is loaded from the same domain you can mess around it (luckily). So you just go through its contents and you're looking for anchors that have data attribute called mce-href, and if the link that you've just added has the href value as the one you've added it removes them.
I re did this part of the code because I've noticed that all the links in my content had this attribute so you cannot just remove all anchors that have
data-mce-href attribute because that would remove all of them. And you only want to remove those you've added in your metabox.
This did the trick for me :)
I asked this question yesterday hopefully this one is clearer as I've now provided a working example of my store.
I'm developing a Shopify Theme. I've been using Timber as my base and I'm currently having a problem with my Quick Cart and Quick Shop/View drawers.
I have 2 drawers on the right of my site, 1 for the cart and 1 for the product quick view option. The drawers currently slide open - #PageContainer moves to the left on click to reveal each drawer.
As they are currently sitting on top of each other I need to alter the JS so that on click the z-index changes so that the correct drawer being called is highest in the stack.
I'm not great with JS so not sure if this is a simple task?
Here is a link to my Dev Store
JS:
timber.Drawers = (function () {
var Drawer = function (id, position, options) {
var defaults = {
close: '.js-drawer-close',
open: '.js-drawer-open-' + position,
openClass: 'js-drawer-open',
dirOpenClass: 'js-drawer-open-' + position
};
this.$nodes = {
parent: $('body, html'),
page: $('#PageContainer'),
moved: $('.is-moved-by-drawer')
};
this.config = $.extend(defaults, options);
this.position = position;
this.$drawer = $('#' + id);
if (!this.$drawer.length) {
return false;
}
this.drawerIsOpen = false;
this.init();
};
Drawer.prototype.init = function () {
$(this.config.open).on('click', $.proxy(this.open, this));
this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this));
};
Drawer.prototype.open = function (evt) {
// Keep track if drawer was opened from a click, or called by another function
var externalCall = false;
// Prevent following href if link is clicked
if (evt) {
evt.preventDefault();
} else {
externalCall = true;
}
// Without this, the drawer opens, the click event bubbles up to $nodes.page
// which closes the drawer.
if (evt && evt.stopPropagation) {
evt.stopPropagation();
// save the source of the click, we'll focus to this on close
this.$activeSource = $(evt.currentTarget);
}
if (this.drawerIsOpen && !externalCall) {
return this.close();
}
// Add is-transitioning class to moved elements on open so drawer can have
// transition for close animation
this.$nodes.moved.addClass('is-transitioning');
this.$drawer.prepareTransition();
this.$nodes.parent.addClass(this.config.openClass + ' ' + this.config.dirOpenClass);
this.drawerIsOpen = true;
// Run function when draw opens if set
if (this.config.onDrawerOpen && typeof(this.config.onDrawerOpen) == 'function') {
if (!externalCall) {
this.config.onDrawerOpen();
}
}
if (this.$activeSource && this.$activeSource.attr('aria-expanded')) {
this.$activeSource.attr('aria-expanded', 'true');
}
// Lock scrolling on mobile
this.$nodes.page.on('touchmove.drawer', function () {
return false;
});
this.$nodes.page.on('click.drawer', $.proxy(function () {
this.close();
return false;
}, this));
};
Drawer.prototype.close = function () {
if (!this.drawerIsOpen) { // don't close a closed drawer
return;
}
// deselect any focused form elements
$(document.activeElement).trigger('blur');
// Ensure closing transition is applied to moved elements, like the nav
this.$nodes.moved.prepareTransition({ disableExisting: true });
this.$drawer.prepareTransition({ disableExisting: true });
this.$nodes.parent.removeClass(this.config.dirOpenClass + ' ' + this.config.openClass);
this.drawerIsOpen = false;
this.$nodes.page.off('.drawer');
};
return Drawer;
})();
Update
As instructed by Ciprian I have placed the following in my JS which is making the #CartDrawer have a higher z-index. I'm now unsure how I adapt this so that it knows which one to have higher dependant on which button is clicked. This is what I've tried:
...
Drawer.prototype.init = function () {
$(this.config.open).on('click', $.proxy(this.open, this));
$('.js-drawer-open-right-two').click(function(){
$(this).data('clicked', true);
});
if($('.js-drawer-open-right-two').data('clicked')) {
//clicked element, do-some-stuff
$('#QuickShopDrawer').css('z-index', '999');
} else {
//run function 2
$('#CartDrawer').css('z-index', '999');
}
this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this));
};
...
The approach would be like this:
$('.yourselector').css('z-index', '999');
Add it (and adapt it to your needs) inside your onclick() function.
if you need to modify the z-index of your div when clicking a buton, you shoud put in this code on your onclick() function, else if you need to activate it when you looding the page you shoud put it on a $( document ).ready() function , the code is :
$('#yourID').css('z-index', '10');
You can use:
document.getElementById("your-element-id").style.zIndex = 5;
It's pure Javascript and sets the z-index to 5. Just bind this to onClick event!
I have the following snippet:
YUI().use('transition', 'node-event-delegate', function(Y) {
var button = Y.one('#subscribe');
var close = Y.one('#close');
function open (e) {
var node = Y.one('#popup-subscribe');
node.show(true);
}
button.on('click', open);
function closeIt (e) {
var node = Y.one('#popup-subscribe');
node.hide(true);
}
close.on('click', closeIt);
});
But when I test it and click on close for example I get this error message:
node.hide is not a function
node.hide(true);
Any idea why?
You may have to show us your HTML because with the right javascript includes and appropriate HTML, it works fine here: http://jsfiddle.net/jfriend00/27fJW/. So, I would suspect that you either don't have the right HTML or you don't have the right core YUI includes.
HTML I made up to match the code:
<script src="http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js"></script>
<button id="subscribe">Open</button>
<button id="close">Close</button>
<div id="popup-subscribe">Popup content</div>
Your code (unchanged):
YUI().use('transition', 'node-event-delegate', function(Y) {
var button = Y.one('#subscribe');
var close = Y.one('#close');
function open (e) {
var node = Y.one('#popup-subscribe');
node.show(true);
}
button.on('click', open);
function closeIt (e) {
var node = Y.one('#popup-subscribe');
node.hide(true);
}
close.on('click', closeIt);
});