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()
}]);
});
Related
I am trying to use a plugin for dynamic pagination.
The plugin is-
Bootpag - Dynamic Pagination
In the Home page of the plugin, I found an example, and I tried to use that as an example and what I have done is like this-
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div id="content">Dynamic Content goes here</div>
<div id="page-selection">Pagination goes here</div>
<script>
// init bootpag
$('#page-selection').bootpag({
total: 10
}).on("page", function(event, /* page number here */ num){
$("#content").html(num); // Changing div content to dynamic content
});
</script>
</body>
</html>
But it is not working.
Can anyone please help?
Thanks in advance for helping.
I have solved it by this way-
$('#show_paginator').bootpag({
total: 23,
page: 3,
maxVisible: 10
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>
More customised version-
$('#show_paginator').bootpag({
total: 53,
page: 2,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: '←',
last: '→',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on('page', function(event, num)
{
$("#dynamic_content").html("Page " + num); // or some ajax content loading...
});
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://botmonster.com/jquery-bootpag/jquery.bootpag.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="dynamic_content">Pagination goes here</div>
<div id="show_paginator"></div>
Even more customization can be done by this options-
Warning
Here I am using a CDN (http://botmonster.com/jquery-bootpag/jquery.bootpag.js) for showing content. But it is not recommended.
Hardly recommendation is to download this file and put it locally.
Because there is no official CDN for bootpeg.
Even More
If want to update paginator at run time, call the paginator like this-
$('#show_paginator').bootpag({total: 55});
Even more, can be found from here.
I think u have your complete answer.
I want to create simple custom popup using jquery. My html code is as follows.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
alert("Thiws should be custom popup");
});
});
</script>
</head>
<body>
<button id="btn1">Show Text</button>
</body>
</html>
On clicking button it should open a form in popup asking username, email address and also it should have submit button
For reference what i want to ask
http://www.c-sharpcorner.com/UploadFile/736ca4/custom-popup-window-using-jquery/
You can use the function and css I wrote here:
https://jsfiddle.net/mm7b7t5t/
Opening a hello world popup:
var hello = new popup([{text:"Close"}], "Hello!", "<p>Hello World</p>");
hello.open();
You can make popups draggable, add multiple buttons etc etc
jQuery dialog is a mess in my opinion, I prefer my own popup code ^^
Just create a html file and copy/paste that code.
<html>
<head>
<title></title>
</head>
<body>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#OpenDialog").click(function () {
$("#dialog").dialog({modal: true, height: 400, width: 400 });
});
});
</script>
<a id="OpenDialog" href="#">Click here to open dialog</a>
<div id="dialog" title="Dialog Title">
<p>test</p>
</div>
</body>
</html>
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>
I'm really new to web development and I'm kind of lost here.
I'm using Bootstrap, and I'm trying to display java code (in a file called test.java) that's on my local machine on the webpage. The file is displayed, but it doesn't get syntax coloured. Please help!
I have in the header:
for prettify:
<link rel="stylesheet" type="text/css" href="../localfile/prettify.css"/>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="../localfile/prettify.js"></script>
and for jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
And this is the script
<script type="text/javascript">
$(document).ready(function() {
jQuery(function($) {
$.get('test.java', function(data) {
$('#sourceCodeDestination').html(data);
prettyPrint();
}, "text");
});
});
</script>
and this for the div:
<div class="panel-body" >
<pre id="sourceCodeDestination" class="prettyprint linenums lang-java">
</pre>
</div>
I finally figured out what the problem was after reading the answer to this question, here.
So, I changed the script to this and it works just fine. I just removed the prettyprinted class before calling prettyPrint.
<script type="text/javascript">
jQuery(function ($) { $.get('test.java', function(data) {
$('#sourceCodeDestination').html(data);
$('#sourceCodeDestination').removeClass("prettyprinted");
prettyPrint();
}, "text");
});
</script>
I'm using Foundation Joyride and every time I load the webpage the tour starts, but how do I only start the tour for the first time the webpage is loaded?
My settings are ...
$(window).load(function() {
//Foundation Joyride (Tour)
$("#tour").joyride({
'cookieMonster': true,
'cookieName': 'JoyRide',
'cookieDomain': 'mydomain.co.uk/',
'postRideCallback' : function () {
$(this).joyride('destroy');
},
cookieMonster: false
});
});
Got it working at last and it turned out to be the order in which the header files were declared.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="foundation.css">
<script type="text/javascript" src="foundation.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.foundation.joyride.js"></script>
<script>
$(window).load(function() {
$("#tour").joyride({
cookieMonster: true,
cookieName: 'JoyRide'
});
});
</script>
</head>
<body>
<ol id="tour">
<li><p>This is the tour.</p></li>
</ol>
</body>
</html>
You have to use the cookieMonster option se to true, with your domain or false in cookieDomain.
Also remove the cookieMonster: false outside of the parenthesis.
To let joyride use cookies you must include the jQuery.cookie library in your page (https://github.com/carhartl/jquery-cookie)
Here is a sample:
$("#tour").joyride({
cookieMonster: true,
cookieName: 'JoyRide',
cookieDomain: false
});
In this way you'll see the tour only the first time you visit the page (or when you clear the cookies).