We Keep Coding

How to add a custom code that will be displayed in the header for visitors who come from a specific promotion

I would like to add a custom code (e.g. save 15% with the code: 15OFF) that will be displayed in the header, for visitors who come from a specific promotion, (link e.g. example.com?promo) and the custom code should remain displayed on all pages that the visitors will visit
<div style="display:table;height: 40px;background-color: #f8f8f8;padding: 1px;line-height: 1.3;width: 100%;">
<div style="display: table-cell;vertical-align: middle;">
<div style="color: #000;text-align: center;font-size: 13px;">Save 15% off with code 15OFF</div>
</div>
</div>

If your idea is to give users that should see the banner a specific url, you could put there something like a get parameter and search for it using javascript. Please note that this is ok if your server is ignoring the get parameter.
You can modify your div to be normally hidden
<div style="display:none; height: 40px; background-color: #f8f8f8; padding: 1px; line-height: 1.3; width: 100%;">
<div style="display: table-cell;vertical-align: middle;">
<div style="color: #000;text-align: center;font-size: 13px;">
Save 15% off with code 15OFF
</div>
</div>
</div>
and check if there is a get parameter called promo set to true; in that case, make your div visible.
var url = new URL(window.location.href);
var promo = url.searchParams.get("promo");
if(promo == 'true'){
document.getElementById("promoBanner").style.display = "table";
}
Please note that with this solution, if you want to show the same banner in the next pages visited, you have to keep the get information, so links should be properly handled (for example)
<a onclick="window.location='newPageLink'+window.location.search;">
Link
</a>

The first thing you'll need to answer is, "How does the browser know that they came from a specific promotion?" In a lot of cases, your promotion link will have a specific URL parameter which can inform the browser where they came from.
const queryString = window.location.search.substring(1);
const params = queryString.split('&')
params = params.map(param => {
param = param.split('=');
return {
name: param[0],
value: param[1]
}
})
if ( params.includes({name: 'fromPromo', value: 'true'}) ) {
// create an element and push it to your page
}
All this said, this kind of task is much more easily handled with a front-end framework like React, Angular, Vue, etc.

Toggle it using document.referer perhaps.
const fromHere = ["wwww.example.com", "www.example.org"];
var toggleState = function(elem, fromMe) {
var elem = document.querySelector(elem);
elem.setAttribute('data-state', fromHere.includes(fromMe) ? "hidden" : "shown");
};
const hiddenGem = '.only-if-from';
let fromMe = document.referer;
fromMe = "www.example.com"; // fake for test
toggleState(hiddenGem, fromMe);
.only-if-from[data-state=hidden] {
display: none;
}
.only-if-from[data-state=shown] {
display: block;
}
<div class="only-if-from" data-state="hidden">
<div style="display:table;height: 40px;background-color: #f8f8f8;padding: 1px;line-height: 1.3;width: 100%;">
<div style="display: table-cell;vertical-align: middle;">
<div style="color: #000;text-align: center;font-size: 13px;">Save 15% off with code 15OFF</div>
</div>
</div>
</div>

Submit dynamical form using JQuery

I´m not really sure I can do this, but it's worth the try.
I have a table with at least 10 items coming from a Mysql database. They are items for which you can bid. The idea is that every row (therefore, every item) has a button that can be clicked to enter the bid. This button opens a popup with a text field to enter the bid and a button to submit the form.
In order to identify the item the user is bidding for, I need its id, as well as the amount bid. The amount is really easy to get, but I´m struggling a lot with the item id.
Here is what I have:
$(document).ready(function(){
$(".show").click(function() {
$("#popup").show();
var $id = document.getElementsByClassName('show')[0].value;
console.log($id);
$("#jugador").val($id);
});
$("#close, #submit").click(function() {
$("#popup").hide();
});
});
#popup {
position: relative;
z-index: 100;
padding: 10px;
}
.content {
position: absolute;
z-index: 10;
background: #ccc;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 5;
opacity: 0.4;
}
<td><button class="show" id="bid" value="<?php echo $row2["id"];?>"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>
/*Popup*/
<div id="popup" style="display: none;">
<div class="overlay"></div>
<div class="content">
<header>
<div id="close">✖</div>
</header>
<form name="form1" method="post" action="bid.php">
<fieldset>
<label for="bid">Bid:</label>
<input type="text" name="bidAmount" id="bidAmount" size="8" />
<input type="hidden" name="item" id="item" />
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
<footer>
<button type="button" id="submit">Bid Now</button>
</footer>
</form>
</div>
</div>
I´ve been trying for a while with no luck. I will always get the item id for the first element no matter in which button I click.
Is it feasible what I want? Is this the correct approach? Should I use a different one?
Thanks a lot in advance.

