Question

Okay so i have been looking at this for over a week and can not figure it out. Basically here is an example of the end result i posted earlier:

Previous Stack Overflow Post

Their suggestions did not work. The javascript is changing the header css when you click on the buttons to the top right. Here is a Demo: DEMO of JAVASCRIPT CHANGE

I'm Trying to duplicate this action with the image, but i however do not know javascript that well and am not too sure what i am reading when i look at the javascript file. I either would like someone to help me read this javascript so i can edit it myself or help me find a solution.

Here is the Javascript: Script.JS

Here is the relevant HTML that i have done so far:

body >
<div id="gspinner" class="spinner"></div>
<div id="glob">
<header>
    <div class="inner">


    <a href="#!/home"><h5><img src="images/logo_large.png" /></h5></a>
            <!--<a href="#!/home"><img src="logo-large.png" id="img-             logo" alt="" /></a>
            <!--<a  href="#!/home"></></a>-->

        <nav>
            <ul>

                <li class="li-2"><a href="#!/about"><span class="lbl">About Us</span><span class="ico -def"></span><span class="ico -hvr"></span></a>
                    <ul>
                        <li><a href="#!/history">History</a></li>
                        <li><a href="#!/mission">Mission Statement</a></li>
                        <li><a href="#!/solutions">Solutions</a></li>
                        <li><a href="#!/distribution">Distribution Area</a></li>
                        <li><a href="#!/logo">SAS Logo</a></li>
                    </ul>
                </li>
                <li class="li-1"><a href="#!/events"><span class="lbl">Events</span><span class="ico -def"></span><span class="ico -hvr"></span></a>
                <ul>
                        <li><a href="#!/tradeshow">Trade Show</a></li>
                        <li><a href="#!/awesomeachievers">Awesome Achievers</a></li>
                        <li><a href="#!/whatshappening">What's Happening</a></li>
                    </ul></li>
                <li class="li-3"><a href="#!/technology"><span class="lbl">Technology</span><span class="ico -def"></span><span class="ico -hvr"></span></a>
                <ul>
                        <li><a href="#!/nexgen">NexGen</a></li>
                        <li><a href="#!/synergy">Synergy</a></li>
                        <li><a href="#!/edi">EDI</a></li>
                    </ul>
                </li>
                <li class="li-4"><a href="#!/marketing"><span class="lbl">Marketing</span><span class="ico -def"></span><span class="ico -hvr"></span></a></li>
                <li class="li-5"><a href="#!/sales"><span class="lbl">Sales</span><span class="ico -def"></span><span class="ico -hvr"></span></a></li>
                <li class="li-6"><a href="#!/mail"><span class="lbl">Employment</span><span class="ico -def"></span><span class="ico -hvr"></span></a></li>
            </ul>
        </nav>
    </div>
</header>

And here is the CSS: Style.css

ANY help would be greatly appreciated and will get "points" for it, i have been working on this for over a week with no help, but i have decided i should reach out for help.

THANKS!

Was it helpful?

Solution

Not a Javascript solution, but I managed to achieve what you want using CSS; just add 'height: 40%' to your logo image and it should scale with the header (note that you'll probably need to use a higher-quality version of the logo), as the current one gets a bit pixellated when it grows.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top