Class styles are applied when attribute set manually but not dynamically - javascript

I want to change the class name of a canvas dynamically (after a click) using javascript in my AngularJS application, for this I tried the following code :
submit.addEventListener("click", function() {
var cc = angular.element(document.querySelector('[ng-controller="DashboardController"]')).scope().canvas;
cc = "chart chart-"+cc;
document.getElementById('mycanvas').className = cc;
},false);
The first query is to get the "cc" value, the second is to change the class name.
"mycanvas" 's class name is changed to the "cc" value (I checked that by inspecting the element) but the styles aren't applied !
For example, when I set the class manually to "chart chart-line", the chart appears, but it doesn't work dynamically.
Any ideas why and how ?


You can do this with an ng-click and append the new class you want.
HTML:
<button ng-click="Controller.changeClass"></button>
Javascript:
vm.changeClass = function () {
document.getElementById("mycanvas").className += "whateverClass";
};

Related

Specify name of button via JQuery

I've have code to add button via JQuery, It is used to remove row. Button working correctly, just It's without name like [], but should be like [X]. It looks like HTML code created as: <button class="removeRow"></button> instead of <button class="removeRow">X</button>
JQuery
$.fn.optionTest.defaults = {
removeLinkOptions: {
class: 'removeRow',
href: 'javascript:;'
}
};
var removeRow = $.fn.optionTest.createColumn($("<button>", options.removeLinkOptions));
removeRow = $($(removeRow).html());
row.append(label).append(CertNo).append(PlaceofIssue).append(from).append(to).append(removeRow);
Where should I apped this X to achieve It?
If something unclear - just ask, if needed I can create JS fiddle.

Should be in this line ,when creating button:
var removeRow = $.fn.optionTest.createColumn($("<button>", options.removeLinkOptions).text("X"));

javascript change css by tag index

in my code i have around 11 image tags , all of them have an id of "#bigimage"
i want to change the style of an image on each click on a specific button for the specific image
meaning on the first click changing the #bigimage [0]
second click changing the #bigimage [1]
etc...
this is what i did:
<script>
//click event
$('.jssora05r').click(function() {
var abc=$('#bigimag').length;
var ind=0
$("#bigimag").index(ind).css("display", "block !important");
ind++;
});
</script>
it's not working, could someone help me?

just declare ind out side of the click event
also you need to change that id selector to some class selector and add same class to all images
<script>
var int = 0;
//click event
$('.jssora05r').click(function() {
// change id to some class
var abc=$('.someclass').length;
$(".someclass").index(ind).css("display", "block !important");
ind++;
});

How ListenTo event is working in Backbone.js

I created two models names are 'Sidebar','listenTestClass'.I created attribute color1 in Sidebar model simillarly I created c attribute in listenTestClass model.
//listenTestClass model
var listenTestClass=Backbone.Model.extend(
{
test:function(value){
this.set({c:value});
}
}
);
var listenTestClassObject=new listenTestClass();
//sidebar model
var Sidebar = Backbone.Model.extend({
promptColor:function() {
var cssColor = prompt("Please enter a CSS color:");
this.set({color1: cssColor});
}
});
var sidebar = new Sidebar();
//if color1 attribte change,it triggers the following code
sidebar.on("change:color1", function(model, color2) {
$('#body1').css({background: color2})
});
//assigning white color to my body tag.
sidebar.set({color1:'white'});
//assigning some random value to "c" attribute
listenTestClassObject.test("hi");
object sidebar listens to Attribute "C".That means Whenever attribute "C" value changes I want to apply background colour of is green. For this I used the listenTo event but it's not working.
sidebar.listenTo(listenTestClassObject,"change:c",function(model,c1){sidebar.set({color1:'green'})});
can anyone help me.

Creating a Label Dynamically using Javascript

