I want to add different styles to differents parts of a line in HTML and then print that line together. Imagine i have the next line:
Hello my name is Bogdan and i live in Spain.
I managed to add different styles to the line, but i can't manage to put all the parts together with different styles applied to each one of them.
<!DOCTYPE html>
<html>
<head>
<style>
<style>
div{
}.bold{ font-weight: bold;
}
.normal{ font-weight: normal;
}
.italic{
font-style: italic;
}
.left{
text-align:left;
float:left;
}
.container{
letter-spacing:-1px;
width: 372px;
font-family: Monaco,monospace;
font-size:19px;}
.center{
text-align:center;
}
.underline{
text-decoration: underline;
}
.doubleFont{font-size:38px;}
</style>
</head>
<body>
<div class = container>
<div class=>
<div class=>Hello my name is Bogdan</div>
</div>
<div class="underline bold">
<div class=>and i live </div>
</div>
<div class="bold">
<div class=>in Spain</div>
</div>
<br>
</div>
</body>
</html>
Replace the divs with spans like that:
<span>Hello my name is Bogdan</span>
<span class="underline bold">and i live </span>
<span class="bold">in Spain</span>
Spans are inline elements and wrap on one line. Divs always go on next lines unless set otherwise. Also consider setting bigger width on .container class.
I have a fiddle that changes the contrast and brightness of an image.
When I try and add it as a .vue component onto my site the slider no longer effects the image. I know the issue is around my filter function. I just can't understand why my :style attribute isn't applying the change to me element.
What am I doing wrong/not getting?
fiddle that works - https://jsfiddle.net/BBMAN/fxtrtqpj/14/
code for my .vue component that does not work.
<template>
<div class="brightness-slider container">
<h1>{{ msg }}</h1>
<h2>Built using Vue.js</h2>
<div class="row">
<div class="col-md-10">
<img ref="img" class="img img-responsive" :style="filters" />
</div>
<div class="col-md-2">
<strong>Contrast ({{contrast}})</strong>
<input class="slider vertical" type="range" orient="vertical" v-model="contrast" max="1" min="0" step="0.01" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>
<strong>Brightness ({{brightness}})</strong>
</h4>
<input class="slider horizontal" type="range" v-model="brightness" max="3" min="0" step="0.01" />
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ImageBrightnessSlider',
data() {
return {
//sending data to view.
msg: 'Audience Republic Brightness Modifier',
brightness: 1,
contrast: 1
}
},computed: {
filters() {
const toDash = (str) => str.replace( /([a-z])([A-Z])/g, '$1-$2' ).toLowerCase()
debugger;
return { filter: Object.entries(this._data).filter(item => typeof(item[1]) !== 'object').map(item => `${toDash(item[0])}(${item[1]})`).join(' ') }
}
},
mounted() {
this.$refs.img.src = require('../assets/pleasure-garden-1200-by-768.jpg')
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
input[type=range][orient=vertical]{
writing-mode: bt-lr; /* IE */
-webkit-appearance: slider-vertical; /* WebKit */
width: 8px;
height: 100%;
padding: 0 5px;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 3px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style>
"fiddle that works" = incorrect
you are trying to shove HTML CSS JavaScript into Javascript!!!
interpreter Javascript does not understand HTML CSS!
you code must be something like this
index.html
<div id="App">
<!-- HTML code -->
</div>
<script>
// js code
</script>
<style scoped>
/* css code */
</style>
you have many mistakes, please see official documentation
also, you can see my vue examples
UPDATED:
SFC example
I am triying to install a floating likebox in prestashop website
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.abtlikebox span a{color: gray;text-decoration:none;}
.abtlikebox span a:hover{text-decoration:underline;}
}
</style>
<div class="abtlikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fallbloggingtips&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span></span>
</div>
</div>
The problem that all website break when i add jquery in head
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
How to use this code without jquery.min.js?
I think that jquery are included in prestashop
I want to create an alert using materialize css. I don't know how. Please help. I just want to create a simple html that will display an alert error without using javascript. Thanks.
since this has no answer yet, I made something that may help you. Here is the repo
And here is a preview.
html {
line-height: 1.5;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
.materialert{
position: relative;
min-width: 150px;
padding: 15px;
margin-bottom: 20px;
margin-top: 15px;
border: 1px solid transparent;
border-radius: 4px;
transition: all 0.1s linear;
webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.materialert .material-icons{
margin-right: 10px;
}
.materialert .close-alert{
-webkit-appearance: none;
border: 0;
cursor: pointer;
color: inherit;
background: 0 0;
font-size: 22px;
line-height: 1;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
filter: alpha(opacity=40);
margin-bottom: -5px;
position: absolute;
top: 16px;
right: 5px;
}
.materialert.info{
background-color: #039be5;
color: #fff;
}
.materialert.success{
background-color: #43a047;
color: #fff;
}
.materialert.error{
background-color: #c62828;
color: #fff;
}
.materialert.danger{
background-color: #c62828;
color: #fff;
}
.materialert.warning{
background-color: #fbc02d;
color: #fff;
}
<html lang="es-MX">
<head>
<meta charset="UTF-8">
<link href="css/materialert.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="materialert">
<i class="material-icons">check_circle</i> <span>Bienvenido, Linebeck</span>
<button type="button" class="close-alert">×</button>
</div>
<div class="materialert info">
<div class="material-icons">info_outline</div>
Oh! What a beautiful alert :)
</div>
<div class="materialert error">
<div class="material-icons">error_outline</div>
Oh! What a beautiful alert :)
</div>
<div class="materialert success">
<div class="material-icons">check</div>
Oh! What a beautiful alert :)
</div>
<div class="materialert warning">
<div class="material-icons">warning</div>
Oh! What a beautiful alert :)
</div>
</body>
</html>
Hope it helps!
Materializecss alert box
Codepen link
<div class="row" id="alert_box">
<div class="col s12 m12">
<div class="card red darken-1">
<div class="row">
<div class="col s12 m10">
<div class="card-content white-text">
<p>1. Username cant be empty</p>
<p>2. Password cant be empty</p>
<p>3. Address cant be empty</p>
<p>4. Name cant be empty</p>
</div>
</div>
<div class="col s12 m2">
<i class="fa fa-times icon_style" id="alert_close" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
.icon_style{
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: white;
cursor:pointer;
}
$('#alert_close').click(function(){
$( "#alert_box" ).fadeOut( "slow", function() {
});
});
Unfortunately materialize doesn't provide alerts as bootstrap does.
You can use card-panel class instead:
http://materializecss.com/color.html
But you won't have close button to hide it.
This is a pretty late answer but you can use the modal class for these kind of things.
Example:
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.css" rel="stylesheet"/>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Alert</h4>
<p>You can use this as a alert!</p>
</div>
<div class="modal-footer">
OK
</div>
</div>
Reference: http://materializecss.com/modals.html#!
$(document).ready(function(){
Materialize.toast('I am Alert', 4000)
});
See DEMO here: http://codepen.io/ihemant360/pen/pbPyJb
You can use Matdialog.js to create different types of dialogboxes.
check it out at - MatDialog.js website
Install Toastr
bower install toastr
Require files
/bower_components/toastr.css
/bower_components/toastr.js
initialize toastr
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-bottom-left",
"preventDuplicates": true,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "3000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
Use
Success: toastr.success('success');
Error: toastr.error('fail');
Info: toastr.info('info');
Credit
Documentation: https://github.com/CodeSeven/toastr
Demo: http://codeseven.github.io/toastr/demo.html
I resolved this issue by using chips (https://materializecss.com/chips.html) and formating css style to fit the purpose.
https://codepen.io/krazer_spa/pen/VRmxzy
<div class="container">
<div class="flash_message">
<div class="chip chip_message_info">
This is an info message
<i class="close material-icons">close</i>
</div>
<div class="chip chip_message_warning">
This is a warning message
<i class="close material-icons">close</i>
</div>
<div class="chip chip_message_alert">
This is an alert message
<i class="close material-icons">close</i>
</div>
</div>
</div>
<style>
.flash_message {
position: fixed;
top: 70px;
z-index: 99999;
min-width: 80%;
}
.chip_message_info,
.chip_message_warning,
.chip_message_alert {
text-align: center;
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 20px !important;
min-width: 80%;
min-height: 50px;
}
.chip_message_info {
background-color: #bbdefb !important;
}
.chip_message_warning {
background-color: #ffcc80 !important;
}
.chip_message_alert {
background-color: #ef9a9a !important;
}
</style>
ReactJS + Materialize
Alert.js
import React, { useState } from "react";
const Alert = ({ type, children }) => {
const [isVisible, setIsVisible] = useState(true);
// set alert color based on type
let color;
switch (type) {
case "danger":
color = "red lighten-2";
break;
case "success":
color = "green lighten-2";
break;
case "info":
color = "blue lighten-2";
break;
case "warning":
color = "yellow lighten-2";
break;
default:
color = "white lighten-2";
break;
}
return (
<>
{isVisible && (
<div className="row mv--small" id="alert-box">
<div className="col s12 m12">
<div className={`card m--none z-depth-0 ${color}`}>
<div className="card-content black-text">{children}</div>
<i
className="material-icons icon_style"
id="alert_close"
aria-hidden="true"
onClick={() => setIsVisible(false)}
>
close
</i>
</div>
</div>
</div>
)}
</>
);
};
export default Alert;
You can then use it like this:
<Alert type="info">
test
</Alert>
And it looks like this:
I set up a simple form to upload files using KendoUI, and looks and works great on my dev machine (OSX Apache), but uploaded to my server (Linux Apache) it looks bad as you can see in the images. I tested with same results in both firefox and chrome, and both are fine from local copy and bad from remote. I have tripple checked that all the files are the same on both local and remote servers.
vs
My code is as follows...
<!doctype html>
<html>
<head>
<title>Test | Animation Tool</title>
<link href="./kendo/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="./kendo/styles/kendo.kendo.min.css" rel="stylesheet"/>
<script src="./jquery.js"></script>
<script src="./kendo/js/kendo.all.min.js"></script>
<style type="text/css">
body{
background-Color: #f78049;
background-image: url(stripe.png);
background-repeat: repeat-y;
margin:0;padding:0;
font-family:sans-serif;
}
#sidebar{
background-Color: #f78049;
border: 3px solid #ef652a;
margin:0;padding:0;
width: 300px;
float: left;
height: 900px;
}
.step{
border-top: 3px solid #ef652a;
}
.step p.first{
display: inline;
}
.step-id{
background-color: #ef652a;
-moz-border-radius: 7px;
font-size: 30px;
margin: .2em .2em .2em 0;
padding: .1em .2em;
}
.t-button{
margin: 0 37px 0 37px;
width:203px;
top: 10px;
}
button.t-button{
margin: .2em 37px .2em 37px;
width:220px;
}
.t-upload-files{
margin: 0.2em 2.6em 1em;
}
#main{
float:left;
}
h1, h2{
margin:0;padding:0 0 0.3em;
text-align:center;
color:#ffd;
}
#phone,#anim{
width:401px;
height:875px;
background-image:url(phone.png);
position: absolute;
top:10px;
left:350px;
}
#anim{
background-image:url("files/spec.png");
background-position:0 0;
background-repeat:no-repeat;
height:480px;
left:391px;
top:144px;
width:320px;
}
a img{
border:none;
}
</style>
<script type="text/javascript">
$(function(){
var i=0, x={timer:null, frames:4, frameWidth:320, frameRate:150};
var addTestFile = function(filename){
$('#test-files').append(
$('<button />').addClass('t-button custom').html(filename).click(function(){
$anim = $('#anim').css({backgroundImage:'url("files/'+filename+'")'})
var loop = function(){
$anim.css({backgroundPosition:"0 0"}).animate({borderWidth:0},150,function(){
$anim.css({backgroundPosition:"-320px 0"}).animate({borderWidth:0},150,function(){
$anim.css({backgroundPosition:"-640px 0"}).animate({borderWidth:0},150,function(){
$anim.css({backgroundPosition:"-960px 0"}).animate({backgroundPosition:"-640px 0"},250,function(){
})
})
})
})
}
clearInterval(x.timer)
x.timer = setInterval(function(){
loop()
}, 950)
})
)
}
$.get('files.php',function(d){
$.each(d, function(i,file){
addTestFile(file)
})
})
$("#files").kendoUpload({
async: {
saveUrl: "./save.php",
// removeUrl: "./remove.php",
autoUpload: true
},
showFileList: true,
success: function(e){
$('.t-file').last().siblings().remove()
var filename = e.files[0].name.replace(/\s/g,'-')
$('#test-files button').filter(function(){
return $(this).text() == filename
}).remove()
addTestFile(filename)
console.log('uploaded' + e.files[0].name);
// return true;
},
error: function(e){
console.log("Error (" + e.operation + ")");
e.preventDefault(); // Suppress error message
}
});
});
</script>
</head>
<body>
<div id="sidebar">
<h2>Animation Tool</h2>
<div id='one' class='step'>
<span class='step-id'>1</span>
<p class="first">Get the specification image</p>
<p><a href="getspec.php" class='t-button'>Download image...</a></p>
</div>
<div id='two' class='step'>
<span class='step-id'>2</span>
<p class="first">Edit the downloaded image file</p>
</div>
<div id='three' class='step'>
<span class='step-id'>3</span>
<p class="first">Upload your edited file</p>
<input name="files" id="files" type="file" />
</div>
<div id='two' class='step'>
<span class='step-id'>4</span>
<p class='first'>Test you animation</p>
<span id='test-files'></span>
</div>
</div>
<div id="main">
<div id="anim"></div>
<div id="phone"></div>
</div>
</body>
</html>
My guess is one of the css files is not getting pulled in. I created a fiddle here where I left out the kendo.common.min.css and the result is not exactly the same as yours, but too darn close.
http://jsfiddle.net/B4dWB/
Check your css references and make sure they are all correct and loaded in.
The easiest way to validate everything is loading correctly is to use your browser developer tools (Firebug in Firefox, Developer Tools in Chrome/Safari).
On the network tab, you should be able to see if the Kendo UI CSS and JavaScript files are being properly loaded from your remote server. (This is also a good time to make sure you're not seeing a cached version of your page/resources. That's always an easy browser debugging gotcha.)
In general, since Kendo UI runs in the browser, your hosting environment and web server should have no impact. As long as the files reach the browser, the rendering and behavior should function properly.