Suppose I have the following html:
<div style="width:200px;height:200px;overflow:scroll">
...
</div>
If the stuff in this div ends up overflowing, the most popular way to change the scrolling position of this item is to use jQuery.scrollTop(). However, I have a situation where I would like to set the initial scroll position of the div using the source HTML. Is there a way of doing this? All examples I see online for doing this end up using javascript.
One way I tried is to write a scrollTop property on the element, like so:
<div scrollTop=20 style="width:200px;height:200px;overflow:scroll">
...
</div>
However, this does not work. Surely, there must be a way to set the initial scrolling position of an overflowing item via HTML/CSS...
Here is a full version of this code that illustrates that it doesn't work- The vertical scrollbar remains at "0": http://jsfiddle.net/gueBZ/1/
Can anyone help me to make it work? Thanks so much for any pointers!
<div style="width:200px;height:200px;overflow:scroll">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="hello">autoscroll here</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
then open the page as
page.html#hello
this is the only thing you can do, with HTML only
Related
the application I write consists of many routes with transition animations between routes. It looks like:
<section class="a animated bounceUp">...</section>
<section class="b">...</section>
When I change route it will show animation and render new content - pretty simple behavior.
Today I created a new section and I need to put inside fixed filters pinned to the viewport. It should look like:
<section class="a">...</section>
<section class="b">...</section>
<section class="c animated bounceDown">
<div class="fixed-filters">...</div>
<div>...</div>
</section>
And here I met my problem. I added fixed position to div, but it doesn't work. The element hasn't fixed position.
Of course I made research about that and I found articles like:
'transform3d' not working with position: fixed children
and
https://www.achrafkassioui.com/blog/position-fixed-and-CSS-transforms/
Which says that I can't do that, because:
'transform' creates a new local coordinate system:
In the HTML namespace, any value other than none for the transform
results in the creation of both a stacking context and a containing
block. The object acts as a containing block for fixed positioned
descendants.
Is that over? Or maybe is there any solution how to do that?
I will be grateful for your help in solving this problem or finding a good workaround that anyone could use.
Because of some personal needs I need to switch the position of the footer with the paginator for my PrimeFaces DataTable:
Current:
How it should be:
Is it possible to do this without CSS? Is there a way to change the position programmatically? I think if this is possible it would be the best way to do this.
You may have to edit the CSS because if the position is relative for example this won't necessarily work. However simply arranging the position in HTML will change the order if the elements are at the default CSS values.
<div class="footer">Test</div>
<div class="pagination">1</div>
instead of:
<div class="pagination">1</div>
<div class="footer">Test</div>
Is it possible to prevent the effect of ng-show on a specific child element.
Lets say I have the following html.
<div ng-show="showParent" class="parent">
<div class="childOne"></div> <!-- don't hide this -->
<div class="childTwo"></div>
</div>
Now what I would like to achieve is hiding everything except childOne. Actually hiding a parent, but one or some of its children?
No, you can't. The HTML standard prevents that. All children get hidden when the parent gets hidden, and AngularJS just adds things to HTML, it doesn't change it.
However, AngularJS allows one variable to control multiple elements, and can probably help us get the same affects you want. So let's go back to what you are really trying to accomplish. To do this, we're going to need some more details that you took out in this question to make the question smaller (and thank you for that). What about just hiding childTwo is not working for you? Are there other things in parent you need to hide? We can put those in seperate elements (div or span or something) and hide those with the same variable as we hide ChildTwo. Does parent have some formatting (say, a border or something) you need to hide? We can change what classes are on parent based on the same variable we use to hide the other elements to something that removes the border and any other styling, effectively making it not visible, although still technically present in the DOM.
ngShow relies on a CSS class (.ng-hide). You may be able to override that class with your own more specific selector for just the divs you want excluded from the directive.
<div class="parent" ng-show="showParent">
<div class="childOne nghide-override"></div>
<div class="childTwo"></div>
</div>
Source: https://docs.angularjs.org/api/ng/directive/ngShow
(I'm unable to test this right now, but I'll mock something up shortly and edit/remove this if it doesn't work.)
You could also just split the children out into divs and hide the second div:
<div class="parent">
<div class="shown children">
<div class="childOne"></div>
</div>
<div class="hidden children" ng-show="showParent">
<div class="childTwo"></div>
</div>
</div>
Use Jquery unwrap.
Include jquery in your application:
bower install jquery --save
Set on ready unwrap to specified div:
<script type="text/javascript">
$(document).ready(function() {
$(".childOne").unwrap();
});
</script>
I've got some HTML:
<div id="thing">
<div id="contentheader">
<h3>Header</h3>
</div>
<div id="contentcontainer">
<div id="image">
<img alt="balt" src="imagesrc">
</div>
<div id="body">
<p>hegl gegl</p>
</div>
</div>
</div>
I need to push the h3 in 'contentheader' down alongside the image in 'contentcontainer' while having the body text sit alongside it. Everything is of variable width save the image.
Perhaps an image will demonstrate better:
As you can see, grey corresponds with 'thing', green with 'contentcontainer' and blue with 'contentheader'.
Editing the HTML would be a major hassle. I also can't make anything other than the image fixed-width. Is it possible to do it with just CSS? (It'd be awesome to be able to do it with floats and stuff but I don't know if it's doable)
I don't think you're going to find a perfect solution with CSS. You could use positioning but you would probably run into issues if you had a long title that ran more than one line.
If you're open to using javascript the following non-framework snippet would work.
// Add the header inside the container div just before the body
containerDiv = document.getElementById('contentcontainer');
headerDiv = document.getElementById('contentheader');
bodyDiv = document.getElementById('body');
containerDiv.insertBefore(headerDiv, bodyDiv);
You could recreate this code as a neater, one-liner using jQuery or another javascript framework.
Sure, heres the Css for a rudimentary setup:
http://jsfiddle.net/Nkapr/
Ask if you have any questions.
The problem here is the HTML structure, it's not been written really with your goal in mind (which is a bummer!)
If all you're after is pushing the H3 container 'contentheader' down in line with the rest of the stuff inside 'contentcontainer' you could set a negative top margin on 'contentcontainer' to pull it upwards, and then add a positive top margin to the elements in 'contentcontainer' which need to go down (in this case 'image') giving the impression that the h3 section actually sits in with the rest of the content. It's a bit of a hack but it might do the trick if you can't alter the HTML.
Thirtydot's answewr in the comments section solved my issue.
My website uses 2 columns, but the only way I've been able to get the columns height to match is to use a fixed height, but this presents a "scrollbar in a scrollbar" issue where the content column has to have overflow: auto; for all the content to be seen, but if the user's browser doesn't make the entire page visible at once, both the page and the content column have scrollbars.
What I would like to do is match the sidebar columns height to that of the content column.
I was thinking of setting some javascript on page load to do it, but I can't help thinking theres a better way.
The site in question is http://www.pcbuddies.co.za (for reference).
Any suggestions would be greatly appreciated.
Thanks in advance!
EDIT 1
After applying the JQuery solution below, I'm happy with the result (mostly).
Where I do have a problem is when the first section (sidebar) of every page (navbar) is smaller than another section see http://www.pcbuddies.co.za/Services/Default.aspx.
In this situation, the content is overflowing past the site's footer.
I wrote out a solution but I was paraphrasing a better example at this site here, which I find works very well. It uses a trick to create the equal height columns but works very well - without any javascript.
Here's an example of it in action: example
The other solutions look a bit too complicated to me. How about this:
Set both of your columns to transparent background and make a container for both of them with the desired background as alpha-transparent png.
Maybe not the "cleanest" solution, but definitely a simple one. Looking at the website you linked, that's what I'd go with.
I always catch grief for suggesting this, but I've found the best, most dependable way of doing this is to utilize Javascript (in this case, jQuery) to make all of the columns the same height as the tallest column. See my live example.
Live Demo http://jsfiddle.net/T9VUc/1/
If you want to do this on the page load, try this. Keep in mind, this procedure uses jQuery, so you will need to include that in your page
var tallest=0;
$(document).ready(function() {
$('.col').each(function(){
if($(this).height() > tallest)
tallest = $(this).height();
});
$('.col').css('height', tallest + 'px');
});
Live Demo on Page Load http://jsfiddle.net/T9VUc/2/
UPDATE
Based on the URL you gave me, I suggest adding <div style='clear:both'></div> to the end of your 2nd div like this ...
<div id="Side" class="col">
...
</div>
<div class="content col">
...
<div id="network" style="display: none;">
...
</div>
<div style='clear:both'></div>
</div>