I would like the popup to automatically set on and not have to click to make the event. Can you help?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#open').click(function(){
// enter code here
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
return false;
});
$('#close').click(function(){
$('#popup').fadeOut('slow');
$('.popup-overlay').fadeOut('slow');
return false;
});
});
</script>
</head>
<body>
<div id="content">
<div id="column-right">click aqui</div>
</div>
<div id="popup" style="display: none;">
<div class="content-popup">
<div class="close"><img src="images/close.png"/></div>
<div> enter code here
<h2>Contenido POPUP</h2>
</div>
</div>
Means whenever the page is loaded the pop up automatically opens without any client side event.
Just take the code out of the click() event:
And remove the div with .popup-overlay class. It's useless
$(document).ready(function(){
$('#popup').fadeIn('slow');
$('#popup').height($(window).height());
});
You may need to fade the #popup also.
$(document).ready(function(){
$('#popup').fadeIn('slow');
$('.popup-overlay').fadeIn('slow');
$('.popup-overlay').height($(window).height());
});
Related
The problem is simple, I just can't find a way to solve it. I just to display a text with a click of a button but when the page is reloaded I want the text to still be displayed without clicking the button again. My code is the following:
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<div id='result' style: 'display:none;'>
<p></p>
</div>
<form method="post" action="#">
<input type="button" value="Show" id='button'/>
</form>
<script type="text/javascript">
$(document).ready(function(){
var div1Show = localStorage.getItem('div1_show');
if (div1Show) {
$("#div1").remove();
} else {
$("#div1").show();
}
$("#button").click(function(){
$("#result").text("Complete");
$("#div1").show();
localStorage.setItem('div1_show', 'true');
});
});
</script>
You are placing a string into the cookie just change the following line
localStorage.setItem('div1_show', 'true');
To a boolean
localStorage.setItem('div1_show', true);
I am pretty new to JavaScript and frontEnd, I am trying to build a modal popup which asks for a form submission.Now what I am trying to do is to hide popup as soon the user clicks the submit button.
function openColorBox(){
$.colorbox({iframe:true, width:"50%", height:"50%", href: "new_greeting_form.html"});
}
setTimeout(openColorBox, 5000);
</script>
<script>
// if you want to use the 'fire' or 'disable' fn,
// you need to save OuiBounce to an object
var _ouibounce = ouibounce(document.getElementById('ouibounce-modal'), {
aggressive: true,
timer: 0,
callback: function() { }
});
$('body').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal-footer').on('click', function() {
$('#ouibounce-modal').hide();
});
$('#ouibounce-modal .modal').on('click', function(e) {
e.stopPropagation();
});
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/jackmoore/colorbox/master/example1/colorbox.css" />
<link rel="stylesheet" href="\ouibounce.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script src="\ouibounce.js"></script>
<div id="ouibounce-modal">
<div class="underlay"></div>
<div class="modal">
<div class="modal-title">
<h3> </h3>
</div>
<div class="modal-body">
<h2>ThankYou for coming!!</h2>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</body>
</html>
Anyone please help me in this,I'm new and not getting how to proceed in this.
There's a bug in bootstrap that leaves the background fade in place - you can fix this by also adding the following after the modal hide:
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
use this line when the user submit the form
$('#yourmodal').hide();
on submit of your form use the below line to hide.
$('#ouibounce-modal').hide();
I want a button with two functions when clicked; the button should vanish and a hidden p-tag (display: none;) should reveal itself.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button.call-us").click(function(){
$(this).hide();
$("p.phonenumber").show();
});
});
</script>
</head>
<body>
<p class="phonenumber" style="display: none;">0271 12222</p><button class="call-us">Call us</button>
</body>
</html>
The code above works flawlessly with w3schools testing tool.
But when I try to do it live at my website, nothing happends.
My .js-file (button-phone.js) contains the following:
(function($)
{
$("button.call-us").click(function(){
$(this).hide();
$("p.phonenumber").show();
});
});
(jQuery);
It's included in the code, far down, just before the body tag closes
<script type='text/javascript' src='http://example.com/wp-content/plugins/button/js/button-phone.js?ver=1.0.4'></script>
I have imported the jQuery library in my head-tag
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
HTML
<div class="wpb_wrapper">
<p class="phonenumber">555 000 000</p>
<p><button class="call-us">Call us</button></p>
</div>
CSS
.phonenumber {
display: none;
}
The p-tag is hidden, but nothing happends when I click the button.
Any suggestions?
Still a typo question... You have an extra closure, remove it and it will work:
Working example
(function($) {
$("button.call-us").click(function() {
$(this).hide();
$("p.phonenumber").show();
});
})(jQuery);
.phonenumber {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wpb_wrapper">
<p class="phonenumber">555 000 000</p>
<p>
<button class="call-us">Call us</button>
</p>
</div>
Try editing your button-phone.js to the below -
(function($)
{
$("button.call-us").click(function(){
$(this).hide();
$("p.phonenumber").show();
});
})(jQuery);
Change your jQuery to this and it will work
(function($){
$(".call-us").click(function(){
$(this).hide();
$(".phonenumber").show();
});
});
})(jQuery);
Working Fiddle
Suggestion, Try to bind jQuery with unique ids or class, don't use common class which you may use on other part of website
HTML
<div class="wpb_wrapper">
<p class="phonenumber" id="PhoneNo">555 000 000</p>
<p><button class="call-us" id="Call">Call us</button></p>
</div>
And jQuery
(function($){
$("#Call").click(function(){
$(this).hide();
$("#PhoneNo").show();
});
});
})(jQuery);
And CSS
#PhoneNo {
display: none;
}
Working Fiddle
I'm trying to slide the info but it doesn't work. Here is my code:
<div Class="article">
<div id="ebook1">Ebook1</div>
<div id="infoOfEbook1">
Download The Ebook1 From Here.
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js">
$(document).ready(function(){
$("#ebook1").click(function(){
$("#infoOfEbook1").slideToggle("slow");
});
});
</script>
You don't put your code inside the script tag with the src. Change it to this:
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ebook1").click(function(){
$("#infoOfEbook1").slideToggle("slow");
});
});
</script>
I want to alert something in the onclick event of a div .
This is my code:
<script type="text/javascript">
document.getElementById('new_div').click(function() {
alert(1);
});
</script>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
But when loading the page it displays an error:
document.getElementById("new_div") is null
What is the problem in my code?
Edit: This should be a better solution, I'm a bit rusty in JavaScript.
You need to load your JavaScript event handlers after the page is loaded. The simplest way is making your code load when the document finishes loading and the window casts an onload-event.
<script type="JavaScript">
window.onload = function(){
document.getElementById('new_div').onclick = function() {
alert("Good morning, you are very beautiful today!");
}
}
</script>
you defined that div after your javascript code, so when you add your handler the div doesn't exist yet
reverse your code like so
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
<script type="text/javascript">
console.log(document.getElementById('new_div'))
</script>
to correctly attach an event use addEventListener (and attachEvent for IE<9)
or simply use document.getElementById('new_div').onclick = ... (but not recommended since you remove any previous defined handler, if any)
The new_div is not yet loaded when your javascript executes.
Try something like this:
$(document).ready(function()
{
$('#new_div').click(function()
{
alert(1);
});
});
Edit
I assume you use jQuery because you use .click(function() {
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function clicked(item) {
alert($(item).attr("id"));
}
</script>
<div onclick="clicked(this);" id="test">test</div>
I think you jquery solves your problem beautifully.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#new_div').click(function() {
alert(1);
});
});
</script>
your HTML stays the same
try this
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#new_div").click(function(){
alert(1);
});
});
</script>
</head>
<body>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
</body>
</html>