Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

HTML5 Data attributes and Responsive Design

Posted on 2013-06-18
8
Medium Priority
?
264 Views
Last Modified: 2013-06-24
I am using html5 data attributes to help implement some animation of certain page elements. They adjust positioning based on the scroll position of the page. The positions are % based However on smaller screens i need to adjust the values of the percentages. Since they are outside the css i cant use media queries, is there any way to call different data attributes for specified elements based on screen size?
0
Comment
Question by:orbitdsgn
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
8 Comments
 
LVL 7

Expert Comment

by:rgranlund
ID: 39257941
Why can't you use a media query in your CSS?

@media screen and (min-width:300px; , max-width:320px;) {...css classes and id's...}
0
 

Author Comment

by:orbitdsgn
ID: 39257964
I cant use media queries because the data attributes are defined in the html not the css

see example below:
<div id="intro1" data-0="left:20%; top:180px;" data-800="left:20%; top:0px;">
        
    </div>

Open in new window


is it possible to include the data attributes in the css instead?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39257995
ALL properties/values used for presentation belong in the CSS.  I assume you are using some kind of third rate theme or template that generates a lot of junk using values embedded in the HTML.  Lot's of luck with that!

If you post a link to the page then we can probably make recommendations on how to make it responsive using standard methods without having to jump through hoops, and getting knotted up with hacks.

Cd&
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:orbitdsgn
ID: 39258029
Cd&

I dont think you read the question. You will see that the data attributes in the html are used to trigger an animation when the user reaches a certain scroll point in the example above the first data attribute is the position of the intro1 div when the page has not been scrolled the second data-800 is when the user has scrolled 800 pixels. Unless you know of a way to incorporate the scroll position into the css I'm thinking it needs to stay in the html. This is not a theme or template and has been coded from scratch

You can see the site here
http://www.thedancingrobot.com/crest/redo2/custom.html
Clearly a work in progress thats why I am looking for some help here
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39258120
First of all, if you are going to use data attributes you should be using an HTML5 doctype or you are going to run into cross-browser issues.

Now that you posted a link I see whay youare doing, and I  think all you need to do is use vh and vw instead of percentages.  One vh is equal to 1/100 of the height of the viewport. 1 vw is equal to 1/100 of the width of the viewport.

The adjust automatically to resolution, and screen size changes, and most of the time will handle an orientation change on supporting devices.

You can check here to see how to use vh and vw


Cd&
0
 

Author Comment

by:orbitdsgn
ID: 39259893
Thanks COBOLdinosaur,

Good call on the doctype, and the vh, vw is cool but unfortunately i don't think ill get the cross browser support i need.
0
 

Accepted Solution

by:
orbitdsgn earned 0 total points
ID: 39260364
its certainly not best practice but heres what im going to do. I am going to create at least two versions of the site one for large screens lets say wider than 1200px and on for small screens down to 800px wide, mobile will be handled with a diffrent site specifically for use on mobile devices. I will then call the specific site for the screen size using

<SCRIPT language="JavaScript">
<!--
if ((screen.width>=1200) && (screen.height>=768))
{
 window.location="highres.html";
}
else
{
  window.location="lowres.html";
}
//-->
</SCRIPT>

Open in new window

0
 

Author Closing Comment

by:orbitdsgn
ID: 39270695
Certainly not idea but since cross browser compatability is important this seems to be a decient work around
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question