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?
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>
I know there seems to be a lot out there about this, but none of the solutions seem to fix my issue.
I am trying to apply a fixed button to the bottom of my screen within an iframe. With my current implementation, I am experiencing a terrible flicker with the button on iOS Safari whenever I scroll.
Here's essentially what I have:
HTML
<iframe>
<body>
<div class="app">
<div class="app-content">
<div class="card">
<h1>Header</h1>
<p>Content</p>
</div>
<button class="fixed-button">This is flickering</button>
</div>
</div>
</body>
</iframe>
CSS
iframe {
border: none;
position: absolute;
height: 100%;
width: 100%;
top: 0; left: 0;
}
app {
-webkit-overflow-scrolling: touch;
overflow:auto;
position:absolute;
width:100%;
height:100%;
}
fixed-button {
position: fixed;
bottom: 1rem;
}
I've got a WIP on my site here http://jaredrauh.com/iframe-fixed-elements-ios/. Any suggestions would be amazing.
here is my code http://jsfiddle.net/sanand29/5p8vgseh/2/ `
Page Header
</div>
<div class="ui-grid-a">
<div id="div1" class="ui-block-a">1st</div>
<div id="div2" class="ui-block-b">2nd</div>
<div id="div3" class="ui-block-a">3rd</div>
<div id="div4" class="ui-block-b">4th</div>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
.ui-grid-a div {
height: 150px;
}
#div1 {
background: #DDD;
background-image: url('xyz.png');
}
#div2 {
background: #AAA;
}
#div3 {
background: #777;
}
#div4 {
background: #444;
}
I am not getting the image inside the divided sections and even if i am getting image, its not responsive, please help
You need to add the following CSS to each of your div
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
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)
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