How to change CSS attribute value based on querystring using jQuery

Question

I am new to jQuery & I tried to resolve this on my own without any luck.

I need to change the the Value in the CSS based on a QueryString using jQuery. I tried couple of scripts which didn't work.

URL Example: http:www.xyz.com/Page.aspx?pageID=101&Language=arabic

Based on the language specified in the URL I have to change the CSS value of float:right in class .Image4x4 and verticleBar before page is displayed.

 .Image4x4
    {
        width:670px;
        float:left; /* for arabic keep right */
        height:550px;
        background-color:Orange; 
    }
    .verticleBar
    {
        width:220px;
        float:left; /* for arabic keep right */
        height:550px;
        background-color:Red;
    }

I tried few scripts but it didn't work as planed.

I would appreciate any help on this.

@Ayman : Yes i have to change the layout as other language is Arabic — Learning
– Learning, Commented Jan 2, 2012 at 7:08

Mark Richman · Accepted Answer · 2012-01-16 17:38:14Z

3

var queryValues = {};

$.each(window.location.href.split('?').pop().split('&'), function (i, v)
{
    var v = v.split('=');
    if(v.length > 1) // prevent v[1] from erroring if no querystring present
      queryValues[ v[0].toLowerCase() ] = v[1].toLowerCase();
});

if ( queryValues.language == 'arabic' )
{
    $('.Image4x4, .verticleBar').css('float', 'right');
}

If you're not sure there'll always be a query string, you should add code to check for that.

edited Jan 16, 2012 at 17:38

Mark Richman

29.8k26 gold badges105 silver badges166 bronze badges

answered Jan 1, 2012 at 20:01

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Adam Rackis Over a year ago

That's a beautiful solution - +1

Leo Over a year ago

You could use window.location.search instead of window.location.href, that way you only parse the query string part of the URL. See developer.mozilla.org/en/DOM/window.location#Properties

Joseph Silber Over a year ago

@Leo - But I then anyhow have to remove the ? from the beginning of the string...

Learning Over a year ago

@Josep Siber: It is a nice Solution. can you also give me a code snippet which will also detect the browser language so that i can also change language based on the browser setting. I will also try to look for the solution & try to resolve on my own.

Joseph Silber Over a year ago

You should check it server side: $_SERVER["HTTP_ACCEPT_LANGUAGE"];

|

Ayman Safadi · Accepted Answer · 2012-01-01 20:26:55Z

1

I propose a JavaScript-independent solution...

Assuming that you need to do this because Arabic is read right-to-left (RTL), use ASP to create a list of languages that are RTL. Whenever the language set in the URL is in this list, give the <body> tag an "rtl" class?

If so, you can do something like:

.rtl .Image4x4, .rtl .verticleBar
{
    float:left; /* for arabic keep right */
}

This way you will be able to handle any RTL language.

edited Jan 1, 2012 at 20:26

answered Jan 1, 2012 at 20:02

Ayman Safadi

11.6k1 gold badge30 silver badges42 bronze badges

4 Comments

Josh Mein Over a year ago

How do you propose to change it based on the query string?

Learning Over a year ago

@Ayman. I have nested Div tags it align all the text in the div tags as per RTL or LTR but it does not change the position of the div tags which are on the right side for ENGLISH, that is y i have to change them using jQuery.

Learning Over a year ago

@Ayman: I tried it it does not work even if i hard code the <body dir="rtl">. i have defined my CSS as you have mentioned but it doesnt work.

Ayman Safadi Over a year ago

CSS does not interpret dir. I meant class="rtl".

Collectives™ on Stack Overflow

How to change CSS attribute value based on querystring using jQuery

2 Answers 2

6 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related