AblazeRich

Didn't know that J.P and Nillervision! Thanks guys!

I found that my responsive web design got a lot easier when I started designing the mobile site first and then had media queries for larger sites. Its not the obvious way for most of us who are used to designing for larger monitors, and I didn't like it to begin with, but it works better in the long run. Try using HTML 5 Boilerplate as a starting point if you want, that way most of the CSS is already done, and you just adjust it.

Yeah, off-key of chrome really, surely its about being as compatible as pos....

Agree with most of those use's, but still don't see how the id/class thing really matters in real terms, unless of course there is the JavaScript element.

Not sure what semantic means in this context Alluzion, can you elaborate on that at all please?

But I still don't understand; why use ID's instead of Class's?

Hello All, I am a web designer who has got to work with a little bit of ASP, as I recently have created a new responsive template for my clients website. I am in the process of combining it with the old sites ASP / Access Database (the developer is unavailable). Most of it is working ok, but for some reason I am getting the following msg when it trys to load the News / Past Projects bar (grey bar on the right hand side - not currently appearing): ADODB.Recordseterror '800a0cc1' Item cannot be found in the collection corresponding to the requested name or ordinal. /2013/basket.asp, line 124 This refers to the 2nd block of text (first line of ASP code in it) below. I have checked and the problem seems to occur when I swap two bits of ASP code around in the site, cos if I swap it back to the original order It pulls all the information out of the database correctly, (but obviously this is no good as the layout is wrong). The two bits of code I'm refering to are below. (This configuration brings up the error message, but if they are swapped around it doesn't occur.) http://www.mason-uk.co.uk/2013/basket.asp?pid=383 <div class="topbit"> <h3>Related Products</h3> <% CurrentProdCat = RS( "product_category") CurrentProdID = RS( "product_id") sqlString = "SELECT product_id, product_name, product_category, product_date, main_pic, product_briefdesc, main_pic_desc FROM Products WHERE product_status = 1 AND product_category LIKE '%"& CurrentProdCat &"%' AND (Not product_id = " & CurrentProdID & ") ORDER BY product_date DESC;" DrawAllProducts(sqlString) %> </div> </div> </article> <div class="sidebar"> <aside> <% CurrentProdID = RS( "product_id") RelProjectsSQLStr= "SELECT * FROM projects WHERE project_status=1 AND (projects.related_product1="& CurrentProdID &" OR projects.related_product2="& CurrentProdID &" OR projects.related_product3="& CurrentProdID &" OR projects.related_product4="& CurrentProdID &" OR projects.related_product5="& CurrentProdID &" OR projects.related_product6="& CurrentProdID &" OR projects.related_product7="& CurrentProdID &" OR projects.related_product8="& CurrentProdID &" OR projects.related_product9="& CurrentProdID &" OR projects.related_product10="& CurrentProdID &") ORDER BY projects.project_date DESC;" DrawPDFandImLinks(RS) DrawAllRelatedProducts(RelProjectsSQLStr) %> </aside> Thanks for taking a look!

ok, yeah, I remember now, forgot that you could do that, although you can also apply two classes to something as well eh? But is there any particular reason not to? I mean, there may be a bit, unforeseeable, in the future of the site, where you need to reuse that bit of CSS, so why not just make everything a Class unless you have a specific reason not to (like integrating with JavaScript)

I checked out that link you have, and the way it renders there is how it renders on the version of IE 8 I have installed on my computer (wrong font). The example it renders of IE 7 shows the header text as a load of squares... not good... does anyone have IE 7 installed on their computer? Any chance you can check whether thats happening on yours? Thanks So I still have to get around this. How far back do you make your websites compatible?

Is there another DIV or content interfering perhaps? Check z-index stuff maybe?

Hi Lyndsey, I think you may be right about it getting confused about the nested JavaScript. I noticed that at the top of my pages I'm getting a slim grey bar (the background colour) with a ");} In it. http://mason-uk.co.uk/responsive/html5boilerplate5-productpage.html I did a search on my code to find this and the only place it appears is in that nested Javascript block. Think its hitting the </script> tag and then stopping. I tried what you said with the "<scr"+"ipt src='tinybox.js'><\/scr"+"ipt>" and it solved it! Thank you!

Javascript! ahh yeah, remember now...

Why ever use an ID when you could just use a class? Who cares is a ID is for one use? You can use a Class once too... I did know the answer to this once, but can't remember it.

