Flickr JSON Api display - javascript

I would like to do the following:
You need to build a page that shows pictures using this flickr service https://www.flickr.com/services/feeds/docs/photos_public/.
Users should be able to:
toggle their favourites photos by clicking on them (please add a selected class to
the img element when selected),
deselect a selected photo by clicking on it,
reload the page, the previously selected pictures should be remembered.
You have complete freedom to choose whatever library/framework you want to use (both JS
and CSS).
The use of JQuery is discouraged.
Here is my initial code.
<!doctype html>
<html>
<head>
<script type = "text/javascript">
( function () {
function cb ( data ) {
// use returned data
}
var tags = 'london';
var script = document . createElement ( 'script' );
script . src =
'http://api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=cb&
tags=' + tags;
document . head . appendChild ( script );
})();
</script>
</head>
<body>
</body>
</html>
I would also like to ensure cross compatibility
for Chrome, Firefox and IE and add tests to my JS code. Any help would be appreciated.

Related

Is there any way to make Javascript work in DOMPDF-generated PDFs?

I am currently testing DOMPDF and got it working quite nice for my purposes, including CSS styling, displaying content fetched from a mysql database etc.
Now I tried to use some Javascript, but it doesn't work. I used a very simple script for testing:
HTML somewhere on the page:
<div id='mydiv1' style='width: 100%;height:20px;background:#ddd;'></div>
The JS (just above the closing </body> tag (but I also tried it right after the opening <body> tag):
<script>
document.getElementById('mydiv1').innerHTML = 'this is a test';
</script>
When I echo this page in the browser (I am echoing a variable which contains the complete HTML/PHP page), that text appears in the DIV. When I put the same variable in DOMPDF's loadHtml and then render and output it, the script-generated text doesn't appear in the PDF (the rest of the page does).
So my question is: Is there any way to make Javascript work in DOMPDF-generated PDFs?
Unfortunately, DOMPDF doesn't support javascript. You may consider looking at something like phantomjs, which can be used to save pdf files, as well.
There is a DomPDF option to turn on inline javascript:
$isJavascriptEnabled = true;
Heres an example of how to use the DomPDF options:
$HTML = <<<HTML
!DOCTYPE html>
<html>
<head>
<body>
some html
</body>
<script> somejs </script>
</head>
</html>
HTML;
require_once "sites/all/libraries/dompdf/autoload.inc.php";
use Dompdf\Dompdf;
use Dompdf\Options;
$options = new Options();
$options->set('isJavascriptEnabled', TRUE);
$dompdf = new Dompdf($options);
$dompdf->load_html($HTML);
$dompdf->setPaper('A4', 'portrait');
$dompdf->render();
$dompdf->stream('blah.pdf');
I took this from DomPDF's options page: https://github.com/dompdf/dompdf/blob/master/src/Options.php

caching previous' page jquery instead of current one

I'm importing an external js file right after the opening body
<body>
<script src="http://website.com/jsfile#1"></script>
etc...
</body>
the head includes the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" /><script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
the script file looks like this:
$(document).ready(function() {
$(document).on('click', ".clickable", function() {
var o_id = $(this).attr('id');
$('#l_id').val(o_id);
$("#pick_location").attr("action", "pick_contact.php?l_id=" + o_id + "&p_id=" + $('#p_id').attr('value') + "&f_id=" + $('#f_id').attr('value'));
$('#pick_location').submit();
});
});
later I dynamically created clickable divs that trigger the script, e.g.
<?php
echo '<div id ="'.$id.'" class="clickable"><div>test</div></div>';
?>
clicking submits the form and it takes the user to another page very similar again where the user can pretty much do exactly the same thing (the application has to do with selecting stuff in one page, then more stuff in next, etc) as before but with a different script
<script src="jsfile#2"></script>
the problem I'm having is that in that second page the clicked div is triggering the js file jsfile#1 instead of the jsfile#2. So, this caching is giving me a headache. Same results in latest Chrome and Firefox. Can't seem to find anything that works for my problem. Any suggestions would be greatly appreciated

Change the default browser behaviour of interpreting script tag

We all know what <script src="/something.js"></script> does. That file is loaded in the page and the script is run.
Is there any way to override the default behaviour of interpreting <script> elements?
I want the same syntax (<script src='...'></script>) that will only get the code from something.js (probably via XHR/jQuery ajax) and pass it to a foo (...) {...} function. Then I will care what I will do with it.
To clarify the problem:
I can easily create a pseudo <script> tag alternative using:
<div data-script-src="/1.js"></div>
<div data-script-src="/2.js"></div>
<div data-script-src="/3.js"></div>
<div data-script-src="/4.js"></div>
And then in the js side I would do:
var $scripts = $("[data-script-src]")
, scriptContents = [];
(function loadInOrder (i) {
if (!$scripts[i]) { alert("Loaded"); }
$.ajax($($scripts[i]).attr("data-script-src"), function (data) {
scriptContents[i] = data;
loadInOrder(++i);
});
})(0);
But how can I replace div[data-script] with <script>? How can I force the browser NOT to load the <script> tags that have the attribute data-load="false", for example?
I think your best bet here is to use onbeforescriptexecute. This event fires right before the script executes, so you can then modify the type attribute to something other than text/javascript (thus telling the browser not to execute the contents). This will still load the data from the server.
Unfortunately, onbeforescriptexecute is only supported in FF/Opera.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
document.addEventListener("beforescriptexecute", function (e) {
console.log(e.target.innerHTML || e.target.src);
}, true);
</script>
<script>
console.log("12");
</script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
Hi
</body>
</html>
The console output will be:
'console.log("12")'
'http://code.jquery.com/jquery-1.10.2.min.js'
Create Your own PHP file, which will work as a kind of a gate. Then
<?php
$file = file_get_contents(your_url);
$file = str_replace('<script', '<myscript', $file);
$file = str_replace('</script>', '</myscript>', $file);
echo $file;
?>
And then if needed add Your type of real script that will search for myscript tags and run Javascript code...
You can use div element as well (if scripts are loaded in body, and You need validation):
substitute: '<script' -> '<div data-id="my-script" '
substitute: '<script' -> '</div>'
PS. I don't know if these are Your sites or sites from internet, that You want the default behaviour to be overwritten. So always be careful of what You are "file_getting_contents" because, this will be echoed directly to Your browser.

How to call external JavaScript function in HTML

I have a small chunk of code I can't seem to get working. I am building a website and using JavaScript for the first time. I have my JavaScript code in an external file 'Marq_Msg.js' which looks like this:
var Messages = new Array();
Messages[0] = "This is message 1";
Messages[1] = "This is message 2";
Messages[2] = "This is message 3";
Messages[3] = "This is message 4";
function scroll_messages()
{
for (var i = 0; i < Messages.length; i++)
document.write(Message[i]);
}
and in my HTML file 'Index.html' I am trying to call it like this:
<div id="logo">
<marquee scrollamount="5" direction="left" loop="true" height="100%" width="100%">
<strong><font color="white"><script src="Marq_Msg.js">scroll_messages()</script></font></strong>
</marquee>
</div>
The 'logo' div is a CSS piece that I'm trying to marquee inside of. If I put the code embedded inside the 'head' tag and call it, it works perfectly! There are a few other things id like to do with this code (like space the messages out a little) but I can't get the code to work in the first place. I've also tried adding:
<script src="Marq_Msg.js"></script>
in the 'head' tag with a separate call, that was a no go. I also tried instead using:
<script type="text/javascript" src="Marq_Msg.js">scroll_messages()</script>
Hell, i even had the function try returning a string (even hardcoded a simple "hello" to be returned) but that didnt work either with and without the 'type':
//Marq_Msg.js
function scroll_messages()
{
return "hello";
}
//index.html
<script type="text/javascript" src="Marq_Msg.js">document.write(scroll_messages())</script>
What am I missing? Any help would be greatly appreciated!! I've looked all over Google, and every site I find wants to do it using some 'form'. I just want messages to be displayed across, no form attached.
If a <script> has a src then the text content of the element will be not be executed as JS (although it will appear in the DOM).
You need to use multiple script elements.
a <script> to load the external script
a <script> to hold your inline code (with the call to the function in the external script)
scroll_messages();
In Layman terms, you need to include external js file in your HTML file & thereafter you could directly call your JS method written in an external js file from HTML page.
Follow the code snippet for insight:-
caller.html
<script type="text/javascript" src="external.js"></script>
<input type="button" onclick="letMeCallYou()" value="run external javascript">
external.js
function letMeCallYou()
{
alert("Bazinga!!! you called letMeCallYou")
}
Result :
If anyone still has the reference error is probably because you are loading your Javascript with defer, or it's in the bottom of the body so when the function gets called your function still doesn't exist.

How do I switch external CSS files?

I've got a couple books that I'm reading on AJAX, but still quite new. All the tutorials and these books have the ubiquitous examples of: an auto-populating search bar and an asynchronous form validator. Those are both great, but not what I'm looking for. Specifically, I want to click a button and switch the external CSS file in my header include. Is this possible? Well... I know it's possible, but how do you do it?
PS: I have jQuery in this project, so if there is something built in from there, even better!
PPS: I'm realizing I have not included important information (don't shoot me!):
The final goal of this will be to have a user settings section where the user can click a radio button and decide the color scheme they want to use for our app. So we will eventually have something like 8 different CSS styles to choose from. Not sure if this will alter the best method to achieve this.
The user is logging into their account and changing their setting there. I want their changes to 'stick' until they decide to change the stylesheet again. I can do this manually in MySQL as we have a table called stylesheets with the various user stylesheets numbered... so in actuality, what I'm needing to do is change that MySQL value asynchronously so the CSS is immediately loaded.
Add an id attribute to the CSS link tag to manipulate the tag using JavaScript:
<link id="cssfile" href="css/avocado.css" type="text/css" rel="stylesheet">
The Javascript to set the href attribute resembles:
document.getElementById('cssfile').href = 'css/carrot.css';
Colours could be tweaked by the user, by clicking a link:
<a href="#"
onclick="document.getElementById('cssfile').href='css/carrot.css';">Carrots</a>
By changing the media type, this could also allow users to quickly change print layouts, the preferred layout on mobiles (or tablets), and more.
This solution does not require jQuery.
See also: http://www.webmasterworld.com/forum91/4554.htm
Stylesheet Switcher in jQuery.
In response to the 'newbie followup' comment, I will try to make it a little more instructional.
The page I was playing with to test on while writing can be found here.
Page Display
You're going to want to have your current stylesheet displayed in a <link> tag in the <head> of each of your pages. The <link> tag will need an id for reference later in JavaScript. Something like:
<?php
// Somewhere in the server side code, $current_stylesheet is read from the user's
// "preferences" - most likely from a database / session object
$current_stylesheet = $user->stylesheet;
?>
<link href='<?php echo $current_stylesheet ?>' rel='stylesheet' type='text/css' id='stylelink' />
Changing the preference
Once you are displaying the users stylesheet, you need a way to change it. Create a <form> that will send a request to the server when the user changes their stylesheet:
<form method="GET" id="style_form" >
<select name="stylesheet" id="styleswitch">
<option value="css1.css">Black & White</option>
<option value="css2.css" selected="selected">Shades of Grey</option>
</select>
<input value='save' type='submit' />
</form>
Server Side
Now, without jQuery, submitting this form should GET (you could change it to POST if you like) stylesheet={new stylesheet} on the current page. So somewhere in your bootstrap / sitewide include file, you do a check for it, a php sample:
$styles = array(
'css1.css' => 'Black & White',
'css2.css' => 'Shades of Grey',
);
if (!empty($_GET["sytlesheet"]) {
// VALIDATE IT IS A VALID STYLESHEET - VERY IMPORTANT
// $styles is the array of styles:
if (array_key_exists($_GET["stylesheet"], $styles)) {
$user->stylesheet = $_GET["stylesheet"];
$user->save();
}
}
Live Preview
At this point, you have a functioning styleswitcher for the lame people without javascript. Now you can add some jQuery to make this all happen a little more elegantly. You'll want to use the jQuery Form Plugin to make a nice ajaxForm() function, that will handle submitting the form. Add the jQuery and jQuery Form library to the page:
<script type='text/javascript' src='/js/jquery.js'></script>
<script type='text/javascript' src='/js/jquery.form.js'></script>
Now that we have the libraries included -
$(function() {
// When everything has loaded - this function will execute:
$("#style_form").ajaxForm(function() {
// the style form will be submitted using ajax, when it succeeds:
// this function is called:
$("#thediv").text('Now Using: '+$('#styleswitch').val());
});
$("#styleswitch").change(function() {
// When the styleswitch option changes, switch the style's href to preview
$("#stylelink").attr('href', $(this).val());
// We also want to submit the form to the server (will use our ajax)
$(this).closest('form').submit();
});
// now that you have made changing the select option submit the form,
// lets get rid of the submit button
$("#style_form input[type=submit]").remove();
});
Here's an example that uses jQuery.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#change-css').click(function(e){
e.preventDefault();
$('link[rel="stylesheet"]').attr('href', 'style2.css');
});
});
</script>
</head>
<body>
<a id="change-css" href="#">change css</a>
</body>
</html>
The operative line is $('link[rel="stylesheet"]').attr('href', 'style2.css');. This finds any <link> tag that has rel="stylesheet" and changes its href attribute to style2.css.
It has nothing to do with Ajax. It has everything to do with JS and DOM manipulation (Some key words to search for tutorial).
I am using Mootools, which is a JS library and it has a built in function for that.
If doing it manually is your thing, then I would simply add a <link> element to the <head> or adjust the href attribute of an existing <link> element.
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=6063" id='bobo'>
...
...
...
<script>document.getElementById('bobo').href="http://my.doamin.com/new.css";</script>
You could also load both CSS files and preface the all of the selectors on the second file with a body classname.
body.secondsheet {}
body.secondsheet a {}
body.secondsheet hr {}
Then all you have to do is add/remove the "secondsheet" class to the body tag to switch stylesheets.
To add a new css file to a page just create a new <link> tag:
function addCss (url) {
var s = document.createElement('link');
s.rel = 'stylesheet';
s.type = 'text/css';
s.href = url;
document.getElementsByTagName('head')[0].appendChild(s);
}
addCss('http://path/to/stylesheet.css');
To remove a css file from a page just remove the <link> to it:
function removeCss (search) {
var css = document.getElementsByTagName('link');
for (var i=0;i<css.length;i++) {
var c = css[i];
if (c.rel === 'stylesheet' || c.type === 'text/css') {
if (c.href && c.href.match(search)) {
c.parentNode.removeChild(c);
}
}
}
}
// Remove all css that contains 'mycss_', can use regexp if necessary:
removeCss(/mycss_.*\.css/);

Categories

Resources