I am attempting to use a document ready function I found on your site to force a fancybox lightbox to appear when a page loads. Here is the code I am using, (I found it here on your site). It does force the fancybox to appear on page load, but it forces it to open in a new page and it loses it's modal properties when I add in the $document ready function.
I'm not terribly technical, but after hours of researching and trying several methods, I'm giving and seeking help. Any support would be greatly appreciated.
<link media="all" rel="stylesheet" type="text/css" href="css/all.css" />
<link media="all" rel="stylesheet" type="text/css" href="css/fancybox.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.sameheight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
</head>
<body>
<div id="wrapper">
<a name="hidden_link" id="hidden_link" a class="lightbox" href="#popup01"></a>
</div>
<div class="popup-holder">
<div id="popup01" class="lb">
Your code is correct but you may missed to include css or js files for fancybox.
Related
Ionic slide box images only rewinding by default.But I want Slider to be cyclical. How to solve it.
I tried to implement jquery slider instead of Ionic slide box . But its not worked properly.
I tried this files to add a header on my index page
<script src="lib/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').nivoSlider();
});
</script>
<link rel="stylesheet" href="css/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider" ng-repeat="club in slider">
<img ng-src="{{club.url}}" style='width:100% !important;' >
</div>
</div>
I had add this code on my controller it working fine for me.
$ionicSlideBoxDelegate.update();
$ionicSlideBoxDelegate.loop(true);
Few suggestions if you want to use jQuery with ionic/angularJS:
Load your jquery before ionic js and angular js libraries loads.
Call jQuery from your controllers for better control over application flow. eg. $('#slider').nivoSlider(); call it from your controller and put your html in view template of the controller.
It would be great if your can elaborate on the kind of slider you want in your app (I couldn't understand what you mean by cyclical).
Alright, I thought I implemented this correctly, but I guess I must've goofed somewhere.
Here's my code:
Jquery here:
jQuery(document).ready(function( $ ){
$(function() {
$( ".cta-nav-hover" ).tooltip({
show: null,
position: {
my: "right+40 bottom",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top - 10 }, 75 );
}
});
});
$(function() {
$(".fancybox").fancybox();
});
});
Then The HTML:
<div id="cta-nav-wrapper">
<ul id="cta-nav">
<li class="bio">
<span></span>
</li>
</ul>
</div>
I thought that this would work, but when I click the link, it just brings me to the placeholder image instead of making a popup. What did I do wrong? It looks as though i have the files lined up properly, or at least when i inspect them through firebug it goes to the proper js.
Here's what I called in the head:
<!-- Add fancyBox -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/content/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.js"></script>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="/wp-content/themes/hustle-child/includes/js/magnific-popup.js"></script>
I also tried another plugin called Magnific Popup but it's also unresponsive. I'm thinking it has something to do with my wordpress theme's set up.
This href="http://placehold.it/350x125" doesn't say to fancybox that you are opening an image so you either :
1). add the fancybox.image special class to your link like
<a class="cta-nav-hover fancybox fancybox.image" href="http://placehold.it/350x125" title="Bio"><span></span></a>
2). add the (HTML5) data-fancybox-type attribute to your link like
<a data-fancybox-type="image" href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>
3). add the type option to your fancybox script like
$(".fancybox").fancybox({
type: "image"
});
whatever you think works better for your case.
NOTE: numbers 1). and 2). above work for fancybox v2.x only. Number 3). works for either v1.3.4 and v2.x
EDIT : included a JSFIDDLE with your code and jQuery v1.8.3.
There are two links :
one using "fancybox.image" class : working
other without : not working
Till now I am developed an app with jquery mobile in phonegap.
It has multiple views/pages.
how to load multiple pages using jQuery mobile
The following snippets show how you can load different page:
Go to Page2 <!-- for page2 in same html -->
Go to Page2 <!-- redirect to different html -->
or
$.mobile.changePage("#page2"); // for page2 in same html
$.mobile.changePage("page2.html"); // to go to different html file
I have a sample Android Phonegap application in Github which contains two html files with two pages and shows connects them together.
Although it is using Android but the /www file structure will remain same for iOS XCode project also. So you can copy the folder and run it same in xcode. I have tested the setup on XCode with Cordova 1.7.1.
you should add all javascripts and css files in the first page that is loaded first;;
ex: my app the first page is index.html;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="css/jqm-docs.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.datebox.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.scrollview.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<!--
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
</head>
<body>
<div data-role="page" id="indexPage" >
<div data-role="header">
<a href="#" id="btnExit" data-role="button" data-inline="true" data-icon="back" >Exit</a>
<h1>Sample App</h1>
</div>
<div data-role="content">
</div>
</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/cordova-1.7.0rc1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</script>
<script type="text/javascript" src="controllers/firstpage.js" ></script>
<script type="text/javascript" src="controllers/secondpage.js" ></script>
</body>
</html>
and fisrtpage should like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div data-role="page" id="firstpage" >
<div data-role="header" data-inline="true">
<a href="#" data-role="button" data-inline="true" id="btnLogOut" data-icon="back" >Log out</a>
</div>
<div data-role="content" data-content-theme="a" style="width:97%;">
the first page
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul style='background-color:#313439'>
</ul>
</div>
</div>
</div>
</body>
</html>
And firstpage.cs
$( document ).delegate("#firstpage" ,"pageinit", function() {
/// add your code here
});
I'm hoping to be able to load an ExtJS chart inside Ext.Net(coolite) pages.
I've copied the pie chart from the ExtJS samples and have put it in an test aspx document to see it work:
heres is my pie.aspx
<html>
<head>
<title>Pie Chart</title>
<script type="text/javascript" src="ExtJs4/ext-all.js" />
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true,
disableCaching: true,
paths: { 'Ext': "/app/" }
});
</script>
<link rel="stylesheet" type="text/css" href="ExtJs4/resources/CSS/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ExtJs4/examples/shared/example.css" />
<script type="text/javascript" src="ExtJs4/examples/example-data.js"></script>
<script type="text/javascript" src="app/pie.js"></script>
<script type="text/javascript" src="ExtJs4/bootstrap.js"></script>
</head>
<body id="docbody">
</body>
when I try and load it from an Ext.Window I dont see anything just an empty popup. if I go to the url directly i dotn see anything either
Here's the code I'm using to attempt to load the chart (i put it inside my existing coolite code):
<ext:Window
Title='!'
runat="server"
AutoDataBind="true"
Modal="true"
ID="ChartWindow"
Width="900"
Height="670"
Hidden="false">
<AutoLoad Url="pie.aspx" Mode="IFrame" />
</ext:Window>
Am I going about this the wrong way in trying to using the Ext.Net dll with the new ExtJS libraries? Is there another way I could go about accomplishing the same thing (ie: have a server-side window to load the ExtJS 4 charts)?
Thanks for any input.
solved!!
not sure what was the problem,my code is correct,maybe only the cache
Doubt this is possible as I don't have a 1 page app, but pretty much every view I make contains 80% of the same css/javascript, so is there any way I could tell knockoutJS a master view which everything else would just populate?
I doubt it as this is pretty much what a 1 page app is for... best I can hope for is to use something like Combres to combine all my non-changing stuff together into one resource file per type...
== EDIT ==
Adding example of what I mean, I am pretty sure I wouldn't be able to inject into multiple areas like shown below, but here is an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Master Page</title>
<link type="text/css" rel="stylesheet" href="../Assets/Styles/main.css">
<link type="text/css" rel="stylesheet" href="../Assets/Styles/Themes/simple.css">
<link type="text/css" rel="stylesheet" href="../Assets/Styles/jquery.qtip.min.css">
{Per Page Css Here}
</head>
<body>
{Per Page Content Here}
<script type="text/javascript" src="../Scripts/Libs/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery.validate.min.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery.tmpl.js"></script>
<script type="text/javascript" src="../Scripts/Libs/jquery.qtip.pack.js"></script>
<script type="text/javascript" src="../Scripts/Libs/knockout-1.2.1.js"></script>
<script type="text/javascript" src="../Scripts/Libs/knockout-external-templates.js"></script>
<script type="text/javascript" src="../Scripts/Libs/cufon-yui.js"></script>
{Per Page Scripts Here}
</body>
</html>
<!-- View 1 -->
<link type="text/css" rel="stylesheet" href="../Assets/Styles/Views/view1.css">
<h1>Some Content</h1>
<script type="text/javascript" src="../Scripts/view1.js"></script>
<!-- View 2 -->
<link type="text/css" rel="stylesheet" href="../Assets/Styles/Views/view2.css">
<h1>Some Other Content</h1>
<script type="text/javascript" src="../Scripts/view2.js"></script>
Again, if I cannot do this its not a game breaker, just dont want to have to update every view if I update the jquery version etc...
You could declare your Javascript code relevant to each view in your views and the common code in your master page. Then call that bit of code from your master page and bind them using ko.applybindings.