Div type="hidden" + Not hided - javascript

In my code, I have a div tag with type="hidden". I just don't want to show the div. If needed, I will show it using JQuery Show().
But, using this, my div is not hidden from view.
Edit:
Now I hide the div by using
<div style="visibility:hidden">XYZ</div>
If I need to show it again, how can I?

try using style instead of type
<div style="display: none;">content</div>

type="hidden"
is used only for hidden input textbox.
If you want to hide you div use :
style="display:none"
Or with JQuery hide your div with hide().

Use display: none to prevent the div from being displayed and layout space won't be reserved.
Use visibility: hidden to simply hide it (like 0% opacity), but the necessary space will be reserved.

If the DIV isn't absolutely positioned, "display:none" can crash the overall structure of the document.
You may use:
<div style="visibility:hidden"></div>
This will make the DIV invisible.

By using style="display:none" , can hide the div

Define a id for that element
To hide element in javascript
document.getElementById('elementId').style.display= 'none' ;
To hide element in javascript
document.getElementById('elementId').style.display= 'block' ;

There is another way. Let's say you have:
<div hidden>content</div>
In the css:
div[hidden] {
display: none;
}

Related

Hide Aria label with css or javascript

I want to hide an arialabel without modifying it so just adding some code in css or javascript.
I know that you can put display:none for a class but is there any similar options for labels ?
Here's the aria label I want to hide. It doesn't have any ID
// aria-label="Sign-up" href="/EN-CA/contact-sign-up/" title="Sign-up">
Sign-up
//
You should be able to use display: none or visibility: hidden for this but if it isn't working for some reason, there's a way to hide aria-labels.
Use aria-hidden="true".
For example, <p aria-hidden="true">Hidden Aria Label</p>.

Twitter button not showing if initially hidden

I have a Twitter button on the page using the widget. The button renders as it should unless I place it into a hidden container.
I would like to place the share button into a hidden container that only shows when clicked. I have all of the functionality working, however the Twitter button will not show if placed into a hidden container.
You could use the CSS tag display: none then remove the tag when you click the button and add the tag back whenever you are done sharing to Twitter.
Something like this:
HTML
<input type="button" class="clickMe" value="Click Me" />
<img src="img/twitter.png" class="twitterPic hideMe" />
CSS
Assuming you have a separate style sheet.
.hideMe { display: none;}
JavaScript
$(".clickMe").on("click", function () {
$(".twitterPic").removeClass("hideMe");
});
Here are some links to the JQuery pages to add and remove classes:
https://api.jquery.com/removeClass/
https://api.jquery.com/addClass/
You could try the following:
place the container outside the viewport by setting its left or
right property to sth like 5000px .container {left:5000px;}
take off the display:none css
rule that's causing the problem. This way the twitter code should be
able to fire properly when the page loads
then set the container's position by using
the offset() function when the user clicks on the button. This way
the container will show where you want it to

Change Class or CSS "display" property of a DIV and show it smoothly

