I'm versionating my css files to "force the browser" clear cache when I want.
<link rel="stylesheet" href="app/css/normalize.min.css?v=0.0.1">
<link rel="stylesheet" href="app/css/bootstrap.min.css?v=0.0.1">
<link rel="stylesheet" href="app/css/main.css?v=0.0.1">
<link rel="stylesheet" href="app/css/angular-chart.min.css?v=0.0.1">
<link rel="stylesheet" href="app/css/loading-bar.css?v=0.0.1">
<link rel="stylesheet" href="app/css/bootstrap-tour-standalone.min.css?v=0.0.1">
I have the following code, which is working well. My doubt is how to use a variable on it ?
Example:
<script> var version = '0.0.1'; </script>
<link rel="stylesheet" href="app/css/normalize.min.css?v=version">
I have tried something like this
<script>
var version = 0.0.1;
$(function(){
$("html").find('link').each(function(){
var srcpath = $(this).attr('href');
srcpath = srcpath.replace('version', version)
})
})
</script>
but it didnt work.
You can remove <link> elements from html, use $.holdReady() to hold .ready() handler from being called, request all resources using $.when() append <link> elements to document having version concatenated to path to resource, then call $.holdReady(false) to fire .ready() handlers when all <link> load events have been fired
Stylesheet load events
You can determine when a style sheet has been loaded by watching for a
load event to fire on it; similarly, you can detect if an error has
occurred while processing a style sheet by watching for an error event
var version = "?v=0.0.1";
// array of URL's to request
var links = ["app/css/normalize.min.css", "app/css/bootstrap.min.css", ..];
$.holdReady(true);
$.when.apply($, $.map(links, function(path) {
return new $.Deferred(function(d) {
$("<link>", {href: path + version, rel: "stylesheet"})
.appendTo("head").on("load", d.resolve);
})
}))
.then(function() {
$.holdReady(false)
});
$(document).ready(function() {
// do stuff when all `<link>` elements have been appended to `<head>`
})
plnkr http://plnkr.co/edit/WlJMT04hmCy7SYClc6my?p=preview
If you use PHP as your server-side language, you can use a php variable the same way you did in your example. You will need to save your html file as a php file like index.php to be able to introduce php code.
<?php
$g_version = "0.0.1";
echo
'<link href="app/css/normalize.min.css?v=' .$g_version .'">' .
'<link href="app/css/bootstrap.min.css?v=' .$g_version .'">' .
'<link href="app/css/main.css?v=' .$g_version .'">' .
'<link href="app/css/angular-chart.min.css?v=' .$g_version .'">' .
'<link href="app/css/loading-bar.css?v=' .$g_version .'">' .
'<link href="app/css/bootstrap-tour-standalone.min.css?v=' .$g_version .'">';
?>
Or you can go like this if you want to keep the html color highlight of your text editor:
<?php
$g_version = "0.0.1";
?>
<link href="app/css/normalize.min.css?v=<?php echo $g_version; ?>">
<link href="app/css/bootstrap.min.css?v=<?php echo $g_version; ?>">
<link href="app/css/main.css?v=<?php echo $g_version; ?>">
<link href="app/css/angular-chart.min.css?v=<?php echo $g_version; ?>">
<link href="app/css/loading-bar.css?v=<?php echo $g_version; ?>">
<link href="app/css/bootstrap-tour-standalone.min.css?v=<?php echo $g_version; ?>">
I removed rel="stylesheet" just to make it easier to read.
Related
I'm trying to use CKEditor with the Simple Image Browser plugin on wampserver, but I'm sorry, I really do not understand what to put in this line:
CKEDITOR.config.simpleImageBrowserURL
In the video he putted a php file, what to put in this file ?
(video: https://www.youtube.com/watch?v=WB5Y8XNQlgE)
I'd like to show the pictures that are in a variable directory 'images/$id/'
Thanks for your help.
Page of the plugin:
http://ckeditor.com/addon/simple-image-browser
For simpleImageBrowserURL you need to provide a URL (e.g. a php script) which delivers the content as JSON.
You can start with a URL to a static .txt file with a content like this:
[{"url": "/images/1234/image1.png"},{"url": "/images/1234/image2.png"}]
Or a very simple php script:
<?php
header('Content-Type: application/json');
$id = '1234';
echo '[';
echo '{"url": "/images/' . $id . '/image1.png"},';
echo '{"url": "/images/' . $id . '/image2.png"}';
echo ']';
?>
UPDATE
With the above php script the simple image browser plugin does not load the images. This is caused by the jQuery $.get function the plugin uses. While jQuery already parses the JSON and passes objects to the function the plugin tries to parse the objects (here the images variable):
$.get(CKEDITOR.config.simpleImageBrowserURL, function(images) {
var json;
console.log(images);
json = $.parseJSON(images); // this will not work if the images parameter contains objects
It may be that this worked that way with older versions of jQuery...
So to make this work the php script has to deliver a text/plain mime type:
<?php
header('Content-Type: text/plain');
$id = '1234';
echo '[';
echo '{"url": "/images/' . $id . '/image1.png"},';
echo '{"url": "/images/' . $id . '/image2.png"}';
echo ']';
?>
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="scripts/ckeditor/ckeditor.js"></script>
<script src="scripts/ckeditor/plugins/simple-image-browser/plugin.js"></script>
<link href="styles/knacss.css" rel="stylesheet" type="text/css" />
<link href="styles/ui.css" rel="stylesheet" type="text/css" />
<link href="styles/fonts.css" rel="stylesheet" type="text/css" />
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<script>
$(function () {
CKEDITOR.config.extraPlugins = 'simple-image-browser';
CKEDITOR.config.simpleImageBrowserURL = 'images-liste.php';
CKEDITOR.replace('details');
});
</script>
</head>
<body>
<p><label for="description">Descripção:</label></p>
<p><textarea class="ckeditor" name="description" id="description"></textarea></p>
</body>
</html>
images-liste.php:
<?php header('Content-Type: application/json');
echo '[';
echo '{"url": "http://andrewprokos.com/wp-content/uploads/22346-brasilia-cathedral-night-2.jpg"},';
echo '{"url": "https://upload.wikimedia.org/wikipedia/commons/6/6c/Brazil.Brasilia.01.jpg"}';
echo ']';
?>
Errors:
ckeditor.js:327 Uncaught TypeError: Cannot read property 'getEditor' of undefined
ckeditor.js:610 Uncaught TypeError: Cannot read property 'title' of undefined
I have a webpage with many sites which contains informations about items. I get the informations out of a mysql database. Now I need tooltips out of these informations.
I´m searching a solution to get the "echo" in a tooltip. It shouldn´t be much code, because I want to use the tooltips very often. The question is, woulnd´t it be easier to get the whole <div class="itembox"> in a tooltip?
Here is the code:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="container">
<div class="itembox">
<?php
$con = mysqli_connect("localhost","XXXXX","XXXXX","XXXXXXX");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
/* change character set to utf8 */
if (!mysqli_set_charset($con, "utf8")) {
printf("Error loading character set utf8: %s\n", mysqli_error($con));
exit();
} else {
}
$sql = "SELECT * FROM TEST WHERE id=8778";
$result = mysqli_query($con,$sql)or die(mysqli_error());
echo "<table>";
while($row = mysqli_fetch_array($result)) {
$name= $row['name'];
$itemLevel= $row['itemLevel'];
echo
"<tr><td class='nameepisch'>".$name."</td></tr>
<tr><td class='itemstufe'>Gegenstandsstufe ".$itemLevel."</td></tr>
</tr>";
}
echo "</table>";
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="<?php $name ?>">Tooltip Title</button>
mysqli_close($con);
?>
</div>
</div>
The simplest way for html tooltips is assigne a proper value to the title attribute of a tag eg:
if $myTooTiptext is the text you want show could be somethings like this
echo
"<tr><td class='nameepisch' title='".$myToolTiptext .">".$name."</td></tr>
<tr><td class='itemstufe'>Gegenstandsstufe ".$id[$itemLevel]."</td></tr>
When you move over the td for name the tooltip text is showed
In case you're using Bootstrap, you can do like this:
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="<?php $name ?>">Tooltip Title</button>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
And, don't forget to add Bootstrap CSS and JS inside the page:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
This is strange. This code works well when I open it directly --but if I run the web page that precedes it it doesn't. This code is a confirmation page that I want to jump in a checkout process -I have all my fields, and I don't need to ask the user again for confirmation, so I send her to checkout directly, sending all the values of the fields.
Again, when I arrive to this page from another form post it doesn't work --despite no other field or object sent to this page is called like the form--. Any ideas?
<?php include 'security.php' ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Secure Acceptance - Payment Form</title>
<link rel="stylesheet" type="text/css" href="payment.css"/>
</head>
<body>
<?php
foreach($_REQUEST as $name => $value) {
$params[$name] = $value;
}
?>
<p>Redirecting to Secure Server...</p>
<form action="https://testsecureacceptance.cybersource.com/pay" method="post" id="formulario" name="formulario" />
<?php
foreach($params as $name => $value) {
echo "<input type=\"hidden\" id=\"" . $name . "\" name=\"" . $name . "\" value=\"" . $value . "\"/>\n";
}
echo "<input type=\"hidden\" id=\"signature\" name=\"signature\" value=\"" . sign($params) . "\"/>\n";
?>
<input type="submit" id="boton" name="boton" value="Ir a Checkout >>"/>
</form>
<script type = "text/javascript">
document.getElementById('formulario').submit();
</script>
</body>
</html>
You can use the JavaScript setTimeout method to delay the submit function while page loads or you can also use jQuery to wait until documents load and after that you can fire form submit function:
JS:
setTimeout(function(){
document.getElementById('formulario').submit();
},1000);
jQuery:
$(document).ready(function(){
$('#formulario').submit();
})
I am working on an autocomplete script where i first read files from a local directory using php as shown below:
<?php
$file = glob('pages/*');
//var_dump($file);
foreach($file as $value)
{
$output = substr($value, 6, strlen($value) - 6);
//echo($output)."<br>";
}
?>
the above script displays all the files in the 'pages' folder i.e pageone.html,pagetwo.html....
i then use a javascript file to dispaly a text field that when entered for example 'page', should show aome autocomplete options say 'pageone.html' or 'pagetwo.html' e.t.c
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = ["
<?php echo $output; ?>"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
i combine the above php code with this js to a single php file
as shown, i try embedding the '$output' into the js 'availableTags' variable but when i type something on the text field, nothing happens..i'm sure it has to do with the php code embedded in the js so any help would be appreciated
Your $output contains only a single value (last file in your list). You can create an array of files like:
$res = array();
foreach($file as $value)
{
$res[] = substr($value, 6, strlen($value) - 6);
}
and pass it to javascript as: a javascript array (with json_encode function)
<script>
$(function() {
var availableTags = <?=json_encode($res)?>
...
You can use autocomplete.js. It's more lite and easy to use that jQuery UI.
I am trying this thing for 2 days, but I can't understand what the bug here. I try to use lightbox plugin in my codeigniter project, but it does not show the expected result, rather it does not show any error too.
This is between where I include my necessary file:
<link href="<?php echo base_url(); ?>assets/css/core.css" media="screen" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/manual_change.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/pre_change.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/core.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.lightbox-0.5.js"></script>
I also include the function of lightbox:
$(function() {
$('a.lightbox').lightBox({
'imageLoading': "<?php echo base_url(); ?>assets/img/lightbox-ico-loading.gif",
'imageBtnClose': "<?php echo base_url(); ?>assets/img/lightbox-btn-close.gif",
'imageBtnPrev': "<?php echo base_url(); ?>assets/img/lightbox-btn-prev.gif",
'imageBtnNext': "<?php echo base_url(); ?>assets/img/lightbox-btn-next.gif",
'imageBlank': "<?php echo base_url(); ?>assets/img/lightbox-blank.gif"
}); // Select all links with lightbox class
});
I have used the image in html as like following:
<img src="<?php echo base_url(); ?>assets/img/products/Acer_AX1400.jpg" alt="" />
The .htaccess file is:
RewriteEngine on
RewriteCond $1 !^(index\.php|images|jquery\.js\robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]
My file location is correct:
All Images to show are in:
assets/img/products/
All Images additional for lightbox are in:
assets/img/
All Javascript are in:
assets/js/
All CSS are in:
assets/css/
The page link is at first is:
localhost/shop/
The page clicking after on the image is:
localhost/shop/assets/img/products/Acer_AX1400.jpg
You're calling the function before any of the lightbox elements is loaded, so basically none of them get the event listener binded.
To overcome this, either use the $(document).ready() function or just load your current function at the end of your file, after all the lightbox anchors are loaded in DOM.