<div data-role="header" data-theme="e">
<a href="index.html" data-theme="b" data-icon='gear'>Switch</a>
<h1>Header</h1>
Home
</div>
No gear or home icons show. I dont get it. Here are files used, all newest.
<link rel="stylesheet" href="css/jquery.mobile-1.0.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
Any ideas? Thanks for your input.
You are hosting the CSS locally which means you need to also host the CSS images locally.
Either use the jQuery CDN for your CSS which will also use the CDN hosted images or make sure you have an image directory under your css directory: http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css
There should be an images directory under your css directory with the following files:
ajax-loader.png
icons-18-black.png
icons-18-white.png
icons-36-black.png
icons-36-white.png
Related
I am having monumental difficulty using ModX. It's great if you just upload everything once and forget out about it, but making changes to a CSS file that isn't a resource seems to be an absolute nightmare. If the CSS is loaded from a file and cached inside ModX, getting rid of that seems impossible. There is no documentation on this and I have seen a few threads about managing CSS via docs, which I want to try but I can't get a clean slate to start again.
EDIT: links to threads
CSS as ModX Resource
CSS through snippets
I have tried clearing the cache, deleting the cache folder, deleting the css files and then deleting and clearing the cache (which I then tested to see if the css had in fact been dropped but nope, still loads even though it's non-existent from where I can see)
My question is this: what is going on here? How come I can't clear the cache properly? Is this a bug? Am I missing something fundamental to ModX? How do I start again without re-installing ModX? Should I put CSS in a document or a snippet?
No, I don't want to use Sass or cssSweet. Just raw boring normal CSS, please. I'm not building the next Facebook, just want to use this for easy back-end deployment and content management for clients.
My header is a chunk named 'header', as follows. (NOTE: the CSS is found, no issues with initial loading. I have since completely deleted the CSS file, cleared the cache and deleted the cache folder, CSS still loads somehow)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link title="timeline-styles" rel="stylesheet" href="assets/timeline/css/timeline.css">
<link rel="stylesheet" href="assets/lightbox/dist/css/lightbox.css">
<link rel="stylesheet" href="assets/fonts/Southampton.ttf">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body id="section-body">
My main page is a template, as follows:
[[$header]]
[[$navbar]]
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<section id="section-banner" class="parallax">
<img id="welcome-banner-words" src="images/web_ready/welcome_banner_words.png" class="w-100" alt="">
</section>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<section id="section-timeline" class="w-100 h-100">
[[$timeline]]
</section>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div id="section-gallery-start" class="divider"></div>
<section id="section-gallery" class="w-100">
<header id="header-gallery">Party Photos!!!</header>
<hr class="horizontal-row-style">
<p class="para-gallery">
Please return to this section after the party to see the photos</p>
<!--[[$gallery]]-->
</section>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div id="section-special-start" class="divider"></div>
<section id="section-special" class="w-100">
<section id="section-special-intro-blurb" class="w-100 h-100">
<header id="header-special-intro-blurb">Special Thanks</header>
<hr class="horizontal-row-style">
<p class="para-special-intro-blurb">
</p>
<hr class="horizontal-row-style">
<p class="para-special-intro-blurb">
</p>
<p class="para-special-intro-blurb">Marnie Nana and Grandma Broome</p>
<p class="para-special-intro-blurb"></p>
</section>
[[$special_thanks]]
</section>
</div>
</div>
</div>
[[$footer]]
Mate hope is not late, a simple solution is use MinifyX to process and compress your css, every time you clear the cache it creates a new compressed file with a new name, that means there is no way to save your css path in memory.
Cheers.
When dealing with a browser's cache you can't be certain your viewers are getting the most recent copy of the files that make up the page they're looking at. So by appending a GET value to, for example, a cascading stylesheet, you can make the browser think the stylesheet is dynamic, thus reloading the file every time the modification date changes.
Below is a solution I came up with to combat this little annoyance.
lastModified MODx Extra
It's a snippet I created which you may download via the package manager. Basically, it adds a UNIX timestamp to the end of the path to your file you do not want cached.
I commented out the link to the stylesheet and then saved my header chunk, cleared the cache and then saved the chunk again. This seems to have worked.
However, this is very hacky.
To my other related issue:
Having experimented with a few things, I have found the easiest way to implement CSS is to put it in a chunk called 'css_stylesheet', ensuring that the "Clear Cache on Save" checkbox is checked (which it is by default) so we can play with with code in a live setting if there are bugs, and then reference the chunk in style tags on the header chunk like so:
<style>
[[$css_stylesheet]]
</style>
I guess this is ok, in general it's considered best practice to avoid nesting chunks too much, but it is only one level deep and we do use the same syntax when swapping out php includes so this is fine. It's fine.
Although it would be nice if this consideration were made more obvious in the docs. There should be some notes on translating a site from a php base to ModX, which should highlight the types of documents that should be included as static resources (i.e. bootstrap, jquery etc) and which should be as chunks (custom css, custom js etc)
One other way to break cache would be to add a variable after the css url.
<link rel="stylesheet" href="assets/css/style.css?v1">
You'd have to change the value each time you saved the file, its not sustainable, but it should break css cache so you can see your work.
Really though, you shouldn't need to do anything other than clear your browser cache. I know that some browsers REALLY like to hold onto cache though.
I want to display product specification from an external service. To do that I have to pass the below JS string to Webview.
<!DOCTYPE html>
<html>
<body>
<div id="flix-minisite"></div>
<div id="flix-inpage"></div>
<script
type="text/javascript"
src="http://media.flixfacts.com/js/loader.js"
data-flix-distributor="12612"
data-flix-language="id"
data-flix-brand="Samsung"
data-flix-mpn="UA55JU6600KPXD"
data-flix-ean=""
data-flix-sku=""
data-flix-button="flix-minisite"
data-flix-inpage="flix-inpage"
data-flix-button-image=""
data-flix-fallback-language="e2"
data-flix-price=""
async>
</script>
</body> </html>
I've added the below method:
webview.NavigateToString("htmlString");
Adding this just displays the text from the service, but the images and videos are not getting displayed.
Expected result :
http://media.flixcar.com/delivery/minisite/show/12612/id/957752
What I'm I doing wrong?
For me, it doesn't work because the following script in not correctly added to your html page:
<script type="text/javascript" src="//media.flixcar.com/delivery/static/inpage/9/js/lazy.js"></script>
It is dynamically added by the script http://media.flixcar.com/delivery/static/inpage/9/js/append.js.
The url should be http://media.flixcar.com/delivery/static/inpage/9/js/lazy.js so as be correctly loaded by the webview (which is nothing else than Edge browser).
I also think that you need to update each image attributes. Currently they are added also without protocol which are not supported by all browsers (for me it only works with Chrome).
<div class="flix-feature-image">
<img src="//media.flixcar.com/delivery/static/mobile/standard/img/loading_icon.gif"
data-srcset="//media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 2x, //media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 770w">
</div>
Adding protocol will fix the issue:
<div class="flix-feature-image">
<img src="http://media.flixcar.com/delivery/static/mobile/standard/img/loading_icon.gif"
data-srcset="http://media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 2x, http://media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 770w">
</div>
I am trying to build my first application on windows platform using phone gap. I am able to run my application but I'm not able to see any icon like back button, menu button icon in both emulator and device. How can we get the data-icons in page header.
CSS:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
HTML:
<div data-role="page" id ="pichartimg">
<div data-theme="a" data-role="header">
<h3>Pie Chart</h3>
Back
</div>
<div id='canvasDivpie' class = "sidebar"></div>
</div>
I'm not able to see the back button in page header. What is the issue and how to get icons.
I have been struggling with this too. My experience ist, that it's important to have the correct order in your Javascript inclusions.
I suggest you to first include your CSS. Then right after in the following order:
jQuery
Jquery Mobile
Cordova
any other Javascript
Done so the below example should display a button in your header with an icon on the right side:
<div id="header" data-role="header" data-position="fixed" data-theme="a">
<h1>Some Headline</h1>
</div>
Hope that helps!
i am trying to implement the slider from this site
http://bxslider.com/
i used the exact procedure what they said but still my code is not working
can you guys tell me how to fix it
i am providing my fiddle code blow
http://jsfiddle.net/v3efb/3/
http://jsfiddle.net/v3efb/3/embedded/result/
providing my code below
<ul class="bxslider">
<li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li>
<li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li>
<li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li>
<li><img src="http://maxcdn.webappers.com/img/2009/01/jquery-carousel.png" /></li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
jsFiddle DEMO
In your markup, you are using relative paths to jquery.min.js, bxslider.min.js and bxslider.css files.
That means those files are locally available in their respective subfolders.
However, jsFiddle does not know the complete URL path, aka the absolute path, to those files.
Change the paths so they are a complete URL.
Tip: In jsFiddle, you can import .js and .css files as assets using the Add Resources panel on left side.
I'm seeking to avoid using this for the splash screen, because it does not work on all devices and for other reasons:
<link rel="apple-touch-startup-image" href="img/splash.png" />
So I'm trying to use this instead and it works fine until it slides into a new page, which is then treated like the splash screen again (e.g. it goes blank when the timer expires - in this case 4 seconds). How can I stop/restrict this behavior, so that changePage remains contained in splash page only?
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
setTimeout(hideSplash, 4000);
});
function hideSplash() {
$.mobile.changePage("#home", "fade");
}
});//]]>
</script>
</div>
</div>
<div data-role="page" id="home">
<div data-role="header" data-backbtn="false">
<h1></h1>
</div>
<div data-role="content">
</div>
</div>
</body>
Good idea here is what I'm thinking. Use single pages instead of multi page(multiple data-role=page). For index.html or index.php or whatever. Put your splash page. The reason for this I will explain later on.
index.html
<head>
<!-- First include all jquery stuff -->
<script src="app.js"></script><!-- external script because we can just include it in every page -->
</head>
<body>
<div data-role="page" id="splash">
<div class="splash">
<img src="startup.jpg" alt="startup image" />
</div>
</div>
</body>
app.js
$(document).on('pageinit','#splash',function(){ // the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized.
setTimeout(function(){
$.mobile.changePage("home.html", "fade");
}, 4000);
});
Ok so I did it this way because lets say you have navigation menu and you want to send people back to home page. You won't have to show the splash page again. You can just link to home.html. Also splitting up your pages helps keep the dom leaner. I hope this helps.
<link rel="apple-touch-startup-image" href="img/splash.png" />
Is indeed only for apple mobile devices.
A real splashscreen should only be there to show you a nice picture while you're waiting. Its goal is not to make you wait for real reason. In your case it's taking 4seconds out of the life of your users just to make it look cool.
I have modified your code and put it in this jsfiddle : you'll see it works now. For the splashscreen to take the full width/height edit the css to remove the margins. I've set the timer to 2s, that's more than enough I think.