Is there anyway to get pointed back button like we have in iphone. Currently I am getting round button.
Also, any one has idea abt navigation bar in jQuery mobile. Whenever we are changing screen using navigation bar css is not getting applied.
Back Button:
You can try this:
http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
But it will use a background picture instead of pure CSS backgrounds.
If you want to do it pure CSS, this will be tricky.
Start from here. I assign this to an empty div, which gives me a CSS only triangle, which I'm using for popup windows. You would have to find a way to turn this by 90 degrees, match border color to button background gradient and fiddle it into any of the JQM button styles.
Nice challenge :-)
.popover_triangle {
background: none repeat scroll 0 0 red;
border-color: transparent transparent black;
border-style: solid;
border-width: 16px;
font-size: 0;
line-height: 0;
width: 0;
}
If you manage to get it done, please post. There are a lot of people looking for it.
Related
I'm trying to figure out how to change the thick light blue border that appears while the mouse button is down when clicking on a pagination number. I have tried border-color on the a element but that doesn't do it.
ul.pagination a.page-link:active {
border-color: #f00;
}
Don't remove outlines (or their visual substitutes). They have an important purpose.
It's actually a box-shadow variable. But just restyle it. Don't remove it.
.page-link:focus {
box-shadow: var(--bs-pagination-focus-box-shadow);
}
You'll want to learn how to use your browser's document inspector to discover what CSS rule is styling an element. You can force states to find :active and :hover styles, for example.
I'm completely new to Pixate Freestyle in Xcode and while experimenting with it, I couldn't get any padding to work on a UIButton. Other properties like background-color, border and border-radius are working but the padding doesn't seem to do anything.
Is there anything I have to do in order to add padding to a button ? Or is it that buttons simply cannot be padded?
I'm using Xcode 7.0.1 and the latest version of PixateFreestyle.
Thanks! :)
Think you need to use background-padding You can see documentation here
For example, using the video as a guide, I can make a button styled like this:
But then if I set background-padding: 50px; It will appear like this:
If you are using negative values, you should keep in mind that the button will not grow larger than the frame set in your storyboard or .xib.
The CSS I used was:
.btn-green {
color :#446620;
background-color:linear-gradient(#87c44a,#b4da77);
border-width: 2px;
border-color:#000000;
border-style: solid;
border-radius:10px;
font-size: 13px;
background-padding: 50px;
}
I have a div with divs inside. The outer one has overflow-y: auto;, so with many internal items the right scrollbar appears. After doing $('#container').selectable(); when I press left mouse button over the scrollbar, it doesn't scroll, but a dotted frame for selecting is shown.
I have found this solution: JQuery UI Selectable plugin: Make scroll bar not selectable when div overflows
Unfortunately, it doesn't work for me, because when I scroll to the bottom, the items stop being selectable. (Though the top ones continue). So, the question is: how make the scrollbar... mmm... a scrolling bar, without splitting the container into 2 divs.
Well, it seems to be all browsers problem: when you click on a scrollbar, a mouse event is fired. This is the real problem, jQuery UI just doesn't solve it. Let's fix it on our own in the jQuery UI .js file (not applied to the min version as it should be obfuscated AFAIK).
Add this condition
if (event.pageX > $(event.target)[0].clientWidth + $(event.target).offset().left)
return;
right after the
_mouseDown: function(event) {
I have seen a lot of such hacks with HasScrollbar() detectors, but don't get why didn't they just sum up client width (that is without scrollbar) and offset to make it relative to the document and compare with pageX. For me it works perfectly.
Use a wrapper div for this , Its working fine for me.
.selectable-wrapper { border-radius: 5px; min-height: 200px; max-height: 200px; overflow-y: auto; border: 1px solid #D1D1D1;}
.selectable { list-style-type: none;padding: 5px;}
<div class="selectable-wrapper">
<ul class="selectable">
</ul>
</div>
please see this http://jsfiddle.[net]/Nkkzg/108/ (SO doesn't allow to like to JsFiddle) and write 'Apple' in auto-complete text box. You can see a long string appears and with that page's horizontal scroll bar also appear which is very annoying.
I want to show the full string as a result without setting the width, You can see autocomplete results div shows from the left corner to maximum right depending on string length. How can we show the results in the center of page like input textbox, so that horizontal scroll bar shouldn't appear.
Any help will be highly appreciated.
Thanks and Regards.
According to this article:
jQuery UI Autocomplete Width Not Set Correctly
It looks as though you need to place everything in a container and specify the appendTo property telling it where to put the menu.
You should try to use position:absolute
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
border:1px solid #222;
position:absolute;
}
Live Demo
You could try to put this in your .css file
span input.ui-autocomplete-input {
width: 100%;
}
In that way the autocomplete get's the width you have style it to according to the styleClass that is on the enclosing span tag
One of my service pages needs inner tabs.
I already use regular jQuery UI Tabs in the page and I would like to use a different styling for the inner tabs.
Many popular sites use inner tabs differently from the main tabs by using simple text for the tabs titles, a long underline beneath the titles and a down arrow to represent the selected tabs. (image attached).
Do you know how to style jQuery UI Tabs to place a down arrow when the tab is selected?
Oh you want to know how to create the triangle using css3. Well you can do this using css, however, your example above isn't completely possible only using css. You can't have a border on the triangle as it is created using borders.
You create the downward triangle like this
.arrow { width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
I created what you are looking for in a fiddle.
http://jsfiddle.net/jessekinsman/Mn2sx/
However, if you want to create exactly what you have above, you could use custom icon font for the triangle then you could put a text-shadow on it and it could have a stroke.
However, that being said, if you want backward compatibility and the ability to add shadows and border to the triangle, an image is going to be your most compatible approach.
You could try adding some css to the class ui-tabs-active, something like what is shown on this website: http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/
Yes this is pretty easy by just styling the li element with the class="active"
Something like this
.tabs {
border-bottom: 1px solid #000;
}
.tabs li.active {
border-bottom: 1px solid #fff;
padding: 5px;
background: url(../images/arrow.png) 5px 50%;
}
The above is just sample code to give you an idea. You will have to tweak the image values to get the arrow image to line up properly.
However, I think your question might be more involved.
Are you asking how to style two separate jQuery tabs that exist on the same page with a different style?
If that is the case, I would recommend wrapping one of the styles in a element with a unique class or id. Like this:
<div class="new-tabs">
<ul class="tabs">
<li>Tab1</li>
</ul>
</div>
Then you can copy all the styling from the tabs.css (I can't remember the exact name of the css file at the present time) and add the class or id before all those rules. Like this
.tab li { something.... }
.new-tabs .tab li {something...}
Walaa, you now have a completely separate set of styles for the tabs within the container.
I would recommend working through the styles you just copied and deleting what you don't need.