How to fade in a div on page load? - javascript

I'm using jQuery. I need a div to fade in when the page loads.
<div id=monster></div>
How can I achieve this?

It cannot be simpler:
$(function(){ // $(document).ready shorthand
$('#monster').fadeIn('slow');
});
If your div is not initially hidden, you could hide it before the animation:
$('#monster').hide().fadeIn('slow');
The speed parameter can be 'slow', 'normal', 'fast' or the number of milliseconds to run the animation.

jQuery/fadeIn
$(function() {
$("#monster").fadeIn();
});

See working demo
$('#monster').hide().fadeIn('slow');
#monster{
width: 200px;
height: 100px;
border: 1px solid #0095ff;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=monster>
<pre>
This is demo text.
This is demo text.
This is demo text.
This is demo text.
</pre>
</div>

Related

jQuery start page at certain div without scrolling

Is there a way to start the page at certain div without scrolling using jQuery?
For now i'm using this code:
$('html, body').animate({
scrollTop: $('.here').offset().top
}, 500);
But this, of course, scrolls to that div on page loading, i want it to just load the page straight to that div(if there is a certain cookie set)
You don't need to use animate to change the scroll position. Just do $('html, body').scrollTop($('.here').offset().top).
Or probably even simpler, just give the desired element an id and then set the window.location.hash to be that id.
You can use window.scrollTo():
const target = $('.here').offset().top;
window.scrollTo({
top: target,
behavior: 'instant'
});
.block {
height: 49vh;
background: red;
margin-bottom: 1vh;
}
.here {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block"></div>
<div class="block here"></div>
<div class="block"></div>
"if there is a certain cookie set"
If you're using any server-side scripting language to get/set that cookie, you could also append the id to the div as a hash to make it jump to that div.
So for example, if my page is
....
<div id="somecontent">...</div>
<div id="jumphere">...</div>
<div id="someothercontent">...</div>
...
and the url is http://www.myawesomewebsite.com/page#jumphere, then in most browsers, your page will jump to that point after load
You can run this javascript when the page loads. It will take you to the specified div with the id specified. Take a look at the snippet below:
let boxTop = $("#orange-div").offset().top;
window.scrollTo(0, boxTop);
.padding-div {
height: 200vh;
width: 200px;
background-color: red;
}
.box {
height: 100px;
width: 200px;
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="padding-div">
</div>
<div id="orange-div" class="box">
</div>
<div class="padding-div">
</div>

Map not opening without refreshing page once closed

The website i am currently working on has a pop out div with a map of locations on it, my problem is once the pop up div has been closed i then have to refresh the page to open the div again
It is running jquery - here is the code
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#view_map_of_stocklists_link').click(function() {
//$('#popupdiv').show('slow');
$("#popupdiv").css('visibility', 'visible');
$("#mappy").css('opacity', '1');
});
$('.closepopup').click(function() {
$('#popupdiv').hide('slow');
});
});
</script>
The styling
<style>
#popupdiv
{
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 600px;
margin-top: -200px;
width: 960px;
margin-left: -500px;
padding: 20px;
}
#view_map_of_stocklists_link:hover {
cursor:pointer;
}
.closepopup {
margin-top: 60px;
border: 1px solid #ccc;
background-color: #000;
color: white;
cursor: pointer;
}
</style>
and then the HTML itself
<div id="popupdiv" style="visibility:hidden;">
<center>
<iframe style="opacity:0;" id="mappy" src="http://mapsengine.google.com/map/embed?mid=zNedxWZ7lai0.krRxVqZZmyns" width="900" height="500"></iframe>
<div class="closepopup" style="width:200px">Close</div>
</center>
</div>
<h2 class="bold skin-font-color1">Our Beloved Stockists</h2>
<h5 class="skin-font-color1 p-wrapper"><!-- client txt --> <div id="view_map_of_stocklists_link" class="skin-font-color4">
<h4>View map of stockists</h4>
</div>
The website is http://www.tee-ze.co.uk/sosmoothies/
Cheers
You are setting 'visibility' to 'visible' instead of 'display' to 'block'.
When jQuery .hide() is called it ultimately saves the previous display value and sets it to display:none; So you should be doing something like:
$('#view_map_of_stocklists_link').click(function() {
$('#popupdiv').hide('slow');
});
Which I just realized you have commented out in your code. I wish I could leave a comment but I need more rep.
Edit:
Sorry for complaining in may previous answer.
I just tried uncommenting the existing code and removing the visibilty stuff and that works just fine in your site. Try it.
The way you're showing the popup map doesn't match the way you're hiding it.
You show it with:
$("#popupdiv").css('visibility', 'visible');
But you hide it with:
$('#popupdiv').hide('slow');
That fades it out but ultimately sets the CSS style display: none on the #popupdiv element.
When you try to show it again, it still has display: none on it. Setting the visibility doesn't affect the display style.
You need to make the hide and show match up. Either use the visibility style, or the display style, but use the same one for both hiding and showing (and jQuery's .show() method uses display).
For example, you might create the <div> with display: none instead of visibility: hidden, and then you can use jQuery's .show() and .hide() consistently.

Change jQuery element toggle

I have this example with a div which show / hide from the top, but I need it from the bottom to the top, I was trying to change some code, but I couldn't, and I didn't find any example.
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
Slide Panel
<div id="panel">
<!-- you can put content here -->
</div>
You can also use the animate effect(http://api.jquery.com/animate/) and change the height of the div.
$(document).ready(function(){
$(".btn-slide").click(function(){
if($('#panel1').height=='0')
$("#panel1").animate({height:"140px"},{duration:1000});
else
$("#panel1").animate({height:"0px"},{duration:1000});
});
});
this will act as a toggle as well as amimate from bottom
You probably want to use slide effect provided by the jQuery UI. It allows you to define the direction as well.
You might want to use animate option in jquery, here is the code
HTML
<button class="btn-slide">Some Text</button>
<div id="box">
<div id="panel">Sample Text here<br/> Sample Text here<br/>Sample Text here</div>
</div>
CSS
#box
{
height: 100px;
width:200px;
position:relative;
border: 1px solid #000;
}
#panel
{
position:absolute;
bottom:0px;
width:200px;
height:20px;
border: 1px solid red;
display:none;
}
JQUERY
var panelH = $('#box').innerHeight();
$(".btn-slide").click(function(){
$("#panel").stop(1).show().height(0).animate({height: panelH},500);
});
});

