JADE: Convert HTML to JADE issues - html

Im trying to convert the following code from HTML to JADE:
<a id="bgndVideo" href="http://www.youtube.com/watch?v=Df8ofF1mbdA" class="movie {opacity:1, isBgndMovie:{width:'window',mute:false}, optimizeDisplay:true, showControls:true, ratio:'16/9',startAt:3,quality:'hd720',addRaster:true,lightCrop:true}"></a>
HTML2JADE website gives me the following code back:
a#bgndVideo.movie.{opacity:1,.isBgndMovie:{width:'window',mute:false},.optimizeDisplay:true,.showControls:true,.ratio:'16/9',startAt:3,quality:'hd720',addRaster:true,lightCrop:true}(href='http://www.youtube.com/watch?v=Df8ofF1mbdA')
My issue is that this code doesn't appear to function correctly unlike every other HTML2JADE conversion iv'e done. I noticed that my IDE(WebStorm) is highlight some of the { } in pink, signifying some sort of error. Im just learning jade and I cant figure out the problem, I just know the code doesn't look right... Is there anyone that may be able to help me with this problem?
Thanks!

Try to put it directly in the jade template.
<a id="bgndVideo" href="http://www.youtube.com/watch?v=Df8ofF1mbdA" class="movie {opacity:1, isBgndMovie:{width:'window',mute:false}, optimizeDisplay:true, showControls:true, ratio:'16/9',startAt:3,quality:'hd720',addRaster:true,lightCrop:true}"></a>
It should work.

Related

VS code parse error ignored in some components

Currently working on an html template using angular, and I have this code:
<a mat-list-item class="side-link" [routerLinkActive]="['is-active']" [routerLink]="[{outlets: { agent-sidebar: ['agent-manage-clients'] } }]"><i class="fas fa-user mr-3"></i>Clients</a>
As you can see, there's nothing wrong with the code. However, doing an ng build produces an error whereas the compiler is looking for a missing : token where I think is unnecessary.
Why does my compiler keep looking for a 'missing' token even though I have closed the braces correctly?
This is funny to me because this is a copy pasted working code in a different component and only produced an error when I pasted it in this new component. So why isn't it producing the same error in the other component?
So apparently, I've fixed this bug of mine by changing the name of my router-outlet. It turns out that naming my outlet agent-sidebar with the token - messes up the compiler somehow. So after almost half a day of work, I've changed this:
[routerLink]="[{outlets: { agent-sidebar: ['agent-manage-clients'] } }]"
to this:
[routerLink]="[{outlets: { agentSidebar: ['agent-manage-clients'] } }]"
and compiler is now working properly.

Extracting data from API to html elements

I am not an experienced coder so excuse me if my explanation isn't perfect.
I'm making an html page and I'd like there to be a section that shows some Osu! stats. There's this osu api that spits out all of the information I could possibly need but there's a litle bit too much of it.
https://osu.ppy.sh/api/get_user?k=ff96ad02d159e0acad3282ad33e43a710dac96d5&u=Sceleri
The above returns:
[{"user_id":"6962718","username":"Sceleri","count300":"93129","count100":"15744","count50":"3404","playcount":"776","ranked_score":"184300015","total_score":"258886799","pp_rank":"345687","level":"34.115","pp_raw":"314.239","accuracy":"94.54791259765625","count_rank_ss":"1","count_rank_s":"55","count_rank_a":"74","country":"FI","pp_country_rank":"4112","events":[]}]
I'd like to parse a few numbers from there. Example:
"pp_raw":"314.239" -> <p>;314.239</p>;
The <p> would be inside a div and so on, where I can specify some CSS to it and make it look good. The main problem is extracting the data to separate <p> elements.
I have executed this with regex in Rainmeter before (I had help) but I have no idea how to do it in html.
Use Jquery ajax calls. The url you posted basically gives you a json object.
HTML:
<div id="pp_raw">
</div>
Jquery
$.get( "https://osu.ppy.sh/api/get_user?k=ff96ad02d159e0acad3282ad33e43a710dac96d5&u=Sceleri", function( data ) {
//You can put whatever you want in the style attr to make things pretty
$( "#pp_raw" ).html("<p style='color:red'>"+data[0]['pp_raw']+"</p> ");
});
JSFiddle:
https://jsfiddle.net/rwt5mdyk/8/

ng-src not showing up for my img array

I have a simple image viewer webpage on gitpages but before I push the next group of images I want to condense all of my images into an array using angular.
The test I have made here uses only 4 photos that are in the same folder as every other file.(they are jpegs)
my js file is set up like this with a factory for the array and a controller.
angular.module('beamModule',[])
.factory('imageFactory', function(){
return {
getImages: function(){
return ['beam1.jpg','beam2.jpg','beam3.jpg','beam4.jpg'];
}
}
})
.controller('Photos', function(imageFactory){
this.images = imageFactory.getImages();
});
I don't think anything is wrong with this array but maybe I am overlooking something?
The HTML that I am using and the section that is giving me trouble when I check the developer tools is below.
<div class="imgcontainer" ng-controller="Photos as photosController">
<img ng-repeat="src in photosController.images"
ng-src="beamModule.js/{{images}}">
</div>
I am not sure if I am supposed to be using an ng-class attribute in the css or if there is something else that needs removed?
The developer tools are returning this value for each of the images (they are repeating just not showing)
<img ng-repeat="src in photosController.images" class="ng-scope">
Why is the ng-scope class being put in here and the ng-src is being removed?
EDIT FIXED
Ok to the person who answered so quickly and simply you are the real mvp here.
You said to change the ng-src="beamModule.js/{{images}}" to read {{src}} instead.
Once I tried this it still didnt work but then I checked the dev tools and noticed it was attempting to pull the files from the js file and not the actual file so I just changed it to this and now it works great! Thank you.
ng-src="{{src}}"
The ng-src attribute needed to point to the repeat instead of the js file.
ng-src="{{src}}"

Explain the strange code html

I want to do a change in my site web (html+css+php)
I have this code html:
<h4>#_live_support#</h4>
In your opinion, what is the result of code??
No!No! result is not:
#_live_support#
a result CODE is Name Only:
Direct support
I want to explain this code please**
Photo caption
[code html]
http://goo.gl/vZQNXD
[Result]
http://goo.gl/4OaIvB
This is a template HTML file you are looking at. When the PHP script is called, #_LIVE_SUPPORT# will be dynamically replaced by whatever is appropriate at the time.

Umbraco 7 Multiple Textbox pulling "System.String[]"

I am currently using Umbraco 7.1.8 and I have just finished my final template however I wanted to create a tag like list for the client to add in as they wish.
I have a multiple textbox with the alias workUndertaken however when I call it, it echos System.String[].
My code is pretty simple - I called it two different ways to ensure it wasn't an issue with one method.
<p>#Model.Content.GetPropertyValue("workUndertaken")</p>
<p>#Umbraco.Field("workUndertaken")</p>
Does anyone know where I am going wrong?
Sorry got the answer almost instantly. Was hard to find.
So I will post the answer with the code I am now using. Hopefully others find this useful.
#{
if (Model.Content.GetPropertyValue<string[]>("workUndertaken").Length > 0) {
<ul>
#foreach (var item in Model.Content.GetPropertyValue<string[]>("workUndertaken")) {
<li>#item</li>
}
</ul>
}
}