I am trying to be able to click on a specific square and get a checkmark to appear over-top of it. I am going to want it to have a toggle effect, but I wanted to try to at least get the checkmark to show, which I am really having an issue getting it to even appear.
What am I doing wrong?
$('.package-img').click(function () {
//target.innerHTML = '<img src="images/checkmark-circle.png" class="checkmark-img total-center">';
$('.package-img').prepend('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">')
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
width: 50%;
height: 50%;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>
Use before method instead of prepend, otherwise your image is being added inside another image. Also use $(this).before... otherwise your checkmark will be added to all images with class package-img
$(this).before('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">')
var $img = $('<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img"/>').hide();
$('.package-img').before($img);
$('.package-img').click(function () {
$(this).prev().show();
});
$('.checkmark-img').click(function () {
$(this).hide();
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
width: 50%;
height: 100%;
z-index: 1;
position: absolute;
left: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>
It is understood what you are looking for. Basically you can "toggle" the checkmark image over the checkmark square image when you click on the checkmark square. The problem with this is once you put the checkmark over the square the toggle doesnt work anymore. I have come up with a solution that should work a little better.
Basically if we take advantage of the rules that when a label is selected that is bound to a <input type="checkbox" /> this will toggle the checked property of the checkbox.
We can then bind to this event in jQuery and show\hide the checkmark. In this instance we dont bind any click events to the images, but the change event of the checkbox. Something like the example below.
Now the question is:
Why did i use a checkbox
Well by using a checkbox we can capture the result in our form posts. It also makes it easy to identify what is checked by enumerating all the check boxes that have the checked property.
To have this sent to your server you will need to add a name property to each checkbox and also set the value property.
$('.calendar-check').on('change', function() {
if ($(this).prop('checked'))
$(this).parents('.calendar-wrap:first').find('.checkmark-img').show();
else
$(this).parents('.calendar-wrap:first').find('.checkmark-img').hide();
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition: 1s;
-webkit-transition: 1s;
position: relative;
}
#calendar-wrap,
#tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
display: none;
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.calendar-check {
display: none;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap" class="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<label for="package-check-1" class="package-check-toggle">
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img" />
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 1" class="checkmark-img" />
</label>
<input type="checkbox" class="calendar-check" id="package-check-1" />
</div>
<div id="calendar-wrap" class="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<label for="package-check-2" class="package-check-toggle">
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="calendar-img" />
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" alt="Package 2" class="checkmark-img" />
</label>
<input type="checkbox" class="calendar-check" id="package-check-2" />
</div>
Sample JSFiddle
EDIT
For completness sakes I figured best to show a CSS (3) only solution. This has no depenedcies on using jQuery at all. Again this takes into consideration a checkbox (which is value based) and toggles the checkmark based on the toggle.
The Markup is quite simple.
<div class="calendar-checkmark">
<input type="checkbox" id="checkbox-1" name="checkbox1" value="true" />
<label for="checkbox-1"></label>
</div>
Example:
.calendar-checkmark input[type=checkbox] {
display: none;
}
.calendar-checkmark label {
cursor:pointer;
display: block;
height: 384px;
width: 354px;
position:relative;
background: url('http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif') no-repeat center center transparent;
}
.calendar-checkmark label::after {
content:' ';
display: block;
height: 100%;
width: 100%;
position: absolute;
z-index:1;
display:none;
background: url('https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png') no-repeat center center transparent;
}
.calendar-checkmark input[type=checkbox]:checked + label::after {
display: block;
}
<div class="calendar-checkmark">
<input type="checkbox" id="checkbox-1" name="checkbox1" value="true" />
<label for="checkbox-1"></label>
</div>
The trick here is using Adjacent sibling selectors which allow you to select an adjacent sibling based of another element. So if we look at the css when the checkbox is checked it gets the Psudo-class :checked applied to it (similar to :hover etc). Then we use the adjacent + selector to locate the label.
Now the label element has a css background set to the image of the square box. Next it has the psudo-class ::after applied which creates our psudo-element that contains the checkbox. This is added after the element, when the checkbox is checked the psudo class :checked is addeed. This then changes the state of the psudo element by displaying the element.
Another Fiddle
This can be a lot simpler if we just remove the box images and create them via CSS. There will be less to download and we can then make the box's background transparent. This will allow us to just show and hide the checkmark that is already sitting behind each box.
$('.package-img').click(function () {
this.nextElementSibling.classList.toggle("hide");
});
parent { position:relative; }
.package-img {
border:3px solid black;
width: 110px;
height:110px;
background-color:rgba(0,0,0,0);
margin-left: 20%;
cursor: pointer;
position:relative;
display:inline-block;
}
.checkmark-img {
transition:1s;
width: 15%;
z-index: -1;
position:relative;
margin-left:-15%;
}
img.hide { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="product-titles">Package 1</h2>
<div class="parent">
<div class="package-img"></div>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide">
</div>
<h2 class="product-titles">Package 2</h2>
<div class="parent">
<div class="package-img"></div>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img hide">
</div>
1. absolutely position the Checkmark on top of the package image
2. Hide it
3. Use toggle to reveal it
since its hidden on top of it you will need to use the siblings selector to retrieve it
$('.checkmark-img').hide();
$('.package-img').click(function () {
$('.checkmark-img').toggle();
});
.package-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
width: 60%;
height: auto;
opacity: 1;
margin-left: 25%;
margin-top:10%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: absolute;
width: 50%;
height: 50%;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="calendar-wrap">
<h2 class="product-titles">Package 1</h2>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">'
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 1" class="package-img" id="calendar-img">
</div>
<div id="calendar-wrap">
<h2 class="product-titles">Package 2</h2>
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/835-200.png" class="checkmark-img">'
<img src="http://jwilson.coe.uga.edu/emt725/SqToAcuteTri/Square.gif" alt="Package 2" class="package-img" id="tp-img">
</div>
Related
What I want to do:
I want to add a "walkingMan" image under an element when its class is changed to activeCell. I know how to do it when the image is added to the front or back of the element using pseudo class, but as far as I know, there isn't something like :below that I can use to achieve the same effect. Is there a way in css I can use to micmic this?
What I have done:
I have added image below every upper cell and make it visible when the class is changed to activeCell. But I hope to find a more simple solution.
What it looks like:
Code: Simplified Code Example
You can use a single pseudo element on the .cell element and place a background image on it when it's active.
let activeIndex = 0;
const cells = [...document.querySelectorAll('.cell')];
setInterval(() => {
cells.forEach(cell => {
cell.classList.remove('activeCell')
});
cells[activeIndex].classList.add('activeCell');
activeIndex = activeIndex === cells.length - 1 ? 0 : (activeIndex + 1);
}, 300)
.cell {
display: inline-block;
border: 1px solid black;
margin-bottom: 1.2em;
}
.activeCell {
background-color: lightgrey;
position: relative;
}
.activeCell::after {
content: "";
position: absolute;
width: 1em;
height: 1em;
top: 1.3em;
left: calc(50% - .5em); /* Center the stickman. Position it half of its width before the parent center*/
background-image: url('https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png');
background-size:cover; /* Scale the stickman to completely cover the background area. */
}
<div>
<div class='top'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>
What about this: https://jsfiddle.net/147prwy5/3/
HTML
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
<div class="cell active">
<a>One</a>
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" />
</div>
CSS
.cell {
display: inline-block;
}
.cell a {
border: 1px solid black;
}
.cell.active a {
background-color: lightgrey;
}
.cell img {
width: 20px;
height: 20px;
display: none;
}
.cell.active img {
margin-top: 5px;
width: 20px;
height: 20px;
display: block;
}
I've never been a fan of the ::before and ::after pseudo classes mainly because I've personally noticed some oddities when trying to position things in Chrome vs IE (damn it IE!). Since most people here are going to give a solution using these pseudo classes (because that's somewhat what you asked) I thought I'd give a different solution using flexbox and more divs.
Not the most optimal for download size but I do like that it's not absolute positioning elements and if the squares get bigger or smaller it's pretty easy to handle that as a scss variable at the top of the file. This all uses only two values, your padding between boxes and the size of the boxes so it should be easy to update and maintain.
Anyway, have fun! Awesome question by the way :-)
.blocks {
display: flex;
}
.block {
flex: 0 0 20px;
margin: 0px 5px;
display: flex;
flex-direction:column;
}
.block > .square {
flex: 0 0 20px;
margin: 5px 0px;
background: grey;
}
.block > .space {
flex: 0 0 20px;
margin: 5px 0px;
}
.block.activeCell > .space {
background: green;
}
<div class="blocks">
<div class="block activeCell"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
<div class="block"><div class="square"></div><div class="space"></div></div>
</div>
<div class="blocks">
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
<div class="block"><div class="square"></div></div>
</div>
Using jQuery you can toggle the class upon clicking with this:
$('.cell').click(function() { //catch clicks on .cell
$('.cell').removeClass('activeCell'); //remove class "activeCell" from all
$(this).addClass('activeCell'); //add class "activeCell" to .cell clicked
});
Apply position: relative; to .top and .bottom:
.top,
.bottom {
position: relative;
}
And use the psuedoclass :before to create a image under the .activeCell
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
And remove this:
.walkingMan {
width: 20px;
height: 20px;
display: inline-block
}
And this:
<img src="https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png" alt="walkingMan" class='walkingMan'/>
And to add space between the divs .top and .bottom put a <br> between them.
$('.cell').click(function() {
$('.cell').removeClass('activeCell');
$(this).addClass('activeCell');
});
.cell {
display: inline-block;
border: 1px solid black;
cursor: pointer;
}
.top,
.bottom {
position: relative;
}
.activeCell {
background-color: lightgrey;
}
.activeCell:before {
content: "";
position: absolute;
bottom: -20px;
height: 20px;
width: 20px;
background-image: url("https://www.shareicon.net/data/512x512/2016/01/17/704754_people_512x512.png");
background-size: 20px 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div>
<div class='top'>
<a class='cell activeCell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
<br>
<div class='bottom'>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
<a class='cell'>One</a>
</div>
</div>
add .RunManActive Class for Active element
//clicking add active Class
$(".RunMan").click(function() {
$(".RunMan").removeClass('RunManActive');
$(this).toggleClass('RunManActive');
});
//timing add active Class
var i=0;
var $elm=$(".Animate");
setInterval(function(){
$elm.removeClass('RunManActive');
$elm.eq(i).toggleClass('RunManActive');
i=$elm.length<=i?0:i+1;
}, 1000);
.RunMan{
width:35px;
height:35px;
background-color:lightgray;
border:3px solid #fff;
float:left;
position: relative;
}
.RunManActive{
background-color:#eee;
border:3px solid lightgray;
}
.RunManActive > div{
width:35px;
height:35px;
position: absolute;
background-image:url(http://www.iconsfind.com/wp-content/uploads/2013/11/Objects-Running-man-icon.png);
background-size:cover;
top:100%;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RunMan"><div></div></div>
<div class="RunMan RunManActive"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<div class="RunMan"><div></div></div>
<br><br><br><br><br><br>
<div style=" width:100%">
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan "><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
<div class="Animate RunMan"><div></div></div>
You can do something like this, using CSS only. With :target selector you can apply a style to the element you need to hide / show.
.container {
display: inline-block;
width: 100px;
height: 200px;
}
.link {
display: block;
width: 100px;
height: 100px;
background: #ccc;
}
.walking-man {
display: none;
width: 100px;
height: 100px;
background: red;
}
#p1:target {
display: block;
}
#p2:target {
display: block;
}
#p3:target {
display: block;
}
#p4:target {
display: block;
}
height: 90px;
float: left;
}
.walking-man img {
width: 100%;
}
.walkin-man:target {
display: block;
}
<div class="container">
<div id="p1" class="walking-man"></div>
</div>
<div class="container">
<div id="p2" class="walking-man"></div>
</div>
<div class="container">
<div id="p3" class="walking-man"></div>
</div>
<div class="container">
<div id="p4" class="walking-man"></div>
</div>
I have a simple toggle checkbox feature that goes over product packages to select them. I created this in an input checkbox fashion to be able to capture the value. What I do not understand is how to capture the value for when only the checkbox is showing.
I know to capture the value I would do this:
$('#package2').val();
But how do I only get the value when it is 'activated'/'selected'. Then once it is selected and I have the value I am wanting to display it next to where it says 'Product Chosen'.
Also, you can see in the snippet or fiddle that when you click on both boxes and then click a box again to unselect it, that the "Proceed" goes away. Is there also a way to keep that showing for whenever any of the boxes are checked?
Here is a jsfiddle as well.
$('.calendar-check').on('change', function() {
if ($(this).prop('checked')) {
$(this).parents('.product-wrap:first').find('.checkmark-img').show('200');
$('#next1').show();
} else {
$(this).parents('.product-wrap:first').find('.checkmark-img').hide('200');
$('#next1').hide();
}
});
.package-img {
width: 60%;
height: auto;
margin-left: 20%;
cursor: pointer;
transition:1s; -webkit-transition:1s;
position: relative;
}
#calendar-wrap, #tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 1;
cursor: pointer;
}
.proceed-btn {
display: none;
transition:.5s; -webkit-transition:.5s;
}
.calendar-check {
display: none;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left-container">
<div id="calendar-wrap" class="product-wrap">
<h2 class="product-titles">Package 1</h2>
<label for="package1" class="package-check-toggle">
<img src="images/calendar-package.png" alt="Package 1" class="package-img" id="calendar-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check" id="package1" value="Photo Gift">
</div>
</div>
<div class="right-container">
<div id="tp-wrap" class="product-wrap">
<h2 class="product-titles">Package 2</h2>
<label for="package2" class="package-check-toggle">
<img src="images/tp-package.png" alt="Package 2" class="package-img" id="tp-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check" id="package2" value="Touch Points">
</div>
</div>
Product chosen
<div class="proceed-btn" id="next1">PROCEED</div>
How about
jQuery.fn.fadeBoolToggle = function(bool){
return bool ? this.fadeIn(1000) : this.fadeOut(1000);
}
$(function() {
$('.calendar-check').on('click', function() {
$(this).parents('.product-wrap:first').find('.checkmark-img').toggle(this.checked);
// $('#next1').toggle($('.calendar-check:checked').length > 0);
$('#next1').fadeBoolToggle($('.calendar-check:checked').length > 0);
var prods = [];
$('.calendar-check:checked').each(function() { prods.push($(this).val()) });
$("#prods").html("Product"+
(prods.length==1?"":"s")+
" chosen: "+prods.join(", ")
);
});
});
.package-img {
width: 60%;
height: auto;
margin-left: 20%;
cursor: pointer;
transition: 1s;
-webkit-transition: 1s;
position: relative;
}
#calendar-wrap,
#tp-wrap {
width: 100%;
position: relative;
}
.checkmark-img {
display: none;
width: 40%;
height: auto;
z-index: 1;
cursor: pointer;
}
.proceed-btn {
display: none;
//* transition: .5s;
-webkit-transition: .5s;*/
}
.calendar-check {
display: none;
}
.package-check-toggle {
position: relative;
height: 100%;
width: 100%;
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left-container">
<div id="calendar-wrap" class="product-wrap">
<h2 class="product-titles">Package 1</h2>
<label for="package1" class="package-check-toggle">
<img src="images/calendar-package.png" alt="Package 1" class="package-img" id="calendar-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check" id="package1" value="Photo Gift">
</div>
</div>
<div class="right-container">
<div id="tp-wrap" class="product-wrap">
<h2 class="product-titles">Package 2</h2>
<label for="package2" class="package-check-toggle">
<img src="images/tp-package.png" alt="Package 2" class="package-img" id="tp-img">
<img src="images/checkmark-circle.png" class="checkmark-img total-center">
</label>
<input type="checkbox" class="calendar-check" id="package2" value="Touch Points">
</div>
</div>
<div id="prods">Products chosen</div>
<div class="proceed-btn" id="next1">PROCEED</div>
in the code below I am trying to figure out how can I change "content"s z-index relatively to clicked "menu-item". I managed how to do this for menu items, but cannot find solution for the rest. In simple words I need to click #m1 and set Z-Index 10 for #c1 and so on.
HTML
<div id="content" class="container">
<div id="c1" class="content">content1</div>
<div id="c2" class="content">content2</div>
<div id="c3" class="content">content3</div>
<div id="c4" class="content">content4</div>
</div>
<div id="menu" class="container">
<div id="m1" class="menu-item"></div>
<div id="m2" class="menu-item"></div>
<div id="m3" class="menu-item"></div>
<div id="m4" class="menu-item"></div>
</div>
CSS
/*global*/
.container{
position: absolute;
width: 300px;
height: 100px;
}
/*content*/
.content{
position: absolute;
height: 100%;
width: 75%;
right: 0;
background: #354458;
text-align: center;
color: #fff;
line-height: 95px;
}
/*menu*/
.menu-item{
position: absolute;
width: 25%;
height: 100%;
background: green;
cursor: pointer;
transition: left 200ms ease-in-out;
}
.menu-item.closed{
left: 0 !important;
}
#m1{
left:0;
background: #DB3340;
}
#m2{
left: 25%;
background: #E8B71A;
}
#m3{
left: 50%;
background: #1FDA9A;
}
#m4{
left: 75%;
background: #28ABE3;
}
JQuery
$(document).ready(function(){
var menu = $('.menu-item');
menu.click(function(){
$(this).siblings(menu).css('z-index', "initial");
$(this).css('z-index', 11);
});
menu.click(function(){
menu.toggleClass("closed");
});
});
Working example: http://jsfiddle.net/8a3vqy5v/
No need to register multiple click events for the same element, they serve for your case same as a single binding.
You can hide and show the background content based on the menu index as follows within the click event, you can check the code snippet for full code:
var index = $(this).index();
$('.content').hide();
$('.content').eq(index).show();
Snippet :
$(document).ready(function(){
var menu = $('.menu-item');
menu.click(function(){
$(this).siblings(menu).css('z-index', "initial");
$(this).css('z-index', 11);
menu.toggleClass("closed");
var index = $(this).index();
$('.content').hide();
$('.content').eq(index).show();
});
});
/*global*/
.container{
position: absolute;
width: 300px;
height: 100px;
}
/*content*/
.content{
position: absolute;
height: 100%;
width: 75%;
right: 0;
background: #354458;
text-align: center;
color: #fff;
line-height: 95px;
}
/*menu*/
.menu-item{
position: absolute;
width: 25%;
height: 100%;
background: green;
cursor: pointer;
transition: left 200ms ease-in-out;
}
.menu-item.closed{
left: 0 !important;
}
#m1{
left:0;
background: #DB3340;
}
#m2{
left: 25%;
background: #E8B71A;
}
#m3{
left: 50%;
background: #1FDA9A;
}
#m4{
left: 75%;
background: #28ABE3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="container">
<div id="c1" class="content">content1</div>
<div id="c2" class="content">content2</div>
<div id="c3" class="content">content3</div>
<div id="c4" class="content">content4</div>
</div>
<div id="menu" class="container">
<div id="m1" class="menu-item"></div>
<div id="m2" class="menu-item"></div>
<div id="m3" class="menu-item"></div>
<div id="m4" class="menu-item"></div>
</div>
You could get the index of the clicked .menu-item element and then select the corresponding .content element using the index with the .eq() method:
Updated Example
var $menu = $('.menu-item');
$menu.click(function() {
$(this).css('z-index', 11).siblings($menu).add('.content').css('z-index', '');
if (!$(this).hasClass('closed')) {
$('.content').eq($(this).index()).css('z-index', 10);
}
$menu.toggleClass("closed");
});
But since that creates a weird transition bug, you could use the code from this example instead. It essentially listens to the transitionend event.
if there is a fixed number of elements (ie: 4) you could simply throw 4 rules, one for each :
$('#m1').click(function() {
$('.content').css('z-index', '');
$('#c1').css('z-index', '11');
});
$('#m2').click(function() {
$('.content').css('z-index', '');
$('#c2').css('z-index', '11');
});
$('#m3').click(function() {
$('.content').css('z-index', '');
$('#c3').css('z-index', '11');
});
$('#m4').click(function() {
$('.content').css('z-index', '');
$('#c4').css('z-index', '11');
});
if you want a single rule that would apply to any #mx - #cx couple, you could also try to get the id of the element clicked as a string and manipulate the string in order to replace the first letter with a 'c'
i am trying to use the tinyscrollbar plugin http://baijs.nl/tinyscrollbar/
like this:
$('#nvl2 .content').html( '<div class="scrollbar">'+
'<div class="track">'+
'<div class="thumb"><div class="end"></div></div>'+
'</div>'+
'</div>'+
'<div class="viewport">'+
'<div class="overview">' +$('#nvl2 .content').html()+'</div>'+
'</div></div>' ).attr('id','sc2');
$('#sc2').tinyscrollbar();
this is called right before of a ajax call that loads new content in #nvl2 but the tinyscroll is not enabled and firebug does not jump any errors
css:
/**************/
/* Tiny Scrollbar */
#nvl1 { }
#nvl1 .viewport { ¡overflow: hidden; position: relative; width:100% }
#nvl1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#nvl1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#nvl1 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#nvl1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#nvl1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#nvl1 .disable { display: none; }
/**************/
/* Tiny Scrollbar */
#nvl2{ }
#nvl2 .viewport { ¡overflow: hidden; position: relative; width:100% }
#nvl2 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#nvl2 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#nvl2 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#nvl2 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#nvl2 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#nvl2 .disable { display: none; }
and this is the sample of the content once the ajax call is done
<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;">
<div class="content" style="display: block;">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end">
</div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">
<span class="close"></span>
<div class="contentHeader">
<div class="contentHeaderImg">
<img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png">
</div>
<h2>Red Level Glove</h2>
<h4>The boutique hotel within the hotel</h4>
</div>
<div class="contentImg">
<img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg">
</div>
<div class="contentTxt">
<p>
Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne.
</p>
<p>
The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities.
</p>
</div>
</div>
</div>
</div>
<div class="extra" style="width: 418px;">
</div>
</div>
And before the ajax call and tinyscrollbar init exectuted:
<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;">
<div class="content" style="display: block;">
<span class="close"></span>
<div class="contentHeader">
<div class="contentHeaderImg">
<img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png">
</div>
<h2>Red Level Glove</h2>
<h4>The boutique hotel within the hotel</h4>
</div>
<div class="contentImg">
<img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg">
</div>
<div class="contentTxt">
<p>
Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne.
</p>
<p>
The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities.
</p>
</div>
</div>
<div class="extra" style="width: 418px;">
</div>
</div>
and can be tested here: http://toniweb.us/gm any idea what am i missing?
What did you mean by
...).attr('sc2');
in you code?
Function .attr() with one parameter is getter for attribute value. Did you want to set id for element? If this was your idea then better way is to insert this id to this html code:
<div id="sc2" class="scrollbar">
On your page when execution comes to line with tinyScrollbar initialization:
$('#sc2').tinyscrollbar();
There is no element with id 'sc2' and this is why scrollbar is not showing up and in firebug there are no errors.
Try using tinyscrollbar_update() method. I was facing issue while i have to change content on a ajax request. and it works for me fine. Full documentation at http://baijs.nl/tinyscrollbar/
This is a followup to my earlier question, Fade in/out js mouseover event.
I am looking to incorporate a div mouseover effect on a small menu on my page. My previous question solved the issue, but I had not incorporated the page layout into the function, which has now stopped it from working.
My basic code is:
<style type="text/css">
.hidden{
display:none;
}
#container {
margin: 0%;
padding: 0;
width: 100%;
background-color: #222222;
}
#left, #right {
float: left;
margin: 0% 0 0% 0%;
padding: 0%;
background-color: #000;
}
#right {
float: right;
margin: 0% 0% 0% 0;
}
.clear {
height: 0;
font-size: 1px;
margin: 0;
padding: 0;
line-height: 0;
clear: both;
}
</style>
<script type="text/javascript">
oldSelected = "home"
$ (document).ready(function(){
$ ("#products img").mouseover(function(){
$ (".description").stop(true, true);
var newSelected = $(this).attr("alt");
$ ("#" + oldSelected).fadeOut('normal',function(){
$ ("#" + newSelected).fadeIn();
});
oldSelected = newSelected
});
});
</script>
<body>
<div id="container" style="width: 974px; height: 200px;">
<div id="left" style="width: 200px; height: 200px;">
<div id="products" >
<img src="home.png" alt="home" />
<img src="services.png" alt="services" />
<img src="contact.png" alt="contact" />
</div>
</div>
<div id="right" style="width: 760px; height: 200px;">
<div class="description" id="home">
.. content ..
</div>
<div class="description" id="services">
.. content ..
</div>
<div class="description" id="contact">
.. content ..
</div>
</div>
</div>
I assume the mouseover effect has stopped working due to the products and description divs being relocated under new divs.
How do I go about adjusting the code to get the function working again under this layout? Would it work in a table layout instead?
You can try .slideDown and .slideUp
or .show() .hide() with duration