I would like to create a tooltip containing an unodered list using bootstrap v2.3.2. I am currently using the following html as the content of the tooltip:
<p align='left'><b>This alert would have fired:</b></p>
<ul align='left'>
<li align='left'>1 time in the past week</li>
<li align='left'>8 times in the past two weeks</li>
<li align='left'>20 times in the past month</li>
</ul>
The current output looks like this:
I would like the 3 list items to be bulleted and have the natural indent of an unordered list but for some reason the tooltip does not behave like this. I am relatively new to html and css so please assume very little css and bootstrap knowledge in any explanations. I will create css classes for this once I have it working correctly so please be easy on my bad practices (if I have any) but do point them out.
Tooltips aren't really designed for displaying HTML code within them (unless you use a tooltip plug-in like Tooltipster (http://iamceege.github.io/tooltipster/). I would think of a more clever way to incoporate what you want displayed onto the page without using a tooltip. I put some code below which is easy to read, that shows the error of trying to use HTML within a tooltip.
<!doctype html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<p align='left' data-toggle="tooltip" title = "'<br>'One'<br>'Two">This alert would have fired:</p>
</body>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Edit: Here's a good reference on Bootstrap's tooltips. Nothing wrong with saying you're "new" to web development by the way. We all have to start somewhere :-)
-> http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp
Related
I'm learning CSS, but unable to get desired layout using Flexbox and CSS Grid on attached buttons.
I'm practising both Flexbox and CSS Grid at same time. Issue is if the HTML document has button tags already included, the CSS works fine. However CSS is not working on buttons appended to li tag using Javascript/dom. Same issues happening with both Flexbox and CSS grid.
// original HTML file used
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="enter items">
<button id="enter">Enter</button>
<ul class="list">
<li class="bold red" random="23">Notebook</li>
<li>Jello</li>
<li>Spinach</li>
<li>Rice</li>
<li>Birthday Cake</li>
<li>Candles</li>
</ul>
<script type="text/javascript" src="script.js"></script>
</body>
The result I'm trying to get is the delete button at the end of the li item (similar to first 2 items, notebook and jello) so that it's all justified at right side.
Any new items entered into list does not display as intended as well. Please take a look at attached link below. Any comments appreciated.
https://jsbin.com/febulokoru/edit?html,css,output
EDIT1: took a look at console again, realised the button was being appended to the textContent(inside the closing li tag). How do I move it out of li and append it after closing li tag?
nested grid can be used to fix layout issue.
instead of appendChild, use insertAdjacentElement method so button is not inside of li tag
I own a website at https://shadowdragonp.github.io/ using a somewhat well-known template called "Squadfree."
On the navigation bar, there are your typical buttons, such as "home", "about", "contact", etc. However, there is also a drop-down menu (not hyperlinked) called "Portals" that takes you to various sub-directories. Although the navigation bar changes depending on the sub-directory, the "portals" menu will always be the same on every page.
The "portals" menu will include more items on the list as time goes on. I do not want to edit all of the pages when I add an item to the portal menu, so I am looking for a way to possibly reuse code for the HTML. All suggestions are welcome!
<li class="dropdown">
Portals <b class="caret"></b>
<ul class="dropdown-menu">
<li>Music</li>
<li>Games</li>
<li>Software</li>
<li>Image Gallery</li>
</ul>
</li>
Add a new html file to a directory something like PortalSubMenu.html. write the code you want to reuse inside of this newly created html document. In your case its gonna be the code your wrote above. Now assign an Id to your navigation bar lets say id="menu". Once done write the following script just before the ending of body tag ''.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
//wait until the dom is fully loaded
$(document).ready(function () {
//adds PortalSubMenu.html content into "#menu" element
$('#menu').load('PortalSubMenu.html');
});
</script>
Don't forget to remove the Portal navigation drop down from man page as this will be coming from separate source. For more info take a look at this Stack Overflow thread Link
I hope you will achieve what you are looking for but I still recommend you to use some server side rather then plain html. because in that case you will generally have a master page or Layout page where you can define things that will stay same across your websites.
Right now at my job, I'm tasked with creating a monitoring dashboard site. I'm thoroughly looking through a lot of different design choices and what my company wants, but all the templates I'm looking at for dashboards aren't formatted the way the company wants: a nested tab feature, not a side bar navigation.
Upon looking through a bunch of nested tab examples, one of them caught my attention which was Zozoui's Nested Tabs. This isn't something I've seen from BootStrap and JQuery UI, so I don't even know how to begin with starting something like this, but I'd like to change a couple of things here and there, like right before the second set of tabs, have a description of the first current tag.
So in short, how do I create my own nested tab feature like Zozoui's Nested Tabs?
You can make a menu and a div for contents when you click a specific tab it's contents should show in that div.do it by jquery or js.
HTML
<nav id="menu">
<a id="item1">item1</a>
<a id="item2">item2</a>
.
.
.
</nav>
<div id="contents">
<div>
jquery
$("#menu a").click(function{
$("contents").html(//something that you want);
});
got a question here. I have a very simple polymer-element that taking a series of <a> anchor tags inside it (the Light-DOM), it creates some kind of navigation bar. So my simple solution consists in to get access to the Light-DOM (from the polymer-element) to know how many anchors the user put in there and also get some information that i need for generate the thing in a template as follows:
<!-- this is the polymer-element -->
<polymer-element name='x-nav' >
<template>
<style>
a {color: blue;}
li{display: inline-block;}
</style>
<nav>
<ul>
<template repeat="{{links}}">
<li>
{{innerHTML}}
</li>
</template>
</ul>
</nav>
</template>
<script>
Polymer('x-nav', {
ready: function(){
this.links = [];
for(var i = 0; i < this.children.length; i++){
this.links.push(this.children[i]);
}
}
});
</script>
</polymer-element>
<!-- this is the implementation in the Light-DOM -->
<x-nav>
<a href='/hone'>home</a>
<a href='/about'>about</a>
<a href='/contact'>contact</a>
</x-nav>
The question is that I really dont know if this is a good approach or if there are a better way or "best practices" to accomplish this kind of stuff, when we want to create customizable elements and we dont know what or how many tags the user will put in the ligh-dom side. Thanks! :D
That seems fairly reasonable to me and should work fine, so long as the <x-nav>'s links are static.
Two things of note, rather than this.children you could try this.querySelectorAll('a') to be sure that you only get the 'a' nodes.
You could also look into using <content select='a'></content> as that's responsive to changes in the x-nav's light dom, but I don't know of a way to put each anchor in a separate <li> with <content>. It's possible that <content select='a[nth-child({{idx}})]'></content> would work, requiring you to only keep track of how many anchors are in the light dom.
I wish to provide a quick demo about the contents of my website and how to use them in a proper way as soon as a user visits my page. I wish to give the demo using a popup type window at the top.
I mean small information boxes informing user about the various steps one by one. Can anyone help me how to do this?
Look at the jQuery UI dialog, it's fully customisable, or consider using some sort of tool tip idea, when you mouse over a part of the page feedback to the user what the section in question is for (via hovering mouse overs etc).
One simple way to do this is with javascript.
Try this
<script type="text/javascript">
alert("Hello world!");
</script>
visit this page for more information.
know this question is old but try intro.js
include js/css
<link rel="stylesheet" href="css/introjs.min.css">
<script type="text/javascript" src="jquery/intro.min.js"></script>
then on each item you want to show tutorial add the following
data-step="1" data-intro="Enter tip text"
<div class="span6" data-step="1" data-intro="Click here for help">
<div class="span6" data-step="2" data-intro="Click here for home page">