Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to make a Tumblr page. The idea is to have several book titles listed on the left side that, when hovered over, display the information for said book on the right side.
Example
There, "Example 2" is being hovered over in the blue box, so its respective information appears in the red box on the right. If I were to hover over "Example 3" from there, the information box for "Example 2" would fade out while the one for "Example 3" would fade in. I hope I'm make some sort of sense here.
Now, I know I could achieve this with pure CSS, but I imagine that would involve creating a custom CSS class for each title in the list. Is there any other way of potentially doing this while avoiding the CSS dance?
Pure CSS, one class for all titles - Codepen
HTML
<div class="menu">
Example 1
<div class="show">
<h1>EXAMPLE 1</h1>
<hr>
<p>text here</p>
</div>
Example 2
<div class="show">
<h1>EXAMPLE 2</h1>
<hr>
<p>text here</p>
</div>
Example 3
<div class="show">
<h1>EXAMPLE 3</h1>
<hr>
<p>text here</p>
</div>
Example 4
<div class="show">
<h1>EXAMPLE 4</h1>
<hr>
<p>text here</p>
</div>
</div>
CSS
body, html {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.menu {
width: 120px;
height: 300px;
background-color: #2F43B7;
}
.menu a {
color: #fff;
text-decoration: none;
padding: 10px 15px;
display: block;
}
.menu a:hover + .show { /* Select .show that is immediately after a */
opacity: 1;
}
.show {
transition: 500ms;
opacity: 0;
background-color: #B72F2F;
position: absolute;
top: 0;
left: 130px;
width: 400px;
height: 300px;
text-align: center;
}
.show h1 {
font-size: 46px;
margin-bottom: 0;
}
.show h1,
.show p {
color: #fff;
}
.show hr {
width: 90%;
border: 2px solid #000;
}
Same effect with jQuery:
$(".show").css("opacity", 0);
$("a").hover(
function(){
$(this).next(".show").stop().fadeTo("slow",1);
},
function(){
$(this).next(".show").stop().fadeTo("slow",0);
});
Related
This question already has answers here:
Cleanest way to get the next sibling in jQuery
(3 answers)
Closed 2 years ago.
I have a h3 element and a p element which are inside a div element ,like this:
<div class="question">
<h3> *a question* <img class="arrow" src="" alt="an-arrow-img"> </img> </h3>
<p> *an answer* </p>
</div>
And I have a class named "show" in my css file, which looks like this:
//shows the answer when I click the h3 element
.show{
display: block;
}
on the website, I'm trying to make the questions-answers look like this:
show-hide p element
I've used javascript to toggle the class "show" when I click the questions (h3 elements) but I toggle them all and can't figure out how i can select the one I've clicked. My javascript code is this one till now:
$("h3").on("click", function(){
$("p").toggleClass("show");
});
Is it my HTML structure that's wrong, or is there a way to combine the $(this) selector to show the answer only to the question I've clicked?
var question = document.getElementsByClassName("question");
var i;
for (i = 0; i < question.length; i++) {
question[i].addEventListener("click", function() {
this.classList.toggle("active");
var answer = this.nextElementSibling;
if (answer.style.maxHeight) {
answer.style.maxHeight = null;
} else {
answer.style.maxHeight = answer.scrollHeight + "px";
}
});
}
.question {
background-color: #2d6596;
color: #f1f1f1;
cursor: pointer;
padding: 18px;
width: 100%;
border: 1px solid white;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .question:hover {
background-color: #1a364f;
}
.question:after {
content: '\002B';
color: #f1f1f1;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.answer {
padding: 0 18px;
background-color: #f2f2f2;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<button class="question">The question</button>
<div class="answer">
<p>The answer</p>
</div>
<button class="question">The question</button>
<div class="answer">
<p>The answer</p>
</div>
<button class="question">The question</button>
<div class="answer">
<p>The answer</p>
</div>
Use JQuery.next() to select sibling of $this.
$("h3").on("click", function(){
$(this).next("p").toggleClass("show");
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am brand spanking new to HTML so please excuse the lack of knowledge. I am currently trying to set up a little website and I want to have three sections that a user can click on that will route the user to a different part of the website. Simply put, I want three sections, aligned left, center, and right that is able to be shown on the same line. Every time I am attempting this however, I set up one section on the left, and then I can get a section on the center and the right, but it is going on another line horizontally.
How can I get all three sections to be on the same horizontal line and simply just left, right and center?
The trick is to use display: inline-block although there are many ways to do this.
Suggest you look into flexbox as this will make your future coding life a lot easier.
#container {
width: 100%;
height: 500px;
text-align: center;
}
#left,
#center,
#right {
width: 20%;
height: 100%;
display: inline-block;
}
#left {
background-color: red;
}
#center {
background-color: green;
}
#right {
background-color: blue;
}
<div id='container'>
<div id='left'></div>
<div id='center'></div>
<div id='right'></div>
</div>
<html>
<head>
<style>
#parent-container {
width: 100%;
height: 500px;
text-align: center;
}
#left,
#center,
#right {
width: 20%;
height: 100%;
position: relative;
display: inline-block;
}
#left {
background-color: red;
}
#center {
background-color: yellow;
}
#right {
background-color: green;
}
</style>
</head>
<body>
<div id='parent-container'>
<div id='left'>
Left
</div>
<div id='center'>
Center
</div>
<div id='right'>
Right
</div>
</div>
</body>
</html>
Use bootstrap to align your divs.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
https://getbootstrap.com/docs/4.0/layout/grid/
This question already has answers here:
Scrollable div to stick to bottom, when outer div changes in size
(7 answers)
Closed 5 years ago.
I want to make a chat application. my problem is, when my textbox increase it height, the chat-container reduce it height from bottom.
I want the chat container reduce it height from top.
For example:
This is my chat-box looklike. And, when my textbox increase it height, it'll show like this
What i expected is like this
And also, when the chat-container is not at bottom, they also reduce it height from top too. like this
This is my code
.chat-container, .chat-content, p, .chat-input {
box-sizing: border-box;
padding: 10px;
border: 2px solid black;
}
.chat-container {
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
}
.chat-content {
width: 100%;
overflow: auto;
flex-grow: 1;
}
.input-here {
width: 100%;
max-height: 150px;
}
.input-here {
border: 2px solid red;
}
<div class="chat-container">
<div class="chat-content">
<p>Hello</p>
<p>This is example words.</p>
<p>This is another example #1</p>
<p>This is another example #2</p>
<p>This is another example #3</p>
<p>This is another example #4</p>
<p>This is another example #5</p>
</div>
<div class="chat-input">
<div contenteditable="true" class="input-here"></div>
</div>
</div>
Sorry for my bad english.
Thank you so much.
I think this is what you needed. Changes:
A bit of javascript added to scroll the chat content to the bottom when input is being typed using onkeyUp function.
A overflow-y:scroll added to your chat input so that the text doesn't overflow the max-height otherwise it normally does.
You also might want to reduce the max-height of .input-here to a lower value and it will look much better. Hope, it helps.
// Store your div in a variable
var objDiv = document.getElementById("chat");
// Execute the function once on load
myFunction();
function myFunction() {
objDiv.scrollTop = objDiv.scrollHeight;
}
.chat-container,
.chat-content,
p,
.chat-input {
box-sizing: border-box;
padding: 10px;
border: 2px solid black;
}
.chat-container {
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
}
.chat-content {
width: 100%;
overflow: auto;
flex-grow: 1;
}
.input-here {
width: 100%;
max-height: 100px;
overflow-y: scroll;
}
.input-here {
border: 2px solid red;
}
<div class="chat-container">
<div class="chat-content" id="chat">
<p>Hello</p>
<p>This is example words.</p>
<p>This is another example #1</p>
<p>This is another example #2</p>
<p>This is another example #3</p>
<p>This is another example #4</p>
<p>This is another example #5</p>
<p>This is another example #6</p>
<p>This is another example #7</p>
<p>This is another example #8</p>
</div>
<div class="chat-input">
<div contenteditable="true" class="input-here" onkeyup="myFunction()"></div>
</div>
</div>
I have a main div under which there can be one or two sub divs. When there are two sub-divs, I would want them to be displayed side-by-side. But If I have only one sub div, then I'd want it to be displayed in the center. Can this be achieved by using CSS or should I take help of JavaScript? Using the following CSS I'm able to achieve the side-by-side part of it. But I'm not sure how to go forward when there is only one sub div
HTML:
<div id="maindiv">
<div class="subdiv">
<p>Div One</p>
</div>
<div class="subdiv">
<p>Div Two</p>
</div>
</div>
CSS:
div.subdiv {
float: left;
padding: 20px;
}
div#maindiv {
border: 2px solid black;
height: 120px;
width: 200px;
}
Use display:inline-block instead of float:left. Try to remove the second sub div in my example fiddle and you can see the desired result.
div.subdiv {
display:inline-block;
padding: 20px;
}
div#maindiv {
border: 2px solid black;
height: 120px;
width: 200px;
text-align:center;
}
DEMO
I have a simple tooltip which has long JavaScript code in the divs.
I would to make it is as simple way
could any one help please
here is my code
<div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool
<div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;">
<div class="tool_wrapper">
<div class="tooltip_top_new"></div>
<div class="tooltip_middle_new">
<div class="content">
<p>Please holder actuall text</p>
<p>Please holder actuall text</p>
</div>
</div>
<div class="tooltip_bot_new2"></div>
</div>
</div>
</div>
css
.tooltip_top_new{
background:url(../images/n_tooltip_top.png) no-repeat;
height:9px;
width:212px;
}
.tooltip_middle_new{
background:url(../images/n_tooltip_middle.png) no-repeat;
width:212px;
}
.tooltip_middle_new .content{
padding:2px 13px 1px;
}
.tooltip_middle_new .content p{
line-height: 1.3;
margin-bottom: 1em;
text-align: left;
}
.tooltip_bot_new2{
background:url(../images/n_tooltip_bot2.png) no-repeat;
height:21px;
width:212px;
}
.Question_di{
position:relative;
}
.pbc11_ttpos1_1Q_di {
border: 0 solid #FF0000;
}
.toolTip_new {
background: none repeat scroll 0 0 transparent;
color: #5C5C5C;
display: none;
font: 10px/12px Tahoma,Geneva,sans-serif;
left: -173px;
top: -90px;
position: absolute;
z-index: 1000;
}
the thing is that I have to copy & paste onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" where ever using the tooltips,I would like to avoid it.
JQueryTools includes a Tooltip module which will get rid of a big chunk of your code.
http://jquerytools.org/demos/tooltip/index.html
It's also possible to create tooltips with no JavaScript at all, using HTML and CSS along these lines:
<div class="has-tooltip">
<button class="huge red">You Know You Wanna...</button>
<div class="tooltip">Do NOT Press This Button.</div>
</div>
And in CSS:
.has-tooltip .tooltip {
position: absolute;
display: none;
<style code to position (with margin-left and margin-top)
and make the tooltip box look how you want>
}
.has-tooltip:hover .tooltip {
display: block;
}
Google "CSS Tooltips" to see lots of examples.