Killer

Hi, I have this piece of JS which displays photos based on flickr tags. It all works fine but I somehow need to add an if statement wherein if there are no results for the API search a simple 'No photos found' paragraph is shown instead. I've no idea where I would add it in though, so if someone can give some pointers? The script: $(function() { var apiKey = 'REMOVED'; var tag = flickr_tag; var perPage = '25'; var showOnPage = '25'; var page = '1'; $.getJSON('https://api.flickr.com/services/rest/?format=json&method='+ 'flickr.photos.search&api_key=' + apiKey + '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?', function(data){ var classShown = 'class="fancybox" data-fancybox-group="thumbs"'; var classHidden = 'class="fancybox hidden"'; $.each(data.photos.photo, function(i, rPhoto){ var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret; var thumbPhotoURL = basePhotoURL + '_s.jpg'; var mediumPhotoURL = basePhotoURL + '.jpg'; var photoStringStart = '<a '; var photoStringEnd = 'title="' + rPhoto.title + '" href="'+ mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' + rPhoto.title + '"/></a>;' var photoString = (i < showOnPage) ? photoStringStart + classShown + photoStringEnd : photoStringStart + classHidden + photoStringEnd; $(photoString).appendTo("#flickr"); }); $("a.fancybox").fancybox(); }); });

Hi guys, rather than explain in detail what I'm attempting to do it's easier just to show another site doing something very similar: http://downloads.linkinpark.com/store/container.aspx?year=2011 If you click on a show with photos listed note they're displayed from Flickr via tags. Wanting to do something similar I acquired an API key for Flickr and did some searching around for help to get it working, as API usage in general is pretty new to me. I found this simple way to use it to display the photos based on tags: <script src="http://api.flickr.com/services/rest/?format=json&method=flickr.photos.search&tags=exampletag1000&tag_mode=all&sort=date-taken-desc&api_key=[REMOVED]"></script> With the jquery function of this: function jsonFlickrApi(rsp) { if (rsp.stat != "ok"){ // If this executes, something broke! return; } //variable "s" is going to contain //all the markup that is generated by the loop below var s = ""; //this loop runs through every item and creates HTML that will display nicely on your page //this example displays 10 photos because because variable i is set to 20 //you can change that number depending on how many photos you want to show //to show all the photos, replace that number with rsp.photos.photo.length for (var i=0; i < 20; i++) { photo = rsp.photos.photo[i]; //notice that "s.jpg" is where you change the size of the image t_url = 'http://farm'+ photo.farm +'.static.flickr.com/'+ photo.server +'/'+ photo.id +'_'+ photo.secret +'_s.jpg'; p_url = 'http://www.flickr.com/photos/'+ photo.owner +'/'+ photo.id; s += '<li><a href="'+ p_url +'" title="'+ photo.title +'"><img alt="'+ photo.title +'" src="'+ t_url +'" /></a></li>'; } //this tells the JavaScript to write everything in variable s onto the page document.writeln("<ul>"+s+"</ul>"); } Which I found here - http://viget.com/inspire/using-the-flickr-api That was pretty old so I didn't know if it was still relevent but it seems to be, it's working in my test. There are issues however. Firstly it seems the javascript has to be placed in the page where I want the photos to appear, rather than placing it at the end as recommended and just using HTML in the place where they load. The second, larger issue is that my site like the example will be running on a database, there is one show.php file and each show has it's own ID. If I were to place the above into the show page then obviously for every show ID the same photos would be displayed on each one, based on the tags I'm searching for on flickr. So what I need is a way to change that tag somehow based on the ID of the show. I just did an example in the above but the real tags would be something like #FFLIVE2014-09-03, #FFLIVE2014-09-04 and so on. I can generate those tags within my page quite easily with PHP - <?php echo '#FFLIVE' . date('Y-m-d',strtotime($drShowInfo['show_date'])) ?> However I'm not sure that'd be much use with the above setup would it, since the tag is inside the script? So somehow I need to build that unique tag into the script so the unique photos for each show is displayed. Is that possible or am I way out of my depth here and better getting paid help?

Thanks, I'll try that out shortly.

