is there any way to add imageproperty on client side? i pass my folder path from callback using following way
{{> upload_bootstrap fileTypes='image/*' formData=myFormData }}
somehow i want to pass
imageVersions: {myPhotos: {width: 100, height: 100}} using client side.
i have already define imageVersions: {photos: {width: 1024, height: 1024}} in UploadServer.init({});
Thanks,
Related
I want to dynamically switch Angulars global CSS files based on which client is connecting. This will be used for client-branding purposes, including fonts, colors, photos, headers, footers, button-styles, etc.
Each client has provided us with a CSS file, which we need to integrate into our app. We have hundreds of clients.
Current solution is to try and override the CSS of individual components at load. This is bad because it adds a lot of boilerplate:
Html:
<link id="theme" rel="stylesheet" href="./assets/stylesheets/{{cclientCode}}.css">
ts:
ngOnInit() {
this.service.clientCode.subscribe(clientCode => this.clientCode = clientCode);
}
My workaround isn't working because the link html is called before the {{}} has a chance to load in the value.
I'm also not motivated to fix my workaround because its just that -a workaround. Instead, I want to implement something that works globally, without any per-component boilerplate.
What I want is the ability to dynamically switch the global Angular style for each client. So something like:
"styles": [
"src/assets/stylesheets/angular_style.css",
"src/assets/stylesheets/client_style.css"
]
Where client_style.css is served differently to each client.
I've found a solution that I think is workable. It definitely has issues though, so if anyone has their own answer, please still share!
First, I added a clientCode String field to SessionDataService, a global service I use to move component-agnostic data around my app:
export class SessionDataService {
clientCode: BehaviorSubject<String>;
constructor(){
this.clientCode = new BehaviorSubject('client_default');
}
setClientCode(value: String) {
this.clientCode.next(value);
}
}
Then, inside app.component.ts, I added a BehaviorSubject listener to bring in the value of clientCode dynamically:
public clientCode: String;
constructor(private service : SessionDataService) {
this.service.clientCode.subscribe(clientCode => this.clientCode = clientCode);
}
Next, I added a wrapper around my entire app.component.html:
<div [ngClass]="clientCode">
--> ALL app components go here (including <router-outlet>)
</div>
So at this point, I've created a system that dynamically adds client-code CSS classes to my components, including all children :)
Finally, I just have to write CSS rules:
.ClientOne p {
color: red;
}
.ClientOne .btn {
background-color: red;
}
.ClientTwo.dashboard {
height: 15%;
}
I hope this helps somebody! Essentially the "trick" here is to add a ngClass that wraps the entire app, and then justify all client-specific CSS rules with their client code.
I have multiple instances of Plupload included at one page of my application, which are divided in 3 categories and can be added manually by adding a new table row.
I need to test uploading dynamically with Codeception and it's difficult to attach a file to a specific Plupload file input, because you don't know the generated id and it seems not possible to add a certain css class.
I'm trying to get the id of the current Plupload file input by doing:
init: {
Init: function(up) {
console.log(up.id); // o_1aa1e71ku20lole1v7s1veqetje0
console.log(up.runtime); // html
}
}
The problem is that up.id is not equal to the id of the file input:
<input id="html5_1aa1e71krlg119o9ks61uvl17ledv" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" accept="image/jpeg,image/png,image/gif,application/pdf">
How could I get the id to add a custom css class based on the section where it resides? Or do you know another way to target one specific dynamically added Plupload input with Codeception?
You can get the value via JS and then use it.
In my case, something like this (my HTML is somehow complicated, but the idea is the same in every case)
$profileId = $I->executeJS('return $("#Album_3_idAlbum").parent(".album-no-cover").find(".moxie-shim.moxie-shim-html5").attr("id")');
Please help me in this problem.. why my j-flow slider does not working correctly.. I coy code by j-flow demo.. Please check my given link:
https://dl.dropboxusercontent.com/u/103234001/test/index.html
may be my document ready function have some problem. But I don't know,whats wrong with me..
$(document).ready(function(){
$("#myController").jFlow({
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlider", // must be id, use # sign
slides: "#mySlides", // the div where all your sliding divs are nested in
selectedWrapper: "jFlowSelected", // just pure text, no sign
effect: "flow", //this is the slide effect (rewind or flow)
width: "940px", // this is the width for the content-slider
height: "300px", // this is the height for the content-slider
duration: 400, // time in milliseconds to transition one slide
pause: 5000, //time between transitions
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext", // must be class, use . sign
auto: true
});
});
You're trying to load jquery from http on an https. jQuery is not getting loaded. Best solution is to use a local version of jquery and refer to it like the rest of your scripts. otherwise you can include jquery like google libraries specifies...
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.0/jquery.mobile.min.js"></script>
note the lack of http or https
using your browsers debugging tools makes issues like this easy to spot.
Folks I am using the ui.bootstrap.dialog module.
My question is how do I set the size of the modal window.
I have tried the following but it doesn't work as intended:
$scope.viewopts = {
dialogClass: 'dialogsize',
dialogOpenClass:'dialogsize',
templateUrl: 'template/view-add-dialogue.tpl.html',
controller: 'CustomViewModalCtrl',
resolve: {
headerlist: $scope.data
}
};
Where the class dialogsize is defined as in my css file:
.dialogsize {
width: 800px;
height: 600px
}
Can anyone assist me to solve this ?
This shouldn't have anything to do with angularJS, since it just leverages the modal from twitter bootstrap. You just need to override the default value of dialog's size in twitter bootsrap:
https://github.com/twbs/bootstrap/blob/f95ab89fb1da85ff0fcb95c43d4fe4af359e302a/less/modals.less#L130
Regarding the question you ask about customized version of dialog, you can look into its API. We can use our own dialog, which means you can add custom class with css you want.
https://github.com/angular-ui/bootstrap/tree/master/src/dialog
I am trying to change the body background color when the user changes the theme of the page using the jQuery UI Themeselector.
I have tried this
function updateBodyBackground() {
$("body").css('background-color', $('.ui-widget-header:first").css("background-color") + ' !important;');
}
Then I call it on document ready (to set initial theme background) and I set it to the onClose event for the ThemeSelector like this;
$function() {
updateBodyBackground();
$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });
}
Doesn't do anything in Firefox, seems to be behind one on change in Chrome and the selector doesn't seem to work at all in IE8.
Any suggestions on how to change the background to better match the selected jQuery UI Theme?
Thanks!
A better way is not to use a timer, just use one of the jQueryUI CSS classes with the background colour your looking for, in my case I like the background colour chosen by: ui-state-hover :
<div id= "main_background" class= "ui-state-hover">
// Your Content
</div>
Since the id over-rides all class settings, use your id to remove or change any undesirable settings that ui-state-hover uses, such as the background-image :
#main_background {
position: relative;
top: 0px;
left: 0px;
width: 800px;
height: 742px;
margin: 0px;
border: 0px;
padding: 5px;
background-image:none; // kills the background url (image) that ui-state-hover sets
}
Buggy fix using timeout...
find function updateCSS() inside themeswitchertool.js
After
$("head").append(cssLink);
Add the below line increase timeout if it still doesn't work...
Insert
setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 2000);
You had an error in your js (used a " instead of ' ):
$('.ui-widget-header:first")
Should be:
$('.ui-widget-header:first')
But I found that this works. No need to put into Themeswitchertool.js, dropped the setTimeout to 500 so it changes more quickly.
function updateBodyBackground() {setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 500);
}
$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });