I have the following div container:
<div class="col-md-8 grid-wrapper-div chatHistory">
...
</div>
With the CSS:
.chat .chatHistory {
overflow-y:scroll;
height: 550px;
}
and if the page is loaded than the scroll bar should be at bottom -> I use AngularJS.
Is there any possibility to scroll down with css or with AngularJS
[EDIT]
I have tried it like this but chatHistoryContainer.scrollHeight is undefined. Does anyone know why?
Use ngInit, which runs upon rendering content and $timeout to postpone scrolling to the next digest cycle in order to wait for the content rendered completely.
<div id="chat_history" class="col-md-8 grid-wrapper-div chatHistory" ng-init="scrollToBottom()">
...
</div>
myApp
.controller(function($scope, $timeout){
$scope.scrollToBottom = function() {
$timeout(function(){
var objDiv = document.getElementById("chat_history");
objDiv.scrollTop = objDiv.scrollHeight;
});
};
});
Related
I have this code to make my sidebar sticked when scrolling down. However, this let the sidebar scroll to the bottom of the page, which overlaps other elements on the site.
$(function () {
var counter = 0;
var s = $("#counter");
var pos = s.position();
$(window).scroll(function () {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
<div id="sidebar">
<div id="counter">
* php dynamic_sidebar( 'Sidebar' ); *
<div class="clear"></div>
</div>
</div>
I have searched for an hour now without finding any solution. I want the sidebar to stop being sticked when the scroll reach the div footer.
You will have to use css to tackle this issue.
Just add padding from bottom equal to the height of the element at the bottom.
Suppose if you have a footer with height 50px.Then add padding-bottom:50px to the sidebar and give footer some z-index also like z-index:9 or z-index:99.
Let me know if this helps.
Thanks
From what I can tell, although jQuery-Mobile-powered pages can contain divs with overflow set to scroll or auto, and these divs can be scrolled with the one-screen bar or the mouse wheel, they cannot be scrolled using the arrow keys, page-up/page-down, or home/end.
Instead, the official "page" div (with data-role="page") absorbs all this input. Perhaps other divs can't even acquire focus, I'm not sure.
Is there any way around this?
EDIT: JSfiddle of simple example: https://jsfiddle.net/qogz0shx/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js">
</script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/>
<style>
#outer {
overflow:scroll;
height: 50vh;
width: 50vw;
}
#inner {
height: 500vh;
width: 500vw;
}
</style>
<div data-role="page">
<div id="outer">
<div id="inner"></div>
</div>
</div>
Same example without the external files: https://jsfiddle.net/xr0hjjjc/
<style>
#outer {
overflow:scroll;
height: 50vh;
width: 50vw;
}
#inner {
height: 500vh;
width: 500vw;
}
</style>
<div data-role="page">
<div id="outer">
<div id="inner"></div>
</div>
</div>
In Chrome, if you click on the div in the second example and press the arrow keys, you should see the scroll bars move. If you do the same with the first one, they won't.
You're right, internal <div>s cannot be scrolled using keyboard. My approach to this limitation is simple:
create new handler for up/down/PageUp/PageDown keys
when those keys are pressed, get element under mouse
if the element contains the keyboardScroll class, scroll it accordingly
So, mouse position sets which element has to be scrolled.
Updated JSFiddle (click to focus the "run" quadrant before scrolling)
JavaScript
var currentMousePos = { x: -1, y: -1 };
$(document).on("pageinit", "#page", function(event)
{
$(document).mousemove(function(event)
{
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
});
// keyboard handler
$(document).on("keydown", function(e)
{
// get element under mouse
var element = document.elementFromPoint(currentMousePos.x, currentMousePos.y);
// search for scrollable element in parents
while (!$(element).hasClass("keyboardScroll") && $(element).parents().length !== 0)
element = element.parentElement;
if (!$(element).hasClass("keyboardScroll"))
return; // no scrollable element found
// set scroll "speed"
var delta = 10;
if (e.keyCode === 38) // up
delta *= -1;
else if (e.keyCode === 40) // down
delta *= 1;
else if (e.keyCode === 33) // pageup
delta *= -10;
else if (e.keyCode === 34) // pagedown
delta *= 10;
else
return;
// scroll element
$(element).scrollTop($(element).scrollTop() + delta);
// stop event from propagating to jQuery Mobile handlers
e.preventDefault();
e.stopPropagation();
});
});
On revisiting this with new searches ("focus" is a better keyword here than "scroll"), I discovered a much simpler solution.
Just give the div in question a tabindex attribute, to make it focus-able. Make the value -1 so it won't interfere with the tabindex of anything else. (This means that if the user keeps pressing tab, the div in question will never be focused. Change the index to a positive number if you want it to be focus-able that way).
<div id="outer" tabindex="-1"> </div>
<!-- Containing element with overflow:scroll or whatever -->
and that's it. Once the div is clicked it should override whatever jQuery Mobile does to prohibit focus. New JSFiddle here.
Right now when i summon a popup it appears over the header and then slides down beneath it. Check out what it looks like now.
I would like the popup to slide down from underneath the header. I've tried setting the z index of the popup lower than the header but it didnt do anything. Apparently you need to explicitly set the positioning of elements to use z index but when I did that it totally messed up the UI.
Here's the relevant code
HTML:
<div data-role="popup" id="alertPopup" class="ui-content" data-shadow="false" data-transition="slidedown" data-dismissible="false" data-corners="false" data-position-to="origin">
<p id="popupText"></p>
</div>
JS:
var horizontal = Math.floor(window.innerWidth/2);
var vertical = 80;
var popupOptions = {
x: horizontal,
y: vertical
};
if (status == google.maps.DirectionsStatus.ZERO_RESULTS) {
$("#popupText").text("No transit options could be found.");//using popups instead of alerts because these will go away by themselves instead of forcing user to tap.
$("#alertPopup").popup("open",popupOptions);
setTimeout(function() {
$("#alertPopup").popup("close");
}, 3000);
}
http://jsfiddle.net/guanzo/gvsqenvf/
I think that using a jQM popup widget will not work for this because jQM creates a transparent overlay that covers the page, then a popup container above the overlay and then it places the popup within the container. So there is no way to have the popup be under the header.
Instead, you could use an absolutely positioned DIV for your popup and use the jQuery slideToggle() method to display it.
Add the notification div to the content:
<div data-role="content" id="content">
<div id="notify" class="ui-body-inherit ui-content">
<p id="notifyText">hello</p>
</div>
I am Content
</div>
Setup the CSS to absolutely position the div and hide it until needed:
#notify {
border-width: 1px;
border-style: solid;
display: none;
position: absolute;
}
#notify p {
margin: 0;
}
In the script, set the text, calculate position and show it with slide toggle (I added a timeout on the show just so the fiddle can finish drawing the page before the notification is shown).
$("#notifyText").text("No transit options could be found.");
var $notify = $("#notify");
var vertical = $(".ui-header").outerHeight() -1; //height of header
var w = $notify.width();
var left = (Math.floor((window.innerWidth - w) / 2));
$notify.css({ left: w + "px", top: vertical + "px"});
setTimeout(function() {
$notify.slideToggle(500); //delay showing for the fiddle
}, 500);
setTimeout(function() {
$notify.slideToggle(500);
}, 5000);
Your updated FIDDLE
How do I make an image hidden after clicking anywhere inside a div and make it stay hidden until page refresh?
<style>
#containter:active img {display: none}
</style>
<div id="containter">
<img src="image.png">
</div>
This works but as soon as you move the mouse outside of the div, the image reappears. I know it supposed to do that, but how to make it remain hidden?
A simple way of doing this is to wrap the item you want to hide on click in <label> and use a rule like
:checked + img {
display: none;
}
http://jsfiddle.net/kGDQq/1/
Here's an unobtrusive example for JS:
html:
<div id="tempDiv">click me</div>
js:
document.getElementById("tempDiv").onclick = function(e) {
e.target.style.visibility = 'hidden';
}
and a jsfiddle for it
In order to be semantically correct I suggest you use a JavaScript solution and don't try to do it with CSS/HTML hacks. The below method attaches a new click handler to all elements with the class .hide-on-click, simply add the class to any element you want to hide on click.
jsFiddle
HTML
<div class="hide-on-click">Test 1</div>
<div class="hide-on-click">Test 2</div>
<div class="hide-on-click">Test 3</div>
<div class="hide-on-click">Test 4</div>
JS
(function () {
var elements = document.getElementsByClassName('hide-on-click');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function () {
this.style.display = 'none';
});
}
})();
If you want the the space that the image took up not to collapse then you should use the visibility property.
this.style.visibility = 'hidden';
OK, what I need is fairly simple, though it's one of those things that I've never managed to get my head around when using CSS. So, here I am...
I'm using a custom template, built around Twitter Bootstrap.
This template features a section (declared as span6 row), containing small blocks (declared as span3). In the end, the sub-blocks form rows (2 blocks per row).
Here's a visual example :
The result is ok, though I'd still need one thing :
HOW do I make sure that 2 adjacent blocks have the exact same height? (e.g. The 1st block - "Some title here" - and the 2nd block - "Awesome work" - white rectangles being of the exact same height, no matter what the contents are... (much like the 2 last blocks)).
Any ideas?
P.S.
Please let me know, in case you need to know anything else about the "inner" structure.
I'm pretty sure it may have to do with "clear" fixes, etc - but to be honest I've never actually understood the... magic behind the trick... :(
Try the following:
1) Assigning parent div with "display:table" and child div's with "display:table-cell" like:
CSS:
.parent-div{
border: 1px solid grey;
display: table;
float: none;
}
.child div{
border: 1px solid grey;
min-height: 100%;
height: 100%;
display: table-cell;
float: none;
}
HTML:
<div class="span6 parent-div">
<div class="row">
<div class="span3 child-div">
......
</div>
<div class="span3 child-div">
......
</div>
</div>
2) You can also use "EqualHeights jQuery Plugin":
Include it your head by adding
<script language="javascript" type="text/javascript" src="jquery.equalheights.js"></script>
And call the function on your .parent-div as:
$('.parent-div').equalHeights();
For detailed usage and limitations, whether it is suitable for your website first read this and proceed.
<!-- ------------------------------------------
Bootstrap 2 : Markup
Credit : http://www.2scopedesign.co.uk/responsive-equal-height-columns-in-bootstrap/
------------------------------------------- -->
<div class="row">
<div class="span6">
<div class="content-box">
Content here
</div>
</div>
<div class="span6">
<div class="content-box">
Content here
</div>
</div>
</div>
<!-- ------------------------------------------
jQuery part
------------------------------------------- -->
<script>
//equal height plugin
$.fn.max = function(selector) {
return Math.max.apply(null, this.map(function(index, el) {return selector.apply(el);}).get() );
}
$(window).load(function(){
equalHeight();
});
$(window).resize(function(){
$('.content-box').css('height', '');
equalHeight();
});
function equalHeight(){
if ( $( window ).width() > 768 ) {
$('.content-box').height(function () {
var maxHeight = $(this).closest('.row').find('.content-box').max( function () {
return $(this).height();
});
return maxHeight;
});
}
else {
$('.content-box').css('height', '');
}
}
</script>
Set a min-width. So in your css have:
#whatevertheboxitscalled { min-width:100px; }
Obviously it doesn't have to be 100px, but whatever size fits best.