We Keep Coding

Trying to rehide an HTML element through javascript

I have a code here that unhides a form element in the HTML when a button is pressed by setting the style attribute to ""
q = document.getElementById('delivery'); q.setAttribute('style',"")
Is it possible to undo this action when another button is pressed? (to re-hide the element)
I tried using q.setAttribute('style',"hide") but it doesn't work for some reason.
I'm reasonably new to javascript and programming in general, so any help would be appreciated

Setting style attribute to null will not hide the content. Use this instead to hide the div
document.getElementById('delivery').style.display = "none"
and to show
document.getElementById('delivery').style.display = "block"

To hide an element use
q = document.getElementById('delivery');
q.style.display='none';
Again to make it visible use
q = document.getElementById('delivery');
q.style.display='block';

use:
q.style.display = "none";
it will hide your button as you wished to do. and to show button again:
q.style.display = "block";

How to Display DIV Contents Based Upon Visibility of Another DIV Contents

I have the following DIV elements shown together on a page:
<div>This Link Shows Up First</div>
<div style="display:none; id:showUpAfterAwesomeButtonIsClicked;">This is the value that should show up after the link above is clicked.</div>
As you can see, the This Link Shows Up First text is displayed initially at page load. I have the following javascript which determines if the user has clicked the This Link Shows Up First text. The goal is to display the This is the value that should show up after the link above is clicked div if the awesome-button is hidden.
custom.valueAwesome = function() {
var awesomeButton = document.getElementById('awesome-button');
awesomeButton.style.visibility = 'hidden';
document.getElementById("showUpAfterAwesomeButtonIsClicked").style.display = '';
gadash.executeCommandQueue();
};
I have tested this script and it is successfully changing the state of the showUpAfterAwesomeButtonIsClicked link to hidden when the user click on the link. This leads me to believe that the connection that needs to be updated has to do with this line:
document.getElementById("showUpAfterAwesomeButtonIsClicked").style.display = '';
I have tried several variations of this line. Is there a better way to achieve this result? Thanks.

You cannot set an id attribute in CSS. It actually needs to be an attribute on the xml tag.
Change
<div style="display:none; id:showUpAfterAwesomeButtonIsClicked;">
to
<div id="showUpAfterAwesomeButtonIsClicked" style="display:none; ">
This will allow your document.getElementById to actually select it.

Displaying and highlighting a particular line in HTML

I am trying to implement a webpage which should have expected to have the following properties.
The HTML page contains many lines of text (thousands of lines), basically a log file.
Upon a desired action, line which is related to the action should be highlighted and shown . (exactly the way that would happen if you click on corresponding source button of a logged variable in chrome inspect element.)
This seems to be very basic but I couldn't figure out how! May be I am missing some literary terms.
Thank you.

You need to do a few things:
$("li").each(function(i, element) {
var li = $(element);
if (li.text() == "Orange") {
li.addClass("selected");
// Get position of selected element relative to top of document
var position = li.offset().top;
// Get the height of the window
var windowHeight = $(window).height();
// Scroll to and center the selected element in the viewport
$("body").scrollTop(position - (windowHeight/2));
}
});
See DEMO.

There are many ways to go about this. But is there any class tags in the logged source or is just one large text block?
If there are class or id tags on the html you can use javascript or jquery to do this.
document.getElementById('myText');
or in jquery
var element = $("#myText");
//example css changes
element.css("position","center");
element.css("color","red");
Then change the css style on those html elements.

Javascript check div style then if empty then add text to div

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();
}

visibility:collapse in javascript

I'm using Ultrawebgrid for my applcation:
I'm using a textarea for listing the errors in my application in the row template when the user clicks that particular row...
So I need to have
texarea when there are any errors..... otherwise when there are no errors i dont even
want the row_template to pop up..... I'm using IE6.
I'm checking if there are any errors using javascript.so I had to use the javascript event handler:: UltraWebGrid1_BeforeRowTemplateOpenHandler(gridName, rowId, templateId)
where in I write the statements given below:
document.getElementById("TextArea2").style.visibility="collapse"
inside the above event function
1) it's showing javascript error as
"Couldnot get the visibility property:Invalid Argument"
but the row template does not pop up....... only the error's coming....
2) Is there any code to block the row template when there are no errors.??
i mean no pop_up for no errors
What's the solution for this???

DISPLAY
Use display instead of visibility. This occupies no space in your document.
document.getElementById("TextArea2").style.display = 'none'; // Turn off
document.getElementById("TextArea2").style.display = 'inline'; // Turn on
VISIBILITY
document.getElementById("TextArea2").style.visibility="hidden"; // Turn off
document.getElementById("TextArea2").style.visibility="visible"; // Turn on
By using the above code textarea won't be visible, but there will be blank space in your document having the height and width of the textarea.
Also 'collapse' value is supported only in Internet Explorer 8

Try using:
document.getElementById("TextArea2").style.display = 'none';
and (to turn it back on again)
document.getElementById("TextArea2").style.display = 'block'; // or 'inline'

You want:
document.getElementById("TextArea2").style.visibility = "hidden";
"collapse" is not a valid value for the visibility property in IE6, as your error message indicates.
Alternatively as suggested by #tvanoffsen you could set the display property to "none". This has a slightly different effect - it will not take up any space if set to "display: none", whereas setting "visibility: hidden" still takes up space.

use visible and hidden for .style.visibility attribute not block and hidden.
it works.