I am trying to archive similar effect to facebook's cover and profile image when one is placed top of the other. I tried to add css like this:
.profileImage{
position: relative !important;
z-index: -1 !important;
}
it does not change anything. My cover photo is in <Image> tag and my profile is in <Avatar> if that's important. Thanks :)
With the right CSS you can do it pretty easy.
Here a example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>MVC with XmlView</title>
<style>
.profileImage {
position: absolute !important;
margin-top: 50px !important;
margin-left: -100px !important;
}
</style>
<!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_belize_plus' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>
<!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->
<!-- define a new (simple) View type as an XmlView
- using data binding for the Button text
- binding a controller method to the Button's "press" event
- also mixing in some plain HTML
note: typically this would be a standalone file -->
<script id="view1" type="sapui5/xmlview">
<mvc:View xmlns="sap.m" xmlns:f="sap.f" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
<Image src="http://via.placeholder.com/350" height="150px"></Image>
<f:Avatar class="profileImage"></f:Avatar>
</mvc:View>
</script>
<script>
// define a new (simple) Controller type
sap.ui.controller("my.own.controller", {});
/*** THIS IS THE "APPLICATION" CODE ***/
// instantiate the View
var myView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
}); // accessing the HTML inside the script tag above
// put the View onto the screen
myView.placeAt('content');
</script>
</head>
<body id='content' class='sapUiBody'>
</body>
</html>
Related
I'm trying to include CSS in Phoenix templates (EEx) so that I can define components (that render on the server) that not only include HTML but also their own CSS. For that I would like to include a tag with the CSS for that template (component) hoping it would be injected in the <head> but that's not what happen. I made a few experiences and wasn't able to achieve that (weird enough when I did that my webpage didn't break and I could see <head> and <style> tags inside the <body>).
A sample templateXYZ.html.eex code could be:
<style>
.main {color: red;}
</style>
<div class="main">
<!-- Html code goes here -->
</div>
Note that the main goal of this is to allow me to write all the "component" code in one template (Html, CSS and Javascript - with the later there's no problem so I'm omitting it in the example/question) in a way that I only need to place the template in the proper place inside my other templates (rendering a template inside another template is also not a problem) and do nothing more (like as when I have a separated CSS file and need to import it in the <head>).
As a comparison, I can do what I want in the client side with raw Javascript that places my <style> and HTML in the DOM like this:
function f_auxButton(imgpath,id){
if (document.getElementById('auxButtonId')){} // <style> is only created on first component instanciation to avoid duplication
else {
$('<style id="auxButtonId">\
.auxButton {\
width: 25px;\
height: 25px;\
margin: 10px;\
}\
<\style>').appendTo("head")}
return '<img src="'+imgpath+'" class="auxButton" id="'+id+'">'
Then I just have to call <script>f_auxButton(arg1,arg2)</script> where I want to place the HMTL and I get it (plus the <style> tag that goes into the <head>.
So, is there a way of doing this?
app.html.eex
<!doctype html>
<html>
<head>
<title></title>
<%= render_existing view_module(#conn), "_styles.html", assigns %>
</head>
<body>
<div class="main">
<%= render_existing view_module(#conn), "_component.html", assigns %>
</div>
</body>
</html>
/web/templates/shared/_components.html.eex
<%= render MyApp.PageView, "_styles.html" %>
<img src="<%= static_path(MyApp.Endpoint, "/path/example.png")%>", class="auxButton">
/web/templates/page/_styles.html.eex
<style>
.auxButton {width: 25px;height: 25px;margin: 10px;}
</style>
Final Result
<!doctype html>
<html>
<head>
<title>My App</title>
<style>
.auxButton {width: 25px;height: 25px;margin: 10px;}
</style>
</head>
<body>
<div class="main">
<img src="/path/example.png" class="auxButton">
</div>
</body>
</html>
I'm having a hard time initializing a leaflet map in fullscreen in a jquery mobile project.
When I init the map from a $(document).on('pagecreate')-event the map starts as a very small layer sitting on the left top of the browser, and if I resize the browser just a little, the map pops into fullscreen and stays there.
On the other hand, when i init the map from a window.onload-event - everything inits perfect.
As i understand it using pagecreate is preferable, so i wanna use it.
aspx:LeafletLoad.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="LeafletLoad.aspx.cs" Inherits="RadikaleNu.LeafletLoad" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Leflet load</title>
<link href="Content/jquery.mobile-1.4.5.css" rel="stylesheet" />
<link href="Content/leaflet.css" rel="stylesheet" />
<link href="Content/leafletload.css" rel="stylesheet" />
<!-- Javascript libraies -->
<script src="Scripts/jquery-2.1.3.js"></script>
<!--<script src="Scripts/jquery-2.1.3.min.js"></script>-->
<script src="Scripts/jquery.mobile-1.4.5.js"></script>
<script src="Scripts/leaflet-src.js"></script>
<script src="Scripts/leafletload.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div data-role="page" id="MapPage" >
<div role="main" class="ui-map">
<!-- Map -->
<div id="map"></div>
</div>
</div>
</form>
</body>
</html>
Javascript: leafletload.js
var map = null;
var osm = null;
//This works perfectly - the map starts fullscreen
/*
window.onload = function () {
InitMap();
};
*/
//This works not so perfectly - the leflet map starts very minimized in the top left corneruntil browser resize.
$(document).on('pagecreate', function(){
InitMap();
});
function InitMap() {
// set up the map
map = new L.Map('map');
osm = new L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.{ext}', {
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
});
// start the map in Copenhagen, Denmark
map.setView(new L.LatLng(55.682665, 12.536639), 9);
map.addLayer(osm);
}
CSS: leafletload.css
body {
margin: 0;
}
#map {
height: 100%;
}
.ui-map {
position: absolute;
top: 0px;
right: 0;
bottom: 0px;
left: 0;
padding: 0 !important;
}
On the other hand, when i init the map from a window.onload-event - everything inits perfect.
You'll want to use onload. The gist of it is that events like pagecreate and ready (also known as $(function(){}) fire when the page's content is loaded but the page isn't laid out - your browser doesn't know yet what size the map will be. Leaflet needs that size in order to draw the map, and since pagecreate doesn't let it know that, it draws a tiny, cropped map as you see currently.
Flowplayer has an icon on the top left of the video which is "<>". When you click on it comes up with message "Paste this HTML code on your site to embed."
I want to remove that icon from my videos.
So I changed the fp-embed to display:none as per below.
However its still not working.
Any help would be appreciated.
Thanks
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flowplayer ยท iframe src</title>
<!-- optimize mobile versions -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The "minimalist" skin - choose from: "minimalist.css", "functional.css", "playful.css" -->
<link rel="stylesheet" href="//releases.flowplayer.org/5.4.6/skin/playful.css">
<style type="text/css">
.fp-embed {
display: none;
}
</style>
<!-- Flowplayer depends on jquery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/5.4.6/flowplayer.min.js"></script>
</head>
<body>
<div class="flowplayer color-light fixed-controls color-alt no-background"
data-fullscreen="true">
<video>
<source type="video/mp4" src="http://example.com/example.mp4">
</video>
</div>
</body>
</html>
the above mentioned method will Never work. I wasted a lot of time in doing it just by css.
instead of this :
<div class="flowplayer color-light fixed-controls color-alt no-background"
data-fullscreen="true">
use this :
<div class="flowplayer color-light fixed-controls color-alt no-background"
data-fullscreen="true" data-embed="false">
Your style gets overwritten by that of flowplayer itself.
If you be more specific with your CSS style selector you will be able to hide it:
.flowplayer .fp-embed {
display: none;
}
Use this:
flowplayer.conf = {
embed : false
};
Rer.: https://flowplayer.org/docs/embedding.html#disabling-embedding
I have a ckeditor that currently has a height and width of auto, but I would like to make these parameters fixed. I first tried to set the rows and cols but this did not work:
<textarea id="editor1" name="editor1" rows="10" cols="10">
Example text goes here
</textarea>
Then I tried to use the config file with this code (which still doesn't work):
<script>
CKEDITOR.editorConfig = function(config) {
config.height = '100px';
config.width = '100px';
};
</script>
After using both of these methods, the height and width of the ckeditor is still auto (checked with chrome's inspect element feature)
My example: http://strawberrycv.com/test.php
The code to this page:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="ckeditor/ckeditor.js"></script>
<style>
#ckeWrapper{
height: 700px;
width: 600px;
}
</style>
</head>
<body>
<form>
<div id='ckeWrapper'>
<textarea id="editor1" name="editor1" rows="60" cols="90">
the text goes here
</textarea>
</div>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
hey i just started using this plugin but i think i got a clue for u:
find the api here: http://docs.ckeditor.com/#!/api/CKEDITOR.config
And look for the corresponding JS line that should go in the bottom ''
After you have defined the texarea JS takes over, so I'd say you need to do your editing in the JS instead of the CSS.
Here is my HTML.
<html>
<head>
<style type="text/css">
.button {
background: url('images/1.png');
}
.button:hover {
background: url('images/2.jpg');
}
</style>
</head>
<body>
<img class="button" src="images/1.png">
</body>
</html>
The files are present but it still doesn't work. What am I doing wrong?
The standard method is CSS:
input.mybutton { background-image: url('button.jpeg'); }
input.mybutton:hover { background-image: url('selectedButton.jpeg'); }
Using JavaScript, you can overwrite the .src of an image:
imageElement.src = 'selectedButton.jpeg';
<img src="button.jpeg" onmouseover="this.src='selectedButton.jpeg'" onmouseout="this.src='button.jpeg'"/>
Probably the best way is to use css and set the background image of the element based on the hover property.
If you can use jQuery in your application then it will be fairly simple.On mouseover event of the button just swap the background image.Following sample code does it for a div element :-
<div class="title"/>
$(document).ready(function () {
$('div.title').mouseover(function () {
$(this).css("background-image", "url('Forest Flowers.jpg')");
});
});
Use javascript to do this. Use onmouseover and onmouseout events to handle this.
If you can use jQuery then you can use the hover event.
$("img.button").hover(function(){
$(this).attr("src","path of image on mouse over");
},
function(){
$(this).attr("src","path of image on mouse out");
});
Use a tag to wrap the image.
<hmtl>
<head>
<style type="text/css">
a.button{
background: url('images/1.png');
display:block;
width: *width*;
height: *height*;
}
a.button:hover{
background: url('images/2.jpg');
}
</style>
</head>
<body>
<a class="button"></a>
</body>
Edit: I just realize that you are trying to replace the background image under your image....
one option that you have is to use javascript. but if you want to use only CSS and alse want to use this image as control, the above edited solution is good.
I used an h1 tag. I have tested the following code in IE8,Firefox,GoogleChrome and it is working, we just need to add the doctype correctly:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.button {
background: url('images/1.jpg');
height: 400px;
width: 400px;
}
.button:hover {
background: url('images/2.jpg');
}
</style>
</head>
<body>
<h1 class="button"></h1>
</body>
</html>
Images don't generally have background images. Use a different element, and non-relative paths would probably be a good idea, too.
Buttons do not have a hover state. You might want to try A (link) tags, and set the background there.