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.
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;
I'm struggling to figure out what this is called, so I can't find any online tutorials for implementing this. I have a grid of images on my graphic design portfolio, but the length is getting out of hand. After a certain amount of rows, I'd like to create multiple pages to scroll through. An example of this is seen at the bottom of this designer's grid: https://risarodil.com/
Does anyone know what this effect is called? I assume it's created using js.
If I am understanding this correctly, you are thinking of pagination.
An example shown below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination - Active State</h2>
<p>Add class .active to let the user know which page he/she is on:</p>
<ul class="pagination">
<li>1</li>
<li class="active">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
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.
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>
i have a menu which contains home,patient,reports etc. This menu should be present in each and every page and it should be present at the top right of each page. I know how to design this.Now i wanted to make it hidden and it should display only when mouse is placed at the top right side of a page.Please guys tell me how to do this.If you want the code for menu bar then here is this
<html class="no-js" lang="en-US">
<head>
<style type="css/text">
body{
overflow:hidden;
}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> Home</title>
<meta name="author" content="jQuery Foundation - jquery.org">
<meta name="description" content="jQuery: The Write Less, Do More, JavaScript Library">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="base.css">
<script src="jquery.min.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<meta name="generator" content="WordPress 3.5.1" />
</head>
<body >
<header>
<section id="global-nav">
<nav>
<div class="constrain">
<ul class="links">
<li>Home</li>
<li>Patient</li>
<li>Appointments</li>
<li>Reports</li>
<li>logout</li>
</ul>
</div>
</nav>
</section>
</header>
</body>
</html>
hi i have made a example for u i hope this helps the first example shows that whenu hover over the menu show but when u stop the hover on the box the menu will disapear
http://jsfiddle.net/nFwWG/
$("#righttopbox").on('mouseenter',function(){
$("#global-nav").show();
});
$("#righttopbox").on('mouseleave',function(){
$("#global-nav").hide();
});
the second one show when u hover once the menu will stay
http://jsfiddle.net/nFwWG/1/
$("#righttopbox").on('mouseenter',function(){
$("#global-nav").show();
});
also dont forget to put jquery script on the header you can use this hosted by google by typing in google jquery google.
or you can download it at
www.jquery.com
hope this helps
Assuming global-nav is at top right
JS:
$("#global-nav").mouseenter(function(){
$(".links", this).show();
}).mouseleave(function(){
$(".links", this).hide();
});
CSS:
#global-nav .links {
display:none;
}
If it is hidden and you want to make it appear when the mouse is at top right, then you probably have to use JavaScript with mousemove event on the body or such. Then check the mouse co-ordinates and if it's in your pre-defined range (top-right) then show up the menu. As you can see e.screenX and e.screenY will give you the mouse coords relative to screen.