Element moving after Jquery fadeIn() - javascript

I have a jquery script which controls some menu bars when activated. Basically, when the user presses the top menu bar, the bottom two would slide down and make space for the content (a html table in this case). After this, the content will use the fadeIn() function to appear on the page. However, at this point. the two bottom menu bars would jump further down the page.
Is there anyway to make them stay at their original positions on the page without change the .animate() function measurements?
Here is the relevant jQuery code:
menustatus=0;
function menuconfig(){
if(menustatus===0){
$('.menuhead2').animate({
top:"500px"
},300)
$('.menuhead3').animate({
top:"555px"
},300)
$('#table1').delay(300).fadeIn(300);
menustatus=1
}
And here is the relevant CSS code:
.menuhead2{ /*This is the one of the bottom menu bars */
position:relative;
top:80px;
cursor:pointer;
height:30px;
z-index:10;
}
.menuhead3{ /*This is the one of the bottom menu bars */
position:relative;
top:135px;
cursor:pointer;
height:30px;
z-index:10;
}
.menuhead1{ /*This is the top menu bar */
cursor:pointer;
height:30px;
position:relative;
top:30px;
}
#table1{ /*This is the content that fades in using the fadeIn() jQuery function. */
position:relative;
top:50px;
left:30px;
display:none;
z-index:9;
}

It's not super clear without a jsfiddle but try setting #table1 to position absolute instead of position relative

Related

Change scroll bar with perfect scroll

I am trying to find a way to change the scroll bar to a perfect scrollbar for the entire page
http://noraesae.github.io/perfect-scrollbar/
Any way to do so?
Make a div under the body that holds all the page's code. Give this CSS to the div:
position:absolute;
top:0px;
bottom:0px;
right:0px;
left:0px;
overflow: scroll;
Then just apply the perfect-scrollbar on the div.
A little explanation:
// Set the div's position
position:absolute; // Set the div display to be relative to the document
// Make the div cover the full page
// by setting all directions px to 0
top:0px; // Set the div start from top
bottom:0px; // Set the div start from bottom
right:0px; // Set the div start from right
left:0px; // Set the div start from left
// Set the div to show a scrollbar on overflow
overflow: scroll;

Keep the ads div fully in view

I've got to (unfortunately) put our ads onto our website. They're positioned down the right hand side of the page, outside of the content area.
When the screen width gets smaller, because it's positioned outside of the content they get cut off by the browser. I can offset everything by putting left: -someValuepx, which moves everything over.
Rather than having to put in lots and lots of media queries to keep slightly moving it over, is this something I can do in Javascript, to automatically keep them in the view? Ideally I'd like a function that I can run on page load, and then on the window resize event.
Here's a jsfiddle of the CSS at the moment. Edit the #container left attr to move the content.
And here's the code (as I believe it's required if you link to jsfiddle?)
HTML
<div id="container">
<div id="ads">
</div>
<div id="content">
</div>
</div>
CSS
#container {
width:500px;
min-height:100px;
background-color: firebrick;
margin:0px auto;
position:relative;
left:-50px;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:-170px;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
I have a pure css solution, if you change your div structure to the following:
<div id="container">
<div class="padding">
<div id="ads"></div>
<div id="content"></div>
</div>
</div>
You are able to use the following styles:
#container {
width:670px;
min-height:100px;
margin:0px auto;
position:relative;
}
#container > .padding {
margin-right:170px;
background-color: firebrick;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:0;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
#media (max-width:670px) /*this is the width of the container*/
{
#container {float:right;}
}
And this will keep your adds in view when the viewport is resized
Example
What you can do, is to create a function in JS that gets executed one time when the document is loaded and also when you resize.
This function should add a class (ie: hidden) to the the ads. you want to hide, and with CSS, give the right properties. Just addClass and removeClass, depending on the situation, should make the trick.
Example:
#ads { // normal values that makes the content of the ads visible }
#ads .hide  { // offset values to hide the ads }
This way, you keep behavior & presentation separated.
Hope it helps !
In your html markup, you have both content and the ads inside a container. The problem is that the content takes all space of the container, and the ads are positioned outside of it.
Just make the container wide enaugh to hold both content and the ads, then position them appropriately. Make one break point on the width of content+ads (660px), where you would position the ads below the content, and give the container its current width (500px).

Scrolling ability in a fixed div

