I'm creating a team members page and I used this thread to help me out a little.
Fade Out/Fade In of List Items
I have everything working as I want except I can't figure out how to make the other people in
my gallery stay active (red border) and hide the other description of the team members on page load. ( On page load scroll down to see what I mean. )
Here is the code I'm working with.
HTML
<div class="grid_6">
<div id="staffDirectory">
<ul class="team list-image clearfix">
<li class="selectedMember">
<img src="images/team/head1.jpg" class="max-img headshots" />
</li>
<li><img src="images/team/head2.jpg" class="max-img headshots" /></li>
<li><img src="images/team/head3.jpg" class="max-img headshots" /></li>
...
</ul>
</div>
</div><!--End 6-->
<div class="grid_6">
<div id="staffMember">
<ul>
<li class="staffSelected">
<div class="box white-bg">
<img src="images/team/head1.jpg" class="headshots-red" />
<h2 class="red3-tx bold">John Doe 1</h2>
<h3 class="blue4-tx" style="font-weight:400; font-style:italic;">Position: Manager</h3>
<p class="blue3-tx">text</p>
</div>
</li>
...
</ul>
</div>
CSS
#staffDirectory ul li
{
opacity: 0.9;
}
#staffDirectory li:hover{
opacity: 1;
}
.selectedMember {
opacity: 1.0 !important;
}
.staffSelected {
display: inherit;
}
#staffMember li:not(.staffSelected) {
display: none;
}
.team li{
display:inline-block;
float:left;
margin-bottom: 10px;
margin-right: 8%;
width:28%;
cursor: pointer;
}
.headshots{
border:5px solid #034A68;
}
.headshots:hover{
border:5px solid #981B1E;
}
.headshots:active{
border:5px solid #981B1E;
}
.headshots-red{
border:5px solid #981B1E;
margin-bottom:25px;
height: auto;
width: 98%;
}
JS
<script>
$(document).ready(function()
{
$("#staffDirectory ul li").click(function()
{
var index = $("#staffDirectory ul li").index(this);
var newMember = null;
newMember = $("#staffMember ul li").get(index);
$(".staffSelected").fadeOut(500);
setTimeout(function() {
$(newMember).fadeIn(500).addClass('staffSelected');
}, 500);
});
});
</script>
Sorry for the code dumb, just not sure where the problem is.
Any help would be appreciated.
Thank you.
EDIT!!! WORKING VERSION
Here is the completed working version of this employee gallery. Thank you to the people that helped me out. Hope someone else can find this useful.
http://codepen.io/daugaard47/pen/ctHru
First off all: Red border.
CSS
.selectedMember>img {
border-color: #981B1E;
}
Second: Hide unselected team members
CSS
#staffMember li {
display:none;
}
#staffMember li.staffSelected {
display:inherit;
}
Note that you created the second #staffMember with the 'staffSelected' class. Only the first one has to have it..
EDIT
Try this JS script:
$(document).ready(function()
{
$("#staffDirectory ul li").click(function()
{
var index = $("#staffDirectory ul li").index(this);
$('.staffSelected').fadeOut(500);
$('.selectedMember').removeClass('selectedMember');
$(this).addClass('selectedMember');
setTimeout(function() {
$('.staffSelected').removeClass('staffSelected');
$("#staffMember ul li:eq("+index+")").fadeIn(500).addClass('staffSelected');
}, 500);
});
});
Try simulating a click event on the first element of the directory after you define the click handler:
$(document).ready(function() {
$("#staffDirectory ul li").click(function() {
var index = $("#staffDirectory ul li").index(this),
newMember = $("#staffMember ul li").get(index);
$(".staffSelected").fadeOut(500, function () {
$(this).removeClass('staffSelected');
$(newMember).fadeIn(500).addClass('staffSelected');
});
});
$("#staffDirectory ul li:first-child").click();
});
Related
I want to know if there is a more efficient way to change the CSS of multiple elements when one is clicked.
I have working code whereby clicking on a subheading within the "About" section changes its color, the color of the other subheadings, and the opacity of reach respective paragraph. It looks like a lot of code to me. I imagine there is a simpler or at least more streamlined way to accomplish these things that I just don't know with my borderline intermediate JS skills.
const about = () => {
const paraOne = document.getElementById("para-one");
const paraTwo = document.getElementById("para-two");
const paraThree = document.getElementById("para-three");
const mission = document.querySelector(".mission");
const value = document.querySelector(".value");
const vision = document.querySelector(".vision");
mission.addEventListener('click', () => {
mission.classList.add("active");
value.classList.remove("active");
vision.classList.remove("active");
paraOne.classList.remove('zero');
paraTwo.classList.add('zero');
paraThree.classList.add('zero');
});
value.addEventListener('click', () => {
value.classList.add("active");
mission.classList.remove("active");
vision.classList.remove("active");
paraOne.classList.add('zero');
paraTwo.classList.remove('zero');
paraThree.classList.add('zero');
});
vision.addEventListener('click', () => {
vision.classList.add("active");
mission.classList.remove("active");
value.classList.remove("active");
paraOne.classList.add('zero');
paraTwo.classList.add('zero');
paraThree.classList.remove('zero');
});
}
about();
#about-center ul li:hover,
#about-center ul li.active {
color: black;
cursor: pointer;
}
.active {
color: black;
cursor: pointer;
}
#container {
position: relative;
}
#container p {
position: absolute;
left: 30%;
}
.zero {
opacity: 0;
}
#about ul,
#about p,
#about button {
margin-bottom: 2em;
}
#about-center p {
font-size: 2rem;
}
<div id="about-center">
<h1>About Us</h1>
<ul>
<li class="mission active">OUR MISSION</li>
<li class="value">our values</li>
<li class="vision">our vision</li>
</ul>
<div id="container">
<p id="para-one">This is our mission.
</p>
<p id="para-two" class="zero">These are our values.
</p>
<p id="para-three" class="zero">This is our vision.
</p>
</div>
<button>read more</button>
</div>
You can loop over all the li elements. Use this to add the event listeners initially. Then in the listener, you can loop again to do the appropriate class changes for the element that the user clicked on versus the other elements. And you can use the index of the iteration to change the class of the corresponding p element.
const about = () => {
const lis = document.querySelectorAll("#about-list li");
const paras = document.querySelectorAll("#container p");
lis.forEach(li => li.addEventListener("click", (e) => lis.forEach((li1, index) => {
if (li1 == e.target) {
li1.classList.add("active");
paras[index].classList.remove("zero");
} else {
li1.classList.remove("active");
paras[index].classList.add("zero");
}
})));
}
about();
#about-center ul li:hover,
#about-center ul li.active {
color: black;
cursor: pointer;
}
.active {
color: black;
cursor: pointer;
}
#about-center ul li {
color: grey;
}
#container {
position: relative;
}
#container p {
position: absolute;
left: 30%;
}
.zero {
opacity: 0;
}
#about ul,
#about p,
#about button {
margin-bottom: 2em;
}
#about-center p {
font-size: 2rem;
}
<div id="about-center">
<h1>About Us</h1>
<ul id="about-list">
<li class="mission active">OUR MISSION</li>
<li class="value">our values</li>
<li class="vision">our vision</li>
</ul>
<div id="container">
<p id="para-one">This is our mission.
</p>
<p id="para-two" class="zero">These are our values.
</p>
<p id="para-three" class="zero">This is our vision.
</p>
</div>
<button>read more</button>
</div>
I think this is as effective as it could be. Now, there are things which can be done to make it more readable (especially if you get more than three tabs later), but that won't change the effectiveness or would actually make it worse.
Like ... it would be more readable to make function which will turn "off" all tabs and call it from all click handlers, although technically it means it will be needlessly removing class which is not set on one of them.
Also, if you put the matching paragraphs IDs into HTML, you can use just one function for all and use event.currentTarget to recognize which one it was called for. Again, not worth the time if you have just three tabs, but if you have more ...
The thing is that I need to make a vertical images slider,so that when i press arrow down/arrow up every image changes it's position (the highest one goes bottom,the previous take it's place)
what it should look like:
what i have got so far:
$(function(){
var $vsliderboxes = $('#vsliderboxes'),
$vslidernav = $('#vslidernav'),
boxHeight = $vsliderboxes.height(),
current_index = 0;
function clickslide(){
clearInterval(intervalTimer);
clearTimeout(timeoutTimer);
timeoutTimer = setTimeout(function () {
intervalTimer = window.setInterval(autoslide, 2000);
}, 2500);
var index = $(this).index();
current_index = index;
$vsliderboxes.children().stop().animate({
top : (boxHeight * index * -1)
}, 500);
}
function autoslide(){
current_index++;
if (current_index >= $vsliderboxes.children().children().length) {
current_index = 0;
}
$vslidernav.find('a').eq(current_index).trigger('click');
}
$vslidernav.find('a').click(clickslide);
var intervalTimer = window.setInterval(autoslide, 2000),
timeoutTimer = null;
});
#vslidernav ul {
list-style: none;
padding: 0;
}
#vslidernav ul a {
padding: 0;
cursor: pointer;
height: 50px;
}
#vslidernav ul a:active {
color: #9C9A99;
}
#vslidernav ul a li {
height: 50px;
}
#vslidernav ul .active li {
}
.#vslidernav ul a:active {
background: transparent;
color: #9C9A99;
}
.vslider {
display: inline-block;
}
#vslidernav {
float: left;
width: 100px;
z-index: 1;
height: 250px;
}
#vsliderboxes {
position : relative;
overflow : hidden;
}
#vsliderboxes div {
height: 250px;
width: 900px;
}
#vsliderboxs-inner {
position : relative;
width : 900px;
height : 250px;
}
<div class="vslider">
<div id="vslidernav">
<ul>
<a id="1">
<li><img src="img/arrtop.gif"></li>
</a>
<a id="2">
<li><img src="img/arrdown.gif"></li>
</a>
<a id="3">
<li></li>
</a>
</ul>
</div>
<div id="vsliderboxes">
<div id="vsliderboxs-inner">
<div id="box1" class="active"><img src="img/slide1.gif"></div>
<div id="box2" class="inactive"><img src="img/slide2.gif"></div>
<div id="box3" class="inactive"><img src="img/slide3.gif"></div>
</div>
</div>
</div>
thanks for any advice
I think, that it isn't possible to solve this issue like you try to.
Because, when you work with the "top" property, you can't take one image from the top and append it to the other end because appending the image, will move the other images to another place --> the top property wouldn't be correct any more.
I think the contributed sliders (e.g. http://www.jssor.com/demos/vertical-slider.slider) work with the transform CSS property.
transform: translate3d()
Try to research about this property.
Roko C. Buljan answered on this page: loop carousel jquery
He uses a scrollTop loop for your problem.
I've also written a simple slider some time ago. I have now implemented the Roku C. Buljan method. Feel free to look at my code on Bitbucket.
https://bitbucket.org/d-stone/jqueryslider
An excerpt may help you:
value = prev_or_next == 'next' ? self.globals.slide_height : 0;
last = $('#container').find('> div:last');
first = $('#container').find('> div:first');
if(prev_or_next == 'prev') { // click on "next"-button
first.before(last); // put last element before first
settings.elements.inner.scrollTop(self.globals.slide_height); // set the scrollTop to 1 slide-height
}
// animation itself:
$('#container').stop().animate({scrollTop: value}, {
duration: settings.slide_speed,
done: function() {
if(prev_or_next == 'next') {
// put first item after last
last.after(first);
}
}
});
I'd advise you to validate your HTML (W3C Validator). There are some errors inside.
Invalid HTML can be the reason for some CSS and Javascript Errors.
Having a situation here!
I have multiple images in a div. On click of the image, it should toggle something like select and de-select but, at a time only one image should be selected on Click event or none.
Now, when using CTRL+Click, I should be able to select/toggle other images also, something like multi-select.
Following is my code for single-select
jQuery toggleClass with single select on - on both left click and right click
$(document).on('click', '#snapshotsRpt img', function(e) {
e.preventDefault;
$('#snapshotsRpt img.htmlView_img_select_toggle').not(this).removeClass('htmlView_img_select_toggle');
$(this).toggleClass('htmlView_img_select_toggle');
});
$(document).on('mousedown', '#snapshotsRpt img', function(e){
if(e.which == 3){
e.preventDefault;
$('#snapshotsRpt img.htmlView_img_select_toggle').removeClass('htmlView_img_select_toggle');
$(this).addClass('htmlView_img_select_toggle');
}
});
This is what I tried doing for ctrl-click but something is not quite right.
$(document).on('click', '#snapshotsRpt img', function(e) {
e.preventDefault;
// To detect ctrl + click
if(e.ctrlKey) {
//alert("need to select multiple");
$(this).toggleClass('htmlView_img_select_toggle');
}
});
Any direction will be helpful. Thank you!
Here is the demo which will hek
$(document).ready(function () {
$(".selectOption").click(function (e) {
if (e.ctrlKey) {
$(this).toggleClass("selected");
} else {
if ($(this).hasClass("selected")) {
$(".selectOption").removeClass("selected");
} else {
$(".selectOption").removeClass("selected");
$(this).addClass("selected");
}
}
});
});
.selectOption{
height:30px;
width:30px;
background:red;
margin-bottom:2px;
}
.selected{
background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="selectOption"></div>
<div class="selectOption"></div>
<div class="selectOption"></div>
<div class="selectOption"></div>
<div class="selectOption"></div>
May be this is not what you are expecting. But this could do the trick. **jQueryUI** has an interaction called **Selectable**
So the structure should be,
<ol id="selectable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ol>
CSS:
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
Script:
$(function() {
$( "#selectable" ).selectable();
});
A working Fiddle
I have a carousel Item Implemented by some one in a Webcenter Portal. I have the HTML code, CSS file of it and the JS.
The issue I have now occurs when the carousel has 5 Images and is auto sliding. Wait for the carousel to get to the fifth item and watch it scroll back to the first one. When it scrolls back, it cycles through all the Images rather than directly going to first.
The expected behavior is that it has to scroll from the 5th slide directly to 1st slide. I have no much experience with this particular JS and I would like to know where exactly I need to check for this particular behaviour and where exactly to do the changes.
Your question is simple. After 5 th slide next slide should be 1 st with continuation. Now it goes to 1 st but with reverse order and then cont. normally.
In this code you will get your solution.
Please try this code. jsfiddle
jquery code
$('document').ready(function () {
var width = 750;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;
var $slider = $('.slider');
var $slideContainer = $slider.find('ul');
var $slides = $slideContainer.find('li');
setInterval(function () {
$slideContainer.animate({
'margin-left': '-=' + width + 'px'
}, animationSpeed, function () {
currentSlide++;
if (currentSlide >= $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
});
html
<body>
<div id="container">
<div id="header">
<h3>J-Slider</h3>
</div>
<div class="slider">
<ul>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-13.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://th08.deviantart.net/fs70/PRE/f/2014/071/5/5/blue_space_by_whendell-d79zabi.jpg">
</li>
<li>
<img width="750px" height="400px" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/space-wallpapers-1.jpg">
</li>
</ul>
</div>
</div>
</body>
css
body {
font-family:Gerogia;
font-size:15px;
}
#container {
width:930px;
margin:50px auto 10px auto;
border-left:#666 solid 3px;
border-right:#666 solid 3px;
background:#f5f5f5;
padding:20px 30px;
}
#header {
padding:10px 0;
border-bottom:#ccc solid 1px;
overflow:hidden;
text-align:center;
}
h3 {
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
}
.slider {
width: 750px;
height: 400px;
padding-top: 10px;
margin-left: 75px;
overflow: hidden;
}
.slider ul {
width:8000px;
list-style-type:none;
}
.slider li {
float: left;
}
I'm using JavaScript to achieve a preview box when hovering over a list. I'll show you my code and then a live website on how it works, then I will say the problem.
HTML
<div id="content">
<div id="theDiv"><h1>Custom </h1></div>
<div id="theDiv1"><h1>Custom One</h1> </div>
<div id="theDiv2"><h1>Custom Two</h1></div>
<div id="theDiv3"><h1>Custom Three</h1></div>
<div id="theDiv4"><h1>Custom Four</h1></div>
<div id="theDiv5"><h1>Custom Five</h1></div>
<div id="theDiv6"><h1>Custom Six</h1></div>
<div id="theDiv7"><h1>Custom Seven</h1></div>
<ul id="nav">
<li><b>Austria ></b> <br/>
<ul>
<li>Factsheet </li><br/>
<li>Stylesheet </li><br/>
<li>References </li><br/>
</ul>
</li>
<li><b>Switzerland ></b> <br/>
<ul>
<li>Factsheet </li><br/>
<li>Stylesheet </li><br/>
<li>References </li><br/>
</ul>
</li>
<li><b>Explanation Page ></b> <br/>
<ul>
<li>Stylesheet </li><br/>
<li>References </li><br/>
</ul>
</li>
</ul>
</div>
CSS
ul {
padding-left:10px;
list-style: none;
width:150px;
}
ul li {
position: relative;
left:10px;
width:148px;
}
li ul {
position: relative;
display:none;
}
/* Styles for Menu Items */
ul li a {
display:block;
text-decoration: none;
line-height:2em;
height:2em;
padding:0 5px;
color:#666;
}
a:hover {color:#999;}
li ul li {width:139px; }
li.on ul { display:block; }
li.off ul{display:none; }
.linkhover:hover {text-decoration:underline; }
.linkxp:hover {text-decoration:underline; }
#theDiv, #theDiv1, #theDiv2, #theDiv3, #theDiv4, #theDiv5, #theDiv6, #theDiv7, #theDiv8 {
padding:10px;
float:right;
margin:0px 50px 0 0;
width:300px;
height:500px;
border:1px solid #000;
display:none;
}
JavaScript
$(window).load(function(){
$(".theLink").hover(
function () {
$("#theDiv").fadeIn();
},
function () {
$("#theDiv").fadeOut();
}
);
});
$(window).load(function(){
$(".theLink1").hover(
function () {
$("#theDiv1").fadeIn();
},
function () {
$("#theDiv1").fadeOut();
}
);
});
$(window).load(function(){
$(".theLink2").hover(
function () {
$("#theDiv2").fadeIn();
},
function () {
$("#theDiv2").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinka").hover(
function () {
$("#theDiv3").fadeIn();
},
function () {
$("#theDiv3").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinka1").hover(
function () {
$("#theDiv4").fadeIn();
},
function () {
$("#theDiv4").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinka2").hover(
function () {
$("#theDiv5").fadeIn();
},
function () {
$("#theDiv5").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinkb").hover(
function () {
$("#theDiv6").fadeIn();
},
function () {
$("#theDiv6").fadeOut();
}
);
});
$(window).load(function(){
$(".theLinkb1").hover(
function () {
$("#theDiv7").fadeIn();
},
function () {
$("#theDiv7").fadeOut();
}
);
});
Here is a link to a live view;
http://tubebackgrounds.co.uk/uni/demo/explanation.html#
As you can see, if you hover over the list style too quickly when they are being displayed, the other ones show up. I'm wondering if it is possible to use an if statement so only one
$(window).load(function(){
$(".theLink").hover(
function () {
$("#theDiv").fadeIn();
},
function () {
$("#theDiv").fadeOut();
}
);
});
can be enabled at once? Or maybe a way to make the fadeIn and fadeOut quicker.
part of the issue is just your css. you have each of your divs (#theDiv, #theDiv1, #theDiv2, etc...) floated next to each other. so when you hide one, the next one will pop up in its place. if you set their display propety to display:block you will set what I am saying. What you really want is those divs to be stacked one on top of another, like a deck of cards, then fade then in and out. To achieve this try adding this css:
#content {
position:relative;
}
#theDiv, #theDiv1, #theDiv2, #theDiv3, #theDiv4,#theDiv5, #theDiv6, #theDiv7, #theDiv8 {
border: 1px solid #000000;
display: none;
height: 500px;
margin: 0 50px 0 0;
padding: 10px;
position: absolute;
right: 0;
width: 300px;
}
now you javascript should work fine. you could make the javascript a bit nicer by using #beerwin suggestion and using a callback. that way the div fading in will only fadin once the previous one has faded out
Use callback function:
$(window).load(function(){
$(".theLink").hover(
function () {
$("#theDiv").fadeOut(function(){
$("#theDiv1").fadeIn();
});
});
});