I would like to Fill a div with placeholder text.
I have a div that is 100% width+height. Due to many form factors this height and width will be changing based on the users resolution. How can i dynamically fill that div with lorem ipsum. Also how would i recalculate if window sizes changes? I know i could manually do this with copy paste and overflow hidden but I would rather achieve this in javascript
JSFiddle
css
html,body {
/*background:#edecec;*/
height: 100%;
}
.block-text{
text-align: justify;
font-size: 8px;
font-color: rgba(88,89,91, 1);
font-family: georgia;
line-height: 7px;
}
html
<div class="block-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora.
</p>
</div>
http://jsfiddle.net/h54tP/1/
var bool = true;
var maxHeight = $('.block-text').height();
do {
$('.container').append("<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora. </p>");
if ($('.container').height() > maxHeight) bool = false;
} while (bool);
Here, as described in my comment. One wrapping element insinde your text box, the block-text set to 100% height and a small while loop do the trick.
Small note: This will not do anything when the window is resized. For that, however, you could just call that entire code inside a window-size-change function.
Also, this allows the text to be slightly larger than the screen. If you want it slightly smaller instead, just do
$('.container').children().last().hide();
in the "if"-clause.
I realize you wanted to solve this with javascript, but have you considered using css psuedo-elements with content? If this is just for placeholder text as you develop I think it will do what you want without having to add a bunch of javascript and fiddle with resize events.
.block-text>p:after {
content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, eius, ab, molestiae praesentium hic quia quaerat culpa quas consectetur dolor veritatis vel voluptas minus laborum minima quis dolorum necessitatibus tempora.';
}
Related
I'm making a website with huge text on screen & I would like to be able to scroll two divs at the same time. So this part is working.
I'm actually able to scroll the divs but the jumps are really too huge on the #back div. (they seems to actually be the same as the window height (so maybe you need to have the snipped full screen to fully understand what I mean)).
UPDATE: after a bit of testing with a friend, the issue appears to be with firefox on windows. It's working just fine on mac & linux.
here is a fiddle so you can see with a increased height
Here are two gif so maybe you see the weird effet.
each page movement = one scrollwheel down on my mouse (also it's working just fine with a trackpad since it's not a mouse wheel).
VS when I remove one of the two overflow in my css, my following black square stops working, but the scroll is normal again :
IMPORTANT EDIT : This is an issue in firefox but it seems to be working correctly in chrome & Brave. I'm still looking for a way to make it work nonetheless.
So, I noticed that this happens when I set two overflows in the css, actually, if you remove one, the script doesn't work anymore but the scroll bug is stopping too.
Here is the example with the bug:
let back_innerHeight = $("#back").height()
let back_scrollHeight = document.querySelector("#back").scrollHeight
let front_innerHeight = $("#front").innerHeight()
let front_scrollHeight = $("#front")[0].scrollHeight
$("#back").on("scroll", function () {
// Get how many pixels were scrolled on #back
let back_scrolled = $(this).scrollTop()
// Calculate the scrolled percentage
let percentage_back = back_scrolled / (back_scrollHeight - back_innerHeight)
// Calculate how many pixels to scroll on #front
let scrollIT = (percentage_back * (front_scrollHeight - front_innerHeight))
// Just to validate that the percentage is applied correctly...
let percentage_front = scrollIT / (front_scrollHeight - front_innerHeight)
// Apply the scroll
$("#front").scrollTop(scrollIT);
});
window.onresize = function(){
back_innerHeight = $("#back").height()
back_scrollHeight = document.querySelector("#back").scrollHeight
front_innerHeight = $("#front").innerHeight()
front_scrollHeight = $("#front")[0].scrollHeight
}
.scroll {
position: absolute;
display: block;
top: 0;
height: 100%;
}
#front {
overflow: hidden;
position: absolute;
background-color: black;
color: white;
right: 0;
left: 0;
bottom: 0;
top: 0;
margin: auto auto auto auto;
width: 25%;
height: 35%;
font-size: 3rem;
}
#back {
overflow: auto;
font-size: 8rem;
}
p {
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class ="scroll" id="back">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem, quam similique quibusdam libero voluptatum laboriosam, sunt possimus non nobis recusandae, excepturi ex voluptates! Neque veniam, sapiente magnam fuga unde autem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat consequatur consectetur laudantium voluptatibus, iusto molestiae fugit inventore rerum, sit sed dolor ratione perferendis beatae molestias. Asperiores odio mollitia quisquam voluptates.</p>
</div>
<div class ="scroll" id="front">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem, quam similique quibusdam libero voluptatum laboriosam, sunt possimus non nobis recusandae, excepturi ex voluptates! Neque veniam, sapiente magnam fuga unde autem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat consequatur consectetur laudantium voluptatibus, iusto molestiae fugit inventore rerum, sit sed dolor ratione perferendis beatae molestias. Asperiores odio mollitia quisquam voluptates.</p>
</div>
EDIT
What is below is not an answer to the question, which is now more specific about a FF behavior more than a scroll sync between the two divs.
For scroll sync
That is more about some maths... And also which values to use.
You have to calculated a percentage of what has been scrolled from what is scrollable. Here is the key! What is scrollable is not the whole height of the element because there is always a part that is visible.
That make three values to consider about #back:
A: the visible part of the div, which you get using .innerHeight()
B: the amount of scrolled pixels, which you get with .scrollTop()
C: the full height of the div, including the parts already scrolled (above the top) and the one to be scrolled (below the bottom). That is the scrollHeight property.
So to obtain the right percentage, the formula is: B/(C-A).
Then, use this percentage on the #front "scrollable pixels", which again, is the full height minus the visible height.
And there you go!
let back_innerHeight = $("#back").height()
let back_scrollHeight = document.querySelector("#back").scrollHeight
let front_innerHeight = $("#front").innerHeight()
let front_scrollHeight = $("#front")[0].scrollHeight
$("#back").on("scroll", function () {
// Get how many pixels were scrolled on #back
let back_scrolled = $(this).scrollTop()
// Calculate the scrolled percentage
let percentage_back = back_scrolled / (back_scrollHeight - back_innerHeight)
// Calculate how many pixels to scroll on #front
let scrollIT = (percentage_back * (front_scrollHeight - front_innerHeight))
// Just to validate that the percentage is applied correctly...
let percentage_front = scrollIT / (front_scrollHeight - front_innerHeight)
console.log("Scrolled % BACK:", percentage_back, "FRONT:", percentage_front)
// Apply the scroll
$("#front").scrollTop(scrollIT);
});
window.onresize = function(){
back_innerHeight = $("#back").height()
back_scrollHeight = document.querySelector("#back").scrollHeight
front_innerHeight = $("#front").innerHeight()
front_scrollHeight = $("#front")[0].scrollHeight
}
div {
}
#front {
overflow: hidden;
position: fixed;
background-color: black;
color: white;
right: 0;
left: 0;
bottom: 0;
top: 0;
margin: auto auto auto auto;
width: 25%;
height: 35%;
font-size: 3rem;
}
#back {
height: 95vh;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
font-size: 8rem;
}
p{
margin:0;
padding:0;
}
/* Just for this demo here... to limit the SO console's height */
.as-console-wrapper{
height: 1.4em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="back">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem, quam similique quibusdam libero voluptatum laboriosam, sunt possimus non nobis recusandae, excepturi ex voluptates! Neque veniam, sapiente magnam fuga unde autem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat consequatur consectetur laudantium voluptatibus, iusto molestiae fugit inventore rerum, sit sed dolor ratione perferendis beatae molestias. Asperiores odio mollitia quisquam voluptates.</p>
</div>
<div id="front">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem, quam similique quibusdam libero voluptatum laboriosam, sunt possimus non nobis recusandae, excepturi ex voluptates! Neque veniam, sapiente magnam fuga unde autem.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat consequatur consectetur laudantium voluptatibus, iusto molestiae fugit inventore rerum, sit sed dolor ratione perferendis beatae molestias. Asperiores odio mollitia quisquam voluptates.</p>
</div>
Some documentation:
.innerHeight()
.scrollHeight
I am trying that when the text field has focus, the div is selected with the class:autocomplete, this is an example to understand my idea, in my real problem it is more complex. I simply need that once the element that has the focus is identified, select the nearest div with .autocomplete class on the same level, I want to get it this way. I know that in css I should use something like:
input ~ div.autocomplete
($event.target is input in my case)
but I don't know how to do it in this case. Thank you.
function fn_selectAutocompleteClass($event) {
console.log(($event.target));
}
.selectAutocomplete {
background: green;
}
<input id="text" type="text" onfocus="fn_selectAutocompleteClass(event)">
<i class="icon"></i>
<div class="autocomplete">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum itaque placeat, ad vel reprehenderit illo, harum nemo laudantium, dolorem unde aut distinctio! Consectetur vitae deleniti veritatis autem numquam officia eaque.</div>
In this case you can access the .autocomplete using the querySelectorAll on the target elements parent like below snippet. Get the 0th index as that will be the first element matching the selector query.
function fn_selectAutocompleteClass($event) {
console.log($event.target.parentNode.querySelectorAll('.autocomplete')[0]);
}
.selectAutocomplete {
background: green;
}
<input id="text" type="text" onfocus="fn_selectAutocompleteClass(event)">
<i class="icon"></i>
<div class="autocomplete">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum itaque placeat, ad vel reprehenderit illo, harum nemo laudantium, dolorem unde aut distinctio! Consectetur vitae deleniti veritatis autem numquam officia eaque.</div>
Hope this helps :)
I'm trying to create function in js to swap content of webpage using .style.display = "none" or "block" but the main problem is that there are few different divs with different id's for that. The main aim of doing this is chagning content after clicking specific buttons without loading new page. The biggest problem for me is creating script which will change "id"
independently of what id was before. Normally I could write all of id's one by one and just swap them but this is not the case. Content should be changed automatically so no matter what id was before it will replace for specific one after pressing button.
I have tried with querySelector in many ways by changing id with class, by using remove / set Attribute but none of these methods work for me. Im trying to write this fuction for 2 weeks and I don't have any ideas.
I'm worried that bootstrap classes may cause problem with this...
Can someone help me with this? Any tips?
This is my first post here so if I did something wrong, sorry for that.
I cannot paste here my code as everything is on my company laptop which I left when I was finish my job.
Here is an agnostic approach using no HTML ids or classes.
const container = document.querySelector('.container');
const buttons = container.querySelectorAll('button');
const divs = container.querySelectorAll(':scope > div');
function handleButtonClick() {
this.previousElementSibling.classList.toggle('hide');
}
buttons.forEach(button => {
button.addEventListener('click', handleButtonClick);
});
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.hide {
display: none;
}
<div class="container">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sed, dicta quasi in blanditiis nam atque odio, nobis a. Eos incidunt debitis tenetur rerum, esse ratione quisquam possimus quasi nam.</p>
<button>Toggle Content</button>
</div>
</div>
jsFiddle
I'm creating a Chrome Extension that will scan through web pages looking for email addresses with a specific domain. In this example, we will use #xyz.com as the domain.
In my content script script.jsand hard coded HMTL page index.html I have the following:
$(document).ready(function() {
$('body:contains("#xyz.com")').css("text-decoration", "underline");
});
.container {
margin: 0 auto;
display: block;
padding: 10px 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<meta charset="utf-8">
<title>my page</title>
</head>
<body>
<div class="container">
<h1>Welcome!</h1>
<br>
<div class="text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus. Lorem ipsum JohnJones.#xyz.com
, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo,
aliquam SarahBrown.#xyz.com tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!</p>
</div>
</div>
</body>
</html>
I'm trying to select only the email addresses but this clearly doesn't work since it selects everything.
How can I select text matching my keyword (domain) and then further select characters to the left of it to capture the name until it hits a space or an illegal character an email address couldn't use?
This is problematic because this Extension will run on different pages so it's impossible to tell what element text will be nested in for 100% success rate.
Regex is confusing at first but it is the best option for something like this.
Here is the regex I use for detecting emails
[\w|._%+-]*#xyz.com
To break it down, "\w" matches any word character. "|" means "or" and "._%+-" are other characters that could be used in an email. "*" after brackets means any number of characters that match the contents of the brackets. The rest is exactly what it looks like.
Regex code is designated by putting a "/" before and after the code and the "g" at the end tells it to match multiple values.
You can find out more about how the replace command works here.
See a working example using your code below:
var emailPattern = new RegExp(/[\w|._%+-]*#xyz.com/g);
var el = document.getElementsByTagName("p")[0];
el.innerHTML = el.innerHTML.replace(emailPattern, "<u>$&</u>");
.container {
margin: 0 auto;
display: block;
padding: 10px 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<meta charset="utf-8">
<title>my page</title>
</head>
<body>
<div class="container">
<h1>Welcome!</h1>
<br>
<div class="text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, tenetur natus doloremque laborum quos iste ipsum rerum obcaecati impedit odit illo dolorum ab tempora nihil dicta earum fugiat. Temporibus, voluptatibus. Lorem ipsum JohnJones.#xyz.com
, consectetur adipisicing elit. Eos, doloribus, dolorem iusto blanditiis unde eius illum consequuntur neque dicta incidunt ullam ea hic porro optio ratione repellat perspiciatis. Enim, iure! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Error, nostrum, aliquid, animi, ut quas placeat totam sunt tempora commodi nihil ullam alias modi dicta saepe minima ab quo voluptatem obcaecati? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, dolor quis. Sunt, ut, explicabo,
aliquam SarahBrown.#xyz.com tempore quidem voluptates cupiditate voluptas illo saepe quaerat numquam recusandae? Qui, necessitatibus, est!</p>
</div>
</div>
</body>
</html>
If you need to match other domain's emails you can use this Regex instead:
[\w|.%+-]*#\w*.[\w|.%+-]*\b
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to create a floating menu that will stay on top when scrolling. I found some examples and was able to replicate them and it now works.
However, the problem is that as you can see in the example, when I scroll, the text below the menu when scrolling "jumps up", it is difficult to explain what I mean, but if you look at it, you will immediately see what the problem is. Could anyone help me with fixing this?
Add .sectionHeading a dynamic margin:top equal to the height of the menu, with the same event that triggers the fixed class.
You need to do this on a trial and error basis. And you need to change a static parent. Check this example and follow it.
Snippet
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 125)
$("body").addClass("fixed");
else
$("body").removeClass("fixed");
});
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
h1, h2 {font-weight: normal;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.25em;}
h1, h2, p {margin: 0 0 15px;}
.fixed {padding-top: 42px;}
.fixed .static {position: fixed; top: 0; width: 100%; background: #fff; padding-bottom: 15px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Static Header Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, cumque inventore laudantium quod, vel pariatur dolore obcaecati veniam aspernatur aliquam ad dolorum possimus illo facilis et totam nam unde, sint?</p>
<h2 class="static">This is gonna be Static!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis tempore praesentium eos odio nobis dignissimos labore expedita corrupti sapiente perferendis consequuntur, in, eveniet error! Officiis iste architecto eos? Deserunt, delectus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, blanditiis dolore ipsum odit sint delectus assumenda excepturi dolor rem aperiam magni eligendi quidem suscipit nam ullam porro tenetur tempora ut!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis tempore praesentium eos odio nobis dignissimos labore expedita corrupti sapiente perferendis consequuntur, in, eveniet error! Officiis iste architecto eos? Deserunt, delectus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, blanditiis dolore ipsum odit sint delectus assumenda excepturi dolor rem aperiam magni eligendi quidem suscipit nam ullam porro tenetur tempora ut!</p>
When you're changing the class of the your menu from default to fixed the height of your document will reduce by the height of your menu because you have changed the display of your menu.
The solution is that when you change the class of the menu from default to fixed you can add some padding to your document's body (the height of the menu element is fine) and remove the padding when changing the class of the menu from fixed to default.
$(function(){
var menu = $('#menu'),
pos = menu.offset();
$(window).scroll(function(){
if($(this).scrollTop() > pos.top && menu.hasClass('default')){
menu.hide(1, function(){
$(this).removeClass('default').addClass('fixed').show(1);
$('body').css('padding-top', '111px');
});
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.hide(1, function(){
$(this).removeClass('fixed').addClass('default').show(1);
$('body').css('padding-top', '0');
});
}
});
});
You can add another div like your menu but with class="fixed" and display: none, when the scroll reaches the top of the page, you can show that div and change the visibility of the #menu from visible to hidden.