search

CSS-Tricks / AnythingSlider

A jQuery Slider plugin for anything.
http://css-tricks.github.io/AnythingSlider/
GNU Lesser General Public License v3.0
1.15k stars 380 forks source link

Editing The Nav Tabs #396

Closed Mykltron closed 12 years ago

Mykltron commented 12 years ago

My god this is driving me nuts. I've spent hours reading through the code but I can't find anything ANYWHERE! My question:

How do I change the text and style (colours, positions) of the green navigation tabs at the bottom left? Here's my page: http://myklwebs.com/myklworld/classical/demos.html I feel REALLY stupid cos a basic thing like changing the text on the nav should be the easiest thing...

I've removed loads of the original files without stopping it working in non-IE browsers so there's less code to wade through. The help section here: https://github.com/ProLoser/AnythingSlider/wiki is no help. The code showing in jsfiddle doesn't seem to relate to what's in my files. The code in this help section, although it works on jsfiddle, actually seems to relate to a nav menu that's not on my demo page above.

ProLoser commented 12 years ago

I'm assuming you've already tried messing with anythingslider.css?

Mykltron commented 12 years ago

I have been over and over that file but this time I managed to change the tab size and font style.

Can you please tell me how to position the tabs on the left or right, instead of underneath? Is it also possible to use position:fixed for them?

ProLoser commented 12 years ago

Assuming you've also already checked out this page: https://github.com/ProLoser/AnythingSlider/wiki/Appearance-Options

Also, it appears you can simply change some variables if you use LESS instead of CSS. Sorry I am being semi useless, really busy ATM

On Jul 16, 2012, at 4:26 PM, Mykltron wrote:

I have been over and over that file but this time I managed to change the tab size and font style.

Can you please tell me how to position the tabs on the left or right, instead of underneath? Is it also possible to use position:fixed for them?

Reply to this email directly or view it on GitHub: https://github.com/ProLoser/AnythingSlider/issues/396#issuecomment-7022664

Mykltron commented 12 years ago

I haven't seen that page, at first glance it doesn't seem to help but I'll have another look later when I'm not half asleep!

I'll have a look at LESS later. I've just discovered I can open them with a text editor - my comp wanted to use Terminal. I've had a quick look but can't see anything about repositioning them yet, but I'll try again in 12 hours or so...

Mottie commented 12 years ago

Check out the navigation demo section on the main wiki page. In there you will find these two demos that might help you:

These demos show how to completely move the navigation outside of the slider so the styling is completely up to you.

Mykltron commented 12 years ago

As it happens I just came here to ask about one of those links you've posted Mottie.

In http://jsfiddle.net/Mottie/Cm479/4399/ (your second link) the numerical tabs are on the left and that's what I'd like to achieve. The trouble is that changing any code for #nav in the downloaded files doesn't affect the tabs in reality - it affects the menu at the top of this page: http://myklwebs.com/myklworld/classical/#&panel1-1&panel2-1

I've just gone through the entire anythingslider.css file to see what everything does and can't see how to position the tabs elsewhere. Well, I managed to move them but they all sat on top of each other so I could only see the top one grrrr....

@ProLoser , I tried playing with LESS files and they didn't seem to do anything. I even deleted them from my server and nothing changed!

Mottie commented 12 years ago

Instead of looking at the default css, look at the metallic theme css - see line 148.

Also if you move the controls, make sure to get rid of the .anythingSlider padding-bottom - see line 28

Mykltron commented 12 years ago

I've just played around with those lines and nothing changed. Am I being really stupid here? I've checked that metallic is linked in the head.

Mottie commented 12 years ago

Did you set the theme option?

$('#slider').anythingSlider({
    theme : 'metallic',
    // other options
});
Mykltron commented 12 years ago

I missed that 'theme' setting, so clearly I WAS being stupid in that case, but, this is driving me crazy. I've spent hours on this and achieved nothing and I'm getting very frustrated. I feel rather out of my depth with all this JS and so many different files and directories because most of the code doesn't seem to do anything :-/

