JQuery autocomplete result style - javascript

I'm trying to change the style from my AutoComplete result.
I tried:
// Only change the inputs
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
I searches and could not find out what the class used by the result is, so that I can change its font size and maybe its width.
Thanks.
Using:
jQuery-UI AutoComplete
EDIT: I need change the css from my result, that comes from my JSON, not from the input. The code you posted, only changes the input, not the result. This is why I asked for the class used by the result list (at least, I believe that is a list). I tried to use fb from ff and could not find it. Thanks again for your patience.
EDIT2: I'll use the autocomplete from jQuery UI as example.
Check this to see the jQuery-UI auto-complete page
After I type "Ja" in the textbox from the front-page sample, Java and JavaScript will appear as Results, in the little box below the textbox.
This little box is what I want to change the CSS of. My code in the sample above only changes my textbox CSS (which I don't need at all).
I don't know if I'm being clear now. I hope so, but if not, please let me know; I'll try harder if needed to show my problem.
The class for the UL that will contain the result items is what I need.
SOLUTION
As Zikes said in his comment on the accepted answer, here is the solution. You just need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file.
This will make all the the results box css have width:300px (like the sample).
I forgot that the results object does not exist on page load, and therefor would not be found and targetted by a call to $('...').css(). You'll actually need to put ul.ui-autocomplete.ui-menu{width:300px} in your CSS file, so that it will take effect when the results are generated and inserted into the page.
– Zikes

Information on styling the Autocomplete widget can be found here: http://docs.jquery.com/UI/Autocomplete#theming
Fiddle
HTML
<input type="text" id="auto">
jQuery
$('#auto').autocomplete({'source':
['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz']
});
CSS
ul.ui-autocomplete.ui-menu{width:400px}
/*
targets the first result's <a> element,
remove the a at the end to target the li itself
*/
ul.ui-autocomplete.ui-menu li:first-child a{
color:blue;
}

I was able to adjust by adding this css to the <head> of the document (above the autocomplete javascript).
Some of the following may be more relevant than others. You could make it specific to the autocomplete input if changing these affects other elements you don't want affected.
<style type="text/css">
/* http://docs.jquery.com/UI/Autocomplete#theming*/
.ui-autocomplete { position: absolute; cursor: default; background:#CCC }
/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
list-style:none;
padding: 2px;
margin: 0;
display:block;
float: left;
}
.ui-menu .ui-menu {
margin-top: -3px;
}
.ui-menu .ui-menu-item {
margin:0;
padding: 0;
zoom: 1;
float: left;
clear: left;
width: 100%;
}
.ui-menu .ui-menu-item a {
text-decoration:none;
display:block;
padding:.2em .4em;
line-height:1.5;
zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
font-weight: normal;
margin: -1px;
}
</style>

If you are using the official jQuery ui autocomplete (i'm on 1.8.16) and would like to define the width manually, you can do so.
If you're using the minified version (if not then find manually by matching _resizeMenu), find...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
...and replace it with (add this.options.width|| before Math.max) ...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
... you can now include a width value into the .autocomplete({width:200}) function and jQuery will honour it. If not, it will default to calculating it.

Just so you know you have two options for optimizing your code:
Instead of this:
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');
You can do this:
$('.ui-autocomplete-input').css('fontSize', '10px').css('width','300px');
Or even better you should do this:
$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});

Related

Remove default ui hyperlink behaviour

I have made a search box which uses the jQuery UI autocomplete feature to display potential search matches. I have noticed that the as in the drop down list move and shrink the UI menu by several pixels when hovered. Is there a way to prevent this such that the only styling that appears on the menu links is the color change I have added via:
.ui-menu .ui-menu-item a:hover{
background:none;
color:#FF0000;
font-size:10px;
}
Here is a fiddle of my progress so far https://jsfiddle.net/shaneswebdevelopment/zcvxy2z6/1/
So it turns out when you hover over an item in the dropdown list, jQuery ui adds a ui-state-focus class on your element which has these css properties:
.ui-state-focus {
font-weight: normal;
margin: -1px;
}
The reason you're seeing the characters jump is because of the margin: -1px;. If you override that css class with something else you can eliminate the jumping text.
So in order to fix you could do this:
.ui-menu .ui-menu-item a.ui-state-focus {
margin: 0px;
}
Note I've added other CSS selectors in order to get a certain level of specificity to override jQuery UI's styles. Here's an updated jsFiddle: https://jsfiddle.net/zcvxy2z6/16/

Call CSS Class instead of inserting Attribute using JQuery (.css())

