I have the following html code:
<a href="#">
<span class="span1">test</span><span class="span2">test</span>
</a>
and css code:
.span1{float: left; }
.span2{float: right; }
So the link is test test with about 40px space between the two words "test" and "test". I created the space simply by using css, not by or by typing space with my keyboard.
The words "test" and "test" are both click-able but the space between them is not.
How can I make the space between the two spans click-able? I have tried to wrap both of the span tags in another span tag but didn't help.
Thank you.
Because the spans are forced into block display (by virtue of having given them float properties), you need to make sure the a also has block display and either overflow: hidden OR clearfix such that it is certain to completely contain the space (and intervening space) occupied by its contents:
a {
display: block;
*zoom: 1;
}
a:after {
clear: both;
content: " ";
display: table;
}
.span1 {
float: left;
}
.span2 {
float: right;
}
EDIT: based on reported weirdness in IE7:
*+html a * {
cursor: pointer;
}
Related
I'm trying to make an image gallery that's navigated by dragging horizontally. The issue I'm currently facing is that there are no boundaries on the left and right for when the elements should stop dragging. I've tried using the 'container' element, but when I do, it stops dragging altogether.
I've tried using 'parent' or the actual div as the container and neither has worked properly. I saw on another message board that using flexbox in this situation makes things more complicated, so I switched to using display: inline-block on images.
This is my current draft: https://jsfiddle.net/samseurynck/ka1e9soj/21/
HTML
<div class="item_block_left">
<div class="item_block_left_gallery_container">
<div class="item_block_left_gallery">
<img class="item_block_left_gallery_item" src="https://placeimg.com/640/480/animals">
<img class="item_block_left_gallery_item" src="https://placeimg.com/200/200/animals">
<img class="item_block_left_gallery_item" src="https://placeimg.com/640/400/animals">
</div>
</div>
</div>
SCSS
.item_block_left{
height:200px;
width: 50%;
border: 1px solid pink;
overflow: hidden;
.item_block_left_gallery_container{
position: relative;
height:100%;
width: auto;
.item_block_left_gallery{
height:100%;
display: flex;
cursor: grab;
.item_block_left_gallery_item{
position: relative;
height:100%;
width:auto;
display: inline-block;
}
}
}
}
JQUERY
$(".item_block_left_gallery").draggable({
scroll: false,
axis: "x",
});
The intended result is only being able to scroll/drag horizontally as far as the images go, with no white space on the left or right sides.
Working Example: https://jsfiddle.net/Twisty/4ak6q0zu/44/
JavaScript
$(function() {
var bounds = {
left: $(".item_block_left_gallery").position().left
};
bounds.right = bounds.left - $(".item_block_left_gallery").width() - $(".item_block_left").width() + 10;
$(".item_block_left_gallery").draggable({
scroll: false,
axis: "x",
drag: function(e, ui) {
var l = ui.position.left;
if (l > bounds.left) {
console.log("Hit Left Boundry");
ui.position.left = bounds.left;
}
if (l <= bounds.right) {
console.log("Hit Right Boundry");
ui.position.left = bounds.right;
}
}
});
});
Using drag callback, you can check and set the position of the draggable item. Basing things off the left edge of the drag item, we can check and restrict the movement based on some specific boundaries. It appears that there was a 10px padding or margin on the right hand side, might just be white space, so I just adjusted to correct for this.
See more: http://api.jqueryui.com/draggable/#event-drag
Hope that helps.
I have created a select menu next to a button. I wonder how can I get the select menu be at the same Y of the button? (Ideally I would like it to be of the same height too but that is another thing I guess...)
As the shown code I have no configuration other than the select width:
HTML:
<div>
<button>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
jqueryui JS
$('button').button();
$('select').selectmenu({
width: 120 // Needed to show see options
});
Current Result:
Fiddle that show the problem: https://jsfiddle.net/9xv7jqn4/2/
Is this a bug or a setting I am missing? Any help is appreciated
EDIT:
Thank you for the answers, I am still testing them in my code... I am also interested in know why this happens? Why the selectemenu is taking more space than it looks? Is this a bug of selectmenu widget?
Maybe with this css:
display: inline-flex;
vertical-align: middle;
Your fiddle with the changes: https://jsfiddle.net/9xv7jqn4/3/
Based on thread: "jQuery ui selectmenu vertical position offset (relatively to buttons in this line) " and suggestions here too I ended up adding a couple of rules that fix my case.
I don't know why but ui-selectmenu-button is not vertical-aligned as other buttons. Also decreased the padding of inner text so it looks almost (not exactly) the same height as other buttons.
.ui-selectmenu-button {
vertical-align: middle;
}
.ui-selectmenu-button .ui-selectmenu-text {
padding-top: 0.3em; padding-bottom: 0.3em;
}
You can use
vertical-align: top;
for your button like here: https://jsfiddle.net/9xv7jqn4/4/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.one{
vertical-align: top;
}
<div>
<button class='one'>button</button>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
Another good option is to add wrappers like here: https://jsfiddle.net/9xv7jqn4/6/
$('button').button();
$('select').selectmenu({width: 120});
div,
button,
select{
border: thin dotted red;
}
span {
border: thin dotted blue;
}
.w{
display:inline-block;
vertical-align: middle;
}
<div>
<div class='w'>
<button>button</button>
</div>
<div class='w'>
<select>
<option>nacho</option>
<option>tama</option>
</select>
</div>
</div>
I have a standard website, and when printed (for PDF-making purposes on Safari OS X), I'd like the footer to align to the bottom of whatever printed page it is on — i.e. the last page of the document.
Like this:
Is that possible?
I have used a media query (#media print { }) for all other print stylesheet details (excluded for simplicity).
Demo code is here; for the screen page itself, here is the HTML:
<div id="footer">
<p>A bunch of example stuff inside here...</p>
</div>
Which is situated with absolute positioning:
#footer {
color: #fff;
background: #000;
width: 100%;
position: absolute;
bottom: 0px;
}
Bit of an old one but the answer is surely to use the #page:last selector, but you have to alter the CSS for the footer as well.
#footer { position: static; }
#page:last {
#bottom-center { content:element(footer) }
}
I'm using Twitter-Bootstrap and I need to be able to print the page the way it looks on the browser. I'm able to print other pages made with Twitter-Bootstrap just fine but I can't seem to print my page that uses purely Twitter-Bootstrap. Am I missing a tag somewhere?
Official TB page when printed:
My page when printed:
What my page actually looks like:
Bootstrap 3.2 update: (current release)
Current stable Bootstrap version is 3.2.0.
With version 3.2 visible-print deprecated, so you should use like this:
Class Browser Print
-------------------------------------------------
.visible-print-block Hidden Visible (as block)
.visible-print-inline Hidden Visible (as inline)
.visible-print-inline-block Hidden Visible (as inline-block)
.hidden-print Visible Hidden
Bootstrap 3 update:
Print classes are now in documents: http://getbootstrap.com/css/#responsive-utilities-print
Similar to the regular responsive classes,
use these for toggling content for print.
Class Browser Print
----------------------------------------
.visible-print Hidden Visible
.hidden-print Visible Hidden
Bootstrap 2.3.1 version:
After adding bootstrap.css file into your HTML,
Find the parts that you don't want to print and add hidden-print class into tags.
Because css file includes this:
#media print {
.visible-print { display: inherit !important; }
.hidden-print { display: none !important; }
}
Be sure to have a stylesheet assigned for printing.
It could be a separate stylesheet:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
or one you share for all devices:
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute
Then, you can write your styles for printers in the separate stylesheets or in the shared one using media queries:
#media print {
/* Your styles here */
}
Replace every col-md- with col-xs-
eg: replace every col-md-6 to col-xs-6.
This is the thing that worked for me to get me rid of this problem you can see what you have to replace.
There's a section of #media print code in the css file (Bootstrap 3.3.1 [UPDATE:] to 3.3.5), this strips virtually all the styling, so you get fairly bland print-outs even when it is working.
For now I've had to resort to stripping out the #media print section from bootstrap.css - which I'm really not happy about but my users want direct screen-grabs so this'll have to do for now. If anyone knows how to suppress it without changes to the bootstrap files I'd be very interested.
Here's the 'offending' code block, starts at line #192:
#media print {
*,
*:before,enter code here
*:after {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
select {
background: #fff !important;
}
.navbar {
display: none;
}
.btn > .caret,
.dropup > .btn > .caret {
border-top-color: #000 !important;
}
.label {
border: 1px solid #000;
}
.table {
border-collapse: collapse !important;
}
.table td,
.table th {
background-color: #fff !important;
}
.table-bordered th,
.table-bordered td {
border: 1px solid #ddd !important;
}
}
Best option I found was http://html2canvas.hertzen.com/
http://jsfiddle.net/nurbsurf/1235emen/
html2canvas(document.body, {
onrendered: function(canvas) {
$("#page").hide();
document.body.appendChild(canvas);
window.print();
$('canvas').remove();
$("#page").show();
}
});
In case someone is looking for a solution for Bootstrap v2.X.X here. I am leaving the solution I was using. This is not fully tested on all browsers however it could be a good start.
1) make sure the media attribute of bootstrap-responsive.css is screen.
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen" />
2) create a print.css and make sure its media attribute print
<link href="/css/print.css" rel="stylesheet" media="print" />
3) inside print.css, add the "width" of your website in html & body
html,
body {
width: 1200px !important;
}
4.) reproduce the necessary media query classes in print.css because they were inside bootstrap-responsive.css and we have disabled it when printing.
.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}
Here is full version of print.css:
html,
body {
width: 1200px !important;
}
.hidden{display:none;visibility:hidden}
.visible-phone{display:none!important}
.visible-tablet{display:none!important}
.hidden-desktop{display:none!important}
.visible-desktop{display:inherit!important}
2 things FYI -
For now, they've added a few toggle classes. See what's available in the latest stable release - print toggles in responsive-utilities.less
New and improved solution coming in Bootstrap 3.0 - they're adding a separate print.less file. See separate print.less
To make print view look like tablet or desktop include bootstrap as .less, not as .css and then you can overwrite bootstrap responsive classes in the end of bootstrap_variables file for example like this:
#container-sm: 1200px;
#container-md: 1200px;
#container-lg: 1200px;
#screen-sm: 0;
Don't worry about putting this variables in the end of the file. LESS supports lazy loading of variables so they will be applied.
If you want to keep columns on A4 print (which is around 540px) this is a good idea
#media print {
.make-grid(print-A4);
}
.make-print-A4-column(#columns) {
#media print {
float: left;
width: percentage((#columns / #grid-columns));
}
}
You can use it like this:
<div class="col-sm-4 col-print-A4-4">
I would like to use jQuery UI tabs but I need the tabs aligned right … That's "easy" since I can modify the tabs container class and extend it.
But the thing is I want to add a "title" on the left, as shown in this screenshot:
http://cl.ly/400D0E3z0f272h1B3x3R
How can I do it in a clean way ?
(A dirty way could be to prepend/append a div to the tabs tag, adding the DOM on the fly … I'm looking a cleaner way :)
Thank you in advance
First there is nothing dirty adding elements to the dom on the fly :-)
Secondly, you could simply add an element in the markup, for instance a <h3> (let's be semantic (and assume you got other titles before)):
<div id="tabs">
<h3 class="ui-tab-title">My Title</h3>
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
...
</div>
and position it with css:
/* float tab buttons to right */
.ui-tabs .ui-tabs-nav li { float: right !important; }
/* position:relative on container will make the title position:absolute relative to the container */
#tabs { position: relative; }
/* absolute position the title */
.ui-tab-title { position: absolute; left: 20px; top: 15px; }
Here's a jsfiddle to illustrate
Edit:
As you pointed out, floating right the <li> inverts their order.
You could invert the order of the list items in the markup itself but this will mess up the whole logic.
Here's a piece of css to right align the tab button while keeping the markup and the visual order in place:
/* align right the <ul> container */
.ui-tabs .ui-tabs-nav { height: 2.35em; text-align: right; }
/* jquery ui css floats-left the <li> so un-float them */
.ui-tabs .ui-tabs-nav li { display: inline-block; float: none; }
I've changed the fiddle accordingly.