I am using Aspnet, and i need to create an undetermined number of labels for one specific page.
I have a button that calls a function which generates a label dynamically using javascript:
<script type="text/javascript">
function create() {
var newlabel = document.createElement("box1");
...
document.getElementById("MainContent_revenuestreams").appendChild(newlabel);
}
</script>
What happens is that after the label is created he only shows on the webpage for about 2-3 seconds and after that it disapears (i think that the postback eliminates its content).
I would like to know how can i avoid this

document.createElement(type) - type must be a html tag name like: div, table, p.
In your case:
var newLabel = document.createElement("label");
Then you set attributes for this element (for - most important in label, id, name).
Finally:
newLabel.appendChild(document.createTextNode("This is where label caption should be"));
document.getElementById("MainContent_revenuestreams").appendChild(newLabel);
Some links:
http://www.w3schools.com/jsref/met_document_createelement.asp
http://www.w3schools.com/jsref/met_document_createtextnode.asp
As you see box1 is not a valid argument for document.createElement(type).

You have to return false to cancel the postback of the button:
<asp:Button runat="server" OnClientClick="javascript: create();return false;"/>
Also note that document.createElement("box1"); will create a <box1></box1> element which is probably not what you want. You should change "box1" to "label" or "span"

Add OnClientClick="addNewlabel();return false;"
function addNewlabel() {
var NumOfRow++;
var mainDiv=document.getElementById('MainDiv');
var newDiv=document.createElement('div');
newDiv.setAttribute('id','innerDiv'+NumOfRow);
var newSpan=document.createElement('span');
newSpan.innerHTML="Your Label Name";
// append the span
newDiv.appendChild(newSpan);
mainDiv.appendChild(newDiv);
}

CKEditor default style for styleCommand (format styles with buttons)

I have created a CKEditor plugin which does the base p, h2, h3, h4 formatting with custom buttons (instead of the stylescombo). It works great, but if I uncheck an element (ex. 'h2'), sets the 'div' tag as parent element for the row. I want to be the 'p' as the default element and also the 'p' button can't be unchecked (unless I clicking on another, ex. 'h2' button). How is this possible?
The plugin looks like:
CKEDITOR.plugins.add('stylesbuttons_custom',{
lang:'en',
icons:'p,h2,h3,h4',
init:function(editor){
var order=0;
var addButtonCommand=function(buttonName,buttonLabel,commandName,styleDefiniton){
if (!styleDefiniton)
return;
var style=new CKEDITOR.style(styleDefiniton);
editor.attachStyleStateChange(style,function(state){
!editor.readOnly && editor.getCommand(commandName).setState(state);
});
editor.addCommand(commandName,new CKEDITOR.styleCommand(style));
if (editor.ui.addButton){
editor.ui.addButton(buttonName,{
label:buttonLabel,
command:commandName,
toolbar:'basicstyles,'+(order+=10)
});
}
};
var lang=editor.lang.stylesbuttons_custom;
addButtonCommand('P',lang.p,'p',{element:'p'});
addButtonCommand('H2',lang.h2,'h2',{element:'h2'});
addButtonCommand('H3',lang.h3,'h3',{element:'h3'});
addButtonCommand('H4',lang.h4,'h4',{element:'h4'});
}
});
I load the plugin like:
config.extraPlugins='stylesbuttons_custom';
I put buttons to toolbar like:
config.toolbar:[['P','H2','H3','H4','Pre']];
Here is a screenshot about the problem:

Cross posting my answer from CKEditor forum.
I think that you need to write your own command instead of using CKEDITOR.styleCommand.
It should work exactly like CKEDITOR.styleCommand when style is not yet applied on current selection.
But when clicked again it should apply the paragraph style, not remove the previously applied style. E.g:
styleCommand.prototype.exec = function( editor ) {
editor.focus();
if ( this.state == CKEDITOR.TRISTATE_OFF )
editor.applyStyle( this.style );
else if ( this.state == CKEDITOR.TRISTATE_ON )
editor.applyStyle( paragraphStyle );
};
PS. I created a ticket: http://dev.ckeditor.com/ticket/10190 because I think that removing block style should revert back to paragraph (in enterMode=P). For now use the above workaround.