Hey guys, I'm currently in the final processes of completely redesigning and rebuilding a fairly big website. One of those last things I need to do are redirects but I could do with a little help.The main changes are moving one section from static pages to a database design. This is the current site and section - http://www.foofighterslive.com/liveguide/ As you can see it's all static with an index page for each year and a single, static page for each show, all with a unique URL. The new, database driven site will be like this: www.foofighterslive.com/liveguide www.foofighterslive.com/liveguide/year.php?year=1996 www.foofighterslive.com/liveguide/show.php?show=152 Since having them all redirect to the right show ID would surely be impossible what I'd ideally like to do is a have a redirect so ANY page that is currently a subpage of a year just redirects to the new year index, ie: www.foofighterslive.com/liveguide/1995/1995-02-23.php www.foofighterslive.com/liveguide/1995/1995-04-27.php Would both redirect to www.foofighterslive.com/liveguide/year.php?year=1995 And www.foofighterslive.com/liveguide/2002/2002-02-07.php Would redirect to www.foofighterslive.com/liveguide/year.php?year=2002 The year pages would also be slightly different, so www.foofighterslive.com/liveguide/?id=1995 > www.foofighterslive.com/liveguide/year.php?year=1995 The same for each year. Is that possible and if so how would I go about it? Thanks

Hi, Rather than have a full website for critique on both design and coding I'm looking for a 'review' of my coding. I know what I'm doing when it comes to coding things up and getting a good looking result but having self taught myself I always wonder if i'm either a) over-engineering things or straight up using the 'wrong' elements. So here is what I'd like you to take a look at - http://simonkilmore.co.uk/boxtest/ On the left is the coded version, on the right is the original jpg from Photoshop. So i'm not too concerned on it being pixel perfect the original, I'm happy with how it looks now but I want to know how my code is looking. I don't expect anyone to re-code it themselves but what I want to know is if you were given the task of coding up that box, how would you approach it and how is my approach? Too many divs? Would there have been a quicker way to achieve some of it? Some of the things I did felt a little 'hacky' and I struggled centering the link at the bottom for some reason. This is obviously only part of a larger website design but I thought it would be a good section with a lot going on to gauge how my coding is. Cheers Simon

Thanks for the replies guys. My first instinct was to continue as I was doing, making everything myself but while reading up on responsive grids and frameworks there was so much raving about how streamlined and easy it makes things so curiosity made me want to try it. I'll have a look at Skeleton, think I've looked before and if I still don't get on with that I'll go back to DIY. As a slight tangent then, is there something out there which isn't a grid or a framework but basically a vanilla HTML5 setup for a responsive site, just the head ready done and a bit of the CSS, reset stuff and any other starters. I always seem to end up just copying and pasting my last project and removing the content to start something new but I'd like to find something better as a super basic base.

So there are two things I've never really done before. 1. Design & Build a responsive site 2. Build a site using a grid/framework of some sort I know this question is very much opinion and there is no right answer but for someone with the above in mind, which would you guys suggest? I've always just designed my sites in photoshop how I like then built it how I like, without grids or anything like that. I've also now started working on responsive design and I've got the general idea of most of it but a lot of the ideas seem to revolve around grids or similar frameworks, which I've never used. So if I want to start out with grids and also work on responsive sites which would you suggest I start with? Obviously I've looked at a few different options and some I like, some seem restrictive on designing around the grid rather than the other way around. I don't want something huge and complicated like bootstrap but what do you guys use, or what did you use before you moved on to something like that? Ideally it'll be something with both PSD & HTML/CSS options and lightweight, some of the ones I looked at had 50kb of CSS before I'd even done anything. Thanks!

Perfect, thank you. Actually there is one issue I hadn't consindered. The output text of the form is designed to be copied by the user and obviously with an OL the numbers aren't copied when you copy into a plain text editor. How could I get around that? I need the numbers to be copied as well somehow.

Hey guys, Basically as the title. If I have a web form where someone can enter a list of items in a textarea, eg: Bread Cheese Wine Figs Is there a way I can in my php make the output of that list a numbered list? 1. Bread 2. Cheese 3. Wine 4. Figs I'm outputting the complete form data on the same page in plaintext and this is basically to save the user having to type the numbers themselves. Is it possible?

Rather than write it out again here is my currently unanswered problem on stackexchange: http://stackoverflow.com/questions/15848690/how-to-replace-only-first-instance-of-text-in-notepad-in-multiple-files If anyone here can help with the problem I'd really appreciate it, thanks.

Interesting website in general, thanks. One Idea I did just think of is a virtual display case of sorts, so it'd be like a bookcase I guess, but with all my items on them instead. A user could zoom in and look at the "spines" or click them and it'd open out with larger pictures and information. I wonder if something similar already exists? Otherwise I'd have to have a go at doing it myself from scratch. EDIT: Ah this experimental page from google is very interesting - http://workshop.chromeexperiments.com/bookcase/

