I have a set of page anchors that using JQuery are set where the anchor links show a pop-up tool tip to say what the anchor is called.
I want to be able to take the h4 title of the page anchor and replace the title of the anchor link using JQuery.
Here is the mark up of the one of the anchors:
<a name="section1">
<h4 id="sectiontitle1">Overview</h4>
</a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
Here are the links to said page anchors:
<div class="article-anchors">
<ul>
<li class="to-top"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="to-bottom"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></li>
</ul>
</div>
Script for the solution:
$(document).ready(function() {
$('.article-anchors li a').mouseenter(function() {
var title = $(this).attr('title');
$(this).attr('title', $("[name=" + title + "] h4").html());
$(this).data('tipText', title)
$('<p class="tool-tip"></p>')
.text(title)
.appendTo('body')
.fadeIn('slow');
}).mousemove(function(e) {
var mousex = e.pageX + -130;
var mousey = e.pageY + -40;
$('.tool-tip')
.css({
top: mousey,
left: mousex
})
}).mouseout(function() {
$('.tool-tip').fadeOut();
});
$('.to-top').click(function(e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
$('.to-bottom').click(function() {
$('html,body').animate({
scrollTop: $(document).height()
}, 700);
return false;
});
$('a:contains("section")').css('text-transform', 'uppercase');
});
so the pop ups tool tips when hovering over should show:
section 1 = Overview
section 2 = Main Structure
section 3 = Support
section 4 = Contact
final UI
what would be the best way to achieve this? I have tried :contains, but this has brought me no joy.
TIA.
This is the fiddle for the problem: fiddle link
to mention, that the jquery that drives the pop-up tool tip is heavily dependent on the css and doesn't seem to want to play ball, but if you hover over the numbered bullets on the right, the titles show up and need to match the titles of each section, 1 will be overview, 2 will be main structure etc.
$(function(){
var popupTitle = $('<p class="tool-tip"></p>').appendTo($('body')).hide();
// Find your links, but we could have generated your links from the client side
$('div.article-anchors ul li a[href^="#"]').each(function(){
var ref = $(this),
anchor = ref.attr('href') || '', // Find the #anchor
pound = anchor.indexOf('#'); // Find the location of #
// Verify
if (pound >= 0 && (pound + 1) < anchor.length) {
// Remove the # sign
anchor = anchor.substring(pound + 1);
// Find and set the title from the first h4 tag
ref.attr('floatTitle', $('a[name="'+anchor+'"] h4:first').text());
ref.attr('title', '');
}
}).mouseenter(function() {
var title = $(this).attr('floatTitle');
popupTitle.stop().hide()
.text(title)
.fadeIn('slow');
}).mousemove(function(e) {
var mousex = e.pageX + -130;
var mousey = e.pageY + -40;
popupTitle
.css({
top: mousey,
left: mousex
})
}).mouseout(function() {
popupTitle.fadeOut();
});
$('.to-top').click(function(e) {
e.preventDefault();
$('html,body').animate({
scrollTop: 0
}, 700);
});
$('.to-bottom').click(function() {
$('html,body').animate({
scrollTop: $(document).height()
}, 700);
return false;
});
$('a:contains("section")').css('text-transform', 'uppercase');
});
/*article anchors*/
.article-anchors {
display: block;
position: fixed;
right: 20px;
top: 50%;
}
.article-anchors ul {
list-style: none;
}
.article-anchors ul li:first-child i,
.article-anchors ul li:last-child i {
padding: 0;
text-align: center;
display: block;
font-size: 39px;
width: 46px;
height: 46px;
color: #0485c2;
margin: 0 0 20px 0;
}
.article-anchors ul li {
padding: 0;
margin: 0;
}
.article-anchors ul li a {
position: relative;
right: 0px;
z-index: 9999;
display: block;
width: 36px;
margin: 0 0 20px 0;
background-color: #E9F2F7;
border: 3px solid #0485c2;
color: #0485c2;
border-radius: 100px;
text-align: center;
padding: 8px 2px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.tool-tip {
display: none;
position: absolute;
margin-bottom: 20px;
width: auto;
padding: 6px 8px;
font-size: 16px;
font-weight: bold;
line-height: 24px;
color: #9EC483;
background-color: #CFE5BF;
border: 1px solid #9EC483;
border-radius: 3px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="article-anchors">
<ul>
<li class="to-top"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li class="to-bottom"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i></li>
</ul>
</div>
<a name="section1"><h4 id="sectiontitle1">Overview 1</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
<a name="section2"><h4 id="sectiontitle2">Overview 2</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
<a name="section3"><h4 id="sectiontitle3">Overview 3</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
<a name="section4"><h4 id="sectiontitle4">Overview 4</h4></a>
<p>
Lorem ipsum dolor sit amet, brute ocurreret disputando vis te.
Has ludus splendide ex, ei mea habemus invidunt voluptatibus,
nihil prompta deleniti eu mea. Id has alterum appellantur
delicatissimi, an vix justo mentitum.Est
cu illud nihil. Ei mei iisque accumsan reprimique.
</p>
Full-page the snippet to see it better.
Your mouseenter function should look like this
$('.article-anchors li a').mouseenter(function() {
var title = $(this).attr('title');
$(this).attr('title', $("[name="+title +"] h4").html());
})
Related
Hi I'm trying to make a scrollbox in React responsive. It works on web view but when I go to mobile, it doesn't resize. How can I fix this? Here is the CSS code:
.frame {
background-color: rgba(0, 0, 0, 0.349);
padding-top: 10px;
/* margin-top: 20px; */
margin-bottom: 20px;
margin-left: -10px;
margin-right: -10px;
position: relative;
display: table-cell;
}
and the scrollbox HTML code is:
<div class= "frame"
style={{width:"1100px",
height: "415px",
overflow:"auto",
padding:"2px",
paddingTop: "10px"}}>
Thank you!
The issue is that you're hardcoding the width of the scrollbox by applying a fixed pixel width value via the style attribute on the element.
We'd need to see more of your code in action to give precise advice, but here are a few things to try:
width: "100%"
Remove width, and instead use maxWidth: "1100px"
Also, if you're using non-inline CSS to style the element via the .frame classname, consider moving all your other styling properties to the non-inline CSS as well, instead of mixing inline and non-inline styling techniques.
<div id="box">
Deutsches Ipsum Dolor id latine Fußballweltmeisterschaft complectitur pri, mea meliore denique Anwendungsprogrammierschnittstelle id. Elitr expetenda nam an, Apfelschorle ei reque euismod assentior. Odio Freude schöner
Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
Deutsches Ipsum Dolor id latine Fußballweltmeisterschaft complectitur pri, mea meliore denique Anwendungsprogrammierschnittstelle id. Elitr expetenda nam an, Apfelschorle ei reque euismod assentior. Odio Freude schöner
Götterfunken iracundia ex pri. Ut vel 99 Luftballons mandamus, quas natum adversarium ei Reinheitsgebot diam minim honestatis eum no
</div>
#box {
position: absolute;
width: 50%;
height: 50%;
top: 10;
left: 10;
overflow: auto;
border: solid red 2px;
}
I have a span defined, to which I am occasionally adding text and I am trying to get it to scroll to the bottom of the "box" but without success.
I have the span defined as:
<tr>
<td style="height:130px; border: 1px solid black;">
<div class="scrollable">
<span id="infoWindow"></span>
</div>
</td>
</tr>
With
div.scrollable
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
And I am adding to it as follows:
document.getElementById("infoWindow").innerHTML+="Just some blurb<hr>";
var objDiv = document.getElementById("infoWindow");
I have tried two different approaches:
objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;
and
objDiv.scrollTop = objDiv.scrollHeight;
But neither work. What am I doing wrong? Many thanks!
scrollHeight and clientHeight are properties which are calculated when DOM has been fully painted. You should subscribe to event DOMContentLoaded to be sure the calculations are done.
There is a function scrollIntoView which you can use on any element which does exactly the name suggests. MDN - scrollIntoView. You can also define some options for scrolling like smoothness and position where to scroll exactly on element.
Here is an example I wrote to test this.
Keep in mind that scrollIntoView triggered by code example will impact SO scroll behavior.
const paragraphs = ['Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliter enim nosmet ipsos nosse non possumus. Sin dicit obscurari quaedam nec apparere, quia valde parva sint, nos quoque concedimus; Quis autem de ipso sapiente aliter existimat, quin, etiam cum decreverit esse moriendum, tamen discessu a suis atque ipsa relinquenda luce moveatur? Duo Reges: constructio interrete. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Id quaeris, inquam, in quo, utrum respondero, verses te huc atque illuc necesse est.',
'Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Hanc in motu voluptatem -sic enim has suaves et quasi dulces voluptates appellat-interdum ita extenuat, ut M. Hunc ipsum Zenonis aiunt esse finem declarantem illud, quod a te dictum est, convenienter naturae vivere. Suo enim quisque studio maxime ducitur. Manebit ergo amicitia tam diu, quam diu sequetur utilitas, et, si utilitas amicitiam constituet, tollet eadem.',
'Partim cursu et peragratione laetantur, congregatione aliae coetum quodam modo civitatis imitantur; Hic nihil fuit, quod quaereremus. Stoici restant, ei quidem non unam aliquam aut alteram rem a nobis, sed totam ad se nostram philosophiam transtulerunt; Deinde disputat, quod cuiusque generis animantium statui deceat extremum. Tibi hoc incredibile, quod beatissimum. Sed haec ab Antiocho, familiari nostro, dicuntur multo melius et fortius, quam a Stasea dicebantur. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Ne vitationem quidem doloris ipsam per se quisquam in rebus expetendis putavit, nisi etiam evitare posset.'
];
const container = document.getElementById('infoWindow');
const paragraphElements = paragraphs.map((paragraphText, index) => {
const newParagraph = document.createElement('p');
newParagraph.innerHTML = paragraphText;
newParagraph.style.animationDelay = `${.8 * index + 1}s`;
return newParagraph;
});
const demostrateScrolling = () => {
const scroller = document.getElementById('scroller');
const scrollerOptions = {
behavior: 'smooth',
block: "start",
inline: "nearest"
};
scroller.addEventListener('click', () => {
container.querySelector('p:last-child').scrollIntoView(scrollerOptions);
});
paragraphElements.map(p => {
container.appendChild(p);
});
}
document.addEventListener('DOMContentLoaded', demostrateScrolling);
body {
font-family: 'Tahoma';
}
#infoWindow {
height: 200px;
overflow-y: auto;
margin: 10px;
}
#infoWindow p {
padding: 10px;
margin: 10px;
background-color: navy;
color: white;
border-radius: 5px;
animation-name: FadeIn;
animation-duration: .4s;
animation-fill-mode: backwards;
}
#keyframes FadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#scroller {
width: auto;
background-color: lightblue;
border-radius: 24px;
padding: 5px;
margin: 5px;
font-size: 10px;
cursor: pointer;
}
<h2>Scroll To Bottom</h2>
<div id="infoWindow"></div>
<span id="scroller">Scroll to bottom</span>
refer this https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
scrolling is applicable only to scrollable elements
var i= 0;
while(i<10){
document.getElementById("infoWindow").innerHTML+="Just some blurb<hr>";
i++;
}
//get the total height of your element
var bottomPosition = document.getElementById("infoWindow").offsetHeight;
//set scroll of container element
document.querySelector(".scrollable").scrollTop = bottomPosition;
div.scrollable
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
/* height is no defined for inline-elements so make span inline-block or block*/
#infoWindow{
display:inline-block;
}
<table>
<tr>
<td style="height:130px; border: 1px solid black;">
<div class="scrollable">
<!-- added style for span element -->
<span id="infoWindow"></span>
</div>
</td>
</tr>
</table>
I'm doing accordian using object oriented javascript here the problem is toggle is not working when I click.As expect output is when I click display content and icon will be + and other child close.initially, firstchild will be active.
I just started learning object oriented javascript.Anything wrong with code let me know.
Accordion = {
accordionContent: '.accordion-s1 .accordion--content p',
accordionTitle: '.accordion--title',
init: function() {
$(this.accordionTitle).click(this.toggleAccordion.bind(this));
},
toggleAccordion: function() {
$(this.accordionContent).slideToggle();
$(this.accordionTitle).removeClass("active");
if($(this.accordionTitle).siblings().is(":visible")) {
$(this.accordionTitle).siblings().slideDown();
$(this).find('.fa.fa-times').toggleClass('plus');
$(this.accordionTitle).addClass("active");
}
}
}
$(document).ready(function(){
Accordian.init();
});
.accordion-s1 .accordion--title {
display: flex;
flex-direction: row;
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
font-weight: 300;
transition: all .25s ease;
background-color: #2783e8;
color: #ffffff;
}
.accordion-s1 .accordion--title h4 { flex:1;font-weight: 600;}
.accordion-s1 .aticon-times { padding: 5px;}
.plus {
transform: rotate(45deg);
transition: all .25s ease;
}
.accordion-s1 .accordion--content {
padding: 10px 20px;
background: whitesmoke;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="accordion-s1">
<div class="accordion--single">
<div class="accordion--title">
<h4>London Style</h4>
<span class="accordion--i">
<i class="fa fa-times aticon-times"></i>
</span>
</div>
<div class="accordion--content">
<p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil exp eten in mei. Mei an pericula euripidis, hinc partem ei est. Eos ei nisl graecis, vixet aperiri consequat an. Eius lorem tincidunt vix at, vel pertinax sensibus id. Pericula euripidis, hinc partem ei est.</p>
</div>
</div>
<div class="accordion--single">
<div class="accordion--title">
<h4>London Style</h4>
<span class="accordion--i">
<i class="fa fa-times aticon-times"></i>
</span>
</div>
<div class="accordion--content">
<p>Alienum phaedrum torquatos nec eu, vis detraxit periculis ex, nihil exp eten in mei. Mei an pericula euripidis, hinc partem ei est. Eos ei nisl graecis, vixet aperiri consequat an. Eius lorem tincidunt vix at, vel pertinax sensibus id. Pericula euripidis, hinc partem ei est.</p>
</div>
</div>
</div>
I have found couple of mistake from your given code. $(this.accordionContent).slideToggle() actually targeting all of the element. Also same is $(this.accordionTitle).siblings().
Hello you can try following code:
Accordion = {
accordionContent: '.accordion-s1 .accordion--content',
accordionTitle: '.accordion--title',
init: function() {
$(this.accordionTitle).removeClass('active').eq(0).addClass("active");
$(this.accordionContent).slideUp().eq(0).slideDown();
$(this.accordionTitle).click(this.toggleAccordion.bind(this));
},
toggleAccordion: function(e) {
if($(e.currentTarget).next($(this.accordionContent)).is(":visible")) {
return
}
$(this.accordionTitle).siblings().slideUp();
$(this.accordionTitle).removeClass('active');
$(e.currentTarget).next($(this.accordionContent)).slideDown();
$(e.currentTarget).addClass("active");
}
}
$(document).ready(function(){
Accordion.init();
});
For plus sign you need adjust in CSS and HTML title section as well.
In CSS:
.accordion--i .fa-times {
display:inline-block;
}
.accordion--i .fa-plus {
display:none;
}
.active .accordion--i .fa-times {
display:none;
}
.active .accordion--i .fa-plus {
display:inline-block;
}
In HTML you need add following change in every title in each block:
<div class="accordion--title">
<h4>London Style</h4>
<span class="accordion--i">
<i class="fa fa-times aticon-times"></i>
<i class="fa fa-plus aticon-times"></i>
</span>
</div>
When you hover over a green highlight, a div of colors will appear. This will allow you to change the color of the highlight. By the way, the SO Editor is making the offset measure incorrect for the #change_color div. How can I make it where, unless the mouse is over .green_mark or #change_color, #change_color has its visibility hidden?
$(".green_mark").mouseover(function() {
var offsets = $(this).offset();
var top = offsets.top;
var new_top = top - 10;
var left = offsets.left;
var new_left = left - 10;
$("#change_color").css("visibility","visible");
$('#change_color').css({
'top':new_top+'px',
'left':new_left+'px'
});
});
#change_color {
position:absolute;
border:grey solid 1px;
background: #373737;
padding: 5px;
border-radius: 3px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
visibility: hidden;
}
.blue_mark {
background: #AAF6FF;
cursor: pointer;
}
.red_mark {
background: #FF9B9F;
cursor: pointer;
}
.green_mark {
background: #D6FFAA;
cursor: pointer;
}
.yellow_mark {
background: #FFF8AA;
cursor: pointer;
}
.orange_mark {
background: #FFBF98;
cursor: pointer;
}
.purple_mark {
background: #D7D5FC;
cursor: pointer;
}
.boxes, .boxes2 {
width: 15px;
height: 15px;
cursor: pointer;
display: inline-block;
margin-right: 2px;
position: relative;
top: 3px;
}
#blue_box2 {
background: #AAF6FF;
}
#green_box2 {
background: #D6FFAA;
}
#orange_box2 {
background: #FFBF98;
}
#purple_box2 {
background: #D7D5FC;
}
#red_box2 {
background: #FF9B9F;
}
#yellow_box2 {
background: #FFF8AA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse' class='context'>
Lore
<span class="orange_mark">
m ipsum dolor sit amet, iisque scripserit nec at, an case ponderum mea, delectus volupt
</span>
aria in quo. Te aliquid ce
<span class="red_mark">
teros legendos has. Veritus assueverit intelleg
</span>
eba
<span class="orange_mark">
t id per
</span>
, eos cu vero pri
<span class="green_mark">
mis philo
</span>
sophia, no nec blandit propriae
<span class="green_mark">
. Mei stet ferri aperiri eu. Mucius deserunt sensibus eum id.
Ut cas
</span>
e nominavi pro,
<span class="yellow_mark">
dico reprimique suscipiantur in per. Cu vocibus ceteros sententiae mel. Nam te diam ornatus, mei sonet volutpat facilisis ut. Minim mazim persequeri
</span>
s sed id, mei et animal equidem, clita atomorum at has.
<span class="green_mark">
Ut noluisse placerat suscipiantur mel
</span>
, cu pri mundi dicunt
<span class="green_mark">
praesent. Ignota dicunt vulputate ad vim,
</span>
populo option aperiri
<span class="orange_mark">
me
</span>
<span class="purple_mark">
l in. Has cu essent eirmod malorum, nisl electram pri et.
In legimus posidonium his, aeque possit platonem vel ne, nam ad meis nemore delenit. Cu discere legimus eam. Eum eius nostro ad, pro solet semper per
</span>
<span class="orange_mark">
fe
</span>
cto ne, et eros dicam tantas pro. Ex malorum debitis cotidieque pro. Vel in legendos elaboraret conclusionemque, mutat moderatius cotidieque cu usu, mel copiosae assueverit ne. Odio imperdiet eos in, cum sint porro splendide ne, tritani aliquam eum ne.
Mel feugiat recusabo platonem ei, sea cu numquam constituam. Ne tempor postea vim. Ad volumus accumsan apeirian has. At ius aliquid convenire, id est aliquip vivendo accusam.
Solum scaevola ius ut, cum no mutat sadipscing. Mei te dico dolor scaevola, cu veri dictas sit, an per nullam oblique. Ex sit sale quidam reprehendunt, diam velit lucilius nam ne, mnesarchum efficiendi his ut. Nec vivendo mediocrem delicatissimi id, ad debet maiorum qui. No qui latine dolorum corpora, diam cetero insolens in cum.
</span>
<div id='change_color'>
<div id='blue_box2' class='boxes2' title='Blue'></div>
<div id='green_box2' class='boxes2' title='Green'></div>
<div id='yellow_box2' class='boxes2' title='Yellow'></div>
<div id='orange_box2' class='boxes2' title='Orange'></div>
<div id='purple_box2' class='boxes2' title='Purple'></div>
<div id='red_box2' class='boxes2' title='Red'></div>
</div>
You can subscribe to mouseenter and mouseleave events.
var colorPickerHovered = false;
var timer;
$(".green_mark").mouseenter(function() {
if(timer){
clearTimeout(timer);
}
var offsets = $(this).offset();
var top = offsets.top;
var new_top = top - 10;
var left = offsets.left;
var new_left = left - 10;
$("#change_color").css("visibility","visible");
$('#change_color').css({
'top':new_top+'px',
'left':new_left+'px'
});
});
$(".green_mark").mouseleave(function(){
timer = setTimeout(function(){
if(!colorPickerHovered){
$("#change_color").css("visibility","hidden");
}
}, 250)
})
$("#change_color").mouseenter(function(){
colorPickerHovered = true;
})
$("#change_color").mouseleave(function(){
colorPickerHovered = false;
$(this).css("visibility","hidden");
})
jsfiddle example
Use the mouseout event:
$(".green_mark").mouseout(function() {
$("#change_color").css("visibility","hidden");});
If you mouseout from the green to get to the color div, it will go wrong though, so make sure the position error is fixed so you never leave the green to go over the color div (so the color div is close by enough); you could render the color div at the mouse position to fix that part too.
I am making a div with a content longer than what I want to view in height, so I used a height of 20em, and made overflow:scroll. This work great, but I want to add some effect to it.
How can I do so the top and bottom 50px have a opacity of 0.7? so it gets a effect when the content is scrolled "away".
Thanks!
<div>
<ul>
<li>long list here</li>
<li>long list here</li>
<li>long list here</li>
<li>long list here</li>
</ul>
Style:
height:25em;
overflow:scroll;
DEMO
DEMO:
#wrapper {
position: relative;
}
#wrapper:before, #wrapper:after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 30px; /* Height of the effect */
}
#wrapper:before {
top: 0;
/* Use your background color, assuming white: */
background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
}
#wrapper:after {
bottom: 0;
/* Use your background color, assuming white: */
background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}
#mydiv {
background: red;
height: 20em;
overflow: auto;
border: 0 solid transparent;
border-width: 10px 0; /* 10px to be able to read first and last lines */
}
<div id="wrapper">
<div id="mydiv">
Your content
</div>
</div>
You can add two layers at top and bottom, note it will cover your content so I suggest it takes no more than 20px. Here is an example with transparent covers, but you can use nice PNG gradient instead:
.fixed_height {
position: relative;
}
.fixed_height_content {
padding: 20px 0;
height: 100px;
overflow-y: scroll;
}
.cover_top {
position: absolute;
left: 0;
top: 0;
right: 0;
height: 20px;
background: red;
opacity: .3;
}
.cover_bottom {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 20px;
background: red;
opacity: .3;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Opacity</title>
<style type="text/css">
</style>
</head>
<body>
<div class="fixed_height">
<div class="fixed_height_content">
<p>Some content<br />more<br />more<br />more<br />more</p>
<p>Some content<br />more<br />more<br />more<br />more</p>
<p>Some content<br />more<br />more<br />more<br />more</p>
<p>Some content<br />more<br />more<br />more<br />more</p>
</div>
<div class="cover_top"></div>
<div class="cover_bottom"></div>
</div>
</body>
</html>
I think you may like this. Try this one.
<style>
#boxBorder {
height: 3em;
overflow: hidden;
}
#boxBorder:hover {
height: 5em;
overflow: hidden;
}
#boxBorder:after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 100px;
bottom: 0;
background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(256,256,256,0));
}
</style>
and my div is like
<div id="boxBorder">
Vis meis ipsum cu, est ad modus facilis, ut est modus alienum consulatu. Mel ut primis dissentias. Doming omittam necessitatibus eam ei, simul vocibus complectitur at eam. Aliquid dolorem laboramus pri et. Porro utroque facilis ex has, pro eripuit ullamcorper te, an audiam civibus voluptaria mei.
Consul iuvaret te eam. Eu usu modus nonumy nostrud, his ne facilis maiestatis. Nec clita nonumes ea, solet noluisse vix cu. Te vel altera verterem sapientem, quo corrumpit theophrastus ne.
Quo iusto exerci assentior cu, ius erat velit timeam ea. Te modo offendit consectetuer has, id ius utamur quaerendum. Ut choro neglegentur nec, ea iusto feugait est. Feugait reprimique mel id, mel ad indoctum definitionem, nostrum apeirian ad pro.
an discere delenit.