Make marquee when text overflows - javascript

<div class="grid_1_of_4 images_1_of_4">
<img src="images/Advertise2.png" alt="" />
<h2>**This is a Long text**</h2>
<div class="price-details">
<div class="price-number">
<p><span class="rupees">Price</span></p>
</div>
<div class="clear"></div>
</div>
</div>
I want to make this h2 text Marquee when text overflows. How should I do it?
Thank You!

Here is a similar issue:
How to make marquee text only when it's overflowing?
You should try the solution mentioned in the link above. Hope this is helpful. In your case I just gave your h2 tag an id and copied the solution from the link I've posted.
function isElementOverflowing(element) {
var overflowX = element.offsetWidth < element.scrollWidth,
overflowY = element.offsetHeight < element.scrollHeight;
return (overflowX || overflowY);
}
function wrapContentsInMarquee(element) {
var marquee = document.createElement('marquee'),
contents = element.innerText;
marquee.innerText = contents;
element.innerHTML = '';
element.appendChild(marquee);
}
var element = document.getElementById('overflow');
if (isElementOverflowing(element)) {
wrapContentsInMarquee(element);
}
#overflow {
white-space: nowrap;
max-width: 15em;
overflow: hidden;
}
<div class="grid_1_of_4 images_1_of_4">
<img src="images/Advertise2.png" alt="" />
<h2 id="overflow">**This is a Long text which should marquee when overflow**</h2>
<div class="price-details">
<div class="price-number">
<p><span class="rupees">Price</span></p>
</div>
<div class="clear"></div>
</div>
</div>

That tag is obsolete and you should not use it.
Look at MDN for refrerence.
To detect overflow you could test element.scrollWidth > element.clientWidth given that the width of the element is set, or you compare it with its parent.
Instead of the marquee element you could try to do a CSS animation on the content transforming translateX to make it bounce left and right.
Example code at JSBin

Related

How to keep the space above an Header element, even if the header element is not present?

Here is a picture of my Title and Image. As you can see, there is space above the Title and the blue line. However, if there is no Title, then the space above the Title is gone and the images are now closer to the blue line, example here. How can I still keep the space above the title, even if there is no title? Basically, I don't want my images to move up closer to the blue line, even if there is no Title, I want that space to remain in place.
I tried applying min-height on the title class, but still there is no space, when there is no header
Here is my HTML:
<div class = "myComponentWrapper">
<div class = "myContainer"
<div class = "Title">
<h2 class = "headTitle"> This my Header</h2>
</div>
</div>
<div class "image">
<img class="myImage" .......>
</div>
</div>
First of all, you need to be careful with your code:
Use kebab-case for CSS class names
Use double space for indentation
Don't add spaces around = when setting an attribute
Now, to solve your problem, I think all you need to do is to reset the margin for the h2 element to make sure that the total height h2 + margin is smaller than the min-height you set for the title container.
Try this and see if it solves your problem:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="my-component-wrapper">
<div class="my-container">
<div class="title">
<h2 class="head-title">This my Header</h2>
</div>
</div>
<div class="image">
<img
class="my-image"
src="https://via.placeholder.com/800x200"
alt=""
/>
</div>
</div>
</body>
</html>
/* style.css */
body {
margin: 0;
padding: 0;
background-color: aqua;
}
.my-image {
width: 100%;
}
.title {
min-height: 60px;
}
.head-title {
margin: 0;
padding: 10px 0;
}
There could be multiple ways to do it. I am going to describe one that I find simple.
Use conditional margins
You can find out(by inspecting) how much height the header takes plus the gap between the header and the image and then what you can do is apply conditional margin top to the .image class to achieve it.
Assuming the height of header + gap is 40px and the gap itself is 20px, here's what you can do.
/* We give this margin-top by default. This includes header height + gap*/
.image {
margin-top: 40px;
}
/* If there's myContainer div, which i am assuming only comes in when you have the header, we reduce that margin top to 20px to compensate for the header that exists.*/
.myContainer + .image {
margin-top: 20px;
}
You could also give a specific height to your header element and then this calculation would become a little easier for you instead of finding the taken up vertical space by inspecting.
NOTE: you also need to worry about the line-height of the h2 element if you aren't specifying a particular height for it. In that case, you need to add the computed line-height along with the gap between the header and the image and then use that as the margin-top instead of 40px as shown above.
Update:
If the assumptions I made are wrong, then you can't use the sibling selector to apply those rules. In that case you need to either change your markup to make the header and the image as siblings or may be choose a more complicated route and use JavaScript(not preferred).
Semantically, I would like to keep them as siblings if I can(assuming I have control over the markup generation). In that scenario, it would look like this.
<div class = "myContainer"
<div class = "Title">
<h2 class = "headTitle"> This my Header</h2>
</div>
<div class "image">
<img class="myImage" .......>
</div>
</div>
Then I would use the same sibling selector trick to get the thing done.
JavaScript Way
If you do not have control over markup generation, you can use JS to conditionally apply the margins.
// Rough example of what you can do assuming the height of header is 20px.
// If you want to find out the height of header dynamically, use
// ```header.offsetHeight``` and add that with 20px(assumed gap height) and apply that as margin top.
const header = document.querySelector(".headTitle");
const image = document.querySelector(".image");
if(header) {
image.style.marginTop = '20px';
} else {
image.style.marginTop = '40px';
}
Set min-height value for your title that would be equivalent to it's line-height value. In such a way space for your title won't collapse even without text content.
.headTitle {
min-height: 40px;
line-height: 40px; // set these values as you want, they just need to be equal
}
<div class = "myComponentWrapper">
<div class = "myContainer"
<div class = "Title">
<h2 class = "headTitle"> This my Header</h2>
</div>
</div>
<div class "image">
<img class="myImage" .......>
</div>
</div>

