I've this HTML structure:
<div class="container">
<div class="list-wrapper">
<ul>
<li class="item-first">
</li>
</ul>
</div>
<div class="description-wrapper">
<div class="description-first"></div>
</div>
</div>
So is it possible to set the .description-first to opacity: 1; when hovering .item-first? Or is this just possible with JS? Thanks for your help!
As Strebler said, this is only possible with Javascript.
function MouseOver(value) {
document.getElementsByClassName("description-first")[0].setAttribute("style", "opacity: " + value + ";");
}
.description-first {
opacity:0;
}
<div class="container">
<div class="list-wrapper">
<ul>
<li onmouseover="MouseOver('1');" onmouseout="MouseOver('0');" class="item-first">hover here
</li>
</ul>
</div>
<div class="description-wrapper">
<div class="description-first">to make this appear</div>
</div>
</div>
Not possible. The closest you will get in css is using the .list-wrapper on hover like this:
.list-wrapper:hover + .description-wrapper > .description-first {
opacity: 1;
}
But that's not what you want I guess. :)
This is my solution. With my solution I can add a class depending on the index.
jQuery("li").hover(function () {
jQuery(".description-wrapper").children().eq(jQuery(this).index()).toggleClass("description-visible");
});
.description-wrapper div {
opacity: 0;
}
.description-visible {
opacity: 1 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="list-wrapper">
<ul>
<li class="item-first">First</li>
<li class="item-second">Second</li>
<li class="item-third">Third</li>
</ul>
</div>
<div class="description-wrapper">
<div class="description-first">First</div>
<div class="description-second">Second</div>
<div class="description-third">Third</div>
</div>
</div>
Related
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<div class="container-fluid">
<div id="header">
<div>
</div>
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class = "nav-tabs">A</li>
<li class = "nav-tabs">B</li>
<li class = "nav-tabs">C</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="a">
<div class="panel-body">A content</div>
</div>
<div class="tab-pane" id="b">
<div class="panel-body">B content</div>
</div>
<div class="tab-pane" id="c">
<div class="panel-body">C content</div>
</div>
</div>
</div>
<br>
<div class="row" id="container"> image </div>
</body>
This is the HTML code, I have a three column panel showing A, B and C using bootstrap.
Underneath the content, there is a container with id = "container" at the bottom of all panels.
Here is my question:
I want to only have id = "container" shown under panel A, B. However, I don't want the panel C showing id = "container" . Is there any way to realize this?
You can use Hide()
<script src="scripts/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$("#c").hide();
})
</script>
Try this using jQuery:
$("#c").hasClass("active") {
$("#container").hide()
} else {
$("#container").show()
}
Or if you prefer a more CSS method:
$("#c").hasClass("active") {
$("#container").css("visibility", "hidden")
} else {
$("#container").css("visibility", "visible")
}
First add the class for the all '''li''' items
class = "nav-tabs"
Second, we need to add '''$(document).ready(function()''' to refresh the page, thus the "class" will be updated
$(".nav-tabs").on( "click", function() {
$(document).ready(function() {
bindClick();
})
});
function bindClick(){
if ( $("#c").hasClass("active")){
$("#container").hide()
} else {
$("#container").show();
}
}
I'm new in js, I need to change several images at hover on the same imagine like this : http://www.revzilla.com/ on slider, any suggest?
thi is my html, in ct-image I have several images that move your mouse inside the container replaces with the other imgs :
<li class="product-primary clearfix">
<a href="https://validator.w3.org/nu/#textarea">
<div class="ct-image" style="background:url(imgs/product1.jpg)" data-image="imgs/product1.jpg" data-alt="">
<div class="banner-new"><span>new</span>
<p class="title-product-hidd">lorem</p>
</div>
<!--.banner-new-->
<div class="banner-acti">
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
<!--.banner-acti-->
</a>
<!--effetto all'hover-->
<div class="ct-hove">
<div class="text-pro">
<p class="text">I</p>
<p class="text">I</p>
<p class="tex">I</p>
</div>
<ul>
<li class="compare-icon"><i class="fa fa-eye"></i>
</li>
<li class="buy-icon"><i class="fa fa-heart-o"></i>
</li>
<li class="wishlist-icon"><i class="fa fa-database"></i>
</li>
</ul>
</div>
<!--.ct-hover-->
<div class="ct-descript-prod-left">
<p class="title-prod">Name</p>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<!--.ct-descript-pro-bt-->
<div class="ct-descript-prod-right">
<h4>€ 0.000.00</h4>
<ul>
<li class="imgLink" data-target="#">
<a href="#">
<img src="">
</a>
</li>
<li class="imgLink" data-target="#">
<a href="#">
<img src="">
</a>
</li>
</ul>
</div>
<!--.ct-descript-pro-bt-->
</li>
Simplest solution I have found for you:
$(document).ready(function() {
var timeout;
var flipImages = function($container) {
var amount = $container.data("amount");
var current = $container.data("current");
if(current >= amount){
current = 1;
} else {
current = current + 1;
}
var dataAttr = "image" + current;
var image = $container.data(dataAttr);
$container.fadeOut(200, function() {
$container.css("background-image", "url(" + image + ")");
$container.fadeIn(200);
$container.data("current", current);
});
timeout = setTimeout(function() {
flipImages($container);
}, 1000)
};
$(".ct-image").hover(
function() {
var $that = $(this);
timeout = setTimeout(function() {
flipImages($that);
}, 1000)
},
function() {
if(timeout) {
clearTimeout(timeout);
}
}
);
});
.ct-image {
display: block;
height: 300px;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ct-image" style="background-image:url(http://dummyimage.com/300x300/00eb1b/fff)"
data-image1="http://dummyimage.com/300x300/00eb1b/fff"
data-image2="http://dummyimage.com/300x300/0c00eb/fff"
data-image3="http://dummyimage.com/300x300/eb8500/fff"
data-image4="http://dummyimage.com/300x300/eb0014/fff"
data-current="1"
data-amount="4">
<!-- your content-->
</div>
Note. Solution is without flipping animation. It requires change in structure of your code.
are you looking for something like that ?
$('.carousel').mouseleave(function(){
var currentActiveImage = $('.item-show');
var nextActiveImage = currentActiveImage.next();
if(nextActiveImage.length == 0)
{
nextActiveImage = $(".carousel #item").first();
}
currentActiveImage.removeClass('item-show').addClass('item-hidden');
nextActiveImage.addClass('item-show').removeClass('item-hidden');
});
.item-show {
display: inline-block;
}
.item-hidden{
display: none;
}
.info {
position:absolute;
top: 231px;
left: 505px;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<div id="item" class="item-show">
<img src="http://www.bu.edu/khc/files/2012/09/Video11_700x300.jpg" />
<div class="info">
<span>some text</span>
<p>Price: 88$</p>
</div>
</div>
<div id="item" class="item-hidden">
<img src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/traffic-700x300.jpg" />
<div class="info">
<span>This is Cool</span>
<p>Price: 99$</p>
</div>
</div>
<div id="item" class="item-hidden">
<img src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/heaven-700x300.jpg"/>
<div class="info">
<span>This is train</span>
<p>Price: 100$</p>
</div>
</div>
I've been trying to get the automatic update on my navbar but i cant get it to work.
Here is my code: http://pastebin.com/YTHaBD0i
<div id="header">
<ul class="nav-list">
<li class="download selected">Download</li>
<li class="features">Features</li>
<li class="method">Method</li>
<li class="purchase">Purchase</li>
</ul>
</div>
<div id="footer">yey productions © 2016</div>
<div id="fullpage">
<div class="section " id="section0">
<div class="intro">
<h1>Download</h1>
<p>Lorem Ipsum</p>
</div>
</div>
<div class="section" id="section1">
<div class="slide" id="slide1">
<div class="intro">
<h1>Features</h1>
<p>Cheese.</p>
</div>
</div>
<div class="slide" id="slide2">
<h1>Cheese2</h1>
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>Yey</h1>
</div>
</div>
<div class="section" id="section3">
<div class="intro">
<h1>Yey2</h1>
</div>
</div>
</div>
Help would be much appreciated!
Greetz,
Assuming you are using jQuery, you will need a function that fires every time you scroll.
From there, you need to detect which elements are in view.
Once you know which elements are in view, clear any currently active elements with the .selected class, then choose which one you want to be .selected and add the .selected class.
Edit for more detail:
Below is a pure JavaScript solution, which I found here. This should be close to a drop-in solution!:
(function() {
'use strict';
var section = document.querySelectorAll(".section");
var sections = {};
var i = 0;
Array.prototype.forEach.call(section, function(e) {
sections[e.id] = e.offsetTop;
});
window.onscroll = function() {
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
for (i in sections) {
if (sections[i] <= scrollPosition) {
document.querySelector('.selected').setAttribute('class', ' ');
document.querySelector('a[href*=' + i + ']').setAttribute('class', 'selected');
}
}
};
})();
I am creating a FAQ page where I need to put all my questions on the left side of the div. When I click on the questions, the respective answer for the question should be visible on the right side of the div, on the same page. I have tried many different things, but I'm still not able to do it.
Also, how can I make only the answer to the respective question visible?
Thanks in advance.
Using JQuery,
HTML:
<div> <-- For each question -->
<div style="float: left;" onclick="showAnswer(this);">Question</div>
<div style="float: right; display: none;">Answer</div>
</div>
Javascript:
function showAnswer(cntrl)
{
$(cntrl).next().toggle();
}
check this out
HTML
<table>
<tr><td class="question">question1?</td><td class="answer">answer1</td></tr>
<tr><td class="question">question2?</td><td class="answer">answer2</td></tr>
<tr><td class="question">question3?</td><td class="answer">answer3</td></tr>
<tr><td class="question">question4?</td><td class="answer">answer4</td></tr>
<tr></tr>
</table>
SCRIPT
$(document).ready(function () {
$(".answer").hide();
$(".question").click(function () {
$(".answer").hide();
$(this).parent().children(".answer").show();
});
});
You could also store the ID of the answer in the Tag attribute, and then simply when clicked get the tag, and show the corresponding element.
<script>
$(document).ready(function() {
$('#answers div').hide();
$('#questions ul li').click(function() {
var answer = $(this).attr('tag');
$('#' + answer).show();
});
});
</script>
<div id="questions" style="float: left;">
<ul>
<li tag="answer1">Question 1</li>
<li tag="answer2">Question 2</li>
<li tag="answer3">Question 3</li>
<li tag="answer4">Question 4</li>
</ul>
</div>
<div id="answers" style="float: right;">
<div id="answer1">This is answer 1</div>
<div id="answer2">This is answer 2</div>
<div id="answer3">This is answer 3</div>
<div id="answer4">This is answer 4</div>
</div>
Simple JS:
function showDiv(id) {
for (var i=1;i<=4;i++)
{
document.getElementById('div'+i).style.display = 'none';
}
document.getElementById('div'+id).style.display = 'block';
}
html:
<div class="qaContainer" style="width:400px;">
<div class="leftContainer" style="float:left;">
Question 1<br />
Question 2<br />
Question 3<br />
Question 4<br />
</div>
<div class="rightContainer" style="float:right;">
<div id="div1" style="display:block;">Answer1</div>
<div id="div2" style="display:none;">Answer2</div>
<div id="div3" style="display:none;">Answer3</div>
<div id="div4" style="display:none;">Answer4</div>
</div>
</div>
So assuming you have questions on left side and answers on right side You HTML should look like this
<div id="questions">
<ul>
<li data-qnum="1"></li>
...
<li data-qnum="N"></li>
</ul>
</div>
<div id="answers">
<ul>
<li data-ansnum="1"></li>
...
<li data-ansnum="N"></li>
</ul>
</div>
And CSS should be something like this
#questions,#answers{
float:left;
}
.specialClass{
color:red;
}
Now jquery should be something like this:
$(document).ready(function(){
//hide all answers
$("#answers").find("li").hide();
//and then add click handler on questions
$("#questions").on("click","li",function(e){
// preventdefault prevents any default action so that you may replace li with a or any other tag
e.preventDefault();
// you may also add any special formatting on the question clicked like making it red
$("#questions").find("li").removeClass('specialClass');
$(this).addClass('specialClass');
var qnum = $(this).data('qnum');
//hide all shown answers
$("#answers").find("li").hide().each(function(){
// show the correct answer
var anum =$(this).data('ansnum');
if(anum==qnum)
{$(this).toggle(); } });
});
Also see this fiddle http://jsfiddle.net/s4HEh/1/
PS: Also note that this jquery uses proper event delegation syntax and does not uses Id on question so that you may use your id for something more important
Try this .. just a simple way of doing it
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
#left
{
width:50%;
background-color:Yellow;
float:left;
}
#right
{
width:50%;
background-color:Red;
float:right;
}
.answers
{
display:none;
}
</style>
<script src="../JS/jQuery.js" type="text/javascript"></script>
<script type="text/javascript">
function showAnswer(ans) {
$(".answers").hide();
$("#" + ans).toggle();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="left">
<ul id="questions">
<li onclick="showAnswer('ans1')">q1</li>
<li onclick="showAnswer('ans2')">q2</li>
</ul>
</div>
<div id="right">
right
<ul id="answers">
<li id="ans1" class="answers">Answer1</li>
<li id="ans2" class="answers">Answer2</li>
</ul>
</div>
</div>
</form>
</body>
</html>
Let me know if this helped. or if you have any queries.
i try to make a easy menu with jquery but seems that im doing something wrong can anyone tell me what im doing wrong... i check other threads but i can't find the solution to this problem, thanks for your time guys
<nav id="header">
<ul>
<li class="one">one</li>
<li class="two">two</li>
</ul>
</nav>
<div class="one-div">
<div>
<h1>title</h1>
<p>text here</p>
</div>
</div>
<div class="two-div">
<div>
<h1>title</h1>
<p>text here</p>
</div>
</div>
</code>
// in the css of the div i got the display:"none";
$('.one').click(function() {
if ($(".one-div").is(":hidden")) {
$(".one-div").slideDown("slow");
} else {
$(".one-div").hide();
}
});
$('.two').click(function() {
if ($(".two-div").is(":hidden")) {
$(".two-div").slideDown("slow");
} else {
$(".two-div").hide();
}
});
CSS
.one { display:block; }
.two { display:none; }
JS
var buttons = $(".one,.two").on("click", function(){
buttons.slideToggle();
})