Develop Reference

How to generate a rendering of a preview snippet with both image and text like Facebook displays

I would like to generate something to display that looks like the Facebook app previews using plain javascript. I already have the image url, title, and description data. However, I have no idea where to start with rendering exactly like the following:
google maps preview
Usually, how do you accomplish this in javascript? Do you have to manually specify the CSS? I'd really appreciate any advice and resource suggestions. I'm very new to javascript and UI.

So our goal is something like:
<div class="containerDiv">
<img src="blah blah">
<div>
<div class="urlDiv">my.url.com</div>
<div class="titleDiv">My title</div>
<div class="descriptionDiv">My description</div>
</div>
</div>
You will of course need to style a bit. Your page typically loads a lot of css style sheets. To one of them, you can add the css that will style your new "component". As an example:
<style>
.containerDiv {
display:flex;
align-items:center;
border:solid 1px gray;
/* etc... */
}
.containerDiv > img { /*...style for the image...*/ }
/*...more styles...*/
</style>
My answer will not include the correct css. Learning css in depth by is itself long proccess, so be patient. Follow a good CSS tutorial in case you need it.
Let's go on. The next step is to render the above markup with js.
To achieve this with plain js, use the native functions:
1) document.createElement to create a new element. This returns a js object containing the html element representation. This is not appended yet to the document. It is not visible, not yet a part of the page.
2) You can manipulate this object using: setAttribute(). Attribute is everything that follows your tag name. For example, to set the src of an image call:
const myImg = document.createElement("img");
myImg.setAttribute("src", "https://my.cool/image.png"); //the image is still not visible, because we did not yet append it into the DOM...
3) We use innerHTML property and/or append child to add elements within other elements (you typically start by creating the outer most element, create each child one by one and call appendChild of the parent to add each child).
4) Once you are ready creating your whole element, append it anywhere you like in the document, and it will become visible:
const myCoolElement = document.createElement("div");
//do stuff
document.body.appendChild(myCoolElement); //this will put it at the end of the page
//or, alternativelly
document.querySelector(".myElement > #thatWillHost .my .newComponent").appendChild(myCoolElement); //to append it somewhere else.
As a side note, querySelector and querySelectorAll will be also useful functions to you. Using querySelector, you can append your new element anywhere in the page that you like.
As a conclusion, you can react and manipulate the document through js by using tha mentioned (and many more) functions that are available out-of-the-box in every browser.

JavaScript: backgroundImage isn't changing with onMouseOver

