Simple, but specfic question. I have a site which is using Pixastic to blur images. There are two images on a page which need to be blurred. This seems to work fine in IE (which I believe is using filters on the images) but doesn't work on other browsers (Firefox/Chrome). In those browsers it just effects the second image and the first is replaced by nothing - so I just get a rendered page with one blurry image on it instead of two.
I'm using the jQuery selector, by the way. The code I'm using is basically just this:
<head>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/pixastic.custom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.blur').pixastic('blurfast', {amount:0.2});
});
</script>
</head>
<body>
<img src="img/title1.png" title="" class="blur" />
<img src="img/title2.png" title="" class="blur" />
</body>
Does anyone know if it's possible to affect multiple images with Pixastic, and if so, how?
Thanks
As far as I can tell, what you have that should work.
Option 2. Try specifying a CSS class explicitly instead?
e.g. roughly something like:
<html>
<head>
<script type="text/javascript">
var pixastic_parseonload = true;
</script>
<script src="pixastic.core.js" type="text/javascript"></script>
<script src="invert.js" type="text/javascript"></script>
</head>
<body>
</style>
<img src="img/title1.png" title="" class="pixastic pixastic-blurfast(amount=0.2)" />
<img src="img/title2.png" title="" class="pixastic pixastic-blurfast(amount=0.2)" />
</body>
</html>
Related
I am trying to recreate a player that is shown here - https://videojs-http-streaming.netlify.app/
As per the docs, here is my HTML. But quality/resolution control is missing
What needs to be changed in this HTML for that quality/resolution picker to render in the player as shown in the demo page.
<html>
<head>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
<video-js id=example-video-hls class="vjs-default-skin" controls>
<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
type="application/x-mpegURL">
</video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-quality-levels#2.1.0/dist/videojs-contrib-quality-levels.js"></script>
<script>
var player = videojs('example-video-hls');
player.play();
</script>
</body>
</html>
videojs-contrib-quality-levels adds the quality selector API, but does not include a UI component.
That example is using videojs-http-source-selector for the menu.
I would like to have a text box at the top of my website on every page that has the same text, but I don't want to edit the code individually for every webpage. How would I sync the text to all the webpages?
Include Common files using jQuery...
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="header"></div>
<div id="content">
Main Content
</div>
<script>
jQuery(document).ready(function(){
jQuery("#header").load("header.html");
});
</script>
</body>
</html>
Using ufront and erazor I ran into the following problem very quickly.
The hello-world example provides the following layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
#viewContent
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
</html>
For certain pages I want to add more headers or scripts after Jquery has been loaded.
One way to do so (for the scripts for example), would be to pass the scripts as an array of strings, and construct them on the layout file :
...
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</script>
#for(script in scripts) {
<script src='#script.path'></script>
}
</html>
....
The problem with this approach is that I can't keep meaningful headers + body + scripts on the same template file witch would be great, also needs extra care to pass the scripts and headers as context.
Some template engines like Razor or Laravel allow to do that using 'sections'.
Is it possible to do something similar with erazor? If not what would be a good alternative?
In Jade JS, it's very easy to extend a layout. Supposed one have layout.jade, and for the index.jade, just do:
extend layout
block content // content comes here
Then it's pretty sufficient.
I searched the official guide but didn't found how to do. The most similar seems to be something like:
{>partials}
But still that's not extending a layout. How to achieve similar thing in DustJS?
Thanks a lot.
I found the solution... turns out I didn't read the dust documents careful enough.
Layout File:
<html>
<head>
<title>{+title}Location of Title{/title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
</head>
<body>
<header>
<h1 id="page-title" class="very-middle">{+title}Title Comes Here{/title}</h1>
</header>
<div id="content">
{+content}
Content Comes Here
{/content}
</div>
</body>
</html>
Content File:
{>layout/}
{<content}
{!
Content simply comes here
}
{/content}
So the point is the use of {+placeHolder}, {>toExtend} and {
I am working with SEAM - JSF framework
I have following a4j commandlink on my xhtml page.
<a4j:commandLink id="rateImage" action="#{ratingSessionAction.rateImage}" oncomplete="getNewImageForSlider();"/>
When i click on this link first time after clearing my browser history, i get following html
<?xml version="1.0"?>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link class="component"
href="/abc/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_"
rel="stylesheet" type="text/css" />
<link class="component"
href="/abc/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_"
media="rich-extended-skinning" rel="stylesheet" type="text/css" />
<script
src="/abc/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript"
type="text/javascript">
</script>
<script
src="/abc/a4j/g/3_3_3.Finalorg/ajax4jsf/javascript/scripts/form.js"
type="text/javascript">
</script>
<script
src="/abc/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/skinning.js"
type="text/javascript">
</script>
</head>
<body>
<meta name="Ajax-Update-Ids" content="" />
<span id="ajax-view-state"><input type="hidden"
name="javax.faces.ViewState" id="javax.faces.ViewState"
value="" />
</span>
<meta id="Ajax-Response" name="Ajax-Response" content="true" />
<span id="org.ajax4jsf.oncomplete">getNewImageForSlider();</span>
</body>
</html>
I removed value from viewstate hidden field purposely to reduce the
length of post.
Can anybody explain me why this is happening, and how can overcome it.
Thanks in advance
Richfaces (a4j) is always returning you a complete html response. After the return it will use the ajax-update-id to split the response into parts and place them where you have the defined ids of your rerender attribute.
You are not specifing anything to rerender and because of that only your js should be executed oncomplete.
Either you can fetch a new image during the a4j request directly and use rerender (your page needs to be prepared for that with an img tag and a random src i suppose) or you gave to do this in your oncomplete callback and create a new img tag and place it yourself.
The second approach can be tricky because the server state will not be aligned in a next request assuming you are using conversations in seam for example