jQuery

[Falcon69]

Hello Peoples.

I am learning to code, and I'm actually finding it easier than I thought.

But, I am stuck on one problem. 

When using a jquery Slider.

I got it all working okay, except for one thing.  It stays to the left, even when enlarging the browser window.  I do have responsive code for it, so it changes when browser window is shrunk.

I tried using margin: auto; but that centers it in browser screen, and the slider is offset to the left to allow a text box on the right.  When it is margin: auto;, it overlaps the text box.

I also tried to set margin:auto; left: -229px and that works somewhat, but still doesn't scale right to browser size.

Is there a way to keep the left side of it aligned with the rest of the page when the browser resizes?  I tried doing a search for the code, but couldn't find it.  Maybe because I didn't know the right things to type into google.

Here's what I got for that slider box div line....

<div id="slider1_container" style="position: absolute; top: 365px; left: 0px; width: 800px; height: 456px; z-index: 100; background: #191919; overflow: ">

I have chosen a width of 1268 for the width of the webpage.  For webpages 1280 x ? That extra 12px should allow for the slider bar on the right.

fyi, I tried to use relative as well, no difference.

Thanks in advance for your help, Codemasters!

[tggzzz]

I suggest you search this forum for other questions/responses about jQuery. If you don't find any then you might consider this is the wrong forum for your question.

[Falcon69]

it probably is, but I know some people do coding here. And it is General Chat.

[vikasbly44]

 You can learn the best content of j-query from the popular site....

    www.w3schools.com

[codeboy2k]

Can you go to jsfiddle.net and write an example of what you are doing ? The fiddle site is good for code fiddling like this... for collaboration with others.  Once you've got something post a link here to the fiddle page.

At first glance: you probably don't want it to be position: absolute especially if you are also doing responsive coding and want it to flow with the rest of the page when you resize it.  Likely you will need to set the slider div to position: relative; display: inline-block and float: left; to keep it to the left when you resize. The inline display style should keep it from overlapping with the following text.

Try to avoid absolute unless you really need it. Anything that is positioned absolutely will not be in the regular flow of the page (obviously) and so you then have to resort to pixels to move stuff about, as you've tried.  You should leave that to the layout engine if you can.  Usually only headers and footers need to be absolutely positioned, to keep them at the top and bottom. 

[Falcon69]

well, I got it to work.

I put a padding on the right of the slider, and moved the navigation arrow, then I placed a background image on the right side and placed the Z-index higher so it sits on top of the padding of the slider.  Then I placed the text box on top of that.  Never everything moves correctly when the window resizes, except, when the window goes smaller, nothing else but the slider shrinks. I'll have to figure all that out later. for now I think it is fine.  I'm learning. Coding is still alot easier than I thought, but lots to learn.