I have a question and I don't have a server with cloudflare in order to test this, hope someone could help me.
I have an html page with a jQuery logic for example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
</head>
<body>
<p id="demo"></p>
<script src="timer.js"></script>
</body>
</html>
timer.js
// A $( document ).ready() block.
$( document ).ready(function() {
myFunction();
});
function myFunction() {
var dt = new Date();
var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();
$('#demo').html(time);
}
as we know Cloudflare caches JS and HTML content but my jQuery is a timer that will show the time each time I send a response.
What would happen with CloudFlare if I had Cache-Control: public, max-age=31536000 and Cloudflare caches everything.
is my jQuery logic going to work? or is the timer going to stop working ?
I am using a timer in this example but my real jQuery logic what it does is to hide some DIV content randomly, I have a website where I have like 5 rows this rows are always there but with jQuery I remove ($target.remove()) some of them randomly and the others I just shuffle them.
but I'd like to know if my logic will still working ? or my jQuery will continue as normal?
CloudFlare doesn't execute your JavaScript, it just caches it. If your script modifies the DOM in a user's browser, CloudFlare won't cache that.
Related
I want to create a site with a 360 video thats streamed from my computers 360 cam (ricoh theta s) and uses the possibilites of a-frame. I did not have any luck with embedding youtube livestreaming within a-frame though. I would have a webserver and the stream would not be really public so maybe there is some solution that involves selfhosting? Does anybody have any experience with achieving sth like this? i cant find anything related so far and this plays a crucial role in my robotproject...
EDIT 1:
I might specify even more after some research:
it would be perfect if a-videosphere and a-video would support sth like hls or mpeg-dash - streams. since that would need some kind of player for chrome and android stuff i think the easiest route would be to support a motionjpg-support because they are very easy to create. flashstreams can be good too but i dont think there is a future for that.
is there anything like that in the planning by someone because i am quite sure that nothing like that exists yet... i took 2-3 days of researching and find nothing about that topic... just a getUserMedia for webcam example showed up but its not good for my purpose.
another approach i could live with would be a routine that just autoreloads pictures in a-sky (if possible without flickering). i tried to integrate javascripts that are supposed to do that within normal divs and so but nothing worked...
or did somewhere someone get a stream of any kind running in a-videosphere and if so how?
EDIT 2:
i got it working... somehow... not really but looks promising...
the stream is provided by "yawcam" which uploads a new picture every second to my ftp. if i now click on the red sphere the script starts via addEventListener 'click' and the content of a-sky gets updated... is there any way to make a loop out of that script so one doesnt have to click anymore and it just update itself every second?
<head>
<meta charset="utf-8">
<title>joeinterface</title>
<meta name="description" content="360 Video — A-Frame">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init() {
const sky = document.querySelector('a-sky');
this.el.addEventListener('click', () => {
sky.setAttribute( 'src', this.data + "?" + Math.random());
});
}
});
</script>
<a-scene>
<a-camera position="0 0 0">
<a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336" radius="8" position="-8 2 -8" set-sky="image1.jpg"></a-sphere>
<a-sky></a-sky>
</a-scene>
</body>
so here is the solution for the proposed "kind-of" solution...
the picture "out" is updated via "yawcam" on my server every second and updated in the a-sky tag - even without flickering... so no sound but at least kind of a live-video-feed in a-sky.
<head>
<meta charset="utf-8">
<title>joeinterface</title>
<meta name="description" content="360 Video � A-Frame">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init: function() {
this.timeout = setInterval(this.updateSky.bind(this), 100);
this.sky = this.el;
},
remove: function() {
clearInterval(this.timeout);
this.el.removeObject3D(this.object3D);
},
updateSky: function() {
this.sky.setAttribute( 'src', this.data + "?" + Math.random());
}
});
</script>
<a-scene>
<a-camera position="0 0 0">
<a-cursor color="#4CC3D9 " fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336 " radius="2" position="-8 2 -8"></a-sphere>
<a-sky set-sky="out"></a-sky>
</a-scene>
</body>
I just switched my site over to SSL and all of my social sharing button counts have reset to zero, which is expected, but apparently it's possible to tell those buttons to use the old http urls in order to bring back the old counts.
I just can't figure out how to do it for my setup, which is AddThis for the buttons and Php/Html for the code (Joomla actually, but that may be irrelevant).
The AddThis code is simple:
<div class="addthis_sharing_toolbox" data-url="THE URL"></div>
So my best guess is that I need to take the current URL, change it from https to http, and plug it into the above 'data-url'.
But looking at other threads here, there seems to be a lot of controversy about how to securely and correctly get the current URL, so that's where I'm getting stuck.
(And then on top of that, I'll need to make this switch only for past articles, not new ones, but that's another story.)
Any ideas?
Thanks very much,
Phil
The share counts are based off of the exact URL and unfortunately, the APIs for each of the sharing services (Facebook, Pinterest, etc.) treat the protocols as distinct URLs.
The only thing you could do prevent losing the share counts from existing URLs would be to set override the shared URL to be the old HTTP URL.
Then, you'd need to setup a 301 redirect on your site to redirect the visitor from the old URL to the new HTTPS URL after a visitor clicks the old URL from a shared link on Facebook (or any other service).
It looks like you already found the instructions for changing the URL that's shared (http://www.addthis.com/academy/setting-the-url-title-to-share/), so you would just set the data-url attribute to be the old (HTTP) URL.
Took me all day, but I finally figured this out! This gave me a lot of the answer, but I still had trouble tweaking it for AddThis.
Here's the code (the first line applies the fix only to articles published before Aug 1, 2016, because I don't need to make the change for newer articles):
<?php if (strtotime($this->item->publish_up) < 1470009600) : ?>
<script type="text/javascript">
function buttons(){
var kCanonical = document.querySelector("link[rel='canonical']").href;
window.kCompositeSlug = kCanonical.replace('https://','http://');
return;
}
buttons();
var addthis_share = { url: ''+kCompositeSlug+'' };
</script>
<?php endif; ?>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ID-GOES-HERE" async="async"></script>
Here is my code that worked on a client's Joomla / K2 site, this is part of my item template override:
<?php if (strtotime($this->item->publish_up) < 1503201600) : ?>
<!-- Non SSL Command for buttons here -->
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='YOURAPPIDHERE' data-link='http://www.yoursite.com<?php echo $this->item->link; ?>'></div>
<?php else: ?>
<!-- Regular SSL Command for buttons here -->
<div class='shareaholic-canvas' data-app='share_buttons' data-app-id='YOURAPPIDHERE'></div>
<?php endif; ?>
Details / analysis of solution here:
https://www.covingtoncreations.com/blog/solution-for-lost-share-count-after-moving-to-ssl-https
Does it work on a Joomla website which uses Sharethis not AddThis ?
Currently I have the following code in the
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "XXXXXXXXXXXX", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<meta property="fb:app_id" content="XXXXXXXXXXXX"/>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=XXXXXXXXXXXX=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
I've got a iframe with pdf file:
<iframe src="pdf/sample.pdf"></iframe>
How to set that the iframe is the same height as the pdf file, without scrollbars?
If you want to display the PDF without scrollbars, you can do this by passing parameters in the URL. Adobe has documented this here:
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
Try this:
<iframe src="pdf/sample.pdf#view=fit"></iframe>
You are not exactly setting the height of the iframe to fit the PDF, but it is probably the most robust solution since it is browser-independent and doesn't require JavaScript.
Here is an update after Daniel's comment.
I created a test HTML as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
</head>
<body>
<iframe src="http://partners.adobe.com/public/developer/en/pdf/PDFReference.pdf#view=fit&toolbar=0&navpanes=0"
width="300px" height="400px"></iframe>
</body>
</html>
This is how it looks in Chrome:
This is as expected.
Note that I also turned off the toolbar and the navpane so there is room for the page.
You can do it simply using the method I've explained on my facebook post https://www.facebook.com/antimatterstudios/posts/10151007211674364
Do you have an IFrame, which you want to automatically set the height of because you're hosting a page from another website in yours.
Well, unfortunately the IFrame cannot take the height of the content you are loading and unless you put a height, it'll show either the default height, or no height at all. This is annoying.
I have the solution for you, it'll only work on recent, standard supporting browsers, but also works in IE8 too, so for about 99% of you it's perfect.
The only problem is you need to insert a javascript inside the iframe, which is easy if the content you are loading belongs to you, you can just open the content you're loading and put the javascript in the content.
In your website, you need a piece of javascript which can "receive a message from the IFrame", like this
jQuery(document).ready(function(){
jQuery(window).bind("message",function(e){
data = e.data || e.originalEvent.data;
jQuery("iframe.newsletter_view").height(data.height);
});
});
in your IFrame content, add this at the very bottom, probably it's ok to just do something like "$template.$javascript" using PHP or something, even if the javascript is not inside the tag
<script type="text/javascript" src="jquery-1.7.1-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
parent.postMessage({
height:$(document.body).height()+50+"px"
},"*");
});
</script>
Obviously I am using jquery, you dont have to, it's just easier and probably you are using it, so save yourself the hassle.
if you do that, when the iframe loads, it'll send a signal back to the parent window, which will resize the iframe based on the length of the content :)
I'm sure you can figure out how to alter the little things, but thats the method I'm using
My solution
$(document).ready(function(){
var width = $(window).width();
var height = $(window).height();
$('#objFile').attr('style', 'width: ' + width + 'px; height: ' + height + 'px;');
});
<object data="myFile.pdf" type="application/pdf" id="objFile"></object>
I have solved my issue but can't answer it myself since I am too new to this site:
turns out I needed to use the following:
chart = new google.visualization.PieChart(document.getElementById('pie_today_div'));
I was using JQuery to access the element, $('#pie_today_div'). As of now the evidence points to the fact that the PieChart constructor has to have standard JS code, document.getElementById('pie_today_div')
Maybe something else going on, but changing the way I access the container element fixes my code
ORIGINAL ISSUE FOR REFERENCE TO MY SOLUTION
I am getting a "Container is not defined" error when I am trying to instantiate a Google PieChart object.
I validated my page at http://validator.w3.org/ and i get a pretty green banner saying it validates.
I receive no js errors when the page loads. My Ajax call is making a full round trip with the data I want from the DB.
Here is my HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link href="/css/note.css?10022012" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" language="javascript" src="/call/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1.0', {'packages':['corechart']});</script>
<script type="text/javascript" language="javascript" src="/call/js/init.js?10042012-2"></script>
<title>Call Stats</title>
</head>
<body>
Today Stats
<div id="pie_today_div"></div>
</body>
</html>
here is the js:
function drawPieChartToday() {
$.post('/call/ajax.php5',{
action:'pieToday'
}, function(ticketData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Count');
data.addColumn('number', 'Topic');
for (var key in ticketData){
data.addRow([key, ticketData[key]]);
}
options = {
title: 'Issue Topics'
};
alert($('#pie_today_div').attr('id'));
chart = new google.visualization.PieChart($('#pie_today_div'));
chart.draw(data, options);
},'json');
}
here is my debugging code to make sure the element was being found:
alert($('#pie_today_div').attr('id')); <-- alerts "pie_today_div"
I'm not a jquery fan, but I think that $('#pie_today_div') returns a set of matched elements. The attribute computation works because (from jquery documentation) it "gets the value of an attribute for the first element in the set of matched elements".
So try
chart = new google.visualization.PieChart($('#pie_today_div')[0]);
or directly
chart = new google.visualization.PieChart(document.getElementById('pie_today_div'));
A container error is exactly that, It is looking for the ID
example:
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
You WILL get this error “Container is not defined” for Google Charts if you are missing
that ID
Thus a Div with that chart_div id would fix this
There must be line where you load the types of visualization you want to have in your web page. It looks like this
google.load("visualization", "1", {packages: ["corechart"]});
Here I am loading package corechart. Place this line as the first line after in the <script> tag inside your HTML page like index.html. That should solve he problem.
use $timeout before init, it works well, else you need to destroy the instance
Just wanted to mention, this happened for me after a simple mistake. I changed
var data = new google.visualization.DataTable(huh);
to the following in an effort to change the chart type:
var data = new google.visualization.BarChart(huh);
but this is all wrong, you change the chart where you mention the container:
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
Is there a script to make the browser refresh when a page is re-sized? More specifically, one that emulates the browser refresh button or F5? I've found two, but they don't quite do what I'm looking for;
<script type="text/javascript">
var currheight = document.documentElement.clientHeight;
window.onresize = function(){
if(currheight != document.documentElement.clientHeight) {
location.replace(location.href);
}
}
</script>
and
<body onResize="window.location=window.location;">
The problem with these two is they appear to completely reset the page where as using the browsers refresh function leaves some user made changes intact (like being at a specific hash for instance) which is what I need.
So is there a way to refresh the window on re-size with a script similar to if the browser refresh was clicked? I don't understand why there is even a difference but there is.
Thanks.
Yes, you probably want to take a look at some JavaScript events. There is an OnResize event.
Here's a link to get you started with events:
http://www.devarticles.com/c/a/JavaScript/OnReset-OnResize-and-Other-JavaScript-Events/
As far as reloading the page, you can do that too:
http://www.mediacollege.com/internet/javascript/page/reload.html
As far as keeping the user values, you could persist them in a session.
Here is the perfect solution :
I have included timeout of 1 sec i.e. browser will refresh after 1 sec of window resize
$(window).resize(function() {
setTimeout( function(){
window.location.href = window.location.href;
},1000);
});
Without timeout
$(window).resize(function() {
window.location.href = window.location.href;
});
NOTE : You may also use window.location.reload() instead of window.location.href = window.location.href
window.location.reload() reloads the current page with POST data, whilewindow.location.href=window.location.href does not include the POST data
-- hope it helps
Try this:
<![if !IE]> <body onresize="document.location=window.location;"> <![endif]>
<!--[if IE]> <body onresize="window.location.reload();"> <![endif]-->