I am using Materialize CSS and have several modals on my site. Some of them I want to open on loading a particular new page. Everything was working and then I switched to a fixed nav and all of a sudden the open commands aren't working.
It seems that the function is working but it is not changing the modal to display: block so it acts as if it is open, but nothing is visible and the body overlay has been turned on so that you can not scroll.
I have tried numerous different ways to implement the modal.open(); and from what I can tell it is that something is getting in the way of the function and overriding some of the styles.
I'm at a loss. Any help is appreciated.
<body>
<!-- NAVIGATION --->
<header>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<div class="row">
<div class="col s7 m2 valign-wrapper">
<a class="modal-trigger" href="#login"><img src="/images/Logo.png" alt="" class="loginLogo"></a>
</div>
<div class="col s5 m3 offset-m7 valign-wrapper">
<ul>
<li><button id="successBtn" data-target="signUpSuccess" class="btn btn-signUp btn-success modal-trigger">Sign up</button></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<!-- Modal Structure -->
<div id="signUpSuccess" class="modal">
<div class="modal-content">
<div class="row">
<div class="col s12">
<h4>You're signed up!</h4>
<p>We will notify you soon.</p>
</div>
</div>
</div>
</div>
Javascript:
$(document).ready(function(){
$('.modal').modal();
});
$(document).ready(function(){
$("#signUpSuccess").modal();
$("#signUpSuccess").modal("open");
});
To reiterate - The modals are still working when clicked but the #signUpSuccess modal is not opening on load and it was working prior to changing to navbar-fixed.
Materialize CSS: https://materializecss.com/modals.html
I hope this makes sense.
This can be done with instance.open().
<script>
document.addEventListener('DOMContentLoaded', function () {
var Modalelem = document.querySelector('.modal');
var instance = M.Modal.init(Modalelem);
instance.open();
});
</script>
Check documentation Materialize Modals, there are many options available for animations. You should also try using vanilla JS because jQuery is no longer a dependency.
Related
I have a this problem:
I use a jquery plugin fullPage.js by Alvaro Trigo on my website. The plugin script automatically inserts the html structure in certain elements... in my html I have:
<div class="section fp-auto-height-responsive" id="slider-section">
<div class="slide" id="co-delame-section">
<div class="slide-wrapper">
...
</div>
</div>
</div>
And when the page is loading, javascript generates extra html tags and css, so it looks like:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
</div>
I want to append more slides (slide class) for a certain page resolution, so that when user is on mobile with smaller screen, the extra slides won't load.
I do it with this javascript code:
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
});
And there is the problem... it works in about 50% page loads, the problem is that sometimes it appends the slides after the fullPage generates the structure, so that the appended slides are out of the slider structure... like this:
<div class="section fp-auto-height-responsive fp-section active fp-completely" id="slider-section" data-anchor="About" style="height: 638px;">
<div class="fp-slides">
<div class="fp-slidesContainer" style="width: 100%;">
<!-- the right place of a slide -->
<div class="slide fp-slide fp-table active" id="co-delame-section" style="width: 100%;">
<div class="fp-tableCell" style="height:638px;">
<div class="slide-wrapper">
</div>
</div>
</div>
</div>
</div>
<!-- appended slides out of slider blocks -->
<div class="slide" id="jsme-partner">
</div>
<div class="slide" id="vase-problemy">
</div>
</div>
So it looks the fullPage.js script runs before the slides are appended, but in the html head tag I firstly put the script to append the slides and fullPage is loaded after...
But what is really weird is that sometimes it loads correctly, sometimes not. Clearing the cache on refresh helps sometimes, but I can't say if there is any pattern with deleting the cache.
You can check it on http://marketingo.cz/en/?stack-overflow#About and give it a few refreshes with cache clearing to see...
The questions is - how can I ensure that the html is appended before the fullPage plugin modifies the code so that the appended sliders will be in a same container?
Thanks for a help! :)
Easy.
Just initialice fullPage.js after you append the slides by using the $.get callback.
$.get("http://marketingo.cz/wp-content/themes/twentysixteen-child/slider_cs.html", function (data) {
$("#slider-section").append(data);
//initialice fullPage.js here:
$('#fullpage').fullpage();
});
I'm facing an issue with my collapsible, that make the collapsible-body to open/close several times very fast when I click on a collapsible-header element.
Here is the modal trigger:
<a class="btn modal-trigger" href="#myModal">Trigger</a>
Here is my modal structure: (note the use of ng-repeat, not sure if it might be linked)
<div id="myModal" class="modal">
<div class="modal-content" >
<ul class="collapsible" data-collapsible='accordion' watch>
<li>
<div class="collapsible-header">FOO</div>
<div class="collapsible-body">foo</div>
</li>
<li>
<div class="collapsible-header">BAR</div>
<div class="collapsible-body">bar</div>
</li>
</ul>
</div>
</div>
The script ending my HTML:
<script>
$(document).ready(function(){
$('.modal-trigger').leanModal({
ready: function(){
$('.collapsible').collapsible()
}
});
});
</script>
I've been browsing around without finding any related issue. Any help will be much appreciated (do not hesitate to ask for clarification).
Thanks Allan for your answer, Although it is not related to the height:
The modal automatically vertical-expands itselfs when item is opening.
Setting a large min-height doesn't solve my issue.
This is my navbar code:
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" id="menu">
<li>ex</li>
<li>Another Link here</li>
</ul>
</div>
This is my modal code from my "modalexample.html" page
<div class="modal fade text-center" id="theModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button class="close" data-dismiss="modal">X</button>
<h1>Modal Example</h1>
</div>
<div class="modal-body"> Modal Information Here </div>
<div class="modal-footer"> Footer Stuff Here </div>
</div>
</div>
</div>
For some reason unknown to me, I can't get my modal to appear after clicking the link to the page (/modalexample.html#theModal).
Is there a reason why my anchor will not work from within a navbar?
Is there another way that I can write this to make my modal appear?
Notes: In both pages, I have included jquery-2.1.4.min.js and bootstrap.min.js (the jquery script is placed before the bootstrap script).
Also, I have included the link to bootstrap.css stylesheet at the beginning of both pages.
If more of my code is needed, please let me know.
Its not possible to fire an modal in another page via href anchor.
you can put a javascript code in modalexample.html to fire the modal when the page is loaded:
<script type="text/javascript">
$(window).load(function(){
$('#theModal').modal('show');
});
</script>
Today I learned about affix and the use of it with Bootstrap. I read all about it on the Bootstrap website and stack-overflow, and eventually checked How to use the new affix plugin in twitter's bootstrap 2.1.0? (see the jsfiddle link) as a good example.
But, I think I'm doing something fundamentally wrong. I added the right javascript to my index.php. I added the CSS to my stylesheet and just copy-pasted the nav-bar example from jsfiddle into my index.php. Nothing works.
HTML:
<div class="container">
<div class="row">
<!-- micro hero unit-->
<div class="span12">
<div class="well">
<h1> Some page title </h1>
<p>This is a website.</p>
<p> <a class="btn btn-primary" href="#">Tell me more</a>
</p>
</div>
</div>
</div>
</div>
JavaScript:
$(function () {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: {
top: $('#nav').offset().top
}
});
});
Can someone tell me what I did wrong?
New to this forum so please be gentle! I have been having issues with jQuery Accordions which are inside a set of tabs. The tabs work fine and so does the Accordion, but... what I really would like is to be able to use a link from within part of the Accordion to go to another part of the Accordion. The Accordion will be used as an instruction manual so therefore in certain sections there will be a bit that basically says to the user to "see this section".
I have checked on here at certain answers such as: jquery ui accordions within tabs and http://jsfiddle.net/9nKZp/1/show/#1| and have checked all over the internet searching for Accordions with anchors as well as Nested Accordions in tabs but I have YET to come across this being done!! Can't really believe that no one has done this!
Here is the code I have so far:
<!-- tabs -->
<link rel="stylesheet" href="/resources/css/tabs.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/resources/js/tabs.js"></script>
<!-- ENDS tabs -->
<!-- accordion -->
<link rel="stylesheet" href="/resources/css/jquery-ui.css" />
<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>
<!-- ENDS accordion -->
<script>
$(function () {
$(".accordion").accordion({
collapsible: true,
heightStyle: "content",
active: false,
});
});
</script>
<!-- TABS START -->
<div class="tabs_wrapper">
<!-- 1st new tab design START -->
<div id="new_tabs">
<ul>
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
<div id="new_tabs_content">
<div id="tab1" class="tab_content" style="display: block;">
<p>
Data on first tab
</p>
</div>
<div id="tab2" class="tab_content">
<h1>Tab2</h1>
<div class="accordion">
<h3><a id="#1">1</a></h3>
<div>
Content of 1
<div class="accordion">
<h3><a id="#1.1">1.1</a></h3>
<div>
Content of 1.1
<div class="accordion">
<h3><a id="#1.1.1">1.1.1</a></h3>
<div>
Content of 1.1.1, please see 2.1.2
</div>
<h3><a id="#1.1.2">1.1.2</a></h3>
<div>
Content of 1.1.2
</div>
<h3><a id="#1.1.3">1.1.3</a></h3>
<div>
Content of 1.1.3
</div>
</div>
</div>
</div>
</div>
<h3><a id="#2">2</a></h3>
<div>
Content of 2
<div class="accordion">
<h3><a id="#2.1.1">2.1.1</a></h3>
<div>
Content of 2.1.1
</div>
<h3><a id="#2.1.2">2.1.2</a></h3>
<div>
Content of 2.1.2
</div>
<h3><a id="#2.1.3">2.1.3</a></h3>
<div>
Content of 2.1.3
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab_content">
<h1>Tab3</h1>
<p>another load of data</p>
</div>
</div>
<!-- 1st new tab design END -->
</div>
<!-- TABS END -->
Please let me know if you require any further code that I am using such as the tabs.js etc.
Please help me! Is this at all possible?!
Many thanks and big hugs if you can help!!:-)
Here is the idea of how to get this one to work.
In the example http://jsfiddle.net/9nKZp/1/show/#1|1 it seems like the tabs linking works, but it only works when you load the page in a new tab, not from link.
You need your own jsfiddle (you already have one v.1), where you should place some example content WITH links from one tab/question to another pair tab/question (or there may have links to the same tab, but another question)! You also should implement the code from the semi-working example to your code.
Then the logic is as follows (examples using jQuery):
(1) Create on click event for each link you place inside the tabs, something like that:
$('#all_tabs_container a').click( function(){
checkInternalLinks();
});
In the function checkInternalLinks()...:
(2) You should check if the link is internal (#...) and if it is in a know format (like: #x|x or #x|x|x or both)
(3) When you validate this link you'll need to make the specific functionality to switch tabs and accordeons.
(4) The needed functionality already exists(!), but on page load, so you'll need to take some time on it and realize what is hapenning, so you can copy the same code to the onclick event function.
If you like the idea, you can start! Even if you can't complete it, I'm sure someone else will help :-)