Making a "scrolling" menu - javascript

I want to make a scrolling menu with my menu on my free hosted site.
What I mean by a scrolling menu is like at the bottom of the screen # CNET.com & ThePheed.net, my site is currently at Trigoblocks.comuf.com.
Does anybody know how to do this and could teach me or lead me in the right direction? (:

You div css should be something like the follwing:
position:fixed;
bottom:0;
left:0px;
width:100%;
As far as the wrap around effect in cnet is concerned, its probably a transparent .png positioned at the top of the div.
Example
<div style="height:200%;">Make scroll bar appear</div>
<div style="position:fixed; bottom:0; left:0px; height:25px; width:100%; background-color:#3c3c3c; border:solid 1px gray; padding:2px;">
<div style="color:gray;">Stuff</div>
</div>

Heh, and I thought you wanted something like this: http://jsbin.com/irovo/2
Guess I should visit cnet some day..

Related

How to apply Scrolling Animations when user starts scrolling a content

I need to Add some animations to an element when it is in viewport.
$(document).scroll(function(){
alert('How to animate with transitions left to right, top to bottom elements in my Structure ');
});
.main-container{
width:900px;
height:100%;
overflow:auto;
background:#00496d;
color:#fff;
}
#section1,#section2,#section3,#section4,#section5,#section6{
width:100%;
height:300px;
border:1px solid #fff;
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
<div id="section4"></div>
<div id="section5"></div>
<div id="section6"></div>
</div>
Try Skrollr.js for animation on scroll. Although this is not updated for quite a long time, but you might give it a shot based on your requirement. It matches your ask above.
Try animation on scroll.
Download library of AOS ans add in your code. Here is the link where you can find library and also complete example how can use in your html class.
https://michalsnik.github.io/aos/

How to improve PreLoadMe script to support browsers with disabled JavaScript?

Hi all, this script (by Niklaus Gerber) works, but there's one problem. Once I set it up, it starts from CSS styles by covering whole page with div. Then script comes to uncover fully loaded site, however, it also locks browsers with disabled JavaScript (infinite loading).
Can someone help me to unlock those users, by changing this script or suggest me something more friendly for also those folks? (it's not online yet).
The code is:
$(window).load(function() {
$('#status').fadeOut();animation
$('#preloader').delay(350)\.fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
})
For the HTML:
<div id="preloader">
<div id="status"> </div>
</div>
CSS:
body {
overflow: scroll;
}
#preloader {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff;
z-index:99;
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%;
top:50%;
background-image:url(../img/status.gif);
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px;
}
Thanks in advance for any sugestions.
Try this very simple solution
In your js add $('body').addClass('jsSupport');
and in your css hide the preloader by default, so when there is no JavaScript it will not show on screen.
#preloader{
display:none;/*hide when no js*/
}
When JavaScript exist, you can show it on screen using the extra css class.
.jsSupport #preloader {
display:block;/*show when js is supported*/
}
You can see how I set up the code here
Demo
You can disable the browser's JavaScript here to test it out
Full screen demo

Making a scrollable div which doesn't scroll the rest of the body

Should be simple but I can't work it out.
I have two panes on my webpage. I want both to be independently scrollable:
<body>
<div id="sidebar"> ... lots of content ... </div>
<div id="container"> ... lots of content ... </div>
</body>
#sidebar{
width:200px;
position:fixed;
overflow:scroll;
background-color:black;
color:white;
top:0;
left:0;
height:100%;
}
Here is a JSFiddle. Notice how when you scroll to the bottom in the black sidebar, and keep scrolling, the body starts to scroll? That's what I want to avoid. Is there a simple way to achieve this?
Please try following updated CSS. Here I have set 200px height after that it will add scroll bar for #sidebar div.
#sidebar{
width:200px;
position:fixed;
overflow:auto;
background-color:black;
color:white;
top:0;
left:0;
height:200px;
}
Hope it may help.!!
body {
overflow-y : hidden
}
helps you if you don't want body to be scrolled.
This is working if I understood your problem correctly. Just making overflow:hidden when mouse is over sidebar div.
#sidebar:hover + #container{
overflow-y: hidden;
height: some_value; // your window height
}
You´re right. In Chrome it happens.
Maybe some jQuery?
$("#sidebar").focus(function(){
$('body').css("overflowY","hidden");
});
$("#sidebar").blur(function(){
$('body').css("overflowY","scroll");
});
Add tabindex="-1" to sidebar to get this working
Actually Working

