logo
down
shadow

How to get the exact div positioning using jquery/javascript


How to get the exact div positioning using jquery/javascript

By : user2955789
Date : November 22 2020, 10:48 AM
wish of those help Since you already have jQuery loading in the page, take a look at the jQuery offset() and position() methods and leverage jQuery selectors.
code :
<script>
    function ReadDivPos(selector) {
        var _divPos = "";

        $(selector).each(function() {
            var p = $(this).offset();
            var w = $(this).width();
            console.log("Top " + p.top) //top
            console.log("left " + p.left) //left
            console.log("right " + p.left + w) //right
            console.log("offsetWidth " + w); //width

            _divPos += "Left " + p.left + ",Width " + w + ",Avail Width " + window.screen.availWidth + ",Right " + (p.left + w) + "\\n";
        });
        return _divPos;
    }

    console.log(ReadDivPos(".content"));
</script>


Share : facebook icon twitter icon
Javascript/jQuery positioning issue

Javascript/jQuery positioning issue


By : user2909046
Date : March 29 2020, 07:55 AM
Any of those help This might not be the only issue, but you didn't set the value type (px, em, etc.) to the css function:
code :
$('#chat-box-with-'+userid).css({right:parentright, bottom:'24px'});
$('#chat-box-with-'+userid).css({right:parentright+"px", bottom:'24px'});
Return the x value of a div's positioning in Javascript/JQuery

Return the x value of a div's positioning in Javascript/JQuery


By : Sen
Date : March 29 2020, 07:55 AM
I wish this helpful for you I see the question as is there an x position? Yes. it is called the object.offsetLeft. However, you have to be careful because the x value of that offset is within its parent. This means that is parent has an offset, also and if you add all the parent's offsets up you will get the x value or offset for the screen.
code :
function checkForOverlap(){
  $("ul#jobs").each(function(v){
      v.offsetLeft //for the elements offest
      v.parent.offsetLeft // for the parent's offset
        });
}
Real Exact Positioning of Intellisense

Real Exact Positioning of Intellisense


By : Kun Lu
Date : March 29 2020, 07:55 AM
I hope this helps . im working on a code-editor in windows forms and i already make the intellisense position below the "textindex" in richtextbox , You can check the following code lines for what you want:
code :
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Windows.Forms;

namespace CodeEditor
{
    public partial class Form1 : Form
    {
        #region Variables
        private Dictionary<string, string> hintTexts = new Dictionary<string, string>();
        private string strCurrentHintText = null;
        private Font hintFont = new Font("Microsoft Sans Serif", 8.25f);
        private Brush hintTextColor = Brushes.Black;
        private Point hintTextLocation = new Point(2, 2);
        public Point ptCurrentCharPosition;
        Point ptHintLocation;
        int intCurrentCursorPosition = 0;
        int intCurrentSelectionLength = 0;
        List<int> lstIntLeftParenthesisCharIndexes = new List<int>();
        #endregion

        #region Properties
        #region Hint
        /// <summary>
        /// Sets the font of the hint texts.
        /// </summary>
        public Font HintFont
        {
            protected get
            {
                return hintFont;
            }
            set
            {
                hintFont = value;
            }
        }

        /// <summary>
        /// Sets the color of the hint texts.
        /// </summary>
        public Brush HintTextColor
        {
            protected get
            {
                return hintTextColor;
            }
            set
            {
                hintTextColor = value;
            }
        }

        /// <summary>
        /// Sets the location of the hint texts.
        /// </summary>
        public Point HintTextLocation
        {
            protected get
            {
                return hintTextLocation;
            }
            set
            {
                hintTextLocation = value;
            }
        }

        /// <summary>
        /// Gets and Sets the texts of the hints.
        /// </summary>
        public Dictionary<string, string> HintTexts
        {
            get
            {
                return hintTexts;
            }
            set
            {
                hintTexts = value;
            }
        }
        #endregion
        #endregion

        public Form1()
        {
            InitializeComponent();
        }

        #region Methods
        #region GetChar
        /// <summary>
        /// Specifies current char based on the cursor position.
        /// </summary>
        /// <param name="rtb">A RichTextBox control</param>
        /// <returns>Returns a char.</returns>
        public char GetChar(System.Windows.Forms.RichTextBox rtb)
        {
            return GetChar(rtb.SelectionStart, rtb);
        }

        /// <summary>
        /// Specifies a char based on the specified position.
        /// </summary>
        /// <param name="intCharIndex">A position coordinates</param>
        /// <param name="rtb">A RichTextBox control</param>
        /// <returns>Returns a char.</returns>
        public char GetChar(Point ptCurrentPosition, System.Windows.Forms.RichTextBox rtb)
        {
            return rtb.GetCharFromPosition(ptCurrentPosition);
        }

