Formatting issue in carousel

Hi all,
I am facing very strange issue with formatting of a page.Actually,when user user lands on the page, it displays a carousel with skills. (something like below)

If you see the above image formatting goes for a toss. So what i did was i pressed F12(chrome dev tools) in order to investigate. The moment i press F12, the formatting issue gets fixed automatically.See the image below after pressing F12 and you can see it is formatted now.

I am not really sure how can i fix this issue (since the error disappears when i press F12). I want the second image(formatted one) to be displayed on page load.

I also thought if it has something to do with height of the browser window, but once the image is formatted, it always remains like that( i.e it doesnot go back to the original unformatted one even if i close F12 or resize browser window etc).

I have copied the code on plunker for your reference. (When you open the below link, please click on “know more about me” to take to the carousel page). Please suggest.

The issue clears when the window is resized by as little as 1px (Firefox). It’s not directly related to dev tools. Sorry, I don’t have time to look any further right now. Anyone else, please?

How do I edit the code in plunker? Everytime I type, it gets removed. I don’t want to download that entire directory. Makes testing impossible.

i have enabled collabration on plunker…Hopefully you should now be able to edit the code…please check out now

Nah I can’t edit still.

check this link . I think with this you should be able to edit…

If still i doesn’t work,please let me know if there is any other alternative to share the code…

Exactly…i agree to it…i mentioned about F12 because i came across it when i was trying to debug/inspect

Nope. Perhaps place yoru code on jsfiddle. It works basically just like plunker except we can edit code.

I was actually using plunker because it allows me to create new file and then paste the contents there.So it makes copying custom/local files easier in plunker.However, i don’t see any option like that in jsfiddle. In JsFiddle, I am supposed to provide link to external resources. For eg, i am not getting URI’s for resources like “jquery.transit.min.js”, “jquery.bxslider.js” ,“jquery.bxslider.css” etc.
I spent quite a lot of time but i didn’t find any link on how to add local files etc in jsfiddle.

I am sorry for drifting away from my original question…

Off-Topic

Have you tried CodePen ?

CodePen is also similar to jsFiddle. Anyway, finally i have made some changes and uploaded again in jsfiddle. Hopefully now you will be able to edit it. :slight_smile:

http://jsfiddle.net/shenoyvnm/n0r3thff/5/
http://jsfiddle.net/shenoyvnm/n0r3thff/5/#&togetherjs=Qq6vS9cFVB

As mentioned earlier(my initial question) the issue clears when the window is resized by as little as 1px (Chrome/Firefox). (or press F12)

Head over to the javascript section. This javascript is not working.

$('.bxslider').bxSlider({
            slideWidth: 180
        });

THe slider is fixed at 80px when it is shown. When you resizes 1px, the Javascript THEN goes into place and makes it 180px. I think this is the javascript responsible? This doesn’t appear to be a CSS issue.

But i think it should have been always 180px because it should be invoked when document is ready. I am using bxslider(jquery.bxslider.js)to create this slider.Also, am not sure how this javascript is invoked when i resize it by say 1 px. As far as i understand , resizing should not have triggered this function call.Any suggestion please?

I’m not a javascript expert. I agree that it should be invoked automatically but when I look at the developer tools, it’s stuck at 80px and only upon resize does it triggre that 180px javascript. I’d head over there and get theri opinions.

sure thanks

Do i need to move this question to “Javascript” section myself ? What i mean is, whether admin will move this question to javascript section or do i need to post this question again in that forum?

I’ll move it now.

am still stuck :frowning: spent quite a lot of time on this. Any suggestion on what to look in the javascript would be great.

I found a strange solution to this issue. Changed couple of things
carousel

I only changed couple of things.
first changed display:none to visibility:hidden for boxId div
and then instead of
$(‘#boxId’).show();

added below
$(‘#boxId’).css(‘visibility’, ‘visible’);

Am not really sure how changing from display:none to visibility:hidden made the difference. Any idea pls? (i knw the difference between visibility and display in general but not sure how is it making difference here)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.