Is there a way to change multiple DIVs backgrounds at the same time using jscolor? Up until now my tests showed me that it only takes one id at a time and ignores the rest. I know there shouldn't be multiple DIVs with same id, for now i'm trying to get it to work temporarily.
<p>Link INPUT elements:
<button class="jscolor
{valueElement:'valueInput', styleElement:'styleInput'}">
Click here to pick a color
</button>
<p>
Value: <input id="valueInput" value="ff6699"><br>
Style: <input id="styleInput">
If you only want to have 2 Div with the same background you could use the onfinechange function that goes with jscolor: here
More than two Div won't work as you cannot give the same ID to multiple Div. You can see more details on why that is here
Otherwise, you might be able to go around it with PHP or javascript by taking the valueInput and giving that value to the style.
Or setting up several onfinechange functions.
Something like background-color: $valueInput
Related
I'm using Vimium on Firefox and Chrome and it helps me a lot https://github.com/philc/vimium
I noticed that some divs can be clicked and I found that class='demo-button' is one of them
<div class='demo-button'>demo-button</div>
<div class='demobutton'>demobutton</div>
<div class='demobuttonnn'>demobuttonn</div>
<div class='demobutto'>demobutto</div>
Here is a screenshot of Vimium links https://jsfiddle.net/qnvujfs6/
As you can see, only the last div demobutto can not be clicked using Vimium. I tried to search Vimium source for demo-button or demobutton but no results.
Does anyone have an idea why there is a difference between this demo button div-s ?
I want to be able to click on some generated elements using bootstrap plugins, for example Bootstrap Toggle. Here is code for two toggles, but only second one can be clicked because it contains demo-button class
https://codepen.io/duleorlovic/pen/VqWaEg
The first three are clickable because the class attribute contains the word "button" (See source).
For usability purposes it preferred to simply use the elements that are meant to do that job. For instance anchors (<a>) and buttons (<button>).
But if that is not possible (which seems to be the case here) you can also add the role attribute to the element. Elements with the attribute role with one of the following values will also be considered clickable:
button
tab
link
checkbox
menuitem
menuitemcheckbox
menuitemradio
(Source)
So if your div elements represent check boxes, your code would look like this:
<div class="demo-button" role="checkbox">demo-button</div>
<div class="demobutton" role="checkbox">demobutton</div>
<div class="demobuttonnn" role="checkbox">demobuttonn</div>
<div class="demobutto" role="checkbox">demobutto</div>
In this case you are not depending on specific class names, which are by the extension considered "as unreliable".
I have a array of labels which i used display looping over using ng-repeat. I have a checkbox implemented and a label(inside a span) adjacent to it. I want to check the adjacent checkbox when the user clicks on the corresponding span element.
<bv-checkbox ng-model="i.checked" ng-change="inputChanged()""></bv-checkbox>
<span ng-bind="i.displayName"></span>
I do not have an id in place hence i cant use label "for" property.
Thanks in advance.
Try something like this..It might help you
<div ng-repeat="emp in employees">
<div class="action-checkbox">
<input id={{emp.name}} type=checkbox value="{{emp.name}}" ng-checked="selection.indexOf(emp.name)">
<label for={{emp.name}}></label>{{emp.name}}
</div>
</div>
While there are many ways to make this happen without using <label>, but I think you should use it because it is the standard way of doing it.
To solve the no id issue, you can create an id dynamically by using other fields of the object (e.g. name or index) (mentioned in #Natarajan's answer)
You can also use a <label> to surround both elements if they are adjacent (not recommended).
<label>
<bv-checkbox ng-model="i.checked" ng-change="inputChanged()""></bv-checkbox>
<span ng-bind="i.displayName"></span>
<label>
Although this might create some styling issue that needs to be fixed in CSS.
Why not add an ng-click on the span element to do it?
<bv-checkbox ng-model="i.checked" ng-change="inputChanged()""></bv-checkbox>
<span ng-bind="i.displayName" ng-click="i.checked=true;"></span>
I'm facing a problem while optimizing a WebView for mobile devices. It's about making a Search bar visible which is hidden inside a <p> of a nested. However, I'm finding no way to select only the span of the Search bar and its label because the other spans in this <p> are called practically the same. Whenever I try to do something other than hiding / showing the entire paragraph, nothing works.
It looks something like this
<div class="setaction">
<p>
<span class="nowrap>
<span class="labeltext">
<label for="stxt">Search:
</label>
</span>
<input type="text" class="text" size="12" name="stxt" id="stxt" value=""
onchange="this.form.what.value='srch'; this.form.submit();"/>
....
</span>
So this is the Search label and Search bar that I need, what follows is a (kinda unnecessary) button and a few more options that I don't need to display. They are all inside a <span class="nowrap">(there are multiples, one after another) and I'm at a loss about how to only target the few things inside this paragraph that I need.
I would try to select only stxt, however when I try to do it via div.setaction stxt or any variation of it, nothing happens. What am I doing wrong?
Try using attribute selector:
$("[for='stxt']")
Which will give you the label.
If you are trying to select stxt it appears you are selecting a tag <stxt></stxt>. This is obviously not your intent.
Make sure to use # or . before the selector to select an id or class.
If the element you are selecting does not have an id or class, you can select it by an attribute:
[attribute=value] /* selects elements whose attribute match the value */
e.g.
[for="stxt"]
If you are trying to select the input, just use #stxt
If you are trying to select the label, you can either do:
[for="stxt"], label or .setaction label
Let me know if you need any help.
Are you trying to select using jquery or CSS?
If you are trying with css, you need to have the class assigned for label too. Here you are using "for" and Css can not select that.
You can also select it in this way.
div.setaction label
If you are using jquery, you can use "attr".
I can't believe that nobody has said this yet! CSS has a way built in by default for this very situation. You should apply the CSS:
p:first-child{
CSS here
}
to select the first option. More info here and here
I have a div with an input inside. Something similar to this:
<div ng-repeat="(key, value) in someJSON">
<div>
Some content
</div>
<form>
<input ng-focus="action(key)">
</form>
</div>
What I'm trying to accomplish: I want to perform an action when the input gets focused on and I want to later execute reverseAction(key) if a click occurs outside of the PARENT div.
The reverseAction() requires the key so I can't put an ng-click on the body tag to reverse the action. ng-blur doesn't help me too much (at least not the way I've been using it) as it will perform the action even if I click within the div.
Any ideas?
I have an array of 2000 items, that I need to display in html - each of the items is placed into a div. Now each of the items can have 6 links to click on for further action. Here is how a single item currently looks:
<div class='b'>
<div class='r'>
<span id='l1' onclick='doSomething(itemId, linkId);'>1</span>
<span id='l2' onclick='doSomething(itemId, linkId);'>2</span>
<span id='l3' onclick='doSomething(itemId, linkId);'>3</span>
<span id='l4' onclick='doSomething(itemId, linkId);'>4</span>
<span id='l5' onclick='doSomething(itemId, linkId);'>5</span>
<span id='l6' onclick='doSomething(itemId, linkId);'>6</span>
</div>
<div class='c'>
some item text
</div>
</div>
Now the problem is with the performance. I am using innerHTML to set the items into a master div on the page. The more html my "single item" contains the longer the DOM takes to add it. I am now trying to reduce the HTML to make it small as possible. Is there a way to render the span's differently without me having to use a single span for each of them? Maybe using jQuery?
First thing you should be doing is attaching the onclick event to the DIV via jQuery or some other framework and let it bubble down so that you can use doSomething to cover all cases and depending on which element you clicked on, you could extract the item ID and link ID. Also do the spans really need IDs? I don't know based on your sample code. Also, maybe instead of loading the link and item IDs on page load, get them via AJAX on a as you need them basis.
My two cents while eating salad for lunch,
nickyt
Update off the top of my head for vikasde . Syntax of this might not be entirely correct. I'm on lunch break.
$(".b").bind( // the class of your div, use an ID , e.g. #someID if you have more than one element with class b
"click",
function(e) { // e is the event object
// do something with $(e.target), like check if it's one of your links and then do something with it.
}
);
If you set the InnerHtml property of a node, the DOM has to interpret your HTML text and convert it into nodes. Essentially, you're running a language interpreter here. More text, more processing time. I suspect (but am not sure) that it would be faster to create actual DOM element nodes, with all requisite nesting of contents, and hook those to the containing node. Your "InnerHTML" solution is doing the same thing under the covers but also the additional work of making sense of your text.
I also second the suggestion of someone else who said it might be more economical to build all this content on the server rather than in the client via JS.
Finally, I think you can eliminate much of the content of your spans. You don't need an ID, you don't need arguments in your onclick(). Call a JS function which will figure out which node it's called from, go up one node to find the containing div and perhaps loop down the contained nodes and/or look at the text to figure out which item within a div it should be responding to. You can make the onclick handler do a whole lot of work - this work only gets done once, at mouse click time, and will not be multiplied by 2000x something. It will not take a perceptible amount of user time.
John Resig wrote a blog on documentDragments http://ejohn.org/blog/dom-documentfragments/
My suggestion is to create a documentDragment for each row and append that to the DOM as you create it. A timeout wrapping each appendChild may help if there is any hanging from the browser
function addRow(row) {
var fragment = document.createDocumentFragment();
var div = document.createElement('div');
div.addAttribute('class', 'b');
fragment.appendChild(div);
div.innerHtml = "<div>what ever you want in each row</div>";
// setting a timeout of zero will allow the browser to intersperse the action of attaching to the dom with other things so that the delay isn't so noticable
window.setTimeout(function() {
document.body.appendChild(div);
}, 0);
};
hope that helps
One other problem is that there's too much stuff on the page for your browser to handle gracefully. I'm not sure if the page's design permits this, but how about putting those 2000 lines into a DIV with a fixed size and overflow: auto so the user gets a scrollable window in the page?
It's not what I'd prefer as a user, but if it fixes the cursor weirdness it might be an acceptable workaround.
Yet Another Solution
...to the "too much stuff on the page" problem:
(please let me know when you get sick and tired of these suggestions!)
If you have the option of using an embedded object, say a Java Applet (my personal preference but most people won't touch it) or JavaFX or Flash or Silverlight or...
then you could display all that funky data in that technology, embedded into your browser page. The contents of the page wouldn't be any of the browser's business and hence it wouldn't choke up on you.
Apart from the load time for Java or whatever, this could be transparent and invisible to the user, i.e. it's (almost) possible to do this so the text appears to be displayed on the page just as if it were directly in the HTML.