I have a pretty large record collection (Vinyl, CD, Tapes, VHS, cassettes etc) and I was trying to think of an interesting/flashy way to show them on a website. At the moment I just take a picture of the whole collection or parts of it and upload a static image with a caption, pretty basic and boring. So has anyone got some ideas of a nicer way to display all of my items, something with jQuery animations and transitions I guess. I'm not really creative on this sort of thing so I've not really got any ideas. Obviously some sort of mage slider comes to mind but that's really common these days, any other ideas or examples, specific to this application?

Couldn't think of a better title but it's basically what I'm asking. I run a few websites which detail the live gig history of rock bands and I'm redesigning/rebuilding one from scratch at the moment. Usually for a site of this nature I'd create a table with all of the shows listed on one page and then a user would click the one they want and it would open a new page, either static or dynamically generated from a database, with all the details. That means each show has it's own individual page with a title, keywords etc making it appear in searchs for that specific show. As I was re-designing this site I thought it'd be nice to have an index listing of the shows but rather than in a table that clicks through to a new page I thought about designing the listing a bit more and using the jQuery accordian function or similar to allow people to just expand the details on the show they want, all on the same page. This is nice visually but I'm thinking it's going to have a detrimental effect on SEO, all of the show data will be on one page with one title, one set of keywords etc and someone looking for one of the shows isn't going to get a specific result on google. So am I going too much into form over function on this and should I just forget about that approach and go back to one page for each show or is there a way to use this approach and still get good SEO results on the hidden content throughout the page?

Well after remembering IE also has developer tools in it I've activated that and noticed the problem, the page/forum is running in IE9 Browser Mode but Document Mode is IE7 Standards. If I manually change it to IE9 standards everything displays as expected, rounded corners as well. So I need to change the document mode to IE9 somehow although that still means I need to fix the layout for IE7 users.

