Load a random css file on page load (and remember if possible) - javascript

I have 6 different stylesheets, and 1 html page. What i need to do is have the page load one of the stylesheets randomly when it is accessed.
And also, when the user visits and a random stylesheet is loaded, is it possible to remember which stylesheet was loaded, and only load that stylesheet for that particular visitor (i.e. stop randomising... load the style sheet which was originally loaded)?
I have jQuery loaded into html document.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script>
$(document).ready(function(){
var userStylesheet = $.cookie('user_stylesheet');
if(!userStylesheet){
userStylesheet = Math.floor((Math.random()*6)+1);
$.cookie('user_stylesheet', userStylesheet);
}
var ss = $('<link/>').attr('rel', 'stylesheet').attr('type','text/css').attr('href', 'stylesheet' + userStylesheet + '.css');
$(document.body).append(ss);
});
</script>
</head>
<body>
Hello!
</body>
</html>
EDIT
Here's the link for the jquery.cookie.js RAW

Do you have any kind of server-side scripting at your disposal? If so I would decide which CSS file to serve on the server, and save the value in a session variable—then if that session variable is set on subsequent page loads, output it instead of generating a new one.
Alternatively, you can try setting a cookie in javascript or local storage.

Related

How to get the content of an external <script> object without calling the src URL again?

