jQuery slide jumps around on some divs - javascript

I am building a little website so here is my problem :
I've got a first header div which contains header stuff. It has position relative and stuff inside is position absolute, but I think that we don't really care about this one.
Just below I've got my main container div with no defined positioning and some <h1> and <p> in it. Each h1, on click, opens some content below with jQuery slide.
This is the code. The sliding part is
$("#container_" + tabName).slideToggle
The point is that on the which i called "buggy" in the example, and also on all other in my dev version, the jQuery slide is jumpy at the beginning and end of the animation.
I've done some search I found that I had to put a defined width but it didn't change anything.. Tried a lot of stuff already but I really don't find how to do that.

See this fiddle: http://jsfiddle.net/8s9VB/
.container_projects .mainSmallText{
padding-top: 25px;
}
.container_projects .mainSmallSubText{
font-weight: bold;
}
#container_professionalXP{
line-height: 3px;
padding-bottom: 20px;
}
#container_professionalXP .mainSmallText{
padding-top: 30px;
}

Well it's basically the problem with the margin inside your paragraph. I've edited one part of it and added padding in the div rather than margin inside the paragraph. Here's one part I've edited:
#container_professionalXP{
line-height: 3px;
margin-bottom: 20px;
padding-top:30px;
}
#container_professionalXP .mainSmallText{
margin: 0px;
padding:0px;
}

Related

Why when I open a submenu page scroll up?

I am creating a menu for the mobile, that when I click on an item in a submenu appears. The problem is that if I do this when the page is scrolled a bit, the page scrolls back up ... (whether open or close the submenu).
This obviously does not happen when the page is not scrolled
This is the code:
http://jsfiddle.net/qsq4y9d8/3/
this a css of submenu item
.lisottomenu {
letter-spacing: 0.02em;
display: block;
background: #E4BF85;
border-top: 1px solid #fff;
font-size: 14px;
list-style-type: none;
width:100%;
}
this css of item parent
ul li.leaf {
background: #646464 none repeat scroll 0 0;
border-top: 1px solid #a0a0a0;
display: block;
font-size: 15px;
letter-spacing: 0.02em;
list-style-type: none;
position: relative;
}
This is the problem:
(the problem is the auto-scroll)
I hope you can help me, even though the code is a bit long and I do not write well in English ...
Per my comment:
Any <a> with an href containing a "#" places a # in the URL which in turn looks for an empty anchor. Since one doesn't exist, it defaults to scrolling to the top.
Remove the "#" from your links and it won't scroll to the top anymore
Change
Link
to
Link
and it should stop scrolling to the top.
You have so many elements being created and removed and styles erased and added to the elements every time the menu is clicked, I think the browser just tries to refresh the layout or something.
Try adding and removing classes that show and hide your sub menus, and have your elements in your html from the start, instead of creating and destroying so much (unless they need to be dynamically generated from the server or something)
The problem is that the sub menu is making the entire window higher, so it has to make this scroll just when you are closing the sub-menu.
It is just how the browser reacts to this kind of height change.
One solution would to give the side menu defined max-height, and overflow-y:scroll.
#content, #sidebar-first {
display: inline;
float: left;
position: relative;
overflow-y: scroll;
max-height: 370px;
}
This way, when the the sidemenus are opening it wont affected the height of the document.
fiddle - http://jsfiddle.net/qsq4y9d8/9/

buttons not keeping up with slider when window re-size

Whenever i re-size my window the slider buttons (next/previous) disappear and do not move with the slider. Any idea on how to fix this?
JSFIDDLE:https://jsfiddle.net/b31kvqwr/
Buttons CSS:
#nav img {
position: absolute;
top: -10px;
cursor:pointer;
color:grey;
width:40px;
height:30px;
}
#prev {
margin-left: 530px;
font-size: 10px;
}
#next {
right: -30px;
margin-top: 13px;
}
PS: if the result in the jsfiddle doesn't show, expand the result tab.
This is how the slider looks like when full screen (the right way);
This what happens when i re-size the browser horizontally:
The buttons aren't moving with the slider. Any help please?
The problem at the moment is that you are using margin-left:530px; meaning that the arrows will always be 530px from the left of the screen no matter the size of the screen. It also looks like what ever is wrapping it has a set width and isn't resizing, your code was to messy for me to find this but there are a few thing that I found to make the problem a little better,
https://jsfiddle.net/b31kvqwr/2/
I have managed to keep it the correct place for a lot of the, however to improve get it working perfectly you will need to create 1-2 #mediaqueries to tweet the alignments at different sizes to make it perfect.
The way I did this was by changing margin-left to position:absolute and use a left positioning instead on your prev and next buttons;
#prev {
left: 50%;
font-size: 10px;
position:absolute;
}
#next {
margin-top: 13px;
left:58%;
position:absolute;
}
As I side note I would recommend cleaning up your code like #TingGaint said as it is insanely messy. Also when posting on stack try only include the relevant code not all of it as it makes it quicker and easier to look through and help.
EDIT
I have found the problem, still do what I said above however now instead of have the arrows div where they are now, move them out and so there below <div id="wrapper"> however you will have to play around with the placement as they will be at the top of the screen. However now they stay in the same place when re-sizing!
Example - https://jsfiddle.net/b31kvqwr/4/

Fixed divs under the bootstrap fixed nav

