We’d need to see code that demonstrates the problem you are having as the code you posted does not exhibit the same behaviour.
You will need to supply more code that shows the problem or perhaps build a codepen so we can see what’s happening (assuming the site is not live or you don’t want to post it).
At the moment all we can do is guess and it looks like you have something contained within a smaller width somewhere.
Thanks for your reply.
Besides what I’ve alreadyposted, here’s all the code:
<div class="scrollme">
<div class="animateme"
data-when="enter"
data-from="0.5"
data-to="0"
data-opacity="0"
data-translatex="1250"
data-rotatez="0"
>
<div id="flip">Click + - </div>
<div id="panel">Hello world! What else can I say in this box? Hello world! What else can I say in this box?</div>
</div>
</div>
We are asking you to create a “working page” that demonstrates the problem. The fragments of code that you have posted do not demonstrate the problem that you have described. We need to be able to see the issue.
Here’s a start. This is what you have posted so far pasted into a potentially working page. Copy this to a file and fill in the missing code until it actually demonstrates the issue.
If text is being resized, I would expect to find a link to jQuery in the head, etc.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>template</title>
<!--
https://www.sitepoint.com/community/t/need-help-with-centering-and-expanding-text-in-drop-down/231935
ChrisjChrisj
Jul 28,2016 2:51 PM
-->
<style type="text/css">
#panel, #flip {
width: 1150px;
text-align: center;
color: #ffffff;
background-color: #b23c23;
border: solid 1px #;
padding: 5px;
}
.scrollme {
width: 1150px;
color: #ffffff;
padding: 0px;
margin:0px auto;
}
</style>
</head>
<body>
<div class="scrollme">
<div class="animateme"
data-when="enter"
data-from="0.5"
data-to="0"
data-opacity="0"
data-translatex="1250"
data-rotatez="0"
>
<div id="flip">Click + - </div>
<div id="panel">Hello world! What else can I say in this box? Hello world! What else can I say in this box?</div>
</div>
</div>
</body>
</html>
Without wishing to appear stupid it seems that you already have the dropdown closing when you click the ‘click+’ element again. Can you clarify exactly what you mean?
It may help that when you refer to elements can you refer to the elements you are using as I have assumed the dropdown is the element called #panel which is the element being shown and hidden?
Remember we are looking at this fro the first time and have no idea of what you have in mind and the easier you make it for us to see the problem the quicker you will get an answer:)
Thanks for your reply.
Yes, I “already have the dropdown closing when you click the ‘click+’ element again”. What you don’t see in the ‘demo’, is that when someone scrolls up and down the page, this panel slides to the right to hide, or scroll again and it appears again by sliding out from the right across the page, using this code:
So, presently if you click + - to drop down the panel, and then you scroll, the panel will slide to hide, and scroll up or down again, and the panel will appear again by sliding across the page again, but the drop-down panel is still dropped. Yes, you can click + - to close it (up), but, in addition to “click + - to close it”, I’d like it to automatically close the drop-down panel - upon it sliding to hide. Any ideas on how to do that additional feature, will be greatly appreciated.
I’m afraid I can’t help with something I don’t see
If you are using the scrollme.js then you should be able to put up a demo on fiddle or on codepen exactly as the authors of scrollme have done here (assuming this is the plugin you are using).
Once we have a working demo we can work towards an answer:)
It is likely that the answer will be JS based anyway and I will move the thread to the JS forum if so.
Lastly, there seems to be a flaw in your logic or I have missed the point again. If the element is automatically hidden when you scroll then why do you need to click to hide it. You can’t hide something that is already hidden?
Or do you mean you want this as a once only effect that you have to initiate by clicking?
I’m having trouble getting my head around this as you can tell Maybe someone else can step in and take a look;)
The ‘scroll’ code slides a tab/bar horizontally across the web page, when the page is scrolled down.
And when you ‘click’ the text on the tab/bar, the ‘slide toggle’ code makes a vertical ‘drop-down section’ appear, successfully, (and the vertical ‘drop-down section’ slides back up when you ‘click’ the text again).
And when you scroll up the web page, the ‘scrolled tab/bar’ slides back to hide.
However, I’d like the vertical ‘drop-down section’ to automatically slide back up, when the scrolled tab/bar slides back to hide.
Currently, if you scroll down the page again, the vertical ‘drop-down section’ is open(dropped-down) if the text hasn’t been manually clicked to close it.
[quote=“ChrisjChrisj, post:1, topic:231819, full:true”]
Currently, if you scroll down the page again, the vertical ‘drop-down section’ is open(dropped-down) if the text hasn’t been manually clicked to close it.[/quote]
Sorry, I’m not currently seeing that occur when I scroll down the page. Can you please get your example code going on codepen, or on jsfiddle (or any other preferred coding site) so that we have a common known situation from which to start from?