|
|
Post by Aesop on Dec 24, 2020 16:52:57 GMT
Hello! I'm trying to code a sidebar to hold the chatbox for my forum? I don't need anything super fancy, just a box that will come up when you click it! I have some simple references for what i'm looking to do, I'm just not sure how to actually make it happen? Before Clicking: img.nickpic.host/adY8mq.pngAfter Clicking: img.nickpic.host/adYKqd.pngMy doodles are more to show what I have in mind, the box would have a small cartoon on the top, I don't have the assets drawn yet so a placeholder could be used instead! rosetests.freeforums.net/My testing forum if that helps! I super appreciate the help! |
|
614 posts
bits
For a moment, nothing happened. Then, after a second or so, nothing continued to happen.
|
Post by gimmick on Dec 24, 2020 19:55:00 GMT
I whipped up a rudimentary demo, which you can see here. To add it to your site: 1. Go the Layout Template for your forum wrapper and add this inside the <head></head> tags to enable javascript. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>2. Still in that same layout template, add this to the very bottom. This would be the box itself, along with the script that makes it so when you click a certain part of the box ("headerarea"), it'll add/remove a class ("slideup") that changes the container's position on the page.
<div class="chatcontainer">
<div class="headerarea">
<img class="headerimg" src="https://via.placeholder.com/200x50/999/fff">
Click me
</div>
<div class="chatbox">
Here goes your chatbox code
</div>
</div>
<script>
$(".headerarea").click(function() {
$(".chatcontainer").toggleClass("slideup");
});
</script> 3. The sample css, which needs to be added to CSS & Visual Editor > Stylesheet. .chatcontainer { width: 300px; height: 350px; background: white; position: fixed; left: 5%; bottom: 0; -webkit-transform: translateY(250px); -moz-transform: translateY(250px); -o-transform: translateY(250px); -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
.headerarea { height: 100px; text-align: center; }
.headerimg { width: 100%; height: 50px; margin-bottom: 10px; }
.chatbox { padding: 10px; }
.slideup { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); }
You'll want to mess around with the dimensions. Depending on how tall the whole thing ends up being, you'll need to adjust its starting position so only the headerarea is visible before clicking: .chatcontainer's height – .headerarea's height = .chatcontainer's translateY(DIFFERENCE IN HEIGHT )To use the dimensions I'd used as an example, it's 350px tall total with a 100px tall header area, hence the translateY(250px). |
|
|
|
Post by Aesop on Dec 24, 2020 20:17:06 GMT
OH MAN THANK YOU ;o;
I think I'm doing something wrong though installing it, it's showing up physically but for some reason clicking it isn't working? I'm sorry for the bother ;o;
OUP, nevermind it's okay now! Thank you so much for the help!
|
|
|
|
Post by Kitten4u on Feb 1, 2021 2:45:45 GMT
[nospaces] [attr="class","infoBG"] [attr="class","infoBG2"] [attr="class","infoBack"] [attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived [attr="class","infoDiv"] [attr="class","infoBody"]
To keep the forum clean and so people know that all threads in certain areas are current and that the OP is likely to still have interest, we archive threads that haven't gotten posts for 2 weeks. This thread is being archived for that reason. If you would like this thread reopened, contact a staff member.
|
|