I'd like to attach some fixed alerts underneath the navbar-fixed navigation bar in bootstrap. My best attempt to this point is to make a div positioned at 50px with position: fixed; and width: 100%, and to insert the alerts in this div. The problem is that this cuts off the top of my other content the same way that navbar-fixed cuts off content when one fails apply padding to the body element.
#Alerts
{
position: fixed;
width: 100%;
top: 50px;
}
.alert
{
top: 0px;
//position: fixed;
padding-left: 15px;
padding-right: 15px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 0px;
border-radius: 0px;
}
body {
padding-top: 50px; // to avoid 'underlapping' the navbar
}
Here's a link to a not-working example: http://www.bootply.com/pnEHtLhUBi
My best idea at the moment is to use JS to adjust the padding-top value on body as alerts are created/destroyed, but this is likely bad for maintenance/readability and I'd prefer to do something more declarative with css.
Any suggestions?
Looks like there won't be a way to do this without js.
Since if the alert is dynamic, meaning it only appears when its triggers via the alert method
$('#alert-danger').show('slow', function(){
$('body').addClass('moreMargin')
});
you can also remove the moreMargin class from the body when you hide the alert
What about putting it inside the same div as the nav. When they popup they will push down the other content?
Also, since these are alerts, won't the user already have seen the content that is being covered? If they want to see it again they can just close the alerts. Maybe I just misunderstood what you are going for?

Div Content Not Appear

I have a menu that under certain circumstance some items show a little red box (think facebook friend count).
I've recently redone the css targetting the menu but nothing should have changed to cause the problem I'm seeing.
It's a simple div like this:
<div id="request-count" class="noticount"></div>
The CSS looks like:
.noticount {
background: none repeat scroll 0 0 #E43C03;
color: #FFFFFF;
font-size: 0.6em;
font-weight: bold;
position: absolute;
top: 3px;
left: 3px;
text-align: center;
}
I've checked the page sounce and my javascript is correctly setting the value so the div ends up looking like this:
<div id="request-count" class="noticount">1</div>
The only way I can get this to actually show up is by manually hacking the live CSS and setting the Width and Height, then it shows up without a problem.
The really odd bit is that the content "1" never shows in the div either. Very confused over this and really don't know what to try.
Not sure if this is significant or an oddity with FireBug but sometimes this div appears in the code view slightly tranparanent which usually disnifies that an element is display:none which I'm not getting either.
What can I try to solve this?
EDIT
Here is a fiddle displaying the problem:
http://jsfiddle.net/UYa5Z/
Not sure of the exact reason, but it appears that the formatting of your font-size is not working as intended. With the example that you linked, if you simply change the font-size of the noticount class from em based to px based it seems to fix the issue.
.noticount {
background: none repeat scroll 0 0 #E43C03;
color: #FFFFFF;
font-size: 10px; /* this instead of font-size: 0.6em */
font-weight: bold;
position: absolute;
top: 3px;
left: 3px;
text-align: center;
}
JSFiddle
Edit:
Based on my second comment below, I investigated the issue further. As this JSFiddle shows, you can keep .noticount's font-size relative if you remove the font-size: 0; from both ul#moomenu and ul#moomenu li. I'm not sure what the purpose of setting those to 0, but given you use px (instead of em) on ul#moomenu a and ul#moomenu ul a I'd suggest using my first suggested fix as it's consistent with the other font-sizes you set in your css.
Make sure the parent of.noticounthas a relativeposition that will fixe the problem
.noticountParent{
position:relative;
}
.noticount{
position:absolute;
}
Html:
<article class=noticountParent>
<div id="request-count" class="noticount">1</div>
</article>
Your ul#moomenu and ul#moomenu li define font-size:0
Since the .noticount has font-size:0.6em, the resulting font size is... 0
A font size of zero is invisible.

What's wrong with my simple button?

I'm essentially trying to create a div which is an image of a button, and when the user clicks it a function is executed. For some reason the div is not showing up at all! What in the world am I setting wrong?
CSS:
#customizeButton
{
background-image:url('images/customizeButton.png');
position:absolute;
top:35%;
left:25%;
width:370px;
height:350px;
background-repeat:no-repeat;
-webkit-background-size:100% auto;
z-index: 150;
}
HTML:
<div id ="customizeButton"></div>
It has to be something with the CSS side. I've got almost identical code for another "button" which I use as an exit button, but it uses a text character instead of an image. It works just fine...
Here's the code for reference:
CSS:
#statSheetExitButton
{
width: 40px;
height: 40px;
position: absolute;
font-weight: bold;
top: 17%;
left: 74%;
font-size: 150%;
font-style: normal;
color: black;
z-index: 50;
}
HTML:
<div id ="statSheetExitButton">X</div>
And again, the question is why the customizeButton is not showing up.
EDIT: ANSWER The problem was that I had the html code for my initial Stat Sheet components in another html file in the same folder, and my program was only listening to that file.
Is this the correct path to your image?
background-image:url('customizeButton.png');
This would only work if the img was in the same directory as the css.
You are absolute positioning your element. Could you be positioning it on top of a relative positioned element that is causing it to be placed outside of the viewport of the browser screen. Use the inspector tools in Chrome, Firefox or Safari to find out where the div is. That'll get you on the right track.
I think your div is empty so that,s why div is not showing, try to write some text or some thing else in div
My thoughts:
display: block; missing
you don't need background-repeat(nor -webkit-background-size), because you are giving it a height & width
if you are only positioning this container, you do not need z-index
Make sure your button is inside a positioned element, which isn't itself hidden.

Categories