I created a tooltip with CSS and I want to position the arrow just above the icon of each button. I tried using jQuery Mobile but it has not worked for me so the easiest way for me to accomplish this now is to position the tool tip manually :(
Also I was wondering if manually positioning the tooltip would change in anyway if I were to use this page on a mobile app with a different resolution or perhaps shrink the page size?
What I've tried it to use .offset() to get my tool tip class around the relative area of each button id.
var CS_x_pos = $("#CS").offset();
var CS_y_pos = $("#CS").offset();
var GH_x_pos = $("#GH").offset();
var GH_y_pos = $("#GH").offset();
//CS
$(".tooltip").css({
left: CS_x_pos,
top: CS_y_pos
});
//GH
$(".tooltip").css({
left: GH_x_pos,
top: GH_y_pos
});
When I try:
var CS_x_pos = $("#CS").offset().left;
var CS_y_pos = $("#CS").offset().top;
I get this:
I am not sure why the tool tip ends up on the bottom
Here is my jsfiddle:
http://jsfiddle.net/liondancer/rKPfe/
I thought .offset() would position the tooltips around the relative area but it is still pretty far =/
Could someone help me or guide me to manually positioning these tool tips? Much appreciated!
There are lots of plugin related to tooltip. like tipsy or jQuery ui and many more you can find on googling.
If you want it to do completely with css, the best approach is to wrap tooltip and trigger element. like
<div class="holder">
<div class = "tooltip">
<div class = "tooltip_body"> GH is OFF
<div class = "tooltip_arrow"></div>
</div>
</div>
<a class="holder" data-role="button" data-icon="plus"> GH</a>
</div>
Than you can give css of tooltip relative to your trigger element.
like bottom: 60px; right:0;
Note : Give display:inline-block and position:relative; on holder so it not require any extra space and tooltip will absolute to holder
Check fiddle http://jsfiddle.net/rKPfe/3/
Update
If you are not sure about the bottom position you can do with jQuery;
$('.tooltip').each(function(){
var elm=$(this),
holder=elm.closest('.holder');
elm.css('bottom',holder.outerHeight()+'px');
});
Left and right you can give relative(like left:0 or right:0) to holder position( which is not affected by changing window size) . Only in case if you want tooltip to be centered respect to holder yo can write.
$('.tooltip').each(function(){
var elm=$(this),
holder=elm.closest('.holder');
elm.css({
'bottom':holder.height()+'px',
'left':-(elm.outerWidth()-holder.outerWidth())/2+'px'
});
});
Because you are not taking into account the height and width of the tooltip itself.
Calculate its height and width and minus this off of the top and left values.
var width = parseFloat($(".tooltip").css('width'));
var height = parseFloat($(".tooltip").css('height'));
$(".tooltip").css({
left: CS_x_pos - width,
top: CS_y_pos - height
});
Related
I have a div that expands downward when a user presses "more." The div's height is always auto, and expands to fit the content accordingly.
I need to keep "height:auto" so that the CSS remains responsive when the screen is resized, but I want the changing height to be animated...how should I do that?
In other words, when the user presses more and additional content is added to this div, I want the div's expansion to be animated, without specifying a certain height like 5em or anything.
<div id="expand">
<p>This is the div I want to expand</p>
<div id="hidden" style="display:none">
<img />
<img />
</div>
</div>
Got it! I need to use the slideToggle method on the instead of the Thanks!
jsBin demo <-- Resize the window. Works great.
You can do it simply like:
$('.more').click(function(){
$("+ div", this).slideToggle();
});
having:
<button class="more">MORE</button>
<div>Lorem Ipsum...</div>
I would use the HTML you have, but that's the price when you did not showed some code in your Question ;)
I don't know exactly how you set up your code, but jQuery
$(link).on("click", function() {
$(element).slideToggle();
});
might work for you.
Is that what you are looking for?
You can always:
var targetDiv = $('.targetDiv');
// get original Height
var originalHeight = targetDiv.height();
// get natural height
targetDiv.css({ height: 'auto'});
var naturalHeight = targetDiv.height();
// reset div to original height
targetDiv.css({height: originalHeight});
// animate to target height
targetDiv.animate({
height: naturalHeight}, {
duration: 1000,
completion: function() {
// set height to auto
targetDiv.css({height: 'auto'});
});
You can do this using jQuery. You just need to caluclate the height: auto absolute height.
JSFiddle: http://jsfiddle.net/CS2h9/
I have a project where the requirement is to move the footer ( #footer ) upward while scrolling down the page in a parallax-like effect. When you start scrolling down the page, the footer should start moving upward only until it's visible in the (bottom part of the) viewport.
The footer should have covered most of the preceding <div> half way up and in full when it has reached the top of the viewport.
The page may have a similar html structure like this :
<body>
<div id="sectionA" class="div">First section</div>
<div id="sectionB" class="div">Second section</div>
<div id="sectionC" class="div">Third section
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div id="footer" class="div cf">Footer</div>
</body>
The parallax-like effect is achieved via javascript/jQuery adding a dynamic negative value to the top CSS property of the (relative positioned) footer. Here is the code for what it matters :
var $window = jQuery(window),
$footer = jQuery("#footer"),
$viewport = window.innerHeight,
$startEffect = $footer.offset().top - $viewport;
function footerParallax() {
var $scrollPos = $window.scrollTop() - $startEffect,
$ratio = 0.6;
$footer.css({
top: -($scrollPos * $ratio)
});
}
$window.scroll(function () {
footerParallax();
});
The (obvious) issue is that as soon as the top property starts getting a negative value, the footer starts moving away from the bottom of the page.
I have prepared a JSFIDDLE and assigned colors to each section and body to make it clearer. The body (dark-red) is visible under the footer after scrolling to the bottom.
What have I tried?
modifying the margin-top instead of the top property: this does the trick, however the preceding <div> that has to be covered by the footer (#sectionC in the example above) overlaps the contents of the footer and breaks its layout regardless that it is not visible due to its z-index property (added some floating boxes in the fiddle to make it evident.... a clearfix hack didn't help either.)
setting a static position to the footer: neither top or margin-top have effect over a static element.
Changing/reducing dynamically the height of #sectionC instead of top of footer to produce the effect of moving the second upwards : the footer stops moving as soon as height is equal to 0 (neither negative size or negative paddings are allowed)
Changed the height dynamically of the html and/or body tags to no avail.
I have also tried some parallax plugins like skrollr and skrollr-stylesheets and some others.
The problem with this solution (same with others) is that it relays in an specific (offset) position of the footer measured in px and set in a data attribute, but if the content changes dynamically, for example using the masonry plugin to arrange elements in another section of the document, the measures become inaccurate and the footer may start moving too early or too late.
By the way, other CSS sticky-footer techniques won't work because, well, they actually push the footer to the bottom of the page, and here we are doing the opposite.
I guess the question is either :
how to keep the footer stick to the bottom of the page while it is moved upwards? - or -
how to reduce the gap to 0 between the end of the document and the bottom edge of the footer?
I am starting to think that this issue has not a real solution the way it is, or maybe I am already too tired to see the obvious. I am interested in learning alternative solutions or hacks via CSS / javascript / jQuery or all of the above.
Bear in mind that I am not asking how to create the parallax effect UNLESS a totally different approach (or tweaks to the existing js code) solves the position issue.
IMPORTANT : Please consider that this is a WP site with an XHTML 1.0 Transitional DOCTYPE, and has installed many other jQuery plugins like masonry, scrollTo, jQuery UI, etc. I may have not control to change many things from the original structure (and I don't want to) so the idea is to implement this without breaking too many things and from a modular script.
EDIT #1 : Added a graphic to clarify the question.
Figure A. shows a regular web page scrolled down to the end. The red square represents the viewport and the footer (grey) is slighted moved to the right for illustration purposes. The body has a reddish background color (not visible in normal conditions) just for illustration purposes too. NOTE: the height of each section as well as the height of the footer is determined by their content (forms, images, text, etc.) so is NOT fixed.
Figure B. shows the current issue: If footer slides up in a parallax-like effect (see JSFIDDLE for reference) while scrolling down the page, it starts covering any preceding section above it (WITHOUT modifying neither its own height or the height of the preceding sections) AND it also starts separating itself from the bottom of the page, therefore the body's color background becomes visible. NOTE: the bigger the viewport is (fullscreen mode for instance) the higher the footer is moved upward (and more content is covered by it)
Figure C. is the expected result: the footer should be stuck to the bottom of the page, in other words, it should be the last visible element after the page has been totally scrolled down (and not the body background as in Figure B.) Notice that the contents and the size of each section (including the footer) should (ideally) remain untouched. Having said that, adding padding bottom to the footer or increasing its height is not the expected result since it would break its original visual layout.
Updated Version
Below is an updated version that should better matches your requirements.
This version goes back to relative positioning for the footer element and uses margin-top to position it.
margin-top is calculated off of the previous elements offset, height and current window scroll position. It then uses either
the viewport height if the footer starts offscreen
the initial top value of the footer element ($startEffect) if the footer started onscreen
to determine the actual value for margin-top.
To help keep the footer's layout from being affected by this, wrapping the content of the footer in an absolutely positioned div did the trick for the sample code provided.
Example Fiddle
CSS:
#footer > div {
position: absolute;
top: 0;
left: 0;
...
}
HTML:
<div id="footer" class="div cf"><div>Footer</div></div>
Code:
var $window = jQuery(window),
$footer = jQuery("#footer"),
$viewport = window.innerHeight,
$startEffect = $footer.offset().top;
$prev = $footer.prev(),
$useStartEffect = $startEffect < $viewport;
function footerParallax() {
var $scrollPos = $window.scrollTop() - $startEffect,
$ratio = 0.6;
var prevOffset = $prev.offset().top + $prev.height() - $window.scrollTop();
var marginTop = 0;
if(prevOffset < $viewport && prevOffset < $startEffect) {
if($useStartEffect) {
marginTop = (prevOffset - $startEffect)*$ratio;
} else {
marginTop = (prevOffset - $viewport)*$ratio;
}
}
$footer.css({
"margin-top": marginTop + 'px'
});
}
$window.scroll(function () {
footerParallax();
});
footerParallax();
How was it solved?
As I mentioned in my question, I was too tired to see the obvious but #dc5's answer put me on the right track :
To help keep the footer's layout from being affected,
wrapping the content of the footer in an absolutely
positioned div does the trick
Based on that comment, the answer became simpler than the whole code he proposed needing only :
(dynamically) wrapping the content of the footer in an absolutely positioned div using jQuery's .wrapInner() method
animating the footer by setting the margin-top property instead of the top property
So this extra CSS :
#footerInnerWrapper {
position: absolute;
top:0;
left:0;
width: 100%;
background-color: #666 /* same as footer */
}
and the tweaked original code
var $window = jQuery(window),
$footer = jQuery("#footer"),
$viewport = window.innerHeight,
$startEffect = $footer.offset().top - $viewport;
// add inner wrapper
$footer.wrapInner('<div id="footerInnerWrapper" />');
function footerParallax() {
var $scrollPos = $window.scrollTop() - $startEffect,
$ratio = 0.6;
$footer.css({
// top: -($scrollPos * $ratio)
marginTop: -($scrollPos * $ratio)
});
}
$window.scroll(function () {
footerParallax();
});
did the trick. See JSFIDDLE
This does what I think you need, the footer sticks when it has scrolled in view entirely:
jsFiddle
Code added:
function footerParallax() {
var $scrollPos = $window.scrollTop() - $startEffect,
$ratio = 0.6,
$newTop = -($scrollPos * $ratio),
$oldTop = parseInt($footer.css('top')),
$nonRelTop = $footer.offset().top - $oldTop,
$wanted = ($window.scrollTop()+$viewport-$footer.height());
if ($nonRelTop + $newTop < $wanted) {
$('#sectionC').css('display', 'none');
$wanted = ($window.scrollTop()+$viewport-$footer.height());
$nonRelTop = $footer.offset().top - $oldTop;
$newTop = $wanted - $nonRelTop;
} else {
$('#sectionC').css('display', 'block');
}
$footer.css('top', $newTop);
}
$window.scroll(footerParallax);
And in the CSS I added this so that $footer.css('top') wouldn't produce NaN:
#footer {
top:0;
/* ... */
}
EDIT: A completely new approach after more clarification of OP. I now have a fixed position footer that starts increasing in height to take over the entire screen when the user has scrolled passed half of the document. The HTML, CSS and Javascript have all been updated to achieve this:
jsFiddle
I'm trying to create a web page that has a slider at the bottom of the page, that can be dragged from left to right to shift the viewport. I've tried to draw a simple diagram of what I'm trying to achieve here:
The red box is the draggable slider. The user should be able to drag this red box from side to side and this should correspond with the image in the main viewport. Are there any plugins available for this?
At the moment I'm considering using the jquery-ui draggable plugin to handle the slider, but I'm not sure how to manipulate the viewport?
I'm thinking that maybe I could capture the distance moved by the slider and then apply a multiplier to that value to get the move the viewport by the correct amount but I'm not sure if this is a sensible idea?
What would be the best way to achieve this?
Thanks
You could start from the jQuery UI slider for the scroll bar at the bottom.
Modify it to fit your needs (little bit of css tweaking)
With the $('.viewport')[0].scrollLeft = xpos method you can scroll to the right x position.
Here is an example: http://jsfiddle.net/Vandeplas/zAJtL/
js:
var percentage = 50;
$('.scrollTo').click(function(){
var vp = $('.viewport')[0];
vp.scrollLeft = (percentage / 100) * vp.scrollWidth;
console.log(vp.scrollWidth);
});
css:
.viewport {
width: 200px;
height: 40px;
overflow: auto; /* set to hidden to hide the default scrollbar*/
}
html:
<div class="viewport"> azertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwertyazertyqwerty </div>
<input class="scrollTo" type="button" value="scroll"/>
UPDATE: With slider: http://jsfiddle.net/Vandeplas/zAJtL/1/
In case anyone was wondering, I managed to find the solution using this as a base: http://jeffschuette.com/2011/05/02/jquery-ui-slider-tutorial/
Hopefully it'll help anyone else trying to achieve the same thing!
I know vertical center in CSS is a pain to begin with, but I've just made it a bit more complicated. On my page, I have:
<ul id="complete">
</ul>
<form id="new_item_form">
<input type="text" id="add_item" placeholder="Type some tasks here"/>
</form>
<ul id="incomplete">
</ul>
It's for a basic task list. Tasks are added to the incomplete ul, and when completed move to the complete ul. What I want to do via css is have the text field vertically centered on the page and stay there, with the two lists butted up against it. I've been looking at all sorts of vertical alignment (a summary of forms found here: http://blog.themeforest.net/tutorials/vertical-centering-with-css/ ) but I can't seem to find a way that I can figure out how to adapt to allow what I need. How would I accomplish this style of fixed position centering?
EDIT:
Here's an image of what I'm looking for: https://www.dropbox.com/s/i0oit3v84j93b5g/Screen%20Shot%202012-10-11%20at%204.27.16%20PM.png
Is this what you want to obtain?
Of course, my code is a bit sketchy (use of height attribute on tds! Don't scold me to much). But you get the point.
If the height of the table is not known nor fix, but its parent height is known, it won't work (see this example) and you'll have to break it down.
If you just don't know any height at all, it's kind of hard to align...
Further reading on vertical-align
I can't think of any way to do this with CSS, but it's fairly easy to do with JavaScript/jQuery. Here is a working jsFiddle that does what you want on document load. You'd call the code again if you changed the lists, of course.
First, you enclose your lists and form in a div. I called this id="cmiddle". Then you use CSS to set the cmiddle div as position: relative. Then you use JavaScript code to get the enclosing window or frame height, calculate the center for the form, and then, subtract the upper list height to get the correct div position:
$(document).ready(function(e) {
// To work with frames, too
function getParentDocHeight($ele) {
for (;;) {
if (!$ele || !$ele.length) {
return $(window).height();
}
$ele = $ele.parent();
if ($ele.is("frame") || $ele.is("window")) {
return $ele.height();
}
}
}
var $cm = $("#cmiddle");
var formHeight = $("#new_item_form").outerHeight();
var viewHeight = getParentDocHeight($cm)
var formTop = (viewHeight - formHeight) / 2;
var divTop = formTop - $("#complete").outerHeight();
$cm.css("top", divTop);
});
Edit: Kraz was nice enough to add a simulation of adding list items to both lists and calling the code again to recalc. His jsFiddle here.
Well, I'm not sure what you are talking about
But generally,
put the line-height = the div's height. I will create a div around it if necessary
if some very particular situations, i do some math to manually center it
So if you want to centering 1 thing, create a div go around it with line-height = the div's height
And then make the div position: absolute, width, height, ....
Hope this helps
I have a resizable div which is using custom scrollbars of jScrollPane.
I want to have vertical scrollbar above the resize handle, is it possible to do so?
I tried changing verticalTrackHeight to be always 40 less and bar size reduces too, but when we scroll the scroller goes to the bottom.
Here is my code http://www.jsfiddle.net/WRMSn/4/
It seems like some extra space is somehow being added below the scrollbar. You can use a jspCap to get around this using some code like this:
.jspCapBottom {
display: block;
height: 22px;
}
I added that to your fiddle and it seems to work well:
http://www.jsfiddle.net/UnEqt/
You forgot ; on var pane = $("#container")
It should be var pane = $("#container");