Making Diagonal Toggle Header Responsive to Smaller Screen

Page 1 of 1

3 Replies - 315 Views - Last Post: 24 August 2012 - 03:34 PM

#1 goatsy  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 20
  • Joined: 19-August 12

Making Diagonal Toggle Header Responsive to Smaller Screen

Posted 24 August 2012 - 12:44 PM

I'm working on a header that drops down when clicking toggle link, but since the header has a "diagonal line" (top right-bottom left), it looks fine on wide screens, but when I minimize (let's say to the size of a phone), it disappears! Do you guys have any suggestions for an alternative to the way I'm doing this? Or something I can do to keep the header looking the same on all screens? Also, after toggling the header, it drops down and the gray background disappears on the top. I want the background to stretch to the top to give a "diagonal page down" effect. I've been scouring the internet, but can't seem to find any sort of "page behind a page.. click to reveal/toggle to reveal hidden page" type script.

Here is the site inaction:
http://sunfrieddesign.com/toggle.html


And here is the code I'm working with:

<html>
<head>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js'></script>
<script type="text/javascript">
//<![CDATA[ 
$(window).load(function(){
    $('.toggle').click(function(){
        if($("#header").css("top") == "360px") {
          $("#header").animate({top: "0px"}, 1000);
        } else {
          $("#header").animate({top: "360px"}, 1000);
        }
        return false;
    });
});//]]>  

</script>
<style type="text/css">
body {background: #fff;}

#header {
    position: fixed;  /*I would like this div to always be fixed to the top of the browser window*/
    top: 0px;
    left: 0;
    width: 100%;
    height: 355px;
    z-index: 10;
    background: #ccc;
}​

</style>
</head>
<body>
<div id="header">
    <img src="slash2.png" width="100%" style="margin-top:-440px;">
    <br>
    
    <a href="#header" class="toggle">
<p>&nbsp;</p>
Click me to reveal the top half of this div</a>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
</div>​
</body>


:helpsmilie:

oh wow, duh.. just answered my own question:

I needed to make the width 1700px or any number, but not 100%.

I still don't know how to get the background to stretch to top when revealing page, though... :dontgetit:

and I don't know why those little characters are popping up upon page reveal... I've seen that happen before... don't remember how I fixed it... (sorry for multiple posts)

Aaaand I just solved my own question again.... geez i'm sorry. How do i delete this post? I'm new :\ haha. :dontgetit: I need to spend a little more time before jumping to conclusions >_<

Is This A Good Question/Topic? 0
  • +

Replies To: Making Diagonal Toggle Header Responsive to Smaller Screen

#2 goatsy  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 20
  • Joined: 19-August 12

Re: Making Diagonal Toggle Header Responsive to Smaller Screen

Posted 24 August 2012 - 01:32 PM

:stupid:

Ok, NOW i have a legit question! :)

I set the content area, where the link to toggle header is, as having a background of (white #fff), but it is not showing up as white. I think it's because it's inside the header div, which has "none" for background. Is there a way to make the "#content" of the header have a white background, while still being in the #header div?

<html>
<head>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js'></script>
<script type="text/javascript">
//<![CDATA[ 
$(window).load(function(){
    $('.toggle').click(function(){
        if($("#header").css("top") == "360px") {
          $("#header").animate({top: "0px"}, 1000);
        } else {
          $("#header").animate({top: "360px"}, 1000);
        }
        return false;
    });
});//]]>  

</script>
<style type="text/css">
body {background: #e4ff00}

#header {
    position: fixed;  /*I would like this div to always be fixed to the top of the browser window*/
    top: 0px;
    left: 0;
    width: 1920px;
    height: 705px; margin-top:-540px;
    z-index: 10;
    background: none;
}​
#content
{
width:880px;
height:auto;
background-color:#2E2E2E;
padding-left:10px;
padding-right:10px;
padding-bottom:5px;
}
</style>
</head>
<body>
<span>heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey </span>

<div id="header">


    <img src="slash.png" width="100%">
    <br>
 <div id="content">  
    <a href="#header" class="toggle">
<p>&nbsp;</p>
Click me to reveal the top half of this div</a>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div>
</div>​
</body>

This post has been edited by goatsy: 24 August 2012 - 01:33 PM

Was This Post Helpful? 0
  • +
  • -

#3 BenignDesign  Icon User is offline

  • I cause cancer.
  • member icon




Reputation: 4652
  • View blog
  • Posts: 8,874
  • Joined: 28-September 07

Re: Making Diagonal Toggle Header Responsive to Smaller Screen

Posted 24 August 2012 - 03:06 PM

I'm not seeing where your background is set to white. I see none, #E4FF00, and #2E2E2E.
Was This Post Helpful? 0
  • +
  • -

#4 goatsy  Icon User is offline

  • New D.I.C Head

Reputation: 4
  • View blog
  • Posts: 20
  • Joined: 19-August 12

Re: Making Diagonal Toggle Header Responsive to Smaller Screen

Posted 24 August 2012 - 03:34 PM

View PostBenignDesign, on 24 August 2012 - 03:06 PM, said:

I'm not seeing where your background is set to white. I see none, #E4FF00, and #2E2E2E.


Hey thanks. I fixed it already.. sorry bout all that! I wanted the background to be "none" so the content behind the header would be revealed upon click. But I've been working at it and yeah.. this is the new code.. works fine for me:

<html>
<head>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js'></script>
<script type="text/javascript">
//<![CDATA[ 
$(window).load(function(){
    $('.toggle').click(function(){
        if($("#header").css("top") == "460px") {
          $("#header").animate({top: "0px"}, 1000);
        } else {
          $("#header").animate({top: "460px"}, 1000);
        }
        return false;
    });
});//]]>  

</script>
<style type="text/css">
body {background: #e4ff00}

#header {
    position: fixed;  /*I would like this div to always be fixed to the top of the browser window*/
    top: 0px;
    left: 0;
    width: 1920px;
    height: 805px; margin-top:-494px;
    z-index: 10;
    background: none;
}​

</style>
</head>
<body>
<img src="logo.png">
<div style="padding-top:100px;padding-left:200px;padding-right:1000px;"><span>heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey </span></div>

<div id="header">


    <img src="slash.png" width="100%">
   
<span style="display:block;background-color:#fff; height:2000px;">

    <a href="#header" class="toggle">
<br>
Click me to reveal the top half of this div</a>

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey heyheyheyheyheyhey 
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

</span>



</div>
</div>​
</body>



:bananaman:

This post has been edited by goatsy: 24 August 2012 - 03:36 PM

Was This Post Helpful? 1
  • +
  • -
Page 1 of 1