Thanks mate, have you adjusted the code at all? Or are these screen shots of my current code?

Hi All, Thanks so much for your help, its really been a massive help with my first responsive website. But now I have yet another question. Down one side of my website (on larger res's) I have a grey 'News' bar, and above this bar on the product pages there is also a 'Datasheets & Installation Photos' bar. This looks fine on 800px + But down on mobile phone/tablet sizes the 'News' and the 'Datasheets/Installation Photos' drop down below the bottom of the page. This is fine and I want the 'News' bit where it is, but with the 'Datasheets/Installation Photos' I want it to appear above the 'Related Products' (in the blue boxes) directly above. So the order moving down the page would be: 'Datasheets/Installation Photos' 'Related Products' 'News' Instead of : 'Related Products' 'Datasheets/Installation Photos' 'News' (this is important because on some pages there are up to 10 related products) http://mason-uk.co.uk/responsive/html5boilerplate5-productpage.html

Have you got a link? Your code is quite hard to look at as it is, pasted in

Thanks Lyndsey Used your first bit: <script type="text/javascript"> if (screen.width > 600){document.write("<script src='tinybox.js'></script>");} </script> and it is working better on reduced PC browser windows, although I still had to take out the type="text/javascript" to get it to work on the ASP page Still not very sure about the 2nd piece of code, would it be right to just drop that in as it appears above?

Thanks Lyndsey Your first bit of code makes sense, but Your last bit of code has totally confused me, I've never seen JavaScript like that. Do you just copy and paste it in as is?

Just solved it by removing type="text/javascript" from the below... <script type="text/javascript"> if (screen.width > 600){document.write("<script src='tinybox.js'>");} </script>

Now getting an odd error on a ASP page, any one understand why I'm getting this? Active Server Pages error 'ASP 0138' Nested Script Block /responsive/html5boilerplate5-contactpage.asp, line 17 A script block cannot be placed inside another script block. http://mason-uk.co.uk/responsive/html5boilerplate5-contactpage.asp Its not obviously inside another script block, I've had a look, and there is other bits of JavaScript that are working fine, so why is this throwing up an error in this page? Its a bit worrying, cos eventually all these templates will be converted to ASP pages...

Its a bit weird, but the code seems to work when I test it on a phone, but not on a reduced PC browser... I removed the height line in the JavaScript code, do you think thats alright? This is what I got, replaced the old link in the head of my doc: <script type="text/javascript"> if (screen.width > 600){document.write("<script src='tinybox.js'>");} </script> Is it pos to change screen.width to browser.width?

Hi Alluzion, Thanks for that. I'm not really that great with JavaScript, I tend to just find scripts and adjust them. Will give that code a go, but where abouts should I put it in my current code? Cheers Rich PS, isn't there a simple CSS hack I could use

Hi All, Still working on this responsive website. Strange request this time, but I have a picture enlarge on my website, so if a visitor clicks any image (pretty much) it should enlarge up to about 600px wide by 450px high. I use a Javascript code that I found called Tinybox.js Now this is fine on most PC monitors, but obviously not ok for tablets or phones as the image goes off the screen (and takes up most the screen too!). The javascript is linked from the html (although there is a couple of CSS styles in my stylesheet for it too), is there a way I can turn this off for the lower res's? Can media queries be used to effect anything other than CSS? Is there a bit of CSS I can trigger at the lower resolutions to stop the JS working? Thanks again Rich http://mason-uk.co.uk/responsive/html5boilerplate5-productpage.html#.UUCgHta-2Sp

Thanks HeydanReeves, took some bashing but seems to working ok now!

Thanks Again Lyndsey, it did sort of work, It looks ok on that page, but has thrown it out on another page... The problem is making this code robust enough to deal with different sized pics and quantities of text. Cos this website draws itself from a large Database and I don't know how much text there will or wont be on any given entry (or the exact dimensions of a image), plus the responsive aspect, it makes it a bit tricky with things like this. Other Page That it Has Thrown it Out on: http://www.mason-uk.co.uk/responsive/html5boilerplate5-productpage.html Current Page Again: http://www.mason-uk.co.uk/responsive/html5boilerplate5-contactpage.asp Thanks for your response HeydanReeves, Please let me know other ways to restructure this area, I'm bamboozled at the moment PS Just looking at your code demo now and seeing whether I can incorporate that into this design somehow, although not sure how it will work at the lower resolutions with the responsive design, gonna give it a bash! Thanks!