rbrewer_cssbreaksfunction

Intended to demonstrate how the CSS breaks the sectionPosition() function when you remove the comment marks from #mobileWebBox and #mobileWebBox > img.

by Ryan Brewer

HTML

<link rel="stylesheet" href="http://rbrewer.mydevryportfolio.com/css/main-styles.css">
<body onLoad="scrollAnimation(); linkTip(); scrollLog(); offsetAnimation();">
    <header id="desktopHeader">
        <div id="topSpacer"></div>
        <div id="topbar">
            <div class="topnav-container">
                <nav class="topnav-left">
                    <ul>
                        <li><a href="index.html">HOME</a>
                        </li>
                        <li><a href="index.html#about">ABOUT ME</a>
                        </li>
                        <li><a href="index.html#contact">CONTACT ME</a>
                        </li>
                    </ul>
                </nav>
                <nav class="topnav-right">
                    <ul>
                        <li><a href="webdesign.html">WEB DESIGN</a>
                        </li>
                        <li><a href="gallery/photos.html">PHOTOS</a>
                        </li>
                        <li><a href="graphics.html">GRAPHICS</a>
                        </li>
                    </ul>
                </nav>
                <div class="logo-container"><a href="#"></a>
                </div>
            </div>
            <!--Closes topnav-container-->
        </div>
        <!--Closes topbar-->
    </header>
    <!--Closes desktopHeader-->
    <header class="mobileHeader">
        	<h4>Ryan Michael Brewer</h4>
 <a href="#" class="MenuButtonUp" id="MenuButton" onClick="mobileMenu()">MENU</a>

        <!--<div class="clear"></div>-->
    </header>
    <!--<div class="clear"></div>-->
    <nav class="mobileMenu">
        <img src="images/mobile-Logo1.png" />
        <div class="mobileMenuLinks">	<a href="#">ABOUT ME</a>
 <a href="#">CONTACT ME</a>
 <a href="#webHeader" onClick="sectionPosition(this)">DESIGN</a>
 <a href="#photoHeader" onClick="sectionPosition(this)">PHOTOGRAPHY</a>

        </div>
    </nav>
    <!--<div class="clear"></div>-->
    <div class="mobileContent">
 ...

CSS

/* Styles for Mobile Phones */

/*HTML5 tag designation for older browsers*/
 article, aside, figure, footer, header, nav, section {
    display: block;
}


/*Remove default padding and margins*/
 * {
    margin: 0;
    padding: 0;
}
body {height:1000px; overflow:scroll;}
/*Set General Styles*/
 h1 {
    font-family:'Poller One';
    font-size:200%;
    color:rgba(0, 102, 204, 0.50);
    text-align:center;
}
h2 {
    font-family:'Poller One';
    font-size:125%;
    color:rgba(0, 102, 204, 0.50);
}
h3 {
    font-family:'Open Sans', sans-serif;
    font-size:125%;
    color:#999;
}
h4 {
    font-size:100%;
    font-weight:800;
    color:#999999;
}
body {
    position:relative;
    z-index:0;
    /*overflow:hidden;*/
}
/*Style Header for mobile devices*/
 #desktopHeader {
    display:none;
}
.wrapper {
    display:none;
    /*position:relative; z-index:1; float:left; width:100%; margin:46px 0px 0px 0px;*/
}
.mobileHeader {
    display:inline-block;
    position:fixed;
    top:0px;
    left:0px;
    float:left;
    z-index:1;
    width:100%;
    /*height:40px;*/
    padding:6px 0px;
    background-color: #1c1c1c;
}
.mobileHeader > h4 {
    font-family:'Poller One';
    color:#999999
    /*rgba(0,102,204,0.5)*/
    ;
    line-height:40px;
    float:left;
    margin-left:10px;
}
.MenuButtonUp {
    float:right;
    width: 60px;
    height: 20px;
    margin:7px 6px;
    padding:4px;
    border:none;
    border-radius:5px;
    background:#999999;
    color:#1C1C1C;
    font-family:'Open Sans', sans-serif;
    font-size:85%;
    font-weight:800;
    text-align:center;
    text-decoration:none;
}
.MenuButtonDown {
    -moz-box-shadow:inset 3px 3px 2px #333;
    -webkit-box-shadow:inset 3px 3px 2px #333;
    box-shadow:inset 3px 3px 2px #333;
}
.mobileMenuButton:focus {
    border: none;
}
.mobileMenu {
    position:fixed;
    z-index:2;
    top:52px;
    float:left;
    width:100%;
    border-top:1px solid #333;
    border-bottom:1px solid #333;
    /*margin-top:52px;*/
 ...

JavaScript

$(document).ready(function () {

    $(".mobileMenuLinks").click(function (event) {
        event.preventDefault();
    });

    $(".arrow").css('-webkit-transform', 'rotate(0deg)');


    $(window).scroll(function () {
        $(".mobileMenu").slideUp();
    });

    $('#cubeBox').imagecube();
    $('#stopCube').toggle(function () {
        $(this).text('Start');
        $('#cubeBox').imagecube('stop');
    }, function () {
        $(this).text('Stop');
        $('#cubeBox').imagecube('start');
    });

    $('#removeCube').toggle(function () {
        $(this).text('Re-attach');
        $('#cubeBox').imagecube('destroy');
    },

    function () {
        $(this).text('Remove');
        $('#cubeBox').imagecube();
    });




}); //Closes document ready functions

$(window).on('beforeunload', function () {
    $(window).scrollTop(0);
});

function scrollLog() {
    $(window).scroll(function () {
        var sp = $(window).scrollTop();
        console.log(sp);
    });
}

function linkTip() {
    $(".infoBox a").mouseenter(function () {
        $(this).next("span").css("opacity", "1");
    }).mouseleave(function () {
        $(this).next("span").css("opacity", "0");
    });
}

function contactScroll() {
    var sp = window.pageYOffset;
    location.href = "index.html";
    window.scrollBy(0, 2369);
}

function mobileMenu() {
    $("#MenuButton").click(function (event) {
        event.preventDefault();
    });
    $("#MenuButton").toggleClass("MenuButtonDown");
    $(".mobileMenu").slideToggle(500);
}

function sectionPosition(id){
	var body = $("body");
	var x = $(id).attr("href");
	var HH = $(".mobileHeader").innerHeight();
	var targetOffset = $(x).offset().top - HH;
	if (x == "#photoHeader"){
		$("#mobileWebBox").css("display","none");
		$("#mobilePhotoBox").css("display","block");
		}
	if (x == "#webHeader"){
		$("#mobilePhotoBox").css("display","none");
		$("#mobileWebBox").css("display","block");
		}
	else {}
	       ...