Best control with image and onClick to call javascript function - javascript

What is the best control which can display image, call javascript and do it without postback? maybe even change an image on hover?

You're looking for the <img> tag.

A HTML Element of your choice I suppose:
<div style="background: pink url(/image.png);" onclick="alert('javascript')">
</div>
CSS:
div:hover {
background: lightgreen url(/image2.png);
}

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">

How to make one element get hovered when hover on other element

I need such a scenario at where if anyone hover on a div, another div will be hovered. Just like:
HTML
<div class="box"></div>
<div class="link-box">
Touch the Grey Box and I get hovered!
</div>
CSS:
.link-box a:hover {
color: red;
}
Foddle Work
If anyone hover on the div.box, div.link-box will get hovered I mean get the red color. Is it possible? Please, don't tell it like this CSS way:
.box:hover .link-box a {
color: red;
}
My scenario is not like this. I've more complex scenario. So, it's only possible with jQuery. As I ain't good at jQuery, I can't write the script. That's why I need your help. What's the jQuery for it? May be, something like this?
$('.box').hover(function(){
$('.link-box').hover();
});
..............................................Update..................................
All the answer is related with CSS. Basically, div.link-box is such a complex div at my webpage that if anyone hover on the div.link-box many action happened, like pop-up box coming, multiple child elements of div.link-boxwill change. All happened with jQuery + CSS. And I need all the hover action of div.link-box when anyone hover on div.box. I just make here div.link-box as a link to make you understand my problem. But, basically it's not just css change. So, is it possible to bring all div.link-box hover action by hover on another div/button/link just like div.box by jQuery ?
As long as they stay in the same layout you can use the adjacent selector (+) in css.
Updated Fiddle
.link-box a:hover, .box:hover + .link-box a{
color: red;
}
The important thing to remember about the adject selector is that the two divs have to have the same parent, and the box has to immediately precede the second div.
More information on the adjacent selector
Edit:
Another option would be to wrap both divs in another div, and use the hover of the wrapper div.
This second option doesn't have the drawbacks of using the adjacent selector. As long as the anchor is anywhere inside of the wrapper, it will be styled when any part of the wrapper is hovered.
FIDDLE
Like so:
<div class='box-wrapper'>
<div class="box"></div>
<div class="link-box"> Touch the Grey Box and I get hovered!
</div>
</div>
with the following style:
.box-wrapper:hover a {
color: red;
}
Create a CSS class called "hover" (to affect you a make it .hover a)
.hover a
{
color: red;
}
Then your JQuery would read:
$('.box').hover(function(){
$(".link-box").toggleClass("hover");
});
Instead of the :hover css selector, I would use classes.
CSS:
.hover{
color:red;
}
JS:
$('.box').hover(
function(){
$('.link-box').addClass('.hover');
},
function(){
$('.link-box').removeClass('hover');
}
);

How to keep the background color persistent in css active?

I have a image, when user clicks on it I am changing the background color of it. for ex:
HTML:
<img src="images/image1.png" />
CSS:
img:active{
background-color:red;
}
But the red color is not persistent. and the red color is replaced with the old color. How can I make it persistent ?
OnClick functionality isn't achievable solely through CSS. You will need to use javascript to achieve this.
Just use jQuery:
$('img').click(function(){
$(this).addClass('red');
});
then in css make sure you have something like this:
img.red {
background-color:red;
}
As others pointed out, you should use javascript with onclick event handler, save the clicked element's state and toggle at right time... However I would like to introduce this work-around without using any script, it uses some focusable wrapper (like a button) to mimic other unfocusable element (like the image) and use the :focus pseudo-class to style the active element (as you understand, it can be in such a state by clicking or tabbing):
HTML:
<button class="wrapper">
<img/>
</button>
CSS:
.wrapper > img {
background-color:inherit;
width:200px;
height:200px;
}
.wrapper {
border:none;
padding:0;
cursor:default;
}
.wrapper:focus {
background-color:red;
outline:none;
}
Here is the working fiddle, try clicking the image and then clicking on some point outside to see it in action.

Div breaks jQuery accordion

I have a jQuery accordion that breaks when I need to place a div-tag in one of the sliding open areas.. How do I get around this? I need to put a div-tag since I cannot make a nice box out of a span-tag. Anyone knows a way around this??
Please see my demo here to see where it breaks :(
http://jsfiddle.net/zRqYM/
You should probably change this:
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
to:
$(this).next("div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
and the CSS:
.accordion2 > div {
background: #f7f7f7;
/* etc... */
It makes more sense to use a DIV instead of P if you want to put other elements inside the expandable content: http://jsfiddle.net/zRqYM/13/
Or just use inline elements inside the P tag and style them to display:block;, but it doesn’t make semantic sense to me.
This seems a bit lame, but you can use a span and just set it to display: block. Then it's essentially a div: http://jsfiddle.net/zRqYM/5/
Why cant you put it in a span and style the span as a nice box with display block?
You can use a span-tag. All you need to do is add the following styling for your span-tag class in the css
.whatever {
border: 1px solid #000;
display: inline-block;
margin: 0 5px;
}
There is a different way to try your accordion without messing around with CSS
Get your HTML done as follows;
<div id='accordion'>
<h3>Title of the view</h3>
<div>
all the stuff you want to do here
</div>
<h3>Title of the view</h3>
<div>
all the stuff you want to do here
</div>
</div>
and make your script file as
$('#accordion').accordion({ active: 0 });
For more info: visit http://jqueryui.com/demos/accordion
I've updated your jsfiddle: http://jsfiddle.net/zRqYM/21/ and changed your p tags to div tags since it allows the most tag nesting.
As a general rule, a div tag cannot be inside of a p tag since it will cause the p tag to close itself.

Changing The Size of Twitter's Follow Button?

I'm looking at the new Twitter Follow Button (https://twitter.com/about/resources/followbutton), but unfortunately my sidebar is smaller than the default size, thus throwing my whole site out of whack.
Is there an easy way to hack the script to resize the button, or at least to put a line break between the actual follow button and the account name?
If you look at the page source, then your twitter code converts from
<div class="twitter">
<!-- twitter code here -->
</div>
to
<div class="twitter">
<iframe ...>...</iframe>
</div>
Now it's easy to change the width of the button via css:
.twitter iframe {
width: 80px !important;
}
I'd wrap the button in a container with a nice class name and use CSS to adjust the styling.
.twitter-button-container{
width: 100px;
height:100px;
}
Something like that.
UPDATE
On second thought, it seems that the image is a background image to the anchor tag. I don't think it's possible to resize background images using CSS etc. You'd need to have the image in an img tag.

Categories