Can I modify CSS dimensions at will using Javascript

[moose-en-a-gant]

This interface was created by dissecting the photo that you see into 20 pieces, and floating them to the left within a container.

 

I would like to know if I could individually scale the pieces together, with the same multiplying factor after the multiplying factor has been determined from the device's screen resolution. 

 

[CroNiX]

Personally I'd just use a single image, and have it set to 100% within the container, and then just have the parent container be a certain % of the screen. It would automatically scale to the screen size, as well as switching between portrait/landscape on mobile. But yes, of course you can manipulate css with javascript. It would be a bit more complex due to the the many images.

[moose-en-a-gant]

 

Personally I'd just use a single image, and have it set to 100% within the container

What do you mean by this?

 

Isn't the problem tracking? Eg. overlays like words, hyperlinks, text fields, become displaced depending on scale?

 

Initially that was the plan, the white words are on the photo, but I dissected them and used them as a background for a click-able div element. The text fields were going to be on the photo but I figured that would have been a tracking problem so I made them directly in a photo.

 

The design above is meant for a landscape design, it's not ideal for portrait so I redirect to a different design for portrait.

 

Thanks

Edited January 12, 2015 by moose-en-a-gant

[moose-en-a-gant]

God what a nightmare, it's perfect in Firefox but not in TOR, or Chrome, ahhhhhhh

 

I'm interested in that scaling idea of yours if you happen to come back to this thread

 

 

I suppose I could write a conditional statement like "If this browser, change picture dimensions to something"

 

Not sure...

 

Yeah so the fix would be to decrease the width of the input fields, I imagine the problem is the size of the stock font varying from one browser to the next.

 

Which actually I have not specified a font size, I'll try that.

 

Otherwise my current thought is something like this, not quite literally but the logic follows this flow

if(browser="firefox"){
<img width=" number " height="number">
}else {
<same img width=" < than above " height="same as above"> 
}

Yeah it's not the font. It appears to be the border of the input fields ehhhh this is why people don't do this haha

 

Yeah if I remove the border-right and set it to : none; the picture is perfect again... hmm I imagine I'll have to display alternate image/form widths somehow based on browser... or do it right? haha

 

I'll try to fix it by making the border problem not exist, since the photos seem to scale fine anyway everywhere else in any browser, it's the border of the input fields.

Edited January 12, 2015 by moose-en-a-gant

[moose-en-a-gant]

border solution doesn't work, I'll have to look into alternate images

[moose-en-a-gant]

Yeah so now I have gotten help on determining the browser type, I think I can modify html elements directly, eg. php determines the values to be parsed as HTML but what about CSS?

For example in

input[name="userrname"]{
border-right: none;
}

I want that to be conditional eg.

input[name="userrname"]{
if($type==chrome){
border-right: none;
}
}

^^ that does not work so far

 

I think I will try something like this

input[name="userrname"]{
<?php if($type==chrome){
echo "border-right: none";
}?>
}

Edited January 13, 2015 by moose-en-a-gant

[moose-en-a-gant]

Well the proposed method above does not work, so  for now I will do what I know how to d which is to redirect, I've got the browser type down so I'll check which browser it is first then redirect, this is not a fool-proof plan... ideally you don't build websites like I did but I"ll figure it out.