Just change this line:
var $id = document.getElementsByClassName('show')[0].value;
To this:
var $id = $(this).val();
The problem is that with document.getElementsByClassName('show')[0].value you are querying the first occurrence of the .show button. With $(this) instead you will be accessing the current clicked button.
JQuery binds the events to the target where you attach the event, so this will always be a reference to the target of the event. Using $(this) will create a jQuery object of the target element permitting to apply jQuery functions to the element.
As a side note, you shouldn’t duplicate the elements ids. Every id must be unique in the html document, so it will be a good practice to make that id different for each button.
Hope it helps.

To access the current div element's Id you can use the ($this), which refers to the current javascript object.
$("div").click(function(){
alert($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">Num 1</div>
<div id="2">Num 2</div>
<div id="3">Num 3</div>
<div id="4">Num 4</div>
Here in this example, i have created div's which when clicked return's the id of that div.

When you do it like this var $id = document.getElementsByClassName('show')[0].value; it will always take the first element having class="show".
Which will contain the first item hence always gives the id of first item.
So instead of doing it like that you can do it like this:
var $id = $(this).val();
This will select the current item on which user has clicked so will give the id of that item.

Resizing Divs using Javascript with a Parent and Child element

I have a view that sits on my Salesforce platform that is controlled by JavaScript and HTML. I have a requirement that because users have different responsibilities and needs they would like the ability to adjust their div sizes and views so it will be customized to the user. The following is my div structure, any ideas how I can allow them to re-size this? A future requirement will be that I save the layout/sizes of the divs so that's why I believe Javascript is a necessity..
Edit to question: It should be re-sized to how ever the user wants it so by Dragging (Just for height).
<div id="resizeMe" class="hp-onecolumn hp-sectionpad">
<div class="hp-borders hp-boxcontainer" id="dvTripTask">
<span class="hp-bluebox1"><h3 class="hp-header_label hp-headerpad">Trip Planning To Do List</h3>View Report
<span class="hp-range-container">
<span class="ui-widget" targetId="TripTasks"><select id="drpTripTasksRanges" style="visibility:hidden;" class="drpRanges" targetId="TripTasks"></select></span>
<span class="hp-datepicker"><span id="lblTripTasksFrom">From: </span><input id="dpTripTasksFromDate" class="hp-datepicker_control hp-datefrom" targetId="TripTasks"/> To: <input id="dpTripTasksToDate" class="hp-datepicker_control hp-dateto" targetId="TripTasks"/></span>
</span>
</span>
<div id="dvTripTaskInner" class="hp-innerbox">
<div class="hp-innerboxpad">
<table id="tblTripTasksList"></table>
<div id="pgTripTask"> </div>
</div>
</div>
</div>
<div id="resizer"></div>
</div>

Very fast mockup but this is the general idea. It shouldn't be hard to work the idea into your specific HTML. Let me know if you have any questions!
Fiddle: http://jsfiddle.net/mok38fur/5/
HTML:
<div id="resizeMe"></div>
<div id="resizer"></div>
CSS:
#resizeMe {
height: 100px;
width: 100%;
background: blue;
}
#resizer {
height: 10px;
width: 100%;
background: red;
cursor: row-resize;
}
JS:
var yAxisDrag;
var resizer;
var resizeMe;
var resizeMeHeight;
function makeResizable() {
resizer = document.getElementById('resizer');
resizeMe = document.getElementById('resizeMe');
resizer.addEventListener('mousedown', initializeDrag);
};
function initializeDrag(event) {
yAxisDrag = event.clientY;
resizeMeHeight = resizeMe.offsetHeight;
document.addEventListener('mousemove', onResizerDrag);
document.addEventListener('mouseup', onStopResizerDrag);
};
function onResizerDrag(event) {
var newResizeMeHeight = resizeMeHeight + event.clientY - yAxisDrag;
if (newResizeMeHeight <= 30) {
return;
}
resizeMe.style.height = newResizeMeHeight + 'px';
};
function onStopResizerDrag(event) {
document.removeEventListener('mousemove', onResizerDrag);
document.removeEventListener('mouseup', onStopResizerDrag);
};
makeResizable();

If you are allowed to use third party javascript libraries like jQuery and jQuery UI, I should recommend you to use jQuery UI's Resizable plugin.

Forcing scrollbar to the bottom jquery/css

I have created a chatroom which elements are li. I want it to always stick to the bottom. It works fine when number of chats are like 10-20 but after that it stops halfway. I think there is something wrong with the height but I can't figure it out here is my html :
<div id="chat-main">
<ul id="chat-list">
//I dynamically add <li>s using ajax
</ul>
</div>
<div id="message-panel">
<form class="form-inline" id="messageForm">
<input id="message-value" type="text" autocomplete="off" maxlength="510" placeholder="Type your message...">
</form>
</div>
Here is my css:
#chat-main {
height: 84%;
border: 2px solid #d8d7cf;
}
#chat-list {
height: 100%;
overflow-y: scroll;
}
#chat-main>ul {
padding-left: 10px;
list-style-type: none;
}
And this is the jquery code for scrolling:
$("#chat-list").animate({ scrollTop: $(document).height() }, "slow")
I'm really stuck and don't know what is wrong.
Edit: here is my jsfiddle sorry for the chat objects I inserted alot so you can see what happens :
http://jsfiddle.net/L8msx/19/

