I use the Kendo UI splitview.
I created one pane (left) for the navigation and one pane (right) for the content.
I got 4 Navigation links for the left pane like this:
<div data-role="pane" id="side-pane" data-layout="side-default"
data-transition="slide">
<div data-role="view" data-title="test" id="side-root">
<ul data-role="listview" style="height: 250px" data-style="inset"
data-style="inset" data-type="group">
<li>Categories
<ul>
<li onclick="createChart()" data-icon="arrow-e"><a>1</a></li>
</ul>
<ul>
<li onclick="createLineChart()" data-icon="test"><a>2</a></li>
</ul>
<ul>
<li onclick="createMap()" data-icon="world"><a>3</a></li>
</ul>
</li>
</ul>
</div>
</div>
and for the right pane one div's for the map and two div's for the charts like this:
<div data-role="pane" data-layout="main-default" id="main-pane">
<div id="forms" data-role="view" data-title="Form Elements"
data-init="initForm" data-use-native-scrolling="true" data-show="detailViewShown">
<div id="map" ></div>
<div id="chart"></div>
<div id="linechart"></div>
</div>
The Problem is: when I click on "1" the chart created perfectly. After that happened i click on "2" and the new chart should be created and the old one should be removed, but the new chart appears under the chart "1". How can I refresh or set the right pane content new after the click on navigation items? The same problem for the map.
You should have to change data-init to data-show
<div data-init="initForm">
to
<div data-show="initForm">
Here is the explanation:
difference between data-show and data-init
Related
I'm trying to get my responsive navigation to collapse when clicking a navigation item (link).
This is my navigation:
<nav class="nav">
<ul>
<li class="nav-item">Overview</li>
<li class="nav-item">Amenities</li>
<li class="nav-item">Residences</li>
<li class="nav-item">Neighborhood</li>
<li class="nav-item">Availability</li>
<li class="nav-item">Contact</li>
<li class="btn login">Login</li>
<li class="nav-toggle"></li>
</ul>
</nav>
Here's how the responsive nav gets expanded:
<script>
function myFunction() {
document.getElementsByClassName("nav")[0].classList.toggle("responsive");
}
</script>
I'm not sure why you're mixing old school list tags with the modern Nav because you don't need them.
If you want the menu to collapse upon selection you can use this neat technique:
<nav style="position:absolute; left:20px; top:50px;">
<div onclick="TheBox.removeAttribute('open');">
<details id="TheBox"><summary>Choices</summary>
Home<br>
About<br>
Products<br>
Services<br>
Contact
</div></details></nav>
It looks like you want to hide the navigation when the toggle link is clicked. If so, I would do the following. Note that your <a> tags were outside the <li> tags, I've moved them inside.
<nav id="nav">
<ul>
<li class="nav-item">Overview</li>
<li class="nav-item">Amenities</li>
<li class="nav-item">Residences</li>
<li class="nav-item">Neighborhood</li>
<li class="nav-item">Availability</li>
<li class="nav-item">Contact</li>
<li class="btn login">Login</li>
<li class="nav0item">Toggle</li>
</ul>
</nav>
I would target by ID and not class, and set the display to none.
<script type="text/javascript">
function collapseNav() {
document.getElementById('nav').style.display = "none";}
</script>
Since your toggle is on a <li> inside the nav, your navigation menu (and the toggle) will be hidden when activated. So, I'd make a way to show it again. You could, for instance, add this function in your JS.
function showNav() {
document.getElementById('nav').style.display = "block";}
And then add a link somewhere for the user to show the menu again.
<button onclick="showNav();" >Show Menu</button>
If you go that route, I'd also hide the Show Menu button by default by adding id="shownav" style="display: none;" to hide it initially. And then have your collapseNav function also show the button:
document.getElementById('shownav').style.display = "block";
Thank you for your responses.
This is what I was looking for:
$(document).ready(function(){
$("li.nav-item a, .logo").click(function(){
$("nav").removeClass("responsive");
});
});
Now the "responsive" class gets removed when clicking on a navigation item or the logo, so my navigation returns to collapsed mode.
I'm trying to draw a delete button right at the right top corner of the collapsible box. I already did it but for some reason I can't make it show at the top of the collapsible element so it's visible. I tried to set it to visibility: visible but I still can't make it visible. Any ideas or suggestions will be appreciated.
Here's my HTML code:
<div data-role='main' class='ui-content' id='collapse'>
<div data-role='collapsible' data-theme='b' data-content-theme='b' data-iconpos='right' data-expanded-icon='collapse' data-collapsed-icon='expand'>
<h4>
<a href='#' data-rel='back' data-role='button' data-icon='delete' data-iconpos='notext' style='position:absolute;top:-20px;right: -10px'>Close</a>
<div class='ui-grid-a'> <div class='ui-block-a textfloatleft' > 1 new </div>
<div class='ui-block-b textfloatright'>January 6th 2016</div>
</div>
<span id='collapstxt'> first </span>
<button href='#' id='bt01' data-icon='check' data-iconpos='right' style='width:100px;' onclick='alert(1);event.stopPropagation();' >Reply</button>
</h4>
<ul data-role='listview'>
<li id='answerstyle'><span id='answerstxt'> first </span>
<div class='ui-block-b answrfloatright'>January 6th 2016</div>
</li>
<li id='answerstyle'>Audi</li>
<li id='answerstyle'>BMW</li>
<li id='answerstyle'>Cadillac</li>
<li id='answerstyle'>Ferrari</li>
</ul>
</div>
</div>
And my jsfiddle example
To get the effect yore looking for you would need to add overflow: visible; to the containing element:
a.ui-collapsible-heading-toggle.ui-btn.ui-icon-expand.ui-btn-icon-right.ui-btn-b { overflow:visible;}
Here is the JS Fiddle
Here is my Fiddle I am currently working with. http://jsfiddle.net/Nemi9/76JPk/29/
I want keep everything sortable, but want to add the editable function to all the ul on a click or mouse down. I am currently trying to make each list and any new items added to each list .editable they are currently all .sortable. The top code is the code I am currently using to try to make lines 17- 45 in HTML editable when clicked on. I want the person to be able to click on each listed item and add their own text inside the field.
I put contenteditable= true into each list id
These lines below are 63- 66 in .JS
var editable1 =$("#names,#homes,#purchased").editable();
$("#names,#homes,#purchased",editable1).click(function(ev){
$("#names,#homes,#purchased").input(type=submit)
Here is my current HTML
<div class="box1">
<h3>Needed Items</h3>
<ul id="names" contenteditable="true"/>
<li class="ui-state-default">Carrot</li>
<li class="ui-state-default">Onion</li>
<li class="ui-state-default">Water</li>
</ul>
</div>
<div class="box2">
<h3>Home Items</h3>
<ul id="home" contenteditable="true"/>
<li class="ui-state-default">Cookies</li>
<li class="ui-state-default">Milk</li>
<li class="ui-state-default">Chicken</li>
</ul>
</div>
<div class="box3">
<h3>Purchased Items</h3>
<ul id="purchased" contenteditable="true"/>
<li class="ui-state-default">Potato</li>
<li class="ui-state-default">Rum</li>
<li class="ui-state-default">Coke</li>
</ul>
</div>
Does anybody know how to set up Snap.js in jQuery Mobile? I'm trying to migrate from the jQuery Mobile panel widget which has major scroll issues.
http://jsfiddle.net/frank_o/vZBzD/3/
HTML:
<div data-role="page">
<header data-role="header" data-position="fixed" data-tap-toggle="false">
<a id="open-panel">Open panel</a>
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
</header>
<div data-role="content" id="content" class="snap-content">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>...</li>
</ul>
</div>
</div>
JS:
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
if (document.getElementById('open-panel')) {
addEvent(document.getElementById('open-panel'), 'click', function () {
snapper.open('left');
});
}
});
I don't understand what's the problem? You had a JavaScript error with click event binding, I just changed it to jQuery like binding.
Working example: http://jsfiddle.net/Gajotres/as8P4/
$(document).on('pagecontainershow', function () {
var snapper = new Snap({
element: document.getElementById('content')
});
$(document).on('click', '#open-panel',function () {
snapper.open('left');
});
});
As per snap js, you don't need to place the snap js html content inside the jQuery mobile page content html.
You can break the page in two parts cleanly, the snap nav section & the actual jQuery mobile html structure.
Working Demo
http://codepen.io/nitishdhar/pen/pIJkr
I have used jQuery + jQuery Mobile 1.4.2(JS) + jQuery Mobile 1.4.2(CSS) + Snap JS + Snap CSS as resources in the codepen, you can check them in specific JS & CSS sections settings button.
Code Structure - Different Menu on Both Sides
<body>
<!-- Snap Js Code Comes Here -->
<div class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right">
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
</ul>
</div>
</div>
<!-- Snap Js Code Ends Here -->
<!-- Jquery Mobile Code Comes Here -->
<div data-role="page" id="content">
<div data-role="header" data-position="fixed">
<h4>© Test App</h4>
</div>
<div role="main" class="ui-content">
Some Page Content
</div>
<div data-role="footer" data-position="fixed">
<h4>© Test App</h4>
</div>
</div>
</body>
Now apply some CSS as per your requirement of design, but you might need the z-index -
#content {
background: #BFC7D8;
z-index: 1;
}
Now initiate the snap nav -
var snapper = new Snap({
element: document.getElementById('content')
});
This should work fine now.
Alternate Example with same Menu on both sides
Also, if you want to show the same menu on both sides, just remove the menu items from the snap-drawer-right div & only keep menu items in the left one like this -
<div class="snap-drawer snap-drawer-left">
<div>
<ul>
<li>Default</li>
<li>No Drag</li>
<li>Drag Element</li>
<li>Right Disabled</li>
<li>Hyperextension Disabled</li>
</ul>
</div>
</div>
<div class="snap-drawer snap-drawer-right"></div>
Now Add this to your CSS -
/* Show "Left" drawer for the "Right" drawer in the demo */
.snapjs-right .snap-drawer-left {
display: block;
right: 0;
left: auto;
}
/* Hide the actual "Right" drawer in the demo */
.snapjs-right .snap-drawer-right {
display: none;
}
Working Demo - http://codepen.io/nitishdhar/pen/LliBa
I want to select the content by selecting the appropriate tab like in this image
In this image there are several tabs named ABOUT, MACHINES, etc. and below this all the contents are layered one upon another. Only the active tab is shown and others are hidden.
I have two problems:
1.whenever I click on a tab,then the selected tab's background color changes.
to perform this task I did this.
$(document).ready(function(){
$('#profiletabs a').click(function() {
$('#profiletabs a.activetab').removeClass('activetab');
$(this).addClass('activetab');
});
});
2.whenever I select a tab then the corresponding content tab is to be shown
Please tell me how to do this?
MENUBAR
<div id="profiletabs">
<ul>
<li >About </li>
<li>Machines</li>
<li>users</li>
<li>Marketing</li>
<li>Charges</li>
<li>Discounts</li>
<li>Timings</li>
<li>Programs</li>
<li>Facilities</li>
<li>Special Programs</li>
<li>Staff</li>
<li>Contact</li>
</ul>
</div>
CONTENT
<div class="content active" style="display: block" id="tab1">
<div class="heading">About</div>
<table class="contenttable">
<tr><td class="lefttd">Address:</td><td class="righttd">CMC mkt. , Near union bank of India , Main dadari road, Noida Sector-49</td></tr>
<tr><td class="lefttd">Location:</td><td class="righttd">Noida.</td></tr>
<tr><td class="lefttd">Landmark:</td><td class="righttd">Near Golfview Hotel.</td></tr>
<tr><td class="lefttd">Area:</td><td class="righttd">200 Sq Fit.</td></tr>
<tr><td class="lefttd">Speciality/UPS:</td><td class="righttd">Group Ex.</td></tr>
<tr><td class="lefttd">Branches in India:</td><td class="righttd">6.</td></tr>
<tr><td class="lefttd">Surrounding:</td><td class="righttd">Abc.</td></tr>
<tr><td class="lefttd">History:</td><td class="righttd">Since 2001</td></tr>
</table>
</div>
and so on for other contents....
To show the content I did this
JQUERY
$(document).ready(function (){
var curnt=1;
function showtab(next)
{
$(".rightcontainer #tab"+curnt).removeClass("active");
$(".rightcontainer #tab"+next).addClass("active");
curnt=next;
}
});
Thank you.
I suggest setting a data value that links the tab to the content div. Then you can inspect that data value and find the content div to show:
$('#tabs li').click(function() {
$('#tabs .active').removeClass('active');
var tab = $(this).addClass('active').data('tab-content');
$('.tab-content.active').removeClass('active');
$('.tab-content[data-tab-content='+tab+']').addClass('active');
});
<ul id="tabs">
<li data-tab-content="tab1">Tab 1</li>
<li data-tab-content="tab2">Tab 2</li>
</ul>
<div class="tab-content" data-tab-content="tab1">My tab 1 content</div>
<div class="tab-content" data-tab-content="tab2">Tab2 content div</div>
http://jsfiddle.net/YevZr/