[css-d] links not working smartphone - tablet
I’m going slightly mad. On a site: http://www.dlp-distribution.fr below the carousel on the home page are four blue boxes with icon-like images in them. If you touch (or hover with the mouse on a computer) one of these some text slides in. At the bottom of the text is a link (decoverez) which works just fine on a computer, but goes nowhere on a smartphone or tablet. I’ve played with z-index as a hopeful solution, but to no avail. Anyone able to help? Thanks, Bob Schwartz __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] links not working smartphone - tablet
Bob Schwartz wrote: I’m going slightly mad. On a site: http://www.dlp-distribution.fr http://validator.w3.org/check?uri=http://www.dlp-distribution.fr/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] links not working smartphone - tablet
Validation fixed, but still not working. Bob Schwartz __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] links not working smartphone - tablet
Bob Schwartz wrote: Validation fixed, but still not working. http://jigsaw.w3.org/css-validator/validator?uri=http://www.dlp-distribution.fr/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] links not working smartphone - tablet
CSS discuss often reminds me of my doctor, to whom I'll often go with
queries about an acute injury and come away with advice to stop smoking –
wise well-intentioned, but somewhat short of the assumed benefits in
seeking expert advice for a specific problem.
Bob, your problem is down to Javascript's interference with native touch
event lifecycle. On line 19 of app.js:
/* Hover Touch */
$(document).ready(function() {
$('.hover').bind('touchstart', function(e) {
e.preventDefault();
$(this).toggleClass('cs-hover');
});
});
This code prevents touch events from resolving on `.hover` panels. Remove
the `e.preventDefault()` invocation on line 22 and the links are functional.
Regards,
Barney Carroll
barney.carr...@gmail.com
+44 7429 177278
barneycarroll.com
On 6 October 2014 09:44, Philip Taylor p.tay...@rhul.ac.uk wrote:
Bob Schwartz wrote:
I’m going slightly mad.
On a site: http://www.dlp-distribution.fr
http://validator.w3.org/check?uri=http://www.dlp-distribution.fr/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] links not working smartphone - tablet
Barney Carroll wrote: CSS discuss often reminds me of my doctor, to whom I'll often go with queries about an acute injury and come away with advice to stop smoking – wise well-intentioned, but somewhat short of the assumed benefits in seeking expert advice for a specific problem. But your doctor knows that advising you how to treat an acute pain in your finger caused by an ingrowing nail is unlikely to result in any overall improvement in your condition while you have 252 co-morbities in your arm alone, and four affecting your whole body : http://jigsaw.w3.org/css-validator/validator?uri=http://www.dlp-distribution.fr/ Sorry! We found the following errors (252) http://validator.w3.org/check?uri=http://www.dlp-distribution.fr/ ( errors, now now fixed). It should be a /sine qua non/ to ensure that a given web page validates for both HTML and CSS before asking for help; if Mr Schwartz removes the `e.preventDefault()` invocation on line 22, his page /may/ work as intended on one specific smartphone or tablet today, but it may do something completely unexpected on another device, or tomorrow, or if the wind blows in a different direction, because whilst it is possible to predict the behaviour of valid code with reasonably (but by no means absolute) certainty, it is completely impossible to predict the behaviour of invalid code in any meaningful way at all. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grid Columns and Frustrations
On Monday, October 6, 2014, Crest Christopher crestchristop...@gmail.com wrote: I was throwing random ideologies that exist as questions. The basis of CSS I know, I may not have it all memorized but I know what is possible, if it's advanced css, I may be rusty, but once again, I know what is possible. You don't need a grid frame work, obviously, although if you want to build a responsive site they say it will help with the development. I only build responsively now and I don't use a framework. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] links not working smartphone - tablet
So in other words. Philip is teaching to fish. Not just giving you a fish. Kudos Philip! Best, Karl Sent from losPhone On Oct 6, 2014, at 5:07 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: Barney Carroll wrote: CSS discuss often reminds me of my doctor, to whom I'll often go with queries about an acute injury and come away with advice to stop smoking – wise well-intentioned, but somewhat short of the assumed benefits in seeking expert advice for a specific problem. But your doctor knows that advising you how to treat an acute pain in your finger caused by an ingrowing nail is unlikely to result in any overall improvement in your condition while you have 252 co-morbities in your arm alone, and four affecting your whole body : http://jigsaw.w3.org/css-validator/validator?uri=http://www.dlp-distribution.fr/ Sorry! We found the following errors (252) http://validator.w3.org/check?uri=http://www.dlp-distribution.fr/ ( errors, now now fixed). It should be a /sine qua non/ to ensure that a given web page validates for both HTML and CSS before asking for help; if Mr Schwartz removes the `e.preventDefault()` invocation on line 22, his page /may/ work as intended on one specific smartphone or tablet today, but it may do something completely unexpected on another device, or tomorrow, or if the wind blows in a different direction, because whilst it is possible to predict the behaviour of valid code with reasonably (but by no means absolute) certainty, it is completely impossible to predict the behaviour of invalid code in any meaningful way at all. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] links not working smartphone - tablet
Going back to the original problem for a second, the fish in question is making the links on Bob's site work on touch-enabled devices. To catch the fish, I opened the provided URL in Chrome on my laptop with the DOM inspector open. The links worked as expected by default, but when I enabled device emulation to mimic the latest Nexus (a recent smartphone with an associated OS and Chrome variant as its default browser), I noticed the behaviour Bob was talking about. Seeing as the DOM inspector and the viewport showed the link as having been successfully rendered and exhibiting expected default behaviour in at least one instance, I suspected JavaScript: Bob had described the mechanism revealing the links as dependent on hover or touch – hovering has a corresponding CSS state but changing style on touch necessitates scripting. After opening the DOM inspector's 'sources' panel, which deals with JavaScript debugging, I toggled 'pause' [1], which stops JavaScript execution and reveals the line of code which is attempting to execute. This revealed the code block in question, which handles the application of a 'hover' class on touch. But the code was also preventing the default behaviour of that event, which would be to follow the link as expected. Preventing default behaviour is often desirable when JavaScript enhancements replace default functionality, but this isn't one of those cases: we want to apply scripted behaviour regardless of defaults. So by removing the call to `preventDefault`, we let the event take its natural course and expectations are met. So 'validate your markup', as much as it may be good advice, wouldn't have caught this particular fish. In fact, I might assert that 'validate your markup' hasn't taught us anything with regards to this particular problem. The reason people come to this list is usually to seek human insight and communal effort on given problems, which code parsers are unable to give. Conversely, actually reading about Bob's problem, visiting the URL and trying to replicate the behaviour he described proved to be a really good first step to solving the problem. [1] https://developer.chrome.com/devtools/docs/javascript-debugging#sources-panel On 6 Oct 2014 18:07, Karl DeSaulniers k...@designdrumm.com wrote: So in other words. Philip is teaching to fish. Not just giving you a fish. Kudos Philip! Best, Karl Sent from losPhone On Oct 6, 2014, at 5:07 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: Barney Carroll wrote: CSS discuss often reminds me of my doctor, to whom I'll often go with queries about an acute injury and come away with advice to stop smoking – wise well-intentioned, but somewhat short of the assumed benefits in seeking expert advice for a specific problem. But your doctor knows that advising you how to treat an acute pain in your finger caused by an ingrowing nail is unlikely to result in any overall improvement in your condition while you have 252 co-morbities in your arm alone, and four affecting your whole body : http://jigsaw.w3.org/css-validator/validator?uri=http://www.dlp-distribution.fr/ Sorry! We found the following errors (252) http://validator.w3.org/check?uri=http://www.dlp-distribution.fr/ ( errors, now now fixed). It should be a /sine qua non/ to ensure that a given web page validates for both HTML and CSS before asking for help; if Mr Schwartz removes the `e.preventDefault()` invocation on line 22, his page /may/ work as intended on one specific smartphone or tablet today, but it may do something completely unexpected on another device, or tomorrow, or if the wind blows in a different direction, because whilst it is possible to predict the behaviour of valid code with reasonably (but by no means absolute) certainty, it is completely impossible to predict the behaviour of invalid code in any meaningful way at all. Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grid Columns and Frustrations
okt 6 2014 07:18 Crest Christopher crestchristop...@gmail.com: know what is possible Side-note: It’s useful to know what’s possible, but we all still have to do one page design at a time to really make it possible. Anything’s possible more or less. The real questions are commonly more like what’s needed?, what answers the objectives set up? and what looks irresistable when it’s on the web in any (target) browser on any (target) device? and similar. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] links not working smartphone - tablet
okt 6 2014 20:20 Barney Carroll barney.carr...@gmail.com: So 'validate your markup', as much as it may be good advice, wouldn't have caught this particular fish. In fact, I might assert that 'validate your markup' hasn't taught us anything with regards to this particular problem. The reason people come to this list is usually to seek human insight and communal effort on given problems, which code parsers are unable to give. Conversely, actually reading about Bob's problem, visiting the URL and trying to replicate the behaviour he described proved to be a really good first step to solving the problem. Good catch of a javascript error on a css list. However, none of what you mention concern even one reasonable reason not to validate your HTML and CSS code. For nothing else the chances increases to get that help you think you need. Even it wasn’t a css or HTML issue this time, too many times it is the invalid code or stupid little mistakes. And even if it isn’t, there are other issues because of it. Not too seldom I encounter company web sites that contain bugs with invalid code so serious that it’s embarrassing to point out the mistakes that took me 2 minutes at worst in a validator to find, 2 more minutes to correct. Obviously I find the developers of those web sites unprofessional. Invalid code? It’s not the end goal, but a nice and useful stop on the path I choose to take. so, Nah! __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Grid Columns and Frustrations
I created a starting point of a quasi web site, if I was using the 960 grid system, as an example. I placed two divs on the page. I want to know, is this the method you use grids or is my starting point completely off the rails ? [Link http://www.thecreativesheep.ca/webdesignprojects/smallprojects/demo_24_col.html] MiB mailto:digital.disc...@gmail.com Monday, October 06, 2014 3:54 PM Side-note: It’s useful to know what’s possible, but we all still have to do one page design at a time to really make it possible. Anything’s possible more or less. The real questions are commonly more like what’s needed?, what answers the objectives set up? and what looks irresistable when it’s on the web in any (target) browser on any (target) device? and similar. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Crest Christopher mailto:crestchristop...@gmail.com Monday, October 06, 2014 1:18 AM I was throwing random ideologies that exist as questions. The basis of CSS I know, I may not have it all memorized but I know what is possible, if it's advanced css, I may be rusty, but once again, I know what is possible. You don't need a grid frame work, obviously, although if you want to build a responsive site they say it will help with the development. As for flaky web development information on the web, yes there is obviously way to much online, IMO you have to wipe all of that off the table and learn the foundation, then for all other questions that are present, there is none other then, for example, this mailing list ! MiB mailto:digital.disc...@gmail.com Sunday, October 05, 2014 12:44 PM 3 okt 2014 kl. 02:31 skrev Crest Christophercrestchristop...@gmail.com: you cut up your graphics You don’t. You do sprites or use CSs. and now how do you translate the design from the PSD to your grid, You don’t translate. You use PS for creating some graphics and perhaps treating photos. You design in the browser. Or in yuor head. o you get an exact representation of your site whether it's a responsive site or not You don’t an exact representation” of something. You build a web site. Let go of the 90’s and even the 00’s. It’s over. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ Crest Christopher mailto:crestchristop...@gmail.com Thursday, October 02, 2014 8:31 PM When using a Grid FrameWork must you keep all the column classes and gutters or that is only needed when designing ? I don't understand about grids, columns and gutters is if you use a grid template with the columns and gutters within Ps and place your graphics on the grid template, what good does it help ? I mean you still are going to position things where you want them and how you want them and CSS doesn't have a snapping feature that for example means you want a graphic here or there. Instead have a grid template which you designed your site http://line25.com/tutorials/create-a-gnarly-snowboarding-themed-web-design on top, now your ready to build your page, you being to create your div, headers etc, you cut up your graphics and now how do you translate the design from the PSD to your grid, so you get an exact representation of your site whether it's a responsive site or not ? I understand how a grid works in design, not so much in css because you have gutters, except in design it's a little easier you can essentially snap your graphics and designs in place, there is no code involved. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
