JQuery FancyBox overlay color - javascript

I have tried to get a Fancybox iFrame to load automatically and to give the overlay a different color.
So far so good on the autoload.
Got it working.
The color I couldn't get to change.
Now I tried several examples many listed here. But I guess I am doing something wrong.
In my head code I am loading :
<script type="text/javascript">
$(document).ready(function(){
$('.fancybox').fancybox();
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox({
helpers: {
'overlayColor' : '#ec2d2d',
title : {
type : 'outside'
},
overlay : {
speedOut : 30,
css: {
'background-color': '#ec2d2d'
},
},
overlayColor: {
css: '#ec2d2d',
}
}
});
$("#hidden_link").fancybox().trigger('click');
});
</script>
And my HTML is like this :
<a class="fancybox fancybox.iframe" id="hidden_link" href="iframe.html" title="HOI">Iframe</a>
It opens onload. But I cannot get the overlay to turn red.
What am I missing here?
I have tried as you see several options. But none used the right way.
TIAD
Edit:
When I try to add this code:
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
I seem to make a mess of the Syntax. Because it doesn't respond to this script. But I am clueless of how to do this correctly.
This is what I got now:
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
},
helpers: {
title : {
type : 'outside'
},
overlay : {
speedOut : 30,
css: {
'background-color': '#ec2d2d'
},
},
overlayColor: {
css: '#ec2d2d',
}
}
});
$("#hidden_link").fancybox().trigger('click');
});
</script>
Also adding the CSS code makes no difference:
#fancybox-overlay{
background-color:#ec2d2d !important;
}
Could it be that there is another JS file loaded that overwrites all of my settings??
These are the libraries loaded:
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

Just set the background color before showing of fancybox.
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
});
and then remove .fancybox() from $("#hidden_link").fancybox().trigger('click');
Just like this it'll work perfectly.

You should be able to change the overlay color in CSS
#fancybox-overlay{background-color:#ec2d2d !important;}

You can execute the overlay alone,
$.fancybox.helpers.overlay.open({parent: $('body')});

Related

Javascript conflict between responsive-menu and responsiveslides

I am working on a responsive layout using javascript, responsive-menu and javascript, responsiveslides.
When I have only one javacript at a time on the page, they work fine, but together the responsive-menu doesn't work. If I put the javascript for the responsive-menu at the bottom of the page, the menu works fine but the slide show doesn't work. Any suggestions would be appreciated.
Here is my javascript call out:
<script src="respond.min.js"></script>
<link rel="stylesheet" type="text/css" href="menu_files/responsive-menu.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="menu_files/jquery.responsive-menu.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#JQResponsiveMenu1").fdResponsiveMenu({windowMinWidth:1000,autoHighlightCurrentPage:false,subMenuOpenOnClick:false,subMenuTransitionEasing:"easeOutSine",subMenuTransitionDuration:300});
});
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="responsiveslides.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>
<script type="text/javascript"> // You can also use "$(window).load(function() {"
jQuery(window).load(function() {
// Slideshow 1
jQuery("#slider1").responsiveSlides({
maxwidth: 800,
speed: 800
});
// Slideshow 2
jQuery("#slider2").responsiveSlides({
auto: false,
pager: true,
speed: 300,
maxwidth: 540
});
// Slideshow 3
jQuery("#slider3").responsiveSlides({
manualControls: '#slider3-pager',
maxwidth: 540
});
// Slideshow 4
jQuery("#slider4").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
jQuery('.events').append("<li>before event fired.</li>");
},
after: function () {
jQuery('.events').append("<li>after event fired.</li>");
}
});
});
</script>
It's not advisable to load more than one version of jQuery on a site. I'd remove v1.8 and see how that does. If it fails, remove 1.10 instead. Some changes in 1.10 might break your plugins.

colorbox previous and next not working

I have 2 scripts that seem to be in conflict, so that the Previous and Next buttons do not show on the Colorbox overlay (the Close button is there and works fine). My css calls are correct and I rule that out as an issue anyway by adding:
#cboxPrevious, #cboxNext {display:block !important; overflow:visible;}
which then shows the next and previous graphic buttons but they do not function when clicked (this has since been deleted).
The Chrome javascript console gives me this message:
Error: cboxElement missing settings object jquery.colorbox.js:204
Lastly, if I comment out Animated Repsonsive Grid, the controls perform correctly on the Colorbox overlay.
I did try to put the Colorbox script in noConflict mode, but that only disabled the Animated Responsive Grid.
You can see my test page at http://www.flowerlandshop.com/photostest.html
edit: here is my head code:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/modernizr.custom.26633.js"></script>
<noscript>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
</noscript>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/fallback.css" />
<![endif]-->
<link rel="stylesheet" href="http://www.flowerlandshop.com/css/colorbox.css" />
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.colorbox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".group1").colorbox({rel:'group1', open:true});
});
</script>
and here is the js call at bottom of the page for the animated responsive grid:
<script type="text/javascript" src="js/jquery.gridrotator.js"></script>
<script type="text/javascript">
$(function() {
$( '#ri-grid' ).gridrotator( {
rows : 4,
columns : 9,
maxStep : 2,
interval : 2500,
animType: 'random',
preventClick: false,
w1100 : { //ipad landscape
rows : 6,
columns : 6
},
w1024 : { //ipad portrait
rows : 6,
columns : 6
},
w768 : { //iphone landscape
rows : 2,
columns : 6
},
w480 : { //iphone portrait
rows : 5,
columns : 4
},
w320 : {
rows : 5,
columns : 4
},
w240 : {
rows : 6,
columns : 4
},
} );
});
</script>
Try to add open:trueinto colorbox's options. Works for me.
PS: provide please your js where u use colorbox and a cut of html

