Develop Reference

need help removing an IMG and replacing it with text in its position with javascript

Im working on a project and a part of it is making an image disapear on hover, and replace that with text in the same location! I have to do it through javascript.
im very new to front end web development so any help would be great!
.main-img1{
height: 400px;
width: 600px;
margin-top: 80px;
background-size: 600px 400px;
box-shadow: 10px 10px 5px rgb(24, 22, 22);
position: relative;
text-align: center;
font-size: 25px;
color: black;
border-radius: 50px;
}
.img1-text{
display: none;
position: absolute;
bottom: 8px;
left: 150px;
<section class="main-body">
<div>
<img class="main-img1" src="img/automotive.jpg">
<h1 class="img1-text" id="img1text"> Here are some samples of my automotive photography! I specialize in "Rolling Shots" which are caputring a vehicle in motion, while the background and foreground show the motion.</h1>
</div>

You can replace any element using the "magical" outerHTML like this...
First, I gave your image an ID to make javascript operations easier...
<img id="I" class="main-img1" src="img/automotive.jpg">
Now replace the image with a paragraph of text...
I.outerHTML='<p>Well what do you know!</p>';
For easy one-line HTML...
<img onmouseover="this.outerHTML='<p>Well what do you know!</p>';" class="main-img1" src="img/automotive.jpg">

First off, this is a very odd thing to do in Javascript. Usually hover states, appearing and disappearing, etc. are handled by CSS.
to do it in js you have to add a mouseover event listener to the image to execute a function to grab the element you want to disappear, add a css class to apply "display: none" to it, grab the element you want to appear and remove a class that adds "display: none" from it.
assuming you have a 'display-none' class on your text element that applies 'display: none' to it, you can do this:
const image = document.querySelector('.main-image1')
const text = document.querySelector('.img1-text')
image.addEventListener('mouseover', () => {
image.classList.add('display-none')
text.classList.remove('display-none')
}
if you were to do this with css its as simple as
.image {
z-index: 2;
}
.image:hover {
display: none;
}
.text {
z-index: 1;
}
that way the text is set behind the image and when you hover over the image it disappears. This also has the benefit of when you take your cursor off the image for the image to reappear where js will need to be told explicitly to do that.

How to restrict the div with a css badge when the content overflows

I am having a scenario where the selected items are overflowing the div.
But I have managed to wrap it by css properties.
Now I am planning to put a css badge if the content width is crossing the parent div to transform from image 1 to image 2:
.
<div class="list-view">
<div class="item-box">
<h4>select Cities</h4>
<ul>
<li *ngFor="let item of cityList" (click)="selectedCity(item)">{{item}}</li>
</ul>
</div>
</div>
I have a sample code from this link https://stackblitz.com/edit/angular-uatw5p.
I tried to achieve this but couldn't find a way. Can anyone let me know how to achieve this??

Slice the list of array for the number of items you want to display. I used three items to display. And minus three from the total length of array. Use the CSS to format it the way you want.
<div class="container-fluid">
Cities
<a *ngFor="let item of selectedItems.slice(0, 3)" href="javascript:void(0)">{{item}}</a>
<div *ngIf="selectedItems.length > 3">+{{selectedItems.length - 3}}</div>
<button (click)="selectedItems=[]">Reset</button>
</div>
The above will give you the following result:
Edit:
Use the following with the CSS provided in the another answer:
<a href="javascript:void(0)" class="selection">
<p>Cities {{selectedItems.length? ' : ' + selectedItems.slice(0, 3): '' }}</p>
<span *ngIf="selectedItems.length > 3">+{{selectedItems.length - 3}}</span>
</a>

It is the problem with text "Chennai,Mumbai,Pune,Bangalore" without spaces. If there is space, there would be on overflow of tex outside div
If you still require badge based on the text overflow, you need to add or remove css class based on parentDiv.offsetWidth and textDiv.offsetWidth. Css will dictate to show or hide the badge including ellipsis of text.

Try the following html for the anchor tag, manipulate the content by checking array length:
Cities {{selectedItems.length? (selectedItems.length < 3 ? ' : ' + selectedItems : ' : ' + selectedItems.slice(0,3) + '+' + (selectedItems.length-3) ): '' }}
Output

I would use a combination of overflow, overflow-wrap and white-space to make the text break correctly.
Then I would use a pseudo element to render the item count after the container.
By putting it absolute, we can align ther element relative to the container, no matter how many extra nodes we add to the container.
Since we use a pseudo-element, we can easily use the content css rule to bind the data-items attribute of the HTML container as the content of our little counter.
The big advantage is that by positioning the counter absolutely, we can keep using relative units to position everything else and we can put the counter anywhere we want, including putting overflow back on hidden and have the counter overlap the border.
const cities = [
"amsterdam",
"belize",
"calcutta",
"dortmund",
"egmond aan zee",
"frankfurt",
"gotenburg"
];
const render_list = list => content => {
const items = content.map( text => `<li>${ text }</li>` ).join( '' );
list.innerHTML = items;
return list;
};
const add_city = list => event => {
const item = event.target;
if ( event.target.nodeName === 'LI' ) {
list.appendChild( item.cloneNode(true));
list.setAttribute( 'data-items', list.childElementCount );
}
};
const options = document.querySelector( '#options' );
const selections = document.querySelector( '#selections' );
options.addEventListener( 'click', add_city( selections ));
render_list( options )( cities );
#selections {
background-color: steelblue;
border: 1px solid grey;
list-style: none;
margin: 4px;
max-width: 50%;
min-height: 1.1em;
overflow-wrap: break-word;
position: relative;
width: 50%;
}
#selections:after {
background-color: white;
border: 1px solid grey;
content: '+' attr(data-items);
position: absolute;
left: 100%;
top: -1px;
}
#selections > li {
display: inline;
margin-left: 2px;
}
#options {
border: 1px solid grey;
margin-top: 20px;
}
<ul data-items="0" id="selections"></ul>
<ul id="options"></ul>

I would ellipsis the text to always allow space for the badge:
p {
display:block;
text-overflow: ellipsis; /* will make [...] at the end of only ONE LINE!*/
-webkit-line-clamp: 2; // experimental only! would allow ellipsis on 2nd line
width: 370px; /* change to your preferences */
white-space: nowrap; /* paragraph to one line */
overflow:hidden; /* older browsers */
}

If it helps, one simple css fix as overflow-wrap: break-word; by using word-break property
a{
text-decoration: none;
color: black;
background: skyblue;
display: block;
width: 20em;
margin: 20px auto;
padding: 1.2em;
font-size: 18px;
max-width: 16em;
overflow-wrap: break-word;
}

Animate shrink and expand transitions for subsets of elements in a nested set of divs in javascript [duplicate]

This question already has answers here:
How can I transition height: 0; to height: auto; using CSS?
(41 answers)
Closed 5 years ago.
I need to animate the shrink and expand transitions for subsets of elements in a nested set of divs. The expand works fine, but the shrink is broken.
I have a structured collection of items (say, squares for purposes here) that I want to display selectively and whose transitions I want to animate.
The structure is: collection > groups > rows > squares
In static layout,
squares appear in horizontal rows;
rows are gathered vertically in groups;
a column of groups forms the collection.
Squares can be of varying sizes, so containers must adjust accordingly
(no fixed heights or widths).
I have obtained a static layout that is just what I want.
The problem comes with animation. I want to hide various subsets
of squares, rows and/or groups. Nearby items can look similar so it is
difficult for users to tell just what is being added or subtracted, so
I need a smooth animation so users can follow what is changing.
I am trying to do this with a CSS-animated shrink:
A shrinkMe class marks all element that I will want to
shrink/expand at the moment
CSS transition times are set for these
shrinkMe elements
A shrunken class is defined whose CSS has all its
size parameters set to 0
To shrink or expand, jQuery adds or removes
the the shrunken class tag to the $('shrinkMe') items, to animate
items between the full and shrunken (=0) sizes
The un-shrink animated transition is exactly what I want. But the shrink animation does not work at all - contents spill out of containers along the way.
shrink = function(bool,nsec) {
$('.shrinkMe').css("transition", 'all ' + nsec+ 's');
if (bool) $('.shrinkMe').addClass('shrunk')
else $('.shrinkMe').removeClass('shrunk');
}
anim = function(secs) {
return 'all ' + secs + 's'
}
.controls {
display: inline-block;
vertical-align: top;
}
.collection {
display: inline;
text-align: center;
border: 2px solid black;
padding: 3px;
display: inline-block;
}
.group {
display: block;
margin: 2px;
border: 2px solid black;
padding: 3px;
}
.row {
display: block;
vertical-align: middle;
background: #0cc;
margin: 1px;
border: 2px solid black;
}
.sq {
display: inline-block;
background: white;
width: 20px;
height: 20px;
margin: 5px;
border: 2px solid black;
}
.lg {
width: 25px;
height: 25px;
}
.shrinkMe {
border-color: red;
}
.shrunk {
height: 0px;
width: 0px;
border-width: 0px;
padding: 0px;
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class='controls'>
<button type='button' onclick='shrink(true,2)'>shrink reds </button>
<br>
<button type='button' onclick='shrink(false,2)'>unshrink reds </button>
</div>
<div class='collection'>
<div class='group'>
<div class='row '>
<div class='sq'></div>
<div class='sq'></div>
</div>
<div class='row shrinkMe'>
<div class='sq lg shrinkMe'></div>
<div class='sq shrinkMe'></div>
<div class='sq lg shrinkMe'></div>
</div>
</div>
<div class='group shrinkMe' id='group2'>
<div class='row shrinkMe' id='group2container2'>
<div class='sq shrinkMe'></div>
<div class='sq shrinkMe'></div>
</div>
<div class='row shrinkMe'>
<div class='sq shrinkMe'></div>
<div class='sq lg shrinkMe'></div>
<div class='sq shrinkMe'></div>
</div>
</div>
</div>
Among other things, I've tried using different explicit transition speeds, so containers shrink more slowly than their contents, but to no avail. If I set explicit heights and widths of the rows and groups, I can get a coordinated nested-shrink but it is ugly:
It shrinks by squashing to the left side and;
The final layouts can have empty spaces in them (e.g., when a row shrinks inside an unshrunk group, the fixed explicit group container height means there is now a hole where the row was).
What I want is to achieve is simple: a shrink animation that is the time-reverse of the nice clean un-shrink.
Here also is a jsfiddle showing the problem that additionally has buttons for trying separate timings of more deeply nested divs (which
does not help...)
https://jsfiddle.net/furnas/dgq8yusy/
Any explanation of what is going wrong and suggestions on how to fix
it?

Use jquery anymation onComplete event for adding and removing classes to divs.
because your css transition works like asyncronous method on another thread, so, you need to wait for it to complete and than add/remove classes.
http://api.jquery.com/animate/

Marquee-like horizontal scroll without scrollbars?

I have seen both overflow scrolling with no scrollbars and Hide scrollbar for mobile devices while keeping the scroll ability ; unfortunately, both of these suggest a solution with position: absolute; and I think that I cannot really apply that to my problem.
The code in this example renders this:
Basically, the red outline boxes are divs of class .myBox, with a fixed width. These divs are side-by-side, in a container that is horizontally centered inside its container div. The top part is reserved for titles, which may be long. I'd like the titles to be rendered as on the right side one - but if they have focus, then I'd want the titles to scroll left-right with either keyboard arrow buttons, mouse wheel - or (also for mobile) dragging left and right.
Of course, since the right box's title has overflow: hidden;, there is no possibility to scroll. If I leave the scrollbar visible (overflow-x: scroll;) as on the left box, then the title is not visible at all (and I cannot scroll anyways).
So is it possible somehow to allow scrolling in the title parts of these boxes in this way (sort of like a marquee scroll behavior, but manual)?
Bonus question: is there a sort of a JavaScript library (or even better, a plain CSS solution), that would allow something similar - except, if the text is too long, it is truncated and ellipsis is added (so, instead of "My even longer" it should show "My even lon..." at start), then as you drag right to left, it also calculates ellipsis at start and at end - and when you come to the right end, it takes away the right ellipsis?
The example code is:
.mainHolder {
font-size: 14px;
border: 2px solid #999;
text-align: center; /* centers the span */
}
.centerer {
border: 2px solid #555;
display: inline-block; /* makes the span have the same width as its div contents*/
margin: 0;
padding: 0;
}
.myBox {
width: 8em;
border: 2px solid #F55;
border-radius: 0.5em;
display: inline-block; /* enables two myBox side-by-side */
}
.heading {
height: 1.25em;
border-radius: 0.25em;
background-color: #94B6F7;
overflow: hidden;
overflow-x: scroll;
}
/*just as example, remove the scroller of box2*/
#box2 .heading {
overflow-x: hidden;
}
<div class="mainHolder">
<span class="centerer">
<div id="box1" class="myBox">
<div class="heading">
My very long title
</div>
<div class="data">
Data: 1
</div>
</div>
<div id="box2" class="myBox">
<div class="heading">
My even longer title
</div>
<div class="data">
Data: 2
</div>
</div>
</span>
</div>

Form element container heights

I'm building a form manager for my framework and want to add methods to create form elements based on parameters passed. Each "element container" has the following:
A validation row positioned at the top of the container. This row is turned off by default (display: none) and will only show if a javascript validation error occured.
A label container (situated on the left)
A form control container (situated on the right)
Here is a sample HTML:
<div class='control_container'>
<div class='validation'></div>
<div class='label_container'>
<label for=''>Label</label>
</div>
<div class='elements_container'>
<div class='element'>
<input type='text' name='' value='' />
</div>
</div>
</div>
My issue here is that I need to the control_container to seperate label and elements containers but also need the label_container and element_container to both have the same height irrespective of the content. These 2 containers may have different background colours so I need to ensure that the stretch to the bottom of the control_container and also keep in consideration that the validation div might show (so using position: absolute and top: 0 might not work).
I have tried the following:
Giving control_container a relative position and the 2 seperate containers both a position absolute. As the height of the containers would mostly be dictated by the height of the label (if the label is multiple lines or if the element_container has multiple elements within it this option does not work.
Floats (There I say more? :D)
I would prefer a CSS solution which is compatible with most browsers (including IE8 (am I pushing it to ask for IE7 haha)
Any ideas?
** ADDITIONAL INFORMATION **
I want the layout to look something like this:
--------------------- control_container ---------------------
[Potential validation message (this will be toggled on/off) ]
[label_container][ elements_container ]
------------------- end of control_container ----------------
So label_container (with the label) and elements_container (with it's elements) will be next to eachother. These 2 containers may have different background colours so they should both stretch (height) according to the biggest element. The only issue I see here is validation element which wont show by default so using absolute positioning might not work as the validation message might take the top area and have the elements overlap eachother.

HTML:
<div class="controls">
<div class="message">Test</div>
<div class="label_container">
<label for="">Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label </label>
</div>
<div class="elements_container">
<div class="element">
<input type="text" name="test" value="" />
</div>
</div>
</div>
CSS:
.controls {
position: relative;
display: table;
width: 100%;
}
.controls .message {
background: red;
padding: 5px;
color: #FFF;
font-weight: bold;
height: 30px;
width: 100%;
display: table-caption;
box-sizing: border-box;
}
.controls .label_container {
display: table-cell;
background: #D3D3D3;
width: 150px;
height: 100%;
margin-top: 30px;
}
.controls .elements_container {
display: table-cell;
background: #A2A7DD;
color: #000;
width: 650px;
height: 100%;
margin-top: 30px;
margin-left: 150px;
}
All of them here in jsFiddle: Demo