I am building a fixed header with using JQuery
Everything is working fine at the moment but instead of setting attributes to classes and I want to call them from css directly. I am not quite familiar with this method.
One of the example is below;
#header-main {
background-color: #ffffff;
min-height: 107px;
color: #8c8c8c;
}
#header-main .sabit{
position : fixed;
width: 100%;
z-index: 98;
padding-top: 35px;
border-bottom: 3px ridge #7BBD42;
}
How I am doing is; (Working)
var menu = $('#header-main');
if (...)
menu.css('position','fixed').css('width','100%').css('z-index','98').css('padding-top','35px').css('border-bottom','3px ridge #7BBD42');
else
menu.removeAttr('style'); //Back to normal
What I am doing to achieve what I want; (Not working)
var menu = $('#header-main');
if(...)
menu.addClass("sabit");
else
menu.removeClass("sabit"); //Back to normal
I also tried menu.addClass(".sabit"); or menu.addClass("#header-main .sabit"); but none of them worked.
What part am I doing wrong to add directly css class using JQuery?
It's not working because you have a space between #header-main and .sabit in your CSS, meaning that your CSS is trying to style the .sabit descendant of #header-main and not the #header-main element itself.
Change:
#header-main .sabit
To:
#header-main.sabit
Your logic is fine, the problem comes from your CSS.
The line #header-main .sabit{ should instead be #header-main.sabit{, as the sabit class is set on the #header-main element and not on one of its children elements.
Try changing
menu.addClass("sabit");
to
$(menu).addClass("sabit");
addClass comes from the Jquery library so you need to reference it from there.

Problems with jquery

At this moment I am a bloody beginner in Jquery, but the following code based on api.jquery.com in that case this should work:
<a class="btindex">Startseite</a>
$('.btindex').click(function(){$(this).attr('href','index.html')});
$('.btindex').on('mouseover',function(){$(this).css('background-color':'#f2ab1e')});
$('.btindex').on('mouseout',function(){$(this).css('background-color':'#f0c911')});
I also write them in one, because it is more clear to me, but, nevertheless, here is the code:
$('.btindex').click(function(){$(this).attr('href','index.html')}).on('mouseover',function(){$(this).css('background-color':'#f2ab1e')}).on('mouseout',function(){$(this).css('background-color':'#f0c911')});
Also it isn't necessary in this case here is the css file:
.btindex{
cursor: pointer;
background-color:#f0c911;
border:1px solid #e65f44;
color:#c92200;
font-weight:bold;
font-style:italic;
font-size: 150%;
height:10%;
line-height:250%;
padding: auto;
position: fixed;
visibility: hidden;
width:22%;
text-decoration:none;
text-align:center;
}
I hope for quick answers and that the script explains itself, if not I will answer for sure. In any case I build a fiddle as support here :)
You have colons where you should have commas - it should be:
$('.btindex').on('mouseover',function(){$(this).css('background-color','#f2ab1e')});
$('.btindex').on('mouseout',function(){$(this).css('background-color','#f0c911')});
updated fiddle: http://jsfiddle.net/8Hbnk/2/
or you can pass properties in an object to css(), being careful to use camelcase for the property names (e.g. backgroundColor instead of background-color):
$('.btindex').on('mouseover',function(){$(this).css({backgroundColor:'#f2ab1e'})});
$('.btindex').on('mouseout',function(){$(this).css({backgroundColor:'#f0c911'})});
It's generally easier to refrain from setting inline style using css() and simply adding and removing classes to control style
If you know you have to revert back to original state this takes less time to set up with css rules than to add the JS needed to reset back to original css property values
CSS
.btindex.hovered{
background-color:#f2ab1e;
}
JS
$('.btindex').hover(function(){
$(this).toggleClass('hovered');
});
hover() with only one callback will cover both mouseenter and mouseleave events

Icon to move when hovering over a menu button

