Could jQuery be used to retrieve the offset of the first letter in the 5th visual line of a block's content?
I am referring to the visual line determined by the browser, not the line seen in the source code.
Could jQuery be used to retrieve the offset of the first letter in the 5th visual line of a block's content?
I am referring to the visual line determined by the browser, not the line seen in the source code.
jQuery.fn.line = function(line) {
var dummy = this.clone().css({
top: -9999,
left: -9999,
position: 'absolute',
width: this.width()
}).appendTo(this.parent()),
text = dummy.text().match(/\S+\s+/g);
var words = text.length,
lastTopOffset = 0,
lineNumber = 0,
ret = '',
found = false;
for (var i = 0; i < words; ++i) {
dummy.html(
text.slice(0,i).join('') +
text[i].replace(/(\S)/, '$1<span/>') +
text.slice(i+1).join('')
);
var topOffset = jQuery('span', dummy).offset().top;
if (topOffset !== lastTopOffset) {
lineNumber += 1;
}
lastTopOffset = topOffset;
if (lineNumber === line) {
found = true;
ret += text[i];
} else {
if (found) {
break;
}
}
}
dummy.remove();
return ret;
};
$('#someParagraph').line(3); // Displays the text on the third line
For a live example, visit http://jsbin.com/akave
This custom jQuery function inserts a <span/> element within each word of an element to determine line breaks based on offset changes.
Estimating the height of a block can be achieved using a somewhat cumbersome process that I have utilized in the past.
The algorithm is as follows:
While not elegant, this method proves effective when duplicating elements correctly.
To achieve this, utilize the .split() function provided by JavaScript and separate using "<br>".
tutorial on splitting
I am experiencing difficulties with a jQuery AJAX post. Here is the code: <script> var callback = function(data) { if (data['order_id']) { $.ajax({ type: 'POST', url: '<?php echo $_SERV ...
I am looking to create a way for visitors to interact on my website. Imagine a virtual chat space. This involves collecting and sharing data among users, which can be accomplished using ajax or similar methods. However, I'm wondering if there are ex ...
Currently, I have this AJAX call in my code: $('#search').keyup(function() { $.ajax({ type: "GET", url: "/main/search/", data: { 'search_text': $('#search').val() }, suc ...
I recently came across a cool codepen demo on this link. Upon clicking the first button followed by the second, the data transitions smoothly. However, there seems to be an issue where when hovering randomly over the bar charts at this source, the value ...
I am attempting to display the values of a specific JSON in the correct order. Here is how my JSON is structured : { "A":[{"id":"21","name":"Andrea"},{"id":"22","name":"Apple"}], "B":[{"id":"21","name":"Baby"},{"id":"22","name":"Bali"}], "C":[{"id":"21"," ...
When utilizing radasyncupload on my asp.net page, I encounter an issue with storing the uploaded files to a database as byte arrays. After uploading the files, I aim to trigger an Ajax call upon clicking a button in order to transfer the files from the t ...
Having an issue with a custom media upload feature I created using JavaScript code and the "wp.media" API. The problem is that the sidebar menu ('Insert from gallery', 'set featured image') is not displaying, unlike when adding an image ...
The application is designed to display an image, along with the name and occupation based on user input when hovered. I am encountering the following issues: Notice: Undefined index: src in C:\xampp\htdocs\Ajax\Ajax_image\PHP_AJAX. ...
I need help converting the universal time 2018-03-31T05:37:57.000Z to a timestamp in the form of 1520919620673. Can someone please provide guidance on how I can achieve this conversion? ...
I have been working on a script to fetch the duration of a YouTube video using its id. Here is the code snippet I've written: var vidID = ""; var vidData; var vidDuration; function getResponse() { $.getJSON( "https://www.googleapis.c ...
I am facing an issue with a global function that does not seem to work properly in the PhoneGap Desktop app or Chrome Mobile on Android. Surprisingly, it works perfectly fine only in the Chrome PC version. The function is called using an onClick event, a ...
import Link from 'next/link' export const getStaticProps = async () => { const res = await fetch('https://jsonplaceholder.typicode.com/users'); const data = await res.json(); return { props: { ninjas: data } } } const ...
My application utilizes nested ng-includes. The outer include is a login screen for one application while the inner ng-include includes two templates. The login screen is designed in two steps where the email is checked first and then the password entered. ...
I'm encountering an issue with a jQuery plugin that loads JSON data through an AJAX call and inserts it into an existing object. When I attempt to reference the newly inserted nodes, they show up as 'undefined', despite the data appearing co ...
After trying to launch IE from Webdriver and clicking on save, I encountered a "405 Method not allowed" exception. However, when I manually launched IE and clicked on save, it worked fine. I'm perplexed by this issue. Any ideas as to why it might be ...
I have implemented BootStrap-Select for multi-selection functionality. When selecting multiple options from a list of 10, I noticed that if I select a 4th option, another selected option gets randomly unselected. To address this issue, I am using the follo ...
I am using JavaScript to dynamically add HTML elements to my webpages. I have created a loop that iterates through all the projects, each containing multiple pictures. The first step involves generating the project title and adding it within a div element ...
I recently encountered an issue with the responsiveness of an image on my website. While it displayed correctly on Android and desktop devices, the image appeared distorted on iPhones as if the CSS width attribute was not applied properly. This problem spe ...
After checking out the documentation for the Electron <webview>, I attempted to use some of the listed methods with no success. In inspecting the properties of the <webview> element, I found that its prototype is labeled as webview (__proto__ : ...
Trying to incorporate react-draggable with material-UI animations. One approach is as follows: <Draggable> <Grow in={checked}> <Card className={clsx(classes.abs, classes.paper)}> <svg classN ...