I am using tabs to display clear content, but one of them stopped downloading well since it is in the data-toggle tab. It is a Leaflet map.
Here is the code :
Navbar code :
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Données principales</a></li>
<li><a data-toggle="tab" href="#carte">Carte</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">Lorem ipsum</div>
<div id="carte" class="tab-pane fade"> **//see script below\\** </div>
</div>
Script :
<div id="carteBenef"></div>
<script type="text/javascript">
$(document).ready(function () {
var map = new L.Map('carteBenef');
var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png',
subDomains = ['otile1', 'otile2', 'otile3', 'otile4'],
cloudmadeAttrib = 'Data, imagery and map information provided by MapQuest, OpenStreetMap and contributors, CC-BY-SA';
var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});
var iades = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>)
map.addLayer(cloudmade).setView(iades, 15);
var benefLocation = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>);
var benef = new L.Marker(benefLocation);
map.addLayer(benef);
benef.bindPopup("<?php echo htmlspecialchars($beneficiaire->nom) . ' ' . htmlspecialchars($beneficiaire->prenom); ?>").openPopup();
});
</script>
The map was appearing well before I put it in the tab, does someone have an idea why it does not work now? Thank you =)
Welcome to SO!
If your Leaflet map suddenly works correctly after you resize your browser window, then you experience the classic "map container size not valid at map initialization": in order to work correctly, Leaflet reads the map container size when you initialize the map (L.map("mapContainerId")).
If your application hides that container (typically through CSS display: none;, or some framework tab / modal / whatever…) or later changes its dimensions, Leaflet will not be aware of the new size. Hence it will not render correctly. Typically, it downloads tiles only for the fraction of the container it thinks is shown. This can be a single tile in the top left corner in the case of a container that was entirely hidden at map initialization time.
This mistake often arises when embedding the map container in a "tab" or "modal" panel, possibly using popular frameworks (Bootstrap, Angular, Ionic, etc.).
Leaflet listens to browser window resize event, and reads again the container size when it happens. This explains why the map suddenly works on window resizing.
You can also manually trigger this update by calling map.invalidateSize() when the tab panel is displayed (e.g. add a listener on the tab button click), at least the first time the container is rendered with its correct dimensions.
As for implementing the tab button click listener, perform a new search on SO on that topic: you should have plenty resources available for that matter, for most of the popular frameworks.
First, thank you #ghybs for your good explanation on why the Leaflet maps are not shown properly in these cases.
For those who tried unsuccessfully the #ghybs's answer, you should try to resize your browser instead of calling a method of the map object :
window.dispatchEvent(new Event('resize'));
As #MarsAndBack said, this fix may cause issues on pan/animation/etc features that Leaflet's invalidateSize provides.
I have this problem because i used modal bootstarp. and it not solved anyway. i tried map.invalidateSize() and window.dispatchEvent(new Event('resize')); but not fixed.
finaly it fixed by this:
$('#map-modal').on('shown.bs.modal', function(event) {});
'shown.bs.modal' event means when modal is completely load and not any confuse on size, now inside that write your codes.
For those like me weren't able to solve the challenge with the precious #ghybs explanation (map.invalidateSize()) and were able to do it with #gangai-johann one, there's still a chance you may do it the right way. Put your invalidate instruction inside a setTimeout, as it may be too early to dispatch that instruction.
setTimeout(() => {
this.$refs.mymap.mapObject.invalidateSize()
}, 100)
Refer to https://stackoverflow.com/a/56364130/4537054 answer for detailed instructions.
I'm trying to use the reveal modal of Foundation.
I already succeed with just the use of a basic modal.
As I'm just starting on the project (which use symfony2 and foundation),
I have some difficulties.I dont really understand how foundation work.
So what i need to do :
Make the reveal modal open after a few second (10 for now) with a fade in-out animation without the grey background around it. By the way, the fade in-out function happens only after the first appearance of the modal, I dont understand why so ?
I tried to search how to do this but no topic about this were found( maybe i'm just bad at searching).
Thanks for any answer ! :D
PS: sorry for the grammar fault, not my native language.
For any precision just ask !
Here is a copy of the modal i'm using :
<p>Click Me For A Modal</p>
<div id="myModal" data-overlay="false" class="reveal-modal"
data-animate="fade-in fade-out" data-reveal aria-labelledby="modalTitle"
aria-hidden="true" role="dialog">
<h2 id="modalTitle">Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal" aria-label="Close">×</a>
</div>
first, fire the modal on page load using Foundation callback (hat tip to this Foundation forum post and codepen code):
$(document).ready(function(){
setTimeout(
function()
{
//do something special
$('#myModal').foundation('reveal', 'open')
}, 10000);
});
Then you need to display: none the reveal background overlay like so:
.reveal-modal-bg { display: none; }
I've just recently implemented the 'Magnific Popup' and the popup comes up fine, however when I click an input box the entire popup disappears back to the parent page. On the examples shown on the plugin website, the entire dialog box is clickable until you click outside of that box.
I'm hoping its just something extremely simple I've missed, but it's still doing my head in.
I really appreciate any help I can get!
Thanks :)
If you're using "ajax" content type, you need to make sure that you've got only one root node.
http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax_type
E.g., this is correct contents of ajax file:
<div>
html content
<script src="something.js"></script>
</div>
Incorrect:
<script src="something.js"></script>
<div>
html content
</div>
Incorrect:
<div>
html content
</div>
<div>Another content</div>
Also make sure that closeOnContentClick is set to false http://dimsemenov.com/plugins/magnific-popup/documentation.html#closeoncontentclick
If, for whatever reason, you can't change the contents of ajax file, you may parse content in parseAjax callback, like described here (so the mfpResponse.data contains only one root node).
I can't reply yet (too low rep..) so adding it like this:
seems that this also counts for type: 'inline'. Safe to always wrap content by a div..
$.magnificPopup.open({
items: {
src: '<div>'+ html +'</div>'
},
type: 'inline',
closeOnContentClick: false
}, 0);
I had the same error.
Turned out to be a dumb mistake from my side, i had the same class on my opener and my inline div.
Open
<div id="popup" class="dialog mfp-hide"></div>
Of course they needed to be different classes like so:
Open
<div id="popup" class="dialog-box mfp-hide"></div>
Dmitry explains the problem here https://github.com/dimsemenov/Magnific-Popup/issues/34
Add modal:true in the magnificPopup:
$('.your_class').magnificPopup({
type: 'ajax',
modal:true
});
i have a jquery accordion content.
$(document).ready(function() {
$('div.question').click(function() {
$('div.answer').slideUp(600);
$(this).next().slideDown(600);
});
$("div.answer").hide();
});
HTML Code:
<div class="question">Question</div>
<div class="answer">Answer</div>
i need to show another div when my accordion is open. i don't wanna use div with answer class.
i need to make another div with different class. i know i cane use 2 different class in div like this:
class="answer anotherclass"
but i cant make my template nice this way!
Example:
<div class="question">Question</div>
<div class="hide">Hide Contents</div>
<div class="answer">Answer</div>
i want to hide second div when my answer div is close. then after click on question, i need to show hide div and answer div. i cant put my hide div in answer div. something like fade in effect for hide div.
i hope u guys understand my question.
EDIT:
i need somthing like this:
$(document).ready(function() {
$('div.question').click(function() {
$('div.another').fadeIn(600);
$(this).next().fadeOut(600);
$('div.answer').slideUp(600);
$(this).next().slideDown(600);
});
$("div.answer").hide();
$("div.another").hide();
});
HTML:
Question
Answer
Another
but it doesn't work!
You could place the hide div inside you question div and simply show/hide it when the question is clicked. Probably best to use jQuery toggle for that.
In Webkit on iPhone/iPad/iPod, specifying styling for an :active pseudo-class for an <a> tag doesn't trigger when you tap on the element. How can I get this to trigger? Example code:
<style>
a:active {
background-color: red;
}
</style>
<!-- snip -->
Click me
<body ontouchstart="">
...
</body>
Applied just once, as opposed to every button element seemed to fix all buttons on the page. Alternatively you could use this small JS library called 'Fastclick'. It speed up click events on touch devices and takes care of this issue too.
As other answers have stated, iOS Safari doesn't trigger the :active pseudo-class unless a touch event is attached to the element, but so far this behaviour has been "magical". I came across this little blurb on the Safari Developer Library that explains it (emphasis mine):
You can also use the -webkit-tap-highlight-color CSS property in combination with setting a touch event to configure buttons to behave similar to the desktop. On iOS, mouse events are sent so quickly that the down or active state is never received. Therefore, the :active pseudo state is triggered only when there is a touch event set on the HTML element—for example, when ontouchstart is set on the element as follows:
<button class="action" ontouchstart=""
style="-webkit-tap-highlight-color: rgba(0,0,0,0);">
Testing Touch on iOS
</button>
Now when the button is tapped and held on iOS, the button changes to the specified color without the surrounding transparent gray color appearing.
In other words, setting an ontouchstart event (even if it's empty) is explicitly telling the browser to react to touch events.
In my opinion, this is flawed behaviour, and probably dates back to the time when the "mobile" web was basically nonexistent (take a look at those screenshots on the linked page to see what I mean), and everything was mouse oriented. It is interesting to note that other, newer mobile browsers, such as on Android, display `:active' pseudo-state on touch just fine, without any hacks like what is needed for iOS.
(Side-note: If you want to use your own custom styles on iOS, you can also disable the default grey translucent box that iOS uses in place of the :active pseudo-state by using the -webkit-tap-highlight-color CSS property, as explained in the same linked page above.)
After some experimentation, the expected solution of setting an ontouchstart event on the <body> element that all touch events then bubble to does not work fully. If the element is visible in the viewport when the page loads, then it works fine, but scrolling down and tapping an element that was out of the viewport does not trigger the :active pseudo-state like it should. So, instead of
<!DOCTYPE html>
<html><body ontouchstart></body></html>
attach the event to all elements instead of relying on the event bubbling up to the body (using jQuery):
$('body *').on('touchstart', function (){});
However, I am not aware of the performance implications of this, so beware.
EDIT: There is one serious flaw with this solution: even touching an element while scrolling the page will activate the :active pseudo state. The sensitivity is too strong. Android solves this by introducing a very small delay before the state is shown, which is cancelled if the page is scrolled. In light of this, I suggest using this only on select elements. In my case, I am developing a web-app for use out in the field which is basically a list of buttons to navigate pages and submit actions. Because the whole page is pretty much buttons in some cases, this won't work for me. You can, however, set the :hover pseudo-state to fill in for this instead. After disabling the default grey box, this works perfectly.
Add an event handler for ontouchstart in your <a> tag. This causes the CSS to magically work.
<a ontouchstart="">Click me</a>
This works for me:
document.addEventListener("touchstart", function() {},false);
Note: if you do this trick it is also worth removing the default tap–highlight colour Mobile Safari applies using the following CSS rule.
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
As of Dec 8, 2016, the accepted answer (<body ontouchstart="">...</body>) does not work for me on Safari 10 (iPhone 5s): That hack only works for those elements that were visible on page load.
However, adding:
<script type='application/javascript'>
document.addEventListener("touchstart", function() {}, false);
</script>
to the head does work the way I want, with the downside that now all touch events during scrolling also trigger the :active pseudo-state on the touched elements. (If this is a problem for you, you might consider FighterJet's :hover workaround.)
//hover for ios
-webkit-tap-highlight-color: #ccc;
This works for me, add to your CSS on the element that you want to highlight
Are you using all of the pseudo-classes or just the one? If you're using at least two, make sure they're in the right order or they all break:
a:link
a:visited
a:hover
a:active
..in that order. Also, If you're just using :active, add a:link, even if you're not styling it.
For those who don't want to use the ontouchstart, you can use this code
<script>
document.addEventListener("touchstart", function(){}, true);
</script>
I've published a tool that should solve this issue for you.
On the surface the problem looks simple, but in reality the touch & click behaviour needs to be customized quite extensively, including timeout functions and things like "what happens when you scroll a list of links" or "what happens when you press link and then move mouse/finger away from active area"
This should solve it all at once: https://www.npmjs.com/package/active-touch
You'll need to either have your :active styles assigned to .active class or choose your own class name. By default the script will work with all link elements, but you can overwrite it with your own array of selectors.
Honest, helpful feedback and contributions much appreciated!
I tried this answer and its variants, but none seemed to work reliably (and I dislike relying on 'magic' for stuff like this). So I did the following instead, which works perfectly on all platforms, not just Apple:
Renamed css declarations that used :active to .active.
Made a list of all the affected elements and added pointerdown/mousedown/touchstart event handlers to apply the .active class and pointerup/mouseup/touchend event handlers to remove it. Using jQuery:
let controlActivationEvents = window.PointerEvent ? "pointerdown" : "touchstart mousedown";
let controlDeactivationEvents = window.PointerEvent ? "pointerup pointerleave" : "touchend mouseup mouseleave";
let clickableThings = '<comma separated list of selectors>';
$(clickableThings).on(controlActivationEvents,function (e) {
$(this).addClass('active');
}).on(controlDeactivationEvents, function (e) {
$(this).removeClass('active');
});
This was a bit tedious, but now I have a solution that is less vulnerable to breakage between Apple OS versions. (And who needs something like this breaking?)
A solution is to rely on :target instead of :active:
<style>
a:target {
background-color: red;
}
</style>
<!-- snip -->
<a id="click-me" href="#click-me">Click me</a>
The style will be triggered when the anchor is targeted by the current url, which is robust even on mobile. The drawback is you need an other link to clear the anchor in the url. Complete example:
a:target {
background-color: red;
}
<a id="click-me" href="#click-me">Click me</a>
<a id="clear" href="#">Clear</a>
No 100% related to this question,
but you can use css sibling hack to achieve this as well
HTML
<input tabindex="0" type="checkbox" id="145"/>
<label for="145"> info</label>
<span> sea</span>
SCSS
input {
&:checked + label {
background-color: red;
}
}
If you would like to use pure html/css tooltip
span {
display: none;
}
input {
&:checked ~ span {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
a{color: red;}
a:hover{color: blue;}
</style>
</head>
<body>
<div class="main" role="main">
Hover
</div>
</body>
</html>