I use sematic-ui css framework and load a modal with svg content.
The modal loads the first time after a page refresh half way the screen.
After clicking the modal link it a second time without a page refresh, the modal is on its correct place.
This happens with all the modals on the page.
When i display a png in the modal, with the same html and css, it behaves as expected, it is placed in the correct place.
Code of the modal an the javascript calling it:
<script type="text/javascript">$(document).ready(function() {
$('.ui.button.modal1456524726671605').click(function () {
$('.ui.modal.modal1456524726671605').modal('show')
});
});
</script>
<div class="ui small modal modal1456524726671605"><i class="icon close"></i>
<div class="header ui">Window title</div>
<div class="content">
<figure>
<embed src="../static/img/charts/1456524726671605hnxiwhkc.svg" type="image/svg+xml" width="100%"/>
</figure>
</div>
</div>
I could not find out what is causing this behaviour, so maybe one of you have a clue for me!
Thanks in advance.
Related
According to Bulma's site (and everywhere else) modals are not supposed to show unless they have the "is-active" class attribute. However, my modals keep showing up as formatted text wherever I put them. They do not pop-up over the page, and they always show. I'm guessing I need to add something in mystyles.css as "modal" never appears in the 3416 lines of code created by Bulma.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" rel="stylesheet" />
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content has-background-white py-5 px-5">
<h3 class="title mb-6">
Hi mom
</h3>
</div>
</div>
And here is what my site looks like on page load:
Does anyone know what code I need to add to get the regular modal behavior?
In your code snippet it works just fine and the modal is being hidden (display: none; on the .modal class by bulma). So you are probably not loading in bulma properly..
here is my div code and my file type is .php
these are div elements that I want to hide.
i use different methods with id and class also with javascript but my issue is not resolved
<div class="qamar-container">
<div class="content-section">
<h1>AB & MIB Traders</h1>
</div>
<div class="button-section">
<button>AB</button>
<button>ABC</button>
</div>
</div>
</div>```
if need any other information please tell me.
here are the steps by which my issue is resolved.
CSS Styles
display:none;
}
javascript
jQuery('#qamar-ab').on('click', function(event) {
jQuery('#ab').toggle('show');
jQuery('#qamar').toggle('hide');
});
});
i want to hide image on clicking a span button but not responding
it has a class of close
$('.close').on('click', function(){
$('.img-wrap').empty();
$('#commentfile').val(null);
});
this is the html file
<div class="img-wrap"><span class="close">×</span>
<img id="preview" class="comment-preview mb-1" src="blob:http://localhost/d778f234-1c6f-4145-b9cb-5267cce10e34" alt="...">
</div>
Your code works fine when replicated in a codepen, adding in the jQuery CDN. It's likely that the issue stems from you not having jQuery in your project or a poor implementation.
<div class="shareimg">
<a class="tumblr-share-button" href="https://www.tumblr.com/share">
<img src="../images/tumblr.png" /><br/>
<span>Tumblr</span>
</a>
<script id="tumblr-js" async src="https://assets.tumblr.com/share-button.js"></script>
</div>
i had created a tumblr button but whenever i run page, the whole div gets replaced by the tumblr's original share button. how can i stop this??
EDIT
Fiddle of that problem: https://jsfiddle.net/9k449qs2/ - debug the fiddle and try to select the header with your picker. You will not be able to do so, it will select you the whole page every time you click.
I'm just working on a project which has a persistent header and footer. Just the content changes by clicking through the application. Now i wanted to add a backbutton into the header which i did with:
<header id="headerMain" data-position="fixed" data-role="header">
<a href="#" data-rel="back">
<div class="backButton">GO BACK</div>
</a>
</header>
The rest of my code directly after the header looks like this:
<div data-role="page" id="pageMain">
<div class="content gray">
adfjsöalfjasödf
</div>
</div><!-- pageMain end -->
<footer id="footerMain" data-position="fixed" data-role="footer">
Footer
</footer>
<div data-role="page" id="checkConnection">
<div class="content gray">
<button id="checkConnectionState" class="button" onclick="CTFNetworkState()">Check your Connection</button>
<a href="#checkBattery">
<button id="checkBatteryState" class="button">Check your Battery</button>
</a>
</div>
</div> <!-- checkConnection end -->
<div data-role="page" id="checkBattery">
<div class="content gray">
<p>Just plug your device and you'll get information about your battery state.</p>
</div>
</div> <!-- checkBattery end -->
So all works fine, the transitions and so on. But i can't get the backbutton work. He is not clickable. The headers on each page are not clickable in any form. If i debug that with gapDebug and i click onto the header, GapDebug marks the Pagecontainer and not the header.
So, how can i make the backbutton inside the header clickable on each page?
EDIT
So the header doesn't care what kind of button i place inside it. No matter what button i choose, or what attribute i add to my <a></a> it is not clickable.
So i tried to run GapDebug again, pressing the "Inspect" Button and than clicked on my backbutton, it selects me the code from the page which is wrong.
So i found the solution. The problem was, that not the documentation for persistent toolbars helped me, instead the documentation for external toolbars did it then.
Simply add
$(function(){
$( "[data-role='header'], [data-role='footer']" ).toolbar();
});
inside your <script></script> tag and all works fine. This happens Because these toolbars are not within the page they will not auto initalize. You must call the toolbar plugin yourself.