Examples of two menus with similar behaviours:menu example 1
and menu example 2
Both are implemented with jquery. I want an angular implementation if possible.
I would like to toggle my partials as you see there without the use of jquery at all.
I have tried with the following approach:
http://plnkr.co/edit/yttY9PrZBdgeUZfQXXMx?p=preview--a menu/submenu directive
(plunker found here at stackoverflow )
I both considered modifying the bootstrap 3 nav bar and hoped to use it with ui-router but I
do not believe there is any easy way to use ui-router to achieve this toggling of states from the
same menu selection.
Here is the css for arrow down:
.arrow-down {
position: absolute;
top: 0;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #000;
}
Any suggestions appreciated. I just need a push.
Here is a working fiddle to my question:
Working example
<submenu data-caption="Contact">
<div class='arrow-down'></div>
<pre><div ng-include src="'style.css'"></div></pre>
</submenu>
The partials are of course injected using ng-include and only if you remember those pesky ''.
The fiddle wont display the .css file which was added for proof of concept but this works in plunker.
Also this example uses a minimum of not-so-great-css. My next step will be to see if the many css selectors needed can be packed in without sacrificing too much on readability. If you jquery guys check out the amount of js code needed for this as opposed to the minimal amount of code written in the directive---it quite a "shocking" difference. Will post a better version if i get that far and i still think this toggle between clicks behaviour would be a good option to add in ui-router.
Related
Using jQuery UI for my project and I can't seem to find the CSS to remove the 10 px or so white space between the actual tabs and the tab content.
Any help is appreciated.
try this in your css file/definition
.ui-tabs .ui-tabs-nav li {
margin: 1px 0 0 0 !important;
}
You're going to want to target .ui-tabs .ui-tabs-panel and remove the top padding; here's the default styling for this selector:
.ui-tabs .ui-tabs-panel {
display: block;
border-width: 0;
padding: 1em 1.4em;
background: none;
Here's a fiddle demonstrating a basic tabs widget with an example black box like the one in your picture.
I'd strongly advise against using !important to override any styles, especially with regard to the jQuery UI widgets, as the script generates dynamic selectors with (in some cases) a high level of specificity.
I wrote an article on Medium about how to style jQuery tabs; while not directly relevant to your existing problem, I do touch upon the specific dynamic classes for the widget. If you're looking for further help, it might aid you in some way.
Cheers!
I finally fixed it, many wasted hours digging through CSS just to figure out that it was a freakin' <p></p> tag set in this line:
tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
All other answers were fine and I didn't post enough of a code sample to give anyone else a chance at a solution. Was not sure who to award the answer to so I answered myself since this is what actually fixed the issue.
Thanks to the other folks who responded with info.
I've two radio buttons with Drop down and I need to put the drop down
in parallel to the second radio button,when we add to the css code
the following its working but this is not a good solution since if I've
bigger page with other control this can override them either
#__box0 {
margin-top: 20px;
margin-left: 20px;
}
there is another option to do that with CSS?
http://jsbin.com/ziziqeyopu/edit?css,js,output
The Html is renders in the renderer method
This is SAPUI5
http://openui5.org/
code but for the question its not relevant since
renderer is related to pure html/css...
i've tried with the following which doesnt works.
.mylist-content>div:first-child {
margin-right:30px
margin-top:50px
}
.mylist-radiolist>DIV:last-child {
margin-left: 30px;
margin-top:100px;
}
If you still haven't figured it out, give this a try:
.mylist-content #__box0 {
position: relative;
top: 20px;
left: 20px;
}
What you see above should do the same thing as your first attempt, but not interfere with anything else on your page, by:
Adding extra application restrictions to the CSS rule, by having the .mylist-content scope restriction (even though this should not be necessary, in theory, because #__box0 is an ID and should be unique on the page).
Shifting the position of the dropdown without affecting any other elements - this is done with position: relative and the corresponding top and left offsets.
Without knowledge of SAP UI and/or your particular situation, I doubt someone will be able to give you a more appropriate answer.
I have tried to find some custom alert boxes , which don't use some libs like: jQuery, Prototype etc.. I want to get plain sample, which has rich UI as jQuery but doesn't use it.
I have tried to google, but have found an army of jQuery samples... I don't need it. Maybe you have links on websites with the plain js samples, which don't use some libs?
Because I want to get plain samples with rich UI, which are not based on libs like: jQuery, Prototype.js, Enyo etc
Thank you!
I think these links wil help you:
http://www.codeproject.com/Articles/28812/Custom-Alert-Boxes-using-JavaScript-and-the-DOM
http://www.gayadesign.com/diy/customize-the-default-alert-function-of-javascript/
3.http://www.scriptiny.com/2008/04/custom-javascript-dialog-boxes/
It's not very difficult. Basically all you've got to do is append both something to cover the whole screen and something to show the content to the body and position them correctly and attach event listeners to the right elements to remove it at the right time. All (well, most) of the positioning and styling can be done with CSS. For example, to position the thing to cover the whole screen, you could use this CSS:
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
You might even want to make it a little translucent so it's easier to tell that the dialog is modal:
background: rgba(0, 0, 0, 0.2);
Try out a little example.
It seems that this is a new feature in JQuery UI 1.9.0, because I used JQuery UI plenty of times before and this text never poped up.
Couldn't find anything related on the API documentation.
So using an basic autocomplete example with local source
$( "#find-subj" ).autocomplete({
source: availableTags
});
When the search matches it shows this related helper text:
'1 result is available, use up and down arrow keys to navigate.'
How can I disable it in a nice way, not by removing it with JQuery selectors.
I know this has been asnwered but just wanted to give an implementation example:
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++"
];
$("#find-subj").autocomplete({
source: availableTags,
messages: {
noResults: 'no results',
results: function(amount) {
return amount + 'results.'
}
}
});
This is used for accessibility, an easy way to hide it is with CSS:
.ui-helper-hidden-accessible { display:none; }
Or (see Daniel's comment bellow)
.ui-helper-hidden-accessible { position: absolute; left:-999em; }
The top answer here achieves the desired visual effect, but defeats the object of jQuery having ARIA support, and is a bit dickish to users who rely upon it! Those who've mentioned that jQuery CSS hides this for you are correct, and this is the style which does that:
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Copy that into your stylesheet instead of removing the message, please :).
According to this blog:
We now use ARIA live regions to announce when results become available
and how to navigate through the list of suggestions. The announcements
can be configured via the messages option, which has two properties:
noResults for when no items are returned and results for when at least
one item is returned. In general, you would only need to change these
options if you want the string to be written in a different language.
The messages option is subject to change in future versions while we
work on a full solution for string manipulation and
internationalization across all plugins. If you’re interested in the
messages option, we encourage you to just read the source; the
relevant code is at the very bottom of the autocomplete plugin and is
only a few lines.
...
So how does this apply to the autocomplete widget? Well, now when you
search for an item, if you have a screen reader installed it will read
you something like “1 result is available, use up and down arrow keys
to navigate.”. Pretty cool, huh?
So if you go to github and look at the autocomplete source code, around line 571 you'll see where this is actually implemented.
Adding the jquery css also worked to remove the instructional text.
<link
rel="stylesheet"
href="http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css" />
Since this is in there for accessibility reasons it's probably best to hide it with CSS.
However, I would suggest:
.ui-helper-hidden-accessible { position: absolute; left: -9999px; }
Rather than:
.ui-helper-hidden-accessible { display:none; }
As the former will hide the item off-screen, but still allow screen-readers to read it, whereas display:none does not.
Well, this question is a bit older, but the text does not show up at all when you include the according css file:
<link
rel="stylesheet"
href="http://code.jquery.com/ui/1.9.0/themes/YOUR_THEME_HERE/jquery-ui.css" />
Of course you have to insert an actual theme instead of YOUR_THEME_HERE e.g. "smoothness"
Style it how the jQuery theme itself styles it. A lot of the other answers suggest including a whole stylesheet, but if you just want the relevant CSS, this is how it's done in http://code.jquery.com/ui/1.9.0/themes/smoothness/jquery-ui.css:
.ui-helper-hidden-accessible {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px,1px,1px,1px);
}
The jQuery CSS .ui-helper-hidden-accessible is in the themes/base/core.css file. You should include this file (at a minimum) in your stylesheets for forward compatibility.
Adding this code right after the autocomplete in your script will push the annoying helper off the page, but the people using screen readers will still benefit from it:
$(document).ready(function() { //pushing the autocomplete helper out of the visible page
$(".ui-helper-hidden-accessible").css({"position": "absolute", "left":"-999em"}) //{"display","none"} will remove the element from the page
});
I'm not a fan of manipulating CSS with JS but in this case I think it makes sense. The JS code created the problem in the first place, and the problem will be solved a few lines below in the same file. IMO this is better than solving the problem in a separate CSS file which might be edited by other people who don't know why the .ui-helper-hidden-accessible class was modified that way.
I am doing a code that do some js injection of code in page, with JQuery. But in my input that i get in some pages modify it, I am putting all important attributes and define them as !important, but it's impossible to put all the attributes in all the tags.
Someone know how to disable all other css inside a div?
Solution I think:
I found a solution but i don't want to use it. Its eliminate al css from the page, while i am injecting the code after using that code I eliminate my css and code and apply the original code from the webpage
Thanks
If you're using that many !importants you're doing it wrong.
The solution to this problem is to properly organize your css. Important stuff last, because it overrides what was previously styled. Also use your selectors wisely. Example:
<a class="link">Link</a>
.
a:link { color: red; }
.
.
.
.link { color: green !important; } // Nop
a.link { color: green; } // Yup
If you override everything it will work with normal CSS rules on every page. Not what you were hoping for, but it is a solution.
css:
#myInsertDiv {
color: blue;
padding: 0;
margin: 0;
background: white;
border: 0px;
/* etc you have to restyle EVERY possible value */
}
html:
<div id="myInsertDiv"></div>
The main issue is you have to style every attribute, and reset everything else to a default value.
Or you can insert all the style information into the style attribute on the div, but that is probably doing it wrong too.
If I got you right you can use jQuery for modifying CSS properties on any elements of the page (huh), using something like this $('.Myclass').css('color','#ff0000')
And more about selectors in jQuery - http://api.jquery.com/category/selectors/