How to make Zurb Joyride run _once_ for each user [duplicate] - javascript

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).

Related

bootpag - Not working Basic Example

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.

Javascript prettyPrint an external java file

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>

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>

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()
}]);
});

Remove scrollbars from Facebook page tab app?

There are hundreds of posts about this on the internet, many of which are here on StackOverflow, but unfortunately none of the solutions mentioned seem to work for me. I have spent the better part of 6 hours tinkering with no success.
Here's what I have:
I have created a Facebook app and added it as a Page Tab.
I have added the app to a Facebook page here: https://www.facebook.com/pages/PARKROYAL-Darling-Harbour-Sydney/236917443012539?sk=app_195092900626979
But I cannot for the life of me set the height of the iFrame so that I can safely remove the scrollbars!
Here is the structure of my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PARKROYAL Magic Moments</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<MAIN CODE HERE>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '<APP-ID>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize( { height: 1642 } );
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize( { height: 1642 } );
}
</script>
</body>
</html>
In my CSS I have also set body { overflow:hidden }
Have you tried FB.Canvas.setAutoGrow. You can use it like this:-
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '235024806624460',
});
FB.Canvas.setAutoGrow();
}
</script>

Categories

Resources