Javascript onClick change border of image on ASP Page - javascript

I have an ASP page that has 5 ASP ImageButtons. The images can be clicked and then a few things happen in the code behind. I also want the images to be outlined with a border when the user clicks it so they know that one has been selected. I am using javascript to accomplish the outline with a border. But my problem is that the border applies then the page refreshed and the border is gone. I know that the Imagebuttons are causing a post back, but how can I keep my ImageButtons outline after the postback?
Javascript:
<script language="JavaScript" type="text/javascript">
function chnageborder(imageid)
{
document.getElementById(imageid).style.border = "solid 2px #2F74D0";
}
</script>
ASP Imagebutton:
<asp:ImageButton
ID="Image1" runat="server"
style="width: 48px; height: 48px; margin-right: 5px;" OnClick="Image1_Click" OnClientClick="javascript:chnageborder('Image1'); return true;"/>

You have to handle that in the server side. Basically the style can be applied in the postback of the particular image button click event.
void Image1_Click()
{
Image1.Styles.Add("border" , "solid 2px #2F74D0");
//And you need to revert the styles of the other buttons if they already have the selected style
Image2.Style["border"] = "";
.
.
Image5.Style["border"] = "";
}
Or if you want to do it in a more cleaner way, you can adopt one css class and apply that class in the code behind as one answer suggest below. You might need another css class to have the un-selected style and apply that same as above to make them look normal.

Define your border within a class selector in CSS, then apply that class to your image in the code-behind on PostBack.
CSS
.selected { border: 2px solid #2F74D0};
C#
Image1.CssClass = "selected";
It's worth noting that this is a basic example and will overwrite any existing classes. If you want to add to the class collection, this answer provides a solution.

Try this
void Image1_Click()
{
Image1.Attributes.Add("Style" , "Border:solid 2px #2F74D0");
}

Related

Add colour frame to image onClick

I want, when something happens (Ex: Click a button), that my image creates a frame around. Something like this:
Image before, without the frame
Image after click, with the frame
Can I do that with CSS?
I don't want to have two links nor two images. I want that "transformation" happens to the original image.
EDIT: I know I don't have any code, but that's because I don't have any function or idea from CSS functions. So you don't need to write code, only to tell me what to use. Hope you understand
You should use javascript onClick event handler and css border property.
Your html image and button tag.
<img src='yourimage.jpg' id='myimg'>
<button onclick="add_frame()">add frame</button>
The javascript
function add_frame(){
document.getElementById('myimg').style.border = "2px solid red";
}
Here is an example using jquery.
Add a class to any image that you want to be able to add a border to (.border-on-click), this should include a transparent border within it's CSS (if you don't do this, your elements will move around the page when the border is toggled and takes up extra space).
In the example below you can toggle the border on and off with a click.
It acts upon the image you clicked only.
Let me know if this wasn't what you wanted.
$(".border-on-click").click( function() {
$(this).toggleClass("framed");
});
img.border-on-click {
border: 4px solid transparent;
transition: all 0.5s ease;
}
img.border-on-click.framed {
border: 4px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="border-on-click" src="https://via.placeholder.com/150">

Easiest way to make disabled button look disabled with jQuery

When I use .prop('disabled',true) to disable a button, it works, but the button does not look disabled. I remember in the old days when I used .attr('disabled','disabled') to disable buttons, they would become more visibly disabled, i.e. the text would be greyed out or something so the user wouldn't try to click. Now I think the button border fades a bit but the text is not.
What's the easiest way to get the old behavior back? I am lazy and don't want to write one line of code to disable the button and another to make it look disabled - I want to get both effects in a single command if possible. Should I use a different element other than a button? A different method of disabling?
I made a fiddle here: http://jsfiddle.net/ak2MG/. Here's the code.
HTML:
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
Javascript:
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true); } );
Or change the opacity of the button
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).css('opacity',0.5);
});
Fiddle
I would add a disabled class to the button.
This lets you control the styling from CSS instead of javascript so all of your styling is in one place (where it should be).
Demo: JSFiddle
HTML
<button type='button' id='mybutton'>Click Me</button>
<div id="mydiv"></div>
JS
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
$('#mybutton').prop('disabled',true).addClass('disabled');
});
CSS
.disabled {
color: #999;
}
it is pretty simple, just change the text style
$('#mybutton').click( function() {
$('#mydiv').append("<p>Button was clicked.</p>");
my_button_disable(this);
});
function my_button_disable(btn) {
$(btn).prop('disabled',true);
$(btn).css('color', 'lightgray');
// put whatever else you want here
}
http://jsfiddle.net/ak2MG/6/
Simplest - Add a state in CSS
Target it with CSS to change the style,
importantly the pointer-events: none will make it unresponsive. :
button:disabled {
background: #F5F5F5;
color : #C3C3C3;
cursor:none;
pointer-events: none;
}
The change from attr() to prop() was only to the jQuery API and has nothing to do with any difference you are observing in the style of a disabled button.
A disabled button's style is decided by the browser. The fiddle you provided looks very "disabled" in Google Chrome (Version 33.0.1750.154 m). If you'd like to alter the style of a disabled button to your liking, I recommend adding a class OR styling based on attribute
button[disabled],
button.disabled {
color: #999;
background: #DDD;
border: 1px solid #CCC;
}

Add a bottom border to displayed webview

My webview is using horizontal scrolling like a book to show the HTML contents. I am using scroll function to do this. My question is, how can I add a bottom border on every page using JS or jQuery?
I recommend using css to accomplish this. If you want your page's body to have a border, you would simply add this rule to your css:
body {
border-bottom:5px #f00 solid;
}
To accomplish this same result using jQuery, add this to your scripts:
$(document).ready(function() {
$('body').css({'border-bottom':'5px #f00 solid'});
});
Let me know if this accomplishes your goal!
Add a class to every page, then use that to add a border to all of them at once.
If the class name is page, then use this jQuery:
$(".page").css("border-bottom","1px solid black");
You can use any border style.

Making an image change once it is clicked

I’ve already spent hours looking at as many online resources and stackoverflow questions as I can find but for some reason I just can’t figure this out.
I’m attempting to use CSS and image sprites to make a link display as an image that changes once it is hovered over and once it has been clicked. I’ve played round with CSS and looked at JavaScript for far too long now and I just need some direction on how to get it working.
I’ve managed to make it change once its hovered over however what i really need to do is have the image change once it is clicked. So the begin with it displays the play button and when its clicked it displays a pause button, click it again and it displays the play button etc.
From what i can gather i will need to use JavaScript and an onclick event. However I’m not sure how this would work or how to use it with image sprites.
My CSS so far looks like this
.testclass .stratus {
background-position: -1px -1px;
width: 21px;
height: 21px;}.
.testclass .stratus:hover {background-position: -1px -29px; width: 21px; height:
21px;}.
However this only effects the play button and when it is hovered over. Now i need a way to display the pause button when the play button is clicked and vice versa.
Image sprites URL.
http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png
URL of page im trying to get this to work on.
http://www.priceofmilk.co.uk/uncategorized/ddd-2
Can this be achieved using CSS and HTML or will I also need to use some JavaScript? Any assistance would be much appreciated.
I made a simple example. I use background colors and an anchor but you can easy implement this in your situation.
update
Updated the code so it uses your images.
HTML
<a class="play_pause">PLAY</a>​
CSS
.play_pause {
display: block;
width: 24px;
height: 23px;
text-indent: -99999px;
background: url(http://www.danceyrselfclean.com/wp-content/uploads/2012/12/sprites.png);
cursor: pointer;
}
.playing {
background-position: -27px 0;
}
.playing:hover {
background-position: -27px -28px !important;
}
.play_pause:hover {
background-position: 0 -28px;
}​
And the JS:
$(document).ready(function() {
$(".play_pause").click(function() {
$(this).toggleClass('playing');
});
});​​
​
JsFiddle example
If you only wanted to detect the first click, you could do this in pure CSS by giving the link an id and using the :target pseudoclass (e.g. a#theid:target {...})
But since you need to detect a second click, you'll need to use JS to toggle between CSS classes. The basic way is to use an event handler:
document.getElementById('theid').onclick = function(){
this.className = this.className=='play' ? 'pause' : 'play';
};
You will have to use JavaScript to accomplish the switching, there is no way to accomplish such logic with pure CSS.
The easiest way to go would be to have two classes play and pause. Through CSS you declare which part of the sprite you want to show for each of those classes. Then you attach a click-event listener to the element with JavaScript, and in the click-event callback you remove class play from the element and apply class pause instead, and vice versa.
MDN has a good article on how to attach event-listeners to an element. And this SO question discuss how you can add/remove classes on an element.
That is simple where have you read?
jQuery('.testclass .stratus').click(function{
jQuery(this).toggleClass('played');
})
css:
.played{
background-position: -1px -29px;
}
Example using .querySelectorAll and .addEventListener, with your current sprite. No jQuery is used.
var elm = document.querySelectorAll('.testclass .stratus'), i = elm.length, e;
while (e = elm[--i])
e.addEventListener('click', function () { // this fn generates the listener
var pause = false; // captured in scope, not global
return function () { // this is the actual listener
this.style.backgroundPositionX = (pause = !pause)?'-20px':'0px';
}
}(), false); // the () invokes the generator

Prevent css interact in a div

I am doing a code that do some js injection of code in page, with JQuery. But in my input that i get in some pages modify it, I am putting all important attributes and define them as !important, but it's impossible to put all the attributes in all the tags.
Someone know how to disable all other css inside a div?
Solution I think:
I found a solution but i don't want to use it. Its eliminate al css from the page, while i am injecting the code after using that code I eliminate my css and code and apply the original code from the webpage
Thanks
If you're using that many !importants you're doing it wrong.
The solution to this problem is to properly organize your css. Important stuff last, because it overrides what was previously styled. Also use your selectors wisely. Example:
<a class="link">Link</a>
.
a:link { color: red; }
.
.
.
.link { color: green !important; } // Nop
a.link { color: green; } // Yup
If you override everything it will work with normal CSS rules on every page. Not what you were hoping for, but it is a solution.
css:
#myInsertDiv {
color: blue;
padding: 0;
margin: 0;
background: white;
border: 0px;
/* etc you have to restyle EVERY possible value */
}
html:
<div id="myInsertDiv"></div>
The main issue is you have to style every attribute, and reset everything else to a default value.
Or you can insert all the style information into the style attribute on the div, but that is probably doing it wrong too.
If I got you right you can use jQuery for modifying CSS properties on any elements of the page (huh), using something like this $('.Myclass').css('color','#ff0000')
And more about selectors in jQuery - http://api.jquery.com/category/selectors/

Categories