I have a site that I would like for new users to see a contact us when the page loads. I have tried numerous methods and gotten an overlay but the ability to hide and continue onto the page is not working.
$(document).ready(function() {
$('#overlay').fadeIn();
});
$('button').click(function() {
$('#overlay').fadeOut(200, "linear");
});
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="myNav" class="overlay">
<h1>Text</h1>
<button>hide</button>
</div>
</body>
</html>
If any suggestions for closing the popup exist please share.
There are a bunch of ways to hide an element, being the most common one to set
document.getElementById("myNav").style.display = "none";
And to show it again
// Empty to have the one specified by CSS or the element default.
// Or "block", "inline", "inline-block"... Whatever fits you better.
document.getElementById("myNav").style.display = "";
If you hide by height (is a good decision if you have a CSS transision, but you need fixed heights), you need to set the element overflow to hidden. By default, if the content of an element is bigger than the element size it will be shown, so your .overlay class should have overflow: hidden to hide it.
By the way, you are using dynamic heights so you are not using transitions. As a recommendation, use the display way instead.
EDIT: Just noticed the ID problem that #Rubenxfd points out. He is right. Is going to be the main problem for sure.
Also, another problem you have is that you run this code
$('button').click(function() {
$('#overlay').fadeOut(200, "linear");
});
before the button element is rendered, so the event won't attach to it as it don't exists. You should attach it when the page is ready, so you have to move it inside the ready function, like this:
$(document).ready(function() {
$('#myNav').fadeIn();
$('button').click(function() {
$('#myNav').fadeOut(200, "linear");
});
});
Notice the difference.
You are using an class, but calling an id in your jQuery.
Change your jQuery to this:
$(document).ready(function() {
$('.overlay').fadeIn();
});
$('button').click(function() {
$('.overlay').fadeOut(200, "linear");
});
Fiddle
You had a # instead of a ..
$('#overlay').fadeOut(200, "linear"); will happen to the element with the id overlay not to the class. if you write $('.overlay').fadeOut(200, "linear");it will happen to all elements with the class of overlay
$(document).ready(function() {
$('.overlay').fadeIn();
});
$('button').click(function() {
$('.overlay').fadeOut(200, "linear");
});
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="myNav" class="overlay">
<h1>Text</h1>
<button>hide</button>
</div>
</body>
</html>
Related
I am creating a website and I need some help with an issue. I will upload a picture for you to understand it better.
I have a big image in the middle, and below it there are some words that act like links(). I need this to happen:
1. The big image appears as the website loads.
2. When I click on a button (the words acting as links), I want the big image to fade out, then change the image src (so a different image will be displayed in the big image container) and then this different image will appear fading in.
It's something like this:
I've already tried to get this by using some jQuery, but I don't get it to work. I thought it would be something like this, but it's not working, as the image src changes, then the image appears, and after that the image fades out, leaving an empty space instead of the image:
$('.button3').on({
'click': function(){
$("#change-image").fadeOut("slow");
$('#change-image').attr('src','img/project3.jpg');
$("#change-image").fadeIn("slow");
}
});
$('.button4').on({
'click': function(){
$("#change-image").fadeOut("slow");
$('#change-image').attr('src','img/project4.jpg');
$("#change-image").fadeIn("slow");
}
});
etc.
Can anybody help me solving this? I know how to fade out, how to change image src, and how to fade in, but I can't do all together as I would like.
Thank you very much!!
fadeOut takes a second parameter, a function. You can then do what you need to do after the first image is faded out.
$('.button3').on({
'click': function(){
$("#change-image").fadeOut("slow", function() {
$('#change-image').attr('src', 'https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
$("#change-image").fadeIn("slow");
});
}
});
img {
height : 150px;
width : 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg"/>
<br/><button class="button3">Click</button>
I suggest you use animate.css(https://daneden.github.io/animate.css/) so you can just manaipute this by just adding class or removing class.
npm i animate.css
Make sure #change-image has this class "animated"
$('.button3').on({
'click': function(){
$("#change-image").addClass('fadeOut');
// let keep a time out, so that it will give us a little delay to see the effect of fadeOut before fadeIn happens
setTimeout(() => {
$('#change-image').attr('src','img/project3.jpg');
$("#change-image").removeClass('fadeOut').addClass('fadeIn');// remove the first class...else it will have the two class fadeOut and fadeIn...
}, 1000);
}
});
$('.button3').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg');
})
.fadeIn(3000);
}
});
$('.button4').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
})
.fadeIn(3000);
}
});
<!DOCTYPE html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg" width="500" height="333">
<button class="button3">Button1</button>
<button class="button4">Button2</button>
</body>
</html>
Try the below code..Replace the image src after fadeout.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg" width="500" height="333">
<button class="button3">Button1</button>
<button class="button4">Button2</button>
<script>
$('.button3').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg');
})
.fadeIn(3000);
}
});
$('.button4').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
})
.fadeIn(3000);
}
});
</script>
</body>
</html>
I have two following div elements:
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>
The div called 'geolocation-common-map' is removed using jQuery when the page is loaded. I would like to know how can I load this div again after the div 'staticMap' is clicked. So far I have following jQuery, but I need to replace .show() function.
$('.geolocation-common-map').remove();
$('.staticMap').on("click", function(event) {
$('.geolocation-common-map').show();
$('.staticMap').remove();
event.preventDefault();
});
Any ideas how to do this?
Thank you in advance.
According to detach documentation:
The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
You can use it as follow:
var dv_geolocation_common_map = $( ".geolocation-common-map" ).detach();
var dv_staticMap = $('.staticMap');
$('.staticMap').on("click", function(event) {
dv_geolocation_common_map.insertAfter(dv_staticMap)
dv_staticMap.detach();
event.preventDefault();
});
.staticMap{
width:100px;
height:100px;
background-color:green;
}
.geolocation-common-map{
width:100px;
height:100px;
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>
Instead of remove(), try toggle():
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>
<script>
$(document).ready(function() {
$('.geolocation-common-map').hide();
$('.staticMap').on("click", function (event) {
$('.geolocation-common-map').toggle();
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#geolocation').hide();
$("#staticMap").click(function(){
$('#geolocation').show();
});
});
</script>
<style>
.selected {
color:red;
}
.highlight {
background:yellow;
}
</style>
</head>
<body>
<div id="staticMap" class='staticMap selected'>Static Map</div>
<div id="geolocation" class='geolocation-common-map highlight'>Geolocation Map</div>
</body>
</html>
Adding id to your your static div or changing the id to class in jquery will do your work.you are using staticMap as id but it is not defined in div.
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<script>
$("#slideshow").fadeIn("slow", function() {
$("#slideshow").attr('src','2.jpg');
});
</script>
</body>
I am trying to make a jQuery script where 1.jpg fades out and 2.jpg fades in but I only see 1.jpg and it stays there
Try something like this:
$( "#slideshow" ).fadeOut( "slow", function( ) {
$( "#slideshow" ).prop('src','2.jpg').fadeIn('slow');
});
jsFiddle example
This will fade out the original image, and once the fade has completed, change the image's src property, then begin to fade in the new image.
This will work for however many images you add. As long as they have the class slideshow.
Also this allows you to crossfade images. See below for non-crossfade below.
See this Fiddle.
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<img id='slideshow' src="2.jpg">
<script type="text/javascript">
$(document).ready(function () {
$(".slideshow").hide();
var item = 0;
loop = setInterval(function() {
if(item == $(".slideshow").size()) {
item = 0;
}
$(".slideshow").fadeOut(300);
$(".slideshow").eq(item).fadeIn(300);
item++;
}, 3000);
});
</script>
</body>
Non-Crossfade
$(".slideshow").fadeOut(300, function () {
$(".slideshow").eq(item).fadeIn(300);
});
UPDATE
You can add the following css to get the images to display in the same space.
.slideshow { position:absolute; }
According to what you are saying .. If I understand you correctly ... Although I may be mistaken, it seems like you are asking 1 to fade out .. change to 2 ... and fade 2 in?? If so, will this not work?
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<script>
$("#slideshow").fadeOut();
$("#slideshow").attr('src','2.jpg');
$("#slideshow").fadeIn();
</script>
</body>
That's the simple version, of course I would assume it will be put it inside a function on an .on() event or the like etc ...
I am new to web-designing. I have this sample code which toggles a div when we click anywhere on the window.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
</script>
</body>
</html>
How can I add an image and change the image for show and hide? I have an '>' icon. When I click on it, div should appear and '>' should change to '<'
$('#buttonid').on('click', function () {
$('#toggle').toggle('slide');
});
add a button with an unique id like this
<button id="buttonid">click to toggle </button>
I think you can do as follow
<img src='source:<' id='imageid' data-othersource='source:>' />
You can declare an image like that with the two sources and then switch the src in jQuery.
//wait for the document to be fully loaded to execute
$(document).ready(function(){
//use event delegation
$(document).on('click','#imageid',function(){
var $this= $(this);
$('#toggle').toggle('slide',function(){
//swap src of the image on toggle is completed
var imgsrc = $this.attr('src');
$this.attr('src',$this.data('othersource'));
$this.data('othersource',imgsrc)
});
});
});
This way if for some reasons, you have to change the images, you don't need to get back to script, you just need to change the html.
http://jsfiddle.net/AmqcY/
Note: event delegation is not necessary in this case, but still i think it's important you read about that part for furthur use.
instead of registering the click handler to document, register it to a button
if you have a button with id mybutton then
//dom ready handler so that the script is executed after the dom is loaded
jQuery(function(){
//register the click handler to an element with id mybutton
$('#mybutton').click(function () {
$("#toggle").toggle("slide");
});
})
Demo: Fiddle
By id:-
<button id="button_id">click to toggle </button>
$('#button_id').click(function() {
$( "#toggle" ).toggle( "slide" );
});
By class:-
<button class="button_class">click to toggle </button>
$('.button_class').click(function() {
$( "#toggle" ).toggle( "slide" );
});
Try like this
$('#yourbuttonId').click(function () {
$("#toggle").toggle("slide");
});
Demo
Try this Code
$('body').on('click',function(){
$('#toggle').toggle('slide');
});
jQuery is doing something strange for me: it just doesn't work and hides the div only for split a second. What am I doing wrong?
The code in question, as simple as can be.
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Experiment</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<script>
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
}
</script>
Hide
<div class="thread">I like trains.</div>
</body>
</html>
I am using Chromium on Linux. I see the div dissapear for split a second, but it appears again immediately.
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
return false;
}
it is not hiding again it is the page that is being refreshed because href="" links to same page
NB: i guess you used onClick="doHiding()" for the sake of demo only (otherwise handle your event within jquery scope)
You could try changing
<a href="" onClick="doHiding()">
into
<a href="#" onClick="doHiding()">
See: http://jsfiddle.net/aVNuf/
You can try the click event in jquery instead doing it inline.
http://jsbin.com/iseref/1/edit
html:
Hide
<div class="thread">I like trains.</div>
jQuery:
$(function(){
$('a').on('click', function(e){
e.preventDefault();
doHiding();
});
});
function doHiding() {
$("div.thread").each(function() {
$(this).hide();
});
}
try
href="#"
its work for this case