I'm very much basic to jquery so im doing a site where when the page loads, i want my Heading on the top jumbotron fadeIn while the buttons below remains constant.
Could someone help me with this.because the buttons stay on top when the page starts and comes back to its position, i mean to the bottom. when the page completely loads and the Heading fadein...
$(document).ready(function () {
$('.main-heading').fadeIn(1000).removeClass('main-heading-hidden');
});
.jumbotron {
background-image: url("googlenownewyork.png");
background-position: center center ;
background-repeat: no-repeat;
background-size: cover;
width:100%;
height: 600px;
margin:0;
padding: 0;
}
.main-heading{
color: white;
text-align: center;
padding-top:140px;
}
.main-heading-hidden{
display: none;
}
.header-button{
text-align: center;
padding-top: 30px;
}
.header-button .btn:hover{
color: white;
background-color: black;
}
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" ></script>
<script src="metcorp.js" type="text/javascript"></script>
<div class="jumbotron">
<div class="container first-div">
<div class="row main-heading main-heading-hidden">
<h1>Mount Edge Technologies</h1>
<h3></h3>
</div>
<div class="row header-button btn-padding">
<button type="button" class="btn">About Us</button>
<button type="button" class="btn">Get A Quote</button>
</div>
</div>
</div>
display: none removes the header from the layout of the page.
Rather than display, try opacity.
You can also do this with css3 animations fairly easily, avoiding needing to use jquery's fadeIn function at all.
Live Demo
Add this script link to your code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js" type="text/javascript"></script>
And Don't write this code in ready function:
write directly in script
$('.main-heading').fadeIn(2000).removeClass('main-heading-hidden');
Related
I'm working on a Web GIS, and I just learned about JavaScript and Bootstrap.
I want to make a website with 2 columns for text and map (col-4 and col-8). However, col-8 don't display the whole map, and I should scroll to the right and below to see more map. Also, the right-side map looks more extended than the navbar. I've tried to edit the style but it still doesn't work. Here's my html and css code:
HTML
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div>
<h3> About Jakarta Landmark Markers Map</h3>
</div>
</div>
</body>
<link rel="stylesheet" href="./leaflet/leaflet.css">
<div class="col-8">
<body>
<div id="map"></div>
<!-- <script src="index.js"></script>
<script src="./leaflet.ajax.js"></script> -->
</div>
</body>
</html>
CSS
.navbar{
padding: 20px 20px 10px 10px;
background-color: #28a7e9;
transition: all ease 0.4s;
position: relative;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
#map {
flex: 1;
width: 100%;
height: 360px;
position: absolute;
margin:0;
padding:0;
}
I have a project using fullpage.js. And I absolutely do not know how to put one big picture on two screens, so that it does not remain fixed.
Cut the big picture in half and save it as two pictures.
Set the first half as background-image of first section and second one as background-image of last section. You also need to change the background-position to 100% 50% for first and 0 50% for second.
In short:
.first-half {
background: url('/path/to/top-half.png') bottom center no-repeat /cover;
}
.second-half {
background: url('/path/to/bottom-half.png') top center no-repeat /cover;
}
See background shorthand for details.
Here's an example:
var slideTimeout;
$('#fullpage').fullpage({});
#section1{
background:url("https://i.stack.imgur.com/NKI2k.jpg") bottom center /cover;
}
#section2{
background:url("https://i.stack.imgur.com/JXODm.jpg") top center /cover;
}
#fullpage {
color: white;
}
.centered {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0,0,0,.65);
height: 100vh;
font-size: 3em;
font-family: sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.easings.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/>
<header id="header">
</header>
<div id="fullpage">
<div class="section" id="section1">
<div class="centered">
First Section
</div>
</div>
<div class="section" id="section2">
<div class="centered">
Second Section
</div>
</div>
</div>
So my question is how do I make a div push down everything that comes after it, even if the elements that come after have a fixed positions.
Let me explain the scenario:
I have the following structure:
<body>
<div class="top_menu">
</div>
<div class="content">
</div>
</body>
Where .top_menu has a position:fixed; and top:0;
Now using JavaScript I insert a new div right after <body> and wrap the rest in another div to end up with something that looks like this.
<body>
<div id="notice_bar">
</div>
<div id="wrap">
<div class="top_menu">
</div>
<div class="content">
</div>
</div>
</body>
Now is there a way to make the #notice_bar div always push down the #wrap div with all its content?
Changing the position:fixed; attribute of .top_menu is not an option because this script I’m working on should work on any given website.
I’m really running out of ideas here so any tips will be greatly appreciated. Thanks!
EDIT: Here is the specific scenario were I'm working on right now in case anyone feels generous enough to play arroudn with it :) http://mirlostudio.com/choeducators
If you want the notice bar to remain at the top, while the menu scrolls with the page you could use a little jQuery/javascript to toggle a class that adds fixed positioning to the menu:
Working Example
$(window).scroll(function() {
$('.top_menu').toggleClass('scrolling', $(window).scrollTop() > $('#wrap').offset().top);
});
.top_menu {
height: 20px;
width: 100%;
background: blue;
}
.content {
position: relative;
height: 600px;
background: grey;
}
.scrolling {
position: fixed;
top: 0px;
right: 8px;
left: 8px;
width: auto;
z-index: 100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notice_bar">Notice Bar</div>
<div id="wrap">
<div class="top_menu">Top Menu</div>
<div class="content">Content</div>
</div>
If you set the .wrap container to position: relative; - all elements inside the .wrap container that are absolutely positioned will be moved together with their parent container.
I'm just starting to learn about jQuery and I believe I have run into a road block. Essentially what I have is a that represents a clickable area with an inside. So I'm trying to use this code:
$(document).ready(function(){
$('#side_menu_icon').click(function(){
$('#side_menu').slideToggle('slow');
});
});
Where #side_menu_icon is the clickable area and #side_menu is just a placeholder with width,height, and color temporarily. By default I've set this <div> to display:none; because the example I was looking at did the same thing, assuming the jQuery function would set it to visible. When I click the area nothing happens, I've tried attaching the #side_menu_icon to both the <img> and the <div>. I think there might be something I don't understand about the and how documents inherit the code from one another so I'll include that as well:
<head>
<link rel="stylesheet" type="text/css" href="style/main.css"></link>
<script type="text/javascript" src="js/jquery-1.10.0.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title>Test Blog Site</title>
</head>
main.js is the file that calls the jQuery functions above.
Thanks for your time, I hope this is enough information for a solution.
EDIT:
Cut down version of HTML:
<body>
<div id="top_bar">
<h1 style="padding-left:1em;">Title</h1>
</div>
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
<div id="side_menu">
</div>
<div id="post_holder">
<img style="margin-bottom:-5px" src="images/post-collection-top-transparent.gif" />
<div id="post_collection">
<!-- stuff -->
</div>
<img src="images/post-collection-bottom-transparent.gif" />
</div>
</body>
Relavent sections being
<div id="side_menu_icon">
<img src="images/side-menu-closed-15px.gif" />
</div>
and
<div id="side_menu">
</div>
CSS:
body {
font-family: "Courier New";
background-image: url("../images/background-1728x1080.jpg");
background-size:100%;
background-attachment:fixed;
margin: 0;
}
img {
max-width: 100%;
width: auto;
height: auto;
outline-offset:0px;
}
h1,h2,h3,h4,h5,h6,div,p{
padding:0;
margin:0;
}
.post{
width:90%;
padding-left: 5%;
}
#top_bar{
width: 100%;
z-index:99;
position: fixed;
font-size:15px;
background-image: url("../images/item-background.jpg");
background-size:6%;
color: white;
}
#side_menu_icon{
border: 4px solid #6e3b10;
margin-top: 50px;
position:fixed;
right:0;
background-image: url("../images/item-background.jpg");
}
#post_holder{
z-index:98;
text-align:center;
margin:0;
position:relative;
}
#post_collection{
background-image: url("../images/post-background.gif");
background-size: 100%;
max-width: 900px;
text-align:left;
margin: auto;
}
#side_menu{
height:500px;
width:100px;
background-color:yellow;
display:none;
}
Relevant parts being #side_menu and #side_menu_icon I guess.
I found the solution to my question, some of the CSS was disrupting jQuery's ability to work properly. I will just have to find some way around that.
I am trying to optimize my website to different screen and window sizes. I want the content of a div to take up 100% of the browser height, not more than that, so that the user doesn't have to scroll down. I am not sure how to implement this, I tried this
$(window).on('load resize', function(){
$('.container-narrow').width($(this).width());
$('.container-narrow').height($(this).height());
)};
But this doesnt seem to work, the content still goes over the browser height. and I have to endup scrolling
CSS will recalculate on resize.
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0px;
padding: 0px;
}
.body {
height: 100%;
margin-bottom: -100px;
}
.header {
height: 100px;
background-color: #CCCCCC;
text-align: center;
}
.content {
text-align: center;
}
.footer {
height: 100px;
text-align: center;
background-color: #AAAAAA;
}
</style>
</head>
<body>
<div class="body">
<div class="header">
This is the header.
</div>
<div class="content">This is the content.</div>
</div>
<div class="footer">
This is the footer.
</div>
</body>
</html>