I have a website and an element on it, build using JQuery. I've entered the element but it seems it's bottom falls below my taskbar, and the web page doesn't notice it or something so I can't scroll. How can I force the HTML page to be 'longer' so the user can scroll?
Add a height value into the body property of your css.
body{height:#;}
Make sure overflow isn't hidden.
You have an element with that set .cls-mobile-flash {overflow: hidden;}
Maybe start with that, but we really need to see your code. Maybe do a JSfiddle
How can I force the HTML page to be 'longer' so the user can scroll?
Just add <br/> at the bottom of your page like this :
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
PS. no need for the enclosing slash-brace at the end for html4, just use <br>
For your specific situation, you can check for 'overflow' and fixed height values.
In my case, I have a div with a GridView in it and I wanted this div to be aoutoresizable, depending on the size of the window.
$(window).resize(function () { $("#<%=divGV.ClientID%>").height(getH()); });
function getH() {
var windowH = $(window).height();
var topOfDiv = $("#<%=divGV.ClientID%>").offset().top;
var variableH = 40; //40 to maintain the window height in order to not have the scrollbar in the browser
var gvH = $("#cphMaster_gv").height() + variableH;
var h = windowH - topOfDiv - variableH;
if (h > gvH) { return gvH; }
else { return h; }
}
divGV is div, cphMaster_gv is my GridView.
Hope this gives you an idea...
Related
I have a div tag which contains other elements like form, button etc. div is stretching to entire width of the screen. So I am told that display="inline-block" would fix the issue. But I am also using display attribute to display the div based on some condition
<div display={some condition}...>
So how to handle this situation?
I hope if this helps you
HTML
<div id="selected">
Ahmed
</div>
Javascript
if(your condation){
const div = document.getElementById('selected').style.display ="inline-block"
}else if(your condation){
//code
}
.
.
.
else{
//code
}
Basically I have an input field and want to display a div containing a list below OR above it depending where there is more space. since in some cases this input field could be at the bottom of the page or maybe at the middle or top. So i thought of using the view port to identify if there is more space below or above the input field and then display the div accordingly. Trying to this purely with some CSS and html. any recommendations will be helpful.
My basic html structure :
<input/>
<div id="container">
<ul>
<li ngFor>
<span> field1 </span>
<span> field2 </span>
<span> field3 </span>
</li>
</ul>
</div>
It's hard to give a complete answer without knowing how your components are set up, but there are a couple of HTML features that might help you, depending on whether you want to choose based on space above/below within the viewport, or above/below within the parent component.
If you want to do it based on space within the viewport, you can use Element.getBoundingClientRect() to find distance between the input and the top/bottom of the viewport:
const element = document.querySelector('input');
const elementRect = element.getBoundingClientRect();
const spaceAbove = elementRect.top;
const spaceBelow = window.innerHeight - elementRect.bottom;
if (spaceBelow < spaceAbove) {
// logic to render with more space above input
} else {
// logic to render with more (or equal) space on bottom
}
<input />
If you want to do it based on space within the parent component, you can use Element.offsetTop and Element.offsetHeight to calculate space between the input and the top/bottom of its closest positioned ancestor:
const element = document.querySelector('input');
const spaceAbove = element.offsetTop
const spaceBelow = element.parentNode.offsetHeight - (element.offsetTop + element.offsetHeight)
if (spaceAbove > spaceBelow) {
// do something
} else {
// do something else
}
<div style="padding: 200px 0 100px 0; position:relative">
<input />
</div>
I am testing out the documentation here. The only difference is my searchBox is responsive and has 100% width.
<div id='searchBoxContainer'>
<input type='text' id='searchBox' style="width:100%"/>
</div>
On mobile the searchBoxContainer does not honor the width of the searchBox. The red overhang below expands my mobile app and doesn't feel good.
I have determined I can fix this by setting the as_container max-width equal to the width of the searchBox as it changes.
#as_container {
max-width: width of search box;
}
Is there a way to set the #as_container max-width dynamically as the searchBox width changes? I've fixed this with $(window).resize and a little javascript but I feel like there is CSS to handle this?
Here is what I came up with. It's really simple I would just prefer a CSS solution. In my case the searchBox is responsive to it's container, style="width:100%". On resize I match bings drop down container's max-width to the searchBox. The container's width can be set with #as_container.
// Our responsive fix for the autosuggest is to limit it's max width to the dropdown container. (Assuming our searchBox is responsive, we'll match widths)
function FixAutoSuggest() {
try {
var css = document.getElementById("autoSuggestFix");
// Create a CSS element for our fix if it hasn't been created already.
if (!css) {
css = document.createElement("style");
css.setAttribute("id", "autoSuggestFix");
css.type = "text/css";
document.body.appendChild(css);
}
// Set the appropriate width for our auto suggest container.
var searchBox = document.getElementById('searchBox')
if (searchBox != null) {
var bb = searchBox.getBoundingClientRect(), columnWidth = bb.right - bb.left;
// We set column width minimum to 150.
columnWidth = ((columnWidth > 150) ? columnWidth : 150);
css.innerHTML = "#as_container { max-width: " + columnWidth + "px }";
}
}
catch (err) {
alert('FixAutoSuggest' + err);
}
}
$(window).resize(function () {
FixAutoSuggest();
});
In my case the search box is not shown initially and I call FixAutoSuggest() when showing it. If you show it on load you could always fix then as well.
$(document).ready(function () {
FixAutoSuggest();
});
You'll notice in FixAutoSuggest() I put a minimum width of 150px on the bing drop down. That's just personal preference and you can remove that line if you want it to shrink to nothing. Hope this helps someone!
Can someone please guide me how to get an image full screen so that it stays in the centre both horizontal and vertical like the link provided.
http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
I'm only after the background bit and i need the image in a div apposed to in the css like in the example as i am using it for a slider in wordpress.
In order to make your LayerSlider display at 100% height and width, leave the "Slider height" attribute in "Slider Settings" blank, and then use a script like the following to set the height:
<script type="text/javascript">
function resize()
{
var heights = window.innerHeight;
document.getElementById("layerslider_1").style.height = heights + "px";
}
resize();
window.onresize = function() {
resize();
};
</script>
Insert the script into your footer.php file before the closing body tag. If your slider ID isn't number 1, then change "layerslider_1" to the correct ID.
you can add style to the div element
<div style="background: url(images/xyz.jpg) no-repeat center center fixed;">...</div>
I just took the css from your sample page and copy/pasted!
I'm not a web guy, so this might be something really simple I'm missing, but:
Consider the following page:
http://pastehtml.com/view/1bg9qno.html
Which is basically a list of <input>s, and each input has a helper <span> with text (that will change along with the input's value on keyUp).
So when the list is long enough (like in the above HTML page), if you tab thru the inputs, you will eventually get to the input on the bottom of the page, tab again, and the browser will scroll down to the next input.
In my case, the input has the helper text which is crucial to my app.
The problem is that when the user tabs down to the input that is not visible, the browser only brings that input into the view, and not his entire parent (<div class="item">) which contains the helper text. As a result, this helper text is not visible to the user while he enters stuff in the input.
How can one tell the browser to bring the entire parent into view when focusing the out-of-view input?
Is there any elegant solution?
BTW: This doesn't happen in Chrome, since Chrome always scrolls down a part-page, but it always happens in Firefox which always scrolls as little as possible to the input.
The HTML looks like this:
<body>
<div class="item">
<input type="text" value="text" />
<br />
<span>helper text</span>
</div>
<hr />
...
<hr />
<div class="item">
<input type="text" value="text" />
<br />
<span>helper text</span>
</div>
</body>
<html>
<head>
<script>
function scrollParentIntoView(elem){
setTimeout(function(){
var children = elem.parentNode.children;
var lastChild = children[children.length - 1];
lastChild.scrollIntoView();
elem.parentNode.scrollIntoView();
//elem.ScrollIntoView();
},1);
}
</script>
</head>
<body>
...
<div>
<input onfocus="scrollParentIntoView(this);" />
...
<p>end</p>
</div>
...
</body>
</html>
I've tested on FF and Chrome and seems to do the job - you can see the input and 'end' when each '...' is replaced with a dozen tags
Here is a solution using jQuery. It's based on the height of your item container.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".item input").focus(function() {
var parent = $(this).parent();
// Check if the bottom of the item container is below the viewport
if ($(parent).position().top + $(parent).height() > $(window).scrollTop() + $(window).height())
{
// Adjust the scroll position according to the height of the item container
$(window).scrollTop($(window).scrollTop() + $(parent).height());
}
});
});
</script>
Edit
Here is a demo for you: http://pastehtml.com/view/1bnv1xb.html
This Javascript works in FF 3.6, IE 8, Safari 4, and Chrome 3.1. It doesn't require JQuery, doesn't need setTimeouts, and can be condensed to about 8 lines:
//Collect the elements
var ALL = document.getElementsByTagName("INPUT");
for(x=0;x<ALL.length;x++) {
//Add relative position style to allow offset math
ALL.style.position = 'relative';
ALL[x].onfocus = function() {
//Find scroll offset distance
var temp = this.offsetParent.offsetTop +
this.offsetParent.offsetHeight -
document.documentElement.clientHeight;
//Detect webkit browser and apply scroll offset as appropriate
window.devicePixelRatio ?
document.body.scrollTop = temp :
document.documentElement.scrollTop = temp;
}
}
Of course, the obvious solution here is to put all the important content above the input element, but it's obvious that that won't do for whatever reason, so here's another solution:
Remember that tabindex can be used to allow any element to be focused. This means that we can simply drop a tabindex on the parent of the input elements to allow the entire parent to gain focus and scroll into view.
However, this also means that tab must be tapped twice to get the input element focused. You will also need to explicitly set tabindex on the input element to have them be the next in line to gain focus.
<ol id="input">
<li tabindex="3">
<input type="text" tabindex="5" />
<p>Helper Text</p>
</li>
<li tabindex="7">
<input type="text" tabindex="10" />
<p>Helper Text</p>
</li>
</ol>
You'll also want to give the parent elements a :focus style instead of the rather ugly dotted outline.
See: http://www.jsfiddle.net/F2fwy/2