Before you read this please get up this website to see what I am trying to do:
https://www.kris-willis.com
As you can see there is a RED arrow located below the menu and what it is that I'm trying to achieve is... when I hover over a menu button the arrow moves to the same button I'm hovering over without reloading the page.
Ideally I'd like the arrow to move back to a default button.. and also for the default button to change if clicked on a different menu button.
If you know any links to examples etc... I would really appreciate it!
Thank you for your time,
Kerry x
The first thing is that you have a wrong DOCTYPE.
<!DOCTYPE html PUBLIC "">
This causes you page to load in quirk mode. Change it to
<!DOCTYPE html>
for HTML5 or use the complete one including the FSI & FPI.
Second is you are using a <table> for navigation. Nothing seriously wrong with it but people tend to use ul
For the :hover, you can simply use
#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}
You might have to play with paddings and margins or maybe use display: block or display: inline-block to position the arrow correctly.
Make the "buttons" anchors. Using css set create a rule for :hover to set a background image that contains the arrow.
There are plenty of CSS tutorials out there, Nettuts and Webdesigntuts have a lot of navigation articles. Or if you are comfortable with emulating others, find a site you like and pick apart the source until you figure out how they did it.
Keep in mind that javascript is not at all necessary to accomplish what you are doing. Unless you want some animations, and even then CSS can handle most of that work, pure CSS in my opinion is the better approach.
PURE CSS SOLUTION
Check this answer.
Is there any way to hover over one element and affect a different element?
So it might be:
#thething {
margin: 0;
}
.classone:hover + #thething {
margin-top: 10px;
margin-left: 10px;
}
If they're adjacent siblings in a parent div.
Just move the arrow bymargin-left with respect to left of the td DEMO
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
Tp do this Add jQuery libirary to the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Add this code in a external js file and add it to head section of your page
$(function(){
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
});
});
EDIT : For restoring the arrow orignal position use
$(function(){
currentPos = $("#Arrow").css("margin-left");
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left});
});
$("#MenuPosition").on("mouseout","td",function(){
$("#Arrow").css({"margin-left":currentPos});
});
});
NOTE : PLEASE SEE THE CALCULATION PART AND CORRECT IT.
PS: cant correct is because its my log out time from office ;) . but i thing you got the logic to do it
You can do something like this:
Using a span to add the bg arrow below the nav/menu lis in the HTML:
<ul class="nav">
<li>
Menu 1
<span class="arrow"> </span>
</li>
<li>
Menu 2
<span class="arrow"> </span>
</li>
</ul>
The CSS:
.nav {
font-size: anypx;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
.nav li {
background: #whatev;
display: block;
float: left;
height: anypx;
line-height: anypx;
padding: 0;
text-align: center;
}
.nav li a {
color: #any;
display: block;
padding: any;
position: relative;
text-decoration: none;
width: auto;
}
.arrow {
background: url("images/arrow.png") no-repeat scroll 0 9px transparent;
display: none;
height: anypx;
text-indent: -9999px;
width: whatevs;
z-index: 9999;
}
And Finally the JS/Jquery that makes it work:
$(document).ready(function(){
Your_menu();
});
function Your_menu(){
$(".nav li").hover(function(){
$(this).find('.arrow').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('.arrow').css({visibility: "hidden"});
});
}
Here is a site that is showing this :)
http://www.drexelmedicine.org/

Toggle divs without using Javascript

