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>

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.

Read more on Database result

Hi there my code is quite simple but Id like for the design purposes to keep everything neat , at the moment Im pulling all the description which is like Some could be huge others can be quite small , anyway to make it fair I decided to make a read more button and once I click it just expand on the text like , SO somehow to make it show the first 160 characters after that ... then ReadMore link button that when you click it expands and shows the whole text
Heres my script that I use for now :
<p><?PHP echo $thismovie['description']; ?></p> <div style="text-align:right">
So I would like to know how this is done and if possible only using javascript, thanks !

While you could of course use PHP, another way is to use the text-overflow property of css correctly.
This method will put less strain on the server, especially when there are a bunch of descriptions on the page. Using PHP to concatenate every single one is not efficient and is not the correct way to do this.
Removing a class is much simpler. And you can add it back when you want to show less.
<style>
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 14px;
}
.description {
width: 300px;
background: #ccc;
padding: 3px;
margin-top: 30px;
margin-bottom: 0;
}
</style>
<!-- It is likely you would use a PHP loop for this but for illustration
purposes I've listed them out -->
<p class="description ellipsis"><?=$movie[0]['description']?></p>
Read More
<p class="description ellipsis"><?=$movie[1]['description']?></p>
Read More
<p class="description ellipsis"><?=$movie[2]['description']?></p>
Read More
<!-- use as many as you want with no additional strain on server. -->
WITH JQUERY... http://jsfiddle.net/kx2nbv3z/
<!-- Include jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document)
.on('click','.read-more',function() {
$(this).removeClass('read-more').addClass('show-less').html('Show Less').prev('.description').removeClass('ellipsis');
})
.on('click','.show-less',function() {
$(this).removeClass('show-less').addClass('read-more').html('Read More').prev('.description').addClass('ellipsis');
})
;
</script>
WITH PURE JAVASCRIPT... http://jsfiddle.net/8wsbw0u8/
<script>
if (document.body.addEventListener) {
document.body.addEventListener('click',yourHandler,false);
}
else {
document.body.attachEvent('onclick',yourHandler);//for IE
}
function yourHandler(e) {
e = e || window.event;
var target = e.target || e.srcElement;
prev = target.previousSibling.previousSibling;
if (target.className.match(/read-more/)) {
target.className="show-less";
target.innerHTML = "Show Less";
prev.setAttribute("class","description");
console.log(prev);
}
else if (target.className.match(/show-less/)) {
target.className="read-more";
target.innerHTML = "Read More";
prev.setAttribute("class","description ellipsis");
}
}
</script>

for PHP way:
$firstdesc=substr($thismovie['description'], 0, 160);
and when read-more pressed.
$totaldesc=substr($thismovie['description'], 160);
Ofcourse you can do it with Javascript too.

use the css style `text-overflow: ellipsis; and jquery for the full feature.
$('#read-more').click(function() {
$('#description').css('width','100%');
});
#description {
white-space: nowrap;
width: 12em;
overflow: hidden;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="description">This is some long text that will not fit in the box</div> <a id="read-more" href="#">Read More</a>

dynamic or adaptable class in css

I have a problem where I will be displaying a variable number of items displayed, and they will have a margin setting which is updated uniformly over the set.
So basically to put it simple if I have a set that is [1,2,3,4,5] it might be something like:
1 2 3 4 5
while if the number of number were to double they would require the same amount of space:
1 2 3 4 5 6 7 8 9 10
I have some solutions for this but what hit me was that if I have an css-class (as the margin is uniform over the given set) I could share the layout. So I would have liked it if it were possible to update the class dynamically if that makes sense I haven't found any information of that being possible to do, so if we assume that in the first example the margin is something like margin-right: 10px; then if I could change the class, (similar to how I set style on an element I guess is how I am thinking, but for the whole class), it would be really smooth. So let's assume a functionality to do this I could have a class:
.myclass {
margin-right: 10px;
}
and through our magic function .myclass.setProperty('margin-right', '5px'); (or whatever the syntax would be :P). It would act as if i had defined the class:
.myclass {
margin-right: 5px;
}
I hope that is enough to grasp my ideas and problem thus far. The way I am going about it at the moment is that I use a class for all shared behavior and set style for each element. However this is a bit tedious as it become something like:
for (var i in mynumbers) {
mynumbers.style.marginRight = new_margin;
}
Where new_margin is calculated based on a scale (i.e. it could change many times in a short period of time).
So to the question-part. Is there perhaps a way to achieve something like the first part (a way to dynamically change a class), or any thoughts or ideas how to implement it if the way I am doing it feels like a bad idea or if you feel there are better ways of handling this.
Thanks for reading and hope you find the problem interesting.

Ah, just another typical use case of flex layout:
.container {
display: flex;
border: 1px solid;
justify-content: space-between;
}
<h2>5 elements in a line with equal width gaps</h2>
<div class="container">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>
<h2>10 elements in a line with equal width gaps</h2>
<div class="container">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</div>
If your browser supports the feature, you would see something like this:
Here for browser compatibility.
EDIT: another interesting use case, although OP didn't ask about:
.container {
display: flex;
border: 1px solid;
justify-content: space-between;
}
.container:before, .container:after {
content: '';
width: 0;
}
<h2>5 elements in a line with equal width gaps</h2>
<div class="container">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
</div>
<h2>10 elements in a line with equal width gaps</h2>
<div class="container">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
<span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
</div>
If your browser supports the feature, you would see something like this:
Space is divided equally not only between elements, but also include both ends of the container. And you could see how simple the code is!

This sounds like a job for table-layout: fixed. Your browser computes the width of each "column" (element) in the first "table-row" based on the number of columns in the "table".
.table {
display: table;
table-layout: fixed;
width: 100%;
}
.table > span {
display: table-cell;
text-align: center;
}
<div class="table">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
<div class="table">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>

Yes. This is possible. One thing to be aware of is that changing a class's property may cause the browser's renderer to recalculate the entire page's layout (it needs to figure out how your class change affects the overall layout). So if you plan on changing your margin-right in a way to animate the change, it's not going to perform very well depending on the complexity of your page. That said, here is a quick and dirty implementation that should work on everything IE9+:
<html>
<head>
<style>
.thing {
display: inline-block;
width: 20px;
height: 20px;
background: #f00;
}
</style>
</head>
<body>
<div>
<div class="thing myClass"></div>
<div class="thing myClass"></div>
<div class="thing myClass"></div>
<div class="thing myClass"></div>
<div class="thing myClass"></div>
<div class="thing myClass"></div>
</div>
<div>
<button id="doit">Make bigger</button>
</div>
</body>
<script>
var styleTag = document.createElement("style"),
styleSheet, index, cssRule, style;
// Create a <style> tag that will hold our CSS rule
document.head.appendChild(styleTag);
styleSheet = styleTag.sheet;
// Insert an empty .myClass rule into the style sheet
index = styleSheet.insertRule(".myClass {}", styleSheet.cssRules.length);
// Get the 'style' object from the rule. This is nearly identical to elem.style
cssRule = styleSheet.cssRules[index];
style = cssRule.style;
// Sets .myClass { margin-right: 5px; }
style.marginRight = "5px";
// Demo to show that it works when you click a button
document.querySelector("#doit").addEventListener("click", function() {
style.marginRight = "20px";
});
</script>
</html>

Jquery, Open div inside its parent limits

I have a responsive image that contains some tickets ,
and I want that the tickets don't accross its container limits when opened
i can't describe well the problem but this is the example
http://jsfiddle.net/tnYjP/
<div class="container">
<img src=""/>
<div class="some" style="top:80%;left:80%">
<span>Title</span>
<p style="display:none;">Description
Description
DescriptionDescription</p>
</div>
</div>
And the jquery script is:
$('.some').hover(function(){
var description = $(this).find('p');
description.show('slow');
}, function(){
var container = $(this);
var description = container.find('p');
description.hide("slow");
});
Thanks

If I understand your question correctly (which can easily not be the case), you want to open the description within the giant TEST container. To do this, you need to set the position elements of the item to be based on bottom and right:
.some{
z-index: 4;
position: absolute;
bottom:10%;
right:10%;
background-color: rgba(12, 12, 12, 0.6);
}
Here is an updated jsFiddle
I also took the liberty of moving your inline styles to CSS, and updating your .hover() function to be the more effective .on().