In modern web development, efficiently displaying a large amount of content in limited space is very important. Especially on small screens like smartphones and tablets, it becomes difficult to show all the information at once. Therefore, it’s necessary to make adjustments to allow users to comfortably view the content.
This time, I will introduce a method to “slide text and images that do not fit within the content area up and down” using JavaScript. By using this technique, users can smoothly scroll the content up and down simply by hovering their mouse over a specific link. Additionally, this method offers a visually excellent experience and is very useful as a way to efficiently utilize page space.
1. Basic Design and CSS of the Content Area
First, to enable text or images that do not fit within the content area to move up and down, it is necessary to set the appropriate style using CSS. In this section, we will explain the necessary styles one by one.
1.1 Basic CSS Styles
Below are the CSS styles for managing the overall content area. You can freely customize the design by adjusting each property as needed.
<style type="text/css">
<!--
body{
margin:0;
padding:0;
}
h1{
font-size:16px;
font-weight:normal;
line-height:1.6em;
text-align:center;
padding:15px 0;
}
#idWrap{
width:600px;
margin:0 auto;
text-align:left;
}
#idBoxWrap{
position:relative;
width:200px;
height:200px;
border:1px solid black;
overflow:hidden;
margin:0 auto;
}
#idBox{
position:absolute;
width:170px;
left:0;
top:0;
}
#idBox p{
line-height:1.6em;
margin:5px;
}
.clLink{
padding:25px 0 0 0;
text-align:center;
}
.clLink a{
text-decoration:none;
border:solid 1px #666666;
padding:5px;
color:#666666;
}
.clLink a:hover{
text-decoration:none;
border:solid 1px #666666;
padding:5px;
color:#ffffff;
background-color:#666666;
}
-->
</style>
The above code sets up the basic layout of the content area. The key points are as follows:
- #idWrap: Sets the overall width and centers it. This ensures the content is placed in the center of the page.
- #idBoxWrap: Specifies the size of the box area that displays the content and hides any overflowing parts.
- #idBox: This is the area that holds the scrollable content. You can adjust its height and position.
1.2 User Interface Design
Care must also be taken in designing the links. It’s important to make the link style clear so that users intuitively understand which link to click. By providing visual feedback, such as changing the color when hovering over a link, you can improve usability.
2. Moving Content Up and Down Using JavaScript
Next, we will create a mechanism to move text and images up and down in the content area using JavaScript. The up and down sliding action is executed continuously using setTimeout when the user hovers over the content.
2.1 Basic Logic of JavaScript
Below is the move function that moves the content up and down. This function is designed to slide the content when the mouse is hovered and stop the movement when the mouse is moved out.
<script type="text/javascript">
function move(id,spd){
var obj=document.getElementById(id),max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=parseInt(obj.style.top);
if ((spd>0&&top<=0)||(spd<0&&top>=max)){
obj.style.top=top+spd+"px";
move.to=setTimeout(function(){ move(id,spd); },20);
} else {
obj.style.top=(spd>0?0:max)+"px";
}
}
</script>
This code moves the element (content area) with the specified ID up and down. The spd parameter controls the speed and direction of the movement. A positive value moves it upward, while a negative value moves it downward.
2.2 Smooth Movement with setTimeout
setTimeout is a JavaScript function used to repeatedly execute a specific process at certain intervals. By using this function, you can achieve smooth scrolling movements.
3. Implementation Example in HTML
Finally, here’s an implementation example using this sliding feature in HTML. In this example, the text slides up and down when you hover over the “↑” and “↓” links.
3.1 Implementation Example
<div id="idWrap">
<h1>Text and images that do not fit in the box area will slide up and down when you hover over the "↑" and "↓" links.</h1>
<div id="idBoxWrap">
<div id="idBox">
<p>
Text and images that do not fit in this box will slide up and down using the "↑" and "↓" links below.<br />
<br />
“DAD UNION” is a web technology media with the theme “Making life easier for dads.”<br>
<br>
In the future, we plan to form a union for dads to express that "we’re working hard too" and aim to raise the value of fathers even slightly.
</p>
</div><!--/idBox-->
</div><!--/idBoxWrap-->
<div class="clLink">
<a href="#" onMouseover="move('idBox',5)" onMouseout="clearTimeout(move.to)">↑</a>
<a href="#" onMouseover="move('idBox',-5)" onMouseout="clearTimeout(move.to)">↓</a>
</div>
</div>
Demo Page to Slide Text and Images Up and Down
Check out the actual operation on the following demo page.
Demo Page for Sliding Text and Images Up and Down in the Area
Source: Dynamic Drive – Scrollable Content Script
Source: Dynamic Drive – Scrollable Content Script
Conclusion
Using JavaScript to slide content up and down is a highly effective way to improve the user experience. Especially when there is a lot of content and it needs to be displayed in a limited space, introducing such interactions allows users to access information without frustration.
※Please use it at your own risk.
Do not copy the Google Analytics tag in the head tag of the demo page.
