Hi Have looked for a couple of solution but am stuggling as JS is not my speciality!
Currently, I have a div that is empty and hidden (produced but a BigCommerce generated page). It's an empty div but has a class and is hidden via "Style display: none".
What I want to try and do is:
Check if the named div has the style of display none.
If above is true then check to see if the div contains nothing (empty string although would need to check as could be some whitespace)
If the above two are true, add some simple text inside the div and change the style to display (or remove the display none.)
The display: none style in the div is inline.
thanks in advance if anyone can help.
Well seeing as you haven't provided any code I'll make some assumptions (you're not using jQuery, the style is inline) but you want something like this...
<div id="myDiv" style="display:none"></div>
<script>
var theDiv = document.getElementById("myDiv");
if(theDiv.style.display == "none" && theDiv.innerHTML.length == 0){
theDiv.innerHTML = "Some sample content";
theDiv.style.display="inline";
}
</script>
In future it's best to add what you already have produced, otherwise you should rephrase your question "can someone please do this for me".
If you are familiar with jQuery. Add div an ID 'myDiv' and use following:
var contents = $('#myDiv').text();
contents =$.trim(contents);
if($('#myDiv').is(":hidden") && contents == ''){
$('#myDiv').html('Here are new contents').show();
}
Related
I'm making automation script in python using selenium so i want to visible textarea box because i want to put it into some arguments and i'm using this code:
element = driver.find_element_by_id('g-recaptcha-response')
driver.execute_script("arguments[0].style.display = '';", element)
driver.execute_script("arguments[0].style.margin = '100px 200px';", element)
but above code is not working for me as you can see here:
Could you please tell me how I can show textarea box? Link to the page.
arguments[0].style.display = 'block';
arguments[0].parentNode.parentNode.style.display = "block";
The problem is that setting style.display to an empty string is interpreted as setting the display to "none" and that makes the element invisible. The textarea also sits in a parent which sits in a parent with the styling "display: none" so to solve that just go to the parent of the parent and set its display to "block".
I am trying to implement a certain functionality on a website, and I need to check for anything written in-between <ul></ul> tags. And when there isn't any, text should be appended between the tags
So far I've tried doing conditional statements but it seems the statements are just being overlooked when I debugged them.
Here is the code that I have tried:
if($('ul.list-group').length > 0 === false) {
$('ul.list-group').append('Drag a page inside or below the box to create a child page');
}
Any help is greatly appreciated.
Try to collect the text content of the target element and check its length,
var elem = $('ul.list-group');
if(!elem.text().length) {
elem.text('Drag a page inside or below the box to create a child page');
}
As epascarello pointed out, An UL cannot have a text node as its immediate child. Not exactly, It can. But it is considered as an invalid html. The better approach would be,
var elem = $('ul.list-group');
if(!$("li", elem).length) {
elem.html('<li>Drag a page inside or below the box to create a child page</li>');
}
To find all ul.list-group elements that are empty - they don't have child elements or text:
$('ul.list-group:empty').text('Drag a page inside or below the box to create a child page');
https://api.jquery.com/empty-selector/
How to remove or hide only visible "text & link" from website using java script. For example I want to hide "some text " & "Link text here" from bellows code without remove this full code
<p style="text-align:center;">some text Link text here</p>
Please help me
Assuming you mean that you want to hide the <p> tag, you need this piece of JavaScript:
document.getElementsByTagName('p')[0].style.display = 'none';
That will hide the first <p> tag on your page. I suggest adding a class or id to the tags you want to hide though, so that you can select them more accurately.
If you want to clear all contents of your <p> tag, you can do this:
document.getElementsByTagName('p')[0].innerHTML = '';
That will simply remove all of the tag's contents. If you want to remove the whole tag itself (so that it doesn't leave the empty <p> tag sitting around) you can change the .innerHTML part to .outerHTML.
There are several things to consider: you may want the test to return, so we cannot just lose it. You may want to preserve event bindings on nested elements, so we cannot simply destroy those. In the end, I would suggest CSS being the most appropriate route to take.
var paragraph = document.querySelector("p");
paragraph.style.overflow = "hidden";
paragraph.style.textIndent = "-1000%";
You could, alternatively, create a custom class meant to set overflow and text-indent, and toggle that class with JavaScript (jQuery?) instead:
paragraph.classList.toggle( "offsetChildren" );
// jQuery: $(paragraph).toggleClass( "offsetChildren" );
Fiddle: http://jsfiddle.net/6UZ82/
Try this code
function Hide(ptext,aText){
var p = document.getElementsByTagName('p');
var a = document.getElementsByTagName('a');
for(var i=0;i<a.length;i++){
if(a[i].innerHTML==aText){
a[i].setAttribute("style","display:none") ;
}
}
for(var i=0;i<p.length;i++){
var str = p[i].innerHTML;
var rp = str.replace(ptext,'<span style="display:none">'+ptext+'</span>');
p[i].innerHTML = rp;
}
}
Hide('some text','Link text here');
Also you can show back using the reverse logic. i have commented out the show function in fiddle. you can uncomment it and click run to see it in action
Demo here
I'm trying to quickly fix something that is broken on a wordpress site. The problem is that someone else created the soup sandwhich and I'm stuck fixing it. I have an element that shows up in two different sections on the page. The first is a post-status form, the second time it shows up is in a comment-add section that repeats indefinitely on the page. The block of code works on the comments, but doesn't work on the status form, so I wan't to simply hide it until I figure out how to A) find where the heck the code is being generated, B) fix the issue.
The element has a style that is being dynamically applied (assuming javascript) at load of the element. It starts off hidden, then something somewhere down the pipe shows it.
Here is what my code looks like, first the element that works:
<div class="activity-comments">
<div class="audio_controls fresh" style>
....
</div>
</div>
The block that is broken:
<div id="whats-new-post-in-box">
<div class="audio_controls fresh" style="display: block;">
...
</div>
<div>
So in that first block the code sits without a style in it, which for some odd reason whoever wrote it left the style tag in anyway without any style to apply (completely stupid and malformed code). But in the second element, the one that's broke, it has a display:block dynamically written in at run time. I'm trying to figure out how to force it to display:none. I've tried js, but I'm somehow not calling it correctly (not sure how to call nested elements, I only want the audio_controls within that nested ID but not the other class).
Anyone have any ideas for me?
You can do it with CSS:
#whats-new-post-in-box > .audio_controls.fresh {
display: none !important;
}
An !important style rule can override an inline style rule (unless the inline style rule is also !important).
Alternately, with JavaScript on any modern browser:
var list = document.querySelectorAll("#whats-new-post-in-box .audio_controls.fresh");
var n;
for (n = 0; n < list.length; ++n) {
list[n].style.display = "none";
}
For older browsers it's more of a pain:
var elm = document.getElementById("whats-new-post-in-box").firstChild;
while (elm) {
if (elm.className &&
elm.className.match(/\baudio_controls\b/) &&
elm.className.match(/\bfresh\b/)) {
elm.style.display = "none";
}
elm = elm.nextSibling;
}
Obviously, for the two JS solutions, you need to run that code after whatever it is that's setting the style in the first place...
Pretty sure you can write a CSS rule for #whats-new-post-in-box .audio_controls and mark it with !important.
Another way to hide the inner div, and this requires jQuery:
$('div.audio_controls', $('#whats-new-post-in-box')).hide();
This code select all div elements with an audio_controls class that are inside the element with an id of whats-new-post-in-box, and hides them.
I need help to find a hidden button in Javascript. I am using ASP.NET 4.
I can find a "visible = True" but when i try to find a hidden element it says object not found
<script type="text/javascript">
function ShowAge()
{
var elem = document.getElementById('MainContent_chbFilter');
if (elem != null)
alert("Found 1");
else
alert("Not Found 1");
var elemc = document.getElementById('MainContent_txtMSISDN');
if (elemc != null)
alert("Found 4");
else
alert("Not Found 4");
}
</script>
I am using asp:content
Please help
In ASP.NET when you hide an element it is not rendered in the HTML at all. This is in contrast to using the hidden property in CSS, where the element is still there, just visually hidden. If you want to "hide" it server-side, but still make it available in the DOM, you should add style="display:none;" in your ASPX.
If an element has been hidden serverside (I'm assuming this is what you've done), this means that it won't get rendered onto the page, which is why Javascript won't find it in the DOM.
What you want is to assign it a CSS class (.hidden, for example) with display:none. You can then revert it back to display:block through Javascript.
If you're setting Visible=False to an element in the server-side code than it won't render to the page, so the JavaScript won't be able to access it.