Develop Reference

Upgraded to Fancybox 2, Fancybox is now broken

I was using jQuery v1.7.2 and fancybox v1.3.3 on a page on my site. I had some text which appeared in a Fancybox when a button was clicked (as you can see from the code it should also appear if a certain session attribute is present, but this is irrelevant to the problem).
I just upgraded to Fancybox 2, and now when I click the same button the content of my Fancybox appears on the very top of my webpage, and the Fancybox which pops up says "The requested content cannot be loaded. Please try again later."
Below is the script and HTML from my page. All was working previously - the only parts I changed was one line under the comment "Add jQuery library" and the two lines under the comment "Add fancyBox"
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
var $ = jQuery.noConflict();
jQuery(function($) {
$(".doWhatsNew").each(function (i) {
$(this).on("click", function () {
jQuery('#whatnew').css('display','block');
jQuery.fancybox({content:whatnew});
});
});
});
</script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
<% if(session.getAttribute("ATTRIBUTE") != null){ %>
var message = jQuery('#whatnew').css('display','block');
jQuery.fancybox({content:whatnew});
<% session.removeAttribute("ATTRIBUTE");
}%>
jQuery("#whatsnew").fancybox({
'width' : '65%',
'height' : '55%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
<!-- HTML -->
<div id="whatnew" style="display:none;">
(What's New Text Here)
</div>
<button class="doWhatsNew">Retreive "What's New" Pop-Up</button>

Multiple Jquery scripts on same page conflict

Ok, I have seen a couple of questions on this topic - I have an html5 page and I am trying to apply a music stream player but the jquery script is conflicting with another jquery script.
My code is below, I have tried the no conflict method but to no avail I might be applying it wrong. This is just the script portion of my code I have video gallery playing also; the gallery plays fine but the player shows but doesn't play at all. Everytime I load the page I get a message stating : Adobe Flash Player security null is trying to connect with an internet based location which is webservinghosting.ca (the site I'm streaming the station from).
<script type="text/javascript" src="style/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="style/js/jquery.superbgimage.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.6/jquery.min.js"></script>
<script type="text/javascript">
//create this naming for Jquery 1.3.2 version
var jq_1_6 = $.noConflict(true);
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.forms').dcSlickForms();
});
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#showcase").awShowcase(
{
content_width: 900,
content_height: 400,
auto: true,
interval: 3000,
continuous: false,
arrows: true,
buttons: true,
btn_numbers: true,
keybord_keys: true,
mousetrace: false, /* Trace x and y coordinates for the mouse */
pauseonover: true,
stoponclick: false,
transition: 'fade', /* hslide/vslide/fade */
transition_delay: 0,
transition_speed: 500,
show_caption: 'onload' /* onload/onhover/show */
});
});
</script>
<link type="text/css" href="http://www.websavershosting.ca/jplayer/skin/jplayer.websavers.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.websavershosting.ca/jplayer/jquery.jplayer.min.js"></script>
<script language="javascript" type="text/javascript" src="https://fennel.websavers.ca:2199/system/streaminfo.js"></script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div id="jp-album-art">
<img id="cc_strinfo_trackimageurl_wlezfm" class="cc_streaminfo" />
</div>
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>mute</li>
<li>unmute</li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-title"><span id="cc_strinfo_summary_wlezfm" class="cc_streaminfo">Loading Track ...</span></div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#jquery_jplayer_1").jPlayer({
ready: function () {
jQuery(this).jPlayer("setMedia", {
mp3: "http://209.172.54.130:9025/;stream/1"
});
},
swfPath: "http://www.websavershosting.ca/jplayer/Jplayer.swf",
supplied: "mp3",
solution: navigator.userAgent.indexOf("Trident/6")>-1 ? "flash" : "html,flash"
});
});
</script>

You are using jQuery file twice causing issues.
try removing last one:
<script type="text/javascript" src="style/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="style/js/jquery.superbgimage.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
if you need to use multiple files on same page.
<script type="text/javascript" src="jquery-1.1.3.js"></script>
<script> $113 = jQuery.noConflict(true);</script>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
Now to access version 1.1.3 you need to use $113 like
$113('.element').val();
while $ for version 1.6.2.

Try this:
if you have more jquery scripts:
<script src="../jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var first= $.noConflict(true);
</script>
<!-- load jQuery 1.4.2 -->
<script type="text/javascript" src="../jquery-1.2.2.js"></script>
<script type="text/javascript">
var second= $.noConflict(true);
</script>

CSS menu is not working properly if i place my Image slide show

