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();
});
});
});
Related
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
Breakfast, starts off as a h4 and ends up with the same styling as the li elements, I was just wondering how to keep it as an h4.
Thanks!
HTML
<div class="recipe">
<h4>Breakfast</h4>
</div>
<div class="content">
<ul>
<li>Banana Berry Crepes - 250 Cals</li>
<li>Strawberry Parfaits - 170 Cals</li>
</ul>
</div>
CSS
.recipe {
cursor: pointer;
}
.content {
display: none;
}
h4 {
font-family: 'proxima_nova_alt_rgbold', sans-serif;
font-size: 30px;
margin: 40px 0 20px 0;
border; solid 4px
}
Javascript
$(document).ready(function(){
$(".recipe").click(function () {
$recipe = $(this);
$content = $recipe.next();
$content.slideToggle(500, function () {
$recipe.text(function () {
return $content.is(":visible") ? "Breakfast" : "Breakfast";
});
});
});
});
check this fiddle
I have changed your JS code as below
$recipe.children('h4').text(function () {
return $content.is(":visible") ? "Breakfast" : "Breakfast";
});
Hope this answered your question :)
I'm adapting this vertical slider for an pessoal project, but when i click into up or down arrow this works but without any animation. I wanted it to happen a up or down glide smooth depending on the clicked button. This the adapted JS:
// JavaScript Document
$(function() {
$("section#canais").hover(function() {
$("section#buttonsubir").fadeIn();
$("section#buttondescer").fadeIn();
}, function(){
$("section#buttonsubir").fadeOut();
$("section#buttondescer").fadeOut();
});
$(".cnext").click(function(e) {
e.preventDefault();
$("section#canais ul").css({'height' : ''}).animate({top:275}, function(){
$("#canais ul li").last().after($("#canais ul li").first());
$(this).css({'down':'0', 'height':'auto'});
});
});
$(".cprev").click(function(e) {
e.preventDefault();
$("#canais ul li").first().before($("#canais ul li").last().css({'top':-275}) );
$("section#canais ul").css({'height':''}).animate({top:275}, function(){
$("#canais ul li").first().css({'margin-left':'0'});
$(this).css({'left':'0', 'height':'auto'});
});
});
});
Here's my JsFiddle. Thanks.
You need to change a few things - first you need the ul to be positioned absolutely:
#left-content #canais-links {
position:absolute;
}
Then you need to fix your jQuery (the animation should be 36px as that is the height of your lis: in your css)
$(".cnext").click(function (e) {
e.preventDefault();
$("section#canais ul").css({
'height': ''
}).animate({
top: 36 + "px"
}, function () {
$("#canais ul li").last().insertBefore($("#canais ul li").first());
$(this).css({
'top': 0
});
});
});
$(".cprev").click(function (e) {
e.preventDefault();
$("section#canais ul").css({
'height': ''
}).animate({
top: -36 + "px"
}, function () {
$("#canais ul li").first().insertAfter($("#canais ul li").last());
$(this).css({
'top': 0
});
});
});
Example
You may want to wrap your ul in a div with a set height and overflow hidden so you can't see the divs once it goes up / down
Updated Fiddle
Another option...which would allow you to display all five items at once would be to use clone() and then remove the hidden element after the animation was completed. An example is here: http://jsfiddle.net/jme11/5Y54k/
I like the approach from Pete a lot but some benefits of this approach is that it uses css for showing and hiding the up and down arrows, reducing your jQuery code and because it's not dependent on positioning, it winds up making your markup and css smaller as well.
HTML:
<div id="left-content">
<div id="img-canais"></div>
UP
<ul id="canais-links">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
<li>
Page 4
</li>
<li>
Page 5
</li>
</ul>
DOWN
</div>
CSS:
#left-content {
width: 203px;
}
.direction {
opacity: 0;
transition:opacity .25s linear;
text-align: center;
display: block;
width: 203px;
}
#left-content:hover .direction {
opacity: 1;
}
#canais-links {
list-style: none;
margin: 0 0 25px 0;
padding: 0;
height: 300px;
display:block;
overflow:hidden;
}
#canais-links li {
height: 36px;
width: 100%;
background-color: #253B6B;
display: block;
margin-top: 25px;
}
#canais-links li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 25px;
font-weight: bold;
color: #FFF;
text-decoration: none;
display: block;
height: 36px;
text-align: center;
}
jQuery:
$('.cprev').click(function () {
$('#canais-links li:first-child').clone().insertAfter('#canais-links li:last-child');
$('li:first-child').slideUp('slow', function(){
$('li:first-child').remove();
});
});
$('.cnext').click(function () {
var copieditem = $('#canais-links li:last-child').clone()
copieditem.insertBefore('#canais-links li:first-child').hide();
$('li:first-child').slideDown('slow', function(){
$('li:last-child').remove();
});
});
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();
});
I want to clone the first-child button from #navCotainer and insert it after the last button.
Now the Problem is: The script kind of inserts the first child 3 times. what do I have to do to get ir right? And also, what am I doing wrong?
of course a link to the fiddle http://jsfiddle.net/ygjDR/ and the code:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<span class="moveNav8 left8">left</span>
<div id="navContainer" style="width: 100%; overflow-y: auto;">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">4</div>
</div>
<script type="text/javascript">
$(document).on('click','.moveNav8', function() {
if($(this).hasClass('left8')) {
$('.button').animate({
left: '-=305'
}, 1000, function() {
$('#navContainer div.button:first-child').addClass("xxxx");
$('#navContainer ').children('div.button:first-child').clone().css("background-color","orange").insertAfter("#navContainer div.button:last-child");
});
}
});
</script>
<style type="text/css">
.button {
position: relative; float: left;
width:100px;
height:50px;
background-color:green;
margin-right:10px;
}
.moveNav8 {
position:absolute;
top:100px;
left:0px;
background-color:red;
width:40px;
height:40px;
}
.moveNav8.right8 {
left:100px;
}
</style>
Try this:
http://jsfiddle.net/gtttG/
You need to add a check for $(".button:animated").length === 0.
Animation callback is invoked for every item, appending a button 4 times. Instead execute callback only once after the last animation using deferred pattern:
$(document).on('click', '.moveNav8', function () {
if ($(this).hasClass('left8')) {
$('.button').animate({
left: '-=305'
}, 1000).promise().done(function () {
$('#navContainer div.button:first-child').addClass("xxxx");
$('#navContainer').children('div.button:first-child').clone().css("background-color", "orange").insertAfter("#navContainer div.button:last-child");
})
}
});
http://jsfiddle.net/ygjDR/3/