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>");
Related
I am trying to get focus on a specific div on click of an anchor link.
Here is the code
Link
I am facing a problem that the view is rendered from different partial views like header footer etc.
The header contains the link to a particular div from another view and it has a sticky navbar. When I click the link on nav bar it does focus on the div. But some part of div hides behind the header navbar.
Which looks clumsy according to the UI perspective.
Here is the navbar code:
<nav><li>Link</li></nav>
The example code for page div could be something like
<div id="divname">Some Content</div>
Please give me a clue how can I get the div to show just beneath the sticky menu bar.
Try with giving some margin-top to the div you want to focus on clicking, so that, the navbar will not hide your div and then change your href from
href="somepage.html#divname"
to
href="#divname"
only. Always give unique ids or classes to the elements in HTML so that the machine will not get confused between them and treat two different elements the same way. Hope this will work for you. If not post a response for help.
There's plenty of questions like this one on StackOverflow. Try this one for example:
https://stackoverflow.com/a/59380086/1973005
You can add a pseudo-element (::before) to the linked element in CSS, using the following settings. This creates an invisible block above the linked element which again creates an offset for the linked element position, since the top of that pseudo-element will actually be the position of the link anchor.
.anchor_offset::before {
display: block;
content: ' ';
height: 10em; // Whatever height your navbar is
margin-top: -10em; // Whatever height your navbar is
width: 100%;
visibility: hidden;
}
<div id="divname" class="anchor_offset">Some Content</div>
I have a DIV element that initially has a height of 0 and opacity of o who's overflow is hidden, and it has some content in it.
<div style='height: 0px; opacity: 0px; display: none; overflow: hidden; border: 1px solid #000;' id='mydiv'>
Some Content<br><br>
Lots or more content
<br><br><br><br>
hello world and stuff
</div>
I am fading this DIV into view when you click a button, the code that fades it into view is inside a function and is the following:
function fadediv(){
mycontentheight=$('$mydiv')[0].scrollHeight;
$('$mydiv').
css('display','block').
animate({opaicty:1,height:mycontentheight},100);
}
But then I want to add or remove some content from the DIV, for example:
document.getElementById('mydiv').innerHTML += 'Some more content...';
When I add the new content or take some content away, the height of the div doesn't change, and I would expect this. It's been set with the jquery in the function above and I have the overflow set to hidden, so more content would be in the overflow of the element, this makes sense.
But I want to change the height of the div to be the height of the new content, and I can't figure out how to do this. I've tried the following and it doesn't work:
function addtodiv(){
document.getElementById('mydiv').innerHTML += 'Some more content...';
mycontentheight=$('$mydiv')[0].scrollHeight;
$('$mydiv').
animate({opaicty:1,height:mycontentheight},100);
}
the above function adds the new content to the div, fine, but it doesn't update the height of the div to the height of the new content.
am I doing something wrong? am i missing something?
thank you for your help!
You've got a few spelling mistakes, such as opaicty instead of opacity. You can find those and correct them yourself, since they are not relevant to the question. The main mistake you are making is that you are never updating the div size, which I did in updateSizing. You also need to select the specific div from the jQuery selector using [0] when using innerHTML, since it is not a jQuery method. Check out these changes on JSFiddle.
My situation is the following: I have page that shows an image but sometimes it's too small, so I need to get the it bigger. I used CSS Transform to do that and works fine.
The problem is that the parent DIV's size does not increase, and there is space in the page for it to do so!
Using overflow on the parent does not help me because it crops the image or add a scroll bar. I need it to grow.
So, I managed to replicate a little what I am talking about here: http://jsfiddle.net/viniciuspaiva/7jJXQ/
When you click in the "Zoom" button, I want the div to grow and the pager below to get down. But I also want the page to load as it is, with the pager on top. Hope it's clear.
As you can see, I use bootstrap on my page. And the zoom button just adds a class to the image:
javascript:var img = $('img.center'); img.addClass('zoom');
Thanks!
Try doing it the other way. Have the image fit to the div, and resize the div instead.
Add this style to the image (assuming .myimg is the class).
.myimg {
display: block;
width: 100%;
}
Try placing this inside of your current div at the end of it before you close your current div. It will force the div to expand to contents.
<div style="clear: both;"></div>
So your div opens, the contents inside, then add the code above, then close the div.
Here's an example of Joseph the Dreamer's implementation. Check it out here. It only relies on setting display: block; and width: 100%;.
I am trying to make a div that looks like the MS Windows Command Prompt.
The div is resizeable, and has two children: a title-bar div, and a content div.
I want the content div to get scrollbars when it is larger than the window div. I want the title-bar to always be visible and not scroll, and not to be on top of the scroll bars.
http://www.webdevout.net/test?0vL interactively demonstrates my problem. Click on the content text and new rows get added. When enough rows are added for scroll bars to appear, they do not.
The content div has overflow:auto set.
Setting max-height or height on the content to 100% does not work because 100% doesn't account for the title-bar height, so the scrollbars appear after some rows have gone off the bottom. Also, the scrollbars, when they appear, obscure the draggable thumb on the outer div, stopping it being resizeable :(
Just change your resizable window to the child 'content' <div>. that way you're resizing the child <div> and the parent <div> resizes automatically to hold its contents.
Also, not sure if it was intentional but you have <div id ="Content" class="Content"> in your html and .Frame>.Contents { in your CSS (note the word content has an 's' in the CSS).
I believe this is what you're looking for:
http://www.webdevout.net/test?0wE
Add the following CSS:
.Content {
overflow: auto;
height: inherit;
}
Here you go: http://www.webdevout.net/test?0v-
Cheers ;)
I assume your HTML tree looks like:
Dialog
Title bar
Content
To make the Content scrollable, use the overflow CSS property
.content {
overflow: auto;
height: inherit;
}
Add the CSS property
overflow:auto;
Just add this to your CSS
overflow: auto;
I have a set of divs like so:
<div id="textArea">
<div id="text"></div>
</div>
CSS properties:
#textArea {
height: auto !important;
min-height: 2em;
overflow: hidden;
}
#text{
display: none;
}
I'm filling in the div with the id of "text" with error messages coming back from a POST request using jQuery. The size of the data coming back is not static, but my problem is that the div is not adjusting.
I am basically trying to mimic the Ruby on Rails default flash message that will push divs further down the page with a dynamically adjusted div.
I think you are simply doing too much - A div should automatically expand to fit the text content inside it, unless you have a specific rule saying otherwise. Do you have a rule that specifies a height for all divs? Is that why you have the height: auto !important here? Are you using a reset stylesheet? Something external to these rules is affecting your divs.
Hope that this points you the right way.
Div's should update height and width automatically unless otherwise told to. What is your jQuery code to update the div? What are you using to reveal the div to the browser (since it's currently set to display:none)? Have you tried using firebug to inspect the elements?