I'm still learning, please help!
I am trying to apply a Modal Popup that appears only when a link is clicked instead of when the page loads. My Modal Popup does all work fine, but I want to turn off/prevent the Popup from appearing at all when the page loads and simply have it only invoke the Popup when my chosen link is clicked.
$(document).ready(function () {
$("#popup-1").myModal({
// Functionality goes below this line
});
});
And this
<div id="popup-1" class="myModal">
<div class="window">
<!-- Your popup content -->
<div class="wrap demo-1">
<div class="title">Some Text Here</p>
<form>
<input type="text" class="field" placeholder="Your email goes here" />
<input type="submit" class="closeModal send" value="Submit" />
</form>
<label class="deny closeModal">Some Text Here</label>
</div>
<div class="cta demo-1">
<span class="icon"></span>
<p>Some Text Here</span></p>
</div>
<!-- / Your popup content -->
</div>
</div>
Is there a simple fix I can apply to solve this issue? I have spent countless hours going through existing posts and forums but almost each enquiry doesnt target the same specific question im trying to achieve based on my actual existing code.
My cose for the Link Click to activate
Newsletter
your help is very much appreciated
Just execute your modal opening code when a link is clicked instead of when the ready event is fired :
$('#modal-link').on('click', function() {
$("#popup-1").myModal({
// Functionality goes below this line
});
});
assuming the link opening your modal is :
link
Related
I have been using the same file for over a year and suddenly on my local environment, my Google Maps API keeps opening up a "Keyboard Shortcuts" pop up when hitting enter. Usual when hitting enter, my cursor moves to the next required input field in the form. I have made no changes to my code but I have updated Sublime Text, my Text Editor and it seems to support .blade.php files now.
How my JavaScript looked after the update:
I ended up fixing the code and here is my code currently:
My Form:
Client Address
Search Client Address
</x-slot>
<div class="form-group row">
<div class="col-lg-12">
<label>Physical Address<span style="color: red"> *</span></label>
<input type="search" id="searchmap" class="form-control" placeholder="Search Address..." name="address">
<input hidden type="text" name="lat" id="lat" required>
<input hidden type="text" name="lng" id="lng" required>
<br>
<div class="form-group">
<div id="map-canvas"></div>
</div>
</div>
</div>
<!-- end::Row -->
<div class="form-group row">
<div class="col-md-12">
<label>Address Comments</label>
<textarea class="form-control" name="address_comments" id="address_comments" rows="3"></textarea>
</div>
</div>
</x-card>
My JavaScript:
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map-canvas'),{
center:{
lat: -26.18,
lng: 28.04
},
zoom:9
});
var marker = new google.maps.Marker({
Position: {
lat: -26.18,
lng: 28.04
},
map: map,
draggable: true
});
var searchBox = new google.maps.places.SearchBox(document.getElementById('searchmap'));
google.maps.event.addListener(searchBox,'places_changed',function(){
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for(i=0; place=places[i];i++){
bounds.extend(place.geometry.location);
marker.setPosition(place.geometry.location); //set marker position new...
}
map.fitBounds(bounds);
map.setZoom(18);
});
google.maps.event.addListener(marker,'position_changed',function(){
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
$('#lat').val(lat);
$('#lng').val(lng);
});
</script>
The pop up window:
If you don't need actual keyboard shortcuts button to display, you could hide it by setting the control options for the google map instance by:
keyboardShortcuts: false
The documentation doesn't specifically show you this, but they do mention the control at: https://developers.google.com/maps/documentation/javascript/controls
I had a similar problem on an older project I have to fix issues on. The Google Maps container is part of a <form>. However, this <form> has no action and in JavaScript there was no listener attached to the submit event.
<form class="some-class">
...
<div id="map-canvas"></div>
...
Send
</form>
The <a> has a click event attached to it, and will gather all data from the form and send it via ajax to an endpoint. There was also a keyup listener event where the "Enter" key was used to submit the data.
So this form breaks all kinds of rules
no action, thus page refreshes if submit event is triggered and nothing will have happened
the <a>-tag should have been a submit button, and the <form> should have a listener for the submit event
keyup event should not be necessary, the form handles the enter key automatically
the form shouldn't have been part of the form in the first place
The above breaks since a recent Maps change, where keyboard features were added. The Maps takes over the "Enter" key, instead showing the kayboard shortcuts of Maps.
We fixed this legacy code by changing the tag in a and attach a event listener to the form that listens for the submit event. We also removed the map out of the form, but this is not the cause of the issue.
Anyhow, another fine example of where native HTML element and JavaScript features should be used for what they are created for.
A bit hacky but you can use:
[class*='-keyboard-shortcuts-dialog-view']{
display:none;
}
I have a Bootstrap Modal in which I am trying to display a select2 control. The control shows up and it works perfectly well but it doesn't display properly. I have attached a screenshot of how it is rendering as. I also copied and pasted the exact same code to a regular page and that is displaying properly. I inspected the border property as well as various other css properties but am unable to determine why it is displaying like that. Can anyone give me some pointers on how I can solve this issue?
JsFiddle showing the issue
Note: Please maximize the width of the result window to see the issue in action.
Html:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Country</label>
<div class="col-sm-6">
<select class="js-example-basic-single form-control">
<option></option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</div>
</div>
</form>
Javascript:
$('.js-example-basic-single').select2({
placeholder: "Select country..."
});
EDIT:
I would also like to point out there is a dependency to the select2-bootstrap library. If I use just the select2 library, I am not witnessing this issue.
So I've seen the question asked a couple of times and eric martin answers with this:
I did the same thing on a site I'm building. I just created different content for each modal and gave each one a unique ID. So my content looked something like:
<a id='help'>HELP CONTENT</a>
<a id='about'>ABOUT CONTENT</a>
<a id='options'>OPTIONS CONTENT</a>
<div id='modal_help'>HELP CONTENT</div>
<div id='modal_about'>ABOUT CONTENT</div>
<div id='modal_options'>OPTIONS CONTENT</div>
Then in my JS, I have:
$('a').click(function (e) {
e.preventDefault();
$('#modal_' + this.id).modal({OPTIONS});
});
Hope that helps.
So, looking at the modal example demo:
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='osx-modal'>
<h3>OSX Style Modal Dialog</h3>
<p>A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the <code>onOpen</code> and <code> onClose</code> callbacks as well as custom styling and a handful of options.</p>
<p>Inspired by ModalBox, an OSX style dialog built with prototype.</p>
<input type='button' name='osx' value='Demo' class='osx demo'/> or <a href='#' class='osx'>Demo</a>
</div>
<!-- modal content -->
<div id="osx-modal-content">
<div id="osx-modal-title">OSX Style Modal Dialog</div>
<div class="close">x</div>
<div id="osx-modal-data">
<h2>Hello! I'm SimpleModal!</h2>
<p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p>
<p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
<p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p>
<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
</div>
</div>
I don't understand how to call a 2nd modal box on the same page. I know this is a newbie question, but it's confusing the heck out of me.
Thanks!
It would be more helpful to have a real example (simplified) of what you are trying to do. But, going with the demo code you provided, you could do the following:
HTML:
<div id='logo'>
<h1>Simple<span>Modal</span></h1>
<span class='title'>A Modal Dialog Framework Plugin for jQuery</span>
</div>
<div id='content'>
<div id='osx-modal'>
<h3>OSX Style Modal Dialog</h3>
<p>A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the <code>onOpen</code> and <code> onClose</code> callbacks as well as custom styling and a handful of options.</p>
<p>Inspired by ModalBox, an OSX style dialog built with prototype.</p>
<!-- added id -->
<a href='#' id='osx-modal' class='osx'>OSX Modal</a>
<!-- new link for second modal -->
<a href='#' id='second-modal' class='osx'>Second Modal</a>
</div>
<!-- modal content -->
<div id="osx-modal-content">
<div id="osx-modal-title">OSX Style Modal Dialog</div>
<div class="close">x</div>
<div id="osx-modal-data">
<h2>Hello! I'm SimpleModal!</h2>
<p>SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework.</p>
<p>SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development..</p>
<p>As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!</p>
<p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
</div>
<!-- content for second modal -->
<div id="second-modal-content">
contents of second modal
</div>
</div>
JavaScript:
$('a.osx').click(function (e) {
e.preventDefault();
$('#' + this.id + '-content').modal({OPTIONS});
});
I have a form that fits neatly into my colorbox. When the following validation function fires it creats dynamic labels that cause the form's height to pop a scroll bar.
I am trying to call $.colorbox.resize() every time the validation function runs but so far its not working?
My code so far
<script type="text/javascript">
$(document).ready(function(){
$("#logForm").validate();
$("#logForm").colorbox.resize();
});
</script>
form code
<div id="colorboxwrapper">
<form action="login.php" method="post" name="logForm" id="logForm">
<input name="doLogin" type="submit" id="doLogin3" class="button" value="Login">
</form>
</div>
This:
$("#logForm").colorbox.resize();
Should be this:
$.colorbox.resize();
I have expandoPane which consists of some buttons.
When I perform other operations in the project and then expand this expandoPane, its contents goes hidden and those are visble after resizing it using splitter only.
I want to solve this.
Do you have any idea why the content goes invisible?
You need to call .startup and .resize() on the content pane when it's shown.
Something like:
expandoPane.connect(this, "onClick", function() {
that.createContent();
that.startup();
that.container.resize()
});
Post your code and I'll probably be able to give you something more specific.
Adding sample code:
<div id="expandableConsole" dojoType="dojox.layout.ExpandoPane" region="bottom" showTitle='true' maxHeight="250px" maxWidth="280px" style="height:200px; width:100%;" doLayout='true' startExpanded='false' splitter="true">
<div>
<input type="button" id="btnSubmit" style="width:88px;height:20px" onclick="update()">
</div>
<div dojoType="dijit.layout.ContentPane" id="infoBar" style="height:150px">
</div>
</div>
When I expand the expandopane after few operations,button and contentpane go invisible.