Using document height doesn't seem logical, this will get the exact overflow of the chat :
http://jsfiddle.net/1yLzkgw8/
var chat = $("#chat-list"),
overflow = chat[0].scrollHeight-chat.height();
chat.animate({scrollTop: overflow}, 'slow');
When getting scrollHeight, plain JS is used so the DOM node itself is retrieved with [0].

Show div content upto two lines only

I have issue with showing some content in div.
I have some text consider 10 lines of content which I have to show in div.
I would like to design in such a way that initially div will show 2 lines of content only, & have one link "Read Complete". & when I will click on that link the whole content must be shown & link must be changed to "Hide". & if I again click on Hide link it must be again shown only 2 lines of content.
Please help with me this issue.
Update: When the content is of two line # the end of content it must show 3 dots (...)

I hope this will help you
<div id="mydiv">
Please read the documentation.
For updates please follow our blog, tweets or become a fan.
<span>more</span>
<span style="display:none;" id="disMore"><p>Please read the documentation.
For updates please follow our blog, tweets or become a fan.Please read the documentation.
For updates please follow our blog, tweets or become a fan.Please read the documentation.
For updates please follow our blog, tweets or become a fan.</p></span>
<span>hide</span>
</div>
Javascript:
function full_view(e) {
document.getElementById('disMore').style.display = "block";
document.getElementById('more').style.display = "none";
document.getElementById('hide').style.display = "block";
}
function half_view(e) {
document.getElementById('disMore').style.display = "none";
document.getElementById('more').style.display = "block";
document.getElementById('hide').style.display = "none";
}

You can do it like this:
<div id="text">
Your content...
</div>
Read all
$(document).ready(function() {
//Change this variable to show more or less lines:
var nrOfLines = 2;
var height = 0;
//Get line height
height = $('div#text').css('line-height');
height = height.substring(0, height.search('px'));
height = (height * nrOfLines) + 'px';
//Set div to only show 2 lines
$('div#text').css({'height' : height});
setTriggers();
function setTriggers() {
$('a#readall').click(function() {
$(this).attr('id', 'hide');
$(this).html('Hide');
$('div#text').css({'height' : 'auto',
'overflow' : 'auto'});
setTriggers();
});
$('a#hide').click(function() {
$(this).attr('id', 'readall');
$(this).html('Read all');
$('div#text').css({'height' : height,
'overflow' : 'hidden'});
setTriggers();
});
}
});
And your CSS:
div#text {
border: 1px solid black;
width: 250px;
overflow: hidden;
}
I made an example here: http://jsfiddle.net/c5sza/2/
You could pimp it some more by using a sliding effect etc.

You can use PURE CSS line-clamp Property to save your design. Please do have a look
.card .card-header {
font-weight: 600
}
.card .card-body .content {
line-height: 20px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
margin-bottom: 8px;
overflow: hidden;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container my-3">
<div class="row">
<div class="col-md-12">
<h4 class="mb-3">Line-Clamp Text-Ellipsis Example</h4>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">BTC - Bitcoin</div>
<div class="card-body">
<p class="content"> Bitcoin is the most secure and robust cryptocurrency in the world, currently finding its way across the world of business and finance. Bitcoin was thought of as Internet money in its early beginnings. Unlike fiat currencies Bitcoin is a decentralized
currency. That means that a network of users control and verify transactions instead of a central authority like a bank or a government. Up to this day, Bitcoin uninterruptedly works as money one person pays another person for goods and services.
Once Bitcoin is exchanged, the record of the transaction is publicly recorded onto a ledger known as the blockchain, which other Bitcoin users, known as miners, verify by putting those transactions into a block and adding it to the blockchain
after Proof of Work (PoW).</p>
</div>
</div>
</div>
</div>
</div>

You can use CSS line-height and height to control that. here is my simple demo on jsfiddle:
http://jsfiddle.net/7xv6J/