Can anyone please help me how to implement vertical jCarousel by using ajax.
Answer to this question can be easily found on the first pages of jCarousel docs, but okay, I'll copy it here for you ;)
First of all download jCarousel and add all the sources to your <head> tag.
<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />
Then in the place where you want your carousel put this code.
<ul id="mycarousel" class="jcarousel-skin-name">
<!-- The content goes in here -->
</ul>
Then add js code to initialize your carousel.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// Carousel gonna be vertical
vertical : true,
// AJAX callback
itemLoadCallback: itemLoadCallbackFunction
});
});
</script>
Then you need to create itemLoadCallBackFunction to actually load new items into carousel dynamically. Basicly once you get some item with index i you just insert it to carousel with carousel.add(i, item).
UPD:
Here is an example with PHP script inside, you can get some inspiration from there.
Related
I setup bootstrap files in public folder. Routes are as below:
<link rel="stylesheet" href="{{url('assets/css/bootstrap.min.css')}}">
<script type="text/javascript" src="{{url('assets/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/tether.min.js')}}"></script>
no problem with this. I can see connection to files when I check the source code. and also bootstrap fonts are active but, when I try to copy some examples from bootstrap website. It doesn't display properly. For example I copied navigation bar to my main.blade But it doesn't show up.
What is causing this? Any idea?
It s big screen but showing responsive hamburger icon?
You should add jquery before bootstrap min js file
<link rel="stylesheet" href="{{url('assets/css/bootstrap.min.css')}}">
<script type="text/javascript" src="{{url('assets/js/jquery.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/tether.min.js')}}"></script>
<script type="text/javascript" src="{{url('assets/js/bootstrap.min.js')}}"></script>
The order in which you add javascript in HTML page is important. In this case since bootstrap.min.js uses jquery.min.js jquery must be added first. So when bootstrap loads and looks for jquery it finds it.
But if one script does not depend on another then you can add them in any order.
So add jquery.min.js first then anything that uses jquery(like bootstrap) after it.
I have been trying to get this tooltip code to initialize on a page and I cannot get the jQuery to connect properly.
We have PHP running on Ubuntu and we are using Silverstripe. I cannot get the following script to work, no matter where or what file I add it to. I have even tried calling it in from a separate file and it also did not initialize.
How would I add this code to a PHP or SS file? (Silverstripe CMS file)
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
<button type=\"button\" class=\"btn btn-default help-tool\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Below you will find state-by-state breakdowns in Federal, State, and where available Local categories.
Explore the data by clicking the map or by clicking the magnifying lens in the table view.\"><i class=\"fa fa-info-circle fa-fw\"></i></button>
This is generally an issue involving the order in which your scripts are called.
As I'm sure you know, you need to call JQuery before Bootstrap, which it seems like you are doing. Your tooltip code, which is in a different file, is most likely being called before your JQuery and Bootstrap have a chance to load. You can test this by copying your JQuery and Bootstrap script calls into your separate file right before the tooltip script call.
If your script calls are at the bottom of your body tag, and part of the page is being dynamically loaded, you can try calling JQuery and Bootstrap in your head tag instead after your CSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" src="bootstrap.css" />
<link rel="stylesheet" type="text/css" src="main.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
<!--
Your separate file code that
includes tooltip
-->
<!-- Before
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
-->
</body>
</html>
There are two causes that come to mind here. First, it's possible that the $ is getting interpreted by SS's template parser as a variable expression. I would expect you would be getting an error if that is the case. Second, as Sumit Kukreja indicated it's likely that jQuery and Bootstrap are being injected at the bottom of your template and this code is getting executed before those are loaded.
Option 1: To verify if this is happening you could add the following code to Page_Controller::init() or mysite/_config.php:
Requirements::set_write_js_to_body(false);
Which will cause all required javascript to be added in the <head> tag. Not a good idea for production but could help diagnose your problem.
Option 2: You can include that javascript from your controller using Requirements::customScript.
Option 3: Wrap your js snippet in a non-jquery domready listener like so:
document.addEventListener("DOMContentLoaded", function(event) {
$('[data-toggle="tooltip"]').tooltip()
});
I'm a bit of a newbie with sources etc and I took it for granted that I could simply add the script src to the header and then add as many scripts or functions as I wanted after that. For the most part this is working fine but now I hav an issue that I cannot solve.
I can either have one script running or the other, both will not work in harmony no matter how many different permutations I've tried. I'm sure there's an easy fix or something I'm missing entirely. I had a look online for an idiot's guide but didn't find anything of use.
The two function scripts are in different places. One is in the head and called from the body of the HTML pages, the other is in an include which is added to every page for dynamic links.
This loads everything Except what is within the body
<!--Creation and hiding of div to allow images load-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/helperFunctions.js"></script>
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/jquery.min.js"><\/script>')</script>
<!-- Syntax highlighting -->
<link rel="stylesheet" href="../mainCSS/prettify.css" media="screen">
<script src="../js/prettify.js"></script>
<!-- AnythingSlider -->
<link rel="stylesheet" href="../mainCSS/anythingslider.css">
<script src="../js/jquery.anythingslider.js"></script>
<script>
$(function(){
prettyPrint script here;
</script>
<script>
$(function(){
slider script here
</script>
Whilst this loads the body script but none of the others.:
<!-- jQuery (required) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/jquery.min.js"><\/script>')</script>
<!-- Syntax highlighting -->
<link rel="stylesheet" href="../mainCSS/prettify.css" media="screen">
<script src="../js/prettify.js"></script>
<!-- AnythingSlider -->
<link rel="stylesheet" href="../mainCSS/anythingslider.css">
<script src="../js/jquery.anythingslider.js"></script>
<script>
$(function(){
prettyPrint script here;
</script>
<script>
$(function(){
slider script here
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/helperFunctions.js"></script>
I then tried putting the script src in the include, including the src twice and lots of other stupid senseless ideas.
If anyone could help it'd be great! Many thanks
Your include jQuery like three times in this code. i'm not sure if thats the problem but it ain't the solution
// jquery from jquery.com
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- jQuery (required) --> // jQuery from google
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/jquery.min.js"><\/script>')</script>
// both of these are expendable
this might cause a conflict since the last one to be included is an older version of the library. you only need only inclusion. I'm assuming your using migrate because you have older jQuery code running in your scripts.
CODE ERROR
<script>
$(function(){ // syntax error
prettyPrint script here;
</script>
<script>
$(function(){ // same error
slider script here
</script>
you have syntax errors here, and any script that comes after this code will not run or work.
I had a function in one f the scripts that was returning an error. That seemed to be halting the est of the code. -.-
Also only have one instance of jquery in the head now.
i am preparing a jquerymobile app, in which i want to insert a jqplotchart, so that i wrote code for that. but now problem is chart is not being displayed in my page.
libraries i
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" href="stylesheets/jquery.mobile-1.1.1.min.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jquery.jqplot.css" type="text/css"/>
<link rel="stylesheet" href="stylesheets/jqm-docs.css" type="text/css"/>
<script src="jquery.jqplot.min.js" type="text/javascript"></script>
<script src="jqplot.pieRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.barRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script>
<script src="underscore-min.js" type="text/javascript"></script>
<script src="hideAddressBar.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="jqm-docs.js"></script>
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>
javascript i written:
$(document).bind("mobileinit",function() {
// go to server for chart data
$('#pagePlotChart').live('pageshow',function() {
$.get("mygraphdata", function(data){
$.jqplot('plotChart', data,{
title:'My Chart',
axesDefaults:
{
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes:
{ xaxis: { label:"Day", pad: 0 },
yaxis: { label: "Measurement" }
}
});
});
return false;
});
});
html code:
<div id="pagePlotChart" data-role="page" data-rockncoder-jspage="managePlotChart">
<header data-role="header" data-position="fixed">
<h1>Plot Chart</h1>
</header>
<section data-role="content">
<div id="plotChart" class="myChart"></div>
<button id="refreshPlotChart" value="Refresh Chart" data-mini="true"></button>
</section>
</div>
actually i have to take json data from some php file and pass to this chart. and chart shuld display the graph by using that json data from some php file.
my json data will be in this formate ["v1:myName","g:233","h:322"]..etc.
php file is sending json data. i checked in fidler. but chart is not working.
please tell me solution for this.
First of all I notice you are loading jQuery mobile twice in your page header. Try removing the older version, and moving most or all of your JS includes to the page footer, that way your page can (partially) render before the JS files are downloaded by the browser. Best practice for the jqplot components is certainly to move includes to the footer.
The actual order of loading the jqplot components is almost right. It looks like the main jQuery file needs to be loaded before the main jqplot file, though - right now only the mobile version of jQuery is loading before jqplot. Please see this answer for more detail.
If jqplot is loading but the data is not present, or possibly the data or chart code has a bug, you will see a blank space in the page where the chart should be. Make sure that you can load a static chart page hand-assembled with the data you are getting from your PHP page. This will test the data and the includes.
If jqplot is not loading at all (for example if dependencies are not loaded in correct order) you will not see any empty space for the chart at all on your page and it will be rendered with zero space where the chart should be.
It looks like you are calling the chart div correctly. However I am not sure if $(document).bind("mobileinit",function() is working. The base call for jqplot is normally
$(document).ready(function(). Setting up charts in divs that aren't initially visible when the page is rendered can be tricky. This question might help if that's what the problem is.
See this related question about jQuery Mobile rendering content after page is initialized. Basically you can use .trigger('create') per naugtur's comment.
There is an easier way (worked in my case):
-first: delare your plot container div outside of any page (for example just below body tag):
<body>
<div id="plotContainer"></div>
...
-then: set the plot (Chart) in your $(document).ready(function(){ ... here ... }); and hide it so it will not show between pages:
$("#jqxChart").jqxChart(settings);
$("#jqxChart").hide();
-finaly: just copy the div with the plot inside your page:
<script>
$('#page_ID').bind('pageshow', function(data) {
$("#jqxChart").appendTo("#ID_of_DIV_you_want");
$("#jqxChart").show();
$('#jqxChart').jqxChart('refresh');
});
</script>
Hope this helps!!!
I have just purchased "Tonic Gallery" which my client thinks it's absolutely perfect for his website. The difficulty is that it works great with HTML but for ".php" it won't even load.
To give you a better idea, here two links:
Tonic Gallery Link: http://codecanyon.net/item/tonic-gal...gallery/120710
LincHospitality.com: http://linchospitality.com/
This is inputed into the "Portfolio" tab. As per instructions, I have entered the following into the "head" (header.php):
<link rel="stylesheet" type="text/css" href="styles/tonic_gallery.css"/>
<link rel="stylesheet" type="text/css" href="styles/demo_styles.css"/>
<link rel="stylesheet" type="text/css" href="styles/prettyPhoto.css"/>
<script type="text/javascript" src="script/jquery-1.4.js"></script>
<script type="text/javascript" src="script/jquery-easing.js"></script>
<script type="text/javascript" src="script/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="script/portfolio-setter.js"></script>
<script type="text/javascript">
$(function(){
// init the portfolio functionality
$('#portfolio_wavy').portfolioSetter({xmlSource:'portfolio.xml', wavyAnimation:true});
});
</script>
I had then created the "portfolio.php" page with the required input from the plugin:
<?php $page = "portfolio";?>
<?php include("header.php"); ?>
<div role="main">
<div class="wrapper" id="subPagesWrap">
<div id="portfolio_wavy"></div>
</div><!-- wrapper -->
</div> <!-- end main -->
<?php include("footer.php"); ?>
The in a direct ".html" file, it works perfectly! But since I had placed in the "header.php" and "portfolio.php", I get the following error:
$("#portfolio_wavy").portfolioSetter is not a function
Here is a link to the ".html" files as to how it's suppose to work. Same functions, same root folder just not working in ".php".
linchospitality "/" gallery [dot] html
How do I over come this function error? Any simple methods?
Thanks!
You need to run the function after it has loaded. You can make sure of this by running it on the document ready event. I am not sure of the syntax you are using, but just make sure that it is run after the document ready is fired.