Explore our sites

Stack Exchange
tour help careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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.

share|improve this question
 
Is this because Arabic is read right-to-left (RTL)? –  Ayman Safadi Jan 1 '12 at 20:21
 
@Ayman : Yes i have to change the layout as other language is Arabic –  KnowledgeSeeker Jan 2 '12 at 7:08
add comment

2 Answers

up vote 3 down vote accepted 
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.

share|improve this answer
1  
That's a beautiful solution - +1 –  Adam Rackis Jan 1 '12 at 20:33
 
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 –  Leo Jan 1 '12 at 21:06
 
@Leo - But I then anyhow have to remove the ? from the beginning of the string... –  Joseph Silber Jan 1 '12 at 23:37
 
@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. –  KnowledgeSeeker Jan 2 '12 at 6:50
 
You should check it server side: $_SERVER["HTTP_ACCEPT_LANGUAGE"]; –  Joseph Silber Jan 2 '12 at 7:09
show 1 more comment
up vote 1 down vote

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.

share|improve this answer
 
How do you propose to change it based on the query string? –  Josh Mein Jan 1 '12 at 20:15
 
@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. –  KnowledgeSeeker Jan 2 '12 at 6:48
 
@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. –  KnowledgeSeeker Jan 2 '12 at 6:54
 
CSS does not interpret dir. I meant class="rtl". –  Ayman Safadi Jan 2 '12 at 7:15
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.