I am using the jScrollPane jQuery plugin in a project, and the scrollable area has a couple of list item elements, and each list item when is clicked it needs to trigger a modal box positioned absolute from in the center, filling all the space. Anyway its kind of hard to explain, but this is not the problem. The problem is that, I need to get the negative top css value (when it scrolls down) via jQuery and I can't manage to make it work, i tried using the .css() selector but it always returns 0px even if in the source shows different. Any idea ?
EDIT:
<div id="provider-menu">
<ul>
<li class="menu-item"> <h2> content here </h2>
<div class="more-info">
more info box here
</div>
</li>
<!-- More List Items Here -->
</ul>
</div><!-- end #provider-menu -->
<!-- Javascript -->
$("#provider-menu").jScrollPane();
// jspPane is added by the plugin
var topValue = $(".jspPane").css("top"); // returns 0px every time on scroll even if in the source is different.
I am trying to do this because I can't change the HTML structure, the .more-info div has to fill the #provider-menu box which has a predefined width and height, but if I set it to absolute top left right bottom it goes to top and you have to scroll to see what's there. So I was thinking on getting the top negative value, remove the minus and set the top value to the .more-info box.
$(element).css behaves differently than you might expect.
This actually works: $(".jspPane")[0].style.top
What you have demands absolute positioning I believe, which jspPane does not have.
Either way, the above code gives you that actual ( usually negative ) pixel value.
Related
So my problem here is that I want to make a slider in parentDiv but I make a simple example which is when I click the item it will become the main screen of the screen border...but in opposite when I click it over again it will turn back.. I'm using gsap but you don't have to worried about the gsap functionality because I just used it to make it simplier my animation but the logics of positioning does matter to me.
Here's the codepen.
https://codepen.io/yowyow3322/pen/GRQVevr
Also I put something here in the div just to make it more clarify.
<!-- <div class="parentDiv"> -->
<div class="stapler stapler1"></div>
<div class="stapler stapler2"></div>
<div class="stapler stapler3"></div>
<!-- </div> -->
So what's my point here? I want to make the stapler slider but that will be absolutely impossible because parentDiv is a position relative so that it will not off bounds the items when I will create it for sliding. It kind of seems impossible to me but I saw it somewhere in Pinterest which close to the idea of it.
As each div will be a layer on it's own, You need to manage that each layer should has a z-index more than the last layer by one. you can do that by JS
I have two col elements in a single Bootstrap row/container. The left side one is a fixed size, containing a static table. The right side one contains a table, like the left, but is dynamically generated based on data retrieved when the page is loaded.
So, of course the right table can be taller than the left one. I've got the right table's max-height property set to the left table's height, and overflow-y: scroll, figured out in JavaScript. This looks and works great on desktop.
Code gist for reference, HTML:
<div class="container">
<div class="row">
<div class="col">
<table id="tblLegend">...</table>
</div>
<div class="col">
<table id="tblStops">...</table>
</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
var mxHt = $("#tblLegend").css("height");
$("#tblStops").css("max-height", mxHt)
.css("overflow-y", "scroll");
});
However, I'd like to be able to remove the max-height (and subsequently, the overflow-y) property from the tblStops element if the page is displaying in a mobile format, or is resized to a mobile screen's size. In this case, the two tables would be stacked on top of one another vertically, and there would be no need for a separate scroll pane for mobile devices. (Not to mention that an internal scroll pane on mobile is irritating and difficult to control sometimes).
Is there a relatively easy way to do this without resorting to window.size or window.resize events? I just don't like the idea of having to check for hardcoded screen/window dimensions.
You can detect the screen size in JavaScript. As you are using JQuery:
if ($(window).width() < 700) {
$("#tblStops").css("max-height", "auto")
.css("overflow-y", "auto");
}
Auto value will add or remove scroll according to the requirement in overflow. In height minimum height will be applied for content.
NOTE: Might not work with Iphone's.
EDIT: width() will return value based on browsers and for iphone width 700 might not work.
I want to create a search box that extends itself downward when user input something
Here is an example
Right now I set up the html such that it displays all the possible values at the bottom of the search box
Search: <input ng-model="query">
<ul class="my_possible_values">
<li ng-repeat="possible_value in my_possible_values | filter:query">
{{possible_value}}
</li>
</ul>
However the listed element pushes down other div element below the search box instead of overlaying it.
You should put a position: absolute style on your .my_possible_values class -- that is how I've made/styled my search box dropdowns in the past. This will take the dropdown content out of the normal flow of the DOM, thus preventing it from pushing down the other divs on the page.
You can read more about CSS positions on this page :)
http://www.w3schools.com/cssref/pr_class_position.asp
Additionally, you'll probably want to add overflow-y: scroll and a max-height style to your .my_possible_values menu as well so that it does not overflow the bottom of the page if you have a lot of dropdown options.
I'd say those are the most important CSS rules for creating a good dropdown list. Good luck!
I have a responsive header that I'm working on for a site that turns into a fixed-position navbar as you scroll down. It takes up roughly the upper quarter of the page.
The content of the page is in a series of divs / cards that slide up as you scroll down.
I want to add <a href> links to the navbar that correspond to the ids of the divs. However, when I do so, the div content moves to the top of the page.
So I get something like the following when I navegate to /localhost#first_card
---- TOP OF PAGE
[<div id="first_card"> begins here]
---- bottom border of navbar
[<div id="first_card"> continues here]
when what I really want is this:
---- TOP OF PAGE
---- bottom border of navbar
[<div id="first_card"> begins here]
Is there a way to control where on the page the hash link might render the <div id="first_card"> after navigating to /localhost#first_card?
I've been trying to solve this for you in JSFiddle for a bit now, and from what I can find, the best way would be to box all the cards into a seperate element with overflow:auto
The result of this, and as proof of it working can be found at http://jsfiddle.net/Entoarox/TT2JN/
This may not work for your site, but the only alternative is using javascript to solve this and I cant recommend that because it would cause a massive load on the visitors PC due to most hash related javascript functionality being either static or very new, meaning that to support older browsers, you'd need to manually poll if the hash has changed, either taking up a lot of CPU time, or having a very slow response to when the hash has changed.
Try the jQuery scrollTop() command. This will give you the precise positioning that you need.
http://api.jquery.com/scrollTop/
You might have to change your links up a little. Example with jQuery and a wrapper div:
<a id="first-card-jump" href="#first_card">Jump to First Card</a>
<div id="wrapper">
NAVBAR
first div
second div
...
nth div
</div>
<script>
$('a#first-card-jump).on('click', function(event) {
event.preventDefault(); // Not sure if this is needed
$('div#wrapper).scrollTop(500); // you have to measure how far down you want to scroll
});
</script>
Note that this might mess up your in-page back button support. Not sure if that's an issue for you.
p.s. If you're in time trouble, the simplest fix is to add a top margin to each div equal to the height of the fixed navbar.
Hope this helps!
I made you a jsfiddle
it uses padding-top to create the offset to the top, then it uses margin-bottom to remove the offset between the elements.
the relevant css:
/*
add top padding and substract the same amount from bottom margin
*/
.card {
padding-top: 200px;
margin-bottom: -200px;
position: relative;
}
/*
we need to reverse the stacking for this solution, so the elements later in
the document don't cover the elements before
either you know how many cards you have, so you can solve this in a central
css file (like below)
or you must add the stacking upon creation (in your template)
or use the javascript
starts from 2 because nav is :nth-child(1) in this example
*/
.card:nth-child(2){
z-index: 0;
}
.card:nth-child(3){
z-index: -1;
}
.card:nth-child(4){
z-index: -2;
}
javascript to reverse the stacking, using jQuery
$(function(){ //on load
$('body>.card').each(function(i, elem){$(elem).css('z-index', -i)})
})
If I understand your question correctly, you want to make a div appear in the middle of the page, right? So, to do this, you can just direct the page to the div above it. You can also make another div above it with a fixed height.
I am trying to write a zoom in/out feature on a web app I am making using the jqueryUI slider.
I am having difficulty handling when my parent div shrinks too much, and cramps its child containers.
<div class="puck originator inline-block" style="width: 310.5px; left: 0px;">
<div class="conflicted inline-block originator">
<div class="right-number">I should stay</div>
<div class="left-number">I should stay</div>
<div class="middle-number">I Should disapper</div>
</div>
</div>
Here is the relevant section of code I have
http://jsfiddle.net/aQKwE/
Basically I have the parent div (class 'puck') that is being shrunk using a jquery slider. For this code I just used a text box, but same idea.
When I shrink that div, the containing divs stick around and are very garbled.
I want to be able to remove the middle child div when it becomes to cramped, leaving the left and right child divs to occupy all the space
Furthermore, if it becomes to cramped yet after that, I want to remove the right div, leaving only the left.
Finally I want to be able to remove all contents so that nothing more than the background of the parent shows.
Is there a way to do this easily, preferably through CSS? I don't want to write more javascript code to set 'display:none' on each child div, since it seems like some CSS rules should handle this.
Any ideas?
There's not really any logic built into CSS to handle something like this. You can set rules based on viewport size, but that won't help in this case.
I updated your jsfiddle with this code so you can test it and see what you think, but essentially I just added some checks in your javascript function to hide based on the width submitted.
var newwidth = $('#text').val();
$(".middle-number").show();
$(".right-number").show();
if (newwidth < 280) {
$(".middle-number").hide();
}
if (newwidth < 180) {
$(".right-number").hide();
}
$('.puck').css('width',newwidth);