I am developing a webapp for ipad and have come across an issue using select option elements when moving divs with webkit-transform. Forgive the table layout but I'm trying to replicate the issue in the app as closely as possible.
Click on the green box and the panels move to the left and the select box is fine. Reload the page and click on the red box and the panels move to the left (using webkit-transform) and when you click on the select box, the list is displayed outside of the browser and the container box jumps.
Note that this is not an issue on the latest GA chrome builds.
<html>
<head>
<title>Select Testing</title>
<style>
.button {
position: relative;
width: 44px;
height: 44px;
}
#moveGood {
background-color: lime;
}
#moveBad {
background-color: red;
}
div#panels {
position: relative;
height: 100%
}
div.panel {
position: relative;
top: 0px;
left: 0px;
width: 200px;
height: 50px;
border: 2px solid black;
}
.leftBad {
-webkit-transform: translate3d(-200px, 0, 0);
}
.leftGood {
left: -200px;
}
div#panelContainer {
position: absolute;
top: 100px;
left: 0;
overflow: hidden;
width: 210px;
}
</style>
<script type="text/javascript">
function leftBad() {
document.getElementById("panels").className += ' leftBad';
}
function leftGood() {
document.getElementById("panels").className += ' leftGood';
}
</script>
</head>
<body>
<div id="moveBad" class="button" onclick="leftBad();"></div>
<div id="moveGood" class="button" onclick="leftGood()";></div>
<div id="panelContainer">
<div id="panels">
<table>
<tr>
<td>
<div id="page1" class="panel">
</div>
</td>
<td>
<div id="page2" class="panel">
<select>
<option value="volvo">
Volvo
</option>
<option value="saab">
Saab
</option>
<option value="mercedes">
Mercedes
</option>
<option value="audi">
Audi
</option>
</select>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Safari tries to be helpful when there's a select box partially out of view, if you see:
http://jsfiddle.net/H5J27/
The first example doesn't have -webkit-transform, but when you click on it, it will be displaced in order to reveal it fully.
Now, Safari apparently isn't aware that, once transformed, the select box is in full view. The engine still thinks it's partially obstructed and it will move the select box and it's parent container to a point where it thinks you can see it.
The workarounds are not very encouraging. I'm guessing you're doing this coupled with animation in order to enjoy the benefits of hardware acceleration, so I'd add an event listener and the end of the animation, remove the css transform and apply normal positioning. This will get complicated if you have to do it on several elements, but it's good enough for a one time thing.
Related
I'm new in using chart JS, I am trying to customize the legends. I try the example that I found but when I try to make my own it shows this error.
I want to display the legends in separate like in this.
here's my code.
var myLegendContainer = document.getElemenById('legend');
var graphTarget = $("#line-chartcanvas");
graphTarget.attr('height',80);
barGraphQty = new Chart(graphTarget, {
type: 'bar',
data: chartdata,
options: {
legend: {
display: false
},
}
});
myLegendContainer.innerHTML = barGraphQty.generateLegend();
});
HTML code
<div class="col-md-4">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">Legends</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="legend"></div>
</div>
</div>
</div>
CSS
[class$="-legend"] {
list-style: none;
cursor: pointer;
padding-left: 0;
}
[class$="-legend"] li {
display: block;
padding: 0 5px;
}
[class$="-legend"] li.hidden {
display:block !important;
text-decoration: line-through !important;
}
[class$="-legend"] li span {
border-radius: 5px;
display: inline-block;
height: 10px;
margin-right: 10px;
width: 10
please help me.
Without seeing your code, it's almost impossible to tell why exactly this TypeError occurs. From the posted image, I deduct however that the use of generatelabels is not the ideal choice to achieve what you need.
What you really need is generating custom HTML legend using legendCallback together with some CSS.
Please take a look at the following posts to see how this could be done:
https://stackoverflow.com/a/63216656/2358409
https://stackoverflow.com/a/63202664/2358409
In FooTable 3.1.4 I want to use a pretified i-Check checkbox for a checkAll functionality in the Header of the table.
This is the HTML without i-Check:
<th data-type="html" data-sortable="false"
data-filterable="false" style="display: table-cell;"
class="footable-last-visible">Choose
<input name="check_all" class="all" type="checkbox">
</th>
When we run this script without i-Checks it runs fine. However - applying i-Checks makes the prettified checkbox unclickable - We are unable to check / uncheck.
This is the HTML with i-Check applied:
<th class="footable-last-visible" data-type="html" data-sortable="false"
data-filterable="false" style="display: table-cell;">Kies
<div class="icheckbox_square-green" style="position: relative;">
<input type="checkbox" name="check_all" class="all"
style="position: absolute; opacity: 0;">
<ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"
class="iCheck-helper">
</ins>
</div>
</th>
So it seems FooTable does not accept the i-Checks modified HTML in the head of the table. I did find a (closed) Github Issue post addressing the problem :
"the issue was that the sorting component worked off of a click on the
entire TH element and had a call to e.preventDefault() in the handler.
This was basically killing the default click behavior of elements
placed within the header element. I've since removed this limitation
and it will be released in the next version shortly."
But this post does not clarify as of which version of FooTable this problem is solved.
Or did I make a mistake in the code ..... So - any input much appreciated.
your script must be:
//first
$('.table').footable();
//after
$('#checkall').on('ifChecked ifUnchecked',function(evant){
if(evant.type == 'ifChecked')
$('.check').iCheck('check');
else
$('.check').iCheck('uncheck');
});
I have just added a Google Adsense ad to my page. I have a navbar on my page that is fixed to the top of the screen. The adsense ad is inside a DIV that normally behaves normally and displays under the navbar, but once the ad is displayed the ad displays ontop of the navbar.
Navbar code:
#navbar {
position: fixed;
width: 100%;
height: 66px;
background-color: #1C1C1C;
}
<div id="navbar">
<!-- Orange bar in Navbar-->
<div id="topbar"></div>
<div id="buttons">
<!--Home button-->
<p class="button">- Home</p>
<!--Divider-->
<div class="divider"></div>
<!--Raffles Button-->
<p class="button">Raffles</p>
<!--Divider-->
<div class="divider"></div>
<!--Get tokens Button-->
<p class="dbutton">Get<br>Tokens</p>
<!--Divider-->
<div class="divider"></div>
<!--Token lotto Button-->
<p class="dbutton">Token<br>Lotto</p>
</div>
<div id="signin">
</div>
<div id="profile">
</div>
</div>
Ad DIV:
div#ad300x600 {
margin-left: 50px;
height: 600px;
width: 300px;
background-image: url("miscimg/YUADBLOCK.jpg");
background-size: 0 0;
float: left;
}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- csgohumblelargeskyscraper -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:600px"
data-ad-client="ca-pub-xxx"
data-ad-slot="xxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
I have tried giving the Ad DIV a z-index: -100; and the Navbar a z-index: 1; but that hasn't helped. How can I make the ad display under the Nav bar. Also something that would be nice instead would be if the ad wouldn't move. But if I give it the position: fixed; tag it pops into the top right corner of the screen and stays there.
http://i.stack.imgur.com/Wts4Q.png
(The grey is the Navbar the white is the Ad)
Seems that if I do an exaggerated amount of z-index like "99999999999" it works fine. Sorry to have posted this and figured out a solution myself.
I'm working on a digital textbook feature that would allow the student to click a link to open up a simple div form for them to input their answer to that specific question. The pop-up form is just simple HTML/CSS with some jQuery UI to hide, show, and make it draggable. Here's the twist. I've got multiple questions that each need to be attached to a unique div. No problem, I thought. I'll just set each a href to link back to a unique ID that I've assigned within the DIV. Problem is, I can't seem to target the proper DIV with its corresponding a href. Instead the same set of questions appear no matter which link is clicked. This seems super simple and I'm probably overcomplicating it. What can I do here?
HTML:
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What type of person is Carsten?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><label for="body">How do you know?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What can you learn about an active volcano from the photograph?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
Draw Conclusions What kind of person is Carsten? How do you know?
Use Text Features What can you learn about an active volcano from the photograph?
Where the first a href needs to open the first div and the second a href opens the second div, etc., etc.
CSS:
.messagepop {
overflow-y: auto;
overflow-x: hidden;
cursor:default;
display:none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align:left;
width:394px;
height: 335px;
z-index:50;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px 4px 4px 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;}
JS:
$(document).ready(function() {
$('.show').click(function() {
if ( !$(this).next('div').is(':visible') ) {
$(".messagepop").slideFadeToggle();
$(this).next('div').slideFadeToggle();
}
});
$('.hide').click(function() {
$(this).parent().slideFadeToggle();});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);};
$(function() {
$("#draggable").draggable();});
Thank you for your advice and for ironing out my poorly written method. It seems you've got it working.
I've since discovered a jQuery Mobile solution that is much easier than what I was trying to pull together.
For future viewers, it would simply look like this.
Draw Conclusions
Use Text Features
<div data-role="popup" id="popup1" class="ui-content" data-position-to="window">
Close
<p>What kind of person is Carsten?</p>
<input type="text"/>
<p>How do you know?</p>
<textarea></textarea>
</div>
<div data-role="popup" id="popup2" class="ui-content" data-position-to="window">
Close
<p>What can you learn about an active <mark><b>volcano</b></mark> from the photograph?</p>
<textarea></textarea>
</div>
The logic here makes a lot more sense to me and there's the added benefit of ensuring it will work properly on mobile devices. Then if you want to make it draggable, just drop in:
<script>
$(function() {
$(".ui-content").draggable();
});
</script>
And then if you want it to be draggable on mobile (remember, jQuery UI isn't natively supported on mobile), you'll have to call up a hack of sorts. I like Touch Punch.
You may run into issues with form inputs when using Draggable combined with Touch Punch, but that's a story for another thread.
Here is a demo: http://jsfiddle.net/ebNsz/
I've set id:s for the question-div:s and target them with the 'href' attribute in the 'a' elements. Not sure what you wanted to do with the 'slideFadeToggle' function, so i used 'fadeToggle' instead.
HTML:
<div id="q1" class="messagepop">
<form method="" id="form1" action="/answers">
<label for="answer1">What type of person is Carsten?</label><textarea name="answer1" class="answer"></textarea>
<label for="answer2">How do you know?</label><textarea name="answer2" class="answer"></textarea>
<div>
<input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
</div>
</form>
</div>
<div id="q2" class="messagepop">
<form method="" id="form2" action="/answers">
<label for="answer1">What can you learn about an active volcano from the photograph?</label><textarea name="answer1" class="answer"></textarea>
<div>
<input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
</div>
</form>
</div>
<p>Draw Conclusions What kind of person is Carsten? How do you know?</p>
<p>Use Text Features What can you learn about an active volcano from the photograph?</p>
jQuery: (jsFiddle doesn't support .draggable(), so i commented out the first line and added the second.)
$(function() {
/* $("div.messagepop").draggable().hide();*/
$("div.messagepop").hide();
$("a.toggle").click(function(e)
{
e.preventDefault();
var targetpop = $(this).attr('href');
$(targetpop).siblings("div.messagepop").fadeOut();
$(targetpop).fadeToggle();
});
$("a.close").click(function(e)
{
e.preventDefault();
$(this).closest("div.messagepop").fadeToggle();
});
});
CSS:
.messagepop {
position: absolute;
top: 20%;
left: 50%;
z-index: 50;
margin-left: -197px;
text-align: center;
width: 394px;
height: 335px;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;
}
label {
display: block;
}
textarea {
width: 75%;
height: 5em;
margin: 0 0 1em 0;
}
Is it possible to apply a css(3) style to a label of a checked radio button?
I have the following markup:
<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>
What I was hoping is that
label:checked { font-weight: bold; }
would do something, but alas it does not (as I expected).
Is there a selector that can achieve this sort of functionality? You may surround with divs etc if that helps, but the best solution would be one that uses the label ''for'' attribute.
It should be noted that I am able to specify browsers for my application, so best of class css3 etc please.
try the + symbol:
It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.
As such:
input[type="radio"]:checked+label{ font-weight: bold; }
//a label that immediately follows an input of type radio that is checked
works very nicely for the following markup:
<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>
... and it will work for any structure, with or without divs etc as long as the label follows the radio input.
Example:
input[type="radio"]:checked+label { font-weight: bold; }
<input id="rad1" type="radio" name="rad"/><label for="rad1">Radio 1</label>
<input id="rad2" type="radio" name="rad"/><label for="rad2">Radio 2</label>
I know this is an old question, but if you would like to have the <input> be a child of <label> instead of having them separate, here is a pure CSS way that you could accomplish it:
:checked + span { font-weight: bold; }
Then just wrap the text with a <span>:
<label>
<input type="radio" name="test" />
<span>Radio number one</span>
</label>
See it on JSFiddle.
I forget where I first saw it mentioned but you can actually embed your labels in a container elsewhere as long as you have the for= attribute set. So, let's check out a sample on SO:
* {
padding: 0;
margin: 0;
background-color: #262626;
color: white;
}
.radio-button {
display: none;
}
#filter {
display: flex;
justify-content: center;
}
.filter-label {
display: inline-block;
border: 4px solid green;
padding: 10px 20px;
font-size: 1.4em;
text-align: center;
cursor: pointer;
}
main {
clear: left;
}
.content {
padding: 3% 10%;
display: none;
}
h1 {
font-size: 2em;
}
.date {
padding: 5px 30px;
font-style: italic;
}
.filter-label:hover {
background-color: #505050;
}
#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
background-color: green;
}
#featured-radio:checked~main .featured {
display: block;
}
#personal-radio:checked~main .personal {
display: block;
}
#tech-radio:checked~main .tech {
display: block;
}
<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">
<header id="filter">
<label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
<label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
<label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>
<main>
<article class="content featured tech">
<header>
<h1>Cool Stuff</h1>
<h3 class="date">Today</h3>
</header>
<p>
I'm showing cool stuff in this article!
</p>
</article>
<article class="content personal">
<header>
<h1>Not As Cool</h1>
<h3 class="date">Tuesday</h3>
</header>
<p>
This stuff isn't nearly as cool for some reason :(;
</p>
</article>
<article class="content tech">
<header>
<h1>Cool Tech Article</h1>
<h3 class="date">Last Monday</h3>
</header>
<p>
This article has awesome stuff all over it!
</p>
</article>
<article class="content featured personal">
<header>
<h1>Cool Personal Article</h1>
<h3 class="date">Two Fridays Ago</h3>
</header>
<p>
This article talks about how I got a job at a cool startup because I rock!
</p>
</article>
</main>
Whew. That was a lot for a "sample" but I feel it really drives home the effect and point: we can certainly select a label for a checked input control without it being a sibling. The secret lies in keeping the input tags a child to only what they need to be (in this case - only the body element).
Since the label element doesn't actually utilize the :checked pseudo selector, it doesn't matter that the labels are stored in the header. It does have the added benefit that since the header is a sibling element we can use the ~ generic sibling selector to move from the input[type=radio]:checked DOM element to the header container and then use descendant/child selectors to access the labels themselves, allowing the ability to style them when their respective radio boxes/checkboxes are selected.
Not only can we style the labels, but also style other content that may be descendants of a sibling container relative to all of the inputs. And now for the moment you've all been waiting for, the JSFIDDLE! Go there, play with it, make it work for you, find out why it works, break it, do what you do!
Hopefully that all makes sense and fully answers the question and possibly any follow ups that may crop up.
If your input is a child element of the label and you have more than one labels, you can combine #Mike's trick with Flexbox + order.
label.switchLabel {
display: flex;
justify-content: space-between;
width: 150px;
}
.switchLabel .left { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right { order: 3; }
/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }
/* style the switch */
:root {
--radio-size: 14px;
}
.switchLabel input.switch {
width: var(--radio-size);
height: var(--radio-size);
border-radius: 50%;
border: 1px solid #999999;
box-sizing: border-box;
outline: none;
-webkit-appearance: inherit;
-moz-appearance: inherit;
appearance: inherit;
box-shadow: calc(var(--radio-size) / 2) 0 0 0 gray, calc(var(--radio-size) / 4) 0 0 0 gray;
margin: 0 calc(5px + var(--radio-size) / 2) 0 5px;
}
.switchLabel input.switch:checked {
box-shadow: calc(-1 * var(--radio-size) / 2) 0 0 0 gray, calc(-1 * var(--radio-size) / 4) 0 0 0 gray;
margin: 0 5px 0 calc(5px + var(--radio-size) / 2);
}
<label class="switchLabel">
<input type="checkbox" class="switch" />
<span class="left">Left</span>
<span class="right">Right</span>
</label>
asd
html
<label class="switchLabel">
<input type="checkbox" class="switch"/>
<span class="left">Left</span>
<span class="right">Right</span>
</label>
css
label.switchLabel {
display: flex;
justify-content: space-between;
width: 150px;
}
.switchLabel .left { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right { order: 3; }
/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }
See it on JSFiddle.
note: Sibling selector only works within the same parent. To work around this, you can make the input hidden at top-level using #Nathan Blair hack.
UPDATE:
This only worked for me because our existing generated html was wacky, generating labels along with radios and giving them both checked attribute.
Never mind, and big ups for Brilliand for bringing it up!
If your label is a sibling of a checkbox (which is usually the case), you can use the ~ sibling selector, and a label[for=your_checkbox_id] to address it... or give the label an id if you have multiple labels (like in this example where I use labels for buttons)
Came here looking for the same - but ended up finding my answer in the docs.
a label element with checked attribute can be selected like so:
label[checked] {
...
}
I know it's an old question, but maybe it helps someone out there :)