How to implement this cool popup div effect using jQuery?

When you click the icon on the page http://www.mansory.com/en/dealers you will find a div pops up displaying some information. I just cannot figure it out how they did the effect using css/jQuery things. What is the mechanism of the effect?
This mechanism is called animation. They simply show/hide the div and continuously change the position of the popup.
See more at http://api.jquery.com/animate/
I make a simple demo here
HTML:
<div class='container'>
<button id="btnShow">Show</button>
<div class='menu' style='display: none'>
<button id="btnHide">Close</button><br/>
Ernst-Heinkel-Strasse 7,<br/>
DE-71394 Kernen i.R. Germany<br/>
Contact <br/>
Telefon: 07151 / 994 64 -0<br/>
Fax: 07151 / 994 64 -22<br/>
www.herceg.com <br/>
email: info#herceg.com <br/>
</div>
</div>
JS:
$(document).ready(function(){
$('#btnShow').click(function(){
$('.menu').show().css("top", "400px").animate({top: 50}, 200);
});
$('#btnHide').click(function(){
$('.menu').hide();
});
});
CSS:
.container {
with: 400px;
height: 300px;
border: 1px solid black;
}
.menu {
position: absolute;
border: 1px solid black;
background: #fff;
left: 180px
}
They simply show/hide a div and position it absolutely over top the page. Take a look at the div with the id infobox and you'll see all the css needed to do this. Inside of infobox is all the text for the different countries already, each one surrounded by a div with the property display:none. Depending on what country you click on they will change the display property to block on the corresponding div and display:none on all the rest.

jQuery slideUp() trouble

I am having trouble developing a jQuery 'object'. I would like div1 (Refer to image below) to be the background div with an image in (Using a background image). I would then like div 2 (Refer to image below) to overlay div 1, which I can do. However, as I have little experience with jQuery it's the next part I'm struggling with. I would like, when you hover on div 2, I use jQuery slideDown() / slideUp() to show and hide div 3 (Refer to image below). It also needs to not close as it slides up (as the cursor will no longer be on div 2). Only when you're no longer hovering over the whole object will it close. I hope this makes sense... I just don't know where to start. If any more info is needed please ask.
Something like this should do it I believe, or at least it gives you a starting ground to play around with, and improve further.
Markup
<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
.wrapper {
float: left;
}
.one {
background-color: grey;
width: 100px;
height: 100px;
}
.two {
background-color: blue;
width: 100px;
height: 20px;
}
.three {
background-color: green;
width: 100px;
height: 100px;
display: none;
}​
JavaScript
$(function () {
$(".two").mouseenter(function (){
$(".one, .three").slideToggle();
});
$(".wrapper").mouseleave(function (){
$(".one, .three").slideToggle();
});
});​
A live example: http://jsfiddle.net/ZHxe5/1/

Categories