I just tired to fix it that is when i place my Image Slide show then footer menu is not working properly. But if i remove a javascript code then Image Slide Show is not working.
A javascript code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0
/jquery.min.js"></script>
Total Javascript code for the page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0
/jquery.min.js"></script> <!--if i remove this code then footer menu is working-->
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#ei-slider').eislideshow({
animation : 'center',
autoplay : true,
slideshow_interval : 3000,
titlesFactor : 0
});
});
</script>
<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/tabslide.js" type="text/javascript"></script>
My site link:
http://creativeartbd.com/BCSA/

You're usng both mootools and jquery, they both use '$'. So you'll need to use jquery noconflict. Change your code to something along these line:
<script src="js/mootools.js" type="text/javascript"></script>
<script src="js/tabslide.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0
/jquery.min.js"></script> <!--if i remove this code then footer menu is working-->
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j( document ).ready(function() {
$j('#ei-slider').eislideshow({
animation : 'center',
autoplay : true,
slideshow_interval : 3000,
titlesFactor : 0
});
});
</script>

fancybox not called on page load

I am trying to use Fancybox in my asp.net mvc view on page laod and using this example 6 at http://fancybox.net/blog
My html is:
<head>
<title>Home Page</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<div id="main">
<link rel="stylesheet" type="text/css" href="../../Content/FancyBox/jquery.fancybox.css" />
<script type="text/javascript" src="../../Content/FancyBox/jquery.fancybox.js"></script>
<script>
$(document).ready(function () {
$("#dialog-user-login").trigger('click');
});
</script>
<div id="dialog-user-login">
I am here
</div>
</div>
</div>
</body>
but fancybox is not called on page load. Is there anything missing in my code ?
[Edited]
tried this but didnt work as well:
$(document).ready(function () {
$("#dialog-user-login").fancybox({
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});
$("#dialog-user-login").trigger('click');
});

when using a jquery plugin you should call it on the element you want ..
here is how you do it for fancy box
$(document).ready(function () {
$("#dialog-user-login").fancybox({
'showCloseButton' : false,
'titlePosition' : 'inside',
'titleFormat' : formatTitle
});
$("#dialog-user-login").trigger('click');
});

as much as i wanted to post this as a comment...
anyway, to DotnetSparrow, I've just recently made a site myself and implemented fancybox, and it works fine.
On ex. 5 & 6, I tried it on my page and it works fine too.
your html lacks a lot, as others have commented, the blog you based it from are snippets, and not the whole set of instruction...
follow the following:
1.Follow the first paragraph of this instruction first: http://fancyapps.com/fancybox/#instructions
2.In HTML
<a id="urLink" title="Login" href="#dialog-user-login">Login Here</a>
<div id="dialog-user-login" style="display:none">
I am here
</div>
3.In javascript
<script type="text/javascript">
$(document).ready(function() {
//attach fancybox on ur <a> tag
$("#urLink").fancybox({
'scrolling' : 'no',
'titleShow' : false,
'onClosed' : function() { $("#login_error").hide(); }
});
//if you want to show the login in fancybox on load
$("#urLink").trigger('click');
});
</script>

a little late but i hope this answers any similar question:
$(function() {
$.fancybox.open([{
//o $("#myDiv").html() aunque este ultimo muestra los datos en bruto
content: $("#myDiv").text()
}]);
});

Extra rich text options appearing in TinyMCE jQuery package

I implemented the tinyMCE jQuery package and I got rid of some of the rich-text options because my site didn't need them, but I am still having them appear on the page.
Here is an example where this is occurring: http://www.problemio.com/add_problem.php
I am trying to only have the first row of rich-text options appear, and not sure why the second and third rows appear. As you can see from the JS I am pasting below, I erased the instructions for the second and third rows to appear, but they still appear:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<!-- Load jQuery -->
<!--<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
</script>
-->
<!--<script type="text/javascript" src="/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>-->
<script type="text/javascript" src="/js/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript" src="http://www.problemio.com/js/problemio.js"></script>
<!-- Load jQuery build -->
<script type="text/javascript">
$(function() {
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url : '/js/tinymce/jscripts/tiny_mce/tiny_mce.js',
// General options
theme : "advanced",
plugins : ",style,advimage,advlink,emotions,paste,",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,|,emotions,|,bullist,numlist,|,link,image,",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
//theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
// Example content CSS (should be your site CSS)
content_css : "css/content.css",
// Drop lists for link/image/media/template dialogs
//template_external_list_url : "lists/template_list.js",
//external_link_list_url : "lists/link_list.js",
//external_image_list_url : "lists/image_list.js",
//media_external_list_url : "lists/media_list.js",
// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
});
</script>

I recently encountered this issue so in case anyone else comes across this here is the solution: http://www.tinymce.com/wiki.php/Configuration:theme_advanced_buttons_1_n
You need to add the following lines to the config options:
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""