I have setup a page where multiple instances of the jQuery File Upload plugin can be added by clicking a button. The problem I'm having is when you drag files to one of the instances, it adds them to all. I've added the code suggested by the developer to keep this from happening, but it seems to have no effect (though the function is called, I have it logging to console.)
Here's the page I'm working on:
http://bwobst.clients.thomporter.com/upload.html
Here's the JavaScript file that creates the uploaders:
http://bwobst.clients.thomporter.com/upload.js
Or if you prefer, the CoffeeScript:
http://bwobst.clients.thomporter.com/upload.coffee
FYI, this is the bit of code the developer suggests to use:
$(document).bind('drop dragover', function(e) {
e.preventDefault();
});
As I said, I tried adding a console.log to it, and it did indeed get called when I dragged files to the window, but the e.preventDefault() seems to have had no effect.
as said in the documentation you have to specify a dropZone, otherwise its the whole document.
you should change this line:
$('#uploader' + uploaderCount).fileupload();
to
$('#uploader' + uploaderCount).fileupload({dropZone:$('#uploader' + uploaderCount)});
Related
I'm having a problem with a href target _blank on my website.
I cannot determine why it is not opening the link in a new tab, in the section: LATEST PROJECTS > Boranito skat and others, in fact, is instead opening the link in the same tab... can someone explore my website and tell me what is happening and how to solve it? I think it does have to be something with the JS but I am not able to find the problem in the Javascript code since I am a javascript rookie and cannot understand properly what the javascript code here does...
from what I have understood due to previous google and StackOverflow research and behavior watching, it is because javascript is handling the event target _blank in a different way, in fact, javascript here is being used for website change( i mean every click you do on the menu, some divs appears, some divs disappears and it is being handled by 3 js classes), already examined the JS files, clicked right-click, used element inspector> elements> event listeners>click event to see which JS files are being triggered while clicking...
see here detailed image
as you can see, two javascript archives are executing while doing the click event:
1: `jquery.pagepiling.min.js. //// 2: animsition.js`
3: scripts.js
so apparently both javascript classes are handling the events: on click, but since I am a newbie in javascript I cannot understand how to handle this or even understand what the JS does to the website ( i am just tinkering with the given template to try to understand it and to customize it better, (and hence, make the target _blank work properly( as exposed before, while clicking the link, it opens the link in the same page) so I come here for some support of you
Here is the code snippet for you to be able to locate easily inside my website the code while using the code explorer in chrome:
<a href="project-detail.html" target="_blank" class="project-box">
<div class="project-box-inner">
<h5>Boranito<br>Skat</h5>
<div class="project-category">House Design</div>
</div>
</a>
however, will leave the javascript source files here since I am requested to give all possible details here to avoid users being in the need of accessing , here are all the 3 javascript classes handling all the template events which I don't know what they do:
(since I am not able to attach the source code of the javascript classes, I will attach a link for each js file so you could check it, thanks in forward.....
Thank you in advance.
Problem
Your script (scripts.js) on line 13 toggle animsition's feature for links: linkElement: "a.project-box". This will add an handler to every a element with a project-box class. The handler is the following code (I've commented for your understanding):
function(event) {
event.preventDefault(); // prevent the default behavior for links (prevent the behavior you want)
var $self = $(this);
var url = $self.attr('href'); // get the url of the link
if (event.which === 2 || event.metaKey || event.shiftKey || navigator.platform.toUpperCase().indexOf('WIN') !== -1 && event.ctrlKey) {
// open the link in a new tab ONLY IF I clicked on it with the middle mouse button or with Ctrl/Cmd pressed
window.open(url, '_blank');
} else {
// Else do the animation and open the link in the same tab
__.out.call(_this, $self, url);
}
}
Fix
To fix your problem, you can either
Change the way you setup Animsition, be aware that it can modify other links/behaviors in your site
Change the class of your link so it is not matched as the linkElement of your Animsition's setup. For example: remove the class of the a element (it will affect the styling) and you will see that the link opens in a new tab.
Appendix
You can find the handler's code in the devtools -> your link element -> handlers -> click.
I am having a problem on a WordPress site. I have a function which slides down a certain <div>. It is:
jQuery(function($){
$(document).on('click','.tb_usertask_title',function(){
var title = $(this);
var key = title.data('key');
var msg = $('#tb_msg_'+key);
msg.slideDown('fast');
}
});
After executing this function, the <div> slides up again immediately. I think this might be due another script, but I have absolutely no idea how to find which function does this. Is there any way of finding this out? Things I have tried:
Adding breakpoints in my function. This showed me that the folding up happened outside my function.
Using Firebug to break on HTML change. This however redirected to jquery.js, but I did not know how to find out which function triggered the jQuery.
Using Firebug to list the events of my onclick event, but this only showed my function.
These didn't work for me. I also searched for a way to do a function backtrace in Firebug, but without any success.
Use unminified version of jQuery (just for the test and because its more easy to debug).
Look for the dispatch function.
Put a breakpoint in the function where there is an apply usage.
After the code breaks use the F11 to navigate to the binding function.
Please have a look. EDIT: here is a link to a fiddle for the entire code: http://jsfiddle.net/e77aqubx/
This is a section of the jQuery (everything above it seems to be working fine). I am trying to get portfolio.html to show up in the #portfolio div (which is not visible until you click the link for it). The portfolio.html is in the same folder in the directory so I don't think I have to worry about the link.
$("#portfolio_link").click(function(){
$(".header").hide();
$("#about").hide();
$("#portfolio").show();
$("#portfolio").load("portfolio.html");
});
I have a div set up for it in the html as
<div id="portfolio">ooh blah dee</div>
In the jQuery I also tried:
$("#portfolio").show(function(){
$("#portfolio").load("portfolio.html");
});
Have you considered using IFrames? If I understand your issue correctly you can simply change the display of the element on action using something like .toggle()
example: JSFiddle
Edit:
As far as the current code, i would really need to see some more info as your code appears, at a simple form anyway, correct. Can you provide your file structure, or the results from the networking tab in dev tools when you run the event? Or even give this a shot on your .load():
$( "#portfolio" ).load( "portfolio.html", function() {
alert( "Load was performed." );
});
However it's important to remember that .load() is an ajax call so everytime you run your display method you're rendering a view via ajax instead of that one time iframe.
Hmm, the problem might be that the #portfolio_link element is created in the DOM after you attempt to attach the event listener. This could be solved by attaching the event listener to the 'body' tag and filtering down to any click events on children matching the '#portfolio_link' DOM selector.
Try this:
$('body').on('click', '#portfolio_link', function(){
$('.header').hide();
$('#about').hide();
$('#portfolio').show();
$('#portfolio').load('portfolio.html');
});
Jquery works in chain.
Also try first to load and then hide.
Can you use Firebug or Chrome devoper tools to see
what is happening with DOM?
I am trying to avoid my page being refreshed after submitting my form. In order to do this I've added into my javascript section
$("body").on('click',"#register",new_user_pop);
$("body").on('click',"#screen",pop_out);
$("body").on('click',"#new-user",pop_registration);
$('form[name=new-user-form]').on('submit',function(event) {
event.preventDefault();
alert("Not refreshing");
The function works properly as in order to debug it I pasted it on the Terminal from the Chrome's developer tools and it started working.
But for some reason I do not know it does not work it does not get loads at the beginning.
The previous function $("body").on('click')... work all fine.
Make sure your code runs after you've defined the HTML elements you want to attach your events to.
You can either do this by placing your script below the HTML bit you need.
Or you can wrap your code in an onready/load callback:
$(document).ready(function () {
/* code goes here */
});
I asked How can I make the “Preview Post” button save and preview in the same window? on the Wordpress Stack Exchange, but this may be a better question for Stack Overflow as it is more directly related to coding.
Wordpress has a box that allows you to save, preview, and publish your blog posting:
The "Preview" button is actually a link styled as a button:
<a tabindex="4" id="post-preview" target="wp-preview"
href="/?p=67&preview=true" class="preview button">Preview</a>
My problem is that I can't seem to figure out how to get that link to open in the current window. Notice the target="wp-preview" part. I'm trying to get rid of that part, but I think there may be another function bound to that element because I really can't get it to open in current tab / window, even after unbinding it and removing the target attribute.
I'm running the following code as part of a plugin (you can see more info on how to run this as a plugin below), but it is also possible to copy and paste this into Chrome or Firefox's console to test this out yourself without even modifying Wordpress. Please note that when testing you'll need to use jQuery instead of $ in your own functions as Wordpress uses the noconflict method, however the code below is working fine as is.
//select the node and cache the selection into a variable
var $node = jQuery('a.preview');
//add a 1px dotted outline to show we have the right element
$node.css('outline','1px dotted red');
//show current target
console.log($node.prop('target'));
//show if anything is bound - nothing is for me ('undefined')
console.log($node.data('events'));
//remove anything bound to it
$node.unbind();
//set target to _self (current window), just in case
$node.prop('target','_self');
//the remove the target attribute all together
$node.removeAttr('target');
//clone the node
var $clone = $node.clone();
//change the text to new
$clone.text('new');
//remove target from clone
$clone.removeAttr('target');
//unbind the clone
$clone.unbind();
//insert the clone after the original node
$node.after($clone);
//show current target - now shows undefined for me
console.log($node.prop('target'));
//show if anything is bound - still 'undefined'
console.log($node.data('events'));
This is how you would work the code into a theme or plugin:
// set up an action to set a function to run in the wp admin_footer
add_action('admin_footer','my_admin_footer_script',9999);
Here is the function that adds the javascript:
//this function can then be used to add javascript code to the footer
function my_admin_footer_script(){ ?>
<script type="text/javascript">
jQuery(function($){
(above js code here)
});
</script>
<?php
}
This is the result I end up with. If I click the "test" link it will open in the same window. If I click the Preview link it still opens in a new tab.
ps: I'm using the method from Things you may not know about jQuery to check for bound events, and I didn't find anything bound, and I believe Wordpress primarily uses jQuery so I don't think this would be bound with another event handler.
You could try this:
jQuery('.preview.button').click(function(e){
window.location.href = this.href;
return false;
});
Works from the Chrome Inspector.
The syntax is right but the timing is important. If you just do the first part but not the second part it is possible that this will not work because it seems there is a delay with the event that binds to this element.
If you include the second part as well, that waits for 500ms after the page is loaded to run, it seems that it works as expected.
add_action('admin_footer','preview_same_window');
function preview_same_window(){ ?>
<script type="text/javascript">
jQuery(function($){
//first part
jQuery('.preview.button').unbind().removeAttr('target');
//second part
setTimeout(function(){
jQuery('.preview.button').unbind().removeAttr('target');
},500);
});
</script>
<?php
}