[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

continue to question of moving div

Posted on 2014-08-28
6
Medium Priority
?
117 Views
Last Modified: 2014-08-28
echo '<div id="draggable" class="ui-widget-content" style="position:absolute;top:0px;left:0px;z-index:9999;"><div class="chat">
            <div class="messages"></div>
            <textarea class="entry" placeholder="Entre el mensaje aqui"></textarea>
        </div></div>
        <script src="js/chat.js"></script>';

is possible to make this always visible when i scroll down and appears initially at the top right of the page?
0
Comment
Question by:joyacv2
  • 3
  • 3
6 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 40290650
this plugin is what you're looking for : http://stickyjs.com/
try it scrolling the page, you will see the top div are not moving away
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40290719
Hi,

Works in the function of always visible, but alter the top layer initially that you provide, what i can do?
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40290731
add a class to your div for example : mysticky
remove the : z-index:9999;
and add this css file or in header :
.mysticky {
    z-index:9999 !important;
}

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 1

Author Comment

by:joyacv2
ID: 40290791
don't work,

the only thing that alter the code that you provide, is the absolute part, it adds the div in top of the page but alter the initially absolute position
0
 
LVL 1

Author Comment

by:joyacv2
ID: 40290933
this seems that the sticky jquery can be modified, but i don't know how
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 40291023
Here a test page : http://jsfiddle.net/1xous0v4/
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question