After closing the WinJS appbar , content becomes unscrollable - javascript

I'm creating my first app here's a picture of what I'm talking about:
After I click on the appbar and then I close it , I can't scroll down to see the rest of the text.
Here's how the code for the appbar looks:
<div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement: 'top', layout: 'commands'}">
command1
command2
command3
command4
</div>
<div id="main_content">
</div>
I use fragments to navigate using the appbar and I display the fragments in the main_content so idk why it has problems.

Related

Vue/JavaScript - Stop 'preventDefault' from affecting child components

I am trying to create a modal dialog in Vue. When the dialog is open, I want the page scrolling to be disabled but the user should still be able to scroll the dialog, and I was trying to achieve this with preventDefault. My component looks like this:
<!--Modal.vue-->
<template>
<div v-show="open" class="modal" #scroll.stop.prevent #wheel.stop.prevent>
<div class="mask"></div>
<div class="overlay">
<div class="dialog">
<button #click="$emit('close')">CLOSE</button>
<Paragraphs />
</div>
</div>
</div>
</template>
<script>
import Paragraphs from "./Paragraphs";
export default {
components: {
Paragraphs,
},
props: {
open: Boolean,
},
};
</script>
<!--some scoped CSS here-->
Full working example on the sandbox https://codesandbox.io/s/optimistic-pond-3zrxsf
The problem is that while this arrangement is preventing page scrolling, it is also freezing scrolling on the dialog itself, which I don't want. And apparently stopPropagation only prevents bubbling up, but not down the DOM tree, so that isn't helping either. What can I do to achieve this?
Note: I do not want to set the overflow-y property of the body tag as that takes away the scrollbars completely and has a jittery effect of everything shifting to the side by a few pixels when the dialog is opened or closed.

Problem with onclick event in parent & child component

I have 2 components in Vue.js :
Accordion header which open it's content after clicking on it.
Cog icon which open mini-modal menu.
Problem is that when I'm clicking on cog, I don't want accordion to open it's content.
Before click on cog:
After click on cog:
I thought about checking modal menu display status in Accordion (parent component) but I'm not sure it's good approach.
<i class="fa fa-cog" #click="toggleSettings"/>
<div
class="order-settings"
:class="{'order-settings__show':isSettingsOpen}">
<div class="order-settings__option"><p>Re-order</p></div>
<div class="order-settings__option"><p>Convert to subscription</p</div>
<div class="order-settings__option"><p>Download invoice</p></div>
<div class="order-settings__option"><p>Export to CSV</p></div>
</div>
Actual results: Accordion open after clicking on cog (wrong)
Expected results: Accordion doesn't open after clicking on cog
add the stop modifier to the cog click event like so
#click.stop="toggleSettings"
It's how you do event.stopPropagation() in Vue.js

How to use Semantic UI 'add content' javascript behaviour?

I'm trying to initiate a Semantic UI Dimmer with markup like so:
<p id="move">Move me</p>
<div class="ui dimmable">
<h3 class="ui header">
Overlayable Section
</h3>
<div class="ui dimmer"></div>
</div>
and js like so:
$('.ui.dimmable')
.dimmer(
{on: 'click'},
'add content', $('#move'))
;
There is apparently a behaviour called 'add content' that should detach an element from the DOM and add it into the dimmer.
Does anyone have ideas on how to make this work?
Note - the above does intitiate the dimmer on click of '.ui.dimmable', I just can't grasp how to use the 'behaviours' Semantic UI Docs mention, and can't find any examples.
Thanks!
The dimmer content is black by default, so you need to make your #move element white. I tried change it to h2 with .ui.inverted.header
Then you need to add your desired content to your dimmer with this:
$(".ui.dimmable").dimmer("add content", $("#move"));
And configure it to show on click
$(".ui.dimmable").dimmer({
on: "click"
});
Try it on this JSFiddle

React MDL: No drawer button with standalone drawer

I'm building a web view with my layout using basic React setup and react mdl (https://react-mdl.github.io/react-mdl) components. Of course I do have mdl css on my template.
I want to use the drawer components from React MDL with my custom layout. So far, i have this in my layout:
<div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<Header/>
<Drawer title="Title">
<Navigation>
Link
Link
Link
Link
</Navigation>
</Drawer>
</div>
Rendered drawer:
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
Link
Link
Link
Link
</nav>
</div>
Problem is it render ok but there are no drawer button generated. In demo layout a div with class mdl-layout__drawer-button is generated beside the drawer div, and a div with class mdl-layout__obfuscator at the end of layout.
I got the same issue, cause I made a mistake by using material-design-lite's scrips instead of react-mdl's scripts.
import 'react-mdl/extra/material.css'
import 'react-mdl/extra/material.js'
Hope this helps!

jQuery - Accordion boxes

I have a series of boxes/blocks of content on a form that need to just show the title of the box, with a 'View More' button below it. When a user clicks View More, the box should expand vertically to show its contents. Also, when another 'View More' is clicked, any other open boxes need to close.
How can I accomplish this with jQuery? I thought maybe I could use the Accordion plugin, but that sounds like it only works with list displays.
Example:
Box TitleView More!
*user clicks
Box Title
Content
Content
Content
Content
Close
The jQuery UI Accordion plugin doesn't rely on lists, you can use markup like this:
<div id="accordion">
<h3>First header</h3>
<div>First content</div>
<h3>Second header</h3>
<div>Second content</div>
</div>
http://jqueryui.com/demos/accordion/ Look at the theming tab, it doesn't use lists.

Categories