I created an accordion and trying to add transition effect whenever the user tries to click on the accordion header.
I added height: auto and transitiion to the accordion container, but this effort seems useless here.
var texts = document.getElementsByClassName('text');
[].slice.call(texts).forEach(function (text) {
text.onclick = function () {
text.parentElement.classList.toggle('animate');
}
});
Here is the Fiddle
PS: the height of each content differs and the animation should happen while opening and closing the content.
EDIT:
I tried the possible duplicate question solution, which isn't animating perfecting,
http://jsfiddle.net/9vuor3oo/5/
The animation works only while opening the accordion but not closing it. and also the last accordion doesn't even animate on opening.
I updated your sample: http://jsfiddle.net/9vuor3oo/6/. You need to add the max-hight to .parent .child and then add transition to that.
Related
I was wondering, for all you javascript and jquery guru's what would be my best way to tackle this problem. What I have is a navigation that is hidden via CSS to the bottom of the screen. I've managed to have it working as a toggle fine - which you can see here http://jsfiddle.net/olichalmers/Lby7vfdf/.
var body = $("body"); $("#menuBtn").click(function() {
body.toggleClass("showMenu");});
This obviously means that the menu slides up and down.
What my problem is is that I want to animate the menu up on the initial click, and then when you click the button again to close it I want the navigation window to slide up. Then when you click it again to open it, it is appearing from the bottom again. I've been trying to get my head around how this would work and what I think is that it would be two classes (one for hide menu, and one for show menu) which would be added and removed from the body. I have a jsfiddle here http://jsfiddle.net/olichalmers/twqd2yj0/
var body = $("body"); $("#menuBtn").click(function() {
if (body.hasClass("hideMenu")) {
body.removeClass("hideMenu").addClass("showMenu");
}
else if (body.hasClass("showMenu")) {
body.removeClass("showMenu").addClass("hideMenu");
}});
This is probably shocking in it's attempt to come to a solution to this problem. I'm using jquery but maybe it is a javascript solution using an event listener that is needed here? My jquery and javascript knowledge is patchy at best as i'm still in the midst of learning so please go easy if I appear very dumb!
Hope i've been clear enough. Thanks.
May I suggest a different approach?
Create your bottom menu in a separate DIV, located at very top of your HTML (directly under BODY tag). Make that DIV position: fixed -- that takes it out of the "flow" and positions it relative ot the viewport (the screen), not to any other divs or to the web page itself. Now, you can move it up/down based on some trigger.
Here is a code example:
jsFiddle Demo
HTML:
<div id="botttrig"></div>
<div id="bottmenu">The menu is here</div>
<div id="wrap">
<div id="content">
<p>Content goes here</p>
<p>Hover over small box at bottom left</p>
</div>
</div>
jQuery:
$('#botttrig').hover(
function(){
$(this).fadeOut();
$('#bottmenu').animate({
'bottom': '0px'
},500);
},
function(){
//do nothing on hover out
}
);
$('#bottmenu').hover(
function(){
//do nothing on hover in
},
function(){
$('#bottmenu').animate({
'bottom': '-80px'
},500);
$('#botttrig').fadeIn();
}
);
See this jsFiddle for another example. I removed the trigger box, and left the top 10px of the menu visible at screen bottom. Upon hover, slide the menu up. You may wish to increase the z-index on the #bottmenu div to always display it above the other DIVs on the page, so that it is always visible.
http://jsfiddle.net/twqd2yj0/4/
I've used slideToggle() and added display:none; to #navHold
I"m making a script for a portfolio. when you click on one of the portfolio items a div will appear with the jquery onclick function like this:
$('#portfolioItem').click(function() {
$('#divThatWillApear').show();
This all works fine. I also downloaded a slider called glide.js. this slider also work fine.
But as soon as I combine my script and the slider togheter the slider is acting wierd.
I've created a jsfiddle : http://jsfiddle.net/skunheal/fzftX/2/
the slides dont scale to the full width of the slider. but when you rescale the window they do. when I remove the display none from my parent element (portfolioOverlay) it suddenly works all fine...
any one has an idea whats going wrong and how to fix it?
Hope to hear from anyone!
An easy fix would be to initialize the slider after clicking show, to fix this problem.
$('#show').click(function () {
$('#portfolioOverlay').show();
$('.slider').glide();
});
Demo Fiddle
Your .slider width is messing up as the width of the display:none; parent.
I "fixed" it by adding to your .slider
width: 100%;
to
width: 500px; // same as parent element, this means you are joining the width to the width of the parent however
Updated jsFiddle:
http://jsfiddle.net/cB3Pn/
As the portfolioItem is display:none on load it's size/position can not be calculated by your code. Removing the display:none CSS and adding the following to the bottom of your JavaScript will fix this as it will hide the portfolioItem once the JavaScript has run.
$('#portfolioOverlay').hide();
You could trigger the resize event yourself after showing the slider:
$('#show').click(function() {
$('#portfolioOverlay').show();
$(window).resize();
});
I am trying to have an advertisement block/div that will be switched to a fixed position once you scroll down the page.
Here is a demo of what I am trying to do and the code I am using to do it with...
http://jsfiddle.net/jasondavis/6vpA7/3/embedded/result/
In the demo it works perfectly how I am wanting it to be, however when I implement it on my live site, http://goo.gl/zuaZx it works but when you scroll down the div flickers in and out of view on each scroll or down key press. On my site to see the problem live it is the block on the right sidebar that says "Recommended Books"
Here is the code I am using...
$(document).ready( function() {
$(window).scroll( function() {
if ($(window).scrollTop() > $('#social-container').offset().top)
$('#social').addClass('floating');
else
$('#social').removeClass('floating');
} );
} );
css
#social.floating {
position: fixed;
top: 0;
}
My demo jsfiddle where it works correctly
http://jsfiddle.net/jasondavis/6vpA7/3/
The only thing different on my live site is the div/id name is different. As you can see it is somewhat working on my live site except the flickering in and out of view as you scroll down the page.
Anyone have any ideas why this would happen on my live site and not on my jsfiddle demo?
You'll notice that in the example code, and your jsFiddle, your inner div (#social, #text-2 etc) have a wrapper/container div which is where the scrollTop() test is performed. On your live code, you've ommited this wrapper, and you are both checking the scrollTop() AND setting the floating class on the same element (#text-2). So every time you scroll, it swaps between the classes, because the scrollTop() conditional keeps checking the same element. You need to wrap #text-2 in another div and perform the conditional on that, just like in your examples.
Also, #text-2 is an li element yet has no parent ul. You should either give it a parent ul or change it to a div, otherwise it's invalid HTML.
I installed jScrollPane on my website and can't make it work.
My website works as follows: from the main page, pages are loaded dynamically using jQuery's load() method. In the page I load I have the following script to launch jScrollPane:
$(function(){
$('.scroll-pane').jScrollPane();
});
Which seems to be called. No problems so far I guess. The problem is that the page, at the beginning, is not long enough to need a scrollbar. I have hidden content that shows up only on specific actions (i.e. clicking on a button shows the content of a certain paragraph), and when I click to show the content of a hidden div, the scrollbar doesn't appear.
I also tried to call $('.scroll-pane').jScrollPane(); as I show the new content (i.e. in the event that triggers .show() on the hidden div I also call $('.scroll-pane').jScrollPane();) but I had no success with that either.
Can anyone help me?
Thanks
EDIT:
I forgot to mention the structure of the page: I have a div which has class="scroll-pane" and is loaded with the page load and it contains small hidden divs that show up when clicking on particular areas. I would like to add a scroll bar to the div with the class scroll-pane in order to make the content of the showed div scrollable (right now the content stays in the size of the div but it's not scrollable since no jScrollPane scroll bar is shown).
Update:
I tried to put $('.scroll-pane').jScrollPane(); in the callback of the .show() method of my divs and tried to put class="scroll-pane" to those divs that appear, but again nothing is shown (the scroll bar doesn't appear and the div is not scrollable).
Check this demo provided by the developer of the plugin
http://jscrollpane.kelvinluck.com/examples/invisibles.html
When the element is first shown you simply have to (re)initialise the
scrollpane (or you could even use autoReinitialise if you like) and
its width and height will be calculated correctly.
All that you need is
$(function(){
$('.scroll-pane').jScrollPane({autoReinitialise: true});
});
and may be the recent version of the plugin
I suggest to use css visibility property instead auto reinitialising. Each time you call show() method, jScrollPane reinitialises itself. This takes time and has impact on animation.
If you use, say, slide..() methods, then animation starts properly, but scrollable container (and its elements) appears little bit later, and that looks bad.
var wrapper = jQuery('#gallery-album-preview-wrapper');
if (wrapper.css("visibility") == "hidden") {
wrapper.css("visibility", "visible").css("display", "none");
}
if (wrapper.is(":hidden")) {
wrapper.slideDown(1000);
} else {
wrapper.slideUp(1000);
}
I am using a div to populate a ul/li list and then draw a jCarousel out of it.
So this works fine:
$('#mycarousel').jcarousel();
Here is the problem:
The div containing the ul/li items could be hidden by the click of another button. When the div is hidden, and I re-size the browser window, the jCarousel also attempts to redraw itself, but since it is hidden, it is not able to draw it properly. The result is that everything is jumbled up in the list (if I click the button again to make it visible). But again if I re-size the window now (the jumbled up jCarousel is NOT hidden now), it redraws itself correctly.
I tried getting ahold of the jCarousel instance and reload itself as soon as the button is clicked to make the div visible (the way it re-sizes itself when it is visible and window is re-sized).
To get the jCarousel, I am using:
JQuery('#mycarousel').data('jcarousel')
and it is returned as null.
How can I get the jCarousel to draw correctly?
What makes you assume that the $().jcarousel() call does anything with .data()? Better to stick with the API provided by the plugin anyway, rather than guessing at how it works under the hood. Anyway, to answer your question...
The problem is that, when a div is hidden, it has no height or width. Use the "off-left technique" rather than hiding the div, like this:
#mycarousel {
height: 100px; /* whatever height your div will have when shown */
width: 100px; /* whatever width your div will have when shown */
position: absolute:
left: -10000px;
}
When you want to show it, use $('#mycarousel').css('position', 'static') to remove the absolute positioning, and the div will jump into place.
A little more info here.
Little more debugging and found that when the browser ressizes (and the carousel is already visible), its reload function is called to adjust its position, so to help myself in the hide/show div scenario, I ended up calling the carousel api's reload function after the wrapping div becomes visible.
a bit of effort was to actually get hold of the jcarousel instance.
so it was a two step process...
get hold of the carousel instance.
var cInstance = null;
cInitCallback = function(c){
cInstance = c;
};
$('#mycarousel').jcarousel({
initCallback: cInitCallback,
});
reload the carousel on the show of the div
cInstance.reload();