Create span around text based on offset - javascript

We are trying to fit the content in div inside main div. But half of the line is being cut. How should we avoid this. How should we identify that line and create span around those words and move it slightly up or down.
We were trying with offsetheight, offsetTop etc as we do not want to use scroll bar. Any idea in jquery to handle this.
Code here: jsfiddle

I am playing around with your code... I'm not 100% sure of what you are trying to accomplish.. but check out the revisions I made and let me know if it gets you any closer to what you are trying to do.
I added in the functionality for the next and previous and also modified your surrounding box so there is no padding. You can tweak all this, but maybe this will prevent the need to try to move stuff around via jquery?
DEMO: http://jsfiddle.net/r5eZ7/3/
$(".next").click(function() {
var visiblep = $(".content p:visible");
if (visiblep.next().length == 0)
{
$(".content p:first").show();
}
else
{
visiblep.next().show();
}
visiblep.hide();
});

Related

Javascript Div Scroll - Some Issues

I copied this from another post, not blindly, I can see what it does but I can't think of a way to fix the problem. I am not really proficient in JavaScript but I can read this snippet.
// The function actually applying the offset
function offsetAnchor() {
if (location.hash.length !== 0) {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
// This will capture hash changes while on the page
$(window).on("hashchange", function() {
offsetAnchor();
});
// This is here so that when you enter the page with a hash,
// it can provide the offset in that case too. Having a timeout
// seems necessary to allow the browser to jump to the anchor first.
window.setTimeout(function() {
offsetAnchor();
}, 3);
;(function($) {
$('.swipebox').swipebox();
})(jQuery);
The issue was, that when I was scrolling to DIVs with ID's used for anchor points, I was scrolling slightly too far down as I have a sticky header. I tried using this so when changing DIV it would account for the sticky header, it doesn't exactly work perfectly but the main issue I am having, is that I will have over 12 navigation DIV ids, and every time anyone of them is clicked it no longer goes to the DIV, but instead just scrolls up -100 pixels.
I essentially need a solution that will scroll to just above where I need it without affecting the rest of my menu functionality, it doesn't have to be achieved by JS but that's the only feasible way I can see a solution (I've tried thinking of a CSS only one but margin/padding won't help in this situation of scrolling)
To give one last detail, when clicking on a navigation div it will scroll to that div, and the menu (sticky header) will cover some of the image and the of the item scrolled too. Major problem :)
I can leave a link if you'd like a better description and I am learning JS at the moment, but as this is for a client I'd love to be able to fix it within a timely manner and would greatly appreciate any and all help anyone can offer.
Thank you.
In this question there's an answer for jumping to certain element.
If you want a smooth scroll: look here.

Apply position absolute style using JavaScript / jQuery

I am building a site with a right aligned nav.
The last menu item drop down runs off the page as it is positioned absolute to the left of its parent.
I am trying to create a solution for my menu below.
jsfiddle -http://jsfiddle.net/ashconnolly/6gjVr/
I cannot hardcode the pos left -xx style, because the width of the last menu item will vary (due to the text inside it), hence my use of js.
I've nearly cracked it, but i just need to apply a variable as a position absolute left style only on hover.
There maybe a better css only solution, but i couldn't find one.
Any help is appreciated! :D
Edit: updated explanation.
You have already calculated the left of your last menu, why didn't you use?
$(document).ready(function () {
var menuitemwidth = document.getElementById("last-menu-item").offsetWidth;
var menuitemdropdownwidth = document.getElementById("last-menu-item-drop-down").offsetWidth;
//alert(menuitemwidth);
var leftval = menuitemdropdownwidth - menuitemwidth;
//alert(leftval);
$("#last-menu-item").mouseenter(function(){
$("#last-menu-item-drop-down").css({'position':'absolute','left':'-'+leftval+'px','display':'block'});
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").css({'display':'none'});
});
});
Check Here
As you probably already know, it is bad practice to "print" javascript values using a framework. It will pretty soon become unmaintainable.
But you can separate (element) logic from (element) presentation, i.e. print/format html elements in your templates by setting a data-attribute like this in your html:
<ul id="last-menu-item-drop-down" data-pos="left" data-val="-133px">
Then change your javascript to:
// cache last element, no need to jquery search on every hover
var last_elem = $("#last-menu-item-drop-down");
// set position and alignment
last_elem.css('position','absolute').css(last_elem.data("pos"), last_elem.data("val"));
// set dropdown meny visibility to hidden (do it by css)
last_elem.hide()
// show/hide
// ...
You can also do the offset calculations in javascript and only specify position in your templates
Fiddle at: http://jsfiddle.net/cYsp6/7/
I cant Make with css
$("#last-menu-item").mouseenter(function(){
var a=-(parseInt($("#last-menu-item-drop-down").css('width'))-parseInt($("#last-menu-item").css('width')));
$("#last-menu-item-drop-down").css('position','absolute').css('left',a);
$("#last-menu-item-drop-down").show();
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").hide();
});
Updated Fiddle:
Fiddle

jQuery if div is in x position, then reveal another div

I have a div that is moveable in all directions with the keyboard arrows.
I'm trying to make it so that when the moveable div 'walks' down the page and reaches a certain point, another div with text in it appears.
How do I make it so that when the character reaches a certain point on the page, a div dialogue shows?
if($('#'+character).position().top > -500) {
if(character == 'character1') {
$('#page2 .dialogue').fadeIn(4000);
}
}
So position() is relative to the containing element while offset() is relative to the document. With that said, you are asking when an element is 500 above the containing div. You may not be able to see it. Try removing the negative sign.
If you provide a jsfiddle then we can confirm and provide better help.
In CSS, you can set element.style.top but you cannot read it. You need to use element.offsetTop instead, which will give you the position of your div. I'll assume character is a variable which has been defined in advance and is the ID of the div layer.
if(document.getElementById(character).offsetTop > 500) {
if(character == 'character1') {
$('#page2 .dialogue').fadeIn(4000);
}
}
Oughta do the trick. Call it occasionally to keep checking.
Or even better yet, don't bother with any of that. Keep the character's position in a variable, then set their position that way, and when you need to read the coordinates of the character just read the variable. That's how I'd approach it.

Force scrollbar to bottom

I am making a little messaging / chat system that is working nice and fine. The problem is, the <div> which the messages are outputted to does not scroll the way I need it to.
All the new messages are added to the bottom of the div and when more are added and the scrollbar shows up, the scrolling stays at the top of the <div>. I need this to be reversed, so that the scrolling always sticks to the bottom of the <div>.
A good example of what I want would be Steam's chat windows, or even this text input which I am using to fill out the question.
As I would like to avoid jQuery, this has me completely stuck. If you could point me in the correct direction that would be great! I am not sure if HTML and CSS can handle this, or if JavaScript is necessary at all.
The Javascript code below should keep your div's scrollbar positioned at the bottom like you described:
var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;
This solution and more information can be found on the link below:
http://web.archive.org/web/20080821211053/http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html
I think this is a better solution:
element.scrollTop = element.scrollHeight - element.clientHeight;
For Kotlin I have used the following:
val element = view?.findViewById<ScrollView>(R.id.uidScrollElement)
element?.smoothScrollTo(0,element.measuredHeight)

HTML textarea; scroll vertically to text

I have an HTML textarea:
<textarea>
Some text
Another text in another line
BOOM
Hello there.
</textarea>
I want to be able to vertically scroll to the word BOOM so that it is visible (it doesn't matter on which line it appears).
Is this possible?
There's actually a way to do this using window.find() and some variation for IE browsers.
Here's what I came up with so far:
var gotoText = function(text) {
function iefind(string) {
var txt = document.body.createTextRange();
if (txt.findText(string)) {
txt.scrollIntoView();
txt.collapse(false);
}
}
if(!window.find) { // ie
iefind(text);
return;
}
// a double window.find() for backwards and forward search
if(!window.find(text, false, true)){
window.find(text, false, false);
}
};
$('textarea').animate({ 'scrollTop': 30 });
of course 30 is working for my own example with my cols and rows. so find the the right value for yourself.
Note to self:
There is no way of calculating the scroll height which a particular word is at however if you set a fixed value as your css line-height then you can see the story from the point of view that of boom is on for example the 4th line then its scroll height value is 4x (x:line-height)
but i can't really right now be bothered to check how good that will work when someone zooms in the browser. but worth a try for you as you have the case.
But how do I know that BOOM is 30 from the top?
Create a <div>, add it to the page and style it with exactly the same font, white-space, dimensions, border, padding and overflow as the <textarea> object. Wrap the ‘BOOM’ in a <span>, and measure the position of the span relative to the position of the div.
(This isn't a lot of fun.)
It's possible with some javascript!
Even if I'm late I hope it can be usefull to someone else!
I published an answer here:
http://blog.blupixelit.eu/scroll-textarea-to-selected-word-using-javascript-jquery/
It works perfectly with jsut one needed rule: Set a line-height n the css of the textarea!
It calculate the position of the word to scroll to just by doing some simple mathematic calculation and it worked perfectly in all my experiments!
Feel free to ask me anything you need about the code!

Categories

Resources