        /// <summary>
        /// Specifies a char based on the specified index.
        /// </summary>
        /// <param name="intCharIndex">A char index</param>
        /// <param name="rtb">A RichTextBox control</param>
        /// <returns>Returns a char.</returns>
        public char GetChar(int intCharIndex, System.Windows.Forms.RichTextBox rtb)
        {
            if (intCharIndex > 0 && rtb.GetPositionFromCharIndex(intCharIndex).X == 0 && rtb.GetPositionFromCharIndex(intCharIndex).Y == 0)
            {
                return '▓'; // Invalid char
            }

            if (intCharIndex != rtb.TextLength)
            {
                ptCurrentCharPosition = rtb.GetPositionFromCharIndex(intCharIndex - 1);
            }
            else
            {
                ptCurrentCharPosition = rtb.GetPositionFromCharIndex(intCharIndex);
            }
            return GetChar(ptCurrentCharPosition, rtb);
        }
        #endregion

        /// <summary>
        /// Find the text (keyword) before the specific character.
        /// </summary>
        /// <param name="rtb">A RichTextBox control</param>
        /// <param name="intKeyValue">The value of the pressed key</param>
        /// <param name="strText">The text (keyword) before last typed character for checking it</param>
        /// <returns>Returns found text (keyword).</returns>
        private string FindKeyword(System.Windows.Forms.RichTextBox rtb, int intKeyValue, string strText)
        {
            string strSelectedText = null;
            try
            {
                if (intKeyValue == 57) // ( char
                {
                    if (rtb.SelectionStart - 1 >= 0)
                    {
                        rtb.SelectionStart--;
                        rtb.SelectionLength = 1;
                    }

                    if (rtb.SelectionStart - strText.Length >= 0)
                    {
                        rtb.SelectionStart -= strText.Length;
                        rtb.SelectionLength = strText.Length;
                    }

                    strSelectedText = rtb.SelectedText;

                    if (rtb.SelectionStart - strText.Length >= 0)
                    {
                        rtb.SelectionStart += strText.Length;
                        rtb.SelectionLength = 1;
                    }

                    if (rtb.SelectionStart - 1 >= 0)
                    {
                        rtb.SelectionStart++;
                        rtb.SelectionLength = 0;
                    }
                }
            }
            catch
            {

            }

            return strSelectedText;
        }