Scroll effect to change opacity of each new div element

I am new to website design and have a question I'd like to ask. I have tried to use velocity.js to achieve this with failure. I am sure there is a rather simple css solution for what i want. I just want the previous div to "fade" and the new div that's scrolled to, to fade in with greater opacity. Open to any jQuery examples as well.
Here is my code for the section in question:
html:
<section id="services">
<h2 class="pb-5">Services We Offer</h2>
<div id="service1">
<h2>Service 1</h2>
</div>
<div id="service2">
<h2>Service 2</h2>
</div>
<div id="service3">
<h2>Service 3</h2>
</div>
</section>
css:
#services{
}
#service1{
height: 100vh;
background-color: rgb(44, 49, 90);
}
#service2{
height: 100vh;
background-color: #267481;
}
#service3{
height: 100vh;
background-color: #373f24;
}
I am sure there is a rather simple css solution for what i want
Unfortunately, that is not the case. CSS can perform animations, but if scrolling is involved in any way, JS is required.
You could use something like animate.css to control your CSS animations and then use wow.js to make them load on scroll.
As before stated by other answers and comments you cannot manipulate the scroll event in css alone but here is a simple jquery example that may help you. You can add and remove classes on scroll and you can add an animation to the css to control the opacity of your div.
$(window).on("scroll", function(){
var scrollTop = $(this).scrollTop();
$('.scrollDiv').each(function(){
var el = $(this);
var offsetTop = el.offset().top;
if(scrollTop > offsetTop){
el.addClass("scrolled");
}else{
el.removeClass("scrolled");
}
});
});
.scrollDiv{
height:100vh;
transition:opacity 500ms ease-in-out;
opacity:0.2;
}
.scrollDiv.scrolled{
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scrollDiv" style="background:green;"></div>
<div class="scrollDiv" style="background:red;"></div>
<div class="scrollDiv" style="background:blue;"></div>
<div class="scrollDiv" style="background:yellow;"></div>

hover one div in a series of similar, show the other

guys. I have several goods with description. I need "tile-description" appear when I hover over a "middle tile". Besides, I need a border around the "large-tile" on hover. Here is the mark-up and some js that I used, but it didn't work for me. Help me, please!
$(".middle-tile").mouseover(function(){
$(this).parent().siblings().css('opacity', 1);
});
$(".middle-tile").mouseout(function(){
$(this).parent().siblings().css('opacity', 0);
});
.tile-description{
position: absolute;
top: 100%;
background-color: white;
z-index: 10;
opacity: 0;
}
<div class="large-tile">
<div class="middle-tile">
<div class="tile-data">
<div class="tile-img"><img src="img/item-2.jpg" alt="" ></div>
<div class="tile-title">Title</div>
</div>
<button class="btn price">3 697</button>
</div>
<div class="tile-description">
<p>Some specs</p>
</div>
</div>
Use find instead of sibling when you use with parent or just sibling without parent as below:
$(this).parent().find('.tile-description').css('opacity', 1);
DEMO
Or
$(this).siblings('.tile-description').css('opacity', 1);
DEMO
Just use as CSS rule:
.middle-tile:hover + .tile-description {
opacity: 1;
}
-DEMO (using transition btw)

how to resize images inside a div inside another div with css?

I want to only resize images that are in a div with a specific class, inside an other div with an other specific class. but the images which are only inside the div which is inside the other div should not be resized.
This works if I want to resize images inside a classed div:
div.classname>img { width:something; }
but this doesn't work:
div.classname2 > div.classname > img { width:something; }
Markup
<div class="classname2">
<div class="classname">
<img>
</div>
</div>
But I can't refer to it with the inside class name.
So, to make it really clear, i need to resize these images:
<div class="classname2">
<div class="classname">
<img>
</div>
</div>
But not these:
<div class="classname">
<img>
</div>
I feel like your css rule should work
div.classname2 > div.classname > img { width:something; }
Does this fiddle show what you're trying to illustrate? If so, perhaps you just have overriding CSS rules somewhere?
I think this should work
CSS
.classname2 .classname img { width: 200px; }
Having:
<div class="parentDiv">
<img class="img1">
<div class="childDiv">
<img class="img2">
</div>
</div>
do it like this:
.parentDiv > img { width: 100px }
will just effect <img>s having class="img1" not those having class="img2"
Edit the only the single image you want without changing the rest, by going to that specific tag and putting the following style attributes.
<img class = "example" style = "width: 50px !important;">
UPDATE
Give this a try, add "!important" to the inside class to override the parent.
div.classname2 > div.classname > img { width:something !important; }

How to add `scroll` bar to a `div`, when its height as `auto`

In my container, there is multiple childrens, one of the 'div' getting appended by content in that.
when the total height of the container(parent) overflows, i would like to add the scroll bar to the div
is it possible to do by css?
here is the html :
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Js :
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
jsfiddle
UPDATE
I don't want to put the over-flow to container, if so my footer will hide. i require my user need to see the add button always. I can't put my button out side of the container again there would be multiple content in to the container
UPDATE
I find a solution by js is it possible to made without using `js'?
jsSolution
Yes, it is possible to do in CSS. Simply add this CSS rule to #container:
overflow-y:scroll;
Alternatively add this to show the scroll bar only when necessary:
overflow-y:auto;
http://jsfiddle.net/doesfmnm/2/
var p= "</p>Some testing text</p>";
$('button').click(function(){
$('.content').append(p);
});
.content{
border:1px solid red;
height:300px;
width:200px;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<h2>Heading</h2>
</div>
<div class="content">
</div>
<div class="footer">
Footer
</div>
</div>
<button>Add</button>
Adding a little more explanation to what #Guy3000 said. You're appending (adding after) into an element with the class 'content'. Let's consider what that means for the parent .container class. By adding content into a div inside of the parent, your parent will need to either grow to compensate for the added content, or it will need to have a y-axis scroll that permits content longer than the height of the container.
This means you can approach the dilemma you're facing by adding height to the container element, or you can keep a fixed height on the container and have a frame with a y-axis scroll bar contain the added content.
Here is the solution i find :
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down">
<div class="content"></div>
</div>
<div class="misc"><button>Add</button></div>
</div>
css :
#container { width: 300px; height: 300px; border:1px solid red;display:table;}
#up { background: green;display:table-row;height:0; }
#down { background:pink;display:table-row; overflow-y:auto}
.misc {
display:table-row;
background:gray;
height:30px;
}
.content {
overflow:auto;
height:100%;
}
Live
js solution :
http://jsfiddle.net/doesfmnm/4/

Categories