how to set width in percentage in jquery

Question

jQuery(function() {
    jQuery('#allinone_contentSlider_common').allinone_contentSlider({
        skin: 'common',
        width:1000,
        height: 1000,
        autoHideBottomNav:false,
        showPreviewThumbs:false,
        autoHideNavArrows:false,
        thumbsWrapperMarginBottom:-50
    });     
});

I am using this code for my complete page slider i want to rotate my full page with logo and mwnues and here in this code i have fixed height and width i dont want to make it fixed i want to it 100%.

In this code i want to set the width of my page 100 here height and width are fixed so please give me any suggestion how can i resolve this problem

Solution 1

You set width using CSS. Now you can change css using jQuery like this.

$("#id_of_your_element").css("width", "20%");

Solution 2

You can set percentage widths and heights simply using:

$(elem).width('100%');
$(elem).height('100%');

Do note that this will be 100% height and width of its containing parent and not necessarily 100% height and width of your page. If your #allinone_contentSlider_common element's parent only has 100px height and width, 100% will reflect those values.

Depending on how this allinone_contentSlider() plugin method works, you should simply be able to use:

jQuery('#allinone_contentSlider_common').allinone_contentSlider({
    width: '100%',
    height: '100%',
    ...
});

Solution 3

First of all you need to check that allinone_contentSlider that you are using accepts anything but integers for its width option.

If it does - the correct option will be width: '1000%' - pay attention to the fact that now it is a string, not an integer.

Comments

[Naveen Kumar]

hii its not working Animesh i want to set height and width 100% but i have fixed

[Naveen Kumar]

where to use this code on place of height and width and id of eleement means allinone_contentSlider_common

[Animesh Nandi]

then just use width:main_width and height:main_height.

[James Donnelly]

That's not very descriptive. How is it not working? Has the width and height changed? What is the width and height in relation to the parent width and height?

[Naveen Kumar]

this height and width reflect the height and width of my complete page its 1000 , 1000 means my page is now of 1000 height and width soi want to make it 100% so that it will not be fixed and adjust according to screen height and width

[sarveshseri]

for changing width .. first you need to get the target element somehow.. like here I am getting by Id.. you can check the actual element you want in google chrome or firefox using the developer tools (ctrl+shit+i).

[James Donnelly]

In that case, just set it to the width and height of $(window).width() and $(window).height(). You'll need to make sure to update these values when the window is resized, however. As mentioned in my answer, percentage values are a percentage of the element which contains them. For instance: <div><span></span></div> if the div was 100px wide and 200px high and the span was set to 100% height and width, the span would be 100px wide and 200px high.

[James Donnelly]

@NaveenKumar no worries. Remember to set the answer which most helped as Accepted to help future visitors. :-)

[Naveen Kumar]

hi i need your help i have posted a question please do something if you can here isd the link stackoverflow.com/questions/17079903/…

[James Donnelly]

@NaveenKumar please remember to set this as the accepted answer, otherwise it appears unanswered.

[James Donnelly]

@NaveenKumar to mark as accepted you click on the green tick below the post score in the top left.