Top Left Text cha

Website Development Services

Include jQuery if it's not already.

This will remove the class when you scroll back up.  Change '100' to whatever you want the scroll value to be.

        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 100) {
                $(".initialStyle").addClass("additionalStyle");
            } else {
                $(".initialStyle").removeClass("additionalStyle");
            }
        });

 Replace 'initialStyle' and 'additionalStyle'.

Here's a full page example:

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
        div {
            height:100px;
        }
        .test {
            background:#0000ff;
        }
        .test2 {
            background:#ff0000;
        }
        .test3 {
            background:#00ff00;
        }
        .testicles {
            background:#000000;
        }
    </style>

    <script>
        $(window).scroll(function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 100) {
                $(".test2").addClass("testicles");
            } else {
                $(".test2").removeClass("testicles");
            }
        });
    </script>
</head>
<body style="height:2000px;margin-top:200px;">

<div class="test" id="test">
    </div>
<div class="test2" id="test2">
</div>
<div class="test3" id="test3">
</div>
<div class="test4" id="test4">
</div>
</body>

 

Comment (0) Hits: 2769
I don't care what I hear about putting jQuery right before the </body> tag.  That DOES NOT WORK.  I've found that it only works if I put it in the <head> section.
Comment (0) Hits: 568
Simple Javascript that will pre-load images on a page... as long as the images aren't dynamic (you know the file names).
        <div class="hidden">
            <script type="text/javascript">
                <!--//--><![CDATA[//><!--
                var images = new Array()
                function preload() {
                    for (i = 0; i < preload.arguments.length; i++) {
                        images[i] = new Image()
                        images[i].src = preload.arguments[i]
                    }
                }
                preload(
                    "http://example.com/images/image1.jpg",
                    "http://example.com/images/image2.jpg",
                    "http://example.com/images/image3.jpg"
                )
                //--><!]]>
            </script>
        </div>

 

And, of course you need to hide the element in your css file:

.hidden {display:none;}

 

Comment (0) Hits: 864
Just a little Javascript will do the trick...
    <script>
        window.onbeforeunload = function(e){
            document.getElementById('idOfElementToChange').className = 'classAddedAfterClick';
        }
    </script>

 Pretty self-explanatory.  Replace idOfElementToChange with the ID of the element that will incur the new class.  And ClassAddedAfterClick is the new class that will be added.  Probably didn't need to say this.

Comment (0) Hits: 991

Simplest of Simple Javascript Lightbox Scripts...

CSS:

 

.black_overlay{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
 
.white_content {
    display: none;
    position: absolute;
    top: 15%;
    left: 50%;
    width: 500px;
    height: 580px;
    padding: 16px;
    border: 16px solid #555;
    background-color: white;
    z-index:1002;
    overflow: auto;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    behavior:url(border-radius.htc);
}

Javascript/HTML:

 

<div id="content" class="white_content">
<button style="float:right" onclick = "document.getElementById('content').style.display='none';document.getElementById('fade').style.display='none'">Close</button>
 
content or image goes here...
 
<button style="margin-bottom:20px;" onclick = "document.getElementById('content').style.display='none';document.getElementById('fade').style.display='none'">Close</button>
</div>
<div id="fade" class="black_overlay"></div>

Link:

 

<a href = "javascript:void(0)" onclick = "document.getElementById('content').style.display='block';document.getElementById('fade').style.display='block'">View Lightbox</a>
 
 
 
Comment (0) Hits: 1036
X