I'm currently getting into Framework7. I found only a few docs, but they didn't help me. My problem is really basic, but I simply cannot figure out my error:
I simply try to open both panels, left and right (not at the same time).
If I swipe from left to right, the left panel should be opened
If I swipe from right to left, the right panel should be opened
My HTML part looks like this:
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Content left panel</p>
</div>
</div>
<div class="panel panel-right panel-reveal">
<div class="content-block">
<p>Content right panel</p>
</div>
</div>
Javascript:
// Initialize app
var myApp = new Framework7({
swipePanel: 'both'
});
If I change swipePanel to either left or right, the correct one will work as intended... for some reason not both, though.
According to the docs however, both is a valid value for swipePanel. There are no JS-errors in my console.
Someone else encountered that problem?
If you are using framework7 version 3 then
var myApp = new Framework7({
swipe: 'both'
});
In F3 use swipe instead of swipePanel. swipePanel is for V1
Related
When creating some clickable dropdowns, I noticed the dropdown menu will hide behind any clickable dropdown buttons if they overlap. Here is an example
How can I fix this? Here is the code used to create the dropdown.
<div class="w3-container">
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-btn">Click Me!</button>
<div id="Demo" class="w3-dropdown-content w3-border">
Link 1
Link 2
</div>
</div>
</div>
I also made a fiddle, but it doesn't seem to be working: https://jsfiddle.net/n2fole00/99d8d7pj/
BTW, would this be considered a bug?
Thanks.
Based on Tony Hensler's comment, it was the z-index.
<div id="<?php echo $course->course_id; ?>" class="w3-dropdown-content w3-border" style="right:0; z-index:1;">
I just added z-index:1 to the w3-dropdown-content div as an inline style for the fix.
Thanks Tony.
I have the following Panel in my jQuery mobile app , I want to make it to be drop down as appears in the following image rather than to be slide from the page edge . Is this can be done in jQuery mobile and How can i do this ?
<div data-role="page" id="MainPage" >
<div data-role="panel" id="Mainnavpanel" data-theme="b" data-display="overlay" data- position="right" data-position-fixed="true">
<ul data-role="listview"><li>
<a href="#MainPageheader" data-rel="close" class="ui-btn" >Close</a></li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
<div data-role="header" id="MainPageheader" data-position="fixed" data-tap- toggle="false" data-fullscreen="false">
<div> <font size="6px"> Main Page </font></div>
</div>
<div data-role="content" >
//content
</div>
</div>
You can use popup widget to simulate dropdown menu.
As of jQuery Mobile 1.4, a new attribute data-arrow is added to popup widget. This creates an arrow which can be positioned anywhere in popup.
Arrow:
The popup can display an arrow along one of its edges when it opens if the data-arrow attribute is set. The attribute can take a value of true, false, or a string containing a comma-separated list of edge abbreviations ("l" for left, "t" for top, "r" for right, and "b" for bottom). For example, if you set data-arrow="r,b" then the arrow will only ever appear along the bottom or right edge of the popup. true is the same as "l,t,r,b" and false or "" indicates that the popup should be displayed without an arrow.
HTML
<div data-role="popup" id="popupID" data-arrow="t">
<!-- content -->
</div>
Add data-rel="popup" to button to call popup.
Menu
To modify arrow's size, check this link.
Demo
my site is: http://www.italianiaperth.com/
i am trying to align the text in white 'Italiani a Perth' and the search Widget horizontally.. (text floating left, search widget to the right)
I have managed to get them on the same line by setting their respect divs width to auto but the problem is the content underneath floats to the right along with the search widget
ive played with this for hours and looked at similar questions on the forums but im at my witts end, can someone point me in the right direction? thanks :)
Use Bootstrap 3.0 ( getbootstrap.com )
Put the two divs like this :
<div class="container">
<div class="row">
<div class="col-md-8"> DIV LEFT </div>
<div class="col-md-8"> DIV RIGHT </div>
</div>
</div>
More info here :
http://getbootstrap.com/css/#grid
I have seen documentation on the JQueryMobile site that shows you how to group links in the header/footer together. I have also seen documents that allow you to place links specifically in the space to the left and/or right of the heading tag. I have NOT seen any documents on how to merge them
Basically what I want is
<div data-role="header">
left 1
left 2
<h1>Page Title</h1>
right 1
right 2
right 3
</div>
and for that to appear as
[left 1][left 2] Page Title [right 1][right 2][right 3]
I have tried wrapping the links in a div and using floats (adding the class(s) ui-btn-left/right also appears to work), however the anchor tags remain as-is and the styles defined by the framework are never applied (All I see is regular links, no fancy buttons)
Can someone please tell me if I'm missing an attribute? or if there is a container class that I can use that will not block the buttons from having their new markup applied?
Edit:
The above code will currently output
[left 1] Page Title [left 2]
[right 1][right 2][right 3]
Solution:
Use a wrapping container to fix the position left or right aligned (I am using the class ui-btn-[left/right]) then force the link to take the markup with data-role="button"
So it looks like
<div data-role="header">
<div class="ui-btn-left">
left 1
left 2
</div>
<h1>Page Title</h1>
<div class="ui-btn-right">
right 1
right 2
right 3
</div>
</div>
use the class "ui-btn-right"/ "ui-btn-left"
Update use wrapers for multiple buttons
<div class="ui-btn-left">
left 1
left 2
</div>
<div data-role="header">
<div class="ui-btn-left" data-role="controlgroup">
left 1
left 2
</div>
<h1>Page Title</h1>
<div class="ui-btn-right" data-role="controlgroup">
right 1
right 2
right 3
</div>
</div>
I'm using jQuery UI's tabs to divide content on my page. I have a 'link bar' I would like to have hang at the bottom of each tab. (The tab text will change but generally they will navigate the user left or right through tabs.)
Hosting the #linkBar div inside the first tab makes it 'look' right, inside Themeroller's border. Putting it just outside the 'parent tab' div places the links below the theme's border. I've tried creating a spacer div but it just pushes #linkBar down further.
Of course when the user switches to another tab, the link bar goes away. How is ownership of elements organized between tabs? Should I dynamically destroy the #linkBar div on the tab being navigated away from and rebuild it in the tab being navigated to? Or is there a better way to move it between them, or just manage visibility?
I would like to have the link bar follow the content on each tab as a footer, 'floating' one or two lines below the last content of each tab (rather than having it in a fixed position relative to the tab bar).
Ok ... It was simply adding the jQuery UI classes to the linkBar. Check out my working jsFiddle demo:
I moved the linkBar div out of the tabOne div and put it at the bottom of the tabs div:
<div id="container">
<div id="title">
<h1>title bar</h1>
</div>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="tabone">
content goes here
<br><br><br><br>more stuff<br><br><br>more stuff<br><br>
</div>
<div id="tabtwo">
content goes here...
</div>
<div id="tabthree">
content goes here...
</div>
<div id="linkBar">
<span id="leftLink"><< left link</span>
<span id="rightLink">right link >></span>
</div>
</div>
</div>
I slightly altered the linkBar style by giving it a top and bottom margin as well as hiding it by default:
#linkBar {
display: none;
margin: 10px auto;
}
Then I simply added the jQuery UI classes to the $linkBar. I slightly altered the jQuery to be more readable:
$("#accordion").accordion({ header: "h3" });
var $tabs = $("#tabs"),
$linkBar = $("#linkBar");
$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();
$('#title').click(function() {
$tabs.tabs('select', 0);
return false;
});
Note: You could just add class="ui-tabs-panel ui-widget-content ui-corner-bottom" to the linkBar div and be done with it. But, I think I like it better managed in the JS.