|
JavaScript - Fancybox Popup Viewer - Changing Style For Title
Hi there,
I can;t figure out where to change the code/add in code I have installed Fancybox using jQuery and done all the neccessary steps to ensure it works as popup. However I can't find where to add in code/edit code to make my title left for instance or bold type etc. This is the code that calls the fancybox website is: http://www.soltoro.com/NEW/projects/elrayo.html Code: <script> $(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox({
'titlePosition': 'inside'
});
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true});
/* Apply fancybox to multiple items */
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'titlePosition' : 'inside',
'overlayShow' : false
});
});</script>
Similar TutorialsI have a page that loads a fancybox popup and it works perfectly with the cookie for setting ho many days to show. the problem i have is that i need it to show 1 every 24 hours over a 3 day period. once the 3rd day is over and the user sees the window for the 3rd day i need a cookie set to never show the window again. here is my code as it sits now. I have worked with this for a couple of days on and off and it is above my head for sure. any help is appreciated. $(function() { if ($.cookie('moment_comm')) { // it hasn't been 1 day yet } else { $("#autostart").fancybox({'overlayShow':true,frameWidth: 840,frameHeight:360}).trigger('click'); } } ); $('#autostart').live('click', function(e) { e.preventDefault(); $.cookie("moment_comm", "true", { path: '/', expires: 1 }); $.fancybox.close() }); Just curious if anyone has a crossbrowser version of the Popup Image Viewer script that's in the Post a JavaScript section. Seems that all of the ones in there (original and modifications) are browser specific, whereas I need something that will work for all browsers, or at least IE and firefox.
How do I give my popup browser a background color, change the title, and center the image on the page? I'd also like to control where it should pop up. Here is the code: function popUpImage2() { var popupimage = document.getElementById("image2").src; newwindow=window.open(popupimage,"POPUP","height=400,width=400"); if (window.focus) newwindow.focus(); } Around the main image it says: <img id="image2" style="display:none;"/><p><img src="images/bob.jpg" name="mainimage" width="424" border="0" id="mainimage" onclick="popUpImage2()" /> I'm kind of desperate, please write ASAP... Thanks in advance Right then! I have a drop down list. The titles are really long. What I want to happen is, end user to click on a selection, i.e. "This is a really really long title" And then by the power of voodoo just the abbreviated is shown in the field. "TIARRLT" Can this be done by JUST HTML? Or am I looking at some JS here? If anyone could point me to a tutorial that would be great. Or if you have the code you don't mind sharing... amazing!!! Thanks all! hii i am doing a project and i meet some problem i create a dojo dialog box i need to style the dialog box into whole thing white but i am not able to style the border (the grey line) between the title and content so i was wondering how am i goin to style it into white? i don't use the css to style it so i was wondering how to write it like " noteDlg.titleBar.style.background = 'white'; " this kind to remove the grey line between the title and content thanks ps. I really need it very urgently...hope reply asap function note(){ noteDlg = new dijit.Dialog({ title: "Programatic Dialog Creation", draggable: false, style: "width: 300px; border:0px; " }); // set the content of the dialog: noteDlg.attr("content", "Hey, I wasn't there before, I was added at "); noteDlg.titleBar.style.background = 'white'; noteDlg.show(); } I have a few hundred popups that I am trying to change to a "lightbox" style solution: Code: <!DOCTYPE html>
<html>
<head>
<title>Test 1</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="../../js/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="../../css/colorbox5.css" media="screen">
<script src="../../js/ssm.js" type="text/javascript"></script>
<script src="../../js/ssmitems3a.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../css/ssmitems.css" type="text/css">
<script>
$(document).ready(function(){
$("a[rel='tip']").colorbox();
});
</script>
</head>
</script>
<body>
<a rel="tip" href="tip1(AC)2.html"><img border="0" src="../../img/tipani1.gif" width="50" height="74"></a>
</body>
</html>
The new colorbox popup solution works well, but in some browsers - notably IE - it conflicts with the SIDE MENU routine I use. I think the menu is old code, but it works. However, to get the new "lightbox-style" popup to work in IE, I have to include <!DOCTYPE html>. In the other browsers, omitting the declaration apparently solves the conflict problem (but I feel it ought to be there). I really don't know what to do. Tinker with the side menu code? Here is a demo with the <!DOCTYPE html> declaration: http://www.aapress.com.au/ieltsonlin...conflict1.html ...and without it: http://www.aapress.com.au/ieltsonlin...conflict2.html I have tried with a full declaration but it makes no difference at all. And further reading online suggests <!DOCTYPE html> is OK. Does anyone spot a reason for the conflict? Hello guys I have a questions: How can I use javascript to change the CSS the page uses? I'm a noob to javascript so please help me out =D Regards, Thunderofnl Hi All I have a piece of script which makes a div slide out from the side of the screen with information on it. I can change the innerHtml etc no problem, but i have a problem with change .style attributes dynamically. My code: Code: var mystring = "height:500px";
var keyVal = mystring.split(":")
var slidingDiv = document.getElementById('slidingDiv');
slidingDiv.style.keyVal[0] = keyVal[1];
As you see above i get a value which i need to split() to get the key and value to use. So what i would like to see is: Quote: slidingDiv.style.height = 500px; But it does not work, as there is no such function as slidingDiv.style.keyVal[0]; How do i change this? I hope I've explained this thoroughly enough. Please ask if i need to explain further. Regards Marinus How do I check the status of a style? I thought something like this would work, but no joy: Code: divTest = document.getElementById('link_container');
if (document.divTest.style.display == "none") {
}
How to I use the tipsy (http://onehackoranother.com/projects/jquery/tipsy/) to read from the title tag in the Code: <a href="#", title="Hello<br>World">Hello World</a> From what I can do is to use the tipsy code: Code: $('#example-html').tipsy({html: true });
The final code which I wish to create may look something like the following: Code: for (var i=0; i<10; i++){
document.write("<a href='#', title='Hello<br>" + i + "' class='example-html'> Hello " + i + "</a>");
}
Appreciate any help offer This page: http://homepage.ntlworld.com/kayseyc...document2.html seems to indicate that it's possible, but it looks like it also pops up an alert window which would be annoying as hell. Is there a way to, say, once every minute change the title bar text? You see I have a text file of rotating slogans that appear each time you reload a page on my site and someone suggested that having them change even when the page is already open might be fun. I thought I'd look into it and see if it's possible. The site is http://opalcat.com. I don't know enough about javascript to know if this is possible. I am fairly good at implementing and installing other people's code, though, and can usually make minor changes to tweak things. Please let me know if this is a doable thing, and if so, if you'd be willing to help me work it out. Thanks in advance, OpalCat I am looking to use a similar method as facebook chat does, where it alternates between the original title text and 'friendsName has sent you a message!...' how can I do this ? Hi, Does anyone know if in FancyBox there is an option to always show the side arrows on image pop ups? http://fancybox.net/ Does anyone have a solution? The first image works fine, but obviously when the image is changed by the second function it will not work???? Code: <script type="text/javascript">
jQuery(document).ready(function(){
$("a#single_image").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
</head>
<body>
<div class="hidden">
<script type="text/javascript">
$(function() {
$(".image").click(function() {
var image = $(this).attr("rel");
var large = $(this).attr("title");
$('#image').hide();
$('#image').fadeIn('slow');
$('#image').html('<a href="' + large + '" id="single_image"><img src="' + image + '"/></a>');
return false;
});
});
</script>
Hi, I am using fancybox to display a contact form in a lightbox here http://bit.ly/i5TwmL this is working in Firefox and Safari but not in IE, I have no idea why. If anyone has any suggestions on how to get this to work it will be more than appreciated! Many Thanks, Ria please see http://bit.ly/i5TwmL for what I am working on. You can see that when selecting 'Contact' from the top navigation a light-box (fancybox) with a contact form opens, this form can be filled and when the submit button is pressed the content of the form is emailed to myself. However.... The 'Thank you message' is not appearing in the light-box as I would like it to and I cannot work out how to do this. Any suggestions muchly appreciated! All, I'm opening up a page using Fancybox: Code: $("#register_box").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'hideOnOverlayClick': false,
/*'type' : 'iframe',*/
'autoDimensions' : true
});
This works fine and opens up my registration page. However when I have the type commented it won't display my reCaptcha. If I uncomment this in my jQuery then it will display the reCaptcha. Any ideas to why this is? Thanks in advance for any ideas. I did find this link: http://www.warpturn.com/using-fancybox-with-recaptcha/ This doesn't help me though because I need it to load without the iFrame but could give some direction on what is going on. Hey everyone, I've got a section on my website where I have 2 images placed on top of each other when the user rollovers the image, the image ontop fades out revealing the image underneath. You can then click on this underneath image to open a fancybox window and scroll through pictures. My problem is that sometimes the fade out gets 'stuck' and after closing the fancybox window, the image reamins half faded out etc and the rollover doesn't work anymore. here's my code: Code: <style type="text/css" media="screen">
.js #animators { position: relative; height: 100px}
.js #animators div.container { position: absolute; left: 0; top: 0
</style>
<script type="text/javascript">
document.documentElement.className += " js"; // Add js class to the HTML element
$(function(){
var $containers = $("#animators > div").hide();
$('#show').show();
$('tr td a.c').each(function(i,el){
var idx = i;
$(this).click(function(e){
var $target = $containers.filter(':eq(' + idx + ')');
if($containers.filter(':visible').not($target).length){
$containers.filter(':visible').fadeOut();
}
$target.not(':visible').fadeIn();
e.preventDefault();
})
})
});
</script>
<div class="thumbnail" style="margin-top:5%; margin-right:2%;">
<div class="visible-image">
<img src="images/illustrationslabel.jpg" />
</div>
<div class="appearing-image"><img onclick='$("a.illustrations:first").trigger("click");' src="images/illustrations.jpg" />
</div>
</div>
mc I am creating a site that has a link with sIFR text that links into inline content via Fancybox. I know it works properly withour sIFR on, so the two are battling. Is there any way to have both?? url: www.happydogwebproductions.com/cadillac The contact link is supposed to pop up via fancybox. You can get it to load if you are quick enough to click it before sIFR kicks in. I've tried asking elsewhere, got over 100 views and not one reply. Any help would be greatly appreciated Hi, im using this code as a fancybox replacement for confirm. Code: function fancyAlert(msg) {
jQuery.fancybox({
'modal' : true,
'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input style=\"margin:3px;padding:0px;\" type=\"button\" onclick=\"jQuery.fancybox.close();\" value=\"Ok\"></div></div>"
});
}
function fancyConfirm(msg,callback) {
var ret;
jQuery.fancybox({
modal : true,
content : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyConfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>",
onComplete : function() {
jQuery("#fancyConfirm_cancel").click(function() {
ret = false;
jQuery.fancybox.close();
})
jQuery("#fancyConfirm_ok").click(function() {
ret = true;
jQuery.fancybox.close();
})
},
onClosed : function() {
callback.call(this,ret);
}
});
}
function fancyConfirm_text() {
fancyConfirm("Ceci est un test", function(ret) {
alert(ret)
})
}
how can i use fancyConfirm via an onclick in a hyperlink? thanks for your help! |
|||||||