So I've got this dropdownlist and I want to change the whole websites background color using it.
This is my MasterPage body:
<body style="overflow: auto;" runat="server" id="bodyMasterPage">
And I'm trying to set the background like this.
var body = Master.FindControl("bodyMasterPage");
if (ddlColor.SelectedValue == "Green")
{
body.Attributes.Add("background-color", "Green");
}
But when I try add the Attributes to the body, I get an error saying:
"Control does not contain a definition for 'Attributes'..."
So my question is, how should I go about actually changing the background color of the MasterPage from here?
The compiler is telling very well exactly what kind of error you are dealing with, Master.FindControl returns an object of type Control which doesn't an Attributes property. Control objects, however, can be casted to a specific type they correspond to. In our case HtmlGenericControl can do the job.
You have to include the appropriate namespace first by adding the following line on top of the page:
using System.Web.UI.HtmlControls;
And then you can adapt your example with this:
var body = (HtmlGenericControl)Master.FindControl("bodyMasterPage");
body.Attributes["style"] += " background-color: green;";
Be careful how you are using the attributes, what you have shown in your code would have created an attribute of type background-color with value Green, and what you really want is either add a class to the body or directly access the style attribute like I did but adding your value to it.
I specifically used the addition assignment operator, in case you have any other styles on the body so you don't overwrite them and just include your change. However if you want to completely rewrite it you can change it around or use your approach with proper attribute name (style).
Related
I am trying to disable a button dynamically based on a data attribute that's present on the body, code looks sort of like this:
<body data-online="true">
<button disabled></button>
</body>
What I want is to set the pseudoclass disabled based on the value of the body's data attribute. I'm looking for the simplest possible way to do this. I know that conventionally this would be done asynchronously with JS, but for annoying reasons I have no direct control over I would prefer another way. I'm wondering if it's possible to set the pseudoclass directly through CSS or HTML in some way?
I honestly don't this it is possible to achieve this without any JavaScript since the disabled properly is a boolean attribute.
You'll need at least to grab the element using JavaScript and conditionally apply the disabled attribute. As on the code below:
function checkButtonDisabled() {
const body = document.querySelector('body');
const button = document.querySelector('#btn')
const buttonIsDisabled = body.getAttribute('data-online') === 'true'
if (buttonIsDisabled) {
button.setAttribute("disabled", true)
return
}
button.removeAttribute("disabled")
}
checkButtonDisabled()
Although, If your intention is also to style it, you could use the selector below or some variant that could suit better for you:
body[data-online="true"] > button {
/* Your styles here */
}
you could check this article also which explains attribute selectors.
I am not even sure if what I am trying to do is possible. I want to present the "floating" DOM element created when dragging a row as something more than just text. Seems like when I try to use html code as the returned value it is rendered as text rather than html:
rowDragText: function(params) {
return `<div [innerHTML]=${params.rowNode.data.RULE_NAME}></div>`;
}
This is what happens:
There is public static GHOST_TEMPLATE defined in dragAndDropService.ts.
You can try modifiying that template and perhaps also inspect the createGhost function nearby.
rowDragText probably not used with this method...
I'm trying to make a custom cursor setter. You can customize cursors in CSS, so I went there first.
html {
cursor: url(MY URL GOES HERE), auto !important;
}
It works at this point. However, I want the average user to be able to enter an image URL and see the cursor change to that. I decided to use JavaScript to do that.
function customCursor() {
var v1 = prompt("Enter the image URL you want to be your mouse cursor.");
var style = document.createElement('style');
style.innerHTML = `html {cursor:url(` + v1 + `); } `;
document.head.appendChild(style);
}
However, it doesn't work. I checked the current page HTML with Firebug, and the tag is added. And when I use JavaScript to add it manually, it works. So why would it not work?
I also made sure to keep the images I chose below 128x128.
After massive changes to the code, it still is not working. However, I now understand a reason why (by using devtools to read what was actually being added):
Instead of dynamically using my variable, it was treating the variable name as the URL itself. This makes this question mostly irrelevant.
In an angular project, I need to test that the displayed table width of the primeng data table is set to the maxWidth value i assign to it. To do so, i want to call the [style] attribute to get the width and see if its equal to my maxWidth. However, i do not know how to call attributes like this. How do i go about this? Currently i have no clue if I'm going in the correct direction.
I have tried several things but I am not sure of the syntax for it.
<p-table class="p-table" ... [style] = "{width: maxWidth}" >
it('should implement maxwidth', () => {
const widthDebug: DebugElement = fixture.debugElement;
const tableWidth = widthDebug.query(By.css('.ui-table .ui-widget'));
const ptable: HTMLElement = tableWidth.nativeElement;
expect(ptable.textContent).toContain("width: " + component.maxWidth);
});
expected: success (ptable.textContent contains "width: component.maxWidth")
actual: TypeError: cannot read property 'nativeElement' of null
I see that it's now two months after you asked your question, so it's probably too late for my answer to help, but I stumbled across this post while looking up something else about PrimeNG, so I might as well give it a shot.
The problem here is that nativeElement is defined on Dialog class instances of the Angular p-table component. It's not defined on any particular DOM element.
By.css('.ui-table .ui-widget') is going to find a DOM element for you, not an Angular class instance. In particular what will be found is a <div> inside the <p-dialog> DOM element, and it's this <div> that receives the style set via [style]=....
As your code is written above tableWidth.style.width would contain (as a string) the value of maxWidth that you're expecting to find.
I have a script called equal-heights.js which works together with underscore.js. It equalize the divs to the size of the highest div with an animation (optional). The problem is that when I charge the page nothing happens, it starts to equalize the divs only when I resize the browser.
The initialising code on the HTML:
$(document).ready(function() {
$('.profile-panel').equalHeights({
responsive:true,
animate:true,
animateSpeed:500
});
});
You can see the equal-heights.js here: http://webdesign.igorlaszlo.com/templates/js/blogger-equal-heights-responsive.js
What should I do so that, when the page loads, the animation starts to equalize the divs automatically?
I created my own test and realized the issue is with the way the plugin has been written, namely that it only accepts one value for the class name, otherwise it will break.
This is because of the following line in the script:
className = '.'+$(this).prop('class');
What this does is that it takes the class property of your element and adds a dot (.) in front; a nice but not very scalable way of getting the current selector, because if you have multiple class names, it will only put a dot in front of the first one, so if you have...
<div class="profile-panel profile-panel-1st-row profile-panel1">
...it will transform it into...
$('.profile-panel profile-panel-1st-row profile-panel1')
...so understandably this will not work properly, as the dots are missing from the rest of the classes.
To go around this, until version 1.7, jQuery had a .selector property, that however has now been deprecated. Instead they're now suggesting to add the selector as an argument of your plugin's function as follows (and I tailored it to your situation):
First define an option called selector when calling the function:
$('.profile-panel-1st-row').equalHeights({
selector:'.profile-panel-1st-row',
// ...
});
Then setup the className variable inside the plugin as follows:
var className = options.selector;
Another thing you can do is the place the class you're using to activate the plugin as the first one for each element you want to use it on, so instead of...
<div class="profile-panel profile-panel-1st-row profile-panel1">
...do this...
<div class="profile-panel-1st-row profile-panel profile-panel1">
...then you can setup the className variable inside the plugin as follows:
var className = '.'+ $(this).prop('class').split(" ").slice(0,1);
This basically splits the class names into parts divided by space and takes the first one.
To have the best of both solutions, simply set className to the following:
var className = options.selector || '.'+ $(this).prop('class').split(" ").slice(0,1);
As to the animation, it only works on resize; that is intended, that's how the plugin has been built, you can play around with the original example of the plugin creator that I added to jsfiddle: http://jsfiddle.net/o9rjvq8j/1/
EDIT #2: If you're happy to change the plugin even more, just remove $(window).resize(function() in the if(settings.responsive === true) check and you'll have it working. ;)
if(settings.responsive === true) {
//reset height to auto
$(className).css("height","auto");
//re initialise
reInit();
}