I have a div that slide from the left 100% once you press a button. In that div it will display my menu for the site. The issue I am having is when on a small browser size the content gets covered and you are unable to see the rest of the links.
My div #slidingMenu has a fixed positioning and I gave the div an overflow-y:scroll. Once I added that code I did have the ability to scroll. But the problem was #slidingMenu now slides out displaying a white bar (scrollbar). Is there a way to have the main scrollbar of the browser control my menu in #slidingMenu when I scroll?
Here is the css and the file http://jsfiddle.net/bC5zh/6/
#footer{
background-color:#999;
width:100%;
height:50px;
position:absolute;
top:100%;
margin-top:-50px;
line-height:50px;
}
#toggle{
color:#FFF;
margin-left:50px;
cursor:pointer;
}
#slidingMenu{
position:fixed;
background-color:#999;
width:100%;
height:100%;
top:0;
left:-100%;
overflow-y:scroll;
}
You would use
overflow-y:auto;
To remove the scrollbar but allow for scrolling when inner content is overflowing, updated fiddle
For a smoother scroll on WebKit mobile devices you can use
-webkit-overflow-scrolling: touch;
Which mimics default iOS scrolling reference
Try adding in your css
#slidingMenu::-webkit-scrollbar {
display: none;
}
this will hide the scrollbar giving you the ability to still scroll on the site.

jquery - inserting a header section on an existing webpage

I am trying to inject a banner div
<div id='banner'></div>
on top of an existing webpage in such a manner so that when a person scrolls the webpage the banner remains on top. Also the webpage should be pushed down by the banner so that every part of the page remains accessible.
Here is my CSS:
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
}
Here is my jquery:
$("body").prepend("<div id='banner'></div>");
I tried using jquery to find all divs that were fixed and changing them to relative before executing the above line but still the banner does not work. The error is shown in the following picture https://drive.google.com/file/d/0B0sCu8aj8zu2akhtcEdtajJJZEU/edit?usp=sharing
Please Help.
And I am not looking for ad revenue here this is just a practice task.
Here is a jsFiddle I have created. The banner div is at the top of the page.
It stays at the top while scrolling.
The HTML:
<div class="page">
</div>
The css:
.oldBody
{
width:100%;
height: 3000px;
background-color: navy;
margin-top:250px;
}
#banner
{
position:fixed;
top:0px;
background-color:#FFFFFF;
width:100%;
height:250px;
border:2px solid;
z-index:10000;
}
The JS:
$("body").wrapAll("<div class='oldBody'></div>");
$("body").prepend("<div id='banner'></div>");
Please maintain z-index of banner div.Z-index should be grater then other div on that page.
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
z-index : 99999
}
i'd just like to present a different way to create the element:
var $banner = $('<div/>', { 'id' : 'banner' });
$('body').prepend($banner);
this technique for creating elements with jquery comes in handy when you have several different element to create. as a note, you can also create the element like so:
var $banner = $('<div/>').attr('id', 'banner');
I think the best way is first keep your ad on top in relative position when a person scroll page your function check the page-scroll .scrollTop() and then add fixed position on banner ad container just like freeze header, if you need further help in this regard let me know, I will provide you code. thanks I hope this technique will help you

Detecting hover and click through a transparent div

I feel like this question must have been asked before but I must not know the correct terminology to find an answer to it.
I have a transparent div that acts as a hit area. When the user hovers over this area a menu bar animates on to the screen. The problem is if the cursor moves on to this menu the animation to hide the menu begins. It doesn't sense that the cursor is over it. I can fix this by making the z-index of the hit area higher than the menu but then the menu buttons are not click-able.
Here's my code. Any ideas?
http://jsfiddle.net/92dYt/1/
CSS
#menu{
position:fixed;
top:-40px;
left:0px;
width:100%;
height:40px;
background-color:#000;
z-index:50;
}​
#hitarea{
position:fixed;
top:0px;
left:0px;
width:100%;
height:150px;
background-color:#eee;
z-index:49;
opacity:0;
}
HTML
<div id="menu"></div>
<div id="hitarea"></div>
JAVASCRIPT
$("#hitarea").hover(
function () {
$('#menu').delay(500).animate({
top: 0
}, 500, function() {
// Animation complete.
});
},
function () {
$('#menu').delay(500).animate({
top: -40
}, 500, function() {
// Animation complete.
});
}
);
You may want to nest the hit area as a background in the menu and code your own hover behaviour using mouseenter instead of hover.
http://api.jquery.com/mouseenter/
You can see from the example that mouseover fires for every child object while mouseenter fires just once. (Although if nested, the solution might work with hover too.)

Categories