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.
Related
Can't get Fancybox-2 to show PDFs with Internet Explorer!
(It works fine in Chrome and Firefox)
In <head> I have this code:
<!DOCTYPE HTML>
<!-- Add fancyBox -->
<link rel="stylesheet" href="../../../js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen"/>
<script type="text/javascript" src="../../../js/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox({
height: '100%',
// width: '50%',
//openEffect : 'none',
// closeEffect : 'none',
iframe: {
preload: false
},
afterShow: function () {
$(".fancybox-wrap").draggable();
},
beforeLoad: function () {
this.title = $(this.element).attr('caption');
}
});
});
</script>
then in <body> I have:
<a class="fancybox" data-fancybox-type="iframe" caption="my test" href="PDF/test.pdf" target="_blank" title="test PDF"><img style="border:0;" src="../img/pdficon.png "></a>
How can I get it to work, in your opinion?
I have written the following function within the success of another ajax call :
I have used the readymade jquery and rapheal function for the venn diagram and used both there js ,here's the code :
( function($) {
$(function() {
$('#venn-demo').venn({ numSets: 3,
universeLabel : 'All rate centers '
});
$('.new-venn').click(function() {
$('#venn-demo').html('').venn({
numSets : $(this).attr('data-num-sets')
});
$('#region-list').html('');
});
$('#venn-demo').on('regionClicked.venn', function(e) {
var activeRegions = $('#venn-demo').venn('activeRegions')
, arNames = []
;
for ( var i in activeRegions ) {
arNames.push( activeRegions[i].getId() == "" ? "U" : activeRegions[i].getId() );
}
$('#region-list').html( arNames.join(', ') );
});
});
})(jQuery);
The resulting venn diagram should be clickable but it is not, also I am getting this error:
e.attr is not a function
How should I make this work?
Use this code for click function in venn diagram :
Download : http://www.filedropper.com/vennchart
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Venn</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link type="text/css" rel="stylesheet" media="screen" href="./css/main.css" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="./js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
<script type="text/javascript" src="./js/raphael-min.js"></script>
<script type="text/javascript" src="./js/jquery.venn.js"></script>
</head>
<body onload="vennLoad()">
<div id="venn-demo" style="margin: 0 auto; width: 430px; height: 300px"></div>
<div style="text-align: center;">Active Regions: <span id="region-list"></span></div>
<script type="text/javascript">
( function($) {
$(function() {
$('#venn-demo').on('regionClicked.venn', function(e) {
var activeRegions = $('#venn-demo').venn('activeRegions'), arNames = [];
for ( var i in activeRegions ) {
arNames.push( activeRegions[i].getId() == "" ? "U" : activeRegions[i].getId() );
console.log(arNames);
}
$('#region-list').html( arNames.join(', ') );
$('#venn-demo').find("svg").remove();
var regionVal = $('#region-list').text();
vennLoad(regionVal);
});
});
})(jQuery);
function vennLoad(regionVal){
$('#venn-demo').venn({ numSets: 3, setLabels:['AA: 60 ', 'BB: 70', 'CC: 30'] });
}
</script>
</body>
</html>
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')});
SCRIPT
<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=acc_like;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>
HTML
<BODY onLoad="popup('autopopup.html', 'ad')">
I am getting popup window, but I don't want it to minimize when user clicks away outside of it.
In my opinion you should use jquery dialog to get what you want, the sample below (try it on jsFiddle):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$( "#dialog-form" ).dialog({
modal: true <!-- is background page responsive or not -->
});
});
</script>
</head>
<body>
Background information
<div id="dialog-form" title="Hello">Basic information</div>
</body>
</html>
I have jquery script for menu and other for gallery, how to enable both of them to work? Below is my code
I also have some expanding box problem on the li element, whit thi explanation:
Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.
Affects: Internet Explorer 6.0
Likelihood: Likely
And also double float margin bug error:
When a margin is applied to a floated box on the same side as the direction of the float, the margin is doubled. This bug only affects the first float in a row of one or more floats.
Affects: Internet Explorer 6.0
Likelihood: Very Likely
It is very urgent,pls help!
SCRIPT FOR MENU BAR
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.easing.min.js"></script>
<script type="text/javascript" src="../../js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="../../js/image_fade.js"></script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
SCRIPT FOR GALLERY
<script type="text/javascript"src="../../hisasann-jStack/js/jquery.js"></script>
<script type="text/javascript" src="../../hisasann-jStack/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../hisasann-jStack/js/jStack.js"></script>
<!-- syntax -->
<link rel="stylesheet" href="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushRuby.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
dp.SyntaxHighlighter.ClipboardSwf = 'http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
// fadeInOut
$("#logo").fadeOut().fadeIn();
// smooth scroller
$("a[href^=#]").click(function() {
var hash = this.hash;
if(!hash || hash == "#")
return false;
$($.browser.safari ? 'body' : 'html')
.animate({scrollTop: $(hash).offset().top}, 1500, "easeInOutBounce");
return false;
});
});
var options = {
isClickAnimation: true,
isPositionRandom: true,
durationOut: 300,
durationIn: 200,
easingOut: "easeInOutBack",
easingIn: "easeOutBounce",
moveLeft: 250,
moveTop: 150,
opacityOut: 0.6,
opacityIn: 1,
delay: 10,
direction: "next",
callback: function() {}
};
$(window).bind("load", function() {
// jStack
var jstack = $("#imageBox").jStack(options);
$("#next").click(function() {
jstack.next();
});
$("#prev").click(function() {
jstack.prev();
});
$("#shuffle").click(function() {
jstack.shuffle();
});
});
</script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript"src="../../hisasann-jStack/js/jquery.js"></script>
if im not mistaken, both of them are jquery library?, they probably has conflict with each other if they are loaded on the same page, this problem occured to me, what i did was removed one of the library,