We have been using uploadify for image upload and prettyPhoto for displaying images on lightbox in our Rails application. Both works well if used separately. Now we want to display uploadify control on lightbox just like dropbox uses but it start screaming if used with prettyPhoto.
Here is sample html using uploadify with prettyPhoto.
<!DOCTYPE html>
<html>
<head>
<title>My Uploadify Implementation</title>
<link rel="stylesheet" type="text/css" href="uploadify.css">
<link rel="stylesheet" type="text/css" href="prettyPhoto.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify-3.1.min.js"></script>
<script src="jquery.prettyPhoto.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'uploadify.php'
// Your options here
});
$('#closeme').live('click', function() {
$.prettyPhoto.close();
return false;
});
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</head>
<body>
<a href="#inline-1" rel="prettyPhoto" >popop</a>
<div id="inline-1" style="display:none;">
<p>This is inline content opened in prettyPhoto.</p>
<input type="file" name="file_upload" id="file_upload" />
</div>
</body>
</html>
Here you will see link to popup and by clicking on the link it shows uploadify control on lightbox. Then you chooses images from the disk to upload to server. After choosing images I face two issues:
1) Getting Error: uncaught exception: Call to StartUpload failed javascript error on FF and Crome
2) The selected images are not getting listed on uploadify control on lightbox. If you close the pupup and again click on popup link it shows list of files.
Uploadify works fine if I remove $("a[rel^='prettyPhoto']").prettyPhoto(); line.
Do you have any idea how it can be fixed?
Also I would appreciate if someone suggest other plugins to achieve such dropbox style uploaders.
Thanks, Amit Patel
You'll want to initialize uploadify after the lightbox is opened and not on page load. The reason for this is because Flash will not load if the element is hidden.
I looked at the prettyPhoto api and couldn't find any event that is called after the lightbox has finished opening, but that's what you'll need to do.
Related
I've been trying to build an image slide show / carousel using jQuery, and came across colorbox which I thing is really good, and does things the way I want to.
I'm stuck with how to build a slide show of images when using the ajax method they have.
I have six images per item that i'd like to load from the server, and run as a slideshow / carousel just like you see them when you click on the first link on this page under Elastic Transition.
I've succeeded in getting the images to the script using ajax, but i don't end up with a slide show. How can I do this? I currently end up with all the images below each other, and no forward or backward buttons etc.
Can you help?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".ajax").colorbox();
});
</script>
</head>
<body>
<p><a class='ajax' href="../content/ajax.html">Outside HTML (Ajax)</a></p>
</body>
</html>
ajax.html (pulls images and returns it to the script
<div>
<img class="gallery" src='/slide/content/ohoopee1.jpg'>
<img class="gallery" src='/slide/content/ohoopee2.jpg'>
<img class="gallery" src='/slide/content/ohoopee3.jpg'>
</div>
I just could not figure what to do more.
Desired
I would recommend using ajax to add the markup to your document, then assign and open Colorbox to those elements.
An example would be something like this:
<div id='pictures' style='display:none'></div>
<script>
$('.ajax').on('click', function(e){
e.preventDefault();
$.ajax(this.href, {
success: function(html) {
$('#pictures').html(html).find('img').colorbox({href: function(){
return this.src;
}, open:true});
}
});
});
</script>
I'm trying to link jquery and a css file to some HTML and I'm having no luck. The CSS for the page is not styling anything in my browser (Chrome). Also, I've tried putting the script tags in the body and the head (I know this is bad style, I just wanted to try) and I've got console.log()s in my script that aren't logging anything so I know they aren't being linked properly. Can anyone tell me why this isn't behaving?
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="WLE.css">
<title>w/Way Less Effort</title>
</head>
<body>
<img id="logo" src="WLE.jpg">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
console.log("pre-fade");
$(document).ready(function() {
console.log("fading out");
$("#logo").fadeOut("slow");
});
</script>
</body>
</html>
Replace script with this, abouve body tag :P css link is good but maybe css not work or name is not like u writed.
<script type="text/javascript">
alert("Ist work");
</script>
But and this work if i see good. http://jsfiddle.net/2Fv8f/
I think your code is correct
your file css should nam " WLE.css " i mean with capital letters and should be in the same directory with this html file
.
for JQuery it's linked correctly and its work for me and the Img fade out in my test .
and for test your linked files (images , css , js ) you can do that with any code you write . go to your page in Chrome and :
Click right > Inspecte element > Network (Tab) :
and Refresh the page if any images or files doesn't link correctly it will show in red color .
try and you will see .
I hope that's will help you .
how to refresh/reload only once after the page is loaded in jquery mobile. because am using wow slider and when it is loaded the data is getting dynamically but the ui is not correctly getting once the page is refreshed it is getting. Can someone help me for this thanks.
I found this... This works for me. May be it will work for you also. Just include this script in your 'data-role="page" div' available in your mobile jquery page.
Below is test1.html:
<body>
test <!--This link redirects to test.html but you will see 'test.html#' at address bar that means you page is reloaded once -->
</body>
test.html:
<body>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(location.hash != 'test1.html'){
location = 'test.html#';
}
});
</script>
</body>
I am getting this error when i run my webpage in IE(the code runs fine in other browsers).
This is the HTML code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<--- some html code --->
<iframe src='http://localhost/page1.php' style="background: transparent; overflow: hidden; height: 210px; width: 390px;" frameborder="0" />
</body>
</html>
This is page1.php
<!DOCTYPE html>
<html>
<body>
<form action="usercheck.php" method="POST">
USERNAME:<input name="uname" id="uname" type="text" maxlength="12" required/>
<input type="submit" value="Submit">
</form>
</body>
</html>
This is usercheck.php
<?php
//some php code
?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<--- some html code --->
</body>
</html>
The problem is that when reach usercheck.php after clicking on submit button in page1.php i get the error http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js. Access is denied. Here is an image of the error: http://i.stack.imgur.com/diCoF.jpg . Then consequently i get the error that '$' symbol is not defined(which is due to the failure to load the jquery library).
EDIT-
I have tried including the jquery file in my server but still the error is comming. I have also tried this code for usercheck.php:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
/*! jQuery v1.10.1 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//# sourceMappingURL=jquery.min.map
//and the rest of the jquery library...
</script>
</head>
<body>
<--- some html code --->
</body>
</html>
The error i am getting this time is this:http://i.stack.imgur.com/hR9aN.jpg (The original name of usercheck2.php is rscheck.php in my server). Then consequently i get the error that '$' symbol is not defined(which is due to the failure to load the jquery library). If i directly open the contents of page1.php (by the url- localhost/page1.php) then everything works fine.
This is the only code for which i am using JQuery:
if($("#pret").contents().text().search("NAMECHECK: NOTAVALIBLE")!=-1)
I could exclude jquery only if i can convert this code to javascript.
This is a legit jQuery 1.10.1 bug: http://bugs.jquery.com/ticket/13980 .
Using jQuery 1.10.0, or 1.10.2 the error no longer occurs.
Try to download jquery.min.js to your server and include it from there. For example:
<script type="text/javascript" src="/jquery.min.js"></script>.
It looks like internet explorer can't access the resource: downloading it to your own server might solve the issue.
Here is the working solution to my question. The reason i wanted jquery was that i wanted to run this code:
if($("#pret").contents().text().search("NAMECHECK: NOTAVALIBLE")!=-1)
I removed jquery library and used this javascript to do the same:
var n=document.getElementById("pret").innerHTML.search("NAMECHECK: NOTAVALIBLE");
if(n != -1)
Now there is no error in the page and i am able to do what i wanted. So the error was caused as jquery library was not able to load in the webpage. But i dont know why even after downloading the jquery library in my server i was getting the same error ie. 'Access is denied'.
The reason is in the iframe. As jQuery is loaded into the iframe from the external host, each time when you are trying to use any jQuery function in your main/outer html file, IE throws the error due to security reasons.
1) Either upload jQuery to your server,
2) or include it in main html file only (not in iframe).
On my site a number of operations can take a long time to complete.
When I know a page will take a while to load, I would like to display a progress indicator while the page is loading.
Ideally I would like to say something along the lines of:
$("#dialog").show("progress.php");
and have that overlay on top of the page that is being loaded (disappearing after the operation is completed).
Coding the progress bar and displaying progress is not an issue, the issue is getting a progress indicator to pop up WHILE the page is being loaded. I have been trying to use JQuery's dialogs for this but they only appear after the page is already loaded.
This has to be a common problem but I am not familiar enough with JavaScript to know the best way to do this.
Here's simple example to illustrate the problem. The code below fails to display the dialog box before the 20 second pause is up. I have tried in Chrome and Firefox.
In fact I don't even see the "Please Wait..." text.
Here's the code I am using:
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
</head>
<body>
<div id="please-wait">My Dialog</div>
<script type="text/javascript">
$("#please-wait").dialog();
</script>
<?php
flush();
echo "Waiting...";
sleep(20);
?>
</body>
</html>
You'll need to run that piece of code immediately after your <body> tag, something like:
<html>
<head>
</head>
<body>
<div id="please-wait"></div>
<script type="text/javascript">
// Use your favourite dialog plugin here.
$("#please-wait").dialog();
</script>
....
</body>
</html>
Note I omitted the traditional $(function (){}) because you need this to be loaded as soon as the page is shown, not after the whole DOM is loaded.
I've done this before and works great, even if the page has not finished loading yet.
EDIT: you'll have to be certain the jQuery dialog plugin you're using is loading before your entire DOM loads. Usually this is not the case, you it won't work. In that case, you'll need to use a g'old plain JavaScript solution, such as Lightbox 1 or Lightbox 2.