Okay. So I've done button which shows four more items (divs). Can somebody help me how to toggle this button? I want hide this four items by clicking for the second time on the same button.
Here is code:
<script type="text/javascript">
function showDiv() {
document.getElementById('four-more-portfolio-items').style.display = "block";}
</script>
And HTML:
<div id="four-more-portfolio-items" style="display: none;">
......
......
......
</div>
You can use jQuery toggle() method for this task.
$("#button_id").click(function() {
$("#four-more-portfolio-items").toggle();
});
See http://api.jquery.com/toggle/
Script:
<script>
function showDiv() {
var x = document.getElementById("four-more-portfolio-items");
if(x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
HTML:
<div id="four-more-portfolio-items" style="display: none;">
......
......
......
</div>
<button onClick="showDiv()">Show Div</button>
At start of program div isn't showing, but after one click button it is.
I want to close modal ONLY when user clicks on close button. I know, how to do this in Bootstrap. Could you help with Materialize?
You can customize the behavior of Materialize modal using Options which can be found Here at the bottom of the page
change option dismissible to false (which by default in modal plugin is true) so modal only get closed when click on close button.
$('.modalselector').leanModal({
dismissible: false
);
Example Modal
$(document).ready(function(){
$('.modal-trigger').leanModal({
dismissible: false
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
You can close the modal with the following code:
$('#modalname').closeModal(); or $('#modalname').modal('close');
$(document).ready(function(){
$('#modal1').openModal({
dismissible:false
});
});
Try This It worked for me
Below code worked for me with materialize.css 1.0.0
$(document).ready(function(){
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems,{
dismissible:false
});
var singleModalElem = document.querySelector('#login-page');
var instance = M.Modal.getInstance(singleModalElem);
instance.open();
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="login-page" class="modal">
<form class="login-form">
<div class="row">
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input class="validate" id="nick_name" type="text">
<label for="nick_name" data-error="wrong" data-success="right">Nick Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
Entra
</div>
</div>
</form>
</div>
None of the methods worked for me. However, this did,
$('#modal1').closeModal({ dismissible: true});
The leanModal(), openModal(), and closeModal() all failed for me. Things must have changed since then. Instead:
$("#modal1").modal({
dismissible: false
});
or even just calling the modal a second time:
$("#modal1").modal();
Just set the data-backdrop property to static.
If you only want to insert button for closing the modal (sometime CSS conflict won't allow the modal to close) use this:
<span
class="modal-action modal-close"
style="float:right; font-size:30px;"
onclick="$('#myModal2').closeModal();"
>
X
</span>
Came across the need to do something similar and thought I'll share this for others who are looking for it too. I'm using Materialize 1.0.0 and none of the suggestions above worked for me. Basically, we want to be able to have control over the modal's 'dismissible' property and change it whenever we want, from wherever we want and it shouldn't matter if it is before or after the modal is open. The most elegant way I found was to do it this way. This will control the modal's behavior from disappearing when a user clicks outside of its area.
var m = M.Modal.getInstance(modal);
m.options.dismissible = true|false;
where the modal param is your modal div.
Hope that helps.
Pure JavaScript, this is the way.
The span element that will close the modal.
var span = document.getElementsByClassName("close")[0];
When you want to click the X to close the modal you can use this.
span.onclick = function() {
modal.style.display = "none";
}
If you are clicking outside of modal this will close the modal.
window.onclick = function(event) {
if(event.target == modal) {
modal.style.display = "none";
}
}
$(".modal4").addClass('modal-close');
Where modal4 is class of modal you want to close
In Vue Js, By using materialize-css package
Install package npm i materialize-css
import the package import M from 'materialize-css';
Attach the code below in your eventListener such as click
methods: {
closeMaterializeModal(){
var elem = document.getElementById("modal4");
var instance = M.Modal.getInstance(elem);
instance.close();
}
}
Below code worked for me.
$('#modal1').closeModal();
Reference: materializecss
How can I put dynamic amount multiple slider on a single page? I could use 2 sliders on a page as follows:
<script>
jssor_sliderb_starter1 = function (containerId) {
...
};
jssor_sliderb_starter2 = function (containerId) {
...
};
<div id="sliderb_container1">
...
<script>
jssor_sliderb_starter1('sliderb_container1');
</script> </div>
<div id="sliderb_container2">
...
<script>
jssor_sliderb_starter2('sliderb_container2');
</script> </div>
But what if I dont know the amount of the sliders? Please help..
I have added 4 identical sliders on my page with different images and captions and used the following code and it works fine.
<!-- Jssor Sliders -->
<script>
jssor_sliderb_starter = function (containerId) {
...
};
</script>
<!-- Jssor Slider Begin -->
<div id="sliderb_container1" class="sliderb_con">
...
<script>
jssor_sliderb_starter('sliderb_container1');
</script>
</div>
<div id="sliderb_container2" class="sliderb_con">
...
<script>
jssor_sliderb_starter('sliderb_container2');
</script>
</div>
<div id="sliderb_container3" class="sliderb_con">
...
<script>
jssor_sliderb_starter('sliderb_container3');
</script>
</div>
<div id="sliderb_container4" class="sliderb_con">
...
<script>
jssor_sliderb_starter('sliderb_container4');
</script>
</div>
<!-- Jssor Slider End -->
So now if I add more sliders i will have to use different ids only. I was confused about how to use the ids to call the function and thought i have to write different functions for each slider. But the code worked. Thank You :)
<!-- Jssor Sliders -->
<script>
jssor_sliderb_starter = function (containerId) {
}
</script>
<div id="sliders">
<!-- Jssor Slider Begin -->
<div class="sliderb_con">
</div>
<div class="sliderb_con">
</div>
<div class="sliderb_con">
</div>
<div class="sliderb_con">
</div>
<!-- Jssor Slider End -->
</div>
<script>
var slidersElement = document.getElementById("sliders");
for (var tmpEl = slidersElement.firstChild; tmpEl; tmpEl =tmpEl.NextSibling) {
if (tmpEl.nodeType == 1) {
jssor_sliderb_starter(tmpEl);
}
}
</script>
I have a popup window that pops up when someone click on a button. The problem is that I want to have 6 buttons that will display different content but use the same style which doesn't work for me. Here is my current code (I found it on another post a few days ago):
JSFiddle: http://jsfiddle.net/j4c7U/
CSS:
#overlay {
display:none;
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:#000;
opacity:0.5;
z-index:99999;
}
#popup {
display:none;
position:fixed;
left:50%;
top:50%;
width:300px;
height:150px;
margin-top:-75px;
margin-left:-150px;
background:#FFFFFF;
border:2px solid #000;
z-index:100000;
}
HTML:
<button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
Popup contents here
<button id="CloseBtn">ClosePopup</button>
</div>
<div>
some other content that will be behind the popup
</div>
Javascript:
window.onload = function() {
document.getElementById("LearnMoreBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("CloseBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";
}
};
I don't know if I completely understand the problem. Here is my JSFiddle with what I believe you're asking for.
Here is the resulting HTML:
<button id="LearnMoreBtn">Learn More</button>
<button id="LearnMoreBtn2">Learn More2</button>
<div id="overlay"></div>
<div id="popup">
Popup contents here
<button id="CloseBtn">ClosePopup</button>
</div>
<div id="popup2">
Popup2 contents here
<button id="CloseBtn2">ClosePopup</button>
</div>
<div>
some other content that will be behind the popup
</div>
I'm trying to create a Dojo dialog in Zend Framework but I've run into some problems. My view code looks something like this:
<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
data-dojo-config="async: true" dojoConfig = "parseOnLoad: true">
</script>
<script>
require(["dijit/registry", "dojo/ready", "dojo/dom", "dijit/Dialog", "dijit/form/Form"],
function(registry, ready, dom, Dialog){
ready(function() {
createDialog = function(titleText, contentText) {
var node = dojo.byId("foobar");
var myDialog = new Dialog({ title:"From Source Node" }, node);
myDialog.show();
};
});
});
</script>
<body class="claro">
<div data-dojo-type="dijit/Dialog" id="foobar" title="Foo!" style="display: none">
<p>I am some content</p>
</div>
</body>
The button code that loads the dialog looks as follows:
<button name="btnDialog" id="dialogbtn" type="button" onclick='createDialog();'>Open</button>
The first time the button is clicked the dialog opens as expected, but once the dialog is closed and the button is clicked again, the dialog doesn't open and I get the following error in the console.
Tried to register widget with id==foobar but that id is already registered.
What am I doing wrong?
Thanks
Figured it out. I think the form wasn't parsing correctly because the dojo-config was incorrect. Changed the javascript code as follows:
<script type="text/javascript" src="<?= $this->baseUrl('/js/dojo-release-1.7.2/dojo/dojo.js')?>"
data-dojo-config="async: true, parseOnLoad:true">
</script>
<script>
require(["dijit/registry", "dijit/Dialog"], function (registry)
{
createDialog = function createDialog()
{
registry.byId("foobar").show();
}
});
</script>
and the div as follows:
<body class="claro">
<div class="dijitHidden">
<div data-dojo-type="dijit.Dialog" data-dojo-props="title:'Foo!'" id="foobar">
<p>I am some content</p>
</div>
</div>
</body>
and now the dialog dijit is saved to the registry and it's working as expected