If I use the metallic theme I can position the 'tabs' (though really they're text-less circles) outside of the slider, displayed horizontally. I need to display text in the tabs and I prefer the arrows of the default theme so it's the default theme that I wish to edit to suit my design.

If I use the default theme I can display the tabs vertically (see here: http://myklwebs.com/myklworld/classical/demos.html) but I can't move them outside of the slider. What I want is to display the tabs like this: http://jsfiddle.net/Mottie/Cm479/4399/ notice they're vertical and down the left side of the window with text. Please tell me how to do this as the code in jsfiddle doesn't seem to related the code in the AnythingSlider files.

Mottie commented 12 years ago

Next time you experiment, try starting from the simple demo instead of the fx demo page. The fx page has a lot more complicated and confusing stuff going on. Basically, I'm saying it's easier to add stuff to a simple demo and see if the new stuff works than it is to take something complicated and remove things and hope things don't break.

Anyway, I modified the page you shared and added the code below. Here is what I did:

Take the code below and completely replace the page you shared with it - I have verified that it works.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>AnythingSlider FX Demos</title>

        <!-- jQuery (required) & jQuery UI (for this demo only) -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

        <!-- Anything Slider optional plugins -->
        <script src="js/jquery.easing.1.2.js"></script>

        <!-- Anything Slider -->
        <link rel="stylesheet" href="css/anythingslider.css">
        <script src="js/jquery.anythingslider.js"></script>

        <style type="text/css">
            #test{
                height: 500px;
                width: 500px;
                background: blue;
            }

            ul {
                list-style: none;
                padding: 0;
            }

                        .textSlide { padding: 5px 30px; }

            #slider2 {
                width: 700px;
                height: 600px;
                list-style: none;
                /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
                overflow-y: auto;
                overflow-x: hidden;
            }
            /* navigation css */
            #nav { float: left; }
            #nav li { padding: 4px; }

            #nav a {
                display: block;
                width: auto;
                height: 20px;
                background: #999;
                padding: 8px;
                text-align: center;
                text-decoration: none;
                color: #fff;
            }
            #nav a:hover { background: #000; }
            #nav a.cur { background: #0080ff; }
            #nav a.start-stop { background: #080; }
            #nav a.start-stop.playing { background: #800; }
        </style>

        <script>
            $(function(){
                $('#slider2')
                .anythingSlider({
                    resizeContents      : true,
                    navigationFormatter : function(i, panel){
                        return ['Home', 'Biography', 'Music', 'Teaching', 'Videos', 'Contact', 'Links'][i - 1];
                    },
                    appendControlsTo : $('#nav')
                });
            });
        </script>

    </head>

    <body>

        <div id="nav"></div>

        <!-- AnythingSlider #2 -->
        <ul id="slider2">
            <li class="panel1">
                <div>
                    <div class="textSlide">
                        <h3>Home</h3>
                        <ul>
                            <li>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>

            <li class="panel2">
                <div>
                    <div class="textSlide">
                        <h3>Biography</h3>
                        <ul>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </li>

            <li class="panel3">
                <div>
                    <div class="textSlide">
                        <h3>Music</h3>
                        <ul>
                            <li>
                                <div id="test">test</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>

            <li class="panel4">
                <div>
                    <div class="textSlide">
                        <h3>Teaching</h3>
                        <ul>
                            <li>Whether you're an absolute beginner or a seriously advanced player already, if you want to learn guitar or any aspect of music theory of any style in the East Kent or Canterbury area then you've come to the right place. Full information about Mykl's teaching can be found by clicking <a href="http://www.myklwebs.com/guitar_lessons/" target="_blank">here</a>.</li>
                            <li>Guitar Teaching CanterburyAs Mykl understands that not everyone learns everything as fast as everyone else he is a patient teacher who has experienced the problems and frustrations of learning an instrument.  Because not everyone experiences the same difficulties he sometimes devises exercise unique to each student to tackle a specific need.  Some of these exerises can be done without a guitar, meaning you can make progress while waiting for the kettle to boil, out for a walk, waiting for the adverts to end or even when stuck in traffic.</li>
                            <li>Although many students don't wish to learn theory Mykl is happy to teach it to any level using a logical plan that ensures anyone can master it.</li>
                            <li>Mykl has done a great deal of performance as a solo classical guitarist at home and abroad and received a distinction in his Master's Degree performance exams but also studied composition during his degree.</li>
                            <li>Originally he started out playing lead guitar in heavy metal bands and also has experience playing blues and jazz so is equally at home teaching all common guitar styles.</li>
                            <li>Mykl <font color="silver">-M.Mus., BA(Hons)-</font> has been teaching guitar since 1996, working with every age from 5yrs to 70yrs privately and in secondary schools as well as at Canterbury Christ Church University, Canterbury.  For several years he taught guitar in a special needs school but now teaches at Simon Langton Grammer School for Boys in Canterbury.  For his degree thesis he researched guitar techniques and explored physiology, Alexander technique, sports and martial arts training and rehabilitation methods to develop a more efficient, injury-free technique, which he passes on to all students so they can develop speed and stamina while avoiding repetitive strain injuries and unlock potential as quickly as possible while developing habits that will allow them to play for a lifetime.  He has also studied how acoustic guitars are designed to work so he can pass on the knowledge of how to get the most out of them by making a richer, more powerful sound.</li>
                        <li><a href="http://myklwebs.com/myklcontact.html" target="_blank">Contact Mykl</a> to enquire about or book lessons.</li>       </ul>
                        </div>
                    </div>
                </li>
                <li class="panel5">
                    <div>
                        <div class="textSlide">
                            <h3>Videos</h3>
                            <ul>
                                <li>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>

                <li class="panel6">
                    <div>
                        <div class="textSlide">
                            <h3>Contact</h3>
                            <ul>
                                <li>
                                </li>
                            <li><a href="http://myklwebs.com/myklcontact.shtml" target="_blank">Contact Mykl</a> to enquire about or book lessons.</li>       </ul>
                            </div>
                        </div>
                    </li>

                    <li class="panel7">
                        <div>
                            <div class="textSlide">
                                <h3>Links</h3>
                                <ul>
                                    <li>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- END AnythingSlider #2 -->

            </body>

        </html>
Mykltron commented 12 years ago

THANK YOU SO MUCH! THIS IS SO MUCH EASIER TO WORK WITH! Adding background images to the tabs is so much easier now.

There are a few behaviour changes that I want to change (like the slider box resizing for the content) but I think I stand more chance of sorting these things out now. Thank you for all your patience.

Mykltron commented 12 years ago

I've deleted all extraneous files and everything still works. Thanks again!