I'm trying to make the background of a button change color, depending on the property of it's neighboring checkbox. But since I'm dependent on the HTML rendered by the questionnaire software I use, I'm unable to change the markup.
Let me show you what I mean:
![This the first situation: everything is OK here [1]http://i.stack.imgur.com/QEoUa.png
Upon clicking 1 of the 8 options, it get's highlighted. But once you click on the "next" button below, and then on the "back"button in the following screen you will encouter the following...
![D'oh!][2]http://i.stack.imgur.com/RCq1S.png
Here the option is still selected, but the button is no longer highlighted. This is a problem, as I want to hide the checkboxes later on.
I want to solve this problem using CSS only. However the checkbox and buttons are automatically placed inside a table. The table uses the following structure:
<table>
<tr>
<td class="checkbox">
<input type="checkbox">
</td>
<td class="item">
<span class="Option">
Answer
</span>
</td>
</tr>
</table>
I've tried using:
input[type=checkbox]:checked + a{background-color:red;}
This only works when checkbox and answer button are siblings.
Hope you can help me with this...
Related
We have a table that we've created using angularjs and want to add an option for each row to either Edit or Delete. We really want something that resembles this codepen, but without jquery.
So far we have the following:
<tr ng-repeat="item in data.list | filter:searchTable track by item.sys_id" >
<td class="moreOption">
<div class="more" ng-click="c.showHide(item);">
<div class='moredrop' ng-hide="!item.IsHidden">
<ul>
<li>
<i class='material-icons'>edit</i>
<span class='label'>Edit</span>
</li>
<li>
<i class='material-icons'>delete</i>
<span class='label'>Delete</span>
</li>
</ul>
</div>
</div>
</td>
</tr>
In our client controller, we have:
c.showHide = function(item) {
item.IsHidden = !item.IsHidden;
}
What we're really struggling with is the CSS styling of the pop-up box that shows Edit or Delete. We want it to "float" next to the 3 vertical dots icon when clicked on, much like the codepen link above, but can't seem to get it to look like that. Additionally, right now when you click the 3 vertical dots for one row, then click another row, it opens up 2 boxes. What do we have to do in our client controller for one click to close the previous pop up box?
Why don't you use a simple Bootstrap dropdown?
Dropdowns: Bootstrap
Use your own button or icon to launch the dropdown with this code.
$('.dropdown-toggle').dropdown()
I have a table with some text data. One of the columns should be clickable: a pop-up for editing this row will appear.
What is the best way to explain for user that clicking on this row will cause a pop-up?
I see 4 variants:
Hyperlink
<td>Smith</td>
Not good cause usually links open new pages.
Dotted-underline link
<td><span style="cursor:pointer; border-bottom: dotted 1px">Jackson</span></td>
User will expect a hovering help window.
Button
<td><button>Doe</button></td>
Looks bad and also not clear what will happen after click.
Clickable icon
<td>Johnson <span style="cursor:pointer" class="glyphicon glyphicon-edit"></span>
I'd like to avoid repeating the same element many times.
Here is a fiddle with all of these variants.
The icon is the most appealing as the other ones just show that you will be taken to more info. While the icon is clear that the user will edit.
I would also make it a hover affect for it like so:
$(document).ready(function() {
$('#test2').hover(function(){
$('#test').addClass('glyphicon glyphicon-edit');
},
function(){
$('#test').removeClass('glyphicon glyphicon-edit');
});
});
the #test2 is the cell and #test is the span.
http://jsfiddle.net/Ugc9C/2/
I have checkbox insde a link. In all browsers except Chrome, when clicking on the checkbox you follow the link (instead of just having the checkbox become selected).
How do I avoid this behaviour?
Demo (hover over one of the product images to see the checkbox):
http://livedemo07571.prestatrend.com/category.php?id_category=9
And here’s the code in question:
<a href="http://livedemo07571.prestatrend.com/product.php?id_product=25" class="product_img_link">
<img src="http://livedemo07571.prestatrend.com/img/p/25-65-large.jpg" height="469" width="469" alt="Crew Neck Jumper" />
<span class="new">New</span>
<div class="right_block large">
<h3 class="large">Crew Neck Jumper</h3>
<span class="product_arrow"></span>
<p class="availability_container"><span class="availability">Available</span></p>
<span class="slash">/</span>
<p class="price_container"><span class="price" style="display: inline;">$2,390.00</span></p>
<p class="compare large"><input type="checkbox" class="comparator" id="comparator_item_25" value="comparator_item_25" /> <label for="comparator_item_25">Select to compare</label></p>
</div>
</a>
This isn't valid HTML (see report). The way to avoid this is, quite simply, to include only text or images inside an anchor tag, and move the checkbox outside. You could use some jQuery to add a click event to the box which would navigate to the next page.
If you want for-sure don't want to move it outside the <a> then you'd have to have an onclick="return false;" and add a listener with jQuery that toggles it when its clicked. I'm not sure if this would work in all browsers, and your best option is just to do it a standards friendly way.
I think this happen because you have the Div (block element) is inside the A (inline element) tag and by default the event will bubble up soon as you click the checkbox.
Even if HTML 5 has made the exception for the A tag and now allow a block element to be nested within that inline element. To get that working the same accross all browser you'll have to wait they all support the html 5 features
1) try with a different doctype
2) build the div outside the A has the link is not required to be executed
i am new in html and php so i want your help,
I want to add an image behind some objects (2 textbox, one link, one submit button) on html. How can i do that? take example the facebook the blue bar where over it is the login items..
Thanks
Take a look at the background-image clause in CSS
Examples here
http://www.tizag.com/htmlT/htmlbackground.php
Just add a "div" and insert what you want inside him.
Then set it a width and a height to fit your background image.
You just have to specify an image as background for the element which contains your objects. I guess this will be a div. All about background-images can be found via google or here:
http://www.w3schools.com/css/pr_background-image.asp
You can use CSS to set the background color, or as other people have mentioned, a background image.
Assuming your elements are contained in a <div id="my-background"> element, the following style will apply a blue background to the div:
#my-background { background-color:#0000FF }
You may want to read up on CSS.
<table background="image.png" width=100%>
<tr>
<td>
<font color="white">Email</font><br>
<input type="text" name = "email" size="25"><br>
</td>
<td>
<font color="white">Password</font><br>
<input type="password" name = "password" size="25">
<input type = "Submit" value = "Log in" height='5'><br>
</td>
</tr>
</table>
but the texbox is not looks nice... there is huge space between one...
I've got the following control working called Uploadify. So I've placed the control inside a table. Here's a rough example:
<tr>
<td>
<div id="holdcontrol">
<input id="file_upload" name="file_upload" type="file" />
</div>
</td>
<td> OTHER STUFF </td>
</tr>
<tr>
The control is placed in a div called "holdcontrol". It is not possible to use hide or attr to disable the uploadify control because of its flash content. The simple solution is to simply set the height of the div to zero.
So I used $(#holdcontrol).css("height", 0); - so this "disables" the control which really 'hides' the button.
The problem is that it only partially closes down on the Uploadify control - Half of it - Which means that I can see "half of the control button". When I want to use the control again, I issue the command:
$(#holdcontrol).css("height", null); - that rebounds and it works fine. It's the setting of the div height inside the table cell to "hide" or to "disable" the Uploadify control that is bugging me.
Any thoughts or tips to truly setting that div height value to 0?
thanks and Happy Holidays!
After uploadify is loaded it changes your HTML code using JavaScript. In one of my Projects it adds an object outside of #holdcontrol so hiding #holdcontrol won't do anything.
<div id="holdcontrol">
<input id="file_upload" name="file_upload" type="file" />
</div>
<object
width="226" height="24" type="application/x-shockwave-flash"
data="http://www.example.com/ext/flash/uploadify.swf"
id="flashfileUploader"
>
<!-- even more code-->
</object>
As you can see the object gets the id #flashfileUploader - so if you just try to change #flashfileUploader instead of #holdcontrol you should be fine.
You can find this kind of undocumented stuff using FireBug (https://addons.mozilla.org/de/firefox/addon/1843/).
so long,
Tim