I have implemented bxslider in our site where slider has been coming in dynamic way like in while loop. Here there is dynamic code in while loop like:
$html_img = '<div class="sch_rel_img">';
if(count($node_img)>1)
{
$html_img .='<link href="'.base_path().drupal_get_path('module','demonz').'/css/jquery.bxslider.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8"/>';
$html_img .='<script src="'.base_path().'sites/default/themes/demonz/js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>';
$html_img .='<script src="'.base_path().drupal_get_path('module','pubclub').'/js/jquery.searchres_bxslider.min.js" type="text/javascript" charset="utf-8"></script>';
$html_img .='<script type="text/javascript" src="'.base_path().drupal_get_path('module','pubclub').'/js/search_carousel.js" charset="utf-8"></script>';
//$html_img .="<input type='hidden' name='nid' id='nid' value='".$nid."' />";
//$car = 1;
//$html_img .='<div class="schnext" id="schnext_'.$nid.'"></div><ul class="carousel_'.$nid.'">';
$html_img .='<div class="schnext" id="schnext"></div><ul class="carousel" id="carousel_'.$nid.'">';
foreach($node_img as $img)
{
$image = $img['filepath'];
$html_img .="<li>";
$html_img .="<img src='".$image."' width='98%' height='96%' />";
$html_img .="</li>";
}
/*$html_img .= "<li><img src='".base_path()."sites/default/files/images/events/17b9e1fb62623361831924370675857fe73225b8/big-event.jpg' width='98%' height='96%' /></li>";
$html_img .= "<li><img src='".base_path()."sites/default/files/images/events/17b9e1fb62623361831924370675857fe73225b8/innquizitive_thursday_screen_ad.jpg' width='98%' height='96%' /></li>";*/
//$html_img .='</ul><div class="schprev" id="schprev_'.$nid.'"></div>';
$html_img .='</ul><div class="schprev" id="schprev"></div>';
}
$html_img .='</div>';
And my bxslider script is
<script type="text/javascript">
var slider = $(".carousel").bxSlider({
mode:'horizontal',
auto:false,
pager:false,
moveSlides:1,
nextSelector: '#schnext',
prevSelector: '#schprev'
/*nextText: 'Onward →',
prevText: '← Go back'*/
});
</script>
how to implement this thing to get multiple carousel in one page. I can't understand how to build up the js file of bxslider in dynamic way as well as above php script's code.
I tried this thing with $('.carousel').each(function() { slidercode }); but not desired result.
If any one knows about this type of solution, please help me.
Thank you
As you have muiltiple DIVs with a unique carousel_* ID just use them for the selector.
$('#carousel_1').bxslider({ ... });
$('#carousel_2').bxslider({ ... });
...
Or if they all have the same options:
$('.carousel').each(function(index,item) {
$(item).bxslider({ ... });
});
Multiple slideshows are also explained in the docs from bxslider.
Related
Hi I am trying to create a jquery.terminal. I tried to follow this article, here it uses the body tag, I wish to use only a div for the terminal area not the whole body. Tried accessing the <div id="myterm"></div> like
<script>
$('#myterm').terminal({
hello: function (name) {
this.echo('Hello, ' + name + '. Welcome to MyTerm');
}
},
{
greetings: 'Checkout help !'
});
</script>
But didn't work !
Yes it does work.
Try hello world on the prompt
$('#myterm').terminal({
hello: function (name) {
this.echo('Hello, ' + name + '. Welcome to MyTerm');
}
},
{
greetings: 'Checkout help !'
});
#myterm {
height: 300px;
border: 1pxs solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.34.0/js/jquery.terminal.min.js" integrity="sha512-lfkU/Qku0yOVZEYANlw2mOv7fpHFdS1E62UT7vJ55k22OB+xgRNNa6Cdor4Lugl4jhDjX29lJAG12X/OHFe8JQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/2.34.0/css/jquery.terminal.css" integrity="sha512-lT1/Sb6Bu4LaJJoTsxNZnlvt7pjuntBoSqSMJY7MxG5Yl1XgxsXA6jcJinPU0lx5eEsnudBE1ubzHSYR/W8xTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div id="myterm"></div>
My PHP is working fine and I appear to be getting back the correct JSON data for FLOT, but I'm still getting a blank chart :-/
Here's the PHP:
foreach($result as $row) { //or whatever
$dataset1[] = array((int) $row['INDX'], (int) $row['RUNTIME'] );
}
echo json_encode($dataset1);
Here's a sample of the JSON it returns:
[[31,2303],[113,5697],[201,4485],[151,4404],[192,2668],[84,1082],[13,6003],[68,3628],[12,2115]]
Here's the function to plot:
$(function () {
$.plot($("#dashboard_div"), apudata);
console.log(apudata);
});
The console log shows correctly formatted JSON as above. I can cut and paste from the console log into a literal variable for that function and it works, but passing the JSON as a variable doesn't.
Ideas?Help?
Try using the code below. Set the 1000 (ms) interval to however often you want the graph to update. This is simply (very slightly edited) code from one of my previous posts that I put in the comments.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>AJAX FLOT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
</head>
<body>
<div id="placeholder" style="width: 100%;height: 600px;"></div>
<div id="div" style="width: 100%; height: 100px;"></div>
<script type="text/javascript">
var options = {
lines: {
show: true
},
points: {
show: true
},
xaxis: {
mode: "time"
}
};
window.setInterval(function(){
$.getJSON('http://localhost/data.php', function (csv) {
dataOne = csv;
var plot = $.plot($('#placeholder'), [dataOne], options);
});
}, 1000);
</script>
</html>
Not sure if it matters, but the flot docs say to just pass the selector as a string to $.plot(), and not a jQuery object. So instead of
$.plot($('#dashboard_div'), apudata);
try
$.plot('#dashboard_div', apudata);
.load() only works on files coming from a server, so it will work later as I'm going to put this on a server
Edit: This code works on firefox but not on chrome
I've been trying to use ajax to load a webpage after selecting an option but the script doesn't even seem to load
here's the script + html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="DaVinciRace.css" />
<title> Da Vinci Race 2014-2015 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
</head>
<body style="background:#f2f2f2;">
<div id="logo">
<img src="Resources\DVRLogo.png"/>
<!-- <p class="text">Da Vinci Race</p> -->
</div>
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu">
<div class="chronometre" ></div>
</div>
</div>
<div id="DVRChrono">
</div>
<script>
$(document).ready(function(){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
});
</script>
</body>
</html>
the document "Chronometre.html" is in the same folder as this html page
I feel like I'm missing something obvious but can't for the life of me figure out what it is
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script>
(function($){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
})(jQuery)
</script>
This isn't adding a click handler:
$("#options").on("click", ".chronometre", function() {
// code
});
Because it executes before the #options element exists on the page. The code is executing without error, the jQuery selector simply isn't finding anything. So there are no elements to which a handler can be attached.
You can fix this either by moving the code to the end of the page or by wrapping it in the document.ready handler:
$(function() {
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
});
});
Additionally, your script tags are broken. Each tag should have either a src or content, but not both. Separate them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// your code
</script>
I have two CSS files in my Sencha touch application. Lets call them A.css and B.css. Based on the URL I want the application to load different CSS.
Lets say URL 1 is www.website.com/#1 so for this I would like to load A.css. similarly URL 2 is www.website.com/#2 so for this I would like to load B.css
Is it possible to load CSS dynamically based on the URL?
You can use JavaScript Regex for this.
Very easy method:
// For www.website.com/#1
if (/www.website.com\/#1/.test(window.location.href)) {
/* Your Code Here For Loading Css */
}
// For www.website.com/#2
if (/www.website.com\/#1/.test(window.location.href)) {
/* Your Code Here For Loading Css */
}
I hope this helps!!!
You can use the follow JavaScript code to load CSS dynamically for your requirement:
if (window.location == "http://www.website.com/#1") {
LoadCSS("A.css")
}
else if(window.location == "http://www.website.com/#2") {
LoadCSS("B.css")
}
function LoadCSS(filename) {
var fileref = document.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
}
Get hashtag value from URL and then depending on value change the link for CSS.
To get hashtag value:
$url = "www.website.com/#1";
$params = parse_url($url);
$value = $params['fragment'];
This will give you hashtag value, then depending on value link CSS file in header:
<?php if ($value == 1) { ?>
<link href="A.css" rel="stylesheet" type="text/css" />
<?php } else { ?>
<link href="B.css" rel="stylesheet" type="text/css" />
<?php } ?>
I assume you have one template available for 2 URLs. Loading CSS using JavaScript is a pretty bad practice because it's slow and it's giving the user a bad experience since nothing is initially styled.
Anyway you can use the append function to add the CSS to the head tag.
$('head')
.append( $('<link rel="stylesheet" type="text/css" />')
.attr('href', 'your_stylesheet_url') );
And for the URL itself simply use the JavaScript window.location like so:
if (window.location == "#1url") {
// load the A.css using the append function like above
}
I´m using the tooltip script qtip2. I want to show inside the tooltip informations from a Mysql database.
For that im using a ajax.php
$var = mysql_real_escape_string($_GET['var']);
//connection to the database
$dbhandle = mysql_connect($localhost, $XXXXX, $XXXX)
or die("Unable to connect to MySQL");
//select a database to work with
$selected = mysql_select_db("tester",$dbhandle)
or die("Could not select examples");
//execute the SQL query and return records
$result = mysql_query("SELECT information FROM data_table WHERE value='$var'");
//fetch tha data from the database
while ($row = mysql_fetch_array($result)) {
echo $row{'Name'};
echo $row{'Beschreibung'};
}
//close the connection
mysql_close($dbhandle);
And the test.html
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.0/jquery.qtip.min.css" />
<!-- /stylings -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.0/jquery.qtip.min.js"></script>
<!-- /scripts -->
</head>
<body>
<a href="test/ajax.php" class="ajax_TT">
Enterprise hosting</a>
<script type="text/javascript">
$(function () {
$(".ajax_TT").on("click",function (e) {
e.preventDefault(); // normalized for IE
var $this=$(this);
var link = $this.attr('href');
$.ajax({
url: link,
cache: false,
data: {
html: "<p>Text echoed back to request</p>"
},
method: 'post'
}).done(function (html) {
$this.qtip({
content: {
text: html
},
style: 'qtip-wiki',
show: {
ready: true
}
});
});
});
});
</script>
</body>
</html>
On the test.html everything works, but if i use the test.html code inside a Joomla article, the tooltip just show the code from the ajax.php, and not the Mysql data.
Here is a screenshot, how it looks like in a Joomla article.
(http://s14.directupload.net/images/130810/8dicx7la.jpg)
Thanks for the help.
This is because Joomla is escaping the PHP code. I'm guessing the file is in the same directory as Joomla. Try moving the PHPfile outside of Joomla.
If you are on CPanel, you could probably create a different subdomain that would still have access to the DB. Another alternative is to use a Joomla plugin that allows you to execute PHP code like the following but I'm not sure how that would work out.
http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-content/4470
I'm not a Joomla expert but hopefully that points you in the right direction.