        /// <summary>
        /// Displays a hint in the current cursor position.
        /// </summary>
        /// <param name="ttip">A ToolTip control</param>
        /// <param name="rtb">A RichTextBox control</param>
        /// <param name="intKeyValue">The value of the pressed key</param>
        /// <param name="strCheckingText">The text (keyword) before last typed character for checking it and diplaying its related hint</param>
        /// <param name="strHintText">The text of the hint for current keyword</param>
        private void ShowHint(ToolTip ttip, System.Windows.Forms.RichTextBox rtb, int intKeyValue, string strCheckingText, string strHintText)
        {
            try
            {
                if (rtb.SelectionStart - 1 >= 0)
                {
                    rtb.SelectionStart--;
                    rtb.SelectionLength = 1;
                }

                if (intKeyValue == 57) // ( char
                {
                    if (rtb.SelectionStart - strCheckingText.Length >= 0)
                    {
                        rtb.SelectionStart -= strCheckingText.Length;
                        rtb.SelectionLength = strCheckingText.Length;
                    }

                    if (rtb.SelectedText == strCheckingText)
                    {
                        rtb.SelectionStart += strCheckingText.Length;
                        rtb.SelectionLength = 1;
                        lstIntLeftParenthesisCharIndexes.Add(rtb.SelectionStart);
                    }

                    if (GetChar(lstIntLeftParenthesisCharIndexes.Last() + 1, rtb) != '(')
                    {
                        lstIntLeftParenthesisCharIndexes.Remove(lstIntLeftParenthesisCharIndexes.Count - 1);
                    }
                    ttip.ShowAlways = true;
                    ttip.OwnerDraw = true;
                    intCurrentCursorPosition = rtb.SelectionStart;
                    intCurrentSelectionLength = rtb.SelectionLength;

                    rtb.SelectionStart += rtb.SelectionLength - 1;
                    rtb.SelectionLength = 0;

                    GetChar(rtb);
                    ptHintLocation = ptCurrentCharPosition;

                    ptHintLocation.X += 2;
                    ptHintLocation.X += TextRenderer.MeasureText(rtb.Lines[0], rtb.Font).Height;

                    ptHintLocation.Y += 1;
                    ptHintLocation.Y += 2;
                    ptHintLocation.Y += TextRenderer.MeasureText(rtb.Lines[0], rtb.Font).Height;

                    rtb.SelectionStart = intCurrentCursorPosition;
                    rtb.SelectionLength = intCurrentSelectionLength;

                    strCurrentHintText = strHintText;
                    ttip.Draw += new System.Windows.Forms.DrawToolTipEventHandler(ttipHint_Draw);
                    ttip.Popup += new System.Windows.Forms.PopupEventHandler(ttipHint_Popup);

                    if (rtb.SelectionStart - strCheckingText.Length >= 0)
                    {
                        rtb.SelectionStart -= strCheckingText.Length;
                        rtb.SelectionLength = strCheckingText.Length;
                    }

                    if (rtb.SelectedText == strCheckingText)
                    {
                        rtb.SelectionStart += strCheckingText.Length;
                        rtb.SelectionStart++;
                        rtb.SelectionLength = 0;

                        try
                        {
                            HintTexts.Add(strCheckingText, strHintText);
                        }
                        catch
                        {
                            for (int intCntr = 0; intCntr < HintTexts.Count; intCntr++)
                            {
                                if (HintTexts.ElementAt(intCntr).Key == strCheckingText)
                                {
                                    strCheckingText += intCntr + 1;
                                }
                            }
                            HintTexts.Add(strCheckingText, strHintText);
                        }
                        ttip.Show(strHintText, rtb, ptHintLocation);

                        rtb.SelectionStart--;
                        rtb.SelectionLength = 1;
                    }
                }
                else if (intKeyValue == 48) // ) char
                {
                    lstIntLeftParenthesisCharIndexes.Remove(lstIntLeftParenthesisCharIndexes.Count - 1);
                    HintTexts.Remove(HintTexts.Last().Key);
                    if (lstIntLeftParenthesisCharIndexes.Count == 0)
                    {
                        ttip.ShowAlways = false;
                        ttip.RemoveAll();
                        ttip.Draw -= ttipHint_Draw;
                        ttip.Popup -= ttipHint_Popup;
                    }
                    else
                    {
                        try
                        {
                            strCurrentHintText = HintTexts.Last().Value;
                            ttip.Show(HintTexts.Last().Value, rtb, ptHintLocation);
                        }
                        catch
                        {
                            ttip.ShowAlways = false;
                            ttip.RemoveAll();
                            ttip.Draw -= ttipHint_Draw;
                            ttip.Popup -= ttipHint_Popup;
                        }
                    }
                }
                else if (intKeyValue == 13) // New Line char (Enter/Return key)
                {
                    if (ttip.ShowAlways)
                    {
                        GetChar(rtb);
                        ptHintLocation = ptCurrentCharPosition;

                        ptHintLocation.Y -= TextRenderer.MeasureText(strHintText, HintFont).Height + HintTextLocation.Y;

                        ttip.Show(strHintText, rtb, ptHintLocation);
                    }
                }
                else if (intKeyValue == 8) // Backspace key
                {
                    for (int intCntr = 0; intCntr < lstIntLeftParenthesisCharIndexes.Count; intCntr++)
                    {
                        char chr = GetChar(lstIntLeftParenthesisCharIndexes[intCntr] + 1, rtb);
                        if (GetChar(lstIntLeftParenthesisCharIndexes[intCntr] + 1, rtb) != '(')
                        {
                            lstIntLeftParenthesisCharIndexes.Remove(lstIntLeftParenthesisCharIndexes[intCntr]);
                        }
                    }

                    ttip.ShowAlways = false;
                    ttip.RemoveAll();
                    ttip.Draw -= ttipHint_Draw;
                    ttip.Popup -= ttipHint_Popup;
                }

                if (rtb.SelectionStart - 1 >= 0)
                {
                    rtb.SelectionStart++;
                    rtb.SelectionLength = 0;
                }
            }
            catch
            {
                if (intKeyValue == 8) // Backspace
                {
                    for (int intCntr = 0; intCntr < lstIntLeftParenthesisCharIndexes.Count; intCntr++)
                    {
                        char chr = GetChar(lstIntLeftParenthesisCharIndexes[intCntr] + 1, rtb);
                        if (GetChar(lstIntLeftParenthesisCharIndexes[intCntr] + 1, rtb) != '(')
                        {
                            lstIntLeftParenthesisCharIndexes.Remove(lstIntLeftParenthesisCharIndexes[intCntr]);
                        }
                    }

                    ttip.ShowAlways = false;
                    ttip.RemoveAll();
                    ttip.Draw -= ttipHint_Draw;
                    ttip.Popup -= ttipHint_Popup;
                }
            }
        }
        #endregion

        #region Events
        private void ttipHint_Popup(object sender, PopupEventArgs e)
        {
            e.ToolTipSize = new Size(TextRenderer.MeasureText(strCurrentHintText, HintFont).Width + (HintTextLocation.X * 2),
                TextRenderer.MeasureText(strCurrentHintText, HintFont).Height + (HintTextLocation.Y * 2));
        }

