first is trouble with my overlapped divs, they're supposed to be overlapping each other but the thing is that upon loading the page, the box-shadow style are overlapped too, which I do not want, and would like to fix it.
the box shadow i want for each div is box-shadow: 0 0 2px #acacac;
but upon loading the page since there are 3 divs overlapped together the box shadow looks like it's been set to box-shadow: 0 0 6px #acacac;.
second is trying to simplify my jquery code.I've been trying to figure out a way to just uncheck all selected radio buttons upon checking a specific radio button, rather than having a long line of jquery code. something in the line of "if this radio button checked, uncheck checked radio button"
heres the
Jsfiddle(http://jsfiddle.net/cQca5/3/)
hopefully I find a solution, thanks!
JS: Simple as that. Hide all the divs and show what you want.
$(document).ready(function(){
$('input[type="radio"]').click(function(){
$('.div_style').css('display','none');
$('#'+$(this).val()).fadeIn();
});
});
CSS: display:none in .div_style
.div_style{
position:absolute;
border:1px solid #acacac;
width:750px;
height:500px;
border-radius:2px;
box-shadow: 0 0 2px #acacac;
top:40px;
left:0px;
display:none;
background:#FFF;
}
#diva{
z-index:1;
}
#divb{
}
#divc{
}
HTML: the attr name should be the same. Display:block for the first div.
<div>
<label><input type="radio" name="radio" value="div1" checked> 1st</label>
<label><input type="radio" name="radio" value="div2"> 2nd</label>
<label><input type="radio" name="radio" value="div3"> 3rd</label>
</div>
<div class="div_style" style='display:block;' id="div1">div1</div>
<div class="div_style" id="div2">div2</div>
<div class="div_style" id="div3">div3</div>
Heres a optimized jsFiddle solcing all the problems at once:
http://jsfiddle.net/cQca5/5/
Regards.
Related
Good day,
I have a function inside a javaScript file. I have 10 button will trigger this function to do something based on the button name. The code is something as follow:
function doSomething( name ){
switch(name){
case "1";
alert("i am 1");
break;
case "2";
alert("i am 1");
break;
// and so on...
}
}
This doSomething is working fine. However, I would like to alert other things when there is noscript or JavaScript is disable.
I do something like:
<noscript>
// if click on button 1, display <image src="image/img1" />
// if click on button 2, display <image src="image/img2" />
// and so on..
// I would like display different image when different button clicked.
</noscript>
Kindly advise.
No way. HTML5 itself is just a document sturcture and CSS3 provides style. That is, HTML5 as is has no behavior, thus, you won't be able to interact with the document without JavaScript.
If JavaScript is disabled and you provide a <noscript> element, you should tell your users that your Web application won't work without JavaScript.
You could do something like the checkbox hack in css to show a message in a hidden div, Style the labels like your buttons.
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
background: #08C;
padding: 5px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 2px;
color: white;
font-weight: bold;
}
.to-be-changed {display:none;}
input[type=checkbox]:checked ~ .to-be-changed {
display:block;
margin-top:30px;
font-size:120%;
color:red;
}
<noscript>
<div id="buttons">
<input type="checkbox" id="button1"><label for="button1">button 1</label>
<input type="checkbox" id="button2"><label for="button2">button 2</label>
<input type="checkbox" id="button3"><label for="button3">button 3</label>
<div class="to-be-changed"> You need to have javascript activated for the buttons to work !</div>
</div>
</noscript>
Obviously turn js off to se it working. Here's a link to the page I got the info from Css click events
I want to add simple slide done/up animation. As an example, if you go to Fiddle you can see left-side panel, where you can add external resources, Ajax requests and so on. If click on some of those you can see simple animated slide down effect. What I am trying to achieve is a bit similar. I have an html button:
<button class="checkbox-button btn btn-primary" ng-click="updateActiveTypeBox(true)">{{typeBoxMessage}}</button>
And here is my check-boxes div:
<div ng-show="activeTypeBox">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="selectAll.selected" ng-click="checkAll()" />Check All
</label>
<label ng-repeat="carType in carTypeObj">
<input type="checkbox" ng-model="carType.selected" /> {{carType.type}}
</label>
</div>
</div>
When you click on the button, activeTypeBox is set to true, so ng-show="activeTypeBox" passes. When you click on this button again, activeTypeBox is set to false, so ng-show="activeTypeBox" fails. The only thing that I need to add is slide down/up animation. I prefer to use Angular-Animate because it is library that works with angular code. I have tried to find the solution, but I did't find the one that fits my requirements.
Edit:
Looks like it can be done with CSS:
.animate-show {
line-height:20px;
opacity:1;
padding:10px;
border:1px solid black;
background:white;
}
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.animate-show.ng-hide {
line-height:0;
opacity:0;
padding:0 10px;
}
so just add class="animate-show" for the div
https://docs.angularjs.org/api/ng/directive/ngShow#usage_animations
a working example:
http://plnkr.co/edit/xmkBjvPY5OjFLnxcuVKz?p=preview&s=jBzeCEpWphlOpSRv
I need to create a priority field in my HTML form. Currently i am using radio buttons but it does not suffice my needs. The radio button should change background color onclick depending on the level of priority. Also i am not able to read the values to the controller.
The priority field should change colors according to the matrix above. In the form only the first row is present for the priority field.
This is the HTML i am using for priority
` <input type="radio" id="1" class="priority">
<input type="radio" id="2" class="priority">
<input type="radio" id="3" class="priority">
<input type="radio" id="4" class="priority">
<input type="radio" id="5" class="priority">`
I am using spring MVC framework.
Any help would be appreciated
UPDATE: updated FIDDLE
add value attribute to the radio buttons like
<input type="radio" name="1" id="r1" value="a rating">
then some script to read the radio button values like:
var htmlStr = $(this).attr("value");
$(".indicator").html(htmlStr);
I've tried some workaround for the sake of "changing color" in this Fiddle
Added this html, to act as the radio buttons that changes color:
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
with this css, to take it under the radio buttons:
.circ{
height: 12px;
width: 12px;
border-radius: 50%;
background: gray;
display: inline-block;
position: relative;
bottom: 20px;
margin-left: 5px;
margin-right: 4px;
}
Then add z-index: 9 to the radio button css rule to make it stay on top of the .circ divs and be clickable. Finally, add opacity: 0 to make it invisible, so the .circ divs under will appear on screen. Now you can change the color of the .circ divs accordingly using some script.
PS: You can't just edit radio button's background color, instead use background images
I am not sure if i understud your question correct, but if so this demo code (jsfiddle) might help.
(its just a demo, and would still have to be adapted for your needs)
It simply sets the color class on the Click event of every RadioButton.
CSS
.color1 {
background:red;
}
.color2 {
background:green;
}
.color3 {
background:yellow;
}
HTML
<div class="priority">
<input type="radio" name="1" id="1">
<input type="radio" name="1" id="2">
<input type="radio" name="1" id="3">
<input type="radio" name="1" id="4">
<input type="radio" name="1" id="5">
</div>
Script
$(function () {
$(".priority input").on("click", function () {
$(".priority").attr("class", "priority color" + this.id);
});
})
tested with Chrome 34+
As per your requirement you can use jQuery plugin Colourful rating system. It comes with good options so that you can set the color as required.
DEMO
example as follows:
the HTML
<ul id="rating">
<li>This is just a piece of crap</li>
<li>Nothing too new or interesting</li>
<li>Not bad, I like it</li>
<li>I would like to see more of this</li>
<li>This is the best thing I've seen</li>
</ul>
CSS
#rating { list-style:none; }
#rating li { display:inline; float:left; }
#rating li a { display:block; width:80px; height:80px; border:1px solid #888; background-color:#333;
text-indent:-9999px; box-shadow:0 0 5px #888; border-radius:40px; }
#ratinginfo { clear:left; width:350px; }
#ratinginfo p { text-align:center; padding:10px;
box-shadow:0 0 5px #888; border-radius:40px; }
After we're done loading jQuery and the Color plugin, we're ready to use jQuery to now animate the circles to the right colour and display the text.
// Variable to set the duration of the animation
var animationTime = 500;
// Variable to store the colours
var colours = ["bd2c33", "e49420", "ecdb00", "3bad54", "1b7db9"];
// Add rating information box after rating
var ratingInfobox = $("<div />")
.attr("id", "ratinginfo")
.insertAfter($("#rating"));
// Function to colorize the right ratings
var colourizeRatings = function(nrOfRatings) {
$("#rating li a").each(function() {
if($(this).parent().index() <= nrOfRatings) {
$(this).stop().animate({ backgroundColor : "#" + colours[nrOfRatings] } , animationTime);
}
});
};
// Handle the hover events
$("#rating li a").hover(function() {
// Empty the rating info box and fade in
ratingInfobox
.empty()
.stop()
.animate({ opacity : 1 }, animationTime);
// Add the text to the rating info box
$("<p />")
.html($(this).html())
.appendTo(ratingInfobox);
// Call the colourize function with the given index
colourizeRatings($(this).parent().index());
}, function() {
// Fade out the rating information box
ratingInfobox
.stop()
.animate({ opacity : 0 }, animationTime);
// Restore all the rating to their original colours
$("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);
});
// Prevent the click event and show the rating
$("#rating li a").click(function(e) {
e.preventDefault();
alert("You voted on item number " + ($(this).parent().index() + 1));
});
for complete documentation and source code click HERE
I am trying to make a page in wordpress (it is built within wordpress custom page tool in admin interface).
What i want is 3 radio buttons. 2 visable 1 hidden.
The hidden one should be auto checked so it displays the correct div. (Maybe not needed when i use z-index in css?)
When a user click one of the checkboxes it should hide the another 2 divs and display the correct div (notice they are on the same place on the page).
For some reson i cant get this to work in wordpress. Or if there would be another way of doing the same way i am open for it as well.
CSS:
#apDiv3 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:12;
background-color: #000;
color: #F00;
}
#apDiv10 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:11;
background-color: #000;
color: #F00;
}
#apDiv11 {
position:absolute;
left:405px;
top:53px;
width:485px;
height:434px;
z-index:11;
background-color: #000;
color: #F00;
}
<script>
$(document).ready(function(){
$("input[name='payway']").click(function() {
var test = $(this).val();
$(".desc").hide();
$("#"+test).show();
});
});
</script>
HTML/PHP:
<p>
<input type="radio" name="payway" value="apDiv10" />
pay2
<input type="radio" name="payway" value="apDiv3" checked="checked" style="display:none;">
</p>
<p>
<input type="radio" name="payway" value="apDiv11" />
Pay1
</p>
<div id="apDiv3" class="desc">
This is the standard div that should be visable
</div>
<div id="apDiv10" class="desc">
Shows this div when user click on checkbox pay2
</div>
<div id="apDiv11" class="desc">
Shows when user click checkbox pay1
</div>
It seems when i looked at the head.php file there was a script that dident work which made my script not to work at all.
Once i removed the script from the head it worked.
Thank you all!
I'm not sure the best way to word this question, hence why Google left me hanging.
Essentially I want to create a photo gallery that has (for example) 30 pictures and of those 30 pictures, there are 3 different categories they can be put into.
I want the user to be able to click a check box to either show or hide the different categories (and subsequent pictures) or view them all.
For example, there would be 4 check boxes to the left of a photo gallery. The top box would be ALL, then Category 1, Category 2, Category 3. As you clicked each box, only those "types" of images would appear.
Any hints on code (or even the type of code I should be looking for, i.e. CSS, Javascript, jQuery) would be greatly appreciated. Thanks!
The CSS ->
.chkbox-container{
float:left;
width:95px;
border:1px solid #ccc;
}
.img-container{
float:left;
width:300px;
border:1px solid #ccc;
}
img{
display:inline-block;
width:90px;
height:75px;
padding:2px;
border:1px solid black;
display:none;
}
The JQuery ->
$('.chkbox-container :radio').on('change', function(){
var me = $(this);
$.each($('.img-container img'), function(i,v){
var theCats = $(v).attr('rel');
theCats = theCats.split(' ');
if($.inArray(me.val(), theCats)){
$(v).show();
}else{
$(v).hide();
}
});
});
The HTML ->
<div class="chkbox-container">
<input type="radio" name="catfilter[]" value="all" checked="checked"/> All<br/>
<input type="radio" name="catfilter[]" value="category1" /> Category 1<br/>
<input type="radio" name="catfilter[]" value="category2" /> Category 2<br/>
<input type="radio" name="catfilter[]"value="category3" /> Category 3<br/>
</div>
<div class="img-container">
<img src="path.to/the/image/ext" rel="category1" />
<img src="path.to/the/image/ext" rel="category2" />
<img src="path.to/the/image/ext" rel="category3" />
</div>
Working jsFiddle for anyone that finds it useful.