lsj1987

Hi

Hopefully a more competent user can help me out!

I can generally get my way around html/css so I'm trying to branch into js / jquery. I'm trying to implement a fade out splash screen by following this tutorial:

http://meerkat.jarod...at-splash-page/

However! I'm stuck, I've tried so many things, can't seem to get it to work, anyone help me out and point me in the right direction?

Here's a link to my testing page:

http://www.splashscreen.net76.net

Any help would be great!

Hi,

Basically followed this guide:

The guide

The HTML:

<div id="country-select">
<form action="server-side-script.php">
    <select id="country-options" name="country-options">
      <option selected="selected" title="http://www.websitetemplate.net78.net/index.html" value="us">English</option>
      <option title="http://www.websitetemplate.net78.net/projects.html" value="uk">Welsh</option>
    </select>
    <input value="Select" type="submit" />
  </form>
</div><!--end of country-select-->

The CSS:

* { margin: 0; padding: 0; }

body {
	background: #ccc;
	}

header {
	display: block;
	background: #777;
	height: 50px;
	position: relative;
	min-width: 600px;
	}
	
	header h1 {
		font: bold 24px Arial, Helvetica, sans-serif;
		color: #fff;
		position: absolute;
		left: 20px;
		top: 8px;
		}

#country-select {
	position: absolute;
	top: 13px;
	right: 20px;
	width: 180px;
	}

/* rought form styles for when JS is disabled */

#country-select form {
	width: 240px;
	padding: 0;
	}

#country-select select,
#country-select input {
	display: inline;
	padding: 0;
	margin: 0;
	}
	
/* JS-created definition list */

.dropdown dd { position: relative; }

.dropdown a {
	text-decoration: none;
	outline: 0;
	font: 12px Tahoma, Geneva, sans-serif;
	display: block;
	width: 130px;
	overflow: hidden;
	}

.dropdown dt a {
	background: #c45618;
	border: 1px solid #964315;
	padding: 3px 10px 4px 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #fff;
	}

	.dropdown dt a.active {
		background: #db5e18;
		-webkit-border-bottom-left-radius: 0;
		-webkit-border-bottom-right-radius: 0;
		-moz-border-radius-bottomleft: 0;
		-moz-border-radius-bottomright: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom: 1px dotted #676768;
		-moz-box-shadow: 0 3px 7px rgba(0,0,0,.5);
		-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.5);
		box-shadow: 0 3px 7px rgba(0,0,0,.5);
		color: #fff;
		}

.dropdown dd ul {
	background: #814f33;
	border: 1px solid #676768;
	color: #C5C0B0;
	display: none;
	position: absolute;
	z-index: 999;
	top: 0;
	left: 0;
	padding: 2px 0 5px 0;
	list-style: none;
	border-top: none;
	margin: 0;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-moz-box-shadow: 0 3px 7px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 3px 7px rgba(0,0,0,.5);
	box-shadow: 0 3px 7px rgba(0,0,0,.5);
	}

	.dropdown dd ul li a {
		padding: 2px 10px;
		}

	.dropdown dd ul li a span,
	.dropdown dt a span {
		float: left;
		width: 16px;
		height: 11px;
		margin: 2px 6px 0 0;
		background-image: url(flags.png);
		background-repeat: no-repeat;
		cursor: pointer;
		}

		.us a span { background-position: 0 0 }
		.uk a span { background-position: -16px 0 }
		.fr a span { background-position: -32px 0 }
		.de a span { background-position: -48px 0 }
		.nl a span { background-position: -64px 0 }

	.dropdown dd ul li a em,
	.dropdown dt a em {
		font-style: normal;
		float: left;
		width: 100px;
		cursor: pointer;
		}

	.dropdown dd ul li a em {
		color: #dbc3b5;
		}

		.dropdown dd ul li a:hover { background-color: rgba(255,255,255,.1); }
		.dropdown dd ul li a:hover em { color: #fff; }

The JS:

$(document).ready(function() {

	// --- language dropdown --- //

	// turn select into dl
	createDropDown();
	
	var $dropTrigger = $(".dropdown dt a");
	var $languageList = $(".dropdown dd ul");
	
	// open and close list when button is clicked
	$dropTrigger.toggle(function() {
		$languageList.slideDown(200);
		$dropTrigger.addClass("active");
	}, function() {
		$languageList.slideUp(200);
		$(this).removeAttr("class");
	});

	// close list when anywhere else on the screen is clicked
	$(document).bind('click', function(e) {
		var $clicked = $(e.target);
		if (! $clicked.parents().hasClass("dropdown"))
			$languageList.slideUp(200);
			$dropTrigger.removeAttr("class");
	});

	// when a language is clicked, make the selection and then hide the list
	$(".dropdown dd ul li a").click(function() {
		var clickedValue = $(this).parent().attr("class");
		var clickedTitle = $(this).find("em").html();
		$("#target dt").removeClass().addClass(clickedValue);
		$("#target dt em").html(clickedTitle);
		$languageList.hide();
		$dropTrigger.removeAttr("class");
	});
});

	// actual function to transform select to definition list
	function createDropDown(){
		var $form = $("div#country-select form");
		$form.hide();
		var source = $("#country-options");
		source.removeAttr("autocomplete");
		var selected = source.find("option:selected");
		var options = $("option", source);
		$("#country-select").append('<dl id="target" class="dropdown"></dl>')
		$("#target").append('<dt class="' + selected.val() + '"><a href="#"><span class="flag"></span><em>' + selected.text() + '</em></a></dt>')
		$("#target").append('<dd><ul></ul></dd>')
		options.each(function(){
			$("#target dd ul").append('<li class="' + $(this).val() + '"><a href="' + $(this).attr("title") + '"><span class="flag"></span><em>' + $(this).text() + '</em></a></li>');
			});
	}

Bascially, I have the drop-down list and button but can't add the links to the drop-down options so when you click 'select' it will take you to the correct page, but I can't figure out how to make it work...I think I've got to add to the last part of the JS but don't know how...

Hi,

Hoping I could get some advice.

I want to add an initial page which a user would land on, i.e. a page which asks the user which language they wish to view the website.

What’s the best way to do this, I've done some research, and found a few websites which name this page, 'index.html', and then their actual homepage, 'home.html'. Is this the best way?

Thanks

EDIT: Using Dreamweaver

heres a link:

My link

I want to constrain the 'arrow' from bouncing too much, if you hoover over 'contact' and move out, you notice the 'arrow' bounces out of the nav-bar...

How can I constrain it so it keeps the bounce between, say, 'Home' and 'Approach'?

Thanks guys and gals!

Hi,

Basically, I have put a sidebar which slides with the content of a web page following:

http://css-tricks.co...follow-sidebar/

Worked good, but an issue I had was that as the sidebar is quite long (contains facebook like box) when it reached the bottom of the page it destroyed my footer layout...so I added this amended jquery:

http://stackoverflow...-follow-sidebar

It doesn't destroy my footer, but the sidebar basically comes down, say 600px, more than the left content (due to the length of the sidebar i quess) shown on the attachment...

$(function() {

    var $sidebar   = $("#scroll-menu"),
        $window    = $(window),
        $footer    = $("#footer"), // use your footer ID here
        offset     = $sidebar.offset(),
        foffset    = $footer.offset(),
        threshold  = foffset.top - $sidebar.height(); // may need to tweak
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > threshold) {
            $sidebar.stop().animate({
                marginTop: threshold
            });
        } else if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });

});

I'm assuming I need to add something here:

threshold  = foffset.top - $sidebar.height(); // may need to tweak

Any help would be great!