I would like to use direction option for kendo context main menu items. I have searched in the Kendo documentation and found that direction option available for Kendo context sub-menu items and Kendo Menu items.
Kendo Doc Ref: https://docs.telerik.com/kendo-ui/api/javascript/ui/contextmenu
But in my case, I need to use kendo context menu in the rightmost corner of DIV, So that opening the context menu should fall inside the div not exceeding it.
My code: https://codepen.io/JGSpark/pen/XYQjmR
The context menu option should fall within DIV, a meaning menu should open towards left.
Any suggestion would be helpful.
Since my other answer was deleted for no reason at all, here you can see the things i referenced with my old answer (why would someone delete an answer to such a small audience!?!):
Maybe this helps: KendoUi: Right-to-left support
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.rtl.min.css" /> <!-- Add this to your hmtl -->
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content k-rtl"> <!-- The k-rtl property makes the context menu go to the left -->
<ul id="menu"> <!-- Here is your context menu -->
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<script>
$(document).ready(function() {
$("#menu").kendoMenu();
});
</script>
</div>
</body>
</html>
Related
I made a website that includes a simple menu (Home, Products, Change Themes, ABout Us). 'Change Theme' is a dropdown menu that has 2 more options ('Default', 'Valentine's).
Change Theme: (Default/Valentines).
When I click one of the options from the 'Change Theme' dropdown menu, for example the "Valentine's" theme, the current page changes to a different theme. Now my homepage(index.html) is loaded with the valentine's theme. When I click a new page from the menu, let's say the "Products" how can I check which CSS stylesheet is currently loaded (current theme) so that I can load the correct theme for the new page.
Because now when I click a page from the menu it loads the default theme (css stylesheet).
For each html file I have 2 css files.
For example for the index.html I have the 'mainstyle.css' & 'valentines.css'.
Here is some part of the code in the index.html. It's mostly the function and the menu, since the rest of the code is other stuff.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flowers4U</title>
<!-- Link to the external Style Sheet -->
<link id="pagestyle" rel="stylesheet" type="text/css" href="css/mainstyle.css">
<script type="text/javascript">
function change_theme(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
</head>
<body>
<div class="page">
<!--Navbar Section-->
<div class="navbar">
<div class="inner-width">
<img class="logo" src="img/Logo/logo.png" width="170px" height="60px">
<!--Navbar Menu Section-->
<div class="nav">
<ul>
<li>About Us</li>
<li><a id="mybtn" href="path/index.html" onclick="change_theme">Change Theme ▾</a></li>
<ul class="dropdown">
<li>Default</li><br></br>
<li>Valentine's</li>
</ul>
<li>Products</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
I hope my question is clear.
i advise your to make global variable in javascript and from the variable, make click event so you can save the theme that you want and when you move to another page.
Make an load event in js that will check what is the saved theme and from there you can delete or add css style sheet.
var current_theme = "Default"
document.getElementById("html").addEventListener("load", myFunction);
function myFunction() {
if (current_theme == "Default"){
element = document.styleSheets[0].cssRules[0].style;
element.removeProperty('text-decoration');
// or any style property you want
}
}
// if you want also to disable style sheet i advise you to use this code
function del_style() {
document.getElementById("styles").disabled=true;
}
function add_style() {
document.getElementById("styles").disabled=false;
}
let mycss = document.querySelector('link[type="text/css"]').href;
Im making a game with tabs and as it stands progress between tabs resets when I change tabs http://prntscr.com/ns2jvg http://prntscr.com/ns2k31 http://prntscr.com/ns2k74 I know eventually i'll make a last tab called options that you can use to reset. but i would like for development to be able to debug and be able to switch tabs with no reset
Im not sure how this is done im new to html
This is my Home Tab in html:
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="nav_bar">
<ul>
<li>Home</li>
<li>SkillTree</li>
<li>Equipment</li>
<li>Pets</li>
<li>Skills</li>
<li>Quests</li>
</ul>
</div>
<div class="main_container">
<p>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="interface.css" />
</head>
<title> Basic Clicker</title>
<body>
This is the next tab in html:
<html>
<head>
<title> Basic Clicker</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="nav_bar">
<ul>
<li>Home</li>
<li>SkillTree</li>
<li>Equipment</li>
<li>Pets</li>
<li>Skills</li>
<li>Quests</li>
</ul>
</div>
<div class="main_container">
<p>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="interface.css" />
</head>
<title> Basic Clicker</title>
<body>
I expect the tabs to switch and for the player to not lose any data/ it not to reset. right now things reset when you click a different tab.
You can make use of localStorage.
On page one you can add an item into localStorage with:
localStorage.setItem('pet', 'Cat'); // name, value
And on page two you can retrieve the value with:
var pet = localStorage.getItem('pet');
You can also overwrite the value later on, or remove it with:
localStorage.removeItem('pet'); // remove an individual item
localStorage.clear(); // remove all items
Note that localStorage persists across browser sessions. If you want to restrict the storage to an individual session, you should instead make use of sessionStorage.
Is it possible to move the dropdown menu from a bootstrap dropdown-menu to be below a different control? (An input in my case.)
The dropdown is usually based off the button that causes it to dropdown.
The idea is that I have a user that is going to put a value into the input box and then press the button and there will be some floating search results in the "dropdown-menu" box that they can select from.
It will look odd for my UI to have that positioned from the button.
I can create my own popup, but I would rather just use the dropdown-menu if it supports this.
<!DOCTYPE html>
<html>
<head>
<title>Web page template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"><input type="text" placeholder="blabla"></a>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</body>
</html>
Isn't this what you are trying to achieve or maybe I didn't understand your intentions clearly enough? You can always include any kind of element in a link tag and position your menu with CSS.
I am developing a jquery mobile website and i have some problems running javascript code.
I have a home page , index.html , which is basically a listview to navigate to various html pages. I use the single-page structure for my pages , that means every 1 html file contains 1 page. Now from the home page , i navigate to another page where i am using a persistent NavBar with a horizontal button with 2 options. One is photos and the other is multimedia.
For the photos i am using the Javascript FB API , to download the photos from a FB Page and then with the PhotoSwipe Plugin i present them to the user.
The problem..
If i run the photos.html page , it will work well and load the albums. There are 2 things that my javascript does. 1) Use FB API to get albums, photos , cover photos etc.. 2) Dynamically create a listview with this albums and their photos. In this case both work great!
However when i am in my index.html and i navigate through the listview to the photos.html (photos is the default chosen button from the persisent NavBar) the Javascript code doesnt work. Like is not called at all..
The index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
<link rel="stylesheet" href="themes/EspacioJoven.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="themes/custom.css" />
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<!--
<div data-role="header">
<h1>Application Title</h1>
</div>
-->
<div data-role="content">
<h2 id="banner">Joven Mobile</h2>
<div class="main_menu">
<ul data-inset="true" data-role="listview">
<li><img src="themes/icons/news.png" alt="Information" class="ui-li-icon">Esen</li>
<li><img src="themes/icons/research.png" alt="Information" class="ui-li-icon">Laen</li>
<li><img src="themes/icons/staff.png" alt="Information" class="ui-li-icon">Multimedia</li>
<li><img src="themes/icons/students.png" alt="Information" class="ui-li-icon">Sanen</li>
</ul>
</div>
</div>
<!--
<div data-role="footer">
<h4>Page Footer</h4>
</div>
-->
</div>
</body>
</html>
The photos.html looks like :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
<link rel="stylesheet" href="themes/EspacioJoven.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="themes/custom.css" />
<!-- Needed from PhotoSwipe Plugin -->
<link href="photoSwipe/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="photoSwipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoSwipe/klass.min.js"></script>
<script type="text/javascript" src="photoSwipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<script type='text/javascript' src='photoSwipe/photoSwipeCall.js'></script>
<!-- Needed from PhotoSwipe Plugin -->
</head>
<body>
<div data-role="page" id="photos" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
<div data-role="header" data-id="fixedNav" data-position="fixed">
<h1>Application Title</h1>
Back
<div data-role="navbar">
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" class="albums">
<!-- Here the albums are created through javascript (createAlbums.js) -->
</ul>
<button type="button" id="loadMoreAlbums">More Albums...</button>
</div><!-- /content -->
</div><!-- /page -->
<div id="fb-root"></div>
<script type='text/javascript' src='javascript/createAlbums3.js'></script>
</body>
</html>
As you see i call my javascript in the end. Any ideas why its never called? If i refresh the page , that means run the photos.html , it will load normally.
Actually i also look at the "elements" table from the debugger. When im in the index.html page the html elements seem all correct. When i do the transition though to the photos.html page , by looking at the elements table i see that they dont change! The title does change but the rest stays the same which is incredible?! How on earth can that happen? It looks like is the same page , with the same css and javascript sources , but should be different! As you see i use photoSwipe javascript , css etc! Only if i reload the page the elements are correct. Please any ideas? I have no idea what is happening here.
Also for some reason i get a 304 Status , Not Modified through the transition , from one page to another.
The reason for this is because when you navigate to a page in jQuery Mobile it by defaults will try and pull the JQM page (data-role="page" (if there is no data-role='page' then it will pull the body)) via ajax and attaches it to the current page's DOM, the thing is it will only pull the JQM page (or body if there isn't any) and ignore everything (aside from the title) outside of it meaning your JavaScript is not going to get called.
When you refresh the page then a normal HTTP call is made and the entire page is loaded so your code is executed.
In order to have your JavaScript called you need to either have the relevant script's on your first page or you can have it withing your JQM page wrapper and it will then be pulled along with it.
<div data-role="page" id="photos" data-theme="a"
data-add-back-btn="true" data-back-btn-text="Back">
....
<script type='text/javascript' src='javascript/createAlbums3.js'></script>
</div><!-- /page -->
Have a look at the following Q&A from the official docs for more details.
Hi i have creates a html page that creates dynamic fields and when i add them to the listview, it doesnt apply the jquery mobile themes.
here is my javascript:
//Dynamically load data fields for items
$(document).on('pagebeforeshow', '#claimPagefields', function(){
//trigger a create event
$('#claimPagefield').trigger('create');
loadFields();
});
Here is my HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link href="src/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="src/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="src/jquery.mobile.iscrollview-pull.css" />
<script src="src/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="src/iscroll.js"></script>
<script src="src/jquery.mobile.iscrollview.js"></script>
<script src="src/script/itemFields.js"></script>
<link rel="stylesheet" href="src/jquery.ui.datepicker.mobile.css" />
<script src="src/jquery.ui.datepicker.js"></script>
<script src="src/jquery.ui.datepicker.mobile.js"></script>
</head>
<body>
<div data-role="page" id="claimPagefields">
<div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > Back
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul class="ui-li" data-role="listview" id="claimTypelistfields" data-inset="true" data-scroll="true">
<li data-role="list-divider">
<h2 id="itemTitle">Title</h2>
</li>
</ul>
<div data-role="navbar">
<ul>
<li>Save</li>
</ul>
</div>
</div>
</div>
</body>
</html>
It doesnt apply the theme on the input fields itself which typically look like this when i am adding it
listItem = '<li id="reasons">' +
'<h3>Reasons:</h3>' +
'<div data-role="fieldcontain">' +
'<input type="text" name="reasons" id="textFieldReasons" value="" />' +
'</div>' +
'</li>';
$('#claimTypelistfields').append(listItem);
$('#claimTypelistfields').listview('refresh');
If i manually add this snippet of code to the above input field manually
style="width:100%"
It works and resizes the width only but i am trying to see if there is way to apply it once instead of having to apply the themes all manually for each field!
Thanks
This is because:
$('#claimTypelistfields').listview('refresh');
will enhance only listview widget and only it. Every non-listview widget added to a listview will not be enhanced.
Basically you will make it work if you use this line:
$('#claimPagefield').trigger('pagecreate');
after the content has been added.
One more thing, in your current code, this line:
$('#claimPagefield').trigger('create');
will not do anything, mainly because you are calling it before new content is appended and second thing, because #claimPagefield is a page id you must use pagecreate instead of create. Create works only on content div.
I finally found the solution.
this code below did the trick as you need to first refrsh and then call teh create trigger all in one line
$('#claimProfileListView').listview('refresh').trigger("create");