This question already has answers here:
Creating a textarea with auto-resize
(50 answers)
Closed 7 years ago.
How can I display all textarea rows instead of having that vertical scroll. I have tried with css using min-height and max-height and height: auto but is not working.
.form-control{
width:400px;
min-height: 100px;
max-height: 900px;
height: auto;}
I don't really know if is possible to do that with css.
Maybe is possible with native javascript so I am trying something like this
function expandtext(expand) {
while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
console.log("display all rows!")>
}
}
I find something nice here but it only increase and decrease rows , so how can I display all textarea rows without using scroll. DON'T NEED SOLUTION WITH FIXED HEIGHT, NEED SOMETHING DYNAMIC or other solutions that works only on chrome browser or only on firefox like Object.observe().
Demo
function expandtext(expand) {
while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
console.log("display all rows!") >
}
}
body {
padding: 20px;
}
.form-control {
width: 400px;
min-height: 100px;
max-height: 900px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class=" form-group">
<label>remove texarea scroll and display all rows</label>
<textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet
tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</textarea>
</div>
<div class=" form-group">
<label>remove texarea scroll and display all rows</label>
<textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut.</textarea>
</div>
External JSFiddle.
Simple jQuery solution is:
$(function() {
$('textarea').each(function() {
$(this).height($(this).prop('scrollHeight'));
});
});
Check Fiddle.
As you need a plain JavaScript solution, use following script that was created by User panzi. You can view the original answer here.
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('textarea');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
Check Fiddle Here.
No Javascript required.
You can display a no-scroll (ie. automatically re-sizing) editable text area with the following HTML and CSS:
.textarea {
width:250px;
min-height:50px;
height:auto;
border:2px solid rgba(63,63,63,1);
}
<div class="textarea" contenteditable="true">
The Mozilla Developer Network has an Autogrowing textarea example on their HTMLTextAreaElement page. You should definitely check this out if you want to stay away from CSS3 solutions that can break on older browsers.
Here is the code from the example.
The following example shows how to make a textarea really autogrow while typing.
function autoGrow(oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
textarea.noscrollbars {
overflow: hidden;
width: 300px;
height: 100px;
}
<form name="myForm">
<fieldset>
<legend>Your comments</legend>
<p>
<textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea>
</p>
<p>
<input type="submit" value="Send" />
</p>
</fieldset>
</form>
Autoadjust
This example will take care of the case where you remove lines.
function autoAdjustTextArea(o) {
o.style.height = '1px'; // Prevent height from growing when deleting lines.
o.style.height = o.scrollHeight + 'px';
}
// =============================== IGNORE =====================================
// You can ignore this, this is for generating the random characters above.
var chars = '\n abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
var randRange=function(min,max){return max==null?randRange(0,min):~~(Math.random()*(max-min)+min);}
var randChars=function(chrs,len){return len>0?chrs[randRange(chrs.length)]+randChars(chrs,len-1):'';}
// ============================== /IGNORE =====================================
// Get a reference to the text area.
var txtAra = document.getElementsByClassName('noscrollbars')[0];
// Generate some random characters of length between 150 and 300.
txtAra.value = randChars(chars,randRange(150,300));
// Trigger the event.
autoAdjustTextArea(txtAra);
textarea.noscrollbars {
overflow: hidden;
width: 400px; /** This is via your example. */
}
<form name="myForm">
<fieldset>
<legend>Your comments</legend>
<p>
<textarea class="noscrollbars" onkeyup="autoAdjustTextArea(this);"></textarea>
</p>
<p>
<input type="submit" value="Send" />
</p>
</fieldset>
</form>
Using Jquery and some logic I have tried to do what you need.
Here is the jsfiddle;
https://jsfiddle.net/45zsdzds/
HTML:
<textarea class="myClass" id="FurnishingDetails" name="FurnishingDetails" id="FurnishingDetails"></textarea>
Javascript:
$('#FurnishingDetails').text('hello\nhello1\nhello2\nhello3\nhello4\nhello5');
String.prototype.lines = function() { return $('#FurnishingDetails').text().split(/\r*\n/); }
String.prototype.lineCount = function() { return $('#FurnishingDetails').text().lines().length; }
$('#FurnishingDetails').css('height', ($('#FurnishingDetails').text().lineCount() + 1) + 'em');
CSS:
textarea[name='FurnishingDetails']{
height:2em;
}
Used How to get the number of lines in a textarea? to add a String prototype inorder to get the linecount.
Related
I'm looking for a way to highlight the current html element on mouse-hover (not a specific object, anything the user encounters)
and when the user clicks the item I want to copy the content of the current html element.
How can I do that in Javascript? is there a library that I can use?
Thank you
To add a hover effect, just add a :hover rule to your CSS sylings and add the changes in style to it. No need for JS at all. In the below example, the background color changes on hover.
Same thing can be done for any element on the page by adding the css rule to the <body> tag instead of a specific object:
body *:hover { background-color: steelblue; }
To add the click event, use JS to add an click listener to either all the items, or to the container of the items. innerHTML will then give you the 'content' of the HTML node that you can do anything with. In the example below, we just send the content to another function that will log it to the console.
You could write all of this into one statement, but it's usually preferred to break these things down into small pieces so you can mix n match later on when changes are needed.
var addClick = function( callback ) {
document.querySelector( '#list_items' ).addEventListener( 'click', function( event ) {
var item = event.target;
if ( item.nodeName === 'LI' ) callback( item.innerHTML );
} );
};
var event_handler = function( content ) {
console.log( 'the content of the clicked item is: ' + content );
};
addClick( event_handler );
.list-item {
background-color: white;
border: 1px solid black;
margin-bottom: 4px;
padding: 4px;
}
.list-item:hover {
background-color: steelblue;
}
<ul id="list_items">
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
<li class="list-item">Item 3</li>
<li class="list-item">Item 4</li>
</ul>
This is a way we can do this.
var elements = document.querySelectorAll(".reader");
var elementArray = [...elements]
elementArray.map(function(ele){
ele.addEventListener('mouseover', function(){
this.setAttribute("style","background:yellow");
})
ele.addEventListener('mouseleave', function(){
this.setAttribute("style","background:white");
})
ele.addEventListener('click', function(){
alert(this.innerHTML);
})
})
<html>
<div class="reader">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit, quam id viverra molestie, augue sapien hendrerit nisl, sed fermentum ante elit porta risus.
</div>
<p class="reader">
Nulla tincidunt tempor tempus. Pellentesque sed nisi eget felis pulvinar sagittis. Maecenas id erat iaculis, tincidunt urna eu, viverra metus. Pellentesque in libero auctor turpis tempor mollis.
</p>
<p class="reader">
Quisque vitae felis nisi. Praesent hendrerit sit amet nibh id scelerisque. Phasellus dictum, leo non sollicitudin pulvinar, arcu diam vestibulum leo, a eleifend libero enim et lorem.
</p>
<script type="text/javascript" src="script.js" charset="utf-8"></script>
</html>
document.execCommand needs a user event to work. It will not work on hover, but it will on clicks and the like (mousedown, mouseup, etc.).
It seems browsers do support it consistently now.
Check out my JSFiddle.
$('.image').hover(function () {
// will not work, no user action
$('input').select();
document.execCommand('copy');
});
$('.image').mousedown(function () {
//works
document.execCommand('copy');
});
Copy commands triggered from document.execCommand() will only affect the contents of the real clipboard if the event is dispatched from an event that is trusted and triggered by the user, or if the implementation is configured to allow this. How implementations can be configured to allow write access to the clipboard is outside the scope of this specification.
If you don't like jQuery, a good alternative is clipboard.js
I'm using Jquery Accordion to show and hide certain divs. There's also a "Show All"/"Expand All" button. Everything works fine, except for when I click on the header of section 1 and then click on header of Section 2, Section 1 remains expanded. How do I make it collapse when another one is open whilst retaining the show all and hide all functionality? I have tried multiple answers on StackOverFlow, jquery forums and fiddles. Each one of them seem to be missing one thing or the other. Can someone please help me?
This is a fiddle that is almost close to what I want: http://jsfiddle.net/apd8526c/
This is what it is doing:
var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');
// add the accordion functionality
headers.click(function() {
var panel = $(this).next();
var isOpen = panel.is(':visible');
// open or close as necessary
panel[isOpen? 'slideUp': 'slideDown']()
// trigger the correct custom event
.trigger(isOpen? 'hide': 'show');
// stop the link from causing a pagescroll
return false;
});
// hook up the expand/collapse all
expandLink.click(function(){
var isAllOpen = $(this).data('isAllOpen');
contentAreas[isAllOpen? 'hide': 'show']()
.trigger(isAllOpen? 'hide': 'show');
});
// when panels open or close, check to see if they're all open
contentAreas.on({
// whenever we open a panel, check to see if they're all open
// if all open, swap the button to collapser
show: function(){
var isAllOpen = !contentAreas.is(':hidden');
if(isAllOpen){
expandLink.text('Collapse All')
.data('isAllOpen', true);
}
},
// whenever we close a panel, check to see if they're all open
// if not all open, swap the button to expander
hide: function(){
var isAllOpen = !contentAreas.is(':hidden');
if(!isAllOpen){
expandLink.text('Expand all')
.data('isAllOpen', false);
}
}
});
Check this working code. I have added
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
var headers = $('#accordion .accordion-header');
var contentAreas = $('#accordion .ui-accordion-content ').hide();
var expandLink = $('.accordion-expand-all');
// add the accordion functionality
headers.click(function () {
$('#accordion .ui-accordion-content:visible')['slideUp']().trigger('hide');
var panel = $(this).next();
var isOpen = panel.is(':visible');
// open or close as necessary
panel[isOpen ? 'slideUp' : 'slideDown']()
// trigger the correct custom event
.trigger(isOpen ? 'hide' : 'show');
// stop the link from causing a pagescroll
return false;
});
// hook up the expand/collapse all
expandLink.click(function () {
var isAllOpen = $(this).data('isAllOpen');
contentAreas[isAllOpen ? 'hide' : 'show']()
.trigger(isAllOpen ? 'hide' : 'show');
});
// when panels open or close, check to see if they're all open
contentAreas.on({
// whenever we open a panel, check to see if they're all open
// if all open, swap the button to collapser
show: function () {
var isAllOpen = !contentAreas.is(':hidden');
if (isAllOpen) {
expandLink.text('Collapse All')
.data('isAllOpen', true);
}
},
// whenever we close a panel, check to see if they're all open
// if not all open, swap the button to expander
hide: function () {
var isAllOpen = !contentAreas.is(':hidden');
if (!isAllOpen) {
expandLink.text('Expand all')
.data('isAllOpen', false);
}
}
});
});
</script>
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
.accordion-expand-holder {
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<p class="accordion-expand-holder">
<a class="accordion-expand-all" href="#">Expand all</a>
</p>
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset">
<h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
Section 1
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
Section 2
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3 class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all">
<span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
Section 3
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
</div>
</body>
</html>
I'm having troubles positioning a button on a page with css. I want the button to be fixed at a certain position but when there is a lot of content on the page I want the button to move down.
Firstly I want the button at the bottom of the page when there isn't much content such as the code below which does this:
#Button
{
position: fixed;
height:90px;
width:220px;
left:16%;
top:70%;
border:none;
background:none;
}
Then when there is lots of content I want the button to move down such as the code below:
#Button
{
position: absolute;
height:90px;
width:220px;
left:16%;
padding-top:10%;
padding-bottom: 13%;
border:none;
background:none;
}
Can anyone help? I've looked online but cant make sense of it.
If you define a wrapper block element (a <div> for example) around all your content and put the <button> directly under that element, it is possible to reach the desired result with CSS only.
HTML:
<div id="wrapper">
<!-- other content goes here -->
<button id="button">Sample</button>
</div>
CSS:
#wrapper {
position: relative;
min-height: 100vh;
}
#button {
position: absolute;
bottom: 0;
}
However, I have to warn you about the fact that legacy browsers do not support the vh unit and some others show buggy behavior. Take a look at here before you implement it in your project.
I don't know your structure, but I'll try to help you.
Let's use the following markup:
<div class="parent">
<p class="texto">Your text goes here!</p>
<input type="button" value="OK" />
</div>
To solve your problem, I'd simply use a min-height in the content.
.parent .texto {
min-height: 100px;
}
In this way, the button will always be in the same position if there isn't much content. And it'll follow the height if there are lots of content.
Snippet:
.parent {
width: 200px;
padding: 5px;
border: 1px solid black;
float: left;
margin: 5px;
}
.parent .texto {
min-height: 100px;
}
<div class="parent">
<p class="texto">
Small text!
</p>
<input type="button" value="OK" />
</div>
<div class="parent">
<p class="texto">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi urna, rhoncus vitae hendrerit ut, hendrerit a turpis. Phasellus sed rhoncus augue, eget vehicula neque. Vivamus lobortis, velit vitae maximus porttitor, erat nulla scelerisque est, nec
sagittis diam diam id nisl. Maecenas dictum lacinia dignissim. Duis eget ligula fermentum, vulputate dui sed, vestibulum ipsum. Duis non consectetur dolor. Nunc urna eros, tincidunt id nisl id, dapibus imperdiet orci. Mauris posuere convallis ullamcorper.
</p>
<input type="button" value="OK" />
</div>
Hope it helps!
use position:relative for the element which you have defined before this button.
I have the following page:
<div class="a">
...
</div>
<div class="b">
...
</div>
My users interact with this page by selecting various pieces of text within .a and .b. The browser's native selection behaviour almost works, but I need to prevent my users from making selections, which span the boundary between .a and .b.
Is there a way to constrain the user's selection to a <div>?
Unfortunately, this content is not user editable - which is unfortunate, because setting contenteditable="true" on each <div> achieves the constraint I'm looking for.
How about starting with this:
HTML:
<div class = "a">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id semper purus. Duis laoreet tellus in ante luctus semper. Praesent interdum urna quis luctus commodo.
</div>
<div class = "b">
Curabitur vehicula eget leo a tristique. Donec eget aliquam erat. Mauris id porttitor lacus.
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
.noSelection {
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
}
div + div {
padding-top: 10px;
}
jQuery:
$(function() {
$("div").hover(function() {
$(this).siblings("div").toggleClass("noSelection");
});
});
Here's a fiddle: http://jsfiddle.net/J2fJz/.
I try To make Something Like that which present at Microsoft's Support Website.See -> (Visit Here)
Click on any Product which list there. (Note: Purpose of this article/Question is not MARKETING on any Product!!! It just for Knowledge.)
When You click on any one of listed there, one drop-down appear.
Now Here Points of my question are comes out. After click on menu item you can see that there is one "Select a topic" list and when you click on any one of them, 2nd list comes out. and after click on item from 2nd list 3rd one list comes out. I exactly try to make a script like that. I search over internet and make a one div slider. But it slide whole div.
Here is my code what I done
HTML
<div id="gallery">
<div id="slider">
<div style="background:#cf5">1</div>
<div style="background:#ada">2</div>
<div style="background:#b0b">3</div>
</div>
<span id="prev">Prev</span>
<span id="next">Next</span>
</div>
CSS
#gallery{
position:relative;
margin: 0 auto;
overflow:hidden;
width:500px;
height:330px; /* +30 = space for buttons */
text-align:center; /* to center the buttons */
}
#slider{
position:absolute;
left:0;
height:300px;
text-align:left; /* to reset text inside slides */
}
#slider > div {
position:relative;
float:left;
width:500px;
height:300px;
}
#prev, #next{
display:inline-block;
position:relative;
top:300px;
cursor:pointer;
padding:5px;
}
Jquery
$(function(){
var $gal = $('#gallery'),
$sli = $('#slider'),
$box = $('div',$sli),
W = $gal.width(), // 500
N = $box.length, // 3
C = 0; // a counter
$sli.width(W*N);
$('#prev, #next').click(function(){
C = (this.id=='next' ? ++C : --C) <0 ? N-1 : C%N;
$sli.stop().animate({left: -C*W },800);
});
});
And Here Is Example of Of my code on Fiddle
After do some R&D on it. I make something like that
HTML
<div>
<input type="submit" id = "submit" value = "Show panel"/>
<span id = "showpanel1"></span>
</div>
<div id = "slider" style = "display:none">
<div class = "panel1" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
<div class = "panel2" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
</div>
<!-- Load Loder GIF -->
<div id = "loader" style = "display:none">
<img src = "loader.gif">
</div>
<!-- QnA Div Start -->
<div id = "qaslider" style = "display:none">
<div class = "mainpanel" style = "display:none">
<ul>
<li id = "divpanel0">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li id = "divpanel1">Pellentesque nec est eget eros placerat imperdiet sed ac purus.</li>
<li id = "divpanel2">Fusce id dui lacinia, scelerisque dolor vitae, faucibus sem.</li>
<li id = "divpanel3">Nulla dignissim odio non turpis consectetur malesuada.</li>
<li id = "divpanel4">Ut vestibulum est quis lacinia sagittis.</li>
<li id = "divpanel5">Maecenas interdum libero at suscipit iaculis.</li>
<li id = "divpanel6">Donec in nibh sed lacus ultrices pellentesque sed in purus.</li>
<li id = "divpanel7">Aliquam luctus eros id semper vestibulum.</li>
<li id = "divpanel8">Donec vitae felis at leo rutrum mattis.</li>
</ul>
</div>
</div>
JS
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
$(document).ready(function() {
var firsttext;
$(".panel1").on('click','li',function (){
$(".panel2").show("slide", { direction: "right" }, 1000);
$("span").text($(this).html());
firsttext = $(this).html();
});
$('#submit').click(function() {
$(".mainpanel").hide();
$("#slider").show("slide", { direction: "right" }, 0);
$(".panel2").hide("slide", { direction: "right" }, 0);
$(".panel1").show("slide", { direction: "right" }, 1000);
});
$(".panel2").on('click','li',function (){
$("span").text(firsttext + " > " + $(this).html());
$( "#slider" ).fadeOut( "slow" );
$("#loader").show("slide", { direction: "right" }, 800);
$("#loader").center(true);
setTimeout(removeslider,4000)
});
});
function removeslider()
{
$("#loader").hide("slide", { direction: "left" }, 800);
$("#qaslider").show("slide", { direction: "right" }, 0);
$(".mainpanel").show("slide", { direction: "right" }, 1000);
}
// Custome Jquery Function to stop/place element at center screen
jQuery.fn.center = function(parent) {
if (parent) {
parent = this.parent();
} else {
parent = window;
}
this.css({
"position": "absolute",
"top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
"left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
});
return this;
}
</script>
Style
<style>
.panel1 .panel1
{
border:1px solid black;
margin-right:800;
margin-top:20px;
}
#loader
{
margin-right:708;
margin-top:117px;
margin-left:525px;
}
.panel1 ul li:hover, .panel2 ul li:hover
{
cursor:hand
}
#slider > div {
position:relative;
float:left;
width:500px;
height:300px;
}
</style>