I'm trying to use the jQuery Selectmenu to add images to a dropdown in my Angular project. The following html file adapted from the example works fine on it's own when ran in the browser:
<!doctype html>
<html lang="en">
<head>
<!-- <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Custom Rendering</title>-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", { text: item.label } );
if ( item.disabled ) {
li.addClass( "ui-state-disabled" );
}
$( "<span>", {
style: item.element.attr( "data-style" ),
"class": "ui-icon " + item.element.attr( "data-class" )
})
.appendTo( wrapper );
return li.append( wrapper ).appendTo( ul );
}
});
$( "#people" )
.iconselectmenu()
.iconselectmenu( "menuWidget")
.addClass( "ui-menu-icons avatar" );
} );
</script>
</head>
<body>
<h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
<fieldset>
<label for="people">Select a Person:</label>
<select name="people" id="people">
<option value="1" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16');">John Resig</option>
<option value="2" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&r=g&s=16');">Tauren Mills</option>
<option value="3" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16');">Jane Doe</option>
</select>
</fieldset>
</body>
I see this:
However, when I add it to my Angular project I just see a plain dropdown with no images:
EDIT:
I think I forgot to clear the cache. I see something:
Perhaps it's a styling issue.
My Controller:
Fasttrack.controller('TasksCtrl', function ($scope, TasksService, TimetrackService, Salesmen, SweetAlert,
SelectedUser, HoursService, $http, $filter, Salescalls) {
$( function() {
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", { text: item.label } );
if ( item.disabled ) {
li.addClass( "ui-state-disabled" );
}
$( "<span>", {
style: item.element.attr( "data-style" ),
"class": "ui-icon " + item.element.attr( "data-class" )
})
.appendTo( wrapper );
return li.append( wrapper ).appendTo( ul );
}
});
$( "#people" )
.iconselectmenu()
.iconselectmenu( "menuWidget")
.addClass( "ui-menu-icons avatar" );
} );
etc.......
No resources are missing. Can anybody tell me what I'm doing wrong?
Related
I customized a WordPress theme that has a fixed header (which includes logo and navbar) and everything works fine on desktop Chrome. However, when viewing on mobile phones, header gets cut off by ~20px when you scroll down the page.
I tried setting fixed height to various elements, adding overflow: auto, and even line-height:90px to .header, but nothing seems to work.
Website is http://nadjapavic.com
Relevant html:
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'pine' ); ?></a>
<div class="offcanvas">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'main-nav', 'container' => false ) ); ?>
</div><!-- /.offcanvas -->
<header class="header animated bounceInDown">
<div class="container">
<div class="row">
<div class="col-xs-6">
<?php pine_logo(); ?>
</div><!-- /.col -->
<div class="col-xs-6">
<button class="offcanvas-toggle">
<span></span>
<span></span>
<span></span>
</button><!-- /.main nav toggle -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->
</header><!-- /.header -->
<?php if ( ! is_404() ) : ?>
<div class="header-spacer"></div><!-- /.header spacer -->
<?php endif; ?>
<div id="content">
Relevant css:
.header {
position: fixed;
width: 100%;
background-color: #fff;
padding: 20px 0;
z-index: 10000;
}
.header-spacer {
min-height: 90px;
}
Relevant javascript:
( function( $ ) {
'use strict';
var $body = $( 'body' );
var $header = $( '.header', $body );
var $headerSpacer = $( '.header-spacer', $body );
var $offcanvas = $( '.offcanvas', $body );
var $adminbar = $( '#wpadminbar', $body );
$( document ).on( 'ready', function() {
$adminbar = $( '#wpadminbar', $body );
} );
var adaptHeaderSpacerTimeout = null;
var nothing = null;
var $headerHeight = $header.outerHeight();
var adaptHeaderSpacer = function() {
if ( adaptHeaderSpacerTimeout !== null ) {
clearTimeout( adaptHeaderSpacerTimeout );
}
setTimeout( function() {
nothing = $header[0].offsetHeight;
$headerHeight = $header.outerHeight();
$headerSpacer.css( 'height', $headerHeight + 'px' );
if ( $body.hasClass( 'admin-bar' ) && $adminbar.length ) {
$offcanvas.css( 'top', ( $headerHeight + $adminbar.outerHeight() ) + 'px' );
}
else {
$offcanvas.css( 'top', $headerHeight + 'px' );
}
}, 400 );
};
adaptHeaderSpacer();
$( 'img', $header ).on( 'load', adaptHeaderSpacer );
$( document ).on( 'ready', adaptHeaderSpacer );
$( window ).on( 'resize orientationchange', adaptHeaderSpacer );
// Full-screen navigation
var $offcanvasToggle = $( '.offcanvas-toggle' );
$offcanvas = $( '.offcanvas' );
$offcanvasToggle.on( 'click', function() {
$offcanvas.toggleClass( 'offcanvas--active' );
$offcanvasToggle.toggleClass( 'offcanvas-toggle--active' );
} );
Please help.
You appear to be using Bootstrap or a similar grid system. In those systems, .rows need wrapping .containers. Add the container class to #content. The lack of .container makes the particular .row push the body larger giving you the effect you see.
I am more versed in PHP but I have to code a loan calculator using javascript and jquery ui.
I have 3 sliders, here the code of one of them:
$('#amountSlider').slider({
range: "min",
value: 37,
min: 1000,
max: 20000,
slide: function( event, ui ){
$("#amount").val( "$" + ui.value );
}
});
$("#amount").val("$" + $("#amountSlider").slider("value"));
HTML where the values are output:
<input type="text" name="amount" id="amount"><br>
<input type="text" name="rate" id="rate"><br>
<input type="text" name="term" id="term"><br>
<input type="text" name="calcTotal" id="calcTotal"/>
The sliders work fine and show the value in the text box but I can't seem to access the values outside the sliders to add them all into a total calculation text box.
Example:
Slider 1 value : 50
Slider 2 value: 3
Slider 3 value: 5.5
I'd like to be able to say : calcTotal = slider1.val + slider2.val + slider3.val and that the value is always updating as i drag the slider.
A live example I found is the homepage calculator at : http://blinkfinance.com.au/
Appreciate your help, thank you.
Call a function, which accesses the other values and sum them there up.
Of course you could then split this all up in a service, cache the elements etc. but you get the idea.
$( function() {
var output = $('#output');
$( "#slider1" ).slider({
slide: function( event, ui ) {
output.text( getAllValues() );
}
});
$( "#slider2" ).slider({
slide: function( event, ui ) {
output.text( getAllValues() );
}
});
$( "#slider3" ).slider({
slide: function( event, ui ) {
output.text( getAllValues() );
}
});
function getAllValues() {
return getValue("1") + getValue("2") + getValue("3");
}
function getValue(id) {
return $("#slider" + id).slider("value");
}
});
#import url(http://fonts.googleapis.com/css?family=Lato:400,700);
body {
background-color: #f0f0f0;
color: #333;
font-family: Lato, Helvetica, Arial, sans-serif;
margin: 25px;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider1"></div>
<br>
<div id="slider2"></div>
<br>
<div id="slider3"></div>
<br><br>
<div id="output">Drag..</div>
Working on the editor templates jquery I want to check if the tags have been added in the format eg {title} to later be able to replace them when viewing the template.
Unfortunately, or checks me just correct one tag, or if there is a word before the tag also indicates not correct.
The problem also is the situation when the tag is entered using the HTML editor, then it is in the form <p> {title} </p> and also does not properly validate the form.
I'm trying to somehow overcome, but poorly
$('textarea').keyup(function() {
var val = this.value;
var my = $(this).val();
if ( val.search(/{event_title}/) == 0 ) {
$( "p.eventTagTitle" ).addClass( "true" );
} else {
$( "p.eventTagTitle" ).removeClass( "true" );
}
if ( val.search('{event_form}') == 0 ) {
$( "p.eventTagForm" ).addClass( "true" );
} else {
$( "p.eventTagForm" ).removeClass( "true" );
}
if ( val.search('{event_author}') == 0 ) {
$( "p.eventTagAuthor" ).addClass( "true" );
} else {
$( "p.eventTagAuthor" ).removeClass( "true" );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p class="eventTag eventTagTitle">title</p>
<p class="eventTag eventTagForm">form</p>
<p class="eventTag eventTagAuthor">author</p>
<style>
.eventTag {color:red;}
.eventTag.true {color:green!important;}
</style>
<textarea type="text" name="eventTemplateBody" class="form-control" id="eventTemplateBody"></textarea>
check out the solution below:
I had to change green to blue so I could see if it was working and I dropped the !important tag.
CSS:
<style type="text/css">
.eventTag {
color: red;
}
.eventTag.true {
color: blue;
}
</style>
HTML:
<p class="eventTag eventTagTitle">title</p>
<p class="eventTag eventTagForm">form</p>
<p class="eventTag eventTagAuthor">author</p>
<textarea type="text" name="eventTemplateBody" class="form-control" id="eventTemplateBody"></textarea>
JAVASCRIPT:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$('textarea').keyup(function() {
var input = $(this).val();
// CHECK TITLE
if (input == "{event_title}") {
$(".eventTagTitle").addClass("true");
} else {
$(".eventTagTitle").removeClass("true");
};
// CHECK FORM
if (input == "{event_form}") {
$(".eventTagForm").addClass("true");
} else {
$(".eventTagForm").removeClass("true");
};
// CHECK AUTHOR
if (input == "{event_author}") {
$(".eventTagAuthor").addClass("true");
} else {
$(".eventTagAuthor").removeClass("true");
};
// TEST OUTPUT TO CONSOLE
console.log(input);
});
</script>
plugin demo: http://jqueryui.com/selectable/#serialize
Hello, I don't quite understand this "plugin" and specifically
result.append( " #" + ( index + 1) ); &
<span>You've selected:</span> <span id="select-result">none</span>.
I want the user to be able to select one of the following "buttons" and then a message to show in place of the Number selected (as in the demo)
So: You've selected: #2.
Would be: You've selected: UK, please goto this and do that etc...
im guessing the easiest way is with JavaScript
if "select-result" = 1 then
else
Sort of thing?
Any help Would be great! i hope this isn't a stupid question...
Code:
<html>
<head>
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1) );
});
}
});
});
</script>
</head>
<body>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<ol id="selectable">
<li class="ui-widget-content">UK</li>
<li class="ui-widget-content">USA</li>
<li class="ui-widget-content">FR</li>
<li class="ui-widget-content">AU</li>
<li class="ui-widget-content">CA</li>
<li class="ui-widget-content">DE</li>
</ol>
</body>
</html>
the example in the plugins is showing the selected index.. you don't need to do that... what you need to do is get the text of selected and show it in span.. so use.. html() or text()..
try this
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" );
result.html($(this).html()); // result.text($(this).text());
}
});
});
var index = $( "#selectable li" ).index( this );
This grabs the index of the element we've been passed. We don't need this line.
result.append( " #" + ( index + 1) );
The index is the position at which the element occurs while descending the DOM.
We can change the above lines to one simple thing.
$( ".ui-selected", this ).text().appendTo(result);
Edit: See above, this may refer to the entire ul, so we need to filter it by the item that is selected. If you are allowing for a multi-select, then see below.
$( ".ui-selected", this ).each(function(){
$(this).text().appendTo(result);
});
In this jsBin file an alert (which just displays 'fired') is called three times.
It should be just called once since its just added to :
.data( "autocomplete" )._renderItem = function( ul, item ) {
Here is the bin file :
http://jsbin.com/welcome/55641/edit
How can the code be amended so that the alert is just fired once ?
The entire code :
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
fieldset {width: 60%; margin: 0 auto;}
div.row {clear: both;}
div.row label {float: left; width: 60%;}
div.row span {float: right; width: 35%;}
</style>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<script>
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
alert('fired');
return $("#suggestionsDiv").append("<div class='row'> <label for='first-field'>The first field</label><span><input type=text id='first-field' size='15' /></span></div>");
};
});
</script>
</head>
<body>
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="" />
<input id="project" />
<input type="hidden" id="project-id" />
<p id="project-description"></p>
<fieldset>
<legend>Suggestions</legend>
<div id ="suggestionsDiv">
<div class="row">
<label for="first-field">The first field</label>
<span><input type="text" id="first-field" size="15" /></span>
</div>
<div class="row">
<label for="second-field">The second field with a longer label</label>
<span><input type="text" id="second-field" size="10" /></span>
</div>
<div class="row">
<label for="third-field">The third field</label>
<span><input type="text" id="third-field" size="5" /></span>
</div>
</div>
</fieldset>
</body>
</html>
When you type j in the field as suggested, three items are returned. For each item, the _renderItem method is being called to render each item, resulting in three alerts. It is working as intended.