Jump to content


  • Content count

  • Joined

  • Last visited

About lsj1987

  • Rank
    Forum Newcomer

Users Experience

  • Experience
  • Area of Expertise
    I'm Learning

Contact Methods

  • Website URL

Profile Information

  • Gender
  • Location
  1. Splash Screen

    I've added in 'jquery.easing.1.3'. Not sure what I'm doing wrong?
  2. Splash Screen

    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.jarodtaylor.com/how-to/meerkat-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!
  3. 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...
  4. Initial Website Landing Page

    Okay, get it, thanks for the help, I'll crack on! Good translation as well! Hi from Cardiff! Only down the road, haha!
  5. Initial Website Landing Page

    Thanks for the response. I am re-designing a website for a friend, and his currently has the landing page setup. Yes a language switcher would be a better idea, thanks. So to do this, I would have two versions of the site, and provide a button which switches to the welsh site or vise versa?
  6. Initial Website Landing Page

    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
  7. bouncing nav-bar

    NEW ISSUE: I've noticed that when viewing this nav-bar Click Here in IE, it leaves a trail when going between the links, it's noticable on the link provided going between 'Home' and 'Services' (leaves a trail when you hoover over 'services' then wipes it out when it returns to 'home'), and when the arrow starts in the middle of the nav-bar, it leaves a trail through most of the links... Could anyone help make this disappear!?
  8. bouncing nav-bar

    Spot on, thank you!
  9. bouncing nav-bar

    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!
  10. nivo slider - iphones/blackberrys

    Yer same here, Nivo Slider works fine on my iphone 4 as well. EDIT: on my website, would check yours but can't find it atm.
  11. Hi, Basically, I have put a sidebar which slides with the content of a web page following: http://css-tricks.com/scrollfollow-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.com/questions/4716795/help-with-scroll-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!
  12. Close button on a DIV

    Hi, I was looking to position a news box which sits on the bottom right of the screen. I was wondering if I could add a close button ('x') on the top right which when clicked would make the entire DIV disappear or shrink even? Thanks
  13. My Website

    Just an update... Made changes to 'fairer system' box on the homepage Changed 'our community' to 'forum' Added a 1px border around the website Added a drop shadow around the website Snow gone...for another year atleast I have been messing around with various different logo styles, haven't yet got one which I'm happy with Thanks for the input so far, I think the website looks better so far.
  14. My Website

    Thanks for the comments, much appreciated. I was going to mention the forum link but thought it wasn't really design related, it was initially called 'forum', but was thinking 'community' but then changed to 'our community'. Thanks for bring it up, I will change it to 'forum' for the reasons you said. Hopefully the website will help people out when it gets more searchable. Thanks for your input.
  15. My Website

    Thanks! I thought so as well, although there are a lot of websites which help tenants, you have to go between them, so thought I would make this. It would be good to get an active forum, as I have often had to go to landlord forums if I get an issue. Although the people searching this type of thing is generally low, if I help 1 person out it would be worth it.