I want to select the 1st button in this div for my test:
<div id="group_button" class="text-center background-color-ecodrop common-padding-bottom-10">
<button ng-click="filterPupNotCollect()" class="custom-button-map enable-button-map" ng-disabled="listPUPMap.length == 0" ng-class="{'enable-button-map': isShowFormCollect == false, 'disable-custom-button-map': listPUPMap.length == 0}">Déposer en<br>déchèterie</button>
<button id="button_filter_pup_collect" ng-click="filterPupCollect()" class="custom-button-map common-margin-left-10" ng-class="{'enable-button-map': isShowFormCollect, 'disable-custom-button-map': listCollect.length == 0}" ng-blur="hideTooltip()">Commander une<br>collecte</button>
</div>
I tried many ways as the instruction of wdio: https://webdriver.io/docs/selectors/#chain-selectors
But they all didn't work
They return with the error elem[prop] is not a function
These are what I tried:
return $('.text-center.background-color-ecodrop.common-padding-bottom-10 button:nth-child(1)')
//return $$('#group_button')[0]
//return $('.text-center.background-color-ecodrop.common-padding-bottom-10 .custom-button-map.enable-button-map:nth-child(1)')
//return $('#group_button').$('button*=Déposer en')
//return $('//*[#id="group_button"]/button[1]')
Any suggestion how to solve this?
Thanks in advance
Related
I just want to change the button text
<button id="reset">Reset</button>
$("#reset').on("click", function () {
this.textContent = "Loading....";
setTimeOut("this.textContent = " Reset", 2000)
}
after I clicked it will change the text to Loading and in few second it turn back to Reset.
I tried to add text
You don't need jQuery.
Just this:
<button id="reset" onclick="this.textContent = 'Loading...'; setTimeout( e => this.textContent = 'Reset', 2000 );">Reset</button>
I want check if my div have a number and add class css.
I have try this :
<div class="test" style="">
<p class="book"> 24 books</p>
</div>
jQuery('.test').addClass('ok');
var number = parseInt(jQuery(this).find('.book').text(), 10);
var current = 26;
if (current > number)
{
jQuery('.test').addClass('its-ok');
}
My class "ok" is add but the class its-ok isn't add.
In jsfiddle : http://jsfiddle.net/8tg9exLw/2/
the result of
parseInt(jQuery(this).find('.book').text(), 10);
is NaN because $(this).find('book') is an empty selector (what should be the value of $(this) in your context ?)
write instead parseInt($('.book').text(), 10);
Try this,,,
Add "$(document).ready(function(){});"
$(document).ready(function(){
jQuery('.test').addClass('ok');
var number = parseInt(jQuery(this).find('.book').text(), 10);
var current = 26;
if (current > number)
{
jQuery('.test').addClass('its-ok');
}
});
Updated Working jsFiddle
In the following jQuery code:
parseInt(jQuery(this).find('.book').text(), 10);
it is not getting what this is.
Instead of this, I suppose you mean to use .test. Check the updated jsFiddle above.
Your if condition is not satisfied because current < number.
JS:
jQuery('.test').addClass('ok');
var number = parseInt(jQuery('.test').find('.book').text(), 10);
console.log(number);
var current = 2;
if (current > number)
{
jQuery('.test').addClass('its-ok');
}
else
{
console.log("If condition not satisfied.");
// do something here
}
EDIT: For the parsed integer less than current, check this working jsFiddle: http://jsfiddle.net/8tg9exLw/4/
I am sure this is rediculously simple, but I'm stumped.
Very simply, I want to create a text link that changes the width property of an image on mouse over, and on mouse out, return to the original.
The image I wish to change has an id 'photoimage'
Here's what I have, but it's not doing anything. Any ideas>
<a href="#" onmouseover="MM_changeProp('photoimage','','Width','10','IMG')">
photographs
</a>
Sorry here is the function
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
var obj = null; with (document){ if (getElementById)
obj = getElementById(objId); }
if (obj){
if (theValue == true || theValue == false)
eval("obj.style."+theProp+"="+theValue);
else eval("obj.style."+theProp+"='"+theValue+"'");
}
Any help much appreciated
Javascript:
function setWidth( elementId, width ) {
var element = getElementById(elementId);
element.style.width = width;
}
<a href="#"
onmouseover="setWidth('photoimage','200px')"
onmouseout="setWidth('photoimage', '100px')"> photographs </a>
I'm using the yui editor. I want to know if it possible to limit the editable height area.
ex: height:300px, so over 300px, the carret stop writting.
thanks
html:
<textarea id="countMe" cols="30" rows="5"></textarea>
<div class="theCount">Lines used: <span id="linesUsed">0</span><div>js:
$(document).ready(function(){
var lines = 10;
var linesUsed = $('#linesUsed');
$('#countMe').keydown(function(e) {
newLines = $(this).val().split("\n").length;
linesUsed.text(newLines);
if(e.keyCode == 13 && newLines >= lines) {
linesUsed.css('color', 'red');
return false;
}
else {
linesUsed.css('color', '');
}
});
});
You can do some code on your editor panel when user enter characters & calculate length and return false if limit exceeds.
This is a simple jQuery that can work on iExplorer, Firefox and Crome:
$('#my_frame').load(function () {
$(this).height($(this).contents().find("html").height()+20);
});
I add 20 pixels just to avoid any scroll bar, but you may try a lower bound.
I have a bootstrap progress bar that changes the current progress when the width attribute is changed. I want to change this width attribute and add 10% when the user toggles it on and decrease 10% when the user toggles it off.
Here is my code:
<div class="progress progress-danger progress-striped active">
<div class="bar" style="width:30%"></div>
</div>
<a id="updateit">Click to change the progress</a>
$(function(){
$("#updateit").toggle(function(){
$('.bar').css("width", + '10%');
});
});
Thanks in advance! :)
Here's a working fiddle
You can't add percentages (I believe), so I converted it using the width of.progress.
0.1 = 10%
$(function(){
$("#updateit").toggle(
function(){
$('.bar').css("width", '+=' + (0.1 * $('.progress').width()));
return false;
},
function(){
$('.bar').css("width", '-=' + (0.1 * $('.progress').width()));
return false;
});
});
The example on the other answer is ok but .bar will finally have a fixed value in pixels. You can try this if you still want to set the value in % (if, in case the parent changed its width, .bar would also change for % values):
$(function(){
var $bar = $(".bar");
$("#updateit").toggle(function(){
$bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) +10 + '%');
},
function(){
$bar.css("width", 100 * parseFloat($bar.css('width')) / parseFloat($bar.parent().css('width')) -10 + '%');
});
});
I noticed a couple things with your code.
First, make sure you have an href on your anchor. It's proper HTML even if it isn't used (add return false; to your JavaScript to make it not follow the link). My browser didn't recognize the link at all because it didn't have an href.
Next, you want users to click the link and then it toggles the width, right? You'll need the click() event then.
After that, here's what I came up with:
jQuery
var isOn = true;
$(function(){
$("#updateit").click(function(){
console.log(isOn);
if ( isOn ){
isOn = false;
$('.bar').css("width", '10%');
} else {
isOn = true;
$('.bar').css("width", '20%');
}
return false;
});
});
HTML
<div class="progress progress-danger progress-striped active">
<div class="bar"></div>
</div>
Click to change the progress
CSS (used to show the .bar for testing and to set the initial width)
.bar{
width:20%;
height:20px;
background:#600;
}
The jsFiddle