Need help with centering and expanding text in drop-down

This code is used with jquery to have a (page-scrolled) sliding-out tab/bar to drop-down a section(panel), when the text is clicked:

<style>
#panel, #flip {
    padding: 5px;
    width: 1150px;
    text-align: center;
    color: #ffffff;
    background-color: #b23c23;
    border: solid 1px #;
}

.scrollme {
    width: 1150px;
    padding: 0px;
    margin:0px auto;
    color: #ffffff;
    }
</style>

However, the text that is in the panel, needs to expand horizontally, but doesn’t - see example image.

How can I get the drop-down text to expand horizontally (and centered)

Here’s more code:

<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>

?

Hi,

We’d need to see code that demonstrates the problem you are having as the code you posted does not exhibit the same behaviour.:slight_smile:

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>

Any help will be appreciated.

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>

Thanks for your reply.
I added the code here:

The view of it there shows the ability to open and close the drop-down section by selecting the Click + - text

And the text looks centered there, and spread out horizontally (but not on my page).

Which made me realize that it is the page that I have this code on.

I moved it to another page and the text is centered and horizontally spread.

So, thank you for suggesting that I put the code up somewhere else to show.

I’d like to figure out how to get the drop-down to close upon the sliding out tab/bar sliding back to hide. Any ideas?

Thanks again

Hi,

Thanks for putting up the demo:)

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:)

1 Like

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:

<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"
>

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 :slight_smile:

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 :slight_smile: Maybe someone else can step in and take a look;)

1 Like

I’ve combined a jquery ‘scroll’ code with jquery ‘slide toggle’ code (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle)

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.

Here’s the code:

<script>
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>


<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.scrollme.js"></script>
<script src="js/jquery.scrollme.min.js"></script>

<div class="scrollme">
<div class="animateme"
        data-when="enter"
        data-from="0.5"
        data-to="0"
        data-opacity="0"
        data-translatex="1220"
        data-rotatez="0"
>
<div id="flip">Click + - </div>
<div id="panel">Hello world!</div>
</div>
</div>

Any ideas on making the ‘slide toggle’ to toggle up, when the ‘scrolled tab/bar’ slides to hide, will be appreciated.

[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?

Threads merged.

Please don’t start a new thread for the same topic as the information that went before is relevant to the discussion.

Thanks for the replies.

Here is an example of what I’m trying to describe:

Thank you - I’ve found a solution

Glad you solved it and sorry we couldn’t help but you never actually provided a full base for us to test from although we asked several times :slight_smile:

In case anyone is having similar issues it might be nice if you could quickly outline your solution.

I bought an inexpensive plug in that did what I needed

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.