Develop Reference

Hide multiple Dropdown boxs using CSS for printing

On my c# mvc page, I have several dropdown boxs displayed on the page, I'm using media query to render the view differently for print and screen.
My question is that is there a way (using CSS) to hide ALL the dropdown boxs if the selected option value is "". (the text for that value is '< Select >').
So that when printing, the following will be printed:
Title
Instead of:
Title < Select >
Just want to make it more clear,
if the selected option is not "" then I do need to display it when printing,
so the following:
Title Mr
will display as the same when printing as:
Title Mr
Here is one of my dropdown:
<select id="Alias_Title" name="Alias.Title">
<option value="">< Select ></option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
</select>
Don't know whether this is achievable or not with CSS, if not, can it be done by Jquery?
Thanks

You can use $.fn.filter() to find all the select whose value is "" then add a hidden class
$(function () {
$('select').filter(function () {
return $(this).val() == "";
}).addClass('hidden');
});
Add a CSS class
.hidden{
display: none !important;
}

CSS for print (from BootStrap)
#media print {
.visible-print-block {
display: block !important;
}
}
#media print {
.hidden-print {
display: none !important;
}
}
Elements with hidden-print CSS class are not visible for printing.
Code:
<select id="Alias_Title" name="Alias.Title" class="hidden-print">
<option value="">< Select ></option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
</select>
<script type="text/javascript">
$(function () {
$('select').change(function () {
if (!$(this).val()) {
$(this).addClass('hidden-print');
} else {
$(this).removeClass('hidden-print');
}
});
});
</script>

Using jquery, you can write like this.
if($('#Alias_Title').val().length == 0) { // int value
$('#Alias_Title').hide();
}

The following solution is a combination of #Satpal and #General-Doomer 's answer to the question.
Script
<script type="text/javascript">
$(function () {
$('select').filter(function () {
return $(this).val() == "";
}).addClass('hidden-print');
$('select').change(function () {
if ($(this).val() == "") {
$(this).addClass('hidden-print');
} else {
$(this).removeClass('hidden-print');
}
});
});
</script>
CSS class:
.hidden-print{
display: none !important;
}
The filter() function works for when user try to print the page without touch any of the dropdown boxs.
The change() function works for when user try to print the page after changing the value of dropdown box.

get ID of clicked control

Using jQuery I'm trying to get the id of control, which I clicked (radiobutton). I read this question and tried almost everything from there:
alert($(this).get(0).id);
alert($(this).id);
alert($(this).attr('id'));
alert(this.id);
But I'm always getting: Undefined
I just don't understand what I'm doing wrong.
UPDATED:
Radiobuttons is generated dynamically in code behind by C#:
controlToReturn = new RadioButton
{
ID = controlId
};
((RadioButton)controlToReturn).Text = text;
((RadioButton)controlToReturn).Checked = Convert.ToBoolean(Convert.ToInt32(value));
((RadioButton)controlToReturn).GroupName = groupName;
((RadioButton)controlToReturn).CssClass = cssClass;
((RadioButton)controlToReturn).Attributes.Add("runat", "server");
((RadioButton)controlToReturn).Attributes.Add("onclick", "Show();");
and function in ASPX:
<script type="text/javascript" language="javascript">
function Show() {
if ($(this).cheked = true) {
console.log(this);
alert($(this).get(0).id);
alert($(this).id);
alert($(this).attr('id'));
alert(this.id);
}
}
</script>
I know radiobutton has id, I checked generated HTML.

Your problem is this has no context within your function and is in fact the window itself.
You would need to modify both the output html to provide context as an argument:
((RadioButton)controlToReturn).Attributes.Add("onclick", "Show(this);");
and change the function Show:
function Show(el) {
/* for jQuery use $(el) */
if(el.checked) {
alert(el.id);
}
}

C#:
((RadioButton)controlToReturn).Attributes.Add("onclick", "Show(this);");
JavaScript:
function Show(radio) {
if (radio.checked) {
alert(radio.id);
}
}

To attach a click-listener and alert the ID, your code would look something like this:
​$(function () {
$("input[type='radio']").on("click", function () {
alert(this.id);
});
});​
A working demo: http://jsfiddle.net/SSBnV/1/

onclick div colour should change

Am having several boxes(more than 100) that will create dynamically with
<div id="window5"></div>
<div id="window18"></div>
<div id="window190"></div>
Now If i click on one box the colour should be red,then if i click on the other box the colour should be changed to red(the first box colour should come to normal).I used some code like this,but it is not taking the css class.
How can i get the dynmic id of this case.
css file:
.selected{
color: red;
}
used javasscript code as;
<script type="text/javascript">
$(document).ready(function () {
$("div[id *= 'window']").click(function (e) {
$(".selected").removeClass("selected");
$(this).addClass("selected");
e.stopPropagation();
});
$(document).click(function () {
$(".selected").removeClass("selected");
});
});
</script>

That's because they are generated.
You have to use the .on statement.
$("div[id *= 'window']").on('click', function (e) {
If you're using a version of jQuery older than 1.7 please use .live() instead:
$("div[id *= 'window']").live('click', function (e) {

You will have to use jquery's .live or .on because you generate divs dynamically.
To change background color of the divs, you'll have to use 'background-color' in css instead of 'color'.
http://jsfiddle.net/fFcua/

activate/deactivate javascript on button click

I am using a javascript to zoom an image on my asp.net web page. I want to put 2 buttons on it like "Zoom" "Cancel Zoom" and accordingly activate/deactivate the javascript functionality. Right now I have a css class on which the javascript operated to produces the zoom effect. The image is like:
<a id="big" href="source of image" class"classforzoom">
<img id="small" src="some small image on page" />
</a>
<script type="text/javascript">
$(document).ready(function () {
var options = {
//some code here
};
$(".jqzoom").jqzoom(options);
});
</script>
How do I programmatically do this on the onClick events on the 2 buttons?
This is what I am using in the head tag of my page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Related toggleclass() method:
toggleClass: function(F,E) {
if(typeof E!=="boolean") {
E = !o.className.has(this,F)
}
o.className[E?"add":"remove"](this,F)
}

Deactivate
$("a#cancelzoom").click(function(event)
{
$('.classforzoom').unbind();
event.preventDefault();
});
Activate
$("a#zoom").click(function(event)
{
$('.classforzoom').jqzoom(options);
$('.classforzoom').bind();
event.preventDefault();
});

Did you check out the jQuery click method and then use the unbind method to remove an event from an object?

Also since you say you are using a css class for the zoom effect check out the toggleClass() method.

how to run href="#var=something" before onclick function fires in javascript?

i'm using the below javascript to change an image on an aspx in asp.net c#
<script language="JavaScript" type="text/javascript">
var updateImageWhenHashChanges = function()
{
theImage = document.getElementById("ctl00_ContentPlaceHolder1_Image1a");
if(window.location.hash == "#size=2")
{
theImage.src = "<%# Eval("realfilename", "/files/l{0}") %>";
}
else if(window.location.hash == "#size=3")
{
theImage.src = "<%# Eval("realfilename", "/files/{0}") %>";
}
else if(window.location.hash == "#size=1")
{
theImage.src = "<%# Eval("fullthumbname", "/thumbnails/{0}") %>";
}
else
{
}
}
</script>
here's how i call it with a link
test
the problem is that it only does what i'm expecting on the SECOND click of the link, because it seems onclick fires before the href, so the first time i'm just placing the var and the 2nd time i'm actually getting what i want.
does anyone know how i can fix this? i'm trying to get the image to change on each click

Perhaps you can replace your href with javascript:void(0) and then handle the link's "natural" click behavior at the end of your onclick() script.

Have you tried a different event like onmouseup or onunload?

You should pass in the current anchor's href to the function call and then use that in your if statements, then return false so that the default behavior isn't used.
var updateImageWhenHashChanges = function(pChoice)
{
theImage = document.getElementById("ctl00_ContentPlaceHolder1_Image1a");
if(pChoice == "size2")
{
// more lines of picking and choosing... and finally:
return false;
and then in the anchor
test
It would also be much better if you could use your databinding to put the real href of the image into the href of the anchor so that if JavaScript wasn't enable the user would still end up being able to see the image in question. Then your function code would just be getting a handle to the image and setting the source to that inbound param.

What about something like this:
<script type="text/javascript">
var updateImageSize = function(imageType, imageID)
{
thisImage = document.getElementById(imageID);
switch(imageType)
{
case "thumb":
// change image src to the thumbnail's path
thisImage.src = "YourThumbNailPath";
case "medium":
// change image src to medium image path
thisImage.src = "YourMediumImagePath";
case "large":
// you get the picture
thisImage.src = "YourLargeImagePath";
default:
// whatever you want it to default to
thisImage.src = "YourThumbNailPath";
}
}
</script>
Then the implementation:
Update Image
Hope that helps.