I want to create a dropdown box that contains of users with images. Like this image: Credits: Kendo. i want to create this type of dropdown with css only and js if needed. Is this can be done without plugin?
Here's my sample out from database and php:
$link=mysqli_connect('127.0.0.1','user','pass');
mysqli_select_db($link,"db");
$Sunshine_Award=mysqli_query($link,"select * from Sunshine_Award");
echo "<select style="width:161px; height: 33px; border-radius: 5px;"/>";
while($Sunshine_Rows=mysqli_fetch_array($Sunshine_Award))
{
echo "<option>".$Sunshine_Rows['name']."</option>";
}
echo "</select>";
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: green;
border: solid 1px blue;
}
#panel {
padding: 50px;
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">
<div id=users>user name</div><div id=users>user name</div></div>
</body>
use your server side program to insert user name & image inside the #panel
Related
I have tried for hours to get this to work trying multiple solved stack solutions and none have worked.
I am assuming I am either missing something or I have my divs/spans incorrect. Any help would be greatly appreciated. Currently my text is very small and bg color is grey and slightly transparent.
Also if it is possible to make the "info" icon smaller that would be great as well. Thank you!
.mainContainer {
width: 40%;
float: left;
}
.info {
display: flex;
}
.info .span {
align-self: center;
}
.info-button{
padding: 0;
border: none;
background: none;
outline: none;
background-color: transparent;
top:-10px;
}
<div class="mainContainer">
<h3>Main Title</h3>
<div class="info">
<h5>Title</h5><span class="info-span">
<button mat-icon-button class="info-button" #tooltip="matTooltip" matTooltip="Tooltip Text">
<mat-icon color="basic" >info</mat-icon>
</button>
</span>
</div>
</div>
Try this
::ng-deep .mat-tooltip {
background-color: transparent;
font-size: 12px;
}
You can set !important if not working.
Hope useful
You can use popper js to integrate and style tooltips it's easy and simple :
this is a quick exemple from the documentation :
<!DOCTYPE html>
<title>Popper example</title>
<style>
#tooltip {
background-color: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 13px;
}
</style>
<button id="button" aria-describedby="tooltip">I'm a button</button>
<div id="tooltip" role="tooltip">I'm a tooltip</div>
<script src="https://unpkg.com/#popperjs/core#2"></script>
<script>
const button = document.querySelector('#button');
const tooltip = document.querySelector('#tooltip');
// Pass the button, the tooltip, and some options, and Popper will do the
// magic positioning for you:
Popper.createPopper(button, tooltip, {
placement: 'right',
});
</script>
or visit the official website to learn about popper js :Tutorial
Is there a way to add an img tag without an image, but with a placeholder tag or attribute, or using css
for testing purposes: activate javascript or css etc.
You can use base64 image
please go through following links for more information and also check code snipet
Codepen Demo
base 64 tutorial
body {
background-color: #efefef;
padding: 10px;
}
div#thumbnail-frame {
border: 1px solid #999;
border-radius: 10px;
float: left;
margin-right: 10px;
padding: 1px;
}
img{
content:url('data:image/png;base64,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')
}
div#thumbnail {
border-radius: 10px;
height: 167px;
width: 250px;
background-image:url('data:image/png;base64,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');
}
<div id="thumbnail-frame">
<div id="thumbnail"></div>
</div>
<img />
You can use: https://placeholder.com/
Simply enter the dimensions and you will be good to go. Eg: https://via.placeholder.com/350x150
You can then add CSS or manipulate this with JS
Yes, it is possible. Here is an example:
(function($) {
$(document).ready(function() {
$('#path').change(function() {
$('#img').attr('src', $(this).val());
});
});
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Image path: <input id="path" value="https://www.chatelaine.com/wp-content/uploads/2018/10/Black-Panther-chadwick-boseman-e1539272923602-810x608-1539273014.jpg" />
<img src="" alt="Image not loaded" id="img" />
In the screenshot that I hvae shared you can spot a form, at it is clearly visible that the form is shown with a scrollbar(i.e. the form has a lot of content to be displayed). What I,m trying to achieve is simply display the whole of the form on the parent webapage. I have shared the html as well as css of the main page visible , so that you can look and suggest the edits needed to be made in order to do so.
This page's code is
<!DOCTYPE html>
<html>
<head>
<title>Control Panel
</title>
<script src="http://localhost:1211/js/main.js">
</script>
<link rel="stylesheet" type="text/css" href="http://localhost:1211/css/main.css">
</head>
<body>
<header>
<?php echo "USERNAME"?>
<span>
<a id = "log" href="">Logout</a>
<span>
</header>
<hr>
<nav>
<button>Add Record</button><br><br>
<button>Update</button><br><br>
<button>Perform Query</button>
</nav>
<section id="workarea">
</section>
</body>
and its corresponding css is
header
{
padding-left: 30px;
display:inline;
}
hr
{
margin-top: 10px;
}
#log
{
float: right;
margin-right: 20px;
}
nav
{
float: left;
padding-top: 100px;
width: 20%;
height: 500px;
border-style: solid;
border-left-color: #FFFFFF;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-width: 2px;
}
section
{
float: right;
margin-top: 100px;
width: 78%;
height: 500px;
}
Please suggest me the changes I need to make in order to display the form in the whole 'nav' tag area. Your help is really appreciated
I finally figured it out , for some reason the new object that was being created inside 'nav' has some problem in it , made the following changes in my css
section > object
{
width : 70%;
height: 950px;
}
and it worked like a marvel :)
I have html script like :
<html>
<head></head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
then I want to access the div by url, if url is:
example.com#div1
I want to hide div2 and if url is:
example.com#div2
then I want to hide div1
How do I solve that with css?
It is possible through CSS using pseudo selector
<html>
<head>
<style type="text/css">
.my-div {
background-color: green;
display: none;
height: 100px;
width: 100px;
}
.my-div:target {
display: block;
}
</style>
</head>
<body>
<div id="div1" class="my-div">Div 1</div>
<div id="div2" class="my-div">Div 2</div>
</body></html>
Make sure you always hit with #div1 in url e.g. example.com/#div1 or example.com/#div2 else it will show blank page
I did this recently, don't think you can do with CSS only.
this will load correct div on page load, including when the user uses back in browser.
<script>
$(document).ready(function() {
if (window.location.hash) {
var hash = window.location.hash.substring(1);
changeTab(hash);
}
else {
changeTab('div1');
}
});
function changeTab(divNo) {
$('.divclass').hide();
$('#' + divNo).show();
window.location.hash = '#'+divNo;
}
</script>
if you use a button to change divs just use:
onclick="changeTab('div1');"
set your div's class attribute to a type like 'divclass'
How to target outer div based on url?
The CSS pseudo-class :target is perfectly suited to this:
div {
float:left;
width: 300px;
height: 150px;
}
#div1, #div2 {
display:none;
line-height: 150px;
color: rgb(255,255,255);
font-size: 72px;
text-align: center;
font-weight: bold;
}
#div1 {
background-color: rgb(255,0,0);
}
#div2 {
background-color: rgb(0,0,255);
}
#div1:target, #div2:target {
display:block;
}
<div>
<p>Display Div1 (but not Div 2)</p>
<p>Display Div2 (but not Div 1)</p>
</div>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
Hello I really need your help. I have been googling around for how to make a tweet box like twitter's "What's happening" box for user to post new content using bootstrap 3 but so far I cannot find anything close.
Anyone have any idea or keyword that could help? Thank you very much!
You may find a lot of plugins to do the same . But If you want do it your own follow the below steps (this contain only basic functionality)
Define a span or div like below
<div class="container">
<div id="mockTextBox">
What's Happening ?
</div></br>
<textarea id="originalTextBox" class="form-control">
</textarea>
</div>
Hide the textarea at first and show the span/div as textbox.
Then define the events
$(document).ready(function(){
$('#originalTextBox').hide()
$('#mockTextBox').click(function(){
$('#mockTextBox').hide()
$('#originalTextBox').show()
})
})
Apply CSS accordingly and you got what you want.
#mockTextBox
{
width:300px;
height:50px;
border:1px solid;
}
#originalTextBox
{
width:300px;
height:50px;
resize:none;
}
Check this sample http://codepen.io/Midhun052/pen/mVByzK
I have add the bootstrap class to text area in the codepen above for that nice look.
Just updated
A few more CSS and Images
$(document).ready(function() {
$('#originalTextBox').hide()
$('#mockTextBox').click(function() {
$('#mockTextBox').hide()
$('#originalTextBox').show()
})
})
#mockTextBox
{
width:300px;
height:50px;
border:1px solid;
display:inline-block;
margin-top:10px;
border: 1px solid #337ab7;
}
#txt
{
border:1px solid;
display:inline;
height:20px;
}
#originalTextBox
{
width: 310px;
height: 100px;
resize: none;
border: 1px solid #337ab7;
background-color: #337ab7;
margin: 10px;
}
#originalTextBox textarea
{
resize:none;
margin:5px;
width:300px;
}
.class2
{
float: right;
margin-top: 12px;
margin-right: 2px;
}
.imgF1
{
width:20px;
height:20px;
margin:5px
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="container">
<div id="mockTextBox">
<img src="http://lorempixel.com/46/46"/>
<div id="txt">What's Happening ?</div>
<img class="class2" src="http://lorempixel.com/16/16"/>
</div>
<div id="originalTextBox">
<textarea class="form-control">
</textarea>
<img class="imgF1" src="http://lorempixel.com/46/46">Post your photo</img>
</div>
</div>
It's simple jQuery application.
Check this out.
Here's a JSFiddle.
Then all you gotta do is initiate the jQuery.
Such as:
$('textarea').autogrow({onInitialize: true});
Check fiddle for more info.
Cheers!
UPDATED ANSWER:
Use CSS to style your textarea, no need for javascrcipt styling here. Prepare your style in CSS under a specific class and when you need to, you can add your element this class and its propeties. This is much cleaner solution. Use focus and blur events to get textarea element. Here is example.
HTML
<textarea rows="4" cols="50" id="txtArea">
<textarea>
JS
$(document).ready(function() {
$('#txtArea').on("focus", function(event) {
if(!$('#txtArea').hasClass('customTextAreaClass')){
$('#txtArea').addClass('customTextAreaClass');
}
});
$('#txtArea').on("blur", function(event) {
if($('#txtArea').hasClass('customTextAreaClass')){
$('#txtArea').removeClass('customTextAreaClass');
}
});
});
CSS
.customTextAreaClass{
background-color: #fff;
width: 565px;
color: #000;
height: 120px;
padding-left: 1px;
padding-top: 1px;
font-family: "Tahoma", Geneva, sans-serif;
font-size: 10pt;
border: groove 1px #e5eaf1;
position: inherit;
text-decoration: none;
}