I'm using jChartFX for some charting requirements for my website, I'm using
<?php include $_SERVER["DOCUMENT_ROOT"].'/footer.php' ?>
to bring in a footer to the website which has a line of code in it of
<script type="text/javascript" src="/js/retina.js"></script>
Which for some reason is making the chart not show for jChartFX. I have been through the process of commenting out the various sections of footer in order to isolate this being the incompatibility.
Note: I've not included the full page code to save on space, but can reply with full code if required.
The chart is displayed through;
<div id="ChartDiv" style="width:600px;height:400px"></div> <script type="text/javascript" language="javascript">
var chart1;
function loadChart()
{
chart1 = new cfx.Chart();
<!-- chart1.getData().setSeries(2); -->
chart1.getData().setSeries(1);
chart1.getAxisY().setMin(100);
chart1.getAxisY().setMax(1000);
var series1 = chart1.getSeries().getItem(0);
<!-- var series2 = chart1.getSeries().getItem(1); -->
series1.setGallery(cfx.Gallery.Lines);
<!-- series2.setGallery(cfx.Gallery.Bar); -->
var data = <?php echo json_encode($temp, JSON_NUMERIC_CHECK); ?>;
chart1.setDataSource(data);
var divHolder = document.getElementById('ChartDiv');
chart1.create(divHolder);
}
To be honest, I'm at a complete loss so any / all help would be appreciated.
Thanks
Maudise
I added retina.js to some of our jChartFX test pages and they displayed fine. There might be something else you are including in the page when you generate your footer.
I did not check too deep into retina.js but it seems to check for img tags and try to replace with retina counterparts and jChartFX does not use img tags.
Regards,
JuanC
Related
I embedded Power BI into my web page using iframe code but I would like to hide the footer with share buttons. Is there any way to achieve this?
I'm specifically talking about embed code (iframe), not public URL.
Thank you.
Typically, PowerBI returns the Iframe with it to show it was created by PowerBI, with the name embedded.
Depending on how you created it you have some options.
JavaScript with CSS to hide the footer.
If you used the UI, from the UI using this
link, as described below from the site in link
Some code to help you out: at configuration you can setup various values, and set your
footer to false
<html>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/powerbi-client/dist/powerbi.js""></script>
<script type="text/javascript">
var embedConfiguration = {
type: 'report',
accessToken: 'someToken',
id: '71.Tykt.org',
embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=xxx.TYKT.org',
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
// Find the setting you want to hide and set it to False
}
};
var report;
window.onload = function () {
var $reportContainer = $('#reportContainer');
report= powerbi.embed($reportContainer.get(0), embedConfiguration);
}
</script>
<div id="reportContainer"></div>
</html>
Hope it helps!
I am building a website using bootstrap and i have to use the same modal on every page. Right now i have to copy the whole code into every html and then it becomes available to every page but this is isn't the ideal way of doing things so i would like if anyone suggests me a way that i don't have to copy the same html code to every file. I want a way that the same html code becomes available to all pages while it is kept only at one place.
I cannot post my code here but i'll try to tell you my problem exactly.
<!-- navbar for website -->
1 html code
<!-- sign in and login modal(buttons are on navbar) -->
2 html code
<!-- main body -->
3 html code
4 html code
5 html code
<!-- footer for website -->
6 html code
7 html code
For example according to above block navbar, modal and footer(1,2,6,7 lines) remain same for every page. How can I put all that elsewhere and just link it somehow like css files are linked(something like that). I can give you more information just ask in comments(other than my exact code).
There are two ways to accomplish your goal:
Using Javascript
<script>
function includeModal() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
}
</script>
Then call it
<script>
includeModal();
</script>
Using HTML
<div w3-include-html="modal.html"></div>
At first you need to divide your html, like make another file for only Footer i.e. Footer.html, and header.html etc.
Then use JQuery to include them.
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("header.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
The jQuery .load() documentation is here
My website has the same navigation menu throughout, instead to rewriting the HTML code for every page, can I link to a second HTML file (that contains the nav HTML code) like you would with CSS? Or will that create problems?
Simple way would be to put the header part in a separate html file.
Now load this file in html code using jQuery load function like
$("#headerDiv").load("header.html")
Know that, this will require web server because load function sends a request to server.
Check out the code sample:
demo.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function(){
$("#headerDiv").load("header.html");
});
</script>
</head>
<body>
<div id="headerDiv"></div>
<!-- Rest of the code -->
</body>
</html>
header.html
<div >
<a>something</a>
<a>something</a>
</div>
That is called HTML includes, and YES, it is possible
<div w3-include-HTML="content.html">My HTML include will go here.</div>
<script>
(function () {
myHTMLInclude();
function myHTMLInclude() {
var z, i, a, file, xhttp;
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
if (z[i].getAttribute("w3-include-html")) {
a = z[i].cloneNode(false);
file = z[i].getAttribute("w3-include-html");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
a.removeAttribute("w3-include-html");
a.innerHTML = xhttp.responseText;
z[i].parentNode.replaceChild(a, z[i]);
myHTMLInclude();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
})();
</script>
NOTES
HTML doesn't have a simple include mechanism (except for frames like iframe, which have side effects).
A better solution would be to use Server-Side includes, which is the preferred way of adding common parts to your document, on the server, of course.
for an HTML solution -since you have no other tags in your question- there is HTML imports:
<link rel="import" href="nav.html">
But this new -working draft- and it doesn't have good browser support.
Resources:
W3C - imports
MDN - HTML Imports
caniuse - HTML Imports
webcomponents.org - introduction to html imports
html5rocks - imports
W3schools has an include. They also have there own CSS as a side note. Put the callup in footer (wherever)
<script src="vendor/w3js.min.js"></script>
<script src="w3.includeHTML();"></script>
And then on page:
<header class="header navbar-fixed-top">
<nav id="inc_nav" w3-include-html="nav.html"></nav>
</header>
<section id="inc_header" w3-include-html="header.html"></section>
<div id="content" tabindex="-1"></div>
Sorry for my English, I am a new to jquery mobile and only have basic knowledge about javascript languages in general; I was playing around with a single page website mobile ( I usually use Dreamweaver CS6) and I reached a good result with photoswipe and everything was good since I had just few images. I have added a lot of them so now I would get the images' link dynamically.
In short, I want to start from a folder on my ftp and read all images file within it and create the <li> items for each one. Can I make this job with jquery mobile or should I use a language like php or .Net
I have read some examples around here and on google but they didn't help me a lot, like this one, I am sure it could be an answer for me in it but I don't know how to start
http://docs.phonegap.com/en/2.4.0/cordova_file_file.md.html#DirectoryReader
Here some code I'm using:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<!-- Librerie PhotoSwipe -->
<link rel="stylesheet" type="text/css" href="../PhotoSwipe/photoswipe.css">
<link rel="stylesheet" type="text/css" href="../PhotoSwipe/styles.css">
<script type="text/javascript" src="../PhotoSwipe/klass.min.js"></script>
<script type="text/javascript" src="../PhotoSwipe/code.photoswipe-3.0.5.min.js"></script>
<!-- End PhotoSwipe -->
<script type="text/javascript">
$(document).ready(function(){ var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false, captionAndToolbarAutoHideDelay: 0 }); });
</script>
Then my page
<div data-role="page" id="page">
<div data-role="header">
<h1>Title of my Page</h1>
</div>
<div data-role="content">
<ul id="Gallery" class="gallery">
<li>
<a href="../Images/img04.jpg">
<img src="../Images/img04.jpg" alt=""></a>
</li>
</ul>
</div>
When i land on this page everything works fine. Shall I use something like this?
That I took from this website, can I use JSON to accede to my ftp folder and than cycle the content?
Should I put this in a function? If yes who is going to call it?
$("#Photos").live("pagebeforeshow", function(){
$("ul#PhotoList").children().remove('li');
var tag = MyTag
$.getJSON("https://api.instagram.com/v1/tags/" + tag + "/media/recent?callback=?&client_id=####",
function(data){
$.each(data.data, function(i,item){
$("ul#PhotoList").append('<li><img src="' + item.images.low_resolution.url + '" alt="' + item.caption.text + '" width="200" /></li>');
});
});
var photoSwipeInstance = $("ul#PhotoList a").photoSwipe();
});
Any help is appriciated, thank you in advance, I am sure my issue here is my limited knowledge.
You should use pageinit and pagebeforeshow Instead of $(document).ready. Also .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). http://api.jquery.com/live/
Append list Items:
$("#PhotoList").append('<li><a href="..
When you finish refresh the list to display your new list:
$('#PhotoList').listview('refresh');
Update:
I use php programs on my server in order to retrieve json strings. Something like this...
xhr = new XMLHttpRequest();
xhr.open("GET","http://192.168.100.2/sr/quotelisttest?name="+s,true);
xhr.send("");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4){
alert(xhr.readyState);
alert(xhr.responseText);
var v = JSON.parse(xhr.responseText);
On line 2022 in wp-includes/comment-template.php WordPress 3.7.1 sets the form attribute to 'novalidate.' I don't see a hook to change that.
How do I convince WordPress to leave that attribute off so that native HTML5 form validation is active?
Bob
There's no filter to modify that attribute. You could remove it with jQuery:
$("#commentform").removeAttr("novalidate");
You can remove novalidate attribute with this simple Javascript:
<script type="text/javascript">
var commentForm = document.getElementById('commentform');
commentForm.removeAttribute('novalidate');
</script>
No jQuery needed.
You can include the following code to run script just on posts:
footer.php
<?php if( is_singular() ) : ?>
<script type="text/javascript">
var commentForm = document.getElementById('commentform');
commentForm.removeAttribute('novalidate');
</script>
<?php endif; ?>
Use this function rather than comment_form()
function validate_comment_form(){
ob_start();
comment_form();
echo str_replace('novalidate','data-toggle="validator" ',ob_get_clean());
}