        private void ttipHint_Draw(object sender, DrawToolTipEventArgs e)
        {
            try
            {
                using (e.Graphics)
                {
                    e.DrawBackground();
                    e.DrawBorder();
                    e.Graphics.DrawString(strCurrentHintText, HintFont, HintTextColor, HintTextLocation);
                }
            }
            catch
            {
            }
        }

        private void rtb1_KeyUp(object sender, KeyEventArgs e)
        {
            HintFont = new Font("Arial", 9f);
            HintTextColor = Brushes.Blue;
            HintTextLocation = new Point(10, 10);

            if (FindKeyword(rtb1, e.KeyValue, "Sample1") == "Sample1")
            {
                ShowHint(ttipHint, rtb1, e.KeyValue, "Sample1", "This is an example 1.");
            }
            else if (FindKeyword(rtb1, e.KeyValue, "Sample2") == "Sample2")
            {
                ShowHint(ttipHint, rtb1, e.KeyValue, "Sample2", "This is an example 2.\nThis is an example 2. This is an example 2.");
            }
            else if (FindKeyword(rtb1, e.KeyValue, "Sample3") == "Sample3")
            {
                ShowHint(ttipHint, rtb1, e.KeyValue, "Sample3", "This is an example 3.\nThis is an example 3. This is an example 3.\nThis is an example 3. This is an example 3. This is an example 3.");
            }
            else
            {
                try
                {
                    if (e.KeyValue == 48 || e.KeyValue == 13 || e.KeyValue == 8)
                    {
                        ShowHint(ttipHint, rtb1, e.KeyValue, HintTexts.Last().Key, HintTexts.Last().Value);
                    }
                }
                catch
                {
                }
            }
        }
        #endregion
    }
}
Positioning element to exact div

Positioning element to exact div


By : Evan Lee
Date : March 29 2020, 07:55 AM
it helps some times I'm facing I think odd problem. I have website http://www.spacemind.ggpro.pl/ar/ and I'm trying to make this top menu (black rectangle) Stick to the left side of my Wrapper div. , Try this code:
code :
<div style="width:980px;margin:auto;position:relative;">
    <div style="z-index:9999;background-color:#000;right:0px;width:100%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
        <div style="padding:20px;">
            <a href="index.html">
               <img src="img/logo.png">
            </a>
        </div>
    </div>
</div>
D3 triangle positioning to an exact point

D3 triangle positioning to an exact point


By : user1712533
Date : March 29 2020, 07:55 AM
like below fixes the issue You can position the symbols, but its tricky - symbol size represents area and as rioV8 notes symbols are positioned by their center. But if you can figure out the properties of the triangle we can place it relatively easily.
In the case of a equilateral triangle, you'll want to know the length of a given side as well as the height of that centroid (which is triangle height/3). So these functions will likely be useful:
code :
// get length of a side/width of upright equilateral triangle from area:
function getWidth(a) {
    return Math.sqrt(4 * a / Math.sqrt(3));
}
// get height of the triangle from length of a side
function getHeight(l) {
    return Math.sqrt(3)*l/2;
}
y = SVGheight - SymbolHeight/3 - marginBottom;
var margin = { left:10, right:10, top:10, bottom:10 };

var width = 400 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var g = d3.select("body")
  .append("svg")
     .attr("width", width + margin.left + margin.right)
     .attr("height", height + margin.top + margin.bottom)
  .append("g")
     .attr("transform", "translate(" + margin.left + ", " + margin.top + ")")


var data = [
	{a: 40000},
	{a: 30000},
	{a: 20000},
	{a: 10000}
];

function getWidth(a) {
	return Math.sqrt(4 * a / Math.sqrt(3));
}
function getHeight(l) {
	return Math.sqrt(3)*l/2;
}

data.forEach(function(d) {
	d.w = getWidth(d.a);
	d.h = getHeight(d.w);
})

var x = d3.scaleLinear()
  .domain(d3.extent(data, function(d){ return d.w; }) )
  .range([width/10,0]);


var arc = d3.symbol().type(d3.symbolTriangle)
   .size(function(d){ return d.a; });

var colors = d3.scaleLinear()
 .domain(d3.extent(data, function(d) {return d.a}))
 .range(['#ffffff','#303030']);

var group = g.append('g')
 .attr('transform','translate('+ width/2 +',0)') 
 .attr('class', 'triangle-container');

var line = group.selectAll('path')
  .data(data)
  .enter()
  .append('path')
  .attr('d', arc)
  .attr('fill', d => colors(d.a))
  .attr('class', 'triangle')
  .attr('transform',function(d,i){ return "translate("+ x(d.w) +","+ (height - d.h/3 - margin.bottom )  +")"; });

var circles =  group.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", function(d) { return x(d.w); })
  .attr("cy", function(d) { return height - d.h - margin.bottom; })
  .attr("r", 3);
 <script src='https://d3js.org/d3.v5.min.js' type='text/javascript'></script>
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org