Im having a problem, when i delete this code below, the video player popup player works but my contact form doesnt.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
I have added the Script for no conflict but its still now working, here are my JS and Jquery codes which are in the head tag. Any help would be appreciate it.
<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict();
</script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.2" media="screen" />
<script src="http://jwpsrv.com/library/WDP87vS0EeKnIhIxOUCPzg.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 0
}
}
});
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'over'
}
}
});
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox({
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers : {
title : {
type : 'inside'
},
overlay : {
css : {
'background' : 'rgba(238,238,238,0.85)'
}
}
}
});
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox({
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers : {
overlay : null
}
});
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers : {
title : {
type : 'inside'
},
buttons : {}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox({
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers : {
thumbs : {
width : 50,
height : 50
}
}
});
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
/*
* Open manually
*/
$("#fancybox-manual-a").click(function() {
$.fancybox.open('1_b.jpg');
});
$("#fancybox-manual-b").click(function() {
$.fancybox.open({
href : 'conscious-video.html',
type : 'iframe',
padding : 5
});
});
$("#fancybox-manual-c").click(function() {
$.fancybox.open([
{
href : '1_b.jpg',
title : 'My title'
}, {
href : '2_b.jpg',
title : '2nd title'
}, {
href : '3_b.jpg'
}
], {
helpers : {
thumbs : {
width: 75,
height: 50
}
}
});
});
});
</script>
<!------Autoresponder---->
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
var close_note = $("#note");
close_note.click(function () {
j("#note").slideUp(1000, function () {
j(this).hide();
});
});
$("#ajax-contact-form").submit(function() {
$('#load').append('<center><img src="images/ajax-loader.gif" alt="Currently Loading" id="loading" /></center>');
var fem = $(this).serialize(),
note = $('#note');
$.ajax({
type: "POST",
url: "contact.php",
data: fem,
success: function(msg) {
if ( note.height() ) {
note.slideUp(1000, function() {
$(this).hide();
});
}
else note.hide();
$('#loading').fadeOut(300, function() {
$(this).remove();
if(msg === 'OK') {
$('input').val("");
$('textarea').val("");
}
// Message Sent? Show the 'Thank You' message and hide the form
result = (msg === 'OK') ? '<div class="success">Your message has been sent. Thank you!</div>' : msg;
var i = setInterval(function() {
if ( !note.is(':visible') ) {
note.html(result).slideDown(1000);
clearInterval(i);
}
}, 40);
}); // end loading image fadeOut
}
});
return false;
});
});
/* ]]> */
</script>
Do not use two versions of jQuery inside of the same page (not recommended).
jQuery.noConflict()
Is supposed to be used when you are using two different libraries fighting for the $ (which is an alias for jQuery).
Many JavaScript libraries use $ as a function or variable name, just
as jQuery does. In jQuery's case, $ is just an alias for jQuery, so
all functionality is available without using $. If you need to use
another JavaScript library alongside jQuery, return control of $ back
to the other library with a call to $.noConflict(). Old references of
$ are saved during jQuery initialization; noConflict() simply restores
them.
But... in your case... docs says:
If for some reason two versions of jQuery are loaded (which is not
recommended), calling $.noConflict( true ) from the second version
will return the globally scoped jQuery variables to those of the first
version.
More info: http://api.jquery.com/jquery.noconflict/
Good luck.
Related
Here is my dilemma:
When clicking on the search button on my JQuery dialog a request is sent to my servlet. That servlet determines which page to return. Either the result JSP page or route the user back to the search form JSP with an additional attribute/string that I display in a JQuery dialog that pops up when the html page loads. Then when I make a valid search and the servlet routes the user to the result page, then when I click the back button on the browser the notFound dialog pops up! I do not want this and have tried to remove the form element that instantiated that dialog. See source below.
Here is my element and the corresponding javascript/jquery code:
<script>
$(function() {
$("#searchForm").dialog(
{
height : 400,
width : 450,
resizable : false,
draggable : false,
open : function(event, ui) {
$(this).parent().children().children(
'.ui-dialog-titlebar-close').hide();
},
title : "Search",
closeOnEscape : false,
buttons : {
"Search" : function() {
if ($("#name").val().length >= 1) {
$("#searchForm").submit();
} else {
$("#error").dialog("open");
}
},
"Main Menu" : function() {
window.location.href = "/";
}
}
});
$("#error").dialog({
autoOpen : false,
resizable : false,
draggable : false,
title : "Error!",
buttons : {
"OK" : function() {
$(this).dialog("close");
}
}
});
***$("#notFound").dialog({
autoOpen : false,
resizable : false,
draggable : false,
title : "Nothing Found!",
buttons : {
"OK" : function() {
$(this).dialog("close");
var div = document.getElementById('notFound');
if (div) {
div.parentNode.removeChild(div);
}
}
}
});***
});
</script>
<body>
<%
if (message != null) {
%>
<form id="notFound">
<p><%=message%></p>
<script>
$(function() {
$("#notFound").dialog("open");
});
</script>
</form>
<%
}
%>
....
Why does the element with the id notFound and its children not get removed from the page's source and DOM? How can I remove
<form id="notFound">
<p><%=message%></p>
<script>
$(function() {
$("#notFound").dialog("open");
});
</script>
</form>
on the OK: function() of the #notFound dialog? Thanks in advance!
$("#notFound").hide(); or $("#notFound").remove();
I think a simple
$("#notFound").replaceWith("");
or
$("#notFound").remove();
would work.
I have searched enough in the Stackoverflow and i could not able to find a thread to answer my question.
Below is my scenario,
function openVideo(videoid,urlid){
var videourl = 'http://localhost/ptchoice-local/welcome/video/'+videoid+'/'+urlid;
$("a#video_link").fancybox({
'type': 'iframe',
'width' : 1000,
'height' : 600,
'autoDimensions' : false,
'autoScale' : false,
'href' : videourl
});
$("a#video_link").trigger('click');
return false;
}
Show video
So, i would like to set href value when i click the "openVideo" function not in the anchor tag itself.
Fancybox version: jquery.fancybox-1.3.4.pack.js
Please suggest on this.
If I understood your question correctly this should work for you:
Need to add an ID to the anchor:
Show video
The jQuery:
$("#showVideo").click(function () {
var videourl = 'http://localhost/ptchoice-local/welcome/video/2134sdf234532sdfs324234/1';
$("#video_link").fancybox({
'type': 'iframe',
'width' : 1000,
'height' : 600,
'autoDimensions' : false,
'autoScale' : false,
'href' : videourl
});
$("#video_link").trigger('click');
});
Since the videoid and urlid were hard coded in your example, I did the same here. They can be variables if they need be -- just set them the same way.
You can do it this way.
function openVideo(videoid,urlid) {
var videourl = 'http://localhost/ptchoice-local/welcome/video/'+videoid+'/'+urlid;
$.fancybox.open({
href: videourl,
type: 'iframe',
padding: 0
});
}
i'm call fancybox in this way:
$(".add_exc").fancybox({
maxWidth : 1000,
maxHeight : 600,
fitToView : false,
height : '70%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
where .add_exc is:
<a class="add_exc fancybox.ajax" href="ajax_content.php">
<img src="click.png" />
</a>
in the ajax content i have some checkboxes and i need to check inside the parent window if some elements are present so that i can check the checkbox inside fancybox.
If i load javascript content inside the ajax content, it will be discarded.
How can i solve? thanks!!
You could try with the fancybox callback afterLoad
$(".add_exc").fancybox({
// all other API options
closeEffect : 'none',
afterLoad : function(){
myFunction();
// or some jQuery
$variable = $(".selector:checked").val();
}
});
I have the following fancybox code:
$('.fancybox').fancybox({
'autoScale' : false,
'href' : $('.fancybox').attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
the problem is I have twenty different A tag id's on the page and I want the fancybox href attribute to take the id of the clicked element, ie the one that triggered the event.
I have tried several things, none of them have worked!
'href' : $(this).attr('id'),
'href' : $(this.element).attr('id'),
This seems so simple but anytime I plug in 'this' or similar nothing works.
Without each() or click() simply add the beforeLoad callback to your script like this
$(".fancybox").fancybox({
autoScale: false,
// href : $('.fancybox').attr('id'), // don't need this
type: 'iframe',
padding: 0,
closeClick: false,
// other options
beforeLoad: function () {
var url = $(this.element).attr("id");
this.href = url
}
}); // fancybox
NOTE: this is for fancybox v2.0.6+
On the other hand, a more elegant solution is to use (HTML5) data-* attribute to set the href (it would look weird to set id="images/01.jpg" otherwise) so you could do :
<a href="#" id="id01" data-href="images/01.jpg" ...
and your callback
beforeLoad: function(){
var url= $(this.element).data("href");
this.href = url
}
and use the id attribute for what is meant for.
EDIT : The best is to use the special data-fancybox-href attribute in your anchor like :
<a id="item01" data-fancybox-href="http://jsfiddle.net" class="fancybox" rel="gallery" href="javascript:;">jsfiddle</a>
and use a simple script without callback like
$(".fancybox").fancybox({
// API options
autoScale: false,
type: 'iframe',
padding: 0,
closeClick: false
});
See JSFIDDLE
You can iterate over your collection of .fancybox items and grab the id.
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : $(this).attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});
Try this:
$(".fancybox").click(function(){
var url = $(this).attr('id');
$.fancybox({
'autoScale' : false,
'href' : url ,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
})
Try this
$('.fancybox').each( function() {
var elem = jQuery(this);
elem.fancybox({
'autoScale' : false,
'href' : elem.attr('id'),
'type':'iframe',
'padding' : 0,
'closeClick' : false,
});
}
);
Have you tried this?
$('.fancybox').each(function(){
$(this).fancybox({
'autoScale' : false,
'href' : this.id,
'type':'iframe',
'padding' : 0,
'closeClick' : false,
//some other callbacks etc
});
});
So, today I have one more question: HOW I COULD I HAVE BROKEN MASONRY JQUERY AND FANCYBOX (LIGHTBOX)?
I really need this. I have lost few hours trying solve this by myself, but i really can't. :/
This is my script where I'm calling fancybox and masonry:
<script type="text/javascript">
$(function(){
var $container = $("#galeria");
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : 'li',
columnWidth : 200
});
});
});
$(document).ready(function() {
$("#pre-enviar-imagem").fancybox({
'padding' : 0,
'centerOnScroll' : true
});
$("a#pictures").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'changeSpeed' : 0,
'changeFade' : 0,
'padding' : 0,
'titlePosition' : 'over',
'onComplete' : function() {
$("#galeria-wrap").hover(function() {
$("#galeria-title").show();
}, function() {
$("#galeria-title").hide();
});
}
});
});
</script>
To be brief, my problem is on overlapping, but as you can see, I'm already using imagesLoaded plug-in, and more. I already tried to set all of images width/height, but it still doesn't work.
Thank you.
I need to press the mouse scroll to work. Ideas?
I rewritten your code:
<script type="text/javascript">
$.noConflict();
$(function(){
var $container = $("#galeria");
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : 'li',
columnWidth : 200
});
});
});
jQuery(document).ready(function($) {
$("#pre-enviar-imagem").fancybox({
'padding' : 0,
'centerOnScroll' : true
});
$("a#pictures").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'changeSpeed' : 0,
'changeFade' : 0,
'padding' : 0,
'titlePosition' : 'over',
'onComplete' : function() {
$("#galeria-wrap").hover(function() {
$("#galeria-title").show();
}, function() {
$("#galeria-title").hide();
});
}
});
});
</script>
Hope this works on you.