I have a css problem with jquery / jquery ui / auto complete
<script type="text/javascript">
$(function() {
$("#search").autocomplete({
source: "autocomplete.php",
minLength: 2,
select: function(event, ui) {
window.location.href = "http://site.com/" + ui.item.id + ".html";
$("#search").val(ui.item.label);
}
})
.data("autocomplete")._renderItem = function (ul, item) {
return $('<li class="ui-menu-item-with-icon"></li>')
.data("item.autocomplete", item)
.append('<a style="height: 50px;" class="ui-corner-all"><img src="thumb.php?img=' + item.img + '" class="ajaxsearchimage">' + item.label + '</a>')
.appendTo(ul);
};
});
</script>
<style>
span.searchicon
{
display: inline-block;
height: 50px;
width: 50px;
}
.ajaxsearchtext
{
padding-left: 60px;
display: inline-block;
}
</style>
I would like to align the text on the top
I tryed to put vertical-align:top in the class but it doesn' work.
http://imageshack.us/photo/my-images/4/sansrer.png/
Does someone has a solution ?
Regards
you need to apply the property to the image
img {vertical-align:text-top;}
an example
http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align
UPDATE
upon comments I suggest floating the image to the left would be the solution.
img.SelectedClass { float: left; }
Related
This "R code" works fine in Jupyter but not in lab:
library(IRdisplay)
display_html(
'
<script>
code_show=true;
function code_toggle() {
if (code_show){
$(\'div.input\').hide();
} else {
$(\'div.input\').show();
}
code_show = !code_show
}
$( document ).ready(code_toggle);
</script>
<form action="javascript:code_toggle()">
<input type="submit" value="Code On/Off">
</form>
<style type="text/css">
.container { width:80% !important; }
.main-container {
max-width: 2000px;
margin-left: 100px;
margin-right: 10px;
}
/*body{font-family: Lucida Sans Unicode} */
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
color: #004F59;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
color: #ffffff;
background-color: #004F59;
}
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
background-color: #004F59;
}
</style>
'
)
I also tried to use display_html in other contexts. Is there a reason why this does not work in lab? Can it easily be fixed? Thanks.
The IRdisplay::display_html() works fine in JupyterLab, as does the callback to your function. The only differences between Notebook v6 and JupyterLab are:
jQuery is not available by default in JupyterLab (as it is no longer needed in 2020's), so the selection by $(\'div.input\').hide(); will not work - use standard document.querySelectorAll() instead
CSS classes are different so styles (and selectors need to be adjusted); it is not clear what you wanted to achieve but for hiding input areas you can achieve the same effect with standard JS in JupyterLab:
IRdisplay::display_html('
<script type="text/javascript">
let code_show = true;
function code_toggle() {
if (code_show) {
document.querySelectorAll(".jp-Cell-inputArea").forEach(function(inputArea) {
inputArea.style.display = "none";
});
} else {
document.querySelectorAll(".jp-Cell-inputArea").forEach(function(inputArea) {
inputArea.style.display = "";
});
}
code_show = !code_show;
}
</script>
<form action="javascript:code_toggle()">
<input type="submit" value="Code On/Off">
</form>
')
I had done one quiz application, But i want to add some animations
like fadein/fade-out, when click the prev/next button. Can any one
help me do the same. something need to change the css something need to change the CSS something need to change the css something need to change the css?
* {}
body {}
.question {
width: 70%;
margin: 0 auto;
height: auto;
display: block;
background: #eeeeee;
}
.question h1 {
text-align: center;
padding-top: 30px;
color: #666666;
}
.question h2 {
width: 100%;
font-size: 22px;
color: #0c1e5c;
padding: 1% 3% 0% 3%;
}
.question ul:nth-child(odd) {
background: #d0dff6;
width: 30%;
padding: 8px;
margin: 1% 9%;
display: inline-block;
color: #0c1e5c;
}
.question ul:nth-child(even) {
background: #d0dff6;
width: 30%;
padding: 8px;
margin: 1% 9%;
display: inline-block;
color: #0c1e5c;
}
.button {
text-align: center;
margin: 1% 0;
}
.btn {
background: #8bf8a7;
padding: 5px;
}
<html ng-app="quiz">
<head>
<meta charset="utf-8">
<title>Basic Quiz</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="quizCtrl">
<div class="question">
<h1>QUIZ APPLICATION</h1>
<h2>{{questions.question}}</h2>
<ul ng-repeat="option in questions.options">
<li style="list-style:none">
<input type="{{buttonType}}">{{option.text}}</li>
</ul>
</div>
<div class="button">
<input type="button" value="previous" class="btn" ng-show="isPrevious" ng-click="previousQuestion()">
<input type="button" value="next" class="btn" ng-show="isNext" ng-click="nextQuestion()">
</div>
</body>
<script>
var app = angular.module("quiz", [])
app.controller("quizCtrl", function($scope) {
$scope.data = [{
question: "1)Which of the following selector matches a element based on its id?",
type: "single",
options: [{
text: "The Id Selector"
},
{
text: "The Universal Selector"
},
{
text: "The Descendant Selector"
},
{
text: "The Class Selector"
}
]
},
{
question: "2)Which of the following defines a measurement as a percentage relative to another value, typically an enclosing element?",
type: "multiple",
options: [{
text: "%"
},
{
text: "cm"
},
{
text: "percentage"
},
{
text: "ex"
}
]
},
{
question: "3)Which of the following property is used to set the background color of an element?",
type: "single",
options: [{
text: "background-color"
},
{
text: "background-image"
},
{
text: "background-repeat"
},
{
text: "background-position"
}
]
},
{
question: "4)Which of the following is a true about CSS style overriding?",
type: "multiple",
options: [{
text: "Any inline style sheet takes highest priority. So, it will override any rule defined in tags or rules defined in any external style sheet file."
},
{
text: "Any rule defined in tags will override rules defined in any external style sheet file."
},
{
text: "Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable."
}
]
}
];
$scope.index = 0;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isPrevious = false;
$scope.isNext = true;
$scope.nextQuestion = function() {
if ($scope.index < 3) {
$scope.index = $scope.index + 1;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isPrevious = true;
if ($scope.index == 3) {
$scope.isNext = false;
}
} else {
// disble next botton logic
$scope.isNext = false;
}
}
$scope.previousQuestion = function() {
if ($scope.index > 0) {
$scope.index = $scope.index - 1;
$scope.questions = $scope.data[$scope.index];
$scope.buttonType = $scope.questions.type == 'single' ? 'radio' : 'checkbox';
$scope.isNext = true;
if ($scope.index == 0) {
$scope.isPrevious = false;
}
} else {
// disble next botton logic
$scope.isPrevious = false;
}
}
});
</script>
</html>
Check out ng-animate, basically what it does is it adds classes that you can style accordingly on showing dom and on hiding dom, like this:
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
opacity:1;
}
And to use that functionality you would have to use ng-repeat in your html, something like this:
<div ng-repeat="item in data" ng-if="index === $index">
//Your question html here
</div>
Where data and index are $scope.data and $scope.index.
That would be the angular way of doing things.
However I see that you are using the same div, only changing scope data, that would require you to set
transition: 1s all ease;
On the question class, and then to do something like this in javascript:
angular.element('.question').css('opacity', 0);
$timeout(function() {
// change question..
angular.element('.question').css('opacity', 1);
}, 1000);
Given this example:
var SomeApp = angular.module('SomeApp', [])
.controller('SomeController', function($scope){
$scope.items = [0,1,2,3]
})
.directive('gridResize', function(){
return {
scope: true,
link: function(scope, elem) {
scope.gridResize = {
width: $(elem).width(),
height: $(elem).height()
};
}
}
})
.parent {
width: 80%;
position: relative;
left: 50%;
transform: translateX(-50%);
border: 1px solid red;
}
.parent > * {
background-color: rgba(0,0,0,.14);
margin-bottom: 1px;
padding: 20px;
box-sizing: border-box;
}
.parent > *:last-child {
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="SomeApp">
<div class="parent" ng-controller="SomeController" grid-resize>
<div ng-style="{'min-height':($parent.gridResize.width/8) + 'px'}"
ng-repeat="item in items"
>
height: {{$parent.gridResize.height}} | width: {{$parent.gridResize.width}}
</div>
</div>
</div>
Can anyone tell me how I could bind the height and width of the grid-resize directive to the DOM element? I want the angular properties to change when the DOM element changes.
In your directive use the window "resize" event to update the sizes on the scope:
var SomeApp = angular.module('SomeApp', [])
.controller('SomeController', function($scope){
$scope.items = [0,1,2,3]
})
.directive('gridResize', function(){
return {
scope: false,
link: function(scope, elem) {
scope.gridResize = {
width: $(elem).width(),
height: $(elem).height()
};
angular.element(window).on('resize', function(e) {
scope.gridResize = {
width: $(elem).width(),
height: $(elem).height()
};
scope.$apply();
});
}
}
})
Also notice that I changed the directive's scope to 'false'. You already have a scope on that element created by the ng-controller directive.
I am trying to move a div below auto complete search results. But i am unable to push the div below autocomplete results after user starts typing. I am trying to implement searchbox similar to www.microsoft.com. Any help would be highly appreciated.
Here is my Fiddle code
<input name="query" id="pageSearchField" type="text" maxlength="50" value="" class="ui-autocomplete-input" autocomplete="off">
var availableTags = [
"Details",
"Project ",
"Release ",
"Property ",
"Application",
"Last Modified By",
"Last Modified Date",
"Tagged by"
];
$("#pageSearchField").autocomplete({
source: availableTags
});
$("#pageSearchField").click(function () {
$('#bottom-div').show("slow");
});
$('#pageMainRegion').click(function () {
$('#bottom-div').hide("slow");
});
$('#bottom-div>div').css("background-color", "white");
var firstFilterText = "Search Data Centers";
var secondFilterText = "Search Projects";
var thirdFilterText = "Search Orders";
$("#pageSearchField").after("" +
"<div id=" + "bottom-div" + "><div>" + firstFilterText + "</div>" +
"<div>" + secondFilterText + "</div>" +
"<div>" + thirdFilterText + "</div></div>");
$('#bottom-div>div').click(function () {
$('#bottom-div>div').css("background-color", "white");
$('#bottom-div>div').css("color", "black");
$(this).css("background-color", "gray");
$(this).css("color", "white");
});
#bottom-div {
z-index: 999;
position: absolute;
min-width: 290px;
background: #fff;
padding: 10px;
border: 1px solid #ccc;
height: 80px;
cursor: pointer;
display: none;
border-top-color: #000;
}
#bottom-div > div {
padding-bottom: 5px;
}
Since Ui-Autocomplete has position:absolute, it will not affect page layout in the normal way and it will not push elements below it.
One approach is to extend the ui autocomplete to render with your div at the bottom of the autocomplete (jsFiddle)
$.widget( "custom.autocompletePlus", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var original = this._super(ul, items);
$(ul).append(
"<p>Your Html goes here</p>"
);
}
});
$("#pageSearchField").autocompletePlus({
source: availableTags,
});
change your jQuery like this:
$(".ui-autocomplete").after("" +
"<div id=" + "bottom-div" + "><div>" + firstFilterText + "</div>" +
"<div>" + secondFilterText + "</div>" +
"<div>" + thirdFilterText + "</div></div>");
remove position:absolute from your bottom-div and add this class to your CSS:
.ui-autocomplete{
position:relative;
top:0;
left:0;
}
DEMO
with some style you can create what you want.
I have a div which contains a list.
Its CSS:
#ResultsText
{
color: #696969;
text-align: right;
vertical-align: top;
}
In the JS file:
$("li.ResultParagraph").mouseover(function () {
$(this).addClass("ui-state-hover");
}).mouseout(function () {
$(this).removeClass("ui-state-hover");
});
$('.ui-state-hover').css("font-weight", "normal");
but still I see the hover text in bold.
Any suggestions?
You should do like this(or switch "bold" with "normal")
$("li.ResultParagraph").mouseover(function () {
$(this).addClass("ui-state-hover").css("font-weight", "bold");
}).mouseout(function () {
$(this).removeClass("ui-state-hover").css("font-weight", "normal");
});
DEMO