I have a hidden div and I need to to show it smoothly with different CSS styles, all styles may be changed easily except the "display". But this property is crucial, because when it start appearing, it will move other elements on the page differently. It will depends on the "display" property of the appearing element. Either next element will move right, or down.
I have 2 buttons - (show div as block) and (show div as inline block) and it should work, but it is not.
jsfiddle example
Here is another jsfiddle, showing how to change the display property on visible div. I need to change it while the div is hidden and then show it with new display property smoothly with simple ".toggle(500);".
$("#f").hide();
$(".toggle_h").bind("click", function(){
$("#f").hide();
})
$(".toggle_b").bind("click", function(){
$("#f")
.removeClass('i')
.addClass('b')
.toggle(500);
return false;
})
$(".toggle_i").bind("click", function(){
$("#f")
.removeClass('b')
.addClass('i')
.toggle(500);
return false;
})
.b{
display:block;
background:red;
}
.i{
display:inline-block;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="b">block1 block</div>
<div id='f' >block2 flexible</div>
<div class="i">block3 inline</div>
<br>
show as block<br>
show as inline<br>
hide<br>
I think it is impossible.
But there is a way to bypass this bug.
Just wrap the content of the div into another div and toggle the content wrapper, while your original div will stay visible because on the visible div you can change the display option.
here is the jsfiddle
$(".toggle_b").bind("click", function(){
$("#w").hide();
$("#f")
.removeClass('i')
.addClass('b')
$("#w").toggle(500);
})
$(".toggle_i").bind("click", function(){
$("#w").hide();
$("#f")
.removeClass('b')
.addClass('i');
$("#w").toggle(500);
})
.b{
display:block;
background:red;
}
.i{
display:inline-block;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="b">block1 block</div>
<div id='f'> <div id='w' > block2 flexible</div> </div>
<div class="i">block3 inline</div>
<br>
show as block<br>
show as inline<br>
The alternative way I found would be changing not "display", but another CSS property to achieve similar effect, use "float: left;".
BUT floated elements can't have vertical-alignment inside them.
With no parameters, $("#f").hide(); will hide the element immediately with no animation. If you want to animate it, add a duration parameter, e.g.
$(".toggle_h").bind("click", function(){
$("#f").hide(500);
})
The display property cannot be transitioned. Using jQuery's show and hide methods are essentially the same as just saying display: block and display: none in CSS, which, as I just mentioned, can't be transitioned. However, a property like opacity or width CAN be transitioned with CSS. You'd want to toggle a class instead of using .show and .hide though, and let CSS do the transitioning.
If you're looking to simply fade in and out using jQuery, you could replace your .hide method with .fadeOut.
Note: I hope this is what you were referring to :)

How to revert to original CSS?

I have a div with a span inside (simplified).
<div class="divDash">
<span>XX</span>
</div>
Based on the below CSS, the span is initially hidden and shows only when you hover over the div.
.divDash {height:300px;width:300px;border:1px solid gray;}
.divDash span {display:none}
.divDash:hover span {display:inline}
Based on some user interaction, I need to hide the span using jQuery...
$('.divDash').children('span').hide();
And then, based on some other user interaction, I need to restore the original behaviour of the span. If I simply show the span again using $('.divDash').children('span').show(); then it is shown permanently and not just on hover.
How can I restore the original CSS behaviour so the span shows only on hover?
Instead of using show and hide, add/remove a specific CSS class that has the behavior you would want.
You can revert to the default behavior by setting display: ''
$('.divDash').children('span').css('display', '');
Demo: Fiddle

Vertically align div content, that substitutes tr element on mouseover (using jQuery)

I'm working on a html table where I show more information on a row using jQuery.
The following is an example of how I'm doing it:
http://jsfiddle.net/rMXAp/7/
The jQuery essentially fades the row in question, by setting the opacity to 0, and adds an overlay containing the following div:
<div id="divOverlay" style=""><p>This is the overlay div.</p><p id="info"></p></div>
The jQuery then sets the div text based on the "desc" attribute of the tr/row.
The problem I'm having lies in vertical alignment of the text shown (in a div) in place of the table row, when hovering over it.
Things I've tried.
"vertical-align:middle;" for the tr element, as well as the div.
"min-height: 10em;" for the div.
"position: absolute; top: 50%;" for the div.
I cannot set the div's "display" property to anything other than none, or else it would display below the table (see jsfiddle).
I'm aware there are many questions on vertical alignment, but given I'm showing a div using jQuery, and setting the html dynamically, would they be used the same way? Or how?
I've got the feeling I've completely missed something here...
Ahh.. verical aligning...
I think the best method is using the table-cell display.
The problem is that for display:table-cell; to work properly, the parent must have display:table;
So I'd suggest something like this:
HTML
<div id="divOverlay">
<div class="content" style="display:table-cell;vertical-align:middle;">
</div> <!-- the content div will hold the content -->
</div>
Javascript:
// inside onmouseover...
$divOverlay.css({
position: 'absolute',
display: 'table', //set parent's display to table
....
});
//set the html to the child content holder
$divOverlay.find(".content").html($(this).closest('tr').attr('desc'));
check out this jFiddle:
http://jsfiddle.net/SpacePineapple/4T42H/
I guess you don't have any problem by keeping content of "desc" data into a span.
Have took a span having line-height:normal and vertical-align:middle and added the line-height for div.
Edited your fiddle here
Please let me know if you want something else.
EDIT
If you don't want to change the content of "desc" then you can implement like this too.
$divOverlay.html("<span style='vertical-align:middle;display:inline-block;line-height:normal'>"+$(this).closest('tr').attr('desc')+"</span>");

Categories

Resources