Basic JQuery Slider: Want to move slide number on top of images - javascript

I am using the Basic JQuery Slider (http://www.basic-slider.com/).
By default the number markers (showing the total number of slides and which slide you are on) are under the image with a small margin. I want them to appear on the bottom of the images themselves.
What I have tried:
CSS:
I have pushed the images up by applying a negative margin-top, which worked. I have given them a z-index of 9999 (the same z-index that the left and right buttons have). Yet, for some reason, they appear behind the images, instead of on top of them. This is the problem I need to fix.
JQuery
I have looked at the JQuery code for the left right controls and the captions (which are both on top of the slide images, but I do not see anything specific that they have (and which is missing from the number markers) that would allow them to be on top of the images...
I have not posted any code, but can do so if requested. I am using the bjqs.js, bjqs.css, and demo.css found in the package downloaded from the Basic JQuery Slider site.

Try this CSS:
.bjqs-markers { position:relative; top:-35px; }

Try to give z-index for this line as -1
li.bjqs-slide{
z-index: -1;
}
And for this as +1
ol.bjqs-markers{
margin-top:-35px;
z-index:1;
}

Related

How do I stop the page from expanding when animating an element so it slides in from off screen?

I'm making my first website and I've run into a problem I can't easily fix as I'm not sure how to phrase a google search for it. I need to slide images into the page without making the scroll bar appear or, rather, without the page expanding in width to encompass the newly appeared image while it slides in.
Here's the actual test version of the page:
http://test.dingac.com/accommodation.html
The part I need help with is the sliding of the pictures when you click on the arrows next to the blueprint for each apartment in the accommodation tab.
If you want to look at the code, the relevant code is in the JqueryAnimate.js file but keep in mind, the comments aren't in English, I'm new to this so the code is a bit weird and the CSS isn't fine tuned yet. I've posted the relevant code snippet further down. My current issue is the slide animation. The way I did it right now is for all the images to be there from the start but all but one have display:none. When you click the arrow to the right it fades out and slides out the current picture (using Jquery) and turns on the display of the next picture (which is positioned relatively at left: 2000px) while animating it to left:0px.
In the moment the new image appears, the page sees that a new element is on the page and not everything is being displayed so it expands the width of the page to encompass the off-screen picture. This is only an annoyance on desktop as it only makes the scroll bar appear, but on mobile it makes the whole page zoom out until the new picture is on screen and then zoom back in as the picture slides in.
$("#buttonRight"+apInd).click(function(){
if(status[apInd].circleIndex!=status[apInd].numApPic){
status[apInd].Picture.fadeOut({duration: 1000, queue: false}).animate({left: '-2000px'},1000);
status[apInd].NextPicture.fadeIn({duration: 1000, queue:false}).animate({left: '0px'},1000);
status[apInd].PreviousPicture=status[apInd].Picture;
status[apInd].Picture=status[apInd].NextPicture;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circle");
status[apInd].circleIndex++;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circleSelected");
status[apInd].NextPicture=$("#apPicture"+apInd+"-"+(status[apInd].circleIndex+1));
}
if(status[apInd].circleIndex===status[apInd].numApPic) //hiding/showing arrows when at the edge of the selection
{
status[apInd].arrowDisplay="left";
$("#buttonRight"+apInd).css("opacity",0).css("cursor","default");
}
else
{
if(status[apInd].arrowDisplay!=="both")
{
status[apInd].arrowDisplay="both";
$("#buttonRight"+apInd).css("opacity",1).css("cursor","pointer");
$("#buttonLeft"+apInd).css("opacity",1).css("cursor","pointer");
}
}
});
What I need is for the page width to stay constant or, more specifically, that there be no zooming in mobile and no horizontal scroll bar on desktop.
Use overflow: hidden (or, for more fine grained control, overflow-x: hidden) in your CSS.
For example, if this is the HTML of your page:
<body>
<div id="page-wrap">
Contents
</div>
</body>
You can use overflow like so:
#page-wrap {
overflow-x: hidden; // hides horizontal overflowing elements
overflow-y: auto; // shows scrollbars if the content vertically overflows
}
Link to MDN
Try to add an overflow:hidden on the span with id="apImgBox"

SlidingPanel Animation

I would like to display a sliding panel in my project, from a bottom fixed div (so sliding in the top direction).
This sliding panel will be used to extend a view of an existing element.
I have some problems to make it works great (where to start sliding, respect the padding of his parents, etc, etc)
I made a Plunker of a sample project representing my problem :
In this Plunker i would like to :
open my sliding panel from the top of my div (in red). As you will notice, when you click on the button to open it, the sliding panel start his animation from the bottom of the page and go over my div (in red).
align my sliding panel with my div (in red).
So here are my questions:
How can i start my sliding animation from the top of my div (in red).
I already tried that :
.sliding-panel-wrapper {
/* Other Css property */
margin-bottom: /*Height of the red div*/;
bottom: 0;
}
$("#mybtn").click(function() {
// Increase height instead of moving it from outside of the page to inside
$("#slidingPanel")[0].style.height= '500px'
});
This solution works for the starting position of my panel, but i don't want the sliding panel to increase his size, but to slide .
How can i give him the exact same size / padding / margin etc etc than the div in red ( because recursively looking for padding and margin of his parent seems not to be the best solution).
Edit : I'm looking for a "generic" solution if possible, i would like to be able that my sliding panel adapt itself to the constraint that i defined above if they change (so i would like to avoid giving hard coded value in my css).
Edit 2: Summarizing my question is : How can i make a panel slide NOT from the bottom of the page, but from the Top of another div (Please see my plunker)
If i'm understanding your question, you would like a sliding panel which is off page and then when a button is clicked it slides on page.
If this is the case then this will answer your question.
This is the html code which sets a div id as slide. The button has an onclick function called Slide().
<div id="slide"></div>
<button onclick="Slide()">Slide</button>
Make sure the div has a position of fixed and then set the bottom attribute to whatever you require.
#slide{
position:fixed;
bottom:-52%;
background-color:red;
width:100px;
height:500px;
right:0;
transition:1s;
}
This javascript is called when you click the Slide button. If the div is off screen then it will "slide" onto screen and if the div is on screen then it will "slide" slide off screen. But make sure you set your values to suit your needs because these values may not work for your solution.
var a = false;
function Slide() {
if (a) {
$('#slide').css('bottom', '-52%');
a = false;
}
else {
$('#slide').css('bottom', '0%');
a = true;
}
}
Any questions, just ask.

html5: link to the #id of a div at a certain point on the page

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.

Floating Header with Zoom to Top like theverge.com

I am really fond of the floating header at theverge.com. When you scroll down, the header stays fixed on top and when you scroll down to a certain point, The Verge logo appears which allows you to zoom back up.
How do I reproduce a similar header, can it be done with just HTML and CSS?
try this with CSS
.fixedHeader {
position:fixed;
top: 0;
}
the small button you should build with jQuery.
therefore you have to check the property scrollTop to know when the button should be shown. and if you click the button you should .animate() the scrollTop-property with jQuery back to zero (0).
DEMO
And here with small button and click-event:
DEMO

CSS issue - my DIV stays collapsed!

On the homepage of my website - www.mobiuspc.com, I have some distinct sections that I color coded so I could see how its all laid out. There is the master page section, which works just fine (its the tan bar with buttons like "Components" and such), and at that level and up everything works as best as I could wish for.
Down below I have some issues. There are 3 primary DIV's that I use to break down the page:
<div id="mainarea" runat="server" >
This is anything in between the header/master page area, and the yellow color coded area. This big area is supposed to be 700px high, and 1024px wide, and is colored silver. If you go to the site, you will see that it is not. There is a panel with a repeating hard drive image, that is my drop zone for Drag 'n drop functionality (unrelated to this question). I have it set to runat server, because if I don't do that, then Drag 'n Drop seems to break.
<div id="categorybar">
This is the yellow color coded area that holds all my buttons. I'm happy with it. Hit the button called "Display" and watch what happens to the DIV above it. It goes way out of bounds! My CSS to set its width and height seem to be overruled.
<div id="detailbox">
This is the blue colored area, no issues here. Eventually I will put controls in here, but for now it is fine being blue.
The initial thought might be that my CSS is borked. If this is the case, I can't see where! I've set the height/width and all that good stuff. I've tried added the float:left into random sections, to no effect. Here is the relevant excerpts from my CSS file"
#mainarea
{
background-color:Silver;
height:700px;
width:1024px;
}
#categorybar
{
background-color:Yellow;
height:80px;
width:1024px;
}
#detailbox
{
background-color:Blue;
height:420px;
width:1024px;
}
I create objects at run time when you click the "Display" button, and all those objects are added to a pane that resides in the #mainarea DIV. That pane is known as toolbox, and here are it's CSS properties:
#toolboxpanel
{
height:700px;
width:324px;
max-height:700px;
max-width:324px;
overflow:scroll;
}
For some reason it keeps expanding beyond its predefined size when I add controls at runtime instead of simply having a scrollbar like I would prefer. The panel with all the hard drive pictures as the drop zone, that is also in the #mainarea DIV, and here is the CSS in case its relevant:
#droppanel
{
height:700px;
width:700px;
margin-top:-700px;
margin-left:324px;
}
Should I get rid of the runat=server bit? If I do that and click on the display button, I still get that horrid panel expanding itself all the way to the bottom of the page, but at least the silver colored #mainarea DIV stays the proper size (the panel just gets out of control). If I go that route, any idea why it breaks my drag and drop? I hope I don't have to go that route, and instead there is simply something goofy in my CSS that I'm overlooking...
Thanks for your help!
Bill
runat="server" will change the client id of the control you are using it on meaning your #mainarea css will not apply.
You could get around this by assigning mainarea a css class and using that to apply styles rather than its id.

Categories