Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I'm working on my diploma thesis, an interactive programming language which should run in browser eniroment using javascript.
In the moment I use an input line and enter event to start interaction and give feedback.
I would like to change this to have a textinput and a second field next to it where the result is shown. I use
<div id = "code" conetenteditable="true"> </div>
<div id= "result"><div>
Both are placed in a table row, so they are next to each other
how can I get result to scroll according to the actual scroll of code?
By the way I use jquery as library.
Thanks,
Rainer
In order for an element to be fixed on a page and remain there as you scroll, you must use CSS.
The code should look like:
<div id = "code" conetenteditable="true" style="position:fixed;"> </div>
<div id= "result" style="position:fixed"><div>
You can position them however you want with top, bottom, left, right.
Use css fixed position for your both dives.
like that:
#id,#result{
position: fixed;
}
I believe your problem is not with the element position but with the scroll of the text inside of the #result div.
If that's the case, you might want to use the overflow css property to have the div show an inner scrollbar.
#result {
overflow-y:auto;
max-height:100px;
}
in this example, the div will scroll if the text inside it stretches above 100px.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 days ago.
Improve this question
I am trying to get the value of the overflown text of a div as a string.
I am wondering how I can do this, the overflow property allows you to edit the overflow but I want to return it.
I have tried detecting if an element will overflow inside of another element, and then programmatically creating paragraphs and testing how much text I can fit inside a div. However it creates some complexity in how to layout my content. If I knew what would overflow, I could handle it more gracefully.
If you want to get the text that is overflowing from a div element, you can use the scrollWidth and clientWidth properties of the div element to determine if the content is overflowing horizontally. If the scrollWidth is greater than the clientWidth, then the content is overflowing.
Once you determine that the content is overflowing, you can access the overflowing text using the scrollLeft property of the div element. The scrollLeft property returns the number of pixels that the content of the div element is scrolled from the left edge of the div element.
Here's some sample code that demonstrates how to get the overflowing text of a div element:
const divElement = document.getElementById('myDiv');
if (divElement.scrollWidth > divElement.clientWidth) {
const scrollPosition = divElement.scrollLeft;
const overflowingText = divElement.textContent.slice(scrollPosition);
console.log(overflowingText);
}
In this example, myDiv is the ID of the div element that you want to check for overflowing content. If the content is overflowing, the code gets the current scroll position using the scrollLeft property, and then uses the slice method to extract the overflowing text from the textContent property of the div element.
Note that this code assumes that the div element only has text content. If the div element contains other types of content, such as images or other elements, you will need to modify the code to handle those cases.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
If I click on the image, it is supposed to move me to another part of the scroll. Problem is, the image is included in a header (like a banner) which initiated as a class. How could i implement js code inside an image that belongs to that class? Or should i create a class inside a class?
First of all you don't need to use javascript at all
You can place your img inside a tag with href="#id-of-element". In in some other place in your html you can place element with id="id-of-element". In that case when you click on img it will scroll you to this element (it will not be a smooth scroll but more like 'teleportation').
If you insist on smooth scroll then you can do it like that. This will cover all anchors like a href="#..." but if you want it to only work on this very image you can replace a[href^="#"] with classname/id of your image.
This example for some reason doesn't work here for some reason but work locally, so you have to check this yourself https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
document.querySelector('a[href^="#"]').addEventListener('click', (e) => {
e.preventDefault();
const id = e.target.getAttribute('href');
document.querySelector(id).scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
});
<a href="#id-of-element">
this is image
</a>
<div style="height: 1000px"></div>
<div id="id-of-element">content</div>
You can try using document.querySelector(selector)
selector example - .header .banner img
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
In this website, the header is animated when you scroll the page a bit. Can you please advise what techniques, tools and best practices (broadly) one may use to achieve this and similar effects?
Use javascript to add a class to the header element when the scroll position is at the top (bind to the onscroll event and check if at the top or not).
Then define new postiions for your elements in css when that class is applied, and use the transition css property to animate it
Well for the animation occurring when you scroll you would use
$(document).scroll(function() {
if($(document).scrollTop() === 0);
} else {
});
As for the animation, there are many ways to do this and the question is too broad, as stated above.
the way I personally do it, is to add a class to the body on scroll. I then style the particular element I want to change (in your case the header) accordingly. I add it to the body instead of the particular element in case I want to manipulate other selectors, etc.
This is the JS I use:
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 50) { //distance scrolled before effect takes place
jQuery("body").addClass("scrolled");
} else {
jQuery("body").removeClass("scrolled");
}
});
Then I'd add some CSS for example:
header{height:100px;transition:all, .4s, ease; /*Make sure to use all cross-browser markup*/;}
body.scrolled header{height:50px;}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
All:
I wonder how can I move element in the DOM with either JS, jQuery or D3:
For example:
<div class="container" style="width:100%;height:100%;">
<div class="item" style="width:50%; height:40%; float:left;">DIV1</div>
<div class="item" style="width:40%; height:40%; float:left;">DIV2</div>
<div class="item" style="width:50%; height:40%; float:left;">DIV3</div>
<div class="item" style="width:40%; height:40%; float:left;">DIV4</div>
</div>
So basically right now the layout shown is 2X2, what I want to do is just drag DIV1 and move to DIV4 then they can swap position. I kinda thinking using the way how array swap element, copy the DIV1 DOM element from DOM array, copy the DIV4 to that place and copy DIV1 to DIV4 place in that array.
But I do not know if this is possible and if so, how to implement this?
Thanks
Take a look at the jqueryUI add on draggable support: https://jqueryui.com/draggable/
To have the drag event update your backend, you would want to bind a function to the "stop" event for the containers that queries the resulting order of the divs.
This is going to involve adding some behaviors to the DIVs so they behave the way you envision. Any div not being dragged will need to know when you are attempting to drop another div onto the page where some defined handle on the object (or the mouse pointer) is before or after the element not being dragged.
So, some pseudo code:
onStop: function(item){ checkPointerLocation(); insertDraggedObjectBeforeNearest() }
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How to change the "start" of image?
I mean that the img is in the immobility only it's beginning is moving
I want change it CSS or HTML, in the last resort in JavaScript
Something like this: FIRST PICTURE (This picture on click change it's beginnig).
... It transform to it: SECOND PICTURE
Any idea? :/
<div class="myImg"> </div>
<style>
.myImg{
background: url('myimg.jpg');
}
.myImg2{
background: url('myotherimg.jpg');
}
</style>
<script type="javascript/text">
$('.myImg').click(function() {
$(this).removeClass('myImg');
$(this).addClass('myImg2');
});
</script>
Ofcourse you'll have to use jquery link to get jQuery latest update.
So what have i actually done here?
I've used jQuery to check if user click div .myImg if he did i just switch bettwen the div's classes and each other class got different image.
Hope i helped.
I'm not entirely sure what you're asking, but it sounds like you might want to do CSS sprites.
http://css-tricks.com/css-sprites/
If you want to change the image on click, you'll need some code. I won't spend too much time on that, given your question is hard to decipher, but if it were me, I would create a class per sprite, then toggle between the two classes based on the click event.