How to get inner html based on inner div height? - javascript

As per my requirement i'm looking for jquery code which could do pagination by html contents..
I did some research on it but didn't get any feasible solution for the same.
here is sample code what I'm trying to achieve:
<div id="parent">
<div id="child" style="height:30%">---contents-----</div>
</div>
now according to requirement I'm using below js code to detect if div is overflown.
checkOverflow () {
let element = document.getElementById('child');
if (element.offsetHeight < element.scrollHeight ||
element.offsetWidth < element.scrollWidth) {
return true;
} else {
return false;
}
}
above function is returning true if contents are overflown on child div, now I want to truncate overflown contents to second page and add pagination on page so user can click on button to display more contents on second page.
I don't know how to achieve above thing but I've tried to get contents position of element.offsetHeight, but that didn't works
Thanks.

Related

Inserting html code after creating div problem

Hello i am trying to dynamically create divs, at a button click, and append a span element to it. When i click the button a function is called and a div is created but i can't display the contents of the span element.
I basically have a container div and want to create divs inside that container, with the contents of the span element present, through javascript.
function createDiv ()
{
var boxEle = document.createElement('div');
var container = document.querySelector('.container');
boxEle.setAttribute('id','box_id'+ dynamicid());
//console.log(boxEle.id);
boxEle.style.width = "40%";
boxEle.style.height = "500px";
boxEle.style.backgroundColor = 'yellow';
boxEle.style.margin = "20px";
boxEle.style.boxsizing = "border-box";
boxEle.innerHTML = '<span class="list-names"></span>';
container.appendChild(boxEle);
}
This span will show a list of names that were fetched from a database. The idea was to create how many divs i wanted with the list present in every created div.
If i change the span element and insert some random text it works fine. I also tried to create a php file with just the span element there and used jquery load to insert it into my div but it only works on the first div, if i create more than one then nothing shows on the rest.
After looking on here i tried to do everything with jquery but the problem was the same.
$(function(){
var count = 0;
$('#creatediv_id').click(function(){
$('#container_id').append('<div id="first'+count+'"><span class="list-names"></span></div>');
count++;
});
});
Don't really know what else i should try or if it is doomed.
Actually your code works just fine, did you check DOM after click, because elements are there, but your span hasn't got any text, so there is nothing on the screen, here is example with jQuery way:
$(function(){
var count = 0;
$('#creatediv_id').click(function(){
$('#container_id').append('<div id="first'+count+'"><span class="list-names">test</span></div>');
count++;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="creatediv_id">Create Div</button>
<div id="container_id"></div>

How to append unique element of div to another div

I have 2 div like
<div id="destination" runat="server"></div> and <div class="errorDiv"></div>
I write a jquery function
$(document).each(function () {
if ($("#destination").find("div").html() !== $(".errorDiv").html()) {
$("#destination").append($(".errorDiv"));
$("#error").append($("#destination"));
}
}).change();
In this function, if destination div contains errorDiv content skips, else append to destination. Then destination will append to another div. But, my check doesn't work . How can I append only unique elements of div? errorDiv content is produced in ASP page and this content is generic.
While page is running I catch the some error messages and I want to append something about these messages to destination div. for example; if I catch
<div class="errorDiv">A</div>
<div class="errorDiv">A</div>
<div class="errorDiv">B</div>
<div class="errorDiv">B</div>
<div class="errorDiv">A</div>
<div class="errorDiv">C</div>
contents I want to append only
<div class="errorDiv">A</div>
<div class="errorDiv">B</div>
<div class="errorDiv">C</div>
divs to destination div.
But with my function, all divs are appended.
So it sounds like you get new .errorDivs and want to add them to #destination only if equivalent text isn't already there.
To do that, you need to loop through the divs in #destination, rather than just looking at the HTML of the first one. See comments:
$(document).each(function() { // <== Calling .each on $(document) makes no sense
// Get an array of the currently-known errors in destination
var errors = $("#destination div").map(function() {
return $(this).html();
}).get();
// Loop through the "new" errors
$(".errorDiv").each(function() {
// Is the text of this error already in the destination?
if ($.inArray($(this).html(), errors) == -1) {
// No, add it
$("#destination").append(this);
$("#error").append($("#destination")); // <== This seems very strange
}
}
}).change(); // <== Triggering the change event on document seems odd

How to load different HTML based on window.width()?

How to always listen to window.width() and load different HTML codes based on the width values? I'm using window.width() and replaceWith().
It's only works when I open the page and not working when I resizing my browser window.
My code inside my html file:
var width;
$(window).resize(function() {
width = $(window).width();
if (width < 768) {
$("#the_dropdown").replaceWith("<p>Less than 768</p>");
} else {
$("#the_dropdown").replaceWith("<p> More than 768</p>");
}
});
$(window).trigger('resize');
Demo
Another question, does replaceWith() suitable for situation that involves long HTML codes (more than 1 line)?
I've already done some sets of HTML codes based on specific window's width and I want to put it accordingly inside my #the_dropdown div.
Your code doesn't work because replaceWith() replaces the selected element. In your case, the element with id #the_dropdown. Therefore on the next trigger, this element isn't found and no text is written.
Replace replaceWith() with .html().
Demo

Detecting "overflow" on HTML dropdown

How can I detect if there is more text in the selected dropdown ('select') element than is being shown to the user?
I found a way to make this work on inputs of type text (**currently only working for me in Chrome... a cross-browser solution would be great), but am also trying to get it to work on selects:
function applyTitles(jqueryElement) {
var element = jqueryElement[0];
if (element.offsetHeight < element.scrollHeight || element.offsetWidth < element.scrollWidth) {
// element has overflow
jqueryElement.attr('title', jqueryElement.val());
}
else {
//element doesn't have overflow
jqueryElement.attr('title', '');
}}
http://jsfiddle.net/NML3f/
My goal is to create a generic way of dynamically showing titles on inputs when the entire thing can't be seen at once. For some reason, I thought some browsers did this automatically, but I guess not.

Javascript show/hide - I don't want it to hide the entire element

This is probably a fairly easy question, but I'm new to JavaScript and jquery....
I have a website with a basic show/hide toggle. The show/hide function I'm using is here:
http://andylangton.co.uk/articles/javascript/jquery-show-hide-multiple-elements/
So here's my question..... I would really like the first 5-10 words of the toggled section to always be visible. Is there some way I can change it so that it doesn't hide the entire element, but hides all but the first few words of the element?
Here's a screenshot of what I would like it to do:
http://answers.alchemycs.com/mobile/images/capture.jpg
There are many different implementation possibilities:
You can divide the contents up into the first part and the second part (two separate spans or divs inside your main object) and hide only the child object that represents the second part, not hide the parent object.
Rather than hide the object at all, you can set its height to only show the first part (with overflow: hidden)
Change the contents of the main object to only have the first part as the contents (requires you to maintain the full contents somewhere else so you can restore it when expanded again).
Here's a working example of option 1: http://jsfiddle.net/jfriend00/CTzsP/.
You'd need to either:
Put in a span/etc. after the first n words, and only hide that part, or
Change the viewable region, or
Replace or toggle the span/etc. with the "collapsed" view.
The last is a bit more customizable; using two separate elements allows trivial games to be played (showing an image, for example, like a little curly arrow) without modifying adding/removing DOM elements.
I tend towards the last because it's simple and obvious, but that's a personal preference, and really isn't as true as it used to be.
You can do some plugin authoring,I did a sample demo here ,based on your screenshot
<div class="toggle">ShowHide</div>
<div class="content">some content some content some content some content some content <br/> some content some content some content </div>
<div class="toggle">ShowHide</div>
<div class="content">some content some content some content some content some content <br/> some content some content some content </div>
here is javascript/jquery code
jQuery.fn.myToggle = function(selector, count) {
var methods = {
toggle: function(selector, count) {
if ($(selector).is(':visible')) {
var span = $('<span>');
span.text($(selector).text().substr(0, count) + "...");
span.insertAfter($(selector));
$(selector).hide();
}
else {
$(selector).show();
$(selector).next('span').hide();
}
}
};
$(this).each(function() {
methods.toggle($(this).next(selector), count);
$(this).click(function(evt) {
methods.toggle($(this).next(selector), count);
});
});
};
$(function() {
$('.toggle').myToggle('.content', 3);
});
Here is a solution using css properties only instead of mangling the dom.
http://jsfiddle.net/AYre3/4/
Now if you want some sort of animation happening as well you'll probably need to do a bit of measurement along the way.

Categories