trying to create this file that changes an object's attributes (size, color, fade out, and reset) with the click of buttons. Not working right now and trying to figure out what I'm missing .... Any thoughts?
changing a box size
The first thing I notice is the duplication of attribute in your <script> tag and actual javascript in between the <script> and </script>. That's poor coding.
If you need code referenced in the file named 'javascript.js', then it needs to be it's own <script> declaration in HTML:
<script type="text/javascript" src="javascript.js"></script>
and THAT'S IT. THEN follow with any code you want on the page with a new <script> declaration block.
IF you're trying to make the jQuery library available, that can be accomplished with this: (put it in the <head></head> section of your html code.)
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
jQuery is very particular about the selectors you feed it:
1) no prefix symbol means an html tag: $("table") means match any <table> in the HTML
2) a dot prefix symbol means match a class: $(".button1") WILL FIND the elements that you actually have in your code. They are not being found because you didn't prefix with a dot in your selector.
3) a hashtag/pound-sign/number-sign means match an ID: $("#box") will find that box at the beginning of your code.
<script type="text/javascript">
$(function(){
$(".button1").click(function(){
$("#box").css({'height':400,'width':400});
});
$(".button2").click(function(){
$("#box").css('background-color','blue');
});
$(".button3").click(function() {
$("#box").fadeOut();
});
$(".button4").click(function() {
$("#box").show().css({'height':150, 'width':150, 'background-color':'orange'});
});
});
</script>
here's a link to a FUNCTIONING codepen showing that what you're trying to do is possible.
Related
I am using angular with sightly. So I have angular html template surrounded by script tag, which also has sightly attributes like data-sly-resource.
Below example code will give you clear idea.
<script type="text/ng-template" id="example.html">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'" data-sly-test="${!wcmmode.edit}"></div>
</section>
</script>
It works fine in non-edit mode , but in edit mode, I can not author data-sly-resource part. It looks like <script> tag is not letting it work roperly because when I remove <script> tag ,than I can author it.
And removing script tag is not an option as well.
So how can I stop script tag form breaking sightly functionality in edit mode?
I ended up doing repetition of code , one for author mode and other for non edit mode.
Below is close resemblance of my solution.
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" data-sly-test="${wcmmode.edit}" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
<script type="text/ng-template" id="example.html" data-sly-test="${!wcmmode.edit}">
<section data-sly-resource="${ #path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" >
<div ng-include="'private/textOverImage.html'"></div>
</section>
</script>
As you can see in above code, what to show and when works via data-sly-test="${wcmmode.edit}".
I also tried to to create sightly template for redundant code and than try data-sly-use but now, it works in author mode but sightly can't put template inside <script> tag even though I used # context='unsafe'
There is a workaround based on the Sightly Reference
Put the markup inside a separate html file say mymarkup.html parallel to mycomponent.html
In Component HTML file (e.g mycomponent.html) use <script type="text/ng-template" data-sly-include="mymarkup.html"></script>
In mymarkup.html we can use Sightly tags normally and those would be evaluated/executed normally, we would not even need to specify the # context for variables we would read using use API. The final markup rendered by component mycomponent.html when dragged to page would render something like this below
<script type="text/ng-template">
//mymarkup.html evaluated content here
</script>
In your script tag you could add data-sly-unwrap="${wcmmode.edit}"
This will remove script tag in edit mode allowing you to edit included components but in any other mode the script tag gets rendered.
I found the following mention in Netcentric's AEM Sightly Style Guide:
Then, because the HTML grammar ignores elements located inside a
< script > or < style > elements, no block statement can be used within
them.
Although it's not explicitly stated in the Sightly spec, it makes sense. So your fix is right.
I have a file index.html with the following code:
<div ng-include="'fragment-1.html'"></div>
The code of fragment-1.html:
<b>Inside Fragment 1</b>
<script type="text/javascript">
alert("Inside Fragment 1");
</script>
When I load index.html into the browser, output is:
Inside Fragment 1
The DOM has the <script> tags but the alert is not shown.
My hypothesis:
Because the DOM loads first along with the Angular modules and then Angular checks and binds the data(in this case, fragment-1.html file content) to the view(index.html), it just adds the elements of fragment-1.html in DOM. To execute the JS inside fragment-1.html, we should create a hack for it. Am I right in this explanation? Or is there something else that I may be missing?
I had to load jQuery before loading Angular. The explanation is in the link specified above. Explanation: script not running in templateurl
To include another partial HTML file in your parent HTML file, one can also use Angular directives, depending on the situation. See this answer for when to use ng-include and when to use directives: https://stackoverflow.com/a/24172025/3132646
You don't need to hack. Angular gives you a neat and simple solution to what you want to achieve with your code.
Controller
.controller('fragmentOneCtrl', function ($scope) {
alert('"Inside Fragment 1"');
})
View
<div ng-repeat="go in ['go', 'gogo']" ng-include="'includeThis'">
</div>
<script type="text/ng-template" id="includeThis">
<div ng-controller="fragmentOneCtrl">
</div>
</script>
You may want to use $sce.trustAsHtml before injecting the resource in html
I am new to caman js. I want to edit image residing at my local machine using caman js. I searched for it but could not find appropriate code. I also went through tutorial of caman js.
link: http://camanjs.com/guides/
Can anyone please help me?
Thank you.
The link you provided gives the information you are looking for. If I understand your question correctly, these are the basic steps you need to take.
Make sure the Camanjs plugin is included in your project.
Have an img or canvas element on your working DOM
After the DOM is ready Initialize Camanjs by passing to it either a selector or DOM element. Here is the relevant code to the link you provided:
Caman("#image-id", function () {
// Setup whatever options or image processing you want here
// Make sure to render after
this.brightness(5).render();
});
Your question asks about a file on your local machine. From my understanding, your image has to be present in the DOM to work on it with Camanjs. Therefore, your image should be located somewhere your html/javascript can find. (i.e. 'img/myLocalPicture.jpg' relative to your .html file)
For me, looking at the source code of Camanjs was very helpful as well as looking at the API docs: http://camanjs.com/api/
If you want a more specific answer please rephrase your question to be more specific.
You can load a file using the HTML5 File API.
If you are using JQuery, the following will allow you to browse for a local file, and then apply an effect to it. (You don't need jquery, this is just a feature of HTML5)
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/caman.full.min.js"></script>
</head>
<body>
<img id="myimage" alt="Image go here" />
<form>
<input type="file" id="fileinput" />
</form>
</body>
<script>
$("#fileinput").change(function(evt) {
var image = evt.target.files[0];
$("#myimage").attr("src", URL.createObjectURL(image));
processImage();
});
function processImage() {
Caman("#myimage", function() {
// Perform your effects here
});
}
</script>
</html>
Ok, I am playing around with Backbone, node.js, Underscore, Backbone Boilerplate so I have enough knowledge. Been asking questions like crazy as I still can't quite get my head around it. I am currently attempting to use the Underscore library with Backbone Boilerplate to make a very simple template which will allow me to pass in data; then when the model is updated, change the view which would change the template. I believe this is the correct way of doing it, instead of writing HTML code inside my JS file? Stop me if I'm wrong.
The Backbone Boilerplate has its template .fetch() system which I understand. However it would mean writing HTML in my JS I believe. So I wanted to use Underscore to simply pass information from the model to the view to the modules to render the template again (or I might be able to skip the view completely?).
My question is why won't this work, I think it's because I'm not changing it to JSON.
My HTML template:
<div>
<script id="rtemp" type="text/x-underscore-template">
<span><%= title %></span>
</script>
</div>
And the JavaScript:
define([
// Global application context.
"app",
// Third-party libraries.
"backbone",
"underscore",
"json2"
],
function(app, Backbone) {
var Attempt = app.module();
Attempt.Model = Backbone.Model.extend({});
Attempt.Collection = Backbone.Model.extend({});
Attempt.Views.Tutorial = Backbone.View.extend ({
template: "app/templates/attempt",
render: function(done) {
var tmpl = app.fetchTemplate(this.template);
//console.info(tmpl);
this.$el.html(tmpl({title: 'This is a title'}))
}
});
return Attempt;
});
When I inspect the element it shows in the <div> however it still has the template script tags around it so doesn't show on the page in HTML. I tried using json2 to convert it to JSON first, but that didn't seem to work unless I did something wrong. Is Underscore the best thing to use? I assumed so as it's a Backbone dependency. Or should I use something else. I just want to avoid writing HTML in my JS.
If I understand you right, you're ending up with this HTML:
<div>
<script id="rtemp" type="text/x-underscore-template">
<span>This is a title</span>
</script>
</div>
That's the right behavior based on the code you're using but that's clearly not the result you want.
The <script> wrapper for templates is used when you're embedding the template inside an HTML page. This is done so that the browser won't try to interpret your template as HTML and to keep the browser from trying to render it on its own. In such cases, you'd have the template embedded in the HTML page like this:
<!-- Some HTML stuff... -->
<script id="rtemp" type="text/x-underscore-template">
<span><%= title %></span>
</script>
<!-- Some other HTML stuff... -->
and you'd use it like this:
var t = _.template($('#rtemp').html());
var html = t(...)
The $('#rtemp').html() part extracts just the content of the template's <script> wrapper so _.template would only see <span><%= title %></span> and the final processed template would just be a simple <span>. For example: http://jsfiddle.net/ambiguous/dzPzC/
In your case, you're reading the entire <div><script>...</script></div> as the template and feeding that to _.template. The result is that tmpl({title: 'This is a title'}) still includes the <script>, the browser doesn't know what to do with a <script type="text/x-underscore-template"> so the <span> that you're interested in doesn't get rendered at all.
You don't need the <script> wrapper at all, that's only needed when you're embedding a raw template inside some HTML. Your template only needs the the content of your <script>:
<span><%= title %></span>
Demo: http://jsfiddle.net/ambiguous/QuwSX/
The argument that you're passing to the template function:
tmpl({ title: '...' })
is fine, the compiled template function just wants to see a JavaScript object. People talk about passing it JSON and often use the toJSON method to prepare data for the template but that's an abuse of terminology; the template really wants an object and JSON is, technically, a string.
I've added the required tags, but it is still not showing. I've added this in head:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'lt', parsetags:'explicit'}
</script>
and this in the body:
<g:plusone href="http://www.fanuspinta.lt/katalogas/lietuva-mar%C5%A1kin%C4%97liai-31"></g:plusone>
At first I thought it didn't show up because I was using a local server, but now it's in production, and still not showing.
URL in case: http://www.fanuspinta.lt/katalogas/lietuva-mar%C5%A1kin%C4%97liai-31
Thanks for any ideas.
I used a html5 tag like shown here without the data-href attribute, dynamically added it afterwards (when the lightbox was loaded) and explicitely loaded the div containing the plusone code at the end.