Yes, #Reinmar notifies that there is an error in the CKEditor's style.js where the this._.enterMode is not defined.
Doing this on style.js, resolve the problem:
this._ = {
definition: styleDefinition,
enterMode: CKEDITOR.config.enterMode
};
And from now on when a style button is unchecked the block changes to the default 'p' element.
Now my complete working plugin looks like:
(function(){
CKEDITOR.plugins.add('custombuttons',{
lang:'hu,en,de,ro',
init:function(editor){
var order=0,t=this,lang=editor.lang.custombuttons;
// addButtonCommand helper
var addButtonCommand=function(buttonName,buttonLabel,commandName,styleDefiniton){
var style=new CKEDITOR.style(styleDefiniton);
var styleCommand=function(style){
this.style=style;
this.allowedContent=style;
this.requiredContent=style;
this.contextSensitive=true;
};
styleCommand.prototype={
exec:function(editor){
editor.focus();
if (this.state==CKEDITOR.TRISTATE_OFF)
editor.applyStyle(this.style);
else if (this.state==CKEDITOR.TRISTATE_ON)
editor.removeStyle(this.style);
if(commandName!='fakecommand'){editor.execCommand('fakecommand');editor.execCommand('fakecommand');} /* hack to change button state properly */
},
refresh:function(editor,path){
this.setState(path&&this.style.checkApplicable(path)?(this.style.checkActive(path)?CKEDITOR.TRISTATE_ON:CKEDITOR.TRISTATE_OFF):CKEDITOR.TRISTATE_DISABLED);
}
};
editor.addCommand(commandName,new styleCommand(style));
if(editor.ui.addButton){editor.ui.addButton(buttonName,{label:buttonLabel,command:commandName,toolbar:'basicstyles,'+(order+=10),icon:t.path+'images/'+commandName+'.png'});}
};
// _fakebutton (hack)
addButtonCommand('_fakebutton','','fakecommand',{element:'span'});
// style buttons
addButtonCommand('P',lang.p,'p',{element:'p'});
addButtonCommand('H2',lang.h2,'h2',{element:'h2'});
addButtonCommand('H3',lang.h3,'h3',{element:'h3'});
addButtonCommand('H4',lang.h4,'h4',{element:'h4'});
addButtonCommand('Pre',lang.pre,'pre',{element:'pre'});
addButtonCommand('Mini',lang.mini,'mini',{element:'p',attributes:{class:'mini'}});
addButtonCommand('Important',lang.important,'important',{element:'span',attributes:{class:'important'}});
addButtonCommand('Comment',lang.comment,'comment',{element:'span',attributes:{class:'comment'}});
addButtonCommand('Mark',lang.mark,'mark',{element:'mark'});
addButtonCommand('ImgLeft',lang.imgLeft,'imgLeft',{element:'img',attributes:{class:'imgleft'}});
addButtonCommand('ImgRight',lang.imgRight,'imgRight',{element:'img',attributes:{class:'imgright'}});
addButtonCommand('ImgCenter',lang.imgCenter,'imgCenter',{element:'img',attributes:{class:'imgcenter'}});
// button shortcut keys
editor.setKeystroke(
[
[CKEDITOR.CTRL+48,'p'], // Ctrl+0
[CKEDITOR.CTRL+49,'h2'], // Ctrl+1
[CKEDITOR.CTRL+50,'h3'], // Ctrl+2
[CKEDITOR.CTRL+51,'h4'], // Ctrl+3
]);
}
});
})();
There is still a hack in the code. I needed to run a 'fakecommand' to really update (refilter?) the changed tags and all its parent tags. For example the 'p.mini' button caused problems (the state was not updated) when clicked multiple time. So there is still an unelegant solution. Any idea how to force to update or refilter the code after a style is applied?

Categories

Resources