I'd like to toggle a <div>, but my requirement is that it must work with javascript turned off. I would like to select a hyperlink that states "modify search" and the div that contains the search criteria displays.
I've found a TON of demos using jQuery, but they all require javascript enabled. Any assistance is appreciated.
Here you go, skipper! (edit — updated for science)
HTML:
<label for=cb>Click Here</label>
<input type='checkbox' style='display: none' id=cb>
<div>
Hello. This is some stuff.
</div>
CSS:
input:checked + div { display: none; }
edit — an additional note: display: none will cause certain browsers (IE) to pay no attention to the <input> checkbox. Instead of hiding it with the display CSS attribute, you can "move" it offscreen with something like position: absolute; left: -10000px;.
The <details> element does what you ask without any CSS or JavaScript applied.
It is of course not a div, so it doesn't answer your question literally, but I read your requirement being having some content you wish to conditionally reveal or conceal.
The <details> creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.
Unfortunately browser support for <details> is less than perfect, IE and Edge currently having no support at all. Edge status is Under Consideration. Development of IE is stopped so it will never gain support.
Here is the simple example follow this and you will be able to create toggle using css without any JAVASCRIPT and JQUERY. You can also add animations using css without JQUERY. CSS3 is AWESOME! :)
.box{width:200px;
height:0;
background:red;
transition:all 0.4s linear;}
input:checked ~ .box{height:220px;}
<input id="toggle" type="checkbox" style="visibility:hidden">
<label for="toggle"> CLICK ME </label>
<div class="box"> </div>
You can't toggle on clicks without javascript. End.
Update:
If you can use CSS 3 selectors, you'll have to change your DOM structure and use CSS 3 selectors without a library that covers old browsers which are probably a lot more common than users with javascript off, You can usee #pointy answer with :selected.
So I would say, practically it's still impossible...!
For a little more polished version of the accepted answer, a common practice is to combine a hidden checkbox + label to be able to have a clickable label on screen that maps to a hidden backing value that is available to both JavaScript (.checked) and to CSS (:checked)
<input type='checkbox' id='css-toggle-switch' checked='checked' class='css-toggle-switch'>
<label for='css-toggle-switch' class='btn'>Error Details</label>
<div class='css-toggle-content'>
<pre><code>Unexpected StackOverflow</code></pre>
</div >
By putting our checkbox first, we can drive CSS decisions based on the :checked selector. We can grab subsequent elements with the adjacent sibling select + or the general sibling selector ~
/* always hide the checkbox */
.css-toggle-switch { display: none; }
/* update label text to reflect state */
.css-toggle-switch + label:before { content: "Hide "; }
.css-toggle-switch:checked + label:before { content: "Show "; }
/* conditionally hide content when checked */
.css-toggle-switch:checked ~ .css-toggle-content { display: none; }
/* make the label look clickable */
.css-toggle-switch + label {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Working Demo in jsFiddle & StackSnippets
.css-toggle-switch { display: none; }
.css-toggle-switch + label:before { content: "Hide "; }
.css-toggle-switch:checked + label:before { content: "Show "; }
.css-toggle-switch:checked ~ .css-toggle-content { display: none; }
.css-toggle-switch + label {
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* just some styles to make the demo a little more pleasant */
.btn {
padding: 5px 10px;
background: white;
border: 1px solid grey;
border-radius: 3px;
width: 130px;
display: inline-block;
text-align: center;
}
.btn:hover {
background: #e6e6e6;
-webkit-box-shadow: inset 0 -1px 0 #dddddd;
-moz-box-shadow: inset 0 -1px 0 #dddddd;
box-shadow: inset 0 -1px 0 #dddddd;
}
.panel {
padding: 15px;
background: #ffe06d;
border: 1px solid #d69e01;
border-radius: 3px;
}
pre {
padding: 5px;
margin-bottom: 0;
background: #eaeaea;
border: 1px solid grey;
}
<div class="panel">
<input type='checkbox' id='css-toggle-switch'
checked='checked' class='css-toggle-switch'>
<label for='css-toggle-switch' class='btn'>
Error Details
</label>
<div class='css-toggle-content'>
<pre><code>Unexpected StackOverflow</code></pre>
</div >
</div>
About three years late to the party, but I found this when I was looking to do the same thing, for a mobile menu, and subsequently found a very good solution, so I thought I'd post it for whoever else comes a-hunting.
The basic idea was from this article: http://www.creativebloq.com/css3/build-smart-mobile-navigation-without-hacks-6122800. I think
I've used a slightly simpler approach (stumbled on while setting it all
up). This hides / displays the navigation, by clicking the Menu button.
In the CSS, nav is set as "hidden" and nav:target is set to display. The page has two menu buttons, using the same image, both have class menubutton, absolute position in the same place.
menbuttonON has index 1000, sits outside nav in the html menubuttonOFF has index 1001, but sits inside nav, so it's invisible at first
In the HTML, clicking menubuttonON links to nav, which is then target, so
it displays. Inside that nav is menubuttonOFF, with a higher z-index
than menubutton ON, so that's on top now. Clicking menubuttonOFF links
back to menubuttonON, so nav isn't the target, and disappears, taking
menubuttonOFF with it.
Simplified CSS (without site-specific formatting):
nav {display: none;}
nav:target {display: block !important;}
.menubutton { position: absolute;
text-align: right;
top: 0;
margin-top: 14%;} /* This margin puts it below the header logo */
.menubuttonON {z-index: 1000;}
.menubuttonOFF {z-index: 1001;}
HTML
<header> <!-- logo here --> </header>
<div class="menubutton menubuttonON" name="buttonON"><img src="../Images/menubutton.png">MENU</div>
<nav id="nav" name="nav">
<div class="menubutton menubuttonOFF"><img src="../Images/menubutton.png">CLOSE</div>
<ul> <!-- all the navigation stuff --> </ul>
</nav>
You can see it working here: http://www.thewritersgreenhouse.co.uk/storyelements_resources/storyelements.htm.
What you ask is impossible without JavaScript. (Or, as #Pointy has pointed out, CSS3 selectors.)
You will have to modify your requirements, or better yet, just display the form by default and hide for JavaScript users (if necessary). Your page can work for everyone, and have unimportant features disabled for those that cannot use them.
No Javascript, no toggling. There are some pseudo CSS3 methods, but if you have to support JS off, you're certainly not supporting CSS3.
As others have said, you must use JS to achieve toggling of divs. If you want your website to work with javascript disabled, you need to design your website to fail gracefully when javascript isn't available. In other words, your website should NOT rely on JavaScript to function. Ex: AJAX forms should fall back to HTTP submit, etc.
You can't do it without using either Javascript or sending another request.
If you can live with the extra request (that is, an added page load is OK), then the most straightforward solution is to point the link to the current URL, but add a query string parameter, e.g. http://example.com/current-page?showsearch=1. Then, on the server, check if the showsearch parameter is set, and if so, initialize the search div to be visible.
Of course you will have to take care that the rest of your page state survives the request; you may have to use a form to be able to carry over any data the user may have entered, and this most likely means your link can't be a link, but has to be a button (because links cannot trigger form submits without Javascript).
The way to make this work with JS disabled is have the hyperlink have some href that accomplishes the task you desire - like:
/the/original/url?advanced-search=true
where the web server delivers different content when ?advanced-search=true is there. if JS is enabled, the jquery code you've researched should just cancel the original action.

Categories

Resources