We're growing into something new. Read More

prisca schmarsow  Pro


bottom panel reveal going wrong on small screens ~ JS help please!

Hello fello Forrsters ;) I'm writing this post to to ask your help with an issue one of my lovely webdesign students is having with her portfolio site. It is a small 3 page website which features the contact form at the very bottom of each page. The form is to remain hidden on most screensizes and on click - will slide up, revealing the from. THE SITE: badkingdesigns.co.uk THE PROBLEM: We managed to get this bottom panel to work as intended ~ though I am not sure if this is the more elegant solution as I'm not exactly a JS expert - but it works :) for most screensizes. When resizing the window down to a small size (below 460px is the values we're working with for now) - or when viewing the site on mobile - the form does not behave as planned. On page load - it remains visible but only showing half the form and overlaps the content. The click function however works just fine to reveal - but on hide it shows the panel the same as on page load.... :( We tried solving this problem, also tried to keep the form to remain visible and bottom-aligned for the smallest screensize ~ but to no avail.... :( I don't know whether we have approached this in the right way at all, or completely in the wrong way - but it works ok apart from nothing within the else if kicking in at all ~ must be a JS problem which we have been unable to solve. Any thoughts, tips or pointers would be hugely appreciated :) SCREENSHOTS: narrow window on page load / after hiding form narrow window after click function to show form THE CODE: <script> $(function() { $("#form").validate({meta: "validate"}); }); // footer contact form $(function() { // set initial position of contact form if ( $(window).width() < 770) { $("#wrap").css('padding-bottom', '200px'); $("footer").css({"position":"absolute", "bottom": -310 + "px"}); } else if ($(window).width() < 460) { $("footer").css({"position":"absolute", "bottom": 0 + "px"}); $("#wrap").css('padding-bottom', '660px'); } else { $("#wrap").css('padding-bottom', '200px'); $("footer").css({"position":"absolute", "bottom": -310 + "px"}); } // click function to show/hide form var open = false; $('footer h5').click(function() { if ( $(window).width() < 770) { if(open === false) { $("footer").css({"position":"absolute", "bottom": 0 + "px"}); $("#wrap").css('padding-bottom', '600px'); open = true; $("html, body").animate({ scrollTop: $(document).height() }, 1000); } else { $("footer").css({"position":"absolute", "bottom": -310 + "px"}); $("#wrap").css('padding-bottom', '200px'); open = false; $("html, body").animate({ scrollTop: $(document).height() }, 1000); } } else { if(open === false) { $("footer").css({"position":"absolute", "bottom": 0 + "px"}); $("#wrap").css('padding-bottom', '460px'); open = true; $("html, body").animate({ scrollTop: $(document).height() }, 1000); } else { $("footer").css({"position":"absolute", "bottom": -310 + "px"}); $("#wrap").css('padding-bottom', '200px'); open = false; $("html, body").animate({ scrollTop: $(document).height() }, 1000); } } }); }); </script> Raw Code » PS: Nicole has also requested an invite to Forrst and will hopefully join us soon :)


help! stuck with jQuery(I think)! show/hide() changing block level element's width/behaviour?

Hi ;) I'm really stuck with this one and have no idea how to solve this, I use jQuery ~ usually without too many problems. But as I don't write JS I do get stuck :( ok - the problem: I have a website for my webdesign course which shows the main nav in the left column. For the smallest screens (ie below 420px width) - I want to hide the menu, displaying a 'view menu' link instead which uses the jQuery toggle() function to show / hide the menu on demand. Initially, I did this via a straight forward toggle alone - all fine - apart from the issue that the menu would remain hidden once it was shown and hidden once on a small screen. If the window is resized - it would remain hidden. That was the problem I set out to solve, mentioning it here as I might be going down the wrong path entirely here ~ doubting whether I'm doing this in the right way :'( Now - I am using JS to hide the 'view menu' link for all screens, only showing on screens smaller than 420px. I've added the resize() function as well to allow more dynamic behaviour. Everything is working as intended for the showing and hiding of my menu - BUT.... The toggle link itself is set to display:block - when the window loads below 420px, it displays as intended: set to block (spanning full width for a nicely solid active link) with the text centred. However, when I load the page at larger window size, then resize to below 420px width - the toggle link seems to become inline? Not at full width any longer, text appears to be left aligned as the element no longer is full width...?! I've tried setting width in CSS, tried resetting with via resize() element, via assigning 100% width via JS....nothing is working - I'm sure I'm missing something.... I'd really appreciate any pointers or thoughts ~ feel like I'm missing something very basic here.... here's my JS code, following the link to jQuery: // check for window size size on page load and show relevant content only $(function() { if ($(window).width() > 420) { $('#toggle-nav').hide(); $('nav ul').show(); } else { $('#toggle-nav').show(); $('nav ul').hide(); } }); // check for window resize - show nav again for larger screens after hiding $(window).resize(function() { if ($(window).width() > 420) { $('#toggle-nav').hide(); $('nav ul').show(); } else { $('#toggle-nav').show(); $("#toggle-nav").resize(); $('nav ul').hide(); } }); // show menu (smallest screens) $('nav #toggle-nav').click(function() { $('nav ul').slideToggle('slow', function() { // Animation complete. }); $('ul').addClass('view'); }); Raw Code »


all the best for 2012

just a quick message to wish you, my fellow forrsters, happy holidays and an inspiring & creative new year ;) ✒ all the best for 2012 (best viewed in Safari or Chrome) all the best!


ZHDK collection ~ inspiration treasure trove

Just have to share this for those of design lovers amongst you ~ came across this inspiring collection via this tweet from the @ standardistas Working on our #drupalcon keynote slides and we fell down the rabbit hole that is this wonderful collection: j.mp/… It's a collection of amazing size and quality of work from designer past and present ~ a directory of inspiration. It's been put together by the Zürcher Hochschule der Künste (Zurich University of the Arts) and is in German ~ but I urge you to simply explore regardless. Try searching for a designer's name on the main page ~ or have a look at this page as an example: Auswahl Medium: Lithografie (1779), collection of Lithography Thanks to the standardistas for this gem :)



Beautiful presentation about keeping high contrast between colours for text and background: CONTRAST REBELLION Low-contrast fonts and unreadable texts? To hell with them!

background-image: url();
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

CSS3: background-size: cover; for FireFox

Just thought this might be useful for everyone ;) If you are using the CSS3 background-size: cover; for scaling the background image - Firefox (v4) will not implement this as intended if you use shorthand. If you use the background-image however, it will work just fine. credit: after struggling with this issue for ages, with no solution in sight - it is thanks to a tweet from Jon Hicks that I solved this in seconds :) The tweet: Ah! So it seems that for background-size:cover to work in Firefox you can't use it in combination with background shorthand