Jquery did not carry out!!!I don't know why
$(".other-edithion").click(function(){
var city = $(this).closest('#city');
if (city.is(":hidden"))city.fadeIn("slow");
else {city.fadeOut("slow");}
});
$("#city").mouseleave(function(){
$("#city").fadeOut("slow");
});
You do not need .closest() if you have id of an element
var city = $('#city');
As jQuery.closest()
Gets the first element that matches the selector, beginning at the
current element and progressing up through the DOM tree.
If #city is not up through dom tree, selector will fail to match elements.
And for mouse leave,
$('#city, .other-edithion #city').mouseleave(function(){
$(this).fadeOut('slow');
});
Related
I can query for elements for example that have a title property like;
$$('*[title]')
Lets say I want to find all elements with border / or border-radius applied, I tried some queries but they did not work.
$$('*[border-width]')
// returns nothing
$$('*[border-width="1px"]')
// returns nothings
this are applied on class level but I tried a few with inline styling, still does not work.
So how can you find elements with lets say, some specific border, padding, etc applied?
Working Demo: https://dojo.telerik.com/IlOVEsAS/7
function getElementByCSSProps(props){
var elements = $("*").filter(function(e){
var borderWidth = parseInt($(this).css(props));
return borderWidth > 0;
});
return elements;
}
The above function will return elements based on the passed parameter.
For e.g
getElementByCSSProps("border-width"); - This line will return all elements with border.
getElementByCSSProps("border-radius"); - This line will return all elements with border-radius.
Im struggling to define a Selector in TestCafe that clicks that YES button in the photo below
I can find and click the fist YEs button like
.click(Selector('.c-segmented-control__label').withExactText("Yes"))
However the second Yes button has the same classname so my Script cannot find it, how can I define the Selector for that one? I have tried child, nth and all but it doesnt find it.
Thanks
You can try something similar to below code
const yesButton = Selector('.c-segemented-control__label');
const count = await yesButton.count;
for(let i=0;i<count;i++){
let text = await yesButton.parent().parent().textContent //REACH UNTIL YOU GET PARENT
if(text.includes("YOURTEXT")){
await yesButton.nth(i).click()
}
}
OR You can take top to bottom approach, match you text and find child node by using .child or find
When I have an element in a flexbox parent element, is there a way to get the distance to the parent element left/top boundary?
I would like to use a CSS animation to distribute the objects from 0,0 to their actual positions like this
#keyframes distribute_elements {
from {
translateX(calc(distance_to_parent_left));
translateY(calc(distance_to_parent_top));
}
to {
/* nothing special */
}
}
CSS isn't an actual programming language. You can't gather data using CSS. Javascript and jQuery are your only two options for the task you're trying to accomplish. You could also take the two numbers and calculate it yourself...
Javascript:
var child = document.getElementById('insertChildElementID').offsetTop;
var parent = document.getElementById('insertParentElementID').offsetTop;
var distance = child - parent;`
JQuery:
var child = $('#insertChildElementID').position.top;
var parent = $('#insertParentElementID').position.top;
var distance = child - parent;
For a better jQyuery explanation go to this website.
For a better Javascript explanation go to this website.
I need help in dynamically "highlighting" cities on a world map, created using D3 and geoJSON.
I'm working on a spinning globe with 295 city-markers on it. Every 300 millisec, one of these cities need to "be highlighted", meaning 1) change its color and 2) increase its radius (and then stay that way). This gist shows the visual so far: gist example
Steps taken so far:
1) I started with "circle" elements in d3: highlighting was easily done by changing their class (and using CSS styles) and radius. However: the circles remained visible on the "backside" of the globe...
2) To solve the "no circles on back of earth" problem, this post showed me that JSON paths would help: http://bl.ocks.org/PatrickStotz/1f19b3e4cb848100ffd7.
I have now rewritten the code with these paths, and there is correct clipping of the markers on the back of the earth, but now I am stuck in dynamically accessing the radius and style of each city...
Question about changing the radius:
I understand that using path.pointRadius() I can alter the radius of the city markers. However, I want to do this dynamically (every 300msec), and only on a subselection of the markers each time. And that's where I get stuck...
Question about changing the style:
Also I would like to change the color, but assigning styles to the paths confuses me about how to access the JSON "Point" and "path" elements...
Code snippet showing my failed CSS styles attempt:
svg.append('g')
.selectAll("path")
.data(data,function(d,i){ return d.id })
.enter()
.append("path")
.datum(function(d) {
return {
type: "Point",
coordinates: [d.lon, d.lat],
class: "nohighlight" //MY ATTEMPT AT CHANGING CLASS... Not working...
}; })
.attr("class","city") //this class is assigned to the "correct" paths. Can I access them individually??
.attr("d", pathproj);
Code snippet showing the time loop in which the highlighting needs to happen:
//Highlighting the cities one by one:
var city_idx = 0; //data.id starts at 1
//Every 300 msec: highlight a new city:
var city_play = setInterval(function() {
city_idx++;
var filtered = data.filter(function(d) {
return d.id === city_idx;
});
// CHANGE CLASS?
// CHANGE RADIUS?
//Stop when all cities are highlighted
if(city_idx>=geo_data.length){
clearInterval(city_play) //terminates calls to update function within setInterval function.
};
}, 300); // end timer city play setInterval
Full code in block builder:
blockbuilder - globe and city markers
Please do let me know if I can clarify further!
We can do it this way:
To all path belonging to cities give a class
.selectAll("path")
.data(data,function(d,i){ return d.id })
.enter()
.append("path")
.classed("city", true) <--- so all cities point will have class city
Next in the timer block change radius and class dynamically like this:
var city_play = setInterval(function() {
city_idx++;
// Control the radius of ALL circles!
pathproj.pointRadius(function(d,i) {
//your biz logic
if (i < city_idx){
return 4
} else
return 2
});
// CHANGE CLASS?
// CHANGE RADIUS?
//select all elements with class city
d3.selectAll(".city").attr("class",
function(d, i){
if (i < city_idx){
return "city highlight"
} else
return "city"
}).attr("d", pathproj)
var len = d3.selectAll(".city").data().length;
console.log(city_idx, len)
//Stop when all cities are highlighted
if(city_idx>=len){
clearInterval(city_play) //terminates calls to update function within setInterval function.
};
}, 300);
working code here
I have a page that might one of the following:
<span id='size'>33</span>
Or
<span id='size'>
<b>33</b>
<strike>32</strike>
</span>
I would like to grab the value '33' on both cases, is there a CSS selector I can use?
I tried to use the following, #size with no b sibling or b which is a #size sibling:
document.querySelector('#size:not(>b), #size>b').innerText
But I keep getting an error- "Error: SYNTAX_ERR: DOM Exception 12"
According to w3 Spec only Simple Selectors are supported, the thing is that "greater-than sign" (U+003E, >)" is considered as part of the Simple Selectors definition.
You can't do it with a regular CSS selector, but you can do it in a few lines of JS:
var element = document.querySelector('#size');
var b = element.querySelector('b');
var text = b ? b.innerText : element.childNodes[0].nodeValue;
console.log(text);
So really you want significant text (ie other than whitespace, because in your second example there's probably tabs and returns between the span start tag and the b) of #size, or, if that doesn't exist, the significant text of its first element:
// Is text just whitespace?
function isWhitespace(text){
return text.replace(/\s+/,'').length === 0;
}
// Get the immediate text (ie not that of children) of element
function getImmediateText(element){
var text = '';
// Text and elements are all DOM nodes. We can grab the lot of immediate descendants and cycle through them.
for(var i = 0, l = element.childNodes.length, node; i < l, node = element.childNodes[i]; ++i){
// nodeType 3 is text
if(node.nodeType === 3){
text += node.nodeValue;
}
}
return text;
}
function getFirstTextNode(element){
var text = getImmediateText(element);
// If the text is empty, and there are children, try to get the first child's text (recursively)
if(isWhitespace(text) && element.children.length){
return getFirstTextNode(element.children[0])
}
// ...But if we've got no children at all, then we'll just return whatever we have.
else {
return text;
}
}
The day we'll have CSS Level 4 selectors and the parent selector you'll be able to use a simple selector but for now you can't do it directly.
You could iterate to find the first text node but here's a hacky solution :
var text = document.getElementById('size').innerHTML.split(/<.*?>/)[0];
To be used only if you have some idea of the content of your #size element.