There is a page like this:
<html>
<head>
...
<script type="text/javascript" src="http://someserver/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="http://someserver/getJS?key=123456" ></script>
...
</head>
...
</html>
And the content of getJS
$(document).ready(function() {
...
}
The key is dynamically generated every time the page is loaded, like a session key. The script http://someserver/getJS?key= is only accessible once for each key. On the second access, it returns NULL. However, viewing from Developer Tools in Chrome, the content of getJS is cached in the Resources/Application panel.
My questions:
Using a GreaseMonkey script or snippet, how do you access the content of any external script object as String without calling the URL again?
In Chrome's DevTools, how do you access any script (and other objects) under the Resources/Application panel in a snippet?
Not sure if I'm interpreting your question correctly, but if you're trying to do what I think you're trying to do... You can use Javascript to dynamically create a <script> element, change its src property, and append it to the DOM.
(function() {
var body = document.querySelector('body');
var externalScript = body.createElement('script');
externalScript.src = "https://host.com/script.js";
document.body.appendChild(externalScript);
})()

Html code to Png image

I made a web application which allow the user to create an image dynamically in JavaScript.
It use jQuery to allow the user to place div, resize them and drag them into a <div> Container.
When the user finished to place all div, he can press the "Generate" button which send the <div> Container outerHTML code into a local database.
Then the user can use another script, in php, and past in parameter the id in the database of which render he want to display, then the php script create a page using the code in the database.
My problem is now I want to take the code of this generated html page, then convert it into a png image.
I looked at some other posts and found something interesting : Phantom.js
But what I tried doesn't seem to work. Here is my code :
<html>
<head>
<title>Test</title>
<LINK rel='stylesheet' type='text/css' href='style.css'>
<script type='text/javascript' src='jquery/jquery.js'></script>
<script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>
</head>
<body>
<script>
var page = require('webpage').create();
page.open('http://10.237.35.10/maxime/affichage.php?afficheur=0', function() {
page.render('affichageTest.png');
phantom.exit();
});
</script>
</body>
</html>
So we have the database with the div outerHTML code contained at the id '0'.
"affichage.php" take in parameter a variable "afficheur" then it ask the database to get the code from this variable. For example, afficheur=0 will return the div code contained in the database at the id=0.
When I go to "http://10.237.35.10/maxime/affichage.php?afficheur=0" I have a html page with the render I want. But when I try to run the script I'd posted higher, I haven't any "affichageTest.png" rendered in my folder.
What do I have to do? Do I have to import anything else to run Phantom.js? Or maybe I need to add something to my code?
PhantomJS is a binary not a javascript librarie (it is actually a headless webkit), I can not test it here atm, but here the main idea :
First download the PhantomJS binary, upload it somewhere and make it executable (chmod +x).
Create a file named test.js with this code below :
var page = require('webpage').create();
page.open('http://10.237.35.10/maxime/affichage.php?afficheur=0', function() {
page.render('affichageTest.png');
phantom.exit();
});
Create a file named display.php with this code below :
<?php
$file_path = exec('/path/to/phantomjs test.js');
?>
<html>
<head>
<title>Test</title>
<LINK rel='stylesheet' type='text/css' href='style.css'>
<script type='text/javascript' src='jquery/jquery.js'></script>
<script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>
</head>
<body>
<img src="<?php $file_path ?>" alt="test">
</body>
</html>
Visit the display.php page to see the screen capture
If you need a full script solution, as you have said in comments, your only hope is Image Magic php extension. This in conjunction with HTML2PDF can be used to device html to image conversion for non-complex markup.
The trick is to create a pdf out of html first:
$html2pdf = new HTML2PDF('P', 'A4');
$html2pdf->writeHTML($html_content);
$file = $html2pdf->Output('temp.pdf','F');
Now you can get this pdf file and convert it image using Image Magic
$im = new imagick('temp.pdf');
$im->setImageFormat( "jpg" );
$img_name = time().'.jpg';
$im->setSize(800,600);
$im->writeImage($img_name);
$im->clear();
$im->destroy();
Installation of Image Magic extensions and support libraries could be painstaking. Please read the installation notes carefully.
The complexity of the html markup which could be converted is limited. You can do a fairly good job. But you can't call it a day if you need to convert ANY html.

Javascript include technique with dynamic SRC="url"

Is it possible (and a good idea) to pass dynamic data to a JavaScript include file via a hash url?
Such as:
<head> <script src="scripts.js#x=123&y=456"></script> </head>
I am looking for an alternative to inline js in dynamically built pages:
<head>
<script src="scripts.js#x=123&y=456"></script>
<script>
$( document ).ready(function() {
pageInit(123, 456)
});
</script>
</head>
Is it a good idea to avoid inline js? How can you pass dynamic data without ajax which creates a needless roundtrip network request?
Note: The hash bang url is a special because the browsers ignore the hash portion of the url when checking the cache. At least for html files.
So all of these will reuse the index.html file it is in the cache:
index.html
index.html#x=123
index.html#x=345345
index.html#x=2342&y=35435
This same principle should hold true for javascript files. What I hope to achieve is to reuse the cache version of script.js from page to page.
Going to index.php, include this:
<head> <script src="scripts.js#x=123&y=456"></script> </head>
Then going to fun.php include this
<head> <script src="scripts.js#x=898756465&y=5678665468456"></script> </head>
Then going to see.php include this
<head> <script src="scripts.js#session=887987979&csrf_token=87965468796"></script> </head>
From page view to page view, pass whatever info the page needs via the hash bang while at the same time reuse scirpt.js from cache.
So, is it possible to read the hash bang info from within the scirpts.js?
If the HTML file you are creating is dynamic, then just create inline JavaScript. Writing an include will just create an extra request from the browser, which you can avoid in the first place.
Edit:
just include a JavaScript file that reads the URL, you don't need to pass any variables (but of course, you also could):
$(document).ready(function() {
// pseudo code
hashbang = location.href.substr(location.href.indexOf('#') + 1);
if (hashbang.x && hashbang.y) {
pageInit(hashbang.x, hashbang.y);
} else if (hashbang.csrf_token) {
// do something else
}
});

Page loaded within page --> Forwarding to index.html when page is loaded alone

I wrote a website that uses a JavaScript loader to load html-files within the index.html into a specific div.
The loaded html page on its own looks like this:
<div id="pageloader">
CONTENT
</div> <!-- END #pageloader -->
Naturally, when the page is loaded on it's own, there are no stylesheets connected to it and the rest of the index.html is missing.
Is there a way to automatically forward to the index.html when the "loader-page" is accessed on it's own? I tried a simple forwarding by adding this header to the "loader-page" but now it always forwards to the index.html even when the "loader-page" is accessed through the index.html.
<head>
<meta http-equiv="refresh" content="0; URL=http://...">
</head>
This is a little quick-'n'-dirty but you could set a variable in the loader that the included page checks.
In your loader:
<script type="text/javascript">
var loader = 1;
</script>
In the loaded page:
<script type="text/javascript">
if (loader != 1) {
window.location = "/index.html";
}
</script>

Absolute url overwiritten as a Relative URl when adding a new html element like iframe etc (i.e adding the a base address at prefix of URL supplied)

I am trying to add an iframe to my website. The problem is that our CMS automatically overrides the src address given ex: I set the absolute url (source address) to http://www.youtube.com/embed/RE6C1AoWy3M and when the page is rendered the src is modified as shown.
The base address is being added. This was set as we normaly upload images/files on our file system.
Any idea how can I override this, maybe embed some javascript function. I do not have access to .cs/ Asp.net pages.
You can create an inline script that will render the iframe during the page load.
Example:
<html>
<head>
<title>example</title>
</head>
<body>
<!-- Your normal HTML/text here -->
<!-- add the script where you wanted the iframe to be -->
<script type='text/javascript'>
document.write("<iframe src='http://www.youtube.com/embed/RE6C1AoWy3M'></iframe>");
</script>
<!-- Your remaining HTML/text here -->
</body>
</html>
This has finally worked. I am creating the iFrame as shown below not using the CMS drag/drop html objects and modify the src attribute.
var el = document.createElement("iframe");
el.setAttribute('id', 'ifrm');
// Here I am getting the object to append the iframe to
var elem = document.getElementById("td1");
// Append iframe to this element.
elem.appendChild(el);
el.setAttribute('src', 'http://www.youtube.com/embed/RE6C1AoWy3M');
</script>
Although this solved my problem, I am open to new maybe better suggestions. I am willing to learn from other's experience.

Categories