I am using https://jquerymodal.com to show a modal dialog in my home page. But I read in documentation:
Create a link with rel="modal:open" and set the href attribute to the modal's DOM id.
I´ve try change the interaction from click button to window load with:
<script>
$(window).on('load', function() {
$('#tour-virtual').modal('show');
});
</script>
I am new with javascript and I don´t know how to make this change.
Could you help me please?
You can do like:
$(window).on('load', function() {
$('#tour-virtual').modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<div id="tour-virtual" class="modal">
<p>Thanks for clicking. That felt good.</p>
</div>
Related
I am trying to call the specific link id #ext when page loads instead of clicking it manually to show the modal popup. However I am not able to achieve it. Can someone look into code and suggest a change?
<!-- Modal HTML embedded directly into document -->
<div id="ex1" class="modal">
<img src="image.jpg" />
</div>
<!-- Link to open the modal -->
<p>Open Modal</p>
The above code works fine when I do click on the link on the page "Open Modal". I want it to be called when page is loaded to show popup auto.
JSfiddle
Just for reference I am using this to show a modal popup: https://jquerymodal.com/
From the documentation:
You can manually open a modal by calling the .modal() method on the element:
As such you just need to call the modal() method on $('#ex1') when the page loads:
jQuery(function($) {
$('#ex1').modal();
});
jQuery(function($) {
$('#ex1').modal();
});
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css">
<div id="ex1" class="modal">
<img src="image.png" />
</div>
<p>
Open Modal
</p>
I have jquery issue, Kindly see my jquery code:
$(document).ready(function(){
$(".toggle_container").show();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
My .toggle_container is shown always its good, But I want to close it first time, when page load. Can you please provide me any solution?
I dont want to use $(".toggle_container").hide(); function for this problem because when i click on href then .toggle_container should not hide, It should open.
Regards.
You can just add attribute
style="display:none"
to your element .toggle_container.
Then on first call of $(document).ready it will be shown.
The full test example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
</script>
</head>
<body>
<h2 class="trigger">Toggle</h2>
<div class="toggle_container" style="display:none">Container</div>
</body>
</html>
Note: there`s no $(".toggle_container").show(); on $(document).ready
remove the
$(".toggle_container").show();
from your $(document).ready function.
in html part add style="display:none" for the toggle_container div.
check the #HCK s reply. he is clearly mentioned it..
Once the document gets loaded, a alert box will be prompted "page loaded".
$(document).ready(function(){
alert('page loaded'); // alert to confirm the page is loaded
$('.divClassName').hide(); //enter the class or id of the particular html element which you wish to hide.
});
I want to toggle between a div on a pop-up modal form. The problem i see is the document.ready() function on the modal page, which tries to load the parent form. It distorts the whole page and tries to show automatically if i load the main parent form. Is there something like div.ready()? how do i include this code on my pop up modal form?
Toggle code here
<html>
<head>
<title>jQuery test page</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#clickMe").click(function() {
$("#textBox").toggle();
});
});
</script>
</head>
<body>
<a id="clickMe">Toggle my text</a>
<br />
<div id="textBox">This text will be toggled</div>
</body>
Yes, such expressions like DOM_ELEMENT.ready() exists and very useful in scenarios like the one you are facing right now.
Update:
I found that this plugin is doing what you need :
jQuery.elementReady()
Examples:
1:
Change the source of a specific image as soon as it is loaded into the
DOM (before the whole DOM is loaded).
$.elementReady('powerpic', function(){
this.src = 'powered-by-jquery.png';
});
2:
If you want to have the jQuery object instead of the regular DOM
element, use the $(this) function.
$.elementReady('header', function(){
$(this).addClass('fancy');
});
3:
Chain multiple calls to $.elementReady().
$.elementReady('first', function(){ $(this).fancify(); })
.elementReady('second', function(){ $(this).fancify(); });
4:
Use the ‘$’ alias within your callback, even in noConflict mode.
jQuery.noConflict();
jQuery.elementReady('header', function($){
$(this).addClass('fancy');
});
5:
Change the polling interval to 100ms. This only works if $.elementReady() has not yet been called.
$.elementReady.interval_ms = 100;
I have a link that jQuery listens to, and if clicked it will toggle another div. The link also has an onclick javascript action. When I click the link, the div I want to toggle shows, but the javascript doesn't execute.
Is it possible to get the javascript to execute AND have jQuery toggle the div?
If so what would I put in the jQuery code to allow the link to execute the onclick javascript action?
jQuery script
$(function() {
$('#links a').live('click', function() {
$("#showall").toggle('slow');
});
});
my link
<div id ="links">
Play
</div>
for me the following is working in Chrome, Firefox and IE. Both pure Javascript (onclick) and jQuery click() get executed.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').click(function() {
$('div').toggle();
});
});
</script>
</head>
<body>
Click me
<div>
Some div content...
</div>
</body>
</html>
I do something like this:
$("#id1").html(data);
I refill a div with html but when I try to get the html of a child of this refilled div I get an empty string although it has, it's like the old child is still there but without html.
Edit:
I tried to reproduce my problem, here is the html: (click 2x times on refill and after click open you will see that nothing is going to happen)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/dot-luv/jquery-ui.css"/>
</head>
<body>
<script type="text/javascript">
$(function(){
$("#r1").click(function(){
var x = $("#main").html();
$("#main").html(x);
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<script type="text/javascript">
$(function(){
$("#a1").click(function(){$("#forDialog").dialog();});
$("#a2").click(function(){$("#forDialog").dialog('close');});
});
</script>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
</body>
</html>
I'm generating this javascript dynamically so the scripts that register a1.click and a2.click need to be inside the main div
I'm not quite sure as to the exact goal of your code, but I can make 3 general suggesions:
Use .delegate() to attach to once and future elements.
You can .hide() the HTML for you dialog box.
You can prevent the page from refreshing when a link is clicked using event.preventDefault(); in the click handler of that link.
Applying those suggestions to your code results in the following working code:
<script type="text/javascript">
$("body").delegate("#a1", "click", function(){
$("#forDialog").dialog();
});
$("body").delegate("#a2", "click", function(){
$("#forDialog").dialog('close');
});
$(function(){
// Hide HTML for the dialog.
$("#forDialog").hide();
$("#r1").click(function(event){
var x = $("#main").html();
$("#main").html(x);
// If you don't want the page to refresh by clicking
// on this A element, use the following:
event.preventDefault();
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
jsFiddle example
The old sub-DOM under the element will be gone after you reset its content with .html(stuff). It may exist floating around in memory somewhere, but it's detached from the DOM and you can't get at it.