I'm having a problem with custom icons in header. Followed the instruction on demo page and worked on panel; however, still not get any clue why those in header wouldn't show up.
Here is my code http://jsfiddle.net/kukubag/z257dngf/3/
<div data-role="page" id="fpost-page" data-url="fpost-page" data-theme="f">
<div data-role="header" data-position="fixed" data-theme="f">
<span class="ui-title"></span>
</div>
.ui-iconmenu:after {
background-image: url("https://dl.dropboxusercontent.com/u/67263773/travelogue/img/icmenu.png");
background-size: 22px 22px;
}
.ui-iconnew:after {
background-image: url("https://dl.dropboxusercontent.com/u/67263773/travelogue/img/icnew.png");
background-size: 22px 22px;
Try adding a dash inyour custom icon names: ui-icon-menu and ui-icon-new:
.ui-icon-menu:after {
background-image: url("https://dl.dropboxusercontent.com/u/67263773/travelogue/img/icmenu.png");
background-size: 22px 22px;
border-radius:0;
}
.ui-icon-new:after {
background-image: url("https://dl.dropboxusercontent.com/u/67263773/travelogue/img/icnew.png");
background-size: 22px 22px;
border-radius:0;
}
Here is your updated FIDDLE
Your first URL is wrong: you wrote url("https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_Chrome.png.png"); with 2 times .png
Replace with url("https://cdn1.iconfinder.com/data/icons/appicns/513/appicns_Chrome.png");
And why did you use :after in your css?
Check here: http://jsfiddle.net/nrobert/z257dngf/4/
I also added the script in the right way in the fiddle (need to be added on the left pane)
Related
I'm trying to dynamically change the background image on a jumbotron depending on my view content but I am unsure of how to do this. My code so far sticks the image inside the jumbotron as a separate element but as I say, I really want this to be the background image so that it'll scale nicer and I can central valign the image.
<div class="jumbotron" style="padding:0px; max-height: 200px; overflow:hidden; border-radius:0;">
<img src="#Model.Artist.ArtistHeaderImage" alt="#Model.Artist.ArtistAlias" class="img-fluid" />
</div>
This is the sort of thing I'm trying to achieve
.jumbotron {
background-image: url("#Model.Artist.ArtistHeaderImage");
background-size: cover;
}
Ignore the inline styles - I will be moving them to a class once I've finished. Thanks
If the jumbotron is inside a layout and the individual views are inside RenderBody you could do;
Add this to your layout
<head>
...
#RenderSection("Styles", false)
</head>
Add this to your view
#section Styles {
<style>
.jumbotron {
background-image: url("#Model.Artist.ArtistHeaderImage");
background-size: cover;
}
</style>
}
Or if your jumbotron is inside the view, simply add a style tag above that element or on its header.
<style>
.jumbotron {
background-image: url("#Model.Artist.ArtistHeaderImage");
background-size: cover;
}
</style>
<div class="jumbotron" style="padding:0px; max-height: 200px; overflow:hidden; border-radius:0;"></div>
The issue is as follows: backgrounds do not float slowly on scroll, they just change each other smoothly, but there is no 'depth effect' as I've seen in several demos.
I would usually follow this example
http://www.youtube.com/watch?v=NUsEGbSbMZ4. So what he has is kind of plain white panel with text that shifts over steering wheel image, but wheel image moves slightly itself. This is exactly what I can't reach.
Is there any solution?
index.php
<div class="slide" id="slide1" data-stellar-background-ratio="0.5">
<div class="container">
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6"><h1></h1></div>
</div>
</div>
<a class="button" href="" title=""></a>
</div>
custom.css
.slide {
background-attachment: fixed;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
position: relative;
}
#slide1 {
background-image: url(../img/slide1/green-grapes.jpg);
background-size: cover;
}
#slide2 {
background-image: url(../img/slide2/indian-market.jpg);
background-size: cover;
}
#slide3 {
background-image: url(../img/slide3/floating-market.jpg);
background-size: cover;
}
main.js
$(function() {
$.stellar({
verticalScrolling: true,
parallaxBackgrounds: true,
responsive: true,
scrollProperty: 'scroll',
positionProperty: 'position'
}).stellar('refresh');
});
Okay, what I figured out is that I had to initialize Stellar.js by putting the following script before closing body tag:
<script>
$.stellar();
</script>
Can someone explain me why initialization in main.js file (it is linked at the bottom of index.php) did not work?
How to create three "like" image buttons in one row ( one aside another) in jquery mobile ?
I have tried like this
<body>
<a class="ui-icon-google" href="#" data-role="ui-li-aside" data-icon="google" data-theme="a"/>
<a class="ui-icon-facebook" href="#" data-role="ui-li-aside" data-icon="facebook" data-theme="a"/a>
<a class="ui-icon-twitter" href="#" data-role="ui-li-aside" data-icon="twitte" data-theme="a"/a>
</body>
with css like
.ui-icon-google{
background-image: url("google.png") !important;
background-position: 4px 50%;
background-size: 60px 60px;
margin-top: -12px !important;
width: 192px;
height: 192px;
}
.ui-icon-facebook{
background-image: url("facebook.png") !important;
background-position: 4px 50%;
background-size: 60px 60px;
margin-top: -12px !important;
width: 192px;
height: 192px;
}
.ui-icon-twitter{
background-image: url("twitter.png") !important;
background-position: 4px 50%;
background-size: 60px 60px;
margin-top: -12px !important;
width: 192px;
height: 192px;
}
but it one above another ( what is wrong, I am trying to put icons for openid like on stackoverflow )
You need images first then you can link the images to your location.
make it a grid :
<div class="ui-grid-b">
<a class="ui-block-a ui-icon-google" href="#" data-role="ui-li-aside" data-icon="google" data-theme="a"/>
<a class="ui-block-b ui-icon-facebook" href="#" data-role="ui-li-aside" data-icon="facebook" data-theme="a"/a>
<a class="ui-block-c ui-icon-twitter" href="#" data-role="ui-li-aside" data-icon="twitte" data-theme="a"/a>
</div>
Simply create a inline button group:
<div data-role="controlgroup" data-type="horizontal" >
Up
Down
Delete
</div>
Style it as you wish. Take a look at this link, here you will find many more examples of jQM GUI elements. Here's an example: http://jsfiddle.net/Gajotres/YJfzP/
Make the images inline or imline-block elements. Add the following style to .ui-icon-google, .ui-icon-facebook and .ui-icon-twitter:
display: inline;
Or,
display: inline-block;
I'm a bit of a JQuery Mobile Noob and I've been trying to search for an answer to this, but to no avail. I've created a ui-navbar with five custom data icons. Problem is when I select one of the five links, the buttons to the left of the selected link take on the selected icon. Also, what should be the right arrow on the ul-listview element, also takes on the selected icon albeit it's hard to see. Had to use Firebug to expand that in order to see if's the selected data-icon.
Here's the code I'm using for the navbar in my footer:
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
And some of the CSS:
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon {
background-image: url(images/nav.png);
background-position: 0 0;
background-repeat: no-repeat;
}
Any idea why this might be happening? It has to be something with my styles I would think.
don't use the name ui-icon only, instead use ui-icon-something, see also the docu about custom icons
Custom Icons
To use custom icons, specify a data-icon value that has a unique name
like myapp-email and the button plugin will generate a class by
prefixing ui-icon- to the data-icon value and apply it to the button:
ui-icon-myapp-email.
You can then write a CSS rule in your stylesheet that targets the
ui-icon-myapp-email class to specify the icon background source. To
maintain visual consistency with the rest of the icons, create a white
icon 18x18 pixels saved as a PNG-8 with alpha transparency.
In this example, we're just pointing to a standalone icon image, but
you could just as easily use an icon sprite and specify the
positioning instead, just like the icon sprite we use in the
framework.
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<style>
.ui-icon-taifun {
background-image: url("taifun.png");
}
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon-taifun {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon-taifun {
background-image: url(taifun.png);
background-position: 0 0;
background-repeat: no-repeat;
}
</style>
<title>Test</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Pets</h2>
<ul data-role="listview">
<li>Canary</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Farm animals</h2>
<ul data-role="listview">
<li>Chicken</li>
<li>Cow</li>
<li>Duck</li>
</ul>
</div><!-- /collapsible -->
</div>
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
</div>
</body>
</html>
screenshot
I have a problem with a div that at the begin is fixed in the bottom-left corner. I need to do it draggable but when I use jquery to do it the bottom position remains and the size of the div changes.
You can see the behavior in this page: http://paraguasparados.com
The div css code is:
.fcp-cpanel{
position:fixed;
bottom:20px;
left:10px;
z-index: 99999;
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('../img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
The jquery code is:
$jn("#fcp-cpanel").draggable({
containment:"body",
scroll: false,
opacity: 0.35
});
When in firebug I remove the 'bottom' css style it works like it should.
Thanks for any help.
The easiest solution to this is to add a width and height to your fixed draggable <div> to stop it from resizing on drag.
The problem is that you are making a fixed element draggable and so the bottom css attribute is messing it up when you start moving it. A fix for this is to create a container div that has the fixed css attributes and inside you can add the draggable element. Something like this:
css:
.fcp-cpanel-container{
position:fixed;
bottom: 10px;
left:10px;
}
.fcp-cpanel{
padding: 5px;
color: #000;
text-align: left;
font-size: 11px;
background:url('http://paraguasparados.com/modules/mod_friendchatppd/img/blueicons/background.jpg') repeat-x;
border:1px solid #000;
}
html:
<div class="fcp-cpanel-container">
<div class="draggable fcp-cpanel">
<p><b>Amigos Online</b>
<span id="onlusers" class="onlusers">0</span><span onclick="register()"><img title="Registrar" alt="Registrar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/visible.jpg"></span>
<span onclick="maximize()" id="fcp-micon">
<img title="Maximizar" alt="Maximizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/max.jpeg">
<img style="display:none;" title="Minimizar" alt="Minimizar" src="http://paraguasparados.com//modules/mod_friendchatppd/img/blueicons/min.jpeg">
</span>
</p>
</div>
</div>
I set up a working example with your code here: http://jsfiddle.net/NdUNu/.
I tried this and it did what I wanted
$(function() {
$("#draggable").draggable({ containment: "window" });
});