I am using JQuery Mobile to develop my mobile website. Currently, I have to set the 'data-theme' property several times throughout my HTML document to be able to incorporate a particular theme. Is it possible to set the 'data-theme' property once, maybe in a javascript function, or something to that effect? The solution would need the theme to style all my elements. I attempted to solve the issue using CSS style-sheets, but it failed to work as a solution.
My Webpage's HTML:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.mobile-1.0/demos/jquery.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="CodeGeneral.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.css">
<link rel="stylesheet" href="StyleMaincss.css">
<title>Home</title>
</head>
<body onload="GenerateData();" data-role = "page" >
<div data-role="header" class="HeaderBar">
<img src="Logos v2/Header.png" alt="" class="HeaderImage">
</div>
//Content on page
<div data-role="footer" class="NavBar" data-position="fixed">
<div data-role="navbar">
//Navigation button creation
</div>
</div>
</body>
My javascript:
$(document).delegate("[data-role='page']", 'pagebeforecreate',
function () {
$(this).attr('data-theme', 'a')
}
);
function GenerateData() {
//Things carried out during loading
}
This is from the jQuery Mobile Docs:
The data-theme attribute can be applied to the header and footer
containers to apply any of the lettered theme color swatches. While
the data-theme attribute could be added to the content container, we
recommend adding it instead to div or container that has been assigned
the data-role="page" attribute to ensure that the background color is
applied to the full page. When this is done, all widgets on the page
will also inherit the theme specified in the page container. However,
headers and footers will default to theme "a". If you want to have a
page with, for example, only theme "b" for all its elements, including
its header and footer, you will need to specify data-theme="b" to the
page div as well as the header and footer divs.
Source: http://jquerymobile.com/demos/1.0/docs/pages/pages-themes.html
So basically if you add data-theme="a" to the data-role="page" tags then everything should inherit the a theme. You can test that by messing with the "theme swatch change" links at the top of the link above.
UPDATE
To programmatically change the theme of a page add this code to your site:
$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
$(this).removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-a').attr('data-theme', 'a');
});
But this creates overhead for the user's browser while rendering the website so I suggest altering the hard-coded data-theme attributes on the data-role="page" tags.
UPDATE
You can also do this inside the mobileinit event handler by changing the page prototype:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind('mobileinit', function () {
$.mobile.page.prototype.options.theme = "a";
});
</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
This will make any page without a set data-theme attribute default to the a theme.
Here is a demo: http://jsfiddle.net/tEbD5/3/
Related
I try to load a sticky navigation bar header on various static html pages.
I use this jquery script to do so:
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
and this to load it where I want
<header id="header" class="header-transparent header-transparent-light-bottom-border header-transparent-light-bottom-border-1 header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': false, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 70}">
</header>
Everything works fine except for the sticky part of the navigation bar. For a reason unknown to me it decides to act as a non-sticky navigation bar and scroll with the content of the page.
Please make sure your CSS is loading properly & is not overridden. Check browser console to see Javascript errors & also check the style you added is being implemented or not.
Another workaround, Please try adding inline-style:
<div class="header" style="position: fixed; top: 0;" >
<h2>My Header</h2>
</div>
I'm wanting to create an opposite affect to <noscript>. I don't want the content to load at all if Javascript isn't enabled, which is why I'm not interested in a display:none alternative, which still loads but just hides.
I came across this previous answer which has the desired affect (see updated answer).
HTML:
<div id="container"></div>
<script type="text/html" id="content">
<div class="test">HTML goes here</div>
</script>
jQuery:
$(document).ready(function() {
$('#container').html($('#content').html());
});
Is there anyway I can do this with Vanilla Javascript? I want the contents of the script to render as functional HTML.
often what is done is to set up your html as:
<html class="no-js">
<head>
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js');})</script>
<!-- ... -->
</head>
<!-- ... -->
<div class="js-only">I only show up when js is enabled</div>
<!-- ... -->
</html>
and then have some css which hides that element
.no-js .js-only {
display: none;
}
the javascript replaces no-js with js in the <html> element which causes the div to display only when js is enabled
I'm trying to start with jQuery Mobile but I'm stuck when I'm trying to create a left panel with an overlay slide. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>- test-</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="panel" id="testPanel" data-theme="e" data-position="left" data-display="overlay">
<h3>Default panel options</h3>
<p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
</div>
<div data-role="header">
<h1>test</h1>
Contact
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<h4>Copyright 2013 - All Rights Reserved -</h4>
</div>
</div>
</body>
</html>
It doesn't work, when I'm clicking on my link button I have this message "Error loading page" and the content of my panel is already shown in the page. Thanks for your help!
Seems like you're using outdated versions of both jQuery and jQuery Mobile frameworks. I would suggest updating to the latest release versions.
Here's a working demo with your same markup using jQuery 1.9.1 and jQuery Mobile 1.3.1
Sliding panels were introduced in JQM 1.3 version. So it won't work for other versions. USe jQuery 1.7.2- 1.9.1 for JQM 1.3
See the blog post for more details : http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/
If this is not your index page then you are most probably navigate to it through an <a href="yourpage.html>Page</a> in this case jquery uses Ajax request to navigate from one page to another the ajax request does not load the whole content of your page , it only loads the content of the <body> tag i.e any scripts that you are writing inside the <head> tag will not be loaded thus the page will not work properly and you will face error
to solve this you need to use data-ajax="false" inside the <a> attribute to prevent jquery mobile to use Ajax call to load your page.
if it is your index page then please past the js code so we can check it
in all cases check these link
for loading jqm pages and this link problem of ajax call in jqm
I'm using this plugin to show lightbox on a website
http://www.zurb.com/playground/reveal-modal-plugin
I want to load some modal automatically when the page load.
I try using this but didn't work:
ON HEAD
<!-- REVEAL LIGHTBOX -->
<script type="text/javascript" src="jquery.reveal.js"></script>
<link rel="stylesheet" href="reveal.css">
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#flyer').reveal();
});
</script>
<!-- REVEAL LIGHTBOX -->
ON BODY
<div id="flyer" class="reveal-modal large">
<h1>Ahora tenemos flyer y todo</h1>
<div id="flyer-img"></div>
<a class="close-reveal-modal">×</a>
</div>
What I'm doing wrong?
This is the page that I'm working
www.cosaslindas.com/beta
Many thanks.
Try adding this after the $('#flier').reveal();
$('#flier').trigger('click');
This issue on Github explains how to do it. It's not a feature of Reveal, but it looks like it can be used to work. You need to have an element (in your case, #flyer have the attribute "data-reveal-onready").
Ive been looking to the modal plugin and i think the reveal function will only bind to a tags with the data-reveal-id attribute.
Not sure if this will work but i'd say give it a try!
add to you html:
<a id="triggerflyermodal" href="#" data-reveal-id="flyer" style="display:none">This is hidden</a>
And change the call to this:
<!-- script when page loads -->
<script type="text/javascript">
$(document).ready(function() {
$('#triggerflyermodal').click();
});
</script>
EDIT:
Your loading jQuery library twice!
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
And
<script src="js/jquery.min.js" type="text/javascript"></script>
Trying removing the last one.
Edit2:
I just tested this in jsfiddle. If you remove the 2nd jquery library from your header your script should run fine!
I'm using YUI 2's calendar in YUI 3. How does it load Sam's skin CSS?
I didn't manually include it (though it seems like I should so the user can download it in the one request I make to the combo loader for css). Strangely, I don't see it being downloaded nor do I see it in the JS files themselves. I must be overlooking it. This is how I'm loading the CSS and JS now:
<head>
...
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.0/build/cssreset/reset.css&3.1.0/build/cssfonts/fonts.css&3.1.0/build/cssbase/base.css"/>
...
</head>
...
<!--and at the end of the body tag:-->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js&3.1.1/build/oop/oop-min.js&3.1.1/build/event-custom/event-custom-base-min.js&3.1.1/build/event/event-base-min.js&3.1.1/build/json/json-parse-min.js&3.1.1/build/querystring/querystring-stringify-simple-min.js&3.1.1/build/io/io-base-min.js&3.1.1/build/dom/dom-base-min.js&3.1.1/build/dom/selector-native-min.js&3.1.1/build/dom/selector-css2-min.js&3.1.1/build/node/node-base-min.js&3.1.1/build/node/node-style-min.js&3.1.1/build/stylesheet/stylesheet-min.js&2in3.1/2.8.0/build/yui2-calendar/yui2-calendar-min.js&2in3.1/2.8.0/build/yui2-yahoo/yui2-yahoo-min.js&2in3.1/2.8.0/build/yui2-dom/yui2-dom-min.js&2in3.1/2.8.0/build/yui2-event/yui2-event-min.js"></script>
<script type="text/javascript">//<![CDATA[
YUI().use('yui2-calendar', function(Y) {
var YAHOO = Y.YUI2;
var cal = new YAHOO.widget.Calendar("cal",{navigator:true,mindate:'1/1/2000');
cal.render();
// ...
Edit:
I want to make a few minor changes to the default sam skin. What is the best way to do that?
I answered this part of my question. If I wrap the calendar in an extra div, then specifying CSS rules which include that div as part of the selector makes the rule more specific so the browser uses it over Sam's skin. Rough example:
<style type="text/css">
.magic .yui-skin-sam .yui-calendar td.calcell {
height: 10em;
width: 15em;
}
</style>
...
<div class="magic">
<div class="yui-skin-sam">
<div id="cal"></div>
</div>
</div>
http://yuilibrary.com/forum/viewtopic.php?f=93&t=2269&p=7608&hilit=insertbefore#p7608
That thread contains information about using the insertBefore configuration, which allows you to ensure that the YUI CSS is inserted above your style overrides in the CSS cascade.
-Eric