Skip to main content

Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
    Posts
  • in reply to: web app development and such #123021

    simoncmason
    Member

    Docracy is your friend:

    http://www.docracy.com/

    Andy Clarke has written a contract used by a lot of web devs, he recently added an NDA which is also written in plain english. Both of these are on Docracy or you can look here:

    http://stuffandnonsense.co.uk/projects/contract-killer/

    http://stuffandnonsense.co.uk/projects/three-wise-monkeys/

    Good luck with your project

    in reply to: search-form #122840

    simoncmason
    Member

    Are you using jQuery on your site? If so you could simply toggle a class on click:

    // Add a class to the search icon when clicked
    $(‘#viewSearch’).click(function() {
    $(this).toggleClass(“searchOpen”);
    });

    Then hook your animation to this class which you can do by changing the width from 0 to 50% for example and transitioning the change

    Example on CodePen here: http://cdpn.io/bqgta

    in reply to: search-form #122763

    simoncmason
    Member

    Good call on the linear gradient. It won’t work on IE9 and below though.


    simoncmason
    Member

    Re conflicting information, you’ll find a lot of this about. If someone makes a statement such as do or don’t use @import take notice if they explain why, and Google around to see what the consensus is.

    In this case@import is normally considered poor practice because it is a performance hit. If you Google something like @import in CSS you’ll find plenty of discussion around why you shouldn’t use it.

    I tend to find the best advice makes its way to the top, that said practices change over time so beware of received wisdom.

    in reply to: Responsive CSS, best code technique, override css rules? #122724

    simoncmason
    Member

    I work my way up – so similar to your example 1.

    In this way I only need to alter styles which need to alter as the screen size grows.

    I see this as an extension of the cascade so styles flow up the screen sizes until over-written with something more specific – i.e. based on a relevant media query.

    But – if I have a style which I only want for the smallest screen size for example then I will limit it with a max-width query but I never use min-width= & max-width= type queries – I’ve never found I needed them.

    I don’t think any one approach is “better” though – it is up to you which you find easiest to work with.


    simoncmason
    Member

    It helps to love web development ;)

    If so there is nothing better – always something new to learn and discover plus the satisfaction that comes from “light bulb” moments when something that seemed so hard suddenly slots into place.

    But the only way you’ll get there is by spending a lot / all of your time either writing code or reading about it.

    A few things that have helped me on my journey:

    http://www.w3schools.com/
    http://teamtreehouse.com/
    https://learnable.com/
    http://www.codecademy.com/
    http://css-tricks.com/
    http://alistapart.com/
    http://www.smashingmagazine.com/
    http://24ways.org/
    http://handcraftedcss.com/
    http://hardboiledwebdesign.com/
    http://www.abookapart.com/ (Buy all of them)

    And tens of thousands of google searches for solutions to problems – there is a lot of help out there if you’re happy to spend the time finding and making sense of it.

    Also look for Meetups or usergroups near you – it’s great to meet your fellow devs in person and get along to conferences for the same reason.

    Plus you don’t have to be really good at all of it – if you find you love CSS it is OK to get very good at that and just have a working knowledge of javascript or jQuery or php and vice versa. There are very few people (probably no one) who are genuine experts in all the languages you mentioned – but they probably know someone who is …

    Good luck – it’s the best industry to work and play in

    in reply to: search-form #122718

    simoncmason
    Member

    Hi Saifadin,

    This will work (just replace your left and right classes with the below):

    .right{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 50%;
    z-index:-1;
    background: #FFF;
    }

    .left{
    position:fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    background: #000;
    z-index:-1;
    }

    Also – you don’t need to wrap these – just put them at the top of your markup.

    How it works –
    position: fixed fixes the div in place so it won’t move.
    top : 0 pins it to the top
    bottom: 0 pins it to the bottom
    The div will automatically stretch to fill the space if you position it like this – this is quite a useful trick – you can set top, bottom, left and right to 0 and the element in question will fill the screen – handy for overlays etc will work on a positioned element (fixed or absolute)

    left or right: 0 pins it to the left or right
    left or right: 50% takes it halfway across the screen

    background – just giving it a colour

    z-index – this gives it a stack position -1 ensures it is under the content elements which have z-index auto (always a positive integer) unless you set them otherwise

    Bear in mind this background will always be in place – i.e. it won’t scroll.

    Hope that helps

    in reply to: What are you listening to while you code? #115035

    simoncmason
    Member

    Has to be BBC Radio 6 Music – http://www.bbc.co.uk/6music/
    No ads, music from all corners and funny stuff too. Great for work.

    in reply to: Flexible rollover image links #106630

    simoncmason
    Member

    Hi Chris,

    Yep, if it was width only I’d be laughing as all the widths are set in %. But the height won’t scale in line with the width …

    Got to use images for these buttons as they are icons that pertain to the client’s products.

    Can feel a slew of media queries coming on ! Ho hum …

    in reply to: Flexible rollover image links #106626

    simoncmason
    Member

    @paintba11er89

    Thanks but that only deals with the position of the background image in the sprite – and assumes you have some content to give it space on the page.

    My problem is I want to use a background image as the content to create an image based button with a rollover. To do this I’d normally set the width and height of the anchor so it creates some space on the page, something like this:


    a.rollover-image {
    width:30px;
    height:30px;
    display:block;
    background: url ('my30x60image.jpg')
    background-position: 0 0;
    }
    a.rollover-image:hover {
    background-position: 0 30px;
    }

    But how do I make that work with percentages? If I fix the width and height of the buttons it will break the design of the container and I can’t set it in percentage as I don’t know what percentage the height will end up at.

    Hopefully I’m missing something really obvious here and enlightenment awaits!

    in reply to: Animated photo gallery needed #106519

    simoncmason
    Member

    Thanks for your help guys. Much appreciated.

    in reply to: iPhone VS Android #106178

    simoncmason
    Member

    I’m pretty much OS agnostic at this point – what I would say is either get an iPhone or a high end Samsung or HTC Android.

    On that basis the costs are similar, the stability is similar and it really comes down to which design you like and how important the camera is to you (iPhone’s is best).

    Also do you use iTunes a lot – do you want to use your phone as an iPod replacement in which case iPhone wins it – though Double Twist on Android isn’t a bad solution it isn’t as slick as the iPhone.

    in reply to: Changing properties of slider in a wordpress template. #106176

    simoncmason
    Member

    Do you have a link to the live site you are working on – I’ll try and take a look at it later today.

    in reply to: [resolved] Help with Fluid Layout Positioning #106041

    simoncmason
    Member

    So the div within the red border on your picture has a width set in pixels? If so that will stop your site being properly fluid / responsive.

    Really need to see the code to be more help Steph, paste it on to a codepen and throw us a link!

    in reply to: Changing properties of slider in a wordpress template. #105995

    simoncmason
    Member

    Look forward to seeing them, shout if you get stuck.

Viewing 15 posts - 1 through 15 (of 27 total)
icon-link icon-logo-star icon-search icon-star