What I would like to achieve is this:
Surely, I went through the button documentation, but it seems nothing similar is there. So, I would appreciate some pointing in the right direction (codepen with a basic example would be most awesome).
So, ideally, this would be one button tag where I would be able to pass two variables (one which would appear on the left and one on the right). This does smell like a job for a Angular directive, though I haven't fiddled with it too much just yet so a friendly nudge in the right direction would be appreciated.
There is something similar to this in their documentation
http://ionicframework.com/docs/components/#button-bar
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
</div>
What I ended up doing in the end was this: I created a div with a class button and then inside it I created additional two div's with custom classes.
The code below:
.leftButtonSide {
width: 50%;
float: left;
color: #000;
}
.rightButtonSide {
width: 50%;
float: left;
background: #F2F2F2;
color: #000;
border-radius: 2px;
}
<div ng-repeat="d in data" class="button button-positive-outline">
<div class="leftButtonSide">2</div>
<div class="rightButtonSide">2,00</div>
</div>
True, for the exact same look you would have to play a bit with CSS. I ended up with this in the end:
Hope this helps someone too!
Related
I was wondering whether it is possible to add a "last" class to the last post appearing in a tumblr tag page in order to be able to customize it in css?
The goal is the following: let us say that a certain tag has 3 posts, so when I navigate in that tag page, the 3 posts appear, one below the other. I would like the first two separated by a line located at the bottom of each post body, but the last one on the bottom of the page should not have a separation line at its bottom, so I guess I would need a specific class for that post since it is the last one.
Thank you.
As per my comment you can achieve this by simply using a css selector :last-of-type or :nth-child(last)
Here is an example.
HTML:
<div id="posts">
<div class="post">
Post 1
</div>
<div class="post">
Post 2
</div>
<div class="post">
Post 3
</div>
</div>
CSS:
#posts .post {
margin-bottom: 20px;
border-bottom: 2px solid #444;
}
#posts .post:last-of-type {
background-color: orange;
border-bottom: none;
}
There is a jsfiddle here: https://jsfiddle.net/lharby/39ap851L/
So each post item will have a border bottom, but for the last post of type we override this with border-bottom: none
I'm trying to style a select input on iOS. The first option or initial state should have smaller font-size but not the rest of the options.
I have the following html structure:
<select class="dropdown">
<option selected="" value="Navigation">Navigation</option>
<option value="some-link">Whatever</option>
<option value="some-link">Another option</option>
<option value="some-link">Why</option>
<option value="some-link">What</option>
</select>
My CSS for it looks like this:
select {
-webkit-appearance: none;
font-family: 'Custom-Font', sans-serif;
font-size:.5em
line-height:1.8em; // optical center
background-color: #ccc;
color: #333;
border: none;
padding: 6px 10px 4px 10px;
}
.dropdown {
background-image: url(img/assets.svg);
background-position: right 2px;
background-repeat: no-repeat;
width: 100%;
display:block;
margin-bottom:-1.5em;
option:not(:first-of-type) {
font-size:1.5em;
}
}
The <select> menu looks exactly like I want it to look. It says "Navigation" inside a light-gray box with a rather small font-size.
However when clicking/tapping the select on my iphone the native UI view of iOS shows all options also in a very small font-size.
How can I just make the selected option (or the box itself) use the custom formatting but not the options. I want my options to have a "normal" readable font-size.
Any ideas on that? I tried with option:not(:first-of-type) and increase the font-size but no effect!
Unfortunately, there isn't a way to do it. iOS Safari takes full control of styling select lists' internal contents. Here's a reference for verification: little link.
One way to achieve this this would be to simulate the dropdown/select menu using JavaScript.
It's not very preferable, but if you absolutely require to change the default styling, then I'm afraid it's the only way to go; here's a demo that should give you an idea on how to do the simulation: another little link.
Try this 100% worked for me
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
For what it's worth - I had a transparent <select> dropdown with a border radius when closed. On iOS (I'm not sure about android, I didn't test it) the default grey box for the <select> would appear inside of my custom border which was unappealing and unwanted.
To get rid of the inner grey box I used the following CSS:
-webkit-appearance: none;
And further more - pertaining to this OP's topic. Bootstrap offers a convenient solution with great documentation to enable custom dropdowns with Javascript. Check it out here.
How can I insert a new div (not in .js) into fancybox (when fancybox - image is open)? Like this:
I'm also try to make a div css to fit that description :)) still with no avail. I suck at css styling, will get back on this one when i figured it out. my theory is that it should be a div within a div within the div if you get what i mean :))
!!!!!!!!
UPDATE I tried messing around the css and this is what i got (I'm using 1.3.4v for simplicity's sake in my part) and for reference, these images and codes I used are found in the 1.3.4 demo packege from fancybox.net
If I didn't explain my code well, it just means I'm still working on it so I just hope you get why it is vague, but the point is it's doable and you only need to work out the css file. I hope someone has a nicer looking code
Output:
1.I all of these from jquery.fancybox-1.3.4.css
just change these 1 2 3 and mess around with example7 there in the demo
#fancybox-outer {
position: relative;
width: 100%;
height: 100%;
background: #fff;
padding-right:50%; /*this part extends the right side of the photo so it would look like thet're on the same page*/
}
2.This re-positions the original title to the upper right part of the image
.fancybox-title-inside {
padding-bottom: 10px;
text-align: left;
color: #333;
position: absolute;
top:0;
left:65%;
border:1px solid black;/*for you to see how large the div is*/
height:100%;
}
3.My new RED div where I will be
div.fancycontent{ /*saviour do word wrap here*/
border:1px solid black;
padding:2px;
color: #333;
background: #FF0000;
width:50%;
height: 100px;
}
I tried using fancybox in one of my projects but had to revert back to implementing my own popup's using the DIV elements. Its pretty easy to create your own popups instead of using fancybox or facebox if you know a bit of JQuery try to have a look at these links. You can customize your div tags to contain what ever you need.
output
source
In your fancybox JS, set the type to iframe:
$(document).ready(function() {
$('.callout').fancybox({
type: 'iframe',
width: '640px',
height: '480px',
});
});
Then you can open up anything you want in the fancybox by simply applying the class to your link:
<a class="callout" href="{path}">{link}</a>
If you have issues with the iframe display, you might try adding a secondary class to tell fancybox what type of content you are linking to (this is a new convention introduced in the latest version, so I don't know if I'd recommend using it by default):
<a class="callout callout.iframe" href="{path}">{link}</a>
Hope that helps!
ty
It just happened that I created this fancybox "a la" facebook demo that looks pretty much like what you want:
http://picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html
I have always wanted to add Facebook share buttons to my applications, but the problem that I have is that they all look different. I see sites like this that have custom designed share buttons. Does anybody know a good tutorial, or have any pointers, about how to tackle this?
Sharing something one facebook is quite easy, here is the HTML for my custom share button.
<div id="share_div">
<div id="share">
<a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
Share
</a>
</div>
</div>
Where all the {{variables}} are to be replace by correct value :
fbapp_id is the id of your facebook application.
link_url is a link attached to the shared content (like a link to your site)
and share_message|urlencode is the message that is shared and it needs to be urlencoded.
Also here some css to style this like a real facebook button :
#share {
border:1px solid #0D386F;
background-color:#5D7DAE;
height:24px;
width: 100px;
}
#share a.click {
font-size:13px;
font-weight:bold;
text-align:center;
color:#fff;
border-top:1px solid #879DC2;
background-color:#5D7DAE;
padding: 2px 10px;
cursor: pointer;
text-decoration:none;
width:80px;
display:block;
}
But I let you the pleasure of customizing as you like, the important part being the href of the a tag
Does it answer your question ?
http://api.jquery.com/animate/
On this page, they give a demo where they have a gray div move across the screen with the click of a button.
Notice that if you click the right button enough times and the DIV block reaches the end of the container it creates horizontal and vertical scrollbars.
I downloaded and modified the code to get rid of the overflow property and what I have so far works BEAUTIFULLY in desktop browsers.
However, Safari on the iPhone handles things a little bit differently. For some reason, Safari completely ignores the overflow property and instead expands the browser window to show you where the block moved to.
I don't want you to be able to see the block. I want it hidden until you hit button again.
Anyone know what the heck is going on?
Here is a pic of the issue:
Here is my code:
div {
position:absolute;
background-color:#abc;
width:100%;
height:100%;
margin:0px;
max-width:100%;
}
body {
margin:0px;
padding:0px;
}
* {
overflow:hidden;
clip:rect(auto, auto, auto, auto);
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=110%"}, "medium");
});
$("#left").click(function(){
$(".block").animate({"left": "-=110%"}, "medium");
});
</script>
Even though I have moved the DIV block off the screen and I have overflow:hidden as a global style, the iPhone will make room for it in the browser window to show you where the DIV has moved to. ANNOYING!
Thank you in advance!
Not completely sure I understand what you want to accomplish here. But if you want to make the gray box disappear as it leaves towards the end of the document, then I would suggest that you wrap the div inside another div, and set the width of the wrapping element to 100% and overflow: hidden;
Like this:
<div class="wrapper">
<div class="block"></div>
</div>
Also add the appropriate styling:
<style type="text/css">
...
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
</style>
Note that you need to absolute position the wrapper as well, otherwise the gray block will still be visible outside it. You'll also need to give it some height (I used 100% in my example) or it will be 0px high (due to the absolute positioned child) and nothing will be visible.
Hope that helps.
Alternative to
overflow:hidden
HTML:/<div class="clear"></div>
CSS:.clear {clear:both;}