So here is code to show the mdl menu. They click the edit button and then a menu appears.
<button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="edit-button"> edit</button>
<ul id="edit_menu" class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="edit-button">
<li>change</li>
<li>do something else</li>
</ul>
Unfortunately the drop down no longer works when the user clicks the back button to the page with the drop down. I can't seem to reinitialize MDL. If i click on a link in the menu and then hit the back button, the drop down will be left open. Any ideas?
Related issue was that turbolinks breaks the MDL stuff but this code fixes it. Unfortunately it does not fix the drop down when a user hits the back button
document.addEventListener 'turbolinks:load', ->
componentHandler.upgradeDom();
This was my workaround solution to solve the problem. It was only happening for 1 specific page so I found a unique string in the URL and then overrode the back button to do a turbolinks visit.
window.addEventListener "popstate", (e)->
if (e.target.location.pathname.indexOf('customize_board') != -1 )
Turbolinks.visit( e.target.location)
I hope that at least can help someone out so their page isn't broken.
I was experiencing the same issue. Apparently this happens only when using the back button (not the forward button). My workaround was to add a javascript file with the following content
document.addEventListener "turbolinks:load", ->
componentHandler.upgradeDom()
#addEventListener "popstate", (e)->
Turbolinks.visit(e.target.location)
This actually fixed my issue
<meta name="turbolinks-cache-control" content="no-cache">
Related
I am having some issues in next.js when clicking on a navigation buttons and redirecting to a new page.
I have navigation with links like this one below:
<button key={index}>
<a
href={url}
>
{text}
</a>
</button>
For example, route where element points is /about. When I click on a button, "about" page will flash for a second or less and after that redirect to that page will happen. I cannot figure why is that happening
Thanks in advance!
you should use the built-in component of nextjs to navigate on the client side see: next/link
<Link href="/about">about<Link>
Any browser. All other functions operate as normal. I can traverse routes, open modals, dropdowns, manipulate collections... everything works.
But at some point, the browser will no longer scroll. In any view. Unless I refresh the browser window. Then scrolling goes back to normal.
What might cause this? Why does refreshing the page fix the issue? Is there a method to smack reactivity upside the head?
This is likely due to navigating away from a (Bootstrap ?) modal without properly closing it.
When you show up a modal in HTML5 frameworks, they usualy display a backdrop (some kind of fullscreen grayed out component) and disable scrolling to simulate desktop experience.
You can solve this problem using a simple iron:router pattern, if you're not using this package, be sure to execute the corresponding code whenever you navigate away from a page where a modal might get shown.
client/views/modal/modal.html
<template name="modal">
<div id="modal" class="modal fade">
...
</div>
</template>
<template name="main">
{{> modal}}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
Show Modal
</button>
</template>
client/config/router.js :
// define the plugin
Iron.Router.plugins.hideBootstrapModalOnStop=function(router,options){
router.onStop(function(){
// hide modal backdrop on route change
$(".modal-backdrop").remove();
// remove modal-open state on body
$("body").removeClass("modal-open");
});
};
// activate the plugin
Router.plugin("hideBootstrapModalOnStop");
The .modal-open class set on the HTML body tag is the one disabling scrolling when it is set, so by making sure that we remove that class whenever we navigate away from a page when a modal is possibly shown, we prevent this weird unexpected behavior to happen.
I am using <ul> <li> menu on master page. For menu hover I am using csshover.htc file.
I am <updatepanel> on my child pages, but when I click on any link or button inside update panel, my menu stops working. i.e hover does not work. What can be solution for this?
You need to re-initialise your menu after your updatepanel has fired. In order to do this you need to include something like the following at the bottom of your page:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(CSSHover());
</script>
You will find the name of the function to be called at the top of your htc file - You will see something like this:
<public:attach event="ondocumentready" onevent="CSSHover()" />
The function that needs to be fired is the part in the onevent
I got updated htc file from here, and my issue was resolved..
Im using the childbrowser plugin with phonegap and jqtouch.
I have this in a menu list to open webpages:
<a href="#"
onClick="PhoneGap.exec('ChildBrowserCommand.showWebPage','http://
mobile.twitter.com/company');" >
The problem is that the onClick opens the childbrowser as soon as I
touch it, and since I have this in a menulist, I cant scroll the list
up and down without the childbrowser opens.
So how can I change the onClick so it act as a tap instead?
What do I have to do?
Thanks!
What's worked for me is to use jQuery's bind approach and bind a tap event to the element that you'd like to call the Childbrowser. Here's some generic HTML and JavaScript that should give you a sense of what to do:
HTML:
<p class="urlStyle">Your link</p>
JavaScript:
$('p.urlStyle').bind('tap',function() {
window.plugins.childBrowser.showWebPage("http://www.yourlink.com");
});
Is there a way to open a page in XHTML without using <a href="page.html" target="_blank"> that is standards compliant?
I'm not using frames, but there are some pages that I want to open in a new window instead of the current one.
You can use javascript's window.open() method. However this could easily be blocked by a pop-up blocker. Why do you not want to use the "_blank" target?
You can use something like this:
My Page
And then you run this jQuery:
$(document).ready(function() {
$('a[rel="external"]').attr('target', '_blank');
});
This will add the target="blank" to the links and make your HTML validate :)
Most pop-up blockers wont block a pop up that has been requested by the user e.g you click a link and it pops up a window. IF you add an onlick event to your link and a target, the desired effect will work even if JS is turned off although you don't want to use target="_blank"