I am trying to make navigation bar displayed in a line. For the sake of question I have created this fiddle. I would like to hide the red divs as one div to one side by clicking on the black div. So I put all the red divs into one <div class="box"></div> and tried to slide the box div. But it messes up. Instead of going to a side like a train it expands to multiple rows and then hides. Also I could just slide the divs of class slide but then it looks like this. Which is not what I want, because it hides each one on its own.
This might work for you
FIDDLE
js:
state = true;
$('.clickMe').click(function () {
if (state) {
$("#inner").animate({
left: '-100px'
}, "slow");
state = false;
} else {
$("#inner").animate({
left: '0px'
}, "slow");
state = true;
}
});
html:
<div class="clickMe"></div>
<div id="outer">
<div id="inner">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>
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 have a form that has several "pages" with each "page" being a container holding some content.
I would like to have previous and next buttons following these rules:
Clicking the next button should progress forward through the form's pages until the last page and stop
Clicking the previous button should progress backwards through the form until the first page and stop.
Here is the example of similar functionality except it does't follow the rules above because hitting next on the last page cycles back to the first and vice versa.
Here is what I have tried so far:
JS
$('.box button').click(function() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
var t=$(this);
t.parent().animate({
left: '-50%'
}, 500);
if (t.parent().next().size() > 0) {
t.parent().next().animate({
left: '50%'
}, 500);
} else {
t.parent().prevAll().last().animate({
left: '50%'
}, 500);
}
});
The below is one method that will achieve this (note that this could be simplified a good bit but doing so here would make it more difficult to understand for new programers):
$('.previous').click(function () {
var cur = $('.form-panel').index($('.form-panel.active'));
if (cur!=0) {
$('.form-panel').removeClass('active');
$('.form-panel').eq(cur-1).addClass('active');
}
});
$('.next').click(function () {
var cur = $('.form-panel').index($('.form-panel.active'));
if (cur!=$('.form-panel').length-1) {
$('.form-panel').removeClass('active');
$('.form-panel').eq(cur+1).addClass('active');
}
});
.form-panel:not(.active) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-panel active">Panel one content here</div>
<div class="form-panel">Panel two content here</div>
<div class="form-panel">Panel three content here</div>
<div class="form-panel">Panel four content here</div>
<div class="form-panel">Panel five content here</div>
<div class="form-panel">Panel six content here</div>
<br>
<button class="previous">Previous</button>
<button class="next">Next</button>
If you require animations, this method can easily be modified to include them.
How can I make this scroll left or right using navigation button?
<div class="slider-wrap">
<div class="slide-wrap">
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
</div>
</div>
<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>
JS
$("#slider-left").click(function(){
alert("< clicked.");
});
$("#slider-right").click(function(e){
alert("> clicked.");
$('.slide-wrap').scrollLeft(5000);
});
Fiddle
You are selecting the wrong <div>. Note the selector: $('.slider-wrap') (not .slide-wrap).
$("#slider-left").click(function () {
$('.slider-wrap').animate({
scrollLeft: 0
}, 200);
});
I have used .animate because you get visual feedback about what's happening (so I think using animate is better for UX). This would work equally well with .scrollLeft() though:
$("#slider-left").click(function () {
$('.slider-wrap').scrollLeft(0);
});
See it working in a fiddle
I'm trying to get a slidetoggle to work properly on a div. I have html in the following format:
<div class="root-div first-service">
<div class="title-div gradient">
<div class="title-div-left">
<p>$ServiceName</p>
</div>
<div class="title-div-right">
<p>▲</p>
</div>
</div>
<div class="description-div show minimum-height">
<div class="description-content-div">
$ServiceDescription
</div>
</div>
<div class="services-image-two">
<img src="themes/theinneryou/images/ServicesImage2.jpg" alt="Missing Image"/>
</div>
</div>
I also have javascript as follows:
$('.title-div').on('click', function () {
var arrow = $(this).find('.title-div-right');
if (proceed) {
proceed = false;
$(this).closest('.root-div').find('.services-image-two').slideToggle("slow");
$(this).closest('.root-div')
.find('.description-div')
.slideToggle("slow", function () {
$(arrow).text().trim().charCodeAt(0) == 9650 ? $(arrow).html('<p>▼</p>') : $(arrow).html('<p>▲</p>');
proceed = true;
});
}
});
The effect that I get is that the image itself plays the animation of slide and then gets hidden, then the rest of the next div which contains text only gets hidden without any animation. The image is overlapping the text div as I have it under absolute positioning. You can see the live demo at tiu.azularis.com/Services
Is there a way to make them gracefuly slide together when I click the arrow and then appear together when I click the down arrow?
I also tried moving the image div inside the description div and also tried setting .delay after first animation, but neither does the trick.
Change line 83 in Services.css:
.services-wrapper .expansion-wrap .first-service .minimum-height {
/* min-height: 20.4rem; */
height: 20.4rem;
}
min-height is messing it up.
Otherwise you have to fix your HTML + CSS for that whole section because it is not ideal.
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