I have html content in my JSSOR slides, and I would like to add a link to the content. Although the link displays fine I cannot click on it in the slide.
Is it possible to add a link to the content? (I don't want to make the entire slide clickable).
I tried increase the z-index to 9999 but that didn't make a difference...
<a style="display: block; position: absolute; top: 0px; left: 0px; width: 150px; height: 30px;" href="url">link</a>
Related
I start from scratch with a new phonegap app and only add an input element, a button and header and footer with position: fixed.
The problem that I have is:
I have focus on my input (and keyboard is visible) and click on button (that do nothing). In that moment input lose focus and the keyboard is hidden, but all my fixed elements (header and footer) are displayed in the middle of the screen for half a second and after that go to correct place.
If I click on Done from keyboard everything is ok.
You can see in this gif my problem:
First time I click on AAA button => Here is the problem
Second time I click on Done from keyboard => Everything is working ok.
This is the css for my header (similar for footer div)
.header {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
height: 50px;
z-index: 100;
background-color: #003777; }
And in my html I only add a div with class header from above, similar for footer and <input type='text'> and <button type='button'>AAA</button>
So nothing special, just for testing this problem.
The problem is only on iOS devices, tested on iOS 9.
Can't believe how much I'm struggling with this simple task. What is the correct way to place a jQuery Mobile data-icon on an element that the user does not interact with? What if I want a paragraph that just displays a message to the user like "No suitable lots were found" and I want that element to have the "info" icon?
I know this won't do it, but something like:
<p data-role="content" data-icon="info" class="my-message-block">No suitable lots were found</p>
Not a link. Not a button or checkbox or .... Just a plain old box displaying a message? All examples I see are an interactive element and not a static element.
Thanks in advance.
I do this by adding a span with some CSS as follows:
<p data-role="content" class="my-message-block"><span class="ui-icon-info ui-btn-icon-notext inlineIcon"></span>No suitable lots were found</p>
Then the inlineIcon class has these rules to place the icon:
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
The right margin controls the space between the icon and the text.
If you prefer a black icon with no gray disk behind it:
<p class="my-message-block"><span class="ui-alt-icon ui-icon-info ui-btn-icon-notext inlineIconNoDisk"></span>No suitable lots were found</p>
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent;
}
ui-alt-icon on the span changes the icon color and background-color: transparent; on the :after pseudo element hides the disk.
Here is a DEMO
I have a simple question.
See. that's a basically slider .
But I want to change it.
Like this.
is it possible ???? ?
Thanks!!
I found it my self.
.ui-slider .ui-slider-handle{
width:50px;
height:50px;
background:url(../images/slider_grabber.png) no-repeat; overflow: hidden;
position:absolute;
top: -10px;
border-style:none;
}
here is stackoverflow's other question page :
How to change Jquery UI Slider handle
Well this is a very strange issue, for whatever reason slider handle is outside it's parent element by half it's height or width, why did they made it that way?...
Anyways, you can see in this fiddle: http://jsfiddle.net/PGLkW/2/ that handle goes way outside it's container, and if i would try to remove margin like so:
.ui-slider .ui-slider-handle{
width:100%;
margin-left:0px;
left:0px;
margin-bottom:0px;
}
Things get's even worse, and from what i can see i would actually need to edit widget itself for such a stupid thing, or am i not seeing something?
So just to clarify my question, i want handle to stay within it's container, and when i click on any place to start dragging as you can see mouse doesn't go exactly to the middle of handle, so it looks really bad.
It looks it doesn't read the css properly, or because there are a lot of solutions they left it for the developers to play with it, and you have to do it until you get the result you want, here there is a solution using margin-bottom in negative:
//CSS
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl{ border-radius: 0; }
.ui-slider .ui-slider-handle{
width: 58px;
height: 50px;
margin-bottom: -25px;
}
//HTML
<div class="slider" style="margin:50px; height:400px; width:50px;"></div>
The fiddle http://jsfiddle.net/RFVZ2/ . I hope this works for you.
The solution is described in this bug report ("this is as designed"): http://bugs.jqueryui.com/ticket/4308
For horizontal slider I used:
.ui-slider-handle
{
height: 24px !important;
margin-bottom: -6px !important;
}
On my site hiphopcanvass.com I added the blogroll in the footer. I want the height to be a certain size, right now its on auto. If the content of the blogroll gets to that height then it will display on the other side until its fully across. What i want can be seen in the image below.
I do something like this in the footer of my site to display my categories (although I'm only displaying them in two short columns).
To do this, I'm using the following CSS to manipulate the list elements:
#footer ul li.footercolumn{float: left; display: block; width: 210px; margin-right: 20px;}
#footer ul li.footercolumn ul li { float: left; width: 50%; margin-bottom:10px; }
(This will have to be customized to fit your application of course).
There are several ways to create multiple columns using CSS, I'd recommend checking out CSS Wizardry's and A List Apart's articles on this subject.
You need to float the <li> left and change the height of the footerwidget from auto to 50px