I'm building a header section for a vBulletin forum I run, unfortunately they're still on vB 3.x and since I have no control over updating that's what I have to work with. So I designed a pretty simple header section, nothing particularly complicated. This is how it displays in IE9 as a plain HTML page and CSS: I've pasted the code onto that image, the CSS is as follows: html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { background: #c6c6c6; font: 12px Tahoma; } #head { background: url(images/headbg.jpg) repeat-x; height: 118px; width: 100%; } #headcontent { width: 980px; margin: 0 auto; padding: 0 10px; height: 85px; } #login { background: #535353; width: 402px; height: 20px; float: right; border: 1px solid #6f6d6d; border-radius: 0 0 5px 5px; padding: 9px; } #register { background: #535353; width: 82px; height: 22px; border: 1px solid #6f6d6d; float: right; border-radius: 0 0 5px 5px; padding: 9px; margin-left: 10px; } ul.nav { clear: both; color: #F5F5F5; height: 32px; float: left; } ul.nav li { display: inline; line-height: 32px; list-style-type: none; margin: 0px; padding-right: 55px; } ul.nav li a { color: #F5F5F5; text-decoration: none; } ul.nav li a:hover { text-decoration: underline; } #search { float: right; width: 215px; height: 30px; line-height: 32px; } .clear { clear:both; } So then I transfer that HTML and CSS into the vB templates. In Chrome and Firefox it displays basically the same except some issues with the search placement but that's because I haven't started styling the rest of the forum yet. However in IE9, with the same above code in the header template I get this: The two areas I'm going to place login and register sections have moved to the bottom right of the DIV and the CSS3 rounded corners property is no longer working. It even has a strange quirk where if I don't specify a background colour or image for the #headcontent DIV then when hovering on that entire div area the cursor changes to the text one (cursor:text) rather than the arrow as it should be. If I set a colour that corrects it. I've played around with it a lot the last two hours but I can't figure out why a) those sections are moving in IE9 inside vB and why the CSS3 properties are no longer working inside vB3. Obviously the rest after it is a mess which I've blurred but that's because none of it it styled yet. Since the HTML output of vB is pretty large I've attached that as a file below. This isn't my website/forum but I'm working offline in XAMPP and it has the same issue regarding the CSS3 so easier just to show you this: http://www.gtplanet.net Visit that website on IE9 and note that on the Wordpress news page, everything has CSS3 rounded corners. Now go to the forum, also powered by vB3. Rounded corners don't work. Try it on Firefox or Chrome, they show across the website and forum as expected. So, what could be inside the guts of vBulletin 3 causing this? It's really got me baffled. As I say the output HTML of the vB index is attached. vbhtmloutput.html

I tried everything. The usual relative links to the fonts in the folder they were, then I tried it with absolute links, still no dice. Using firebug it just seems the @font-face statement is not being recognised for some reason. Never had any problems like this in normal html pages or even in wordpress. Just vBulletin doesn't want to seem to play ball.

I don't know if this is really the right place to post this so feel free to move. I've got a website design with a basic nav header which is coded in CSS and uses @font-face to display League Gothic text. No problem there. I've then got a vBulletin forum which I want the header to be on top of. Now I've no problem getting the header integrated in general, just add the relevent additional CSS styles and add the HTML to the header section. It all displays exactly the same as my static pages except one thing, I cannot for the life of me get the @font-face font to display. I've tried just copying and pasting what works on static pages, I've tried setting a relative URL to the font files, I've tried everything I can think of but still nothing, no @font-face fonts will display in vBulletin. So, has anyone had success at getting @font-face to work within a vBulletin style, particularly the header? A simple example of what to put where would be much appreciated. Thanks

Sorry I probably wasn't clear enough, I do tend to have a habit of rambling without being very clear. Anyway those two urls were just an example. Maybe it would be clearer to look at the real site. This is the current version that is still live as of now: http://www.foofighterslive.com/liveguide/ As you can see you can click on a year and then from the year page click on any one of the dates. Now the new dynamic version, not live yet: http://www.simonkilmore.co.uk/ffl2/liveguide/ So now you click through to years through one years.php file and then from the years you're just clicking to one show page with the unique id for each show. I didn't create the database and php to go with it, my friend did so I'm not 100% sure on how it's working but I can ask him of course. All I know is he basically combed my current site for data and created a unique id for each show in order. So the first one in 1995 is show 1, the last one in 2011 is show 1093. In the database for each unique show there is obviously the date from the show within but I'm not sure how easy it would be to match from the old URL? Looking at the table data in phpMyAdmin I can see he's got the date for the show in YYYY-MM-DD format, which is the same as the current file naming scheme. So I think you probably were going along the right lines in your first post.

Looking for a bit of help here guys, I have a website that is currently 100% static, part of which is a section containing 1000+ unique individual pages. In the new design that part of the website is now dynamic from a database. Quite a lot of the unique pages are linked around the web and in google results so obviously I want to redirect them to the new site, but what is the best way of doing it? Should I just redirect them to the new index and risk visitors leaving, not bothering to re-navigate to the exact page or is there a way I could direct them all exactly? Probably better to give you an example. Now it's like this: website.com/liveguide/1996/1996-01-03.php website.com/liveguide/2005/2005-05-14.php And so on, an index for each year and hundreds of individual pages. On the new dynamic site it will just be (for those two specific examples) website.com/liveguide/show.php?show=130 website.com/liveguide/show.php?show=753 So as I say, do I redirect all of the pages to website.com/liveguide and hope visitors don't mind finding the individual show again or would there be an automated way to get them to the exact page? The problem I'm thinking with that is I'm not going to create 1000+ separate redirects so maybe I have no choice? I don't know, I've not really looked into redirecting after a redesign before.

Ah yes I see what you mean, I was meaning to change that.

You mean they should line up with the nav? The boxes are touching the right edge of the container, the nav currently isn't so adjusting the nav would be the best idea. Any other thoughts?

I've been redesigning one of my sites again and generally I'm pretty happy with it but see what you think: http://www.simonkilmore.co.uk/ffl2/index.php Bear in mind a lot of the content isn't in and the database driven 'live guide' needs some bugs fixing but general comments on the layout and importantly the colours/contrasts would be great. I wanted to go for the black and white background image with content layered on top but I've been really struggling to get a contrast I'm happy with. It looks ok in normal light but add some glare/brightness to the screen and things start blending too much I think. But yeah, thoughts would be appreciated.

Ok I don't know if it's because I'm tired and the basics have gone walkies from my head but I'm really struggling with something quite simple that I don't ever remember having a problem with before. Basically I can't for the life of me place a H1 tag inside a DIV without any padding or margins. No matter what solution I try there is always space above and below the h1 text. I thought it was a problem with my full code and maybe my reset CSS but I've tried removing everything, I've even broken it down entirely to a simple new page and I can't get it. http://jsfiddle.net/sncW9/1/ Have I gone completely mad here or is this harder to do then I'm remembering? All I want is the H1 text to have no top or bottom padding in the DIV, it should touch the top of it and in this example the bottom.

With so many different things you could potentially include in your head these days I wanted to see what you guys are generally using in yours. Obviously each project is different and you'll include different tags in each but what is your base head section looking like these days? What's in each project except the obvious? Are you using Facebook insights? How are you tackling the various different favicon formats? How many meta elements do you use?

The :before and :after pseudo elements don't work with img as far as I can see.