How to open a page inside of shadowbox?

I want to open a new page inside of shadowbox, when I click the code
this link Opens a new page inside the shadowbox in the same page. How to do that?
<a class="fancybox" href="edit.php?pn"></a>
rfq_list.php
<link rel="stylesheet" href="css/style.css" type="text/css" id="" media="print, projection, screen" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/jquery.tablesorter.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
type: "iframe",
helpers : {
overlay : {
closeClick: false}
// prevents closing when clicking OUTSIDE fancybox
},
closeClick : false, // prevents closing when clicking INSIDE fancybox
scrolling : 'no',
width : 550,
height : 0,
autoScale : true,
openEffect : 'elastic',
closeEffect : 'fade',
closeBtn : true,
afterClose:function () {
window.location.reload();
}
}).trigger("onclick");
});
parent.$.fancybox.close();
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>
<script type="text/javascript">
$(function() {
$("table").tablesorter({debug: true});
});
</script>
<script type="text/javascript">
$(function(){
var tfrow = document.getElementById('tfhover').rows.length;
var tbRow=[];
for (var i=1;i<tfrow;i++) {
tbRow[i]=document.getElementById('tfhover').rows[i];
tbRow[i].onmouseover = function(){
this.style.backgroundColor = '#f3f8aa';
};
tbRow[i].onmouseout = function() {
this.style.backgroundColor = '#ffffff';
};
}
});
</script>
</head>
rfq.php
<script type="text/javascript" src="javascript/jquery.js"></script>
<script>
function showUser(str) {
var $txtHint = $('#txtHint');
if (str == "") {
$txtHint.html('');
return;
}
$txtHint.load('rfq_list.php?q=' + str)
}
</script>
<div id="txtHint">
</div>
What is the problem in this scripts?
You are including jQuery three times:
<script type="text/javascript" src="javascript/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
and aside particular cases you have to include it once (and use noconflict).
Now the the table sorter plugin will be detached from jQuery by the third include and you face your error.
Remove the other jQuery include and use only the latest.

Jquery menu and photo gallery not working in IE

My site is under development and seems to be just dandy on all browsers except for IE10.:
For some reason the menu bar and photo gallery, which are both powered by Jquery just dont work.
Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="jQuery Sliding Flexible Menu v2/deploy/js/jquery.sliding-flexible-menu-v2.js"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jQuery Sliding Flexible Menu v2/deploy/css/sliding-flexible-menu-v2.css">
<script type="text/javascript">
$(document).ready(function() {
//Horizontal
$("div.menu-horizontal").slidingFlexibleMenuv2({
buttonSpacing: '1'
});
$(".fancybox").fancybox(
{
transitionIn : 'elastic',
transitionOut : 'elastic',
easingIn : 'easeOutBack',
easingOut : 'easeInBack',
speedIn : '650',
speedOut : '650',
changeSpeed : '650',
padding : '0px',
});
});
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{ Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>
<script type="text/javascript" src="fancyapps-fancyBox-2bb0da9/source/jquery.fancybox.pack.js"></scr ipt>
<link type="text/css" rel="stylesheet" href="fancyapps-fancyBox-2bb0da9/source/jquery.fancybox.css">`
Anyone got a clue why this aint working in IE????
Full site here
http://www.heggie5.webspace.virginmedia.com
Cheers
There are two solutions to this problem:
Place the fancybox css/images as is (as provided by fancybox download) and place fancybox folder in your application root
Modify the jquery.fancybox-1.3.x.css
1.Look for the comment /* IE */
2.Change the src for DXImageTransform.Microsoft.AlphaImageLoader filter for all classes
Please note, approach 1 is better in my opinion, because if you make change to fancybox css file, updgrades would be difficult.

javascript functions conflicts

I have these scripts for my website but only one function works at a time, whichever code is close to head tag works fine. what is a solution to work both function with out any conflict.
CODE IS GIVEN BELOW:
<script type="text/javascript" src="demo_files/jquery.js"></script>
<script type="text/javascript" src="demo_files/jquery.vticker-min.js"></script>
<script type="text/javascript">
$(function(){
$('#news-container').vTicker({
speed: 500,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 3
});
$('#news-container1').vTicker({
speed: 700,
pause: 4000,
animation: 'fade',
mousePause: false,
showItems: 1
});
});
</script>
<style type="text/css">
body{ font-family:Verdana, Arial, serif; font-size:14px;}
</style>
<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$(window).bind('load',
function(e)
{
$.colorbox({opacity:0.3, href:"offer.html"});
});
});
</script>
Long Answer: It's because you are including jQuery twice, once right at the top, and again about half way down (a minified version).
The second time you include the library, the $ object will be redefined, overriding the existing instance. Any code attached the $ object when this happend, such as events and plugins, will be lost.
Short Answer: Remove the second copy of jQuery, it should work then.

Categories