I'm guessing my if/else logic is skewed. Basically I have an accordion structure where, on page load, the first accordion pane is half-revealed to a height of 150px. Then when the user clicks on the accordion header it fully opens to a height of 320px. On the next click it should close and act normally like the other accordion elements with a standard hide/show. It currently works ok but its not smooth and the accordion pane closes before it fully reveals.
Here's the html:
<div class="accordion">
<h3 class="acc-header glanceH">At a glance</h3>
<div class="acc-content glanceC slider" >
<div class="hero-video">
</div>
</div>
<h3 class="acc-header">What we do</h3>
<div class="acc-content" >
<div class="hero-video what-we-do">
</div>
</div>
<h3 class="acc-header">How we do it</h3>
<div class="acc-content how" >
</div>
<h3 class="acc-header">Where we reach</h3>
<div class="acc-content where" >
</div>
<h3 class="acc-header">How</h3>
<div class="acc-content" >
</div>
</div>
Here's the jQuery:
//generally slides all accordion elements with class "acc-content" when div with class "acc-header" is clicked
$('.acc-header').click(function(e) {
e.preventDefault();
$(this).toggleClass('acc-active');
$(this).next('.acc-content').slideToggle(200).siblings('.acc-content').slideUp(200);
$(this).siblings().removeClass('acc-active');
});
//when the page loads 'peek' at the content of the first accordion content (to 150px depth)
$('.slider').css('height','150px');
$('.slider').animate({ height: 'show'}, 'slow').addClass('itsopen');
//if its already been opened, close it, else open it to 320px
$('.glanceH').click(function() {
if(!$(this).hasClass('acc-active')) {
$(this).next().siblings('.acc-content').slideUp(2000);
$(this).siblings().removeClass('acc-active');
}
else if($('.slider').hasClass('itsopen')){
$('.slider').animate({ height: 320}, 'slow');
}
});
Update: Oops, it would help if I read the question - Here is a demo :P
//generally slides all accordion elements with class "acc-content" when div with class "acc-header" is clicked
$('.accordion .acc-header').click(function() {
var first = $('.slider');
// open peek if clicked, otherwise hide it
if (first.is('.itsopen')) {
if ($(this).next().is('.acc-active')) {
// open peek to full height
first.removeClass('itsopen').animate({ height: '320px' }, 'slow');
return;
} else {
// close first because a different header was clicked
first.removeClass('itsopen acc-active').slideUp('slow');
}
}
// remove active class from all content
$('.acc-content').removeClass('acc-active');
// show active content
$(this).next().addClass('acc-active').toggle('slow');
// close all content that isn't active
$('.acc-content:not(.acc-active').slideUp('slow');
return false;
})
// initialize accordion with all content closed
.next().hide();
//when the page loads 'peek' at the content of the first accordion content (to 150px depth)
$('.slider')
.css({ height: '0px' })
.show()
.animate({ height: '150px' }, 'slow')
.addClass('itsopen acc-active');
Related
I have created a way to scroll through divs, one has a menu and the others have divs with blanks but one has a video.
At the top of the page is a navigation menu that contains "next", "previous", "reload" and "start".
Those commands are warped in functions,
$("#next-item").on("click", function(){,
The page looks like this:
<div class="webcam-left">
<div class="bottom-panel">
<div class="center" id="content">
<div class="bottom-panel-post internal start"></div>
<div class="bottom-panel-post internal video-post"><video src="https://ia800606.us.archive.org/12/items/ACTV_News_open/ACTV_News_open.mp4"></video></div>
<div class="bottom-panel-post internal"></div>
</div>
</div>
</div>
<div class="nav-right nav-main">
<div class="rundown-panel">rundown</div>
<div class="rundown-items">
<div class="irl-today first"><div class="current">Welcome</div></div>
<div class="irl-today override">Category name</div>
<div class="irl-today">the end</div>
</div>
</div>
</div>
What I'm trying to do is when scrolling down the list, how do you trigger play on a video when a video is shown?
When scrolling down, I added classes to the divs that contain a video.
The left side has .override and the video side has .video-post.
I tried doing if hasClass() but it plays on the first click:
if ( $('.rundown-items').is('.override') ) {
if ($( '.bottom-panel-post' ).has('video')) {
$('video').trigger('play');
};
};
Working code - https://jsfiddle.net/openbayou/paonbxcL/8/
I figured it out, the problem was that it was looking for a class across all items and not each one individually so I added an .each function to look for a class on each individual div.
$(".slider-slide-wrap").each(function (i) {
var posLeft = $(this).position().left
var w = $(this).width();
// add shown class on a div
if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
$(this).addClass('shown').siblings().removeClass('shown');
}
// if .shown has .play-video, trigger play
if ($('.shown').is(".play-video")) {
$('video').trigger('play');
};
});
I am using this javascript for collapsing and expanding a div in which is some information. The div has class .info.
After page reloading, you can see first that the div is visible, but within a second, when the js is loaded, it disappears.
How can i achieve that when reloading the page, also at the very first second time the div is not visible?
$( document ).ready(function() {
var $accordionIO = $('.accordion .toggle-button');
$accordionIO.prev('div').hide();
$(".accordion .toggle-button").click(function () {
//Inner
var jqInner = $('.info', $(this).parent());
if (jqInner.is(":visible"))
{
jqInner.slideUp();
$(this).find('.button-switch').html('Information');
}
else
{
jqInner.slideDown();
$(this).find('.button-switch').html('Close');
}
});
});
The html:
<!-- Start toggle script -->
<div class="accordion">
<div class="info">
<?php
include('includes/information.txt');
?>
</div>
<div class="toggle-button"><span class="button-switch">Information</span> </div>
</div>
Please try adding inline style attribute. See example below:
<div style="display:none;"></div>
I'm stuck with a jQuery issue that I don't manage to solve.
I've created a menu with sub menu elements. I would like to toggle the height of content by clicking in menu items. The thing is when I click on other item, the content collapse. Kind of tricky to explain, I've put two websites doing the job
http://www.polerstuff.com/ -> When you click on 'shop' and then on 'info', the sub menu stays open. The same trick was seen here http://topodesigns.com/
I guess these two websites are using Shopify.
$(document).ready(function() {
$(".button").on("click", function() {
if($(".content").height() == 0) {
$(".content").animate({height: "300px"});
}
else if($(".content").height() == 300) {
$(".content").animate({height: "0px"});
}
});
});
Here is my jsfiddle
-> Thank a lot in advance.
Here's version of your fiddle that uses the data attribute to target divs with desired content, and another data tag containing desired heights to animate (but there are many other ways).
Clicking on the same button toggles it shut, this is achieved by adding an indicative class.
The 'hiding' divs may contain further divs with classes and layout as required.
$(document).ready(function (){
$(".b").on("click", function (){
var $this = $(this),
target = $this.data('target'),
tall = $this.data('tall'),
content = $(".content");
target = $('.'+target).html(); // get the html content of target divs
content.html(target); // insert said content
if (!$this.hasClass('on')) { // if it hasn't been clicked yet..
$(".b").removeClass('on'); // say that none have been clicked
$this.addClass('on'); // say that just this one has been clicked
content.animate({height: tall}, 200); // animate to the height specified in this buttons data attribute
} else {
content.animate({height: "0px"});
$this.removeClass('on');
}
});
});
.content {
background: coral;
width: 100%;
height: 0px;
overflow:hidden;
}
.hiding{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="b" data-target="alpha" data-tall="4em">Button</button>
<button class="b" data-target="bravo" data-tall="7em">Button</button>
<button class="b" data-target="charlie" data-tall="5em">Button</button>
<div class="content">Le contenu</div>
<div class="hiding alpha"> some stuff </div>
<div class="hiding bravo"> other things </div>
<div class="hiding charlie"> bits and pieces </div>
I have 4 div on my page, 2 little div on the center of the page and 2 big div outside the page. When i clicked the left little div, the whole page move left and pull the big div from the left. Same with the right little div. Because i have some hover effect on my little divs, after i pull the big div outside the window, the hover effect will act again.
Do i need to set their CSS after the animation finish to make sure the little div has moved out of the window?
here is the code
<div id="little_left">
<div id="upper">
<img src="" alt="imge"/>
<p>left</p>
</div>
<div id="bottom">
</div>
</div>
<div id="big_left">
</div>
<div id="little_right">
<div id="upper">
<img src="" alt="right"/>
<p>right</p>
</div>
<div id="bottom">
</div>
</div>
<div id="big_right">
</div>
Then the JS code ( now with the hover effect )
$("#little_left").animate({"left":"0"},1000,function(e){
$(this).hover(function(e){
$(this).css("z-index",$("#little_right").css("z-index")+1);
$(this).stop(true, false).animate({"top":"50",
"left":"250",
"width":"500",
"height":"500",
"border-radius":"15"
},500);
},function(e){
$(this).stop(true, false).animate({"top":"20",
"left":"0",
"width":DivWidth,
"height":DivHeight,
"border-radius":"0"
},250,function(e){
$(this).css("z-index",$("#little_right").css("z-index")-1);});
});
});
$("#little_right").animate({"right":"0"},1000,function(e){
$(this).hover(function(e){
$(this).css("z-index",$("#little_left").css("z-index")+1);
$(this).stop(true, false).animate({"top":"50",
"right":"250",
"width":"500",
"height":"500",
"border-radius":"15",
},500);
},function(e){
$(this).stop(true, false).animate({"top":"20",
"right":"0",
"width":DivWidth,
"height":DivHeight,
"border-radius":"0"
},250,function(e){
$(this).css("z-index",$("#little_left").css("z-index")-1);});
});
});
$("#little_left").click(function(e) {
$(this).animate({"left":-DivWidth},500);
$("#little_right").animate({"left":-winWidth},1000);
$("#big_left").animate({"left":"0"},1000);
});
$("#little_right").click(function(e) {
$(this).animate({"right":-DivWidth},500);
$("#little_left").animate({"left":winWidth},1000);
$("#big_right").animate({"left":"0"},1000);
});
CSS the 2 big div are outside the window , only 2 little divs are shown inside the window
I am not sure if I can do this. I have a menu in menu.jsp file. Till now, I included the menu in my original.jsp. Now, I want to provide a button instead of my menu.jsp and when the user clicks on the button, I want to load menu.jsp. How can I do that? I want to make my page look like Microsoft outlook Navigation Pane. I have this right now... button is in original.jsp. Other div's are in menu.jsp
$(document).ready(function() {
$('#showmenu').click(function() {
var hidden = $('.sidebarmenu').data('hidden');
$('#showmenu').text(hidden ? 'Hide Menu' : 'Show Menu');
if(hidden){
$('.sidebarmenu,.image').animate({
left: '0px'
},500)
} else {
$('.sidebarmenu,.image').animate({
left: '-210px'
},500)
}
$('.sidebarmenu,.image').data("hidden", !hidden);
});
});
<div id="content">
<div id="pageNav" style="z-index:9999; position:relative;height:180px;">
<button id="showmenu" type="button">Hide menu</button>
<div class="sidebarmenu" style="position: absolute;">
Menu List
<img class="image" src="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg">
</div>
</div>