I am trying to select a div based on its height, as shown in this tutorial,
jQuery Selection. I cannot get it to work: jsbin example . The line not working is:
$('div[height=50px]').css('background-color', 'orange');
That's an attribute equals selector, so the HTML it would match is:
<div height="50px"></div>
You could change it to:
$('div[style="height:50px"]').css('background-color', 'orange');
According to comments, the above doesn't work in Internet Explorer. Try the following instead:
$('div').filter(function() {
return $(this).css('height') == '50px';
}).css('background-color', 'orange');
If you want to match other elements with a height of 50px not specified using an attribute, take a look at the .filter() function.
If your HTML is...
<div style="height:50px;"></div>
Then your selector should be...
$('div[style*="height:50px"]');
If you are setting height to the value of "50px" and " 50px" (common), you will need to adjust accordingly...
$('div[style*="height:50px"], div[style*="height: 50px"]');
If you change the CSS of this element, the div's style attribute might become: "height:50px;background-color:orange", and it would cease to get picked up by this selector.
Docs: https://api.jquery.com/attribute-contains-selector/
Related
I am using ion-range with pin and steps. I get the current value in the range pin, but I want to add/append some text next to it.
So far in ionic API and docs I did not find a way to modify the content from the range pin, so I am thinking on maybe appending a span via the code, but so far I know to use .append() function from jQuery.
The html of the range pin is:
<div class="range-pin" role="presentation">1</div>
So I want to show it like:
<div class="range-pin" role="presentation">1 item</div>
I know it is a bit late but if anyone comes across this question, I have found the following solution:
HTML
<ion-range id="euroRange" debounce="250" pin="true" min="0" max="50" (ionChange)="formDidUpdate()" [(ngModel)]="price" color="secondary"></ion-range>
See how I added an id called euroRange to my ion-range element.
CSS
#euroRange {
.range-pin:after {
content: " €";
}
}
Inside of the euroRage id I added .range-pin:after which means that whatever I specify should be done directly after the normal content of the pin.
With content I added a space and the € symbol.
Here is the
result.
This was my solution.
Note: I put this inside ionViewDidEnter.
this._elementRef.nativeElement
.querySelector('.range-knob-handle')
.addEventListener('pointermove', function () {
const value = this.getAttribute('aria-valuenow');
this.querySelector('.range-pin').textContent = `${value} hours`;
});
So the main thing here is that the const value is the value selected on the range. After that you can do whatever you want with it and just set the textContent of the range-pin to fix the text.
Is there any way to decoratively define the List width in the HTML.
I know I can do it
var autoComplete = $("#autoComplete").data("kendoAutoComplete");
// set width of the drop-down list
autoComplete.list.width(400);
but I want to do it in HTML only.
I have already tried:
data-list-width="400"
When you create an autocomplete in Kendo UI, it creates a second HTML element (a wrapper) for the drop down options. This element is given as id the id of the original one plus -list.
You can define a CSS style for this newly created wrapper as:
#autocomplete-list {
width: 300px !important;
}
You need to use !important otherwise the value calculated by Kendo UI has prevalence over yours.
Example in this JS Fiddle: http://jsfiddle.net/OnaBai/n55w8/
I got the answer from telerik today:
Currently, the width of the popup element can be set only programatically.
Salam!
The .width(400) is not a configuration setting, it is jQuery width method, so you can't set width for your autocomplete decoratively.
If you use MVVM framework in your project, maybe Custom binding help you to add a custom binding like <input id="autoComplete" data-bind="listwidth: 400" /> for your autocomplete.
See this demo if you want to use custom binding.
Here is what I need to do: For example we have paragraph with some text and also img inserted I need to delete only the text without the IMG, but I dont know how to set that kind of condition.
Here's how you could do that in jQuery if you got some kind of identifier:
$('.container p').html($('.container p img'));
http://jsfiddle.net/8xbEp/ - a fiddle example
But maybe it would be better if you just set the image to be non-editable within tinyMCE, depending on your goals.
EDIT
This is an fiddle showing how to use non-editable content inside a contenteditable field (such as tinyMCE)
http://jsfiddle.net/uUKPA/35/
You need to wrap the contenteditable="false" inside another element with contenteditable="false" to be sure it's not removable in all browsers, such as IE.
<div contenteditable="false"><img src="img.gif" contentedtitable="false"/></div>
I have an HTML code:
<div id="first"></div>
I wish to use javascript (document.findElementById) to change the behavior of the div so that it'll be as:
<div id="first" align="center"></div>
How do I go about that?
document.getElementById("first").setAttribute("align", "center");
Use element.setAttributeMDN
document.getElementById('first').setAttribute('align', 'center');
A less archaic approach is to style the margin:
document.getElementById('first').style.margin = '0 auto';
DEMO
This works if you already have an align attribute for that element
document.getElementById("first").attributes['align'] = 'center';
If you dont already have the attribute, use setAttribute
document.getElementById('first').setAttribute('align', 'center');
document.getElementById('first').align = center
See How to add/update an attribute to an HTML element using JavaScript?
Unfortunately for you, the align attribute is deprecated and shouldn't be used.
You can center DIVs of specific widths by setting the style margin attributes, like so:
document.getElementById('first').style.marginLeft = 'auto';
document.getElementById('first').style.marginRight = 'auto';
If you're set on modifying the align attribute, you can do it like so:
document.getElementById('first').align = 'center';
Other ways to center DIVs (using CSS) can be found here.
I am trying to select the surround element when a image within the span is clicked 'remove()', but I am a little new to jQuery and can't figure out how to do it. I can't use a unique id as the element are generated dynamically.
For example:
<span class='type_link'> <img src='/images/deleteCross.gif' onclick='remove()' />Example</span>
I want to select the span when the image is clicked.
Here is an example to hide the parent element of the image:
<span class='type_link'> <img src='/images/deleteCross.gif' onclick='$(this).parent().hide();' />Example</span>
The trick is to use "this" and the parent()-function.
Cheers,
Chris
Look at this (for selector) and this (for event)!
Also W3schools provide Good example for first step in Jquery.
How about .parent() http://api.jquery.com/parent/