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" />
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
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
Right now I have a background image URL hard-coded into CSS. I'd like to dynamically choose a background image using logic in AngularJS. Here is what I currently have:
HTML
<div class="offer-detail-image-div"><div>
CSS
.offer-detail-image-div {
position: relative;
display: block;
overflow: hidden;
max-width: 800px;
min-height: 450px;
min-width: 700px;
margin-right: auto;
margin-left: auto;
padding-right: 25px;
padding-left: 25px;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border-radius: 5px;
background-image: url('/assets/images/118k2d049mjbql83.jpg');
background-position: 0px 0px;
background-size: cover;
background-repeat: no-repeat;
}
As you can see, the background image in the CSS references a specific file location. I want to be able to programmatically determine the location of the image URL. I really don't know where to begin. I do not know JQuery. Thank you.
You can use ng-style to dynamically change a CSS class property using AngularJS.
Hope this ng-style example will help you to understand the concept at least.
More information for ngStyle
var myApp = angular.module('myApp', []);
myApp.controller("myAppCtrl", ["$scope", function($scope) {
$scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];
$scope.style = function(value) {
return { "background-color": value };
}
}]);
ul{
list-style-type: none;
color: #fff;
}
li{
padding: 10px;
text-align: center;
}
.original{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myAppCtrl">
<div class="container">
<div class="row">
<div class="span12">
<ul>
<li ng-repeat="color in colors">
<h4 class="original" ng-style="style(color)"> {{ color }}</h4>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
Edit-1
You can change the background-image: URL by following way.
$scope.style = function(value) {
return { 'background-image': 'url(' + value+')' };
}
You can use ng-class : documation.
If you want to do it in your directive check directive - attr : attr.
You can use [ngStyle] directly. It's a map, so you can directly address one of its elements like so: [ngStyle.CSS_PROPERTY_NAME]
For example:
<div class="offer-detail-image-div"
[ngStyle.background-image]="'url(' + backgroundSrc + ')'">Hello World!</div>
Also, for serving assets, Angular has the bypassSecurityTrustStyle utility function that can come in handy when serving up assets dynamically.
enter the size in textbox you can see box changes height and width
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Change the value of the input field:</p>
<div ng-app="" >
<input ng-model="myCol" type="textbox">
<div style="background-color:red; width:{{myCol}}px; height:{{myCol}}px;"> </div>
</div>
</body>
</html>
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;
}
I want to replace my File Field with Image Icon. Because File Field Doesn't looks cool.
Take a Look at this Camera Icon. When someone clicks this Icon, Browse Window Opened up :
Here is JsFiddle DEMO:
http://jsfiddle.net/8aJb4/2/
Here is my CODE:
HTML:
<div class="container">
<input type="file" name="image_src" id="image_src" >
</div>
CSS:
.container{
width:500px;
border:black solid 1px;
text-align:center;
padding:4px;
}
Here is the link to Image Icon:
http://postimg.org/image/rg17ffpxh/
Here's a Fiddle
<div class="container">
<span class="select-wrapper">
<input type="file" name="image_src" id="image_src" />
</span>
</div>
.container{
width: 500px;
border: 1px solid #333;
padding: 4px;
}
.select-wrapper {
background: url(http://s10.postimg.org/4rc0fv8jt/camera.png) no-repeat;
background-size: cover;
display: block;
position: relative;
width: 33px;
height: 26px;
}
#image_src {
width: 26px;
height: 26px;
margin-right: 100px;
opacity: 0;
filter: alpha(opacity=0); /* IE 5-7 */
}
HTML
<script>
function upload(){
document.getElementById("image_src").click();
}
</script>
<div class="container">
<img id="img" src="http://postimg.org/image/rg17ffpxh/" onclick="upload()" alt="hello"/>
<input type="file" name="image_src" id="image_src" />
</div>
CSS
.container{
width:500px;
border:black solid 1px;
text-align:center;
padding:4px;
}
#image_src {
position:absolute;
left:-9999px;
}
#img { cursor:pointer; }
I didn't get your image link to work but here is jsfiddle
it is simple, you just define a file element as hidden and also define an img tag with your own background in it. Write javascript to click the file element programmatically on the click of your img tag. something like this:
<input type="file" name="image_src" id="image_src" hidden='hidden'>
<img src='url' onclick='openWindow()'>
function openWindow(){
document.getElementById("image_src").click
}