Here: http://jqueryui.com/docs/Theming/ThemeSwitcher
I found nice widget to switch on the fly jQueryUI themes on my page.
And also I've created my own custom theme. How to add it in list of themes?
I used the same solution as you...downloaded the js from http://jqueryui.com/themeroller/themeswitchertool/, saved it as jquery.themeswitcher.js and replaced all http jquery-ui urls with google apis https urls.
The only changes were in the var switcherpane where each link looks like:
<li><a href=
"http://jqueryui.com/themeroller/css/parseTheme.css.php?....">
<img src=
"http://jqueryui.com/themeroller/images/themeGallery/theme_90_ui_dark.png" alt=
"UI Darkness" title="UI Darkness" /> <span class="themeName">UI
darkness</span></a></li>
Which I replaced with:
<li><a href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/ui-lightness/jquery-ui.css">
<img src="content/images/theme_90_ui_light.png" alt="UI Lightness" title=
"UI Lightness" /><span class="themeName">UI lightness</span></a></li>
You can add your custom images as a <li> in the var switcherpane.
If you search through the file there are a few other html images that are referenced further down.
As far as legality goes, I'm not too sure but I can't see why you would't be able to as jQuery UI is free and open source.
Related
The bootstrap collapsing navbar links adds "http://" to my link path and it makes the link not work in several browsers. (sit is on surge.sh)
Ok, I'm using react-bootstrap and react-router on my site.
I am deploying to surge.sh for testing purposes.
If I put a normal react-router link like this on the page:
<Link to="/contact" className="link">Contact</Link>
, the link works fine. I check the URL at the top of Safari and it reads:
binginlay.surge.sh
In my bootstrap navbar code I have links like this for he dropdown:
<Navbar collapseOnSelect expand="xl" bg="{background-color}" variant="dark" id="mobile">
<Navbar.Toggle aria-controls="responsive-navbar-nav" id="menuButtonIcon" />
<div id="mobileTitle">
<div>Bingham Inlay Arts</div>
</div>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="dropdownLinks">
<Nav.Link href="/" id="galleryLink">Gallery</Nav.Link>
<Nav.Link href="/custom" id="customLink">Custom</Nav.Link>
<Nav.Link href="/videos" id="videosLink">Videos</Nav.Link>
<Nav.Link href="/techniques" id="tecniquesLink">Tecniques</Nav.Link>
<Nav.Link href="/bio" id="bioLink">Biography</Nav.Link>
<Nav.Link href="/contact" id="contactLink">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
The navbar hamburger icon shows up. When clicked, the dropdown menu appears. All the links are shown. Clicking a link give a surge.sh error 'Page not found'.
I check the URL at the top of Safari and it reads:
http://binginlay.surge.sh
The only difference between the link working and not is having the 'http://" added in front of the href link I provided.
How do I get bootstrap to not put 'http://' in front of my links?
Or, is there a workaround anyone can think of?
Thanks in advance
I am trying to implement the new external panel offered in jQuery mobile 1.4 rc1. I am able to get the panel to enter and dismiss across all pages as it should, however the panel does not inherit the styles from the default theme (c) nor will it if a theme is defined using data-theme=a. The panel will load an unstyled list view unless I navigate the to #app-menu in the url then the styles appear. Does anyone know why this might be?
<script id="panel-init">
$(function () {
$("body > [data-role='panel']").panel();
});
</script>
<div data-role="panel" id="app-menu" data-display="push" data-position="left">
<ul data-role="listview">
<li data-role="list-divider">Menu</li>
<li data-icon="home" data-bind="click: navTo.bind($data, 'location-map', 'flip', false)">current party</li>
</ul>
</div>
Note: data-theme attribute should be added to External panel as it doesn't inherit style/theme from parent container. Internal panel inherit styles/theme from page div containing it.
jQuery Mobile now offer external panel and toolbar. Those widgets aren't being initiated automatically by jQM. They need to be initiated manually and followed by .enhanceWithin() to enhace contents within.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Demo
I'm not allowed to comment but in the demo #Omar provide the many data-icon="home" icons are not showing up and if I add class="ui-btn ui-icon-arrow-l" to the Anchor, it doesn't show up either so there appears to be something more that needs to be done.
With a little investigation, I found that adding adding ui-btn-icon-left like so will fix anchors
Anchor
adding these classes to the <li data-icon="home" doesn't quite work but changing <li data-icon="home">item</li> to <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> will get the icon to show up but will not move the text over so it still looks bad.
I am trying to bind jquery mobile horizantal radio buttons using knock out teplate binding.
The fielsset in template looks like
<fieldset data-role="controlgroup" data-bind="attr: {id:QuestionID+'_fld'},template: {name:'optionTemplate', foreach: OptionList}">
</fieldset>
and the option template looks like
<script type="text/x-jquery-tmpl" id="optionTemplate">
<input type="radio" data-bind="attr: { id:OptionID+'_radio',value:OptionID, name: QuestionID+'_rd'}, checked:$parent.OptionId" />
<label data-bind="text:OptionText, attr: {id:OptionID+'_optn', for : QuestionID+'_rd' }"> </lable>
</script>
I have tried
$('input[type=radio]').checkboxradio().trigger('create');
$('fieldset').controlgroup().trigger('create');
Here my problem is that the mobile css is not applying to the fiedset.
You must do this after the template has built your page or during the page initialization event, something like this:
$(document).on('pagebeforeshow', '#pageID', function(){
});
Page content can be enhanced ONLY when content is safely loaded into the DOM.
Second this do NOT mix refresh functions with trigger create. Either one or the other. Trigger create is used to enhance whole content, and it should NOT be used on single elements. No point in restyling whole page every time you add new content.
Basically you only want to use:
$('input[type=radio]').checkboxradio().checkboxradio('refresh');
or if first line throws an error:
$('input[type=radio]').checkboxradio();
and:
$('fieldset').controlgroup();
But I would advise you to only use this line after everything has been appended:
$('#contentID').trigger('create');
where #contentID is an id of your div data-role="content" object. Or in case you are not using content div, only data-role="page" div then use this:
$('#pageID').trigger('pagecreate');
where #pageID is an id of your page.
To find out more about marku enhancement of dynamically added content take a look at this answer.
Could you please guide me (an example is much appreciated) as to how i can achieve the Slide up effect on a tag like the one in jQuery 1.9.1 using jQuery MOBILE 1.3.0.
I need to do like the 1st example in this page http://api.jquery.com/slideUp/
I read the slideup but how to do it for a tag.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
I know this would be simple but i am new to jQuery. Just couldn't get it done in the mobile API.
Is this what are you looking for? Demo
Markup
<a data-role="button" id="clickme">Click here</a>
<br/>
// this div will slideup.
<div id="test">
<img src="anyimg.jpg" alt="" />
</div>
Code
$('#clickme').click(function () {
$('#test').slideUp('slow'); // or fast, or leave it blank
});
In my requirement i want to change the background image of a link for hover,mouse out and active in my master page i tried a couple ways but it is not giving a right solution for me .Kindly any one guide me to get the solution and my format is like the below
<a href='<%: Url.Action("ListTask", "Task") %>'>
<img id="taskImage" src='<%: Url.Content("~/Content/Images/MasterPage/TaskMenuNormal.png") %>' onmouseover="this.src='../Content/Images/MasterPage/TaskMenuHover.png'"
onmouseout="this.src='../Content/Images/MasterPage/TaskMenuNormal.png'" /></a>
the above code will work fine and here i need to fix the hover image at the active of the link and not to be changed at the time of active view(MVC) in the master page.(This code will be in the master page).
can anyone provide solution in javascrip or jqery.
Thanks.
you could do:
$('#taskImage').hover(function(){
$(this).attr('src','../Content/Images/MasterPage/TaskMenuHover.png');
}
$('#taskImage').mouseout(function(){
$(this).attr('src','../Content/Images/MasterPage/TaskMenuNormal.png');
}
Use the hover function. The first parameter is used on mouseover, the second on mouseout.
HTML
<img id="taskImage" src="<%: Url.Content("~/Content/Images/MasterPage/TaskMenuNormal.png") %>" />
jQuery
$('#taskImage').hover(
function() {
$(this).attr('src','../Content/Images/MasterPage/TaskMenuHover.png');
},
function() {
$(this).attr('src','../Content/Images/MasterPage/TaskMenuNormal.png');
}
);
Personally, I'd amend your markup to include the image in the A tag as a background in CSS. then you can use A:hover, and A:active CSS states to amend your link. This then means no javascript needs to be used.