Button resizing changing all design

Hi I a creating a button using three divs and all divs have background images. This is how it looks like.
Button Demo
The button is fine but how can i resize it ?? I am doing like
.btncontainer{
position:absolute;
top:120px;
left:120px; cursor:pointer;
display:inline-block;
width:120px;
height:20px;
}
But it is changing the button design. What can i do to resize it dynamically with the text?
i want to look like this if the size is changed for example this image has different sizes.
So when i changing the .btncontainer then it should change the width and height of the elements inside it but this is not happening
As you precised in an upper comment; In this special case, you have to use images for left and right divs. I suggest you to set a proper height to them, in the html code.
This is not the best practise, but will do the work regarding your needs.
Please see the following example.
Please note you will have to change the #backgrounddiv height and line-height to match.
See fiddle here
CSS
.btncontainer{
position:absolute;
top:180px;
left:10px; cursor:pointer;
display:inline-block;
}
#leftdiv{
float:left;
}
#backgrounddiv{
background:url("http://i.share.pho.to/0ffe9c14_o.png") top center repeat-x;
float:left;
height:40px;
padding:10px;
line-height:40px;
}
#rightdiv{
float:left;
}
HTML
<div class="btncontainer" id="button">
<a href="#">
<div id='leftdiv'>
<img src="http://i.share.pho.to/ff6cc4e3_o.png" height="70px" />
</div>
<div id='backgrounddiv'>CLick Me </div>
<div id='rightdiv'>
<img src="http://i.share.pho.to/245be416_o.png" />
</div>
</div>

javascript to overlay a modal popup that is center aligned

want to know Simply the javascript to overlay a div on centre of the page.
Just want to use plain java script to show and hide a div on the center of the page with "Please wait..." message and disable the background. Also this div shoud show on top of the other content of the page.
My div looks like this
<div id='mydiv' style="display:none;" ><img src="myimg.gif" /> Please Wait... </div>
On click of a button , I want to show the div content center aligned on the page.
I do not want to use jquery,extjs,,etc to achieve this.
I have seen a few examples on the web with lot of other features added to a modal popup, just looking for something simple and clean.The bare minimum JS required to do this.
The div you want to display needs to have an ID:
<div id="loaderdiv">
Then in your javascript, you display this div with the following code:
document.getElementById("loaderdiv").style.display = '';
Thats the bare minimum you'll need.
Centering the image can be done using CSS:
<div style="position:absolute;top:50%;left:50%;margin-top:-[imgheight/2]px;margin-left:-[imgwidth/2]px">
<div class="overlay_msg" id="overlay_msg" style="width:350px; height:100px; background-color:#ffffff; margin-left:300px; margin-top:20%; visibility:hidden; z-index:201; position:fixed; padding:15px; text-align:center;">
example.com<br />
</div><!--overlay_msg-->
<div class="my_overlay" id="my_overlay" style="background-color:#000000; opacity:.7; position:fixed; z-index:200; width:100%; height:100%; margin:0px; padding:0px; visibility:hidden;" onclick="hideMyOverlay()">
</div><!--my_overlay-->
<script type="text/javascript">
function showMyOverlay()
{
document.getElementById('my_overlay').style.visibility='visible';
document.getElementById('overlay_msg').style.visibility='visible';
}
function hideMyOverlay()
{
document.getElementById('my_overlay').style.visibility='hidden';
document.getElementById('overlay_msg').style.visibility='hidden';
}
</script>

Categories

Resources