i'm new here
images > http://cl.ly/3g070L1i3n2U1K2g322I
how to delete images (per images) after successfully upload in swfupload ?
can anyone give me some example ?
i got upload code from this tutorial -> http://webdeveloperplus.com/jquery/multiple-file-upload-with-progress-bar-using-jquery/
enter code hereConsider JQuery hide(). It does not only hide but virtually removes the component, which means if you have stuff positioned in relative mode right under for example, this content will move up.
In the html :
<button type="button" id="mybutton">Hello</button>
Just place your JQuery like that, for example. After click the button disappears :
<script>
$(document).ready(function($){
$('#mybutton').click() { $('#mybutton').hide(); });
});
</script>
try this
.bind('uploadSuccess', function(event, file, serverData){
var item=$('#log li#'+file.id);
item.find('div.progress').css('width', '100%');
item.find('span.progressvalue').text('100%');
var pathtofile='<a href="uploads/'+file.name+'" target="_blank" >view »</a>';
item.addClass('success').find('p.status').html('Done!!! | '+pathtofile);
item.remove();//to delete item from Q
})
this may helps you
Related
I want to show text and image with close button as given in the image below in the popup automatically when the website open in laravel 5.6.
I couldn't found the solution.
Put this element in div and set display:none; as it style.
For example
<div id="yourElementID" style="display:none;">
<img src="img.jpg"><p>text</p>
</div>
For displaying it on load :
You should use Javascript/jQuery for it.
Either pure JS
<script>
window.onload = function() {
document.getElementById('yourElementID').style.display = "block";
};
</script>
or with jQuery
$(document).ready(function() {
$('#yourElementId').show();
});
If you want it to wait little bit before showing use timeout.
And well If you want it to have close button aswell, then you can put some img or a element there and set attribute onClick="$(this).hide();" <- If you are using jQuery
My question may sound confusing but actually it's not. Let me clear you the things. The scenario is I've following HTML code:
/*This is the hyperlink I've given for example here. Many such hyperlinks may present on a webpage representing different question ids' */
<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21679" title="Fixed" href="#fixedPopContent" class="fixed" data-q_id="21679" id="fix_21679">Fixed</a>
/*Following is the HTML code for jQuery Colorbox pop-up. This code has kept hidden initially.*/
<div class="hidden">
<div id="fixedPopContent" class="c-popup">
<h2 class="c-popup-header">Question Issue Fix</h2>
<div class="c-content">
<h3>Is question reported issue fixed?</h3>
Yes
No
</div>
</div>
</div>
Now upon clicking on this hyperlink I'm showing a pop-up(I've used jQUery Colorbox pop-up here. It's ok even if you are not familiar with this library.) On this pop-up there are two buttons Yes and No. Actually these are not buttons, these are hyperlinks but showing as a buttons using CSS. Now my issue is when user clicks on hyperlink 'Yes' the page is redirecting to the href attribute value and the page reloads.
Actually I want to get to the page mentioned in href attribute but the page should not get reload or refresh. How to achieve this? Following is the jQuery code for colorbox pop-up as well as for Yes and No buttons present on this pop-up. I've tried this much but it didn't work for me. The page is getting redirected and reloaded.
My code is as follows:
$(document).ready(function() {
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$('#fixedPop_url').attr('href', action_url1);
$(".fixed").colorbox({inline:true, width:666});
$("#fixedPop_url").click(function(event) {
event.preventDefault();
$("#fix_"+qid).hide();
$("#notfix_"+qid).show();
});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
});
So you need to load the page at the url but not navigate to it.
You can use .load() .
So in your case, lets say that your pop container div class is .popup, and the div where you want to load the urls content has an id say #container.
$(".popup a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('delhref');
$("#container").load(url);
});
Few things to keep in mind,
This will mostly not work for urls pointing to any other domain. (Same Origin Policy)
Any content loaded with this function (.load()) shall be inserted within the container and all the incomming scripts if any shall be executed.
You can do that with history.js. Here is an example;
HTML:
Delete
Update
<div id="content"></div>
JS:
var History = window.History;
if (!History.enabled) {
return false;
}
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
$('#content').load(State.url);
});
$('body').on('click', 'a', function(e) {
var urlPath = $(this).attr('href');
var Title = $(this).text();
History.pushState(null, Title, urlPath);
return false;
});
You can see code here: jsfiddle code
You can see demo here: jsfiddle demo
Note: Urls in example cannot be found. You need to update it according to your needs. This simply, loads content in href without refreshing your page.
I am trying to make a script which detects clicks on google ads. All events works like onmouseover, out etc except click, focus, mousedown. When i click on google ads it open its ads link but dont run my jquery script on click event. I have tried preventdefault and other functions like that too.
I want to detect click on google ads and parse the iframe width and height to php file when clicked.
$(window).load(function(){
$('iframe').bind('mouseover', function(){
var iframeID = $(this).attr('id');
$(this).contents().find('html').unbind();
$(this).contents().find('html').bind('click', function(){
alert(iframeID);
});
});
});
This is the code run on mouseover but not on click event.
You need to bind the click events on the contents of the iframe untill the contents are loaded completely inside the iframe. Try wrapping the code inside the load event.
$('iframe').load(function() {
var iframeID = $(this).attr('id');
$(this).contents().find('html').unbind();
$(this).contents().find('html').bind('click', function(){
alert(iframeID);
});
});
Capturing the click event of an iFrame is not possible when the content is from another domain.
What you can do is detect the mouse-enter and leave on iframe.
Here is example
<div class="item">
<iframe src="http://www.google.com" width="612" height="344" frameborder="0"></iframe>
</div>
<script type="text/javascript">
$("div.item iframe")
.mouseover(function(){
alert("mouse over");
})
.mouseout(function(){
alert("mouse out");
});
</script>
I am using file upload in my current project. When I click browse button, the file will be uploaded automatically and read number of lines and display that details immediately. I finished this task.
But when I will uploaded large size of file it will take some time to upload. So I need to implement file uploading progress bar.
I used the the following example.
http://aryweb.nl/projects/mootools-form-upload/Demos/Upload.html
http://mootools.net/forge/p/form_upload
<script>
window.addEvent('domready', function(){
var upload = new Form.Upload('files', {
onComplete: function(){
alert('Completed uploading the Files');
}
});
if (!upload.isModern()){
// Use something like
}
});
</script>
This script working well.
But when I will click submit button, that time will be displaying progress bar.
I need to change when I will click browse button that time will be display the progress bar. I don't know how to change.
You are using mootools plugin javascript library that allows you to upload files and track the progress. It has little to do with PHP.
Since demo and documentation for it doesn't have progress tracking, if you look closely at https://github.com/arian/mootools-form-upload/blob/master/Source/Form.Upload.js then you'll see that progress doesn't have any callback in it..
onProgress: function(event){
var loaded = event.loaded, total = event.total;
progress.setStyle('width', parseInt(loaded / total * 100, 10).limit(0, 100) + '%');
},
so you need to either
Use suggested HTML it expects (<div class='progress'></div>), OR
Add your custom behaviour by extending options it includes before that
I have a serious problem about Fancybox. I have a website with an image gallery. Users can report images if there is any abusing data on the image.
At the moment I am using Fancybox to display the report form. I am validating the input fields with jQuery and submit data with AJAX and the scripts are on the parent page.
report
This works perfectly. But if the user opens the link in new tab or new window, a problem arises because the validation scripts are not on the report form. Those are on the parent page.
So is there any way to stop right clicking or clicking mouse scroll or how will I overcome this problem?
Thanks
Another option is to catch all mouse buttons (left, right and wheel) when clicking over the selector .report and trigger fancybox if any like :
$(document).ready(function () {
$(".report").on('mousedown', function (e) {
if (e.which == 1 || e.which == 3 || e.which == 2) {
e.preventDefault();
$(this).fancybox({
// API options
}).click();
}
return false;
});
$(document).on('contextmenu', function (e) {
e.preventDefault();
});
});
See JSFIDDLE and try any mouse button over the thumbnails.
NOTE: .on() requires jQuery 1.7+
You could invoke fancybox via the function call on a div or input.button element
<input type="button" value="click here" class="fake-fancy" data-href="linktothereportform?id=5">
<span class="fake-fancy" data-href="linktothereportform?id=5">Report</span>
<script type="text/javascript">
jQuery('.fake-fancy').click(function(){
jQuery.fancybox.open({
href: jQuery(this).attr('data-href'),
type: 'ajax'
});
});
</script>
You can void the right click and middle click options by replacing all such links with buttons.
i.e.
$('a.report').replaceWith('<button onclick="window.location.href=\'linktothereportform?id=5\'">report</button>');
You may need to tweak the above a bit, plus style the buttons to look like links etc. but the general idea is to get the 'open-in-same-window' functionality while voiding all 'open-in-new-window' possibilities.
All the credit should got to the people who gave their correct valuable answers for my question.
I decided to make a good answer for people who will seek answers for this question in future.
I would basically divide my answer into two section.
As for my original question I needed a solution with hyperlinks.
So the first method is hyperlinks
As #Jeemusu’s comment.
Fancybox use AJAX to load content. There's an HTTP variable set called HTTP_X_REQUESTED_WITH, which will be set and set to 'xmlhttprequest' if it's an AJAX request.
So even someone opens the links in new tab we can check whether it is AJAX or non-AJAX and display content according to that. So no worries about right clicking.
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//this is an ajax request. do what you need to
}
else {
//this is non ajax. do what you need
}
?>
Second option is to change the hyperlinks as a button or any div.
General idea is to get the 'open-in-same-window' functionality while voiding all 'open-in-new-window' possibilities.
As #Scuzzy’s and #techfoobar’s answers
<input type="button" value="click here" class="fake-fancy" data-href="linktothereportform?id=5">
<span class="fake-fancy" data-href="linktothereportform?id=5">Report</span>
<script type="text/javascript">
jQuery('.fake-fancy').click(function(){
jQuery.fancybox.open({
href: jQuery(this).attr('data-href'),
type: 'ajax'
});
});
</script>
OR
jQuery('a.report').each(function(){jQuery(this).replaceWith('<button onclick="window.location.href=\'' + jQuery(this).attr('href') + '\'">report</button>');});
You can replace that link by a button which will not let the user to open that in new tab. You can do it like this :
<button onclick="window.location='linktothereportform?id=5';" class="report fancybox.ajax" style="color:#CC0033;">report</button>