Jquery animate toggle to shift marginTop - demo attached - javascript

I'm having troubles with an open/close tab using jquery. The purpose is for the tab to be clicked to reveal a fullscreen image of a slider sitting below. Technically, the slider itself doesn't change, it just simply alters the marginTop of the panel positioned below it to reveal the fullscreen image of the slider. There is a test link live at: http://www.the3rdobject.com/test-site/index.html - the top tab works perfectly though it is performing a similar function, but cannot get the lower tab to return to it's original position. Any help would be greatly appreciated.
To start, simply click on the lower tab 'Show fullscreen image' - this opens up to reveal the slider below. Just need to get it to close.
Any jquery experts, please help! I'm a jquery newb and going out my mind!

The code below should work:
// gets all the anchor elements inside the elements with a css class 'seefullscreentab'
$(".seefullscreentab a").click(function() {
// the margin to animate will be 0% if the anchor css class is 'opentab' and -15% if not
var margin = $(this).hasClass('opentab') ? '0%' : '-15%';
// animates the element with the css class 'scrollpage-container' to the margin above
$(".scrollpage-container").animate({ marginTop: margin }, 500);
// toggle the visibility of the anchors
// (the current visible anchor turns to hidden, and the hidden one turns to visible)
$(".seefullscreentab a").toggle();
});

Related

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.

Scrolltop not going to the correct position

I'm trying to focus the top of a div on an anchor click using the below code.
$('html, body').animate({scrollTop: $("#" + divid).offset().top}, 100);
However, it is not getting scrolled to the top of div , rather the focus goes to a position inside the div. I cross checked the offset().top value of the div with the top value in Page Ruler chrome addon and they are in sync.So ideally it should scroll to the top of div. Any suggestion would be really helpful.
Your fiddle seems to be working (except that you forgot preventDefault() in the click handler).
Generally, you need to account for border, padding, margin on the scroll container (the window in your case). For a generic solution, have a look at this gist.

How to move the elem in javascript

I know Javascript in the beginning level and I need some help.
left = '-180px';
$sub_menu.show().animate({'left' : left}, 200);
I want to move $sub_menu from the right side to 180pxfrom his default position before animate it, i.e. to make the indent on the right.
!!! EDIT !!!
Here my jsfiddle
For each menu element, on mouseenter, I enlarge the image, and show both sdt_active span and sdt_wrap span. If the element has a sub menu (sdt_box), then I slide it - if the element is the last one in the menu I slide it to the left, otherwise to the right. My problem is the last Menu 6. It must work as other menus only it should slide to the left on the same width.
I think you are searching for this:
$sub_menu.show().animate({ 'left' : '-=180px' }, 200)
use this
$sub_menu.css('left','-180px');
and for animation you can add CSS3 transition code to your CSS3 property
check this http://api.jquery.com/animate/
and you should use this , in your example
$sub_menu.show().animate({ 'left' : '-180px' }, 200);

Is there a js function that scrolls a site left right up and down?

I was wondering if anyone knows if there was a javascript or something that scrolls a site left right up and down on a click.
For example I want to create a site with multiple divs. Look at photo below.
I want each div to fit to screen and div 1 being the main div, the starting point. Say that I had a link in the menu for biography and the content for biography was in div 4 and someone click biography, I want the site to move down to div 3 and then right to div 4 and the same thing goes for div 4 and all the divs. When someone clicks a link in the divs I want the site to scroll in a direction I specify, is this possible.
Left Right Up Down
The jquery animate function is the right way.
Here you can find a simple and clear tutorial on how to use it: http://gazpo.com/2012/03/horizontal-content-scroll/
The tutorial is for horizontal scroll only, but you can easily extend to scroll your page in both directions (vertical and horizontal at the same time).
Yes, they are:
.scrollLeft()
.scrollRight()
With jQuery, you can animate the body's scrollTop value to scroll up and down:
$("html,body").animate({
scrollTop: $("#bio").offset().top
}, 1000);
The above code will scroll to the element with the id of #bio.
In terms of scrolling sideways, I supposed you could use a little trick. Set the body's overflow-x to hidden to hide anything that overflows to the right of the browser viewport. Then you can adjust the margin-left of body to "scroll" to the right or left. But, of course, this removes the ability for users to scroll through all of your divs.
$("body").animate({
marginLeft: "-100%"
}, 1000);
you can use jquery animate function ,it will give you more control
$('#div').animate({
left: '+=50'
}, 5000, function() {
// Animation complete.
});
read more from -
http://api.jquery.com/animate/

horizontal scroll on clicking button

I want to horizontally scroll a div by clicking on the button Left and Right but it is not working
$('#left').live('click' , function(){
$('#myDiv').scrollLeft(300)
})
$('#right').live('click' , function(){
$('#myDiv').scrollLeft(-300)
})
​
How can I scroll a div by a bytton click. I also want to remove the scroll bar
JS Fiddle
If you don't want to get rid of the scroll bars, why don't you just alter the CSS of the cropped content (i.e. its margin-left)?
Give the wrapping div a overflow:hidden and use the following JS:
$('#left').click(function(){
$('#myDiv').css('margin-left','-300px');
});
$('#right').click(function(){
$('#myDiv').css('margin-left','0');
});
Would look like this.
​
Is this what you want?
jsfiddle
i used css and margins for scroll, overflow hidden to hide the bar, float to align the pictures and changed some css...

Categories