In my div is the overlay of another absolutely positioned div. However the text is still going beyond the div.
var mainDiv = ".myclass";
var mainDivP = ".myclass p";
$(window).on("load",function(){ multiLine_ellipsis(mainDiv, mainDivP); });
function multiLine_ellipsis(mainDiv, mainDivP) {
$(mainDivP).each(function(index) {
var divh = $(mainDiv).height();
if ($(this).outerHeight() > divh) {
var returnText = $(this).text().replace(/\W*\s(\S)*$/, '...');
console.log(returnText);
$(this).text(returnText);
}
});
}
.myclass {
color: #FFFFFF;
font-family: "my-font";
font-size: 28px;
padding: 15px;
height: 100px;
word-wrap: break-word;
overflow: hidden;
position: relative;
}
.myOverlay {
background-image: url("https://dksa1a9fhenpv.cloudfront.net/website/images/overlay.png");
position: absolute;
width: 100%;
z-index: 1;
bottom: 0;
height: 100%;
}
.outerDiv{
width:231px;
height:173px;
position:relative;
}
p{margin:0 0 10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerDiv">
<div class="myOverlay">
<div class="myclass">
<p>jadu's best Accommodation/ abcd hddndehd lfjhgs</p>
</div>
</div>
</div>
I should get ... at the end of the statement but i am not getting it.
Your CSS hides the rest, just change font-size to 30px you will see some part of the hidden part.
Related
When clicking the 'test' div, it opens up the div price-list-test in a popup way like this:
However, I am stuck on trying to get the div to pop up on the 'right' alignment of the element rather than left, like this:
How can I achieve this?
$(document).ready(function() {
$(".test").each(function() {
$(this).click(function() {
var leftpos = $(this).offset() - window.screen.width;
$(this).children().css("left", leftpos.left);
$(this).children().css("display", "block");
});
})
});
.price-list-test {
width: 100px;
height: 100px;
background-color: red;
color: white;
display: none;
position: absolute;
}
.test {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
Open
<div class="price-list-test">
Test
</div>
</div>
Make 'test' class position relative, after that set 'price-list-test' left : 0%
.test {
postion: relative;
}
.price-list-test {
left: 0 %;
width: 100px;
height: 100px;
background-color: red;
color: white;
display: none;
position: absolute;
}
Good day,
I'm having trouble with jquery. i found a topic here that i want to learn using jquery slide right to left div http://jsfiddle.net/PXLJG/2/.
what i want to achieve is when hover, show hidden content on specific div.
i tried adding .addClass('active'); to the script.
here is the script i made
$(document).ready(function(){
$('.holdingbox').hover(function(){
var rightbox = $('.rightbox');
if (rightbox.hasClass('active')){
rightbox.stop().animate({width: '-0px'}, 1000).removeClass('active');
} else {
rightbox.stop().animate({width: '90px'}, 1000).addClass('active');
}
});
});
The problem now is when i hover on one div, all div shows up.Please see attached image.
Hope you guys can point me to right direction. thank you
You need to target the rightbox element in current element context i.e. this
You can either use context or .find() to target child element.
$('.holdingbox').hover(function() {
var rightbox = $('.rightbox', this); //$(this).find('.rightbox')
});
$(document).ready(function() {
$('.holdingbox').hover(function() {
var rightbox = $('.rightbox', this);
if (rightbox.hasClass('active')) {
rightbox.stop().animate({
width: '-0px'
}, 1000).removeClass('active');
} else {
rightbox.stop().animate({
width: '90px'
}, 1000).addClass('active');
}
});
});
div {
display: inline-block;
}
.holdingbox {
position: relative;
top: 0;
margin-left: 100px;
}
.leftbox {
position: relative;
top: 0;
left: 0;
display: inline-block;
font-size: 24px;
background-color: #ac193d;
color: #FFF;
font-weight: bold;
padding: 1px;
}
.rightbox {
position: relative;
display: inline-block;
overflow: hidden;
width: 0;
height: 30px;
vertical-align: top;
margin-right: 0;
}
.content {
width: 100px;
position: absolute;
background-color: #ac193d;
height: 29px;
left: 0;
top: 0;
right: 0;
color: #FFF;
padding-left: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holdingbox">
<span class="rightbox"><span class="content">Kenyér</span></span>
<span class="leftbox">></span>
</div>
<div class="holdingbox">
<span class="rightbox">
<span class="content">Kenyér</span>
</span>
<span class="leftbox">></span>
</div>
Change code to this
You'll get children of the hovered element this way. Without using $(this) you target all '.rightbox' elements in document.
$('.holdingbox').hover(function(){
$(this).find('.rightbox').stop().animate({width: '90px'}, 1000)
}, function(){
$(this).find('.rightbox').stop().animate({width: '-0'}, 1000)
});
I have a fixed header and menu bar and there is a container div when i scroll down the container div does not hide itself below the menu bar as shown in image below is the jquery code i am using. Please help to solve my issue.
var header= $('.header');
var start_div = $(header).offset().top;
var menu_div = $('.menu');
var menu = $(menu_div ).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(header).css('position',((p)>start_div ) ? 'fixed' : 'static');
$(header).css('top',((p)>start_div ) ? '0px' : '');
$(header).css('width','840px');
$(header).css('min-height','108px');
});
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop()+100;
$(menu_div).css('position',((p)>menu) ? 'fixed' : 'static');
$(menu_div).css('top',((p)>menu) ? '110px' : '');
$(menu_div).css('width','575px');
$(menu_div).css('height','57px');
});
Unless I'm missing something you don't need jQuery or even JS to do that.
Check the snippet (codePen here)
html,
body {
width: 100%;
height: 100%;
background-color: white;
}
.header-wrapper {
top: 0;
right: 0;
left: 0;
position: fixed;
height: 160px;
background-color: white;
}
.header {
background-color: cyan;
height: 100px;
width: 100%;
}
.menu {
width: 100%;
height: 50px;
background-color: green;
margin-top: 10px;
}
.content {
color: #fff;
background-color: black;
margin-top: 170px; /* same as height of header + nav + margins + 10px for coolness*/
}
<body>
<div class="header-wrapper">
<div class="header">Blue Header</div>
<div class="menu">Green Menu</div>
</div>
<div class="content">
My content<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
blabla
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
blabla
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
Use the css z-index property.
.header, .menu {
z-index: 2
}
.container {
z-index: 1
}
http://www.w3schools.com/cssref/pr_pos_z-index.asp
I have a design which is difficult to describe, I've spent hours googling it and found nothing. The design basically uses a fixed border frame which always stays on the page while the content scrolls through it, with multiple full viewport "slides" stacked vertically. Each slide has a different background image which is fixed for the parallax effect with background-size:cover as well. As you scroll down through the content to the next slide, the border color should change with the content to work with the background image of the next slide. So essentially the side borders will need to be two colors at the same time or have one covering the other. The attached images should make things more clear.
What I have to start with is this content arranged in what I'm calling slides: http://jsfiddle.net/4wtRv/
HTML
<section class="dark" style="background:url('http://www.mccullagh.org/db9/10d-2/new-york-city-at-night.jpg') no-repeat fixed;background-size:cover;">
<div class="brdr_out">
<div class="brdr_in">
<div class="content" style="height:10em;margin-top:-5em;">
<div class="title1">TITLE 1</div>
</div>
</div>
</div>
</section>
<section class="light" style="background:url('http://images.nationalgeographic.com/wpf/media-live/photos/000/004/cache/african-elephant_435_600x450.jpg') no-repeat fixed;background-size:cover;">
<div class="brdr_out">
<div class="brdr_in">
<div class="content" style="height:10em;margin-top:-5em;">
<div class="title2">Title 2</div>
<div class="title3">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
</div>
</div>
</div>
</section>
CSS
body, html
{
height: 100%;
}
body
{
font-size: 16px;
margin: 0;
}
.brdr_in, .brdr_out
{
bottom: 0;
height: auto;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.brdr_in
{
margin: .25em;
padding: 1em;
}
.brdr_out
{
margin: 1em;
padding: .25em;
}
.clr1, .dark
{
color: #fff;
}
.clr2, .light
{
color: #000;
}
.dark .brdr_in
{
border: 3px solid #d5d7a1;
}
.dark .brdr_out
{
border: 5px solid #d5d7a1;
}
.light .brdr_in
{
border: 3px solid #000;
}
.light .brdr_out
{
border: 5px solid #000;
}
section
{
height: 100%;
position: relative;
text-align: center;
}
section .content
{
position: absolute;
top: 50%;
width: 100%;
}
.title1, .title2
{
display: inline-block;
letter-spacing: .25em;
line-height: 1.875em;
padding-bottom: .8em;
}
.title2
{
border-bottom: 1px solid #4a4639;
margin-bottom: 3em;
}
But the tricky part is to make it look like this when you scroll:
Also, the text needs to be hidden in the margins outside of the frame.
Your help is much appreciated! This was much more difficult than I anticipated when I told the designer I could do it. Javascript and any of it's libraries are fine. Thanks!
It will be difficult to split the frame into two colors. The easiest way i can imagine is to make two copies of the frame. Give both a fixed position with one top:0, the other bottom:0, and adjust the heights of both as you scroll so they meet precisely in the middle.
Another solution, that's not to your spec, but may look better, is to fade the border color from one slide to the next. You will need a color interpolation function, a list of slide colors in JavaScript, and a scroll handler function that determines which slide is visible and the distance scrolled to the next slide. Something kind of like this (assuming Jquery, and 1000px slides):
$(window).on('scroll', function(){
var slide_distance = window.scrollY / 1000, slide = Math.floor(slide_distance)
var color = color_interp(slide_colors[slide], slide_colors[slide + 1], slide_distance - slide)
$('#border').css('color', color)
})
Here is the rough sample code which solved this. I have to have each border piece be a separate div so it doesn't cover the text, links, etc. To block the text when scrolling above and below the frame I add an element which displays the same background image with a higher z-index so it covers the portion outside the frame.
HTML
<section class="dark" style="background:url('http://www.mccullagh.org/db9/10d-2/new-york-city-at-night.jpg') no-repeat fixed;background-size:cover;">
<div class="content" style="height:10em;margin-top:-5em;">
<div class="title1">TITLE 1</div>
</div>
</section>
<section class="light" style="background:url('http://images.nationalgeographic.com/wpf/media-live/photos/000/004/cache/african-elephant_435_600x450.jpg') no-repeat fixed;background-size:cover;">
<div class="content" style="height:10em;margin-top:-5em;padding:0 20%;width:60%">
<div class="title2">Title 2</div>
<div class="title3">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </div>
</div>
</section>
<div id="top" style="background:url('http://www.mccullagh.org/db9/10d-2/new-york-city-at-night.jpg') no-repeat fixed;background-size:cover;display:none;height:24px;position:fixed;top:0;left:0;right:0;z-index:3;"></div>
<div id="bottom" style="background:url('http://images.nationalgeographic.com/wpf/media-live/photos/000/004/cache/african-elephant_435_600x450.jpg') no-repeat fixed;background-size:cover;display:none;height:24px;position:fixed;bottom:0;left:0;right:0;z-index:3;"></div>
<div class="brdr_out">
<div class="dark">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
<div class="light">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
</div>
<div class="brdr_in">
<div class="dark">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
<div class="light">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
</div>
CSS
body, html
{
height: 100%;
}
body
{
font-size: 16px;
margin: 0;
}
.clr1, .dark
{
color: #fff;
}
.clr2, .light
{
color: #000;
}
section
{
height: 100%;
position: relative;
text-align: center;
}
section .content
{
position: absolute;
top: 50%;
width: 100%;
}
.title1, .title2
{
display: inline-block;
letter-spacing: .25em;
line-height: 1.875em;
padding-bottom: .8em;
}
.title2
{
border-bottom: 1px solid #4a4639;
margin-bottom: 3em;
}
/*The Frame Styles*/
.brdr_in .bottom
{
bottom: 24px;
}
.brdr_in .bottom, .brdr_in .top
{
height: 3px;
left: 24px;
right: 24px;
}
.brdr_in .dark div, .brdr_out .dark div
{
background-color: #e4d7b0;
}
.brdr_in div, .brdr_out div
{
position: fixed;
z-index: 4;
}
.brdr_in .left
{
left: 24px;
}
.brdr_in .left, .brdr_in .right
{
bottom: 24px;
top: 24px;
width: 3px;
}
.brdr_in .light div, .brdr_out .light div
{
background-color: #434345;
}
.brdr_in .right
{
right: 24px;
}
.brdr_in .top
{
top: 24px;
}
.brdr_out .bottom
{
bottom: 15px;
}
.brdr_out .bottom, .brdr_out .top
{
height: 5px;
left: 15px;
right: 15px;
}
.brdr_out .left
{
left: 15px;
}
.brdr_out .left, .brdr_out .right
{
bottom: 15px;
top: 15px;
width: 5px;
}
.brdr_out .right
{
right: 15px;
}
.brdr_out .top
{
top: 15px;
}
JS
function borders() {
var viewportHeight = $(window).height();
var scrollY = window.scrollY;
var distance = viewportHeight - scrollY;
//Once we start scrolling, the top border of the next slide needs to be hidden so it doesn't appear over content
if (scrollY >= 0) {
$('.light .top').css('display', 'none');
}
if (scrollY < 27) {
$('.brdr_in .light .bottom').css('display', 'none');
}
else {
$('.brdr_in .light .bottom').css('display', 'block');
}
if (scrollY < 20) {
$('.brdr_out .light .bottom').css('display', 'none');
}
else {
$('.brdr_out .light .bottom').css('display', 'block');
}
var outerTop = distance;
var innerTop = distance;
//We've scrolled enough so that the top of the bottom slide reaches the top of the viewport, need to add top border back in
if (outerTop < 15) {
$('.brdr_out .light .top').css('display', 'block');
outerTop = 15;
}
if (innerTop < 24) {
$('.brdr_in .light .top').css('display', 'block');
innerTop = 24;
}
$('.brdr_out .light .left, .brdr_out .light .right').css('top', outerTop);
$('.brdr_in .light .left, .brdr_in .light .right').css('top', innerTop);
//Add the background image to top/bottom to hide the text as it scrolls under/above it
if ($('#light .brdr_out').css('border-top-width') == '0px') {
$('#top').css('display', 'block');
}
else {
$('#top').css('display', 'none');
}
if (scrollY > 24) {
$('#bottom').css('display', 'block');
}
else {
$('#bottom').css('display', 'none');
}
}
$(window).load(function () {
borders();
});
$(window).scroll(function () {
borders();
});
I prepared this:
http://jsfiddle.net/hXpWh/2/
When you hover the .container it changes the color of both. But I just want to change it of the container where the mouse is on.
Here is the js code:
moped = "";
$(".container").mouseenter(function () {
$(".content").css('background', function () {
moped = $(this).css('background');
return "green";
});}).mouseleave(function () {
$(".content").css('background', function () {
return moped;
});
});
html:
<div class="container">
<div class="content"></div>
<div class="caption">
<p>This is the caption of .container</p>
</div>
</div>
<div class="container2">
<div class="content"></div>
<div class="caption">
<p>This is the caption of .container2</p>
</div>
</div>
css:
.container {
position: absolute;
top: 0;
left: 0;
display: block;
z-index: 800;
width: 250px;
height: 250px;
padding: 0;
margin: 0;
}
.container2 {
position: absolute;
top: 0;
left: 255px;
display: block;
z-index: 800;
width: 250px;
height: 250px;
padding: 0;
margin: 0;
}
.content {
display: block;
background: red;
position: absolute;
z-index: 900;
top: 0;
left: 0;
width: 250px;
height: 250px;
}
.caption {
display: block;
background: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 250px;
height: 250px;
}
.caption p {
position: relative;
bottom: 10px;
left: 10px;
}
The other answers show what's wrong in the jQuery code, but another fix is to just using CSS for this.
Give the outer elements a common class, then:
.cont {
background:red;
}
.cont:hover .content {
background: green;
}
DEMO: http://jsfiddle.net/hXpWh/4/
But with respect to the jQuery code, not only do you need to find the nested .content, but also, there's no need for the variable. Just set the background to "" in the mouseleave.
$(".container").mouseenter(function () {
$(this).find(".content").css('background', "green");
}).mouseleave(function () {
$(this).find(".content").css('background', "");
});
Change $(".content") to $(this).find(".content") in the .mouseenter function, and it will only change the one that you hover over. You could change it to $(".content", this), but as per epascarello in the comments, it is not as efficient.
Well , you could either move the css background attribute or do this:
moped = "";
$(".container").mouseenter(function () {
$(this).children(".content").css('background', function () {
moped = $(this).css('background-color');
return "green";
});
}).mouseleave(function () {
$(this).children(".content").css('background', function () {
return moped;
});
});
My advice is do it with the script and refactor it , use .hover() and name the mouseenter and mouseout functions separately.
Good luck, mate.