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.
Related
Hello stackoverflow community, I have a question regarding the use of the <object> html tag. Below is a description of what I want to do:
I am using the summernote editor, however I would like every change within the editor to be presented to the user as the html page will be. I am currently using the following code:
$('#summernote').summernote({
placeholder: 'Hello bootstrap 4',
tabsize: 2,
height: 300,
lang: 'pt-BR'
});
$("#summernote").on("summernote.change", function(e) { // callback as jquery custom event
console.log('it is changed');
myFunction();
});
var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e) {
e.preventDefault();
dragging = true;
var main = $('#main');
var ghostbar = $('<div>', {
id: 'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');
$(document).mousemove(function(e) {
ghostbar.css("left", e.pageX + 2);
});
});
$(document).mouseup(function(e) {
if (dragging) {
var percentage = (e.pageX / window.innerWidth) * 100;
var mainPercentage = 100 - percentage;
$('#console').text("side:" + percentage + " main:" + mainPercentage);
$('#sidebar').css("width", percentage + "%");
$('#main').css("width", mainPercentage + "%");
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});
function myFunction(data) {
var text = $('#summernote').summernote('code');
document.getElementById("demo").innerHTML = "<!DOCTYPE html><html><meta charset='UTF-8'>" + text + "</html>";
console.log(document.getElementById("demo"));
console.log(text);
}
.clearfix:after {
content: '';
display: table;
clear: both;
}
#main {
float: right;
width: 50%;
}
#sidebar {
width: 50%;
float: left;
overflow-y: hidden;
}
#dragbar {
/*background-color: #a9a9a9;*/
background: transparent;
height: 100%;
float: right;
width: 3px;
cursor: col-resize;
}
#ghostbar {
width: 3px;
background-color: #a9a9a9;
opacity: 0.5;
position: absolute;
cursor: col-resize;
z-index: 999
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote Editor</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-bs4.js"></script>
<script src="summernote-pt-BR.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!--<div id="summernote"></div>-->
<div id="sidebar" class="col">
<span id="position"></span>
<div id="dragbar">
</div>
sidebar
<form method="post">
<textarea id="summernote" name="editordata"></textarea>
<button type="submit" class="btn btn-primary">Salvar</button>
</form>
</div>
<div id="main">main
<p id="demo"></p>
</div>
</div>
</div>
</body>
</html>
But instead of using the <p> tag along with innerHtml, I'd like to use the <object> tag, and its contents being changed daily.
If you have other better solutions, feel free to make suggestions.
Note: I have already tried using the tag but somehow using this tag hinders the resize that I need to perform between the editor and html viewer.
Note 2: I'm a beginner, and my English is not good. So sorry if something went wrong without making sense. I used Google translate to explain the issue.
Hi Rafael — thanks for clarifying.
The reason your code looks different in the iframe or object tags is due to the differing CSS. When you use an iframe and set the source dynamically, the CSS comes from the User Agent Stylesheet. The tag does not inherit the parent's styles. Currently, your CSS in the p tag is from Bootstrap 4.
Option 1: You could customize the CSS on this element to make it appear consistent in a non-Bootstrap context.
Option 2: If you still want to change tags, I think you are better off using an iframe instead of an object tag, per the MDN docs and the discussion on this SO thread.
Change <p id="demo"></p> to <iframe id="demo"></iframe>, and your myFunction to:
function myFunction(data) {
var text = $('#summernote').summernote('code');
var frame=document.getElementById("demo");
frame.srcdoc="<!DOCTYPE html><html><meta charset='UTF-8'>" + text + "</html>";
}
If you support IE11, Edge, and Opera Mini (srcdoc is not supported there) you can use a polyfill.
One final consideration with this route is performance — I couldn't find much on this, but I suspect that setting the innerHTML of your p tag is far less expensive than re-rendering an iframe. You might want to investigate and consider reducing the update interval if this becomes a problem.
I'm new to JavaScript and I'm trying to build a web page and I've 3 images of that product in my sidebar and one main image in the middle now I want to get the sidebar image in the middle when a user clicks on that sidebar image. I don't know how to go about this. I've already tried couple of ways which I've found online, one of them is this
1. How to swap image and video to another div?
But these are not working out for me.
What you have to do is save both images in a variable and then swap them. Look at the example below
var imgleft,
imgcenter,
$center = $(".center img");
$(".sidebar img").click(function(){
imgleft = $(this).attr("src");
imgcenter = $center.attr("src");
$center.attr("src", imgleft);
$(this).attr("src", imgcenter);
});
.sidebar{
position: absolute;
top: 0;
width: 70px;
height: 100%;
background: red;
}
.center{
width: 80px;
height: 80px;
margin:25% auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<img src="http://placehold.it/70x70">
<img src="http://placehold.it/70x60">
<img src="http://placehold.it/70x50">
</div>
<div class="center">
<img src="http://placehold.it/70x40">
</div>
You can use javascript's event handling (on each of your sidebar images) to solve this problem. First add the following java script code in your html:
<script type="text/javascript">
function changeToImage1(){
if(centerImage.src != "[1st-image-url.*]"){
centerImage.src = "[1st-image-url.*]";
}
}
function changeToImage2(){
if(centerImage.src != "[2nd-image-url.*]"){
centerImage.src = "[2nd-image-url.*]";
}
}
function changeToImage3(){
if(centerImage.src != "[3rd-image-url.*]"){
centerImage.src = "[3rd-image-url.*]";
}
}
</script>
Then you can simply add the above functions in the onClick attributes of your three sidebar div's accordingly. This can be done like this:
<div id = "first" onclick = "changeToImage1()">
...
</div>
<div id = "second" onclick = "changeToImage2()">
...
</div>
<div id = "third" onclick = "changeToImage3()">
...
</div>
I was wondering if there was a way to have a centered item shift smoothly when its width changes?
In my case, I have a piece of text on the left that stays the same, and the piece of text on the right will change depending on what page you are on.
<div id="title-container">
<h1 class="inline-header">example.</h1>
<h1 id="title-category" class="inline-header">start</h1>
</div>
The total width of this will change as a result, and it will shift abruptly.
Here is a jsfiddle demonstrating the problem.
https://jsfiddle.net/sm3j26aa/3/
I've currently worked around it by just fixing the left side using relative positioning and translates, but if I can get the smooth transition, I would rather do that.
Thanks for any help!
Instead of fading just the right portion in and out, you'll need to fade the entire line.
Also, there is no need for individual functions for each word change. Just have one function that accepts the new word as a parameter.
Lastly, don't use inline HTML event attributes to set up event handlers. It:
creates spaghetti code that is more difficult to read
creates anonymous wrapper functions that alter the this binding
within the function
doesn't follow W3C DOM Even Standards
Instead set up your event handlers in JavaScript.
var $titleContainer = $('#title-container');
var $titleCategory = $('#title-category');
$("button").click(function(){ change(this.textContent); })
function change(text) {
$titleContainer.fadeOut(300, function() {
$titleCategory.text(text);
$titleContainer.fadeIn(600);
})
}
#title-container, #button-container { text-align: center; }
.inline-header { display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title-container">
<h1 class="inline-header left">example.</h1>
<h1 id="title-category" class="inline-header">start</h1>
</div>
<div id="button-container">
<button>Sample</button>
<button>Hello</button>
<button>SampleX2</button>
</div>
var $titleCategory = $('#title-category');
function changeToSample() {
$titleCategory.fadeOut(300, function() {
$titleCategory.text('sample');
$titleCategory.fadeIn(600);
document.getElementById('title-container').style.marginLeft = `calc(50% - 14em/2)`;
})
}
function changeToHello() {
$titleCategory.fadeOut(300, function() {
$titleCategory.text('hello');
$titleCategory.fadeIn(600);
document.getElementById('title-container').style.marginLeft = `calc(50% - 12em/2)`;
})
}
function changeToDoubleSample() {
$titleCategory.fadeOut(300, function() {
$titleCategory.text('samplesample');
$titleCategory.fadeIn(600);
document.getElementById('title-container').style.marginLeft = `calc(50% - 20em/2)`;
})
}
#title-container {
margin-left: calc(50% - 12em/2);
transition: .2s;
}
#button-container {
text-align: center;
}
.inline-header {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title-container">
<h1 class="inline-header">example.</h1>
<h1 id="title-category" class="inline-header">start</h1>
</div>
<div id="button-container">
<button onclick="changeToSample();">Sample</button>
<button onclick="changeToHello();">Hello</button>
<button onclick="changeToDoubleSample();">SampleX2</button>
</div>
I am building a website that expands horizontally as user takes action like http://portal.azure.com style. When they click a button(from a list) in one div, the details of the selected items appear in another div beside it. this can get really long and over flow the mother div.
I am looking for a way i can automatically scroll the page to the right most edge when a new div overflows.
layout
<div style="overflow-x: auto">
<div layout="row">
<div class="col" style="width: 400px">
</div>
//SHOWN DYNAMICALLY
<div class="col" style="width: 400px">
</div>
//SHOWN DYNAMICALLY
<div class="col" style="width: 400px">
</div>
//SHOWN DYNAMICALLY
<div class="col" style="width: 400px">
</div>
//SHOWN DYNAMICALLY
<div class="col" style="width: 400px">
</div>
</div>
</div>
As you can see above, the first div shows by default but the other divs appear based on user interaction.
By the time the 3 div appears, it overflows.
How can i scroll to the right edge anytime it over flows? (you should really check out http://portal.azure.com to see what im talking about)
PS: i am using AngularJS. I am not using jquery. But i dont mind including it if its the only option
You can use plain Javascript for keeping the scroll to right.
Something like this:
var myDiv = document.getElementById("row");
myDiv.scrollLeft = myDiv.scrollWidth;
You need to fire the above function every time you add a new div. That way it will always automatically be scrolled when divs are dynamically added.
You will need to hook up the DOMNodeInserted event on your container. The function will be called whenever a div is added to your row container. This way you will not have to change anything in your existing code.
Here is a very simple example with dynamically added divs:
var num = 1,
btn = document.getElementById('btn'),
row = document.getElementById("row");
scroller(); // fire teh scroller right away for initial scroll
// function to keep it scrolled towards right
// function scroller() { row.scrollLeft = row.scrollWidth; }
// edited to add simple animation
function scroller() {
var maxScroll = row.scrollWidth - row.clientWidth; // required to stop
row.scrollLeft += 2;
if (row.scrollLeft < maxScroll) {
timer = window.setTimeout(scroller, 1000 / 60);
}
}
// hook up event to call scroller whenever an element is dynamically added
row.addEventListener("DOMNodeInserted", scroller);
// for demo to simluate dynamically adding divs
btn.addEventListener("click", function() {
var newDiv = document.createElement("div");
newDiv.setAttribute("class", "col");
num += 1; newDiv.innerText = num;
row.appendChild(newDiv);
});
div[layout] {
width: 500px; height: 140px; white-space: nowrap;
overflow: hidden; overflow-x: auto;
}
div.col { height: 140px; width: 400px; display: inline-block; text-align:center; }
div { border: 1px solid red; }
<div id="row" layout="row"><div class="col">1</div></div>
<button id="btn">Add</button>
Edit: Added simple animation using setTimeout (in order to keep jQuery away). Ideally you should be using requestAnimationFrame or a suitable library if you are already using one.
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/