How can I make it in vue.js, if Option A is selected div b disable, and when Option B is selected div A is disable using Vue.js.
<div id="app">
<select>
<option>A</option>
<option>B</option>
</select>
<div id="a">
A
</div>
<div id="b">
B
</div>
Firstly, you should search Vue's Methods.
Updated: 19/06/2017 - 16:35
And if you want to code sample you can use this to example:
var app = new Vue({
el: '#app',
data: {
selected: ''
},
})
#a {
width: 128px;
height: 128px;
background-color: gray;
}
#b {
width: 128px;
height: 128px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
<select v-model="selected">
<option disabled value="">Select div name</option>
<option value="a">A</option>
<option value="b">B</option>
</select>
<div id="a" v-if="selected === 'a'">
Div A
</div>
<div id="b" v-else>
Div B
</div>
</div>
If by disabling you mean to hide id or remove it from DOM - yes, you can do it with Vue.
Applies to both:
1. Assign the select to the model like v-model='selected'
2. Initiate it in the model: data() { return { selected: null; (...) } }
v-if - DIV will be removed/insterted from/into DOM
On your divs: <div id='a' v-if="selected=== 'a'"
v-show - div will be hidden/shown
On your divs: <div id='a' v-show="selected=== 'a'"
Related
Need a possibility to get the exact match of a search string in a on.click handler. This is what I have now,
$("#wrapper").on("click", "label:contains('SEARCH') ~ .material > .icon", function (e) {
Problem is, that "contains" matches all words with Label containing "SEARCH".
E.g. "Search", "Searchsting", "Searchsentence" and so on....
Any ideas?? Have spent a lot of time, to find a solution. E.g. mixing :contains(''):not(:contains). But with no success.
<div class="wrapper">
<div class="field dco-uncommon has-required required dco-enabled" id="bss_options_5283" depend-id="20652" style="display: block;">
<label class="label" for="select_5283"><span>SEARCH</span></label>
<div class="control ">
<select name="options[5283]" id="select_5283" class="product-custom-option admin__control-select required" data-selector="options[5283]" aria-required="true">
<option value="">-- Please choose --</option>
<option value="75108" price="0" depend-id="20659">Option 1</option>
<option value="75111" price="35" depend-id="20662">Option 2</option>
</select>
</div>
<div class="material">
<span class="icon" style="background-image: url(amethyst_1646165.jpg)" data-title="Amethyst 1646165" title="Amethyst 1646165"></span>
<span class="icon" style="background-image: url(apfel_1644435.jpg)" data-title="Apfel 1644435" title="Apfel 1644435"></span>
<span class="icon" style="background-image: url(auster_1644480.jpg)" data-title="Auster 1644480" title="Auster 1644480"></span>
<span class="icon" style="background-image: url(azure_1641085.jpg)" data-title="Azure 1641085" title="Azure 1641085"></span>
<span class="icon" style="background-image: url(baltic_1645155.jpg)" data-title="Baltic 1645155" data-properties="" title="Baltic 1645155"></span>
</div>
</div>
</div>
The logic you're looking for is not supported by jQuery, so I was able to get this library that extends jQuery and gives you exactly what you're looking for:
https://blog.mastykarz.nl/jquery-regex-filter/
This library allows you to use regex to filter values in your elements:
Then here we are using normal javascript regex to match the exact word: ^SEARCH$
// extend jquery
jQuery.extend(
jQuery.expr[':'], {
regex: function(a, i, m, r) {
var r = new RegExp(m[3], 'i');
return r.test(jQuery(a).text());
}
}
);
// extend jquery
$(function() {
$("#wrapper").on("click", `label:regex('^SEARCH$')`, function (e) {
console.log('This label contains the exact string "SEARCH"')
})
});
#wrapper {
height: auto;
width: 200px;
background-color: #DDDDDD;
padding: 2px;
}
label {
display: block;
background-color: white;
padding: 3px;
margin: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<label for="">SEARCH</label>
<label for="">SEARCHstring</label>
<label for="">stringSEARCHother</label>
<label for="">stringsearchother</label>
<label for="">SEARCH</label>
</div>
I've been playing around with HTML and I created a column that immediately appears when I open my file in a browser. I tried moving the column and row classes around but I can't figure out how to get it so that the column doesn't appear until after I select an option from the dropdown menu. I was wondering how I could fix this issue?
<html>
<head>
<title>Testing Display</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.center{
text-align: center;
border: 3px solid #73AD21;
}
{
box-sizing: border-box;
}
.column {
float: left;
width: 30%;
padding: 10px;
height: 2000px;
}
.row:after {
content: "";
display: table;
clear: both;
}
</style>
<body>
<div class ="center">
<p><div><h1>Testing Display</h1></div><br /><p>
<div class="dropdown">
<form>
<select name="list" id="list" accesskey="target" onchange="display(this)">
<option value="none">Choose an option</option>
<option value="one">Option one</option>
</select>
<input type=button value="Select" onclick="display()"/>
<div id="add"></div>
</form>
</div>
</div>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
<div id="div"></div>
</div>
</div>
<script src="order.js"></script>
</body>
</html>
Have the initial visibility of column to hidden.
Have a Javascript function to add a new class to column onChange. Something like this
function onSelect() {
//or add id to easily access unique single element.
var element = document.getElementByClassName("column")[0];
element.classList.add("showCol");
}
.column {
visibility: hidden;
...
}
.showCol {
visibility: visible;
...
}
Can also add styles and remove style onChange instead of toggling classes.
Javascript Solution, call this method in onchange event of drop down list:
function ddlChange(){
if (document.getElementById("list").value === "one"){
document.getElementsByClassName("column").style.display = "table-cell";
}
}
Using jQuery:
$("#list").change(function () {
if($('#list option:selected').val() === "one")
$(".column").css("display","table-cell");
});
Alternatively, you can also try to add or remove a class instead of changing inline CSS value.
http://jsfiddle.net/g3u7hxr6/4/
I have this following code, currently it changes all textareas css values with the dropdown boxes.
I want it so that when 1 textarea is selected and glowing green, the dropdown boxes will only change the css for the selected textarea rather than all of them.
Basically I want to be able to change each text area font individually.
I considered using another dropdown box to select which textarea to change. but there must be a way for the javascript to detect the selected textarea and make changes to it only. I would need to add a unique id field to each textarea but i'm completely lost with the javascript. please help!!!
Answered thanks to Binvention:
http://jsfiddle.net/g3u7hxr6/19/
JS:
$(function () {
$("[id^=font]").on('change', function () {
$('.address').css(this.id, /\d/.test(this.value) ? this.value + "px" : this.value);
});
});
$('.address').focus(
function(){
$(this).parent('div').css('box-shadow','0px 0px 10px green');
}).blur(
function(){
$(this).parent('div').css('box-shadow','0px 0px 0px');
});
HTML:
<div class="options">
<div class="left">Font:
<br>Size:
<br>Weight:</div>
<div class="right">
<select name="fontFamily" id="fontFamily">
<option selected value="Verdana">Verdana</option>
<option value="Arial">Arial</option>
</select>
<br>
<select name="fontSize" id="fontSize">
<option value="8">8</option>
<option selected value="16">16</option>
<option value="24">24</option>
</select>
<br>
<select name="fontWeight" id="fontWeight">
<option selected value="Bold">Bold</option>
<option value="Normal">Normal</option>
</select>
<br /> <br />
</div>
<div class="page">
<div class="left border">
<textarea class="address" tabindex="1">text area 1</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="4">text area 4</textarea>
</div>
<div class="left border">
<textarea class="address" tabindex="2">text area 2</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="5">text area 5</textarea>
</div>
<div class="left border">
<textarea class="address" tabindex="3">text area 3</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="6">text area 6</textarea>
</div>
</div>
CSS:
.left {
float: left;
}
.right {
float: right;
}
.options {
width: 200px;
}
.page {
width: 440px;
}
.border {
border:1px solid #888;
border-radius: 5px;
padding: 5px;
margin: 0 0px 0px 0;
}
textarea {
resize:none;
height: 100px;
width: 200px;
overflow: auto;
font-family: Verdana;
font-size: 16px;
}
You need to create a unique class that marks one as selected like this
$('textarea').click(function(){
$(this).toggleClass('textselected');
});
That will allow you to dynamically pick which text boxes your editing just click to edit click to deselect from editing. You'll need some css to distinguish selected from not selected though.
Then when you edit the font and text properties you use that special class not the text areas to select the property like this
$("[id^=font]").on('change', function () {
$('.textselected').css(this.id, /\d/.test(this.value) ? this.value + "px" : this.value);
});
});
I have edited your fiddle with the necessary changes here
You need to add $(this).addClass('selected'); within your focus event and change the selector to $('.address.selected') within your change event.
Now, I would like to make width of my select element, let's say 80% of its parent div ( div#queries). Is there anyway to do it?
<div id="flowchart-left-panel">
<div id ="queries">
<h3>Queries</h3>
<select class="query-list" size="20">
</select>
</div>
<div id="filters">
<h3>Filters</h3>
<select class="filter-list" size="10">
</select>
</div>
</div>
Of course, with CSS.
Demo here: http://codepen.io/anon/pen/JYYGvG
#queries, #filters{
width: 300px;
}
select{
width: 80%;
}
Consider the following example: (live demo here)
HTML:
<div class="wrapper">
<div city_id="1" class="odd">Street Name #1 in city 1</div>
<div city_id="3" class="even">Street Name #2 in city 3</div>
<div city_id="2" class="odd">Street Name #3 in city 2</div>
<div city_id="1" class="even">Street Name #4 in city 1</div>
<div city_id="1" class="odd">Street Name #5 in city 1</div>
<div city_id="3" class="even">Street Name #6 in city 3</div>
<div city_id="2" class="odd">Street Name #7 in city 2</div>
<div city_id="3" class="even">Street Name #8 in city 3</div>
<div city_id="1" class="odd">Street Name #9 in city 1</div>
</div>
<select>
<option value="">Please select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
CSS:
.odd {
background-color: #777;
}
.even {
background-color: #aaa;
}
JS:
$(function() {
$("select").change(function() {
var city_id = $("option:selected", this).val();
$("div[city_id]").each(function() {
$(this).toggle($(this).attr("city_id") == city_id);
});
});
});
I would like to keep the alternating coloring even when some rows are hidden.
Is that possible to achieve this with pure CSS ?
If no, how would you do this using Javascript/jQuery ?
Here's a simple solution . Dynamically change the row's class while the selected index changes
http://jsfiddle.net/4Bjbc/5/
$(function() {
$("select").change(function() {
var city_id = $("option:selected", this).val();
$("div[city_id]").each(function() {
$(this).toggle($(this).attr("city_id") == city_id);
}).filter(":visible") ///filter the visible ones
.attr("class",function(index,$class){
///if you don't want to miss out the other classes
return index%2 == 0 ? $class.replace("odd","even") : $class.replace("even","odd");
});
});
});
you need from javascript to set the class odd or even by walking through the items and if they are visible alternate the class
You can use CSS for it:
.wrapper div:nth-child(even) { background-color: #777; }
.wrapper div:nth-child(odd) { background-color: #aaa; }
However, it won't take hidden rows into account. To achieve this, you need to restrict the div selector even more:
.wrapper div.visible:nth-child(even) { background-color: #777; }
.wrapper div.visible:nth-child(odd) { background-color: #aaa; }
Then you just need to ensure that all visible elements have the visible class.
With jquery you could use in the change event:
$('.wrapper div:visible:even').css({
'background-color': '#777'
});
$('.wrapper div:visible:odd').css({
'background-color': '#aaa'
});
FULL CODE
$("select").change(function() {
var city_id = $("option:selected", this).val();
$("div[city_id]").each(function() {
$(this).toggle($(this).attr("city_id") == city_id);
});
$('.wrapper div:visible:even').css({
'background-color': '#777'
});
$('.wrapper div:visible:odd').css({
'background-color': '#aaa'
});
});
This way it sets the background color taking into account only visible rows
fiddle here: http://jsfiddle.net/4Bjbc/3/