I'm pretty new to JavaScript, and I'm trying to figure something out. I have a series of images within a table, and I'd like each image to display within a div element when you hover over one. The problem is, the code doesn't appear to be doing anything. I hover over the div element, and no changes are being made to the #bigdisplay element. If I replace the backgroundImage with a property such as color, it works completely fine. What am I doing wrong? This is the code for my div element.
<div id="image1" onmouseover="document.getElementById('bigdisplay').style.backgroundImage='url('images/Slideshow1.png')';">
/* ... */
</div>
If I must provide any other code from my site I will (although I don't believe any of it is relevant). Any help would be greatly appreciated! Thank you!

Your code is fine. I separated the js just to make it easier to read. Your problem is either you have no height to the div or your path is wrong
function test(){ document.getElementById('bigdisplay').style.backgroundImage=
'url("https://res.cloudinary.com/rss81/image/upload/gw.jpg")'}
html,body,div{
height:100%;
}
<div id="bigdisplay" onmouseover="test()">
test
</div>

You're not properly escaping the string in the attribute. Attach the listener in Javascript instead, rather than in HTML attributes (which is as bad as eval) and it'll be easier to read and write:
const bigdisplay = document.querySelector('#bigdisplay');
document.querySelector('#image1').addEventListener('mouseover', () => {
bigdisplay.style.backgroundImage = "url('images/Slideshow1.png')";
});

I think one problem is that you used single quote to quote 'images/Slideshow1.png'. But you used single quote also for 'url('images/Slideshow1.png')'. So there is a conflict. Try 'url("images/Slideshow1.png")'. A part for this I find better to define the event handler function in the js document linked to the html document.

How to separate content with .each() - jQuery

I have two hidden <div> elements which are hidden at the bottom of my page like so:
<div class="hidden-unit" style="display:none;">
<h1>ad unit one</h1>
</div>
<div class="hidden-unit" style="display:none;">
<h1>ad unit two</h1>
</div>
Further up my page I have another two div elements, like so...
<div class="visible-unit"></div>
<div class="visible-unit"></div>
I would like to loop through each of the hidden units, place the content from the first .hidden-unit into the first .visible-unit and then likewise for the second.
The content that sits within each .hidden-unit will actually be an inline script used for displaying ads, this is passed through from an array into a view that I have created in PHP so there is a strong possibility that more content could be added to the array or removed, so this loop needs to accommodate for such situations.
I have tried a number of solutions using jQuery's .each() but I can't seem to get it right. I've also created a JSFiddle should anyone want to demonstrate a solution:
https://jsfiddle.net/p89sq2df/3/
I've tried loads of different combinations and the latest attempt only seems to be populating the .visible-unit elements with the 'ad unit two' text.
$('.hidden-unit').each(function() {
$('.visible-unit').html($(this).html());
});
Anyone had to do anything like this before? I appreciate it's an odd one.

You can try using the index:
$('.hidden-unit').each(function(index) {
$('.visible-unit').eq(index).html($(this).html());
});

var visibleUnits = $('.visible-unit').toArray();
var x = 0;
$('.hidden-unit').each(function() {
visibleUnits[x].html($(this).html());
x++;
});
The gotcha is that there could be more .hidden-unit elements than .visible-unit elements, which would cause an exception. But this you put you on the right track.

You need to use the index the elements so you update matching instances. This can be done using each or html(function)
$('.visible-unit').html(function(index){
return $('.hidden-unit').eq(index).html();
});
Since you mention that the content is loaded by script originally, you may need to allow time for any asynchronous loading (if any) in the scripts
DEMO

Rather than trying to match indices and having to maintain two lists of divs, you can clone the hidden divs and add them to a container, or insert them before or after another element if you really don't want a container element.
$(".hidden-unit").clone()
.removeClass("hidden-unit")
.removeAttr("style")
.addClass("available-unit")
.appendTo(".container");
Working fiddle here: https://jsfiddle.net/ygn34zL8/

Line clamping using a class element and Javascript

I have a PHP script that outputs data. It is all conveniently wrapped inside a p class.
It outputs the same data and same class multiple times, so there are like 6 blocks of text, each block being wrapped inside p class.
I need to reduce each block to 3 lines using any method possible. I already tried using PHP in various ways to no avail.
I came across Clamp.js which looked great. The only issue is, it will only work using ID. I can change the p class tags to p id, however, they'd all have to share the same ID, which, obviously, won't work.
Here's the current code I've tried:
var module = document.getElementsByClassName("clampjs");
$clamp(module, {clamp: 1});
And the HTML (times 6):
<div class="headtab">
Forum title<p class="bold">Posted By:</p> username <p class="bold">In:</p> category</div>
<div class="maintext">
<p class="clampjs">TEXT I WANT TO BE CLAMPED</p>
</div>
Like I say, it works fine when I use an ID, but obviously, only for the first block of text as the ID HAS to stay the same, that's why I'm using p class.
Sadly, what I've tried above doesn't work at all. Does anybody know a little fix for this script, or perhaps a different script that will clamp objects using a class element? Jquery is acceptable too.
Jsfiddle
Working code thanks to the accepted answer:
$(document).ready( function() {
$('.clampjs').css({ //changes the css of the clicked content.
'max-height':'75px', //give what ever height you want.
'overflow':'hidden'
});
});

this could be easily done with just editing your css
$('.clampjs').click( function() {
$(this).css({ //changes the css of the clicked content.
'height':'100px', //give what ever height you want.
'overflow':'hidden'
});
});
just now tested in my page it works...

How can I select a block of text on a page, then move an element in front of it?

I have a div that will appear on the page at a separate point. It doesn't always appear on the page and can be added via a CMS if needed. There's a line of text that will appear within the body. If the user has decided to have this div added, it would need to be moved into position via jquery. So, I have this text:
<p><strong>Key Facts:</strong></p>
I want to find it using jquery, then move the other div in front of it. I tried a couple of different ways to select this text then move the div in front of it and haven't had any luck. The best way I found to find the text was to do this:
var foundin = $('*:contains("<p><strong>Key Facts:</strong></p>")');
From that point, to move the div into position, I thought I could something like this:
$('#DivIWantToMove').insertBefore($foundin);
That didn't work, though. I also looked at this:
$( $foundin ).before( $('#DivIWantToMove') );
AS you might imagine, since you're reading this, that didn't work either. So, I'm asking you, is it possible to do what I want? I'm fairly constrained by the CMS that we are using. The DIV I need to move will always be someplace on the page and I have to move it. The client doesn't want to have to add a class to <p><strong>Key Facts:</strong></p> so I'm let with this. If I could have a class on <p> then it would be super easy. I've already done it. The client doesn't like having an extra step. Any ideas?

I think contains selector only looks for text, not html tags. so you have to modify your contains selector. if your html is like this -
<div>
<p><strong>Key Facts:</strong>
</p>
</div>
<div id="move">something something</div>
and you want to move your <div id='move'> in front of p, then try this -
var foundin = $('p:contains("Key Facts")');
var divtomove = $('div#move');
foundin.before(divtomove);
Demo
Update also look into this QA: jQuery :contains with html. Instead of using contains you can use one of the methods from there.