I've got a basic HTML and I'm creating a new class (original-scrolled) that is going to add the position fixed to my menu once I start to scroll.
HTML
<header class=" original">
<h1>This is a Sticky Nav Demo!</h1>
<p>MAIN MENU</p>
</header>
<div class="main">
<h2>Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla, </p>
CSS
.original {
height: 100px;
padding-top: 20px;
background: #f07057;
}
.original-scrolled {
position: fixed;
width: 100%;
top: 0;
}
jQuery - this is the function that I'm using but it seems it doesn't work!
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 90) {
$(".original").addClass(".original-scrolled");
} else {
$(".original").removeClass(".original-scrolled");
}
});
I'm a beginner so I'm sorry if this code is a mess!
The way you are adding and removing the classes is wrong.
This should work:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 90) {
console.log("more than 90");
$(".original").addClass("original-scrolled");
} else {
$(".original").removeClass("original-scrolled");
}
});
You are specifying the class selector while adding and removing class names.
You should take a look at the api here
Related
I want to know how I can set the width of an element to fit-content, but I also want to add some more width. I cannot use padding, I only want to use width. Maybe something like width: fit-content + 50px or something like that?
EDIT:
Example:
.element{
width: fit-content + 50px;
}
It's not possible to use calc() to combine intrinsic and extrinsic units. The only option here is to use padding. Since you said you cannot apply padding to your element, you would need to create a child element to carry these styles.
Here's an example (I've added background to each to visualize)
.acharb-outer {
width: fit-content;
margin: 1rem 0;
background: #ffd166;
}
.acharb-inner {
padding: 0 2rem;
background: #ef476f;
}
span {
background: #06d6a0;
}
<div class="acharb-outer">
<div class="acharb-inner">
<span>Quisque ut dolor gravida.</span>
</div>
</div>
<div class="acharb-outer">
<div class="acharb-inner">
<span>Fabio vel iudice vincam, sunt in culpa qui officia.</span>
</div>
</div>
<div class="acharb-outer">
<div class="acharb-inner">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.</span>
</div>
</div>
I want to get the exact div height that contains certain elements within it, I have margins and padding associated with that div.
here HTML:
<div class="main">
<div class="child">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<ul>
<li>test</li>
<li>test333</li>
</ul>
<p>
<strong>testststststs</strong>
</p>
</div>
</div>
css:
.main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 60px;
overflow: hidden;
border: 1px solid #000;
}
.child{
margin: 10px 10px 10px 25px;
font-size: 13px;
line-height: 16px;
}
Js:
var cont = document.getElementsByClassName('main-class')[0];
var child = cont.getElementsByClassName('child')[0];
console.log(cont.clientHeight); //60
console.log(child.clientHeight);//40
console.log(child.offsetHeight);//40
i'm not sure if im getting the correct height for the child as the height seems to be lesser than the parent height- if that is the case why would it truncated as shown here:
https://jsfiddle.net/cudwb2yz/
I want to get the entire height of the div- child document including the content that has been hidden with the overflow:hidden property.
any idea what im doing wrong?
I have this:
<section>
<div id="dont-scroll">
Unknown content!
</div>
<div>
<div id="scroll-this">
This part should be scrollable when
the total content overflows the SECTION
</div>
</div>
</section>
As you can see I want the user to be able to scroll the content in the lower half, but not the upper.
I can achieve this by using "resize" events, checking the size of SECTION and "dont-scroll", etc.
However, is there an easier way today, using only CSS?
A possible approach using Flexbox
body, html {
margin: 0;
padding: 0;
}
section {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
section > div {
padding: 20px;
}
div:not([id]) {
background: #d8d8dc;
flex: 1;
overflow: auto;
}
<section>
<div id="dont-scroll">
Unknown content! <br />
Lorem ipsum sit dolor amet
</div>
<div>
<div id="scroll-this">
This part should be scrollable when
the total content overflows the SECTION
<br /><br />
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Donec
odio. Quisque volutpat mattis eros.
Nullam malesuada erat ut turpis.
Suspendisse urna nibh, viverra non,
semper suscipit, posuere a, pede.</p>
...
</div>
</div>
</section>
Example on codepen
Defining height of scroll-this id and using overflow-y: scroll will make scroll-this id scroll able
#scroll-this {
height: 10px; //this can be as per your choice
overflow-y: scroll;
}
I used 10px because your content is too less.
"This part should be scrollable when the total content overflows the
SECTION".
Scroll will show only if line breaking content is greater then provided height.
#scroll-this {
height: 20px;
overflow-y: scroll;
}
<section style="width:200px">
<div id="dont-scroll">
Unknown content!
</div>
<div>
<div id="scroll-this">
This part should be scrollable when the total content overflows the SECTION
</div>
</div>
</section>
It seems to be hopeless, because the ellipsis is not in the DOM, it's just a render trick by the browser
I am asking because I am not a html/css guru, so many ezoteric tricks may exist I am not aware...
This will be a little tricky...It looks like you are using .ellipsis class on ellipsis text...
...so try to append a span on every .ellipsis class element using each jQuery. Use position to align that span at end of text
...and then add a click event to that span
Note: I added a background color to that span just for visual
Stack Snippet
$(".ellipsis").each(function() {
$(this).append("<span class='dots'></span>")
})
$(document).on("click", ".dots", function() {
console.log("ellipsis element is clicked");
})
p {
width: 150px;
border: 1px solid;
font: 13px Verdana;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
}
span.dots {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 12px;
background: #ff000052;
z-index: 99;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
You cannot attach events to pseudo-content, and text overflow characters are pseudo-content, in the same way content rendered by ::before and ::after is pseudo-content.
And like all pseudo-content, any clicks to it will trigger an event on the element to which it belongs.
Maybe add an event listener to the window and check if the mouse click has the same x and y coordinates as your ellipses?
<script>
function hover(description) {
console.log(description);
document.getElementById('pricehover').innerHTML = description;
}
</script>
I am using the above script to create a list that gives information on hover which appears to the right of the list. I use the following on list items within the HTML.
<li class="pricegrid" onmouseover="hover('<h1>100 Euros</h1> <br> <p>Pricing includes etc etc</p>')">Pedicure Behandling</li>
And the description is added to the following div
<div id="pricehover">Hover over the items to the left to see the price and description.
</div>
My problem is that my description cannot hold more than a few characters when I want to, if possible, completely style the div content with a whole pageworth of description including images. Can anyone explain why this isn't working or possible and perhaps give me a way to do what I want to do?
Thankyou.
EDIT: I made a pen here. http://codepen.io/anon/pen/YXwwag
You can hide the content (any HTML markup) you want to show inside the li element itself in a hidden div, and then swap it into the right side div when you hover.
Codepen forked from yours - http://codepen.io/anon/pen/doGXeV
HTML (change li)
<li class="pricegrid" onmouseover="hover(this)">Pedicure Behandling<div><h1>100 Euros</h1> <br> <p>Pricing includes etc etc</p></div></li>
JavaScript (change hover)
function hover(t) {
document.getElementById('pricehover').innerHTML = t.childNodes[1].innerHTML;
}
CSS (class for hiding) - you could also just add it to the inline styles of the li's inner div, but that would be messy.
.pricegrid > div
{
display: none;
}
Check out this pen, I created.
No javascript
http://codepen.io/anon/pen/KpVVmM
ul{
width:200px;
display:block;
position:relative;
}
.description{
position:absolute;
top:0;
left:0;
width:300px;
transform:translate(200px,0);
border:1px solid #ccc;
display:none;
}
li:hover > div.description{
display:block;
}
<ul>
<li>Lorem ipsum.<div class='description'>Lorem ipsum dolor sit amet, consectetur.</div></li>
<li>Maxime, cupiditate.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></li>
<li>A, ratione.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas.</div></li>
<li>Asperiores, labore?<div class='description'>Lorem ipsum dolor sit.</div></li>
<li>Fugit, amet.<div class='description'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, accusamus?</div></li>
</ul>
Maybe dl>dt+dd is a better semantic markup for you, btw.
